Fixed registration bug
This commit is contained in:
parent
cbbb703803
commit
56da195894
6 changed files with 193 additions and 17 deletions
|
@ -49,7 +49,16 @@ class RoomModal extends Component {
|
|||
}
|
||||
|
||||
setInitialState() {
|
||||
this.setState(this.initialState);
|
||||
for (let key in this.initialState) {
|
||||
if (this.initialState.hasOwnProperty(key)) {
|
||||
//console.log(key + " -> " + this.initialState[key]);
|
||||
this.setState({
|
||||
key: this.initialState[key],
|
||||
});
|
||||
}
|
||||
}
|
||||
console.log(this.initialState);
|
||||
//this.setState(state);
|
||||
}
|
||||
|
||||
get type() {
|
||||
|
|
|
@ -1,5 +1,14 @@
|
|||
import React, { Component } from "react";
|
||||
import { Button, Header, Modal, Icon, Responsive } from "semantic-ui-react";
|
||||
import {
|
||||
Button,
|
||||
Header,
|
||||
Modal,
|
||||
Icon,
|
||||
Responsive,
|
||||
Form,
|
||||
Input,
|
||||
Dropdown,
|
||||
} from "semantic-ui-react";
|
||||
import { connect } from "react-redux";
|
||||
import { RemoteService } from "../remote";
|
||||
import { appActions } from "../storeActions";
|
||||
|
@ -10,6 +19,7 @@ class SceneModal extends Component {
|
|||
super(props);
|
||||
this.state = this.initialState;
|
||||
this.setInitialState();
|
||||
this.getDevices();
|
||||
|
||||
this.addSceneModal = this.addSceneModal.bind(this);
|
||||
this.modifySceneModal = this.modifySceneModal.bind(this);
|
||||
|
@ -18,7 +28,9 @@ class SceneModal extends Component {
|
|||
|
||||
get initialState() {
|
||||
return {
|
||||
//INITIAL STATE HERE
|
||||
name: this.type === "new" ? "New Scene" : this.props.room.name,
|
||||
sceneDevices: this.type === "new" ? [{}] : [this.props.scene.devices],
|
||||
openModal: false,
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -30,6 +42,12 @@ class SceneModal extends Component {
|
|||
return !this.props.id ? "new" : "modify";
|
||||
}
|
||||
|
||||
getDevices() {
|
||||
this.props
|
||||
.fetchDevices()
|
||||
.catch((err) => console.error(`error fetching devices:`, err));
|
||||
}
|
||||
|
||||
addSceneModal = (e) => {
|
||||
/*let data = {
|
||||
// DATA HERE
|
||||
|
@ -81,7 +99,21 @@ class SceneModal extends Component {
|
|||
this.setState({ openModal: true });
|
||||
};
|
||||
|
||||
setSceneDevice(e, d) {
|
||||
this.setState({ sceneDevices: d.value });
|
||||
}
|
||||
|
||||
render() {
|
||||
const availableDevices = [];
|
||||
this.props.devices.forEach((e) => {
|
||||
if (!this.state.sceneDevices.includes(e)) {
|
||||
availableDevices.push({
|
||||
key: e.id,
|
||||
text: e.name,
|
||||
id: e.id,
|
||||
});
|
||||
}
|
||||
});
|
||||
return (
|
||||
<div>
|
||||
{!this.props.nicolaStop ? (
|
||||
|
@ -132,9 +164,30 @@ class SceneModal extends Component {
|
|||
{this.type === "new" ? "Add new scene" : "Modify scene"}
|
||||
</Header>
|
||||
<Modal.Content>
|
||||
{
|
||||
//TODO FORM TO ADD OR MODIFY SCENE
|
||||
}
|
||||
<Form>
|
||||
<p>Insert the name of the scene:</p>
|
||||
<Form.Field>
|
||||
<Input
|
||||
label="Scene name"
|
||||
placeholder="Scene Name"
|
||||
name="name"
|
||||
type="text"
|
||||
onChange={this.changeSomething}
|
||||
value={this.state.name}
|
||||
/>
|
||||
</Form.Field>
|
||||
<Form.Field>
|
||||
<label>Select devices you want to attach: </label>
|
||||
<Dropdown
|
||||
name="scene devices"
|
||||
placeholder="Select Devices"
|
||||
fluid
|
||||
multiple
|
||||
onChange={this.setSceneDevice}
|
||||
options={availableDevices}
|
||||
/>
|
||||
</Form.Field>
|
||||
</Form>
|
||||
|
||||
{this.type === "modify" ? (
|
||||
<Button
|
||||
|
@ -176,6 +229,16 @@ const setActiveScene = (activeScene) => {
|
|||
};
|
||||
|
||||
const mapStateToProps = (state, ownProps) => ({
|
||||
get devices() {
|
||||
if (state.active.activeRoom === -1) {
|
||||
return Object.values(state.devices);
|
||||
} else {
|
||||
const deviceArray = [
|
||||
...state.rooms[state.active.activeRoom].devices,
|
||||
].sort();
|
||||
return deviceArray.map((id) => state.devices[id]);
|
||||
}
|
||||
},
|
||||
scene: ownProps.id ? state.scenes[ownProps.id] : null,
|
||||
});
|
||||
const SceneModalContainer = connect(
|
||||
|
|
87
smart-hut/src/components/dashboard/NewSceneDevice.js
Normal file
87
smart-hut/src/components/dashboard/NewSceneDevice.js
Normal file
|
@ -0,0 +1,87 @@
|
|||
import React, { Component } from "react";
|
||||
import { Button, Modal, Icon, Image } from "semantic-ui-react";
|
||||
import { connect } from "react-redux";
|
||||
import { RemoteService } from "../../remote";
|
||||
import styled from "styled-components";
|
||||
//import { appActions } from "../../storeActions";
|
||||
|
||||
const StyledDiv = styled.div`
|
||||
background-color: #505bda;
|
||||
padding: 3rem;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
border-radius: 100%;
|
||||
border: none;
|
||||
position: relative;
|
||||
box-shadow: 3px 2px 10px 5px #ccc;
|
||||
transition: all 0.3s ease-out;
|
||||
:hover {
|
||||
background-color: #4345d9;
|
||||
}
|
||||
:active {
|
||||
transform: translate(0.3px, 0.8px);
|
||||
box-shadow: 0.5px 0.5px 7px 3.5px #ccc;
|
||||
}
|
||||
`;
|
||||
|
||||
class NewSceneDevice extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
openModal: false,
|
||||
};
|
||||
}
|
||||
|
||||
handleOpen = () => {
|
||||
this.setState({ openModal: true });
|
||||
};
|
||||
handleClose = () => {
|
||||
this.setState({ openModal: false });
|
||||
};
|
||||
|
||||
resetState = () => {
|
||||
this.setState(this.baseState);
|
||||
this.handleClose();
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Modal
|
||||
closeIcon
|
||||
open={this.state.openModal}
|
||||
onClose={this.resetState}
|
||||
trigger={
|
||||
<StyledDiv onClick={this.handleOpen}>
|
||||
<Image src="/img/add.svg" style={{ filter: "invert()" }} />
|
||||
</StyledDiv>
|
||||
}
|
||||
centered={true}
|
||||
>
|
||||
<Modal.Header>Add a New Scene Device</Modal.Header>
|
||||
<Modal.Content></Modal.Content>
|
||||
<Modal.Actions>
|
||||
<Button
|
||||
onClick={this.createDevice}
|
||||
color="blue"
|
||||
icon
|
||||
labelPosition="right"
|
||||
>
|
||||
<Icon name="up arrow" />
|
||||
Finish
|
||||
</Button>
|
||||
</Modal.Actions>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state, _) => ({
|
||||
devices: Object.values(state.devices),
|
||||
activeRoom: state.active.activeRoom,
|
||||
});
|
||||
const NewSceneDeviceContainer = connect(
|
||||
mapStateToProps,
|
||||
RemoteService
|
||||
)(NewSceneDevice);
|
||||
export default NewSceneDeviceContainer;
|
|
@ -1,21 +1,36 @@
|
|||
import React, { Component } from "react";
|
||||
import { connect } from "react-redux";
|
||||
import { RemoteService } from "../../remote";
|
||||
import NewSceneDevice from "./NewSceneDevice";
|
||||
import { Grid } from "semantic-ui-react";
|
||||
|
||||
class ScenesPanel extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
console.log(this.props.activeRoom, this.props.activeTab);
|
||||
console.log(this.props.activeScene);
|
||||
}
|
||||
|
||||
render() {
|
||||
return <h1 color="black">SCENES</h1>;
|
||||
return (
|
||||
<Grid doubling columns={2} divided="vertically">
|
||||
{
|
||||
//TODO DISPLAY DEVICES IN SCENE
|
||||
}
|
||||
{this.props.isActiveDefaultScene ? (
|
||||
<Grid.Column>
|
||||
<NewSceneDevice />
|
||||
</Grid.Column>
|
||||
) : null}
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state, _) => ({
|
||||
activeRoom: state.active.activeRoom,
|
||||
activeTab: state.active.activeTab,
|
||||
get isActiveDefaultScene() {
|
||||
return state.active.activeScene === -1;
|
||||
},
|
||||
activeScene: state.active.activeScene,
|
||||
});
|
||||
const ScenesPanelContainer = connect(
|
||||
mapStateToProps,
|
||||
|
|
|
@ -39,8 +39,8 @@ const Endpoint = {
|
|||
* @param {[String]String} query query ('?') parameters (no params by default)
|
||||
* @param {any} body the JSON request body
|
||||
*/
|
||||
send: (method, route, query = {}, body = null) => {
|
||||
if (!Endpoint.token) {
|
||||
send: (method, route, query = {}, body = null, registration) => {
|
||||
if (!registration && !Endpoint.token) {
|
||||
throw new Error("No token while performing authenticated request");
|
||||
}
|
||||
|
||||
|
@ -48,9 +48,11 @@ const Endpoint = {
|
|||
method: method,
|
||||
params: query,
|
||||
data: ["put", "post"].indexOf(method) !== -1 ? body : null,
|
||||
headers: {
|
||||
Authorization: `Bearer ${Endpoint.token}`,
|
||||
},
|
||||
headers: !registration
|
||||
? {
|
||||
Authorization: `Bearer ${Endpoint.token}`,
|
||||
}
|
||||
: {},
|
||||
}).then((res) => {
|
||||
if (!res.data && method !== "delete") {
|
||||
console.error("Response body is empty");
|
||||
|
@ -109,7 +111,7 @@ const Endpoint = {
|
|||
* @returns {Promise<*, *>} The Axios-generated promise
|
||||
*/
|
||||
post(route, query, body) {
|
||||
return this.send("post", route, query, body);
|
||||
return this.send("post", route, query, body, true);
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
|
@ -31,7 +31,7 @@ class Login extends Component {
|
|||
.login(this.state.user, this.state.password)
|
||||
.then(() => this.props.history.push("/dashboard"))
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
console.log("CIAO", err);
|
||||
this.setState({
|
||||
error: { state: true, message: err.messages.join(" - ") },
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue