Merge branch 'dev' into 'dashboard-videocamera'

# Conflicts:
#   smart-hut/src/components/dashboard/devices/Device.js
This commit is contained in:
Matteo Omenetti 2020-04-22 16:35:09 +02:00
commit 2f3ede238f
24 changed files with 1759 additions and 300 deletions

View file

@ -0,0 +1,190 @@
import React, { Component } from "react";
import { Button, Header, Modal, Icon, Responsive } from "semantic-ui-react";
import { connect } from "react-redux";
import { RemoteService } from "../remote";
import { appActions } from "../storeActions";
//import { update } from "immutability-helper";
class AutomationModal extends Component {
constructor(props) {
super(props);
this.state = this.initialState;
this.setInitialState();
this.addAutomationModal = this.addAutomationModal.bind(this);
this.modifyAutomationModal = this.modifyAutomationModal.bind(this);
this.deleteAutomation = this.deleteAutomation.bind(this);
}
get initialState() {
return {
//INITIAL STATE HERE
};
}
setInitialState() {
this.setState(this.initialState);
}
get type() {
return !this.props.id ? "new" : "modify";
}
addAutomationModal = (e) => {
/*let data = {
// DATA HERE
};*/
// TODO CALL TO REMOTE SERVER TO ADD SCENE
/*this.props
.saveRoom(data, null)
.then(() => {
this.setInitialState();
this.closeModal();
})
.catch((err) => console.error("error in creating room", err));*/
};
modifyAutomationModal = (e) => {
/* let data = {
// DATA HERE
};*/
// TODO CALL TO REMOTE SERVER TO MODIFY SCENE
/*this.props
.saveRoom(data, this.props.id)
.then(() => {
this.setInitialState();
this.closeModal();
})
.catch((err) => console.error("error in updating room", err));*/
};
deleteAutomation = (e) => {
// TODO CALL TO REMOTE SERVER TO DELETE SCENE
/*
this.props
.deleteRoom(this.props.id)
.then(() => this.closeModal())
.catch((err) => console.error("error in deleting room", err));*/
};
changeSomething = (event) => {
let nam = event.target.name;
let val = event.target.value;
this.setState({ [nam]: val });
};
closeModal = (e) => {
this.setState({ openModal: false });
};
openModal = (e) => {
this.setState({ openModal: true });
};
render() {
return (
<div>
{!this.props.nicolaStop ? (
<div>
<Responsive minWidth={768}>
{this.type === "new" ? (
<Button
icon
labelPosition="left"
inverted
onClick={this.openModal}
>
<Icon name="plus" size="small" />
ADD AUTOMATION
</Button>
) : (
<Icon name="pencil" size="small" onClick={this.openModal} />
)}
</Responsive>
<Responsive maxWidth={768}>
{this.type === "new" ? (
<Button
icon
fluid
labelPosition="left"
onClick={this.openModal}
>
<Icon name="plus" size="small" />
ADD AUTOMATION
</Button>
) : (
<Button
icon
fluid
labelPosition="left"
onClick={this.openModal}
>
<Icon name="pencil" size="small" />
EDIT AUTOMATION
</Button>
)}
</Responsive>
</div>
) : null}
<Modal closeIcon onClose={this.closeModal} open={this.state.openModal}>
<Header>
{this.type === "new" ? "Add new automation" : "Modify automation"}
</Header>
<Modal.Content>
{
//TODO FORM TO ADD OR MODIFY SCENE
}
{this.type === "modify" ? (
<Button
icon
labelPosition="left"
inverted
color="red"
onClick={this.deleteAutomation}
>
<Icon name="trash alternate" />
Delete Automation
</Button>
) : null}
</Modal.Content>
<Modal.Actions>
<Button color="red" onClick={this.closeModal}>
<Icon name="remove" />{" "}
{this.type === "new" ? "Cancel" : "Discard changes"}
</Button>
<Button
color="green"
onClick={
this.type === "new"
? this.addAutomationModal
: this.modifyAutomationModal
}
>
<Icon name="checkmark" />{" "}
{this.type === "new" ? "Add automation" : "Save changes"}
</Button>
</Modal.Actions>
</Modal>
</div>
);
}
}
const setActiveAutomation = (activeAutomation) => {
return (dispatch) =>
dispatch(appActions.setActiveAutomation(activeAutomation));
};
const mapStateToProps = (state, ownProps) => ({
automations: ownProps.id ? state.automations[ownProps.id] : null,
});
const AutomationModalContainer = connect(
mapStateToProps,
{ ...RemoteService, setActiveAutomation },
null,
{ forwardRef: true }
)(AutomationModal);
export default AutomationModalContainer;

View file

@ -57,7 +57,9 @@ export class MyHeader extends React.Component {
{this.props.username}
</Label>
<Divider />
<Button onClick={this.logout}>Logout</Button>
<Button basic inverted onClick={this.logout}>
Logout
</Button>
</Grid.Column>
</Grid.Row>
</Grid>

View file

@ -0,0 +1,204 @@
import React, { Component } from "react";
import {
Button,
Header,
Modal,
Icon,
Responsive,
Form,
Input,
} from "semantic-ui-react";
import { connect } from "react-redux";
import { RemoteService } from "../remote";
import { appActions } from "../storeActions";
//import { update } from "immutability-helper";
class SceneModal extends Component {
constructor(props) {
super(props);
this.state = this.initialState;
this.setInitialState();
this.addSceneModal = this.addSceneModal.bind(this);
this.modifySceneModal = this.modifySceneModal.bind(this);
this.deleteScene = this.deleteScene.bind(this);
}
get initialState() {
return {
name: this.type === "new" ? "New Scene" : this.props.scene.name,
openModal: false,
};
}
setInitialState() {
this.setState(this.initialState);
}
get type() {
return !this.props.id ? "new" : "modify";
}
addSceneModal = (e) => {
let data = {
name: this.state.name,
};
this.props
.saveScene(data, null)
.then(() => {
this.setInitialState();
this.closeModal();
})
.catch((err) => console.error("error in creating room", err));
};
modifySceneModal = (e) => {
let data = {
name: this.state.name,
};
this.props
.saveScene(data, this.props.id)
.then(() => {
this.setInitialState();
this.closeModal();
})
.catch((err) => console.error("error in updating room", err));
};
deleteScene = (e) => {
this.props
.deleteScene(this.props.id)
.then(() => this.closeModal())
.catch((err) => console.error("error in deleting room", err));
};
changeSomething = (event) => {
let nam = event.target.name;
let val = event.target.value;
this.setState({ [nam]: val });
};
closeModal = (e) => {
this.setState({ openModal: false });
};
openModal = (e) => {
this.setState({ openModal: true });
};
render() {
return (
<div>
{!this.props.nicolaStop ? (
<div>
<Responsive minWidth={768}>
{this.type === "new" ? (
<Button
icon
labelPosition="left"
inverted
onClick={this.openModal}
>
<Icon name="plus" size="small" />
ADD SCENE
</Button>
) : (
<Icon name="pencil" size="small" onClick={this.openModal} />
)}
</Responsive>
<Responsive maxWidth={768}>
{this.type === "new" ? (
<Button
icon
fluid
labelPosition="left"
onClick={this.openModal}
>
<Icon name="plus" size="small" />
ADD SCENE
</Button>
) : (
<Button
icon
fluid
labelPosition="left"
onClick={this.openModal}
>
<Icon name="pencil" size="small" />
EDIT SCENE
</Button>
)}
</Responsive>
</div>
) : null}
<Modal closeIcon onClose={this.closeModal} open={this.state.openModal}>
<Header>
{this.type === "new" ? "Add new scene" : "Modify scene"}
</Header>
<Modal.Content>
<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>
{this.type === "modify" ? (
<Button
icon
labelPosition="left"
inverted
color="red"
onClick={this.deleteScene}
>
<Icon name="trash alternate" />
Delete Scene
</Button>
) : null}
</Modal.Content>
<Modal.Actions>
<Button color="red" onClick={this.closeModal}>
<Icon name="remove" />{" "}
{this.type === "new" ? "Cancel" : "Discard changes"}
</Button>
<Button
color="green"
onClick={
this.type === "new" ? this.addSceneModal : this.modifySceneModal
}
>
<Icon name="checkmark" />{" "}
{this.type === "new" ? "Add scene" : "Save changes"}
</Button>
</Modal.Actions>
</Modal>
</div>
);
}
}
const setActiveScene = (activeScene) => {
return (dispatch) => dispatch(appActions.setActiveScene(activeScene));
};
const mapStateToProps = (state, ownProps) => ({
scene: ownProps.id ? state.scenes[ownProps.id] : null,
});
const SceneModalContainer = connect(
mapStateToProps,
{ ...RemoteService, setActiveScene },
null,
{ forwardRef: true }
)(SceneModal);
export default SceneModalContainer;

View file

@ -0,0 +1,23 @@
import React, { Component } from "react";
import { connect } from "react-redux";
import { RemoteService } from "../../remote";
class AutomationsPanel extends Component {
constructor(props) {
super(props);
}
render() {
return <h1 color="black">AUTOMATIONS</h1>;
}
}
const mapStateToProps = (state, _) => ({
activeRoom: state.active.activeRoom,
activeTab: state.active.activeTab,
});
const AutomationsPanelContainer = connect(
mapStateToProps,
RemoteService
)(AutomationsPanel);
export default AutomationsPanelContainer;

View file

@ -2,7 +2,6 @@
import React, { Component } from "react";
import { Grid } from "semantic-ui-react";
import { panelStyle } from "./devices/styleComponents";
import Device from "./devices/Device";
import NewDevice from "./devices/NewDevice";
import { connect } from "react-redux";
@ -16,29 +15,29 @@ class DevicePanel extends Component {
}
getDevices() {
this.props
.fetchDevices()
.catch((err) => console.error(`error fetching devices:`, err));
if (this.props.tab === "Devices") {
this.props
.fetchDevices()
.catch((err) => console.error(`error fetching devices:`, err));
}
}
render() {
return (
<div style={panelStyle}>
<Grid doubling columns={2} divided="vertically">
{this.props.devices.map((e, i) => {
return (
<Grid.Column key={i}>
<Device id={e.id} />
</Grid.Column>
);
})}
{!this.props.isActiveRoomHome ? (
<Grid.Column>
<NewDevice />
<Grid doubling columns={2} divided="vertically">
{this.props.devices.map((e, i) => {
return (
<Grid.Column key={i}>
<Device tab={this.props.tab} id={e.id} />
</Grid.Column>
) : null}
</Grid>
</div>
);
})}
{!this.props.isActiveRoomHome ? (
<Grid.Column>
<NewDevice />
</Grid.Column>
) : null}
</Grid>
);
}
}

View file

@ -0,0 +1,142 @@
import React, { Component } from "react";
import { Button, Modal, Icon, Image, Form, Dropdown } 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,
sceneDevices: this.props.scene ? this.props.scene.sceneStates : {},
deviceName: "",
};
this.getDevices();
this.setSceneState = this.setSceneState.bind(this);
this.createState = this.createState.bind(this);
}
getDevices() {
this.props
.fetchDevices()
.catch((err) => console.error(`error fetching devices:`, err));
}
handleOpen = () => {
this.setState({ openModal: true });
};
handleClose = () => {
this.setState({ openModal: false });
};
resetState = () => {
this.setState(this.baseState);
this.handleClose();
};
setSceneState(e, d) {
this.setState({ devicesAttached: d.value });
}
createState() {
const device = this.props.devices.filter(
(e) => this.state.devicesAttached[0] === e.id
);
let data = {
sceneId: this.props.activeScene,
id: device[0].id,
kind: device[0].kind,
};
this.props
.saveState(data)
.catch((err) => console.error("error in creating state", err));
this.resetState();
}
render() {
const availableDevices = [];
this.props.devices.forEach((e) => {
if (!Object.keys(this.state.sceneDevices).find((d) => e.id === d)) {
availableDevices.push({
key: e.id,
text: e.name,
value: e.id,
});
}
});
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 State</Modal.Header>
<Modal.Content>
<Form>
<Form.Field style={{ marginTop: "1rem" }}>
<label>Select devices you want to attach: </label>
<Dropdown
name="scene devices"
placeholder="Select Devices"
fluid
multiple
onChange={this.setSceneState}
options={availableDevices}
/>
</Form.Field>
</Form>
</Modal.Content>
<Modal.Actions>
<Button
onClick={this.createState}
color="blue"
icon
labelPosition="right"
>
<Icon name="up arrow" />
Finish
</Button>
</Modal.Actions>
</Modal>
);
}
}
const mapStateToProps = (state, _) => ({
devices: Object.values(state.devices),
activeScene: state.active.activeScene,
});
const NewSceneDeviceContainer = connect(
mapStateToProps,
RemoteService
)(NewSceneDevice);
export default NewSceneDeviceContainer;

View file

@ -0,0 +1,57 @@
import React, { Component } from "react";
import { connect } from "react-redux";
import { RemoteService } from "../../remote";
import Device from "./devices/Device";
import NewSceneDevice from "./NewSceneDevice";
import { Grid } from "semantic-ui-react";
class ScenesPanel extends Component {
constructor(props) {
super(props);
}
render() {
return (
<Grid doubling columns={2} divided="vertically">
{!this.props.isActiveDefaultScene
? this.props.sceneStates.map((e, i) => {
return (
<Grid.Column key={i}>
<Device tab={this.props.tab} id={e} />
</Grid.Column>
);
})
: null}
{!this.props.isActiveDefaultScene ? (
<Grid.Column>
<NewSceneDevice />
</Grid.Column>
) : (
<Grid.Column>Welcome to the Scene View, you add a Scene</Grid.Column>
)}
</Grid>
);
}
}
const mapStateToProps = (state, _) => ({
get sceneStates() {
if (state.active.activeScene !== -1) {
const stateArray = [
...state.scenes[state.active.activeScene].sceneStates,
].sort();
return stateArray.map((id) => state.sceneStates[id]);
} else {
return [];
}
},
get isActiveDefaultScene() {
return state.active.activeScene === -1;
},
activeScene: state.active.activeScene,
});
const ScenesPanelContainer = connect(
mapStateToProps,
RemoteService
)(ScenesPanel);
export default ScenesPanelContainer;

View file

@ -34,19 +34,19 @@ class Device extends React.Component {
console.log(this.props.device)
switch (this.props.device.kind) {
case "regularLight":
return <Light id={this.props.id} />;
return <Light tab={this.props.tab} id={this.props.id} />;
case "sensor":
return <Sensor id={this.props.id} />;
return <Sensor tab={this.props.tab} id={this.props.id} />;
case "motionSensor":
return <Sensor id={this.props.id} />;
return <Sensor tab={this.props.tab} id={this.props.id} />;
case "buttonDimmer":
return <ButtonDimmer id={this.props.id} />;
return <ButtonDimmer tab={this.props.tab} id={this.props.id} />;
case "knobDimmer":
return <KnobDimmer id={this.props.id} />;
return <KnobDimmer tab={this.props.tab} id={this.props.id} />;
case "smartPlug":
return <SmartPlug id={this.props.id} />;
return <SmartPlug tab={this.props.tab} id={this.props.id} />;
case "switch":
return <Switcher id={this.props.id} />;
return <Switcher tab={this.props.tab} id={this.props.id} />;
case "dimmableLight":
return <Light id={this.props.id} />;
case "securityCamera":
@ -61,24 +61,36 @@ class Device extends React.Component {
<Segment>
<Grid columns={2}>
<Grid.Column>{this.renderDeviceComponent()}</Grid.Column>
<Grid.Column textAlign="center">
<Header as="h3">{this.props.device.name}</Header>
<Button color="blue" icon onClick={this.edit} labelPosition="left">
<Icon name="pencil" />
Edit
</Button>
{this.props.device.kind === "smartPlug" ? (
{this.props.tab === "Devices" ? (
<Grid.Column textAlign="center">
<Header as="h3">{this.props.stateOrDevice.name}</Header>
<Button
color="orange"
color="blue"
icon
onClick={this.resetSmartPlug}
onClick={this.edit}
labelPosition="left"
>
<Icon name="undo" />
Reset
<Icon name="pencil" />
Edit
</Button>
) : null}
</Grid.Column>
{this.props.stateOrDevice.kind === "smartPlug" ? (
<Button
color="orange"
icon
onClick={this.resetSmartPlug}
labelPosition="left"
>
<Icon name="undo" />
Reset
</Button>
) : null}
</Grid.Column>
) : (
<Grid.Column textAlign="center">
<Header as="h3">{this.props.stateOrDevice.name}</Header>
</Grid.Column>
)}
<DeviceSettingsModal ref={this.modalRef} id={this.props.id} />
</Grid>
</Segment>
@ -87,7 +99,14 @@ class Device extends React.Component {
}
const mapStateToProps = (state, ownProps) => ({
device: state.devices[ownProps.id],
get stateOrDevice() {
if (state.active.activeTab === "Devices") {
return state.devices[ownProps.id];
} else {
const sceneState = state.sceneStates[ownProps.id];
return state.devices[sceneState];
}
},
});
const DeviceContainer = connect(mapStateToProps, RemoteService)(Device);
export default DeviceContainer;

View file

@ -1,10 +1,18 @@
import React, { Component, useState } from "react";
import { Button, Form, Icon, Header, Modal } from "semantic-ui-react";
import { Button, Form, Icon, Header, Modal, Input } from "semantic-ui-react";
import { connect } from "react-redux";
import { RemoteService } from "../../../remote";
const DeleteModal = (props) => (
<Modal trigger={<Button color="red">Remove</Button>} closeIcon>
<Modal
trigger={
<Button icon labelPosition="left" inverted color="red">
<Icon name="trash alternate" />
Delete device
</Button>
}
closeIcon
>
<Header icon="archive" content="Are you sure ?" />
<Modal.Actions>
<Button color="red">
@ -28,13 +36,13 @@ const SettingsForm = (props) => {
return (
<Form>
<Form.Field>
<label>New Name: </label>
<input
<label>Edit Name: </label>
<Input
autoComplete="off"
name="name"
onChange={handleInputChange}
value={values.name}
placeholder="Device name"
placeholder={props.name}
// {this.props.device.name}
/>
</Form.Field>
@ -43,10 +51,11 @@ const SettingsForm = (props) => {
</Form.Field>
<Button
onClick={() => props.saveFunction(values)}
color="blue"
color="green"
type="submit"
>
Save
<Icon name="checkmark" />
Save changes
</Button>
</Form>
);
@ -63,15 +72,19 @@ class DeviceSettingsModal extends Component {
this.deleteDevice = this.deleteDevice.bind(this);
}
openModal() {
this.setState({ open: true });
}
closeModal = (e) => {
this.setState({ openModal: false });
};
openModal = (e) => {
this.setState({ openModal: true });
};
updateDevice(values) {
if (values.name.length === 0) return;
this.props
.saveDevice({ ...this.props.device, name: values.name })
.then(() => this.setState({ open: false }))
.then(() => this.setState({ openModal: false }))
.catch((err) =>
console.error(
`settings modal for device ${this.props.id} deletion error`,
@ -94,10 +107,11 @@ class DeviceSettingsModal extends Component {
render() {
const SettingsModal = () => (
<Modal open={this.state.open}>
<Modal closeIcon onClose={this.closeModal} open={this.state.openModal}>
<Modal.Header>Settings of {this.props.device.name}</Modal.Header>
<Modal.Content>
<SettingsForm
name={this.props.device.name}
type={this.props.device.type}
removeDevice={this.deleteDevice}
saveFunction={this.updateDevice}

View file

@ -44,6 +44,12 @@ class Light extends Component {
this.setIntensity = this.setIntensity.bind(this);
}
componentDidUpdate(prevProps, prevState) {
if (this.props.device.intensity !== prevProps.device.intensity) {
this.setState({ intensity: this.props.device.intensity, timeout: null });
}
}
get turnedOn() {
return this.props.device.on;
}

View file

@ -53,14 +53,29 @@ class Sensor extends Component {
this.colors = temperatureSensorColors;
this.icon = "temperatureIcon.svg";
this.name = "Sensor";
}
setName = () => {
if (this.props.device.name.length > 15) {
return this.props.device.name.slice(0, 12) + "...";
// setName = () => {
// if (this.props.device.name.length > 15) {
// return this.props.device.name.slice(0, 12) + "...";
// }
// return this.props.device.name;
// };
componentDidUpdate(prevProps) {
if (
this.props.device.kind === "sensor" &&
this.props.device.value !== prevProps.device.value
) {
this.setState({ value: this.props.device.value });
} else if (
this.props.device.kind === "motionSensor" &&
this.props.device.detected !== prevProps.device.detected
) {
this.setState({ motion: true, detected: this.props.device.detected });
}
return this.props.device.name;
};
}
componentDidMount() {
if (this.props.device.kind === "sensor") {
@ -69,16 +84,19 @@ class Sensor extends Component {
this.units = "ºC";
this.colors = temperatureSensorColors;
this.icon = "temperatureIcon.svg";
this.name = "Temperature Sensor";
break;
case "HUMIDITY":
this.units = "%";
this.colors = humiditySensorColors;
this.icon = "humidityIcon.svg";
this.name = "Humidity Sensor";
break;
case "LIGHT":
this.units = "lm";
this.colors = lightSensorColors;
this.icon = "lightSensorIcon.svg";
this.name = "Light Sensor";
break;
default:
this.units = "";
@ -117,7 +135,7 @@ class Sensor extends Component {
}}
>
<Image style={motionSensorIcon} src="/img/motionSensorIcon.svg" />
<span style={nameMotionStyle}>{this.props.device.name}</span>
<span style={nameMotionStyle}>Motion Sensor</span>
</div>
</div>
);
@ -162,7 +180,7 @@ class Sensor extends Component {
dy="0.4em"
fontWeight="bold"
>
{this.setName()} ({this.props.device.id})
{this.name}
</text>
</CircularInput>
<Image style={iconSensorStyle} src={`/img/${this.icon}`} />

View file

@ -18,11 +18,19 @@ export const editButtonStyle = {
};
export const panelStyle = {
position: "relative",
backgroundColor: "#fafafa",
height: "100vh",
width: "auto",
height: "85vh",
padding: "0rem 3rem",
color: "#000000",
overflow: "auto",
maxHeight: "75vh",
};
export const mobilePanelStyle = {
backgroundColor: "#fafafa",
minHeight: "100vh",
padding: "0rem 3rem",
color: "#000000",
};
export const editModeStyle = {

View file

@ -61,6 +61,28 @@ const Endpoint = {
});
},
/**
* Performs a non-authenticated post and put request for registration, reset-password
* @param {post} the desired method
* @param {String} route the desired route (e.g. "/rooms/1/devices")
* @param {[String]String} query query ('?') parameters (no params by default)
* @param {any} body the JSON request body
*/
sendNA: (method, route, query = {}, body = null) => {
return Endpoint.axiosInstance(route, {
method: method,
params: query,
data: ["put", "post"].indexOf(method) !== -1 ? body : null,
}).then((res) => {
if (!res.data) {
console.error("Response body is empty");
return null;
} else {
return res;
}
});
},
/**
* Performs login
* @param {String} usernameOrEmail
@ -112,6 +134,17 @@ const Endpoint = {
return this.send("post", route, query, body);
},
/**
* Performs a non-authenticated POST request
* @param {String} route the desired route (e.g. "/rooms/1/devices")
* @param {[String]String} query query ('?') parameters (no params by default)
* @param {any} body the JSON request body
* @returns {Promise<*, *>} The Axios-generated promise
*/
postNA(route, query, body) {
return this.sendNA("post", route, query, body);
},
/**
* Performs an authenticated PUT request
* @param {String} route the desired route (e.g. "/rooms/1/devices")
@ -123,6 +156,17 @@ const Endpoint = {
return this.send("put", route, query, body);
},
/**
* Performs a non-authenticated PUT request
* @param {String} route the desired route (e.g. "/rooms/1/devices")
* @param {[String]String} query query ('?') parameters (no params by default)
* @param {any} body the JSON request body
* @returns {Promise<*, *>} The Axios-generated promise
*/
putNA(route, query = {}, body = {}) {
return this.sendNA("put", route, query, body);
},
/**
* Performs an authenticated DELETE request
* @param {get|post|put|delete} the desired method
@ -227,6 +271,23 @@ export const RemoteService = {
};
},
/**
* Fetches all scenes that belong to this user. This call does not
* populate the devices attribute in scenes.
* @returns {Promise<Undefined, RemoteError>} promise that resolves to void and rejects
* with user-fiendly errors as a RemoteError
*/
fetchAllScenes: () => {
return (dispatch) => {
return Endpoint.get("/scene")
.then((res) => void dispatch(actions.scenesUpdate(res.data)))
.catch((err) => {
console.error("Fetch all scenes error", err);
throw new RemoteError(["Network error"]);
});
};
},
/**
* Fetches all devices in a particular room, or fetches all devices.
* This also updates the devices attribute on values in the map rooms.
@ -246,6 +307,25 @@ export const RemoteService = {
};
},
/**
* Fetches all devices in a particular scene, or fetches all devices.
* This also updates the devices attribute on values in the map scenes.
* @param {Number} sceneId the scene to which fetch devices
* from, null to fetch from all scenes
* @returns {Promise<Undefined, RemoteError>} promise that resolves to void and rejects
* with user-fiendly errors as a RemoteError
*/
fetchStates: (sceneId) => {
return (dispatch) => {
return Endpoint.get(`/scene/${sceneId}/states`)
.then((res) => void dispatch(actions.statesUpdate(sceneId, res.data)))
.catch((err) => {
console.error(`Fetch devices sceneId=${sceneId} error`, err);
throw new RemoteError(["Network error"]);
});
};
},
/**
* Creates/Updates a room with the given data
* @param {String} data.name the room's name,
@ -272,6 +352,28 @@ export const RemoteService = {
};
},
/**
* Creates/Updates a scene with the given data
* @param {String} data.name the scene's name,
* @param {Number|null} sceneId the scene's id if update, null for creation
* @returns {Promise<Undefined, RemoteError>} promise that resolves to void and rejects
* with user-fiendly errors as a RemoteError
*/
saveScene: (data, sceneId = null) => {
return (dispatch) => {
data = {
name: data.name,
};
return (sceneId
? Endpoint.put(`/scene/${sceneId}`, {}, data)
: Endpoint.post(`/scene`, {}, data)
)
.then((res) => void dispatch(actions.sceneSave(res.data)))
.catch(parseValidationErrors);
};
},
/**
* Creates/Updates a device with the given data. If
* data.id is truthy, then a update call is performed,
@ -303,6 +405,35 @@ export const RemoteService = {
};
},
/**
* Creates/Updates a state with the given data. If
* data.id is truthy, then a update call is performed,
* otherwise a create call is performed. The update URL
* is computed based on data.kind when data.flowType =
* 'OUTPUT', otherwise the PUT "/device" endpoint
* is used for updates and the POST "/<device.kind>"
* endpoints are used for creation.
* @param {State} data the device to update.
* @returns {Promise<Device, RemoteError>} promise that resolves to the saved device and rejects
* with user-fiendly errors as a RemoteError
*/
saveState: (data) => {
return (dispatch) => {
let url =
"/" + data.kind + "/" + data.id + "/state?sceneId=" + data.sceneId;
return Endpoint["post"](url, {}, data)
.then((res) => {
dispatch(actions.stateSave(res.data));
return res.data;
})
.catch((err) => {
console.warn("Update device: ", data, "error: ", err);
throw new RemoteError(["Network error"]);
});
};
},
/**
* Connetcs a series of output devices to an input device.
* Output devices for Switch input can be: Normal Light, Dimmable Light, Smart Plug.
@ -452,6 +583,23 @@ export const RemoteService = {
};
},
/**
* Deletes a scene
* @param {Number} sceneId the id of the scene to delete
* @returns {Promise<Undefined, RemoteError>} promise that resolves to void and rejects
* with user-fiendly errors as a RemoteError
*/
deleteScene: (sceneId) => {
return (dispatch) => {
return Endpoint.delete(`/scene/${sceneId}`)
.then((_) => dispatch(actions.sceneDelete(sceneId)))
.catch((err) => {
console.warn("Scene deletion error", err);
throw new RemoteError(["Network error"]);
});
};
},
/**
* Deletes a device
* @param {Device} device the device to delete
@ -487,7 +635,7 @@ export class Forms {
* with validation errors as a String array
*/
static submitRegistration(data) {
return Endpoint.post(
return Endpoint.postNA(
"/register",
{},
{
@ -510,7 +658,7 @@ export class Forms {
* with validation errors as a String array
*/
static submitInitResetPassword(email) {
return Endpoint.post(
return Endpoint.postNA(
"/register/init-reset-password",
{},
{
@ -535,7 +683,7 @@ export class Forms {
* with validation errors as a String array
*/
static submitResetPassword(confirmationToken, password) {
return Endpoint.post(
return Endpoint.putNA(
"/register/reset-password",
{},
{

View file

@ -38,6 +38,35 @@ function reducer(previousState, action) {
}
};
const createOrUpdateScene = (scene) => {
if (!newState.scenes[scene.id]) {
newState = update(newState, {
scenes: { [scene.id]: { $set: { ...scene, sceneStates: new Set() } } },
});
} else {
newState = update(newState, {
scenes: {
[scene.id]: {
name: { $set: scene.name },
},
},
});
}
if (newState.pendingJoins.scenes[scene.id]) {
newState = update(newState, {
pendingJoins: { scenes: { $unset: [scene.id] } },
scenes: {
[scene.id]: {
sceneStates: {
$add: [...newState.pendingJoins.scenes[scene.id]],
},
},
},
});
}
};
const updateDeviceProps = (device) => {
// In some updates the information regarding a device is incomplete
// due to a fault in the type system and JPA repository management
@ -50,6 +79,11 @@ function reducer(previousState, action) {
}
};
const updateSceneStateProps = (state) => {
change.sceneStates[state.deviceId] = {};
change.sceneStates[state.deviceId] = { $set: state.deviceId };
};
switch (action.type) {
case "LOGIN_UPDATE":
newState = update(previousState, { login: { $set: action.login } });
@ -62,6 +96,73 @@ function reducer(previousState, action) {
for (const room of action.rooms) {
createOrUpdateRoom(room);
}
break;
case "SCENES_UPDATE":
newState = previousState;
for (const scene of action.scenes) {
createOrUpdateScene(scene);
}
break;
case "STATE_UPDATE":
newState = previousState;
change = null;
// if room is given, delete all devices in that room
// and remove any join between that room and deleted
// devices
change = {
scenes: { [action.sceneId]: { sceneStates: { $set: new Set() } } },
sceneStates: { $unset: [] },
};
const scene = newState.scenes[action.sceneId];
for (const stateId of scene.sceneStates) {
change.sceneStates.$unset.push(stateId);
}
newState = update(previousState, change);
change = {
sceneStates: {},
scenes: {},
pendingJoins: { scenes: {} },
};
for (const sceneState of action.sceneStates) {
if (!newState.sceneStates[sceneState.deviceId]) {
change.sceneStates[sceneState.deviceId] = {
$set: sceneState.deviceId,
};
} else {
updateSceneStateProps(sceneState);
}
if (sceneState.sceneId in newState.scenes) {
change.scenes[sceneState.sceneId] =
change.scenes[sceneState.sceneId] || {};
change.scenes[sceneState.sceneId].sceneStates =
change.scenes[sceneState.sceneId].sceneStates || {};
const sceneStates = change.scenes[sceneState.sceneId].sceneStates;
sceneStates.$add = sceneStates.$add || [];
sceneStates.$add.push(sceneState.deviceId);
} else {
// room does not exist yet, so add to the list of pending
// joins
if (!change.pendingJoins.scenes[sceneState.sceneId]) {
change.pendingJoins.scenes[sceneState.sceneId] = {
$set: new Set([sceneState.deviceId]),
};
} else {
change.pendingJoins.scenes[sceneState.sceneId].$set.add(
sceneState.deviceId
);
}
}
}
newState = update(newState, change);
break;
case "DEVICES_UPDATE":
change = null;
@ -89,12 +190,16 @@ function reducer(previousState, action) {
};
for (const device of action.devices) {
const roomId = previousState.devices[device.id].roomId;
change.rooms[roomId] = change.rooms[roomId] || {
devices: { $remove: [] },
};
change.rooms[roomId].devices.$remove.push(device.id);
if (!previousState.devices[device.id]) continue;
change.devices.$unset.push(device.id);
const roomId = previousState.devices[device.id].roomId;
if (roomId in previousState.rooms) {
change.rooms[roomId] = change.rooms[roomId] || {
devices: { $remove: [] },
};
change.rooms[roomId].devices.$remove.push(device.id);
}
}
} else {
// otherwise, just delete all devices and all joins
@ -152,6 +257,10 @@ function reducer(previousState, action) {
newState = previousState;
createOrUpdateRoom(action.room);
break;
case "SCENE_SAVE":
newState = previousState;
createOrUpdateScene(action.scene);
break;
case "DEVICE_SAVE":
change = {
devices: { [action.device.id]: { $set: action.device } },
@ -176,6 +285,31 @@ function reducer(previousState, action) {
}
newState = update(previousState, change);
break;
case "STATE_SAVE":
console.log("Store", action.sceneState);
change = {
sceneStates: { [action.sceneState.id]: { $set: action.sceneState } },
};
if (previousState.scenes[action.sceneState.sceneId]) {
change.scenes = {
[action.sceneState.sceneId]: {
sceneStates: {
$add: [action.sceneState.id],
},
},
};
} else {
change.pendingJoins = {
scenes: {
[action.sceneState.sceneId]: {
$add: [action.sceneState.id],
},
},
};
}
newState = update(previousState, change);
break;
case "ROOM_DELETE":
if (!(action.roomId in previousState.rooms)) {
console.warn(`Room to delete ${action.roomId} does not exist`);
@ -197,6 +331,30 @@ function reducer(previousState, action) {
change.active = { activeRoom: { $set: -1 } };
}
newState = update(previousState, change);
break;
case "SCENE_DELETE":
console.log("SCENE", action.sceneId);
if (!(action.sceneId in previousState.scenes)) {
console.warn(`Scene to delete ${action.sceneId} does not exist`);
break;
}
// This update does not ensure the consistent update of switchId/dimmerId properties
// on output devices connected to an input device in this room. Please manually request
// all devices again if consistent update is desired
change = { states: { $unset: [] } };
for (const id of previousState.scenes[action.sceneId].sceneStates) {
change.sceneStates.$unset.push(id);
}
change.scenes = { $unset: [action.sceneId] };
if (previousState.active.activeScene === action.sceneId) {
change.active = { activeScene: { $set: -1 } };
}
newState = update(previousState, change);
break;
case "DEVICE_DELETE":
@ -231,6 +389,33 @@ function reducer(previousState, action) {
},
});
break;
case "SET_ACTIVE_TAB":
newState = update(previousState, {
active: {
activeTab: {
$set: action.activeTab,
},
},
});
break;
case "SET_ACTIVE_SCENE":
newState = update(previousState, {
active: {
activeScene: {
$set: action.activeScene,
},
},
});
break;
case "SET_ACTIVE_AUTOMATION":
newState = update(previousState, {
active: {
activeAutomation: {
$set: action.activeAutomation,
},
},
});
break;
case "REDUX_WEBSOCKET::MESSAGE":
const devices = JSON.parse(action.payload.message);
console.log(devices);
@ -249,12 +434,16 @@ function reducer(previousState, action) {
}
const initState = {
errors: {},
pendingJoins: {
rooms: {},
scenes: {},
automations: {},
},
active: {
activeRoom: -1,
activeTab: "Devices",
activeScene: -1,
activeAutomation: -1,
},
login: {
loggedIn: false,
@ -263,8 +452,14 @@ const initState = {
userInfo: null,
/** @type {[integer]Room} */
rooms: {},
/** @type {[integer]Scene} */
scenes: {},
/** @type {[integer]Automation} */
automations: {},
/** @type {[integer]Device} */
devices: {},
/** @type {[integer]SceneState} */
sceneStates: {},
};
function createSmartHutStore() {

View file

@ -17,10 +17,23 @@ const actions = {
type: "ROOM_SAVE",
room,
}),
sceneSave: (scene) => ({
type: "SCENE_SAVE",
scene,
}),
deviceSave: (device) => ({
type: "DEVICE_SAVE",
device,
}),
stateSave: (sceneState) => ({
type: "STATE_SAVE",
sceneState,
}),
statesUpdate: (sceneId, sceneStates) => ({
type: "STATE_UPDATE",
sceneId,
sceneStates,
}),
devicesUpdate: (roomId, devices, partial = false) => ({
type: "DEVICES_UPDATE",
roomId,
@ -40,6 +53,14 @@ const actions = {
type: "ROOM_DELETE",
roomId,
}),
sceneDelete: (sceneId) => ({
type: "SCENE_DELETE",
sceneId,
}),
scenesUpdate: (scenes) => ({
type: "SCENES_UPDATE",
scenes,
}),
deviceDelete: (deviceId) => ({
type: "DEVICE_DELETE",
deviceId,
@ -52,6 +73,18 @@ export const appActions = {
type: "SET_ACTIVE_ROOM",
activeRoom,
}),
setActiveTab: (activeTab) => ({
type: "SET_ACTIVE_TAB",
activeTab,
}),
setActiveScene: (activeScene = -1) => ({
type: "SET_ACTIVE_SCENE",
activeScene,
}),
setActiveAutomations: (activeAutomation = -1) => ({
type: "SET_ACTIVE_AUTOMATION",
activeAutomation,
}),
};
export default actions;

View file

@ -0,0 +1,165 @@
import React, { Component } from "react";
import {
Menu,
Button,
Grid,
Icon,
Responsive,
Dropdown,
} from "semantic-ui-react";
import { editButtonStyle } from "../components/dashboard/devices/styleComponents";
import AutomationModal from "../components/AutomationModal";
import { RemoteService } from "../remote";
import { connect } from "react-redux";
import { appActions } from "../storeActions";
class AutomationsNavbar extends Component {
constructor(props) {
super(props);
this.state = {
editMode: false,
};
this.toggleEditMode = this.toggleEditMode.bind(this);
this.openCurrentModalMobile = this.openCurrentModalMobile.bind(this);
}
get activeItemAutomation() {
return this.props.activeAutomation;
}
set activeItemAutomation(item) {
this.props.setActiveAutomation(item);
}
get activeItemAutomationsName() {
if (this.props.activeAutomation === -1) return "Home";
return this.props.automations[this.props.activeAutomation].name;
}
openCurrentModalMobile() {
console.log(this.activeItemAutomation, this.props.automationsModalRefs);
const currentModal = this.props.automationsModalRefs[
this.activeItemAutomation
].current;
currentModal.openModal();
}
toggleEditMode(e) {
this.setState((prevState) => ({ editMode: !prevState.editMode }));
}
render() {
return (
<div style={{ background: "#1b1c1d!important", padding: "0 20px" }}>
<Responsive minWidth={768}>
<Grid>
<Grid.Row color="black">
<button style={editButtonStyle} onClick={this.toggleEditMode}>
Edit
</button>
</Grid.Row>
<Grid.Row>
<Menu inverted fluid vertical>
<Menu.Item
key={-1}
id={null}
name="automations"
active={this.activeItemAutomation === -1}
onClick={this.selectAutomations}
>
<Grid>
<Grid.Row>
<Grid.Column>
<Icon name="home" size="small" />
</Grid.Column>
<Grid.Column>AUTOMATIONS</Grid.Column>
</Grid.Row>
</Grid>
</Menu.Item>
{
//INSERT LIST OF AUTOMATIONS HERE
}
<Menu.Item name="newM">
<Grid>
<Grid.Row centered name="new">
<AutomationModal id={null} />
</Grid.Row>
</Grid>
</Menu.Item>
</Menu>
</Grid.Row>
</Grid>
</Responsive>
<Responsive maxWidth={768}>
<Menu>
<Dropdown item fluid text={this.activeItemAutomationName}>
<Dropdown.Menu>
<Dropdown.Item
key={-1}
id={null}
name="scene"
active={this.activeItemAutomation === -1}
onClick={this.selectAutomations}
>
<Grid>
<Grid.Row>
<Grid.Column>
<Icon name="home" size="small" />
</Grid.Column>
<Grid.Column>Automations</Grid.Column>
</Grid.Row>
</Grid>
</Dropdown.Item>
{
//INSERT LIST OF AUTOMATIONS HERE
}
</Dropdown.Menu>
</Dropdown>
</Menu>
<Grid inverted>
<Grid.Row>
<Grid.Column width={8}>
<AutomationModal id={null} />
</Grid.Column>
{this.activeItemAutomation !== -1 ? (
<Grid.Column width={8}>
<Button
icon
fluid
labelPosition="left"
onClick={this.openCurrentModalMobile}
>
<Icon name="pencil" size="small" />
EDIT AUTOMATION
</Button>
</Grid.Column>
) : null}
</Grid.Row>
</Grid>
</Responsive>
</div>
);
}
}
const setActiveAutomation = (activeAutomation) => {
return (dispatch) =>
dispatch(appActions.setActiveAutomation(activeAutomation));
};
const mapStateToProps = (state, _) => ({
automations: state.automations,
activeAutomation: state.active.activeAutomation,
automationModalRefs: Object.keys(state.automations).reduce(
(acc, key) => ({ ...acc, [key]: React.createRef() }),
{}
),
});
const AutomationsNavbarContainer = connect(mapStateToProps, {
...RemoteService,
setActiveAutomation,
})(AutomationsNavbar);
export default AutomationsNavbarContainer;

View file

@ -1,79 +1,40 @@
import React, { Component } from "react";
import HomeNavbar from "./../components/HomeNavbar";
import { Image, Divider, Message, Grid } from "semantic-ui-react";
class Paragraph extends Component {
state = { visible: true };
handleDismiss = () => {
this.setState({ visible: false });
setTimeout(() => {
this.setState({ visible: true });
}, 2000);
};
import {
Image,
Grid,
Button,
Icon,
Header,
Container,
} from "semantic-ui-react";
export default class ConfirmForgotPasswrod extends Component {
render() {
if (this.state.visible) {
return (
<Message
onDismiss={this.handleDismiss}
header="Link has been sent!"
content="An e-mail has been sent your address, please follow the
instruction to create a new password"
/>
);
}
return (
<p>
<br />
<i>The message will return in 2s</i>
<br />
<br />
</p>
<React.Fragment>
<Button circular style={{ margin: "2em" }} href="/">
<Icon name="arrow alternate circle left" />
Go Home{" "}
</Button>
<Grid
textAlign="center"
style={{ height: "70vh" }}
verticalAlign="middle"
>
<Grid.Column style={{ maxWidth: 450 }}>
<Header as="h2" color="blue" textAlign="center">
<Image src="img/logo.png" /> Link has been sent!
</Header>
<Container textAlign="center">
<p>
An E-mail has been sent to your address, please follow the
instructions to create a new password. If you don't find the
E-mail please check also the spam folder.
</p>
</Container>
</Grid.Column>
</Grid>
</React.Fragment>
);
}
}
const MessageReg = () => (
<Grid>
<HomeNavbar />
<Divider />
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}>
<Grid.Column width={6}></Grid.Column>
<Grid.Column width={10}>
<Image src="title5.png" />
</Grid.Column>
<Grid.Column width={3}></Grid.Column>
</Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Column width={3}></Grid.Column>
<Grid.Column width={4}>
<Image src="./img/logo.png" />
</Grid.Column>
<Grid.Column width={6}>
<Paragraph />
</Grid.Column>
<Grid.Column width={4}></Grid.Column>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}>
<Grid.Column width={3}></Grid.Column>
<Grid.Column width={10}>
<Divider />
</Grid.Column>
<Grid.Column width={3}></Grid.Column>
</Grid.Row>
</Grid>
);
export default class ConfirmForgotPasswrod extends React.Component {
render() {
return <MessageReg />;
}
}

View file

@ -1,79 +1,40 @@
import React, { Component } from "react";
import HomeNavbar from "./../components/HomeNavbar";
import { Image, Divider, Message, Grid } from "semantic-ui-react";
class Paragraph extends Component {
state = { visible: true };
handleDismiss = () => {
this.setState({ visible: false });
setTimeout(() => {
this.setState({ visible: true });
}, 2000);
};
import {
Image,
Grid,
Button,
Icon,
Header,
Container,
} from "semantic-ui-react";
export default class ConfirmRegistration extends Component {
render() {
if (this.state.visible) {
return (
<Message
onDismiss={this.handleDismiss}
header="Congratulation!"
content="An e-mail has been sent your address, please confirm
your registration by following the enclosed link"
/>
);
}
return (
<p>
<br />
<i>The message will return in 2s</i>
<br />
<br />
</p>
<React.Fragment>
<Button circular style={{ margin: "2em" }} href="/">
<Icon name="arrow alternate circle left" />
Go Home{" "}
</Button>
<Grid
textAlign="center"
style={{ height: "70vh" }}
verticalAlign="middle"
>
<Grid.Column style={{ maxWidth: 450 }}>
<Header as="h2" color="blue" textAlign="center">
<Image src="img/logo.png" /> Congratulation!
</Header>
<Container textAlign="center">
<p>
An E-mail has been sent to your address, confirm your
registration by following the enclosed link. If you don't find
the E-mail please check also the spam folder.
</p>
</Container>
</Grid.Column>
</Grid>
</React.Fragment>
);
}
}
const MessageReg = () => (
<Grid>
<HomeNavbar />
<Divider />
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}>
<Grid.Column width={6}></Grid.Column>
<Grid.Column width={10}>
<Image src="title5.png" />
</Grid.Column>
<Grid.Column width={3}></Grid.Column>
</Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Column width={3}></Grid.Column>
<Grid.Column width={4}>
<Image src="./img/logo.png" />
</Grid.Column>
<Grid.Column width={6}>
<Paragraph />
</Grid.Column>
<Grid.Column width={4}></Grid.Column>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}>
<Grid.Column width={3}></Grid.Column>
<Grid.Column width={10}>
<Divider />
</Grid.Column>
<Grid.Column width={3}></Grid.Column>
</Grid.Row>
</Grid>
);
export default class ConfirmRegistration extends React.Component {
render() {
return <MessageReg />;
}
}

View file

@ -1,79 +1,36 @@
import React, { Component } from "react";
import HomeNavbar from "./../components/HomeNavbar";
import { Image, Divider, Message, Grid } from "semantic-ui-react";
class Paragraph extends Component {
state = { visible: true };
handleDismiss = () => {
this.setState({ visible: false });
setTimeout(() => {
this.setState({ visible: true });
}, 2000);
};
render() {
if (this.state.visible) {
return (
<Message onDismiss={this.handleDismiss}>
<Message.Header>
Congratulation<ins>s</ins>!
</Message.Header>
Your password has been successfully reset
</Message>
);
}
return (
<p>
<br />
<i>The message will return in 2s</i>
<br />
<br />
</p>
);
}
}
const MessageReg = () => (
<Grid>
<HomeNavbar />
<Divider />
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}>
<Grid.Column width={6}></Grid.Column>
<Grid.Column width={10}>
<Image src="title5.png" />
</Grid.Column>
<Grid.Column width={3}></Grid.Column>
</Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Column width={3}></Grid.Column>
<Grid.Column width={4}>
<Image src="./img/logo.png" />
</Grid.Column>
<Grid.Column width={6}>
<Paragraph />
</Grid.Column>
<Grid.Column width={4}></Grid.Column>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}></Grid.Row>
<Grid.Row height={3}>
<Grid.Column width={3}></Grid.Column>
<Grid.Column width={10}>
<Divider />
</Grid.Column>
<Grid.Column width={3}></Grid.Column>
</Grid.Row>
</Grid>
);
import {
Image,
Grid,
Button,
Icon,
Header,
Container,
} from "semantic-ui-react";
export default class ConfirmResetPassword extends Component {
render() {
return <MessageReg />;
return (
<React.Fragment>
<Button circular style={{ margin: "2em" }} href="/">
<Icon name="arrow alternate circle left" />
Go Home{" "}
</Button>
<Grid
textAlign="center"
style={{ height: "70vh" }}
verticalAlign="middle"
>
<Grid.Column style={{ maxWidth: 450 }}>
<Header as="h2" color="blue" textAlign="center">
<Image src="img/logo.png" /> Congratulation!
</Header>
<Container textAlign="center">
<p>Your password has been successfully reset.</p>
</Container>
</Grid.Column>
</Grid>
</React.Fragment>
);
}
}

View file

@ -1,13 +1,82 @@
import React, { Component } from "react";
import DevicePanel from "../components/dashboard/DevicePanel";
import ScenesPanel from "../components/dashboard/ScenesPanel";
import AutomationsPanel from "../components/dashboard/AutomationsPanel";
import Navbar from "./Navbar";
import ScenesNavbar from "./ScenesNavbar";
import AutomationsNavbar from "./AutomationsNavbar";
import MyHeader from "../components/HeaderController";
import { Grid, Responsive } from "semantic-ui-react";
import { Grid, Responsive, Button } from "semantic-ui-react";
import {
panelStyle,
mobilePanelStyle,
} from "../components/dashboard/devices/styleComponents";
import { RemoteService } from "../remote";
import { connect } from "react-redux";
import { appActions } from "../storeActions";
class Dashboard extends Component {
constructor(props) {
super(props);
this.state = this.initialState;
this.setInitialState();
this.selectTab = this.selectTab.bind(this);
}
get initialState() {
return {
activeTab: this.activeTab,
};
}
setInitialState() {
this.setState(this.initialState);
}
get activeTab() {
return this.props.activeTab;
}
set activeTab(tab) {
this.props.setActiveTab(tab);
}
selectTab(e, { name }) {
this.setState({ activeTab: name });
this.activeTab = name;
}
renderTab(tab) {
switch (tab) {
case "Devices":
return <DevicePanel tab={this.state.activeTab} />;
case "Scenes":
return <ScenesPanel tab={this.state.activeTab} />;
case "Automations":
return <AutomationsPanel />;
default:
return <h1>ERROR</h1>;
}
}
renderNavbar(tab) {
switch (tab) {
case "Devices":
return <Navbar />;
case "Scenes":
return <ScenesNavbar />;
case "Automations":
return <AutomationsNavbar />;
default:
return <h1>ERROR</h1>;
}
}
export default class Dashboard extends Component {
render() {
return (
<div style={{ height: "110vh", background: "#1b1c1d" }}>
<div style={{ background: "#1b1c1d" }}>
<Responsive minWidth={768}>
<Grid>
<Grid.Row color="black">
@ -15,13 +84,42 @@ export default class Dashboard extends Component {
<MyHeader />
</Grid.Column>
</Grid.Row>
<Grid.Row color="black">
<Grid.Column width={3}></Grid.Column>
<Grid.Column textAlign="center" width={13}>
<Button
basic
name="Devices"
content="Devices"
active={this.activeTab === "Devices"}
color={this.activeTab === "Devices" ? "yellow" : "grey"}
onClick={this.selectTab}
/>
<Button
basic
name="Scenes"
content="Scenes"
active={this.activeTab === "Scenes"}
color={this.activeTab === "Scenes" ? "yellow" : "grey"}
onClick={this.selectTab}
/>
<Button
basic
name="Automations"
content="Automations"
active={this.activeTab === "Automations"}
color={this.activeTab === "Automations" ? "yellow" : "grey"}
onClick={this.selectTab}
/>
</Grid.Column>
</Grid.Row>
<Grid.Row color="black">
<Grid.Column width={3}>
<Navbar />
{this.renderNavbar(this.activeTab)}
</Grid.Column>
<Grid.Column width={13}>
<DevicePanel />
<div style={panelStyle}>{this.renderTab(this.activeTab)}</div>
</Grid.Column>
</Grid.Row>
</Grid>
@ -33,14 +131,44 @@ export default class Dashboard extends Component {
<MyHeader />
</Grid.Column>
</Grid.Row>
<Grid.Row color="black">
<Grid.Column textAlign="center">
<Button
basic
name="Devices"
content="Devices"
active={this.activeTab === "Devices"}
color={this.activeTab === "Devices" ? "yellow" : "grey"}
onClick={this.selectTab}
/>
<Button
basic
name="Scenes"
content="Scenes"
active={this.activeTab === "Scenes"}
color={this.activeTab === "Scenes" ? "yellow" : "grey"}
onClick={this.selectTab}
/>
<Button
basic
name="Automations"
content="Automations"
active={this.activeTab === "Automations"}
color={this.activeTab === "Automations" ? "yellow" : "grey"}
onClick={this.selectTab}
/>
</Grid.Column>
</Grid.Row>
<Grid.Row color="black">
<Grid.Column color="black">
<Navbar />
{this.renderNavbar(this.activeTab)}
</Grid.Column>
</Grid.Row>
<Grid.Row>
<Grid.Column>
<DevicePanel />
<div style={mobilePanelStyle}>
{this.renderTab(this.activeTab)}
</div>
</Grid.Column>
</Grid.Row>
</Grid>
@ -49,3 +177,17 @@ export default class Dashboard extends Component {
);
}
}
const mapStateToProps = (state, _) => ({
activeTab: state.active.activeTab,
});
const setActiveTab = (activeTab) => {
return (dispatch) => dispatch(appActions.setActiveTab(activeTab));
};
const DashboardContainer = connect(mapStateToProps, {
...RemoteService,
setActiveTab,
})(Dashboard);
export default DashboardContainer;

View file

@ -77,7 +77,7 @@ export default class ForgotPass extends Component {
<Form.Input
icon="address card outline"
iconPosition="left"
placeholder="Username or E-mail"
placeholder="Enter your E-mail"
name="user"
type="text"
onChange={this.onChangeHandler}

View file

@ -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(" - ") },
});

View file

@ -82,7 +82,7 @@ class Navbar extends Component {
<Grid.Column>
<Icon name="home" size="small" />
</Grid.Column>
<Grid.Column>HOME</Grid.Column>
<Grid.Column width={8}>House View</Grid.Column>
</Grid.Row>
</Grid>
</Menu.Item>

View file

@ -0,0 +1,215 @@
import React, { Component } from "react";
import {
Menu,
Button,
Icon,
Grid,
Responsive,
Dropdown,
} from "semantic-ui-react";
import { editButtonStyle } from "../components/dashboard/devices/styleComponents";
import SceneModal from "../components/SceneModal";
import { RemoteService } from "../remote";
import { connect } from "react-redux";
import { appActions } from "../storeActions";
class ScenesNavbar extends Component {
constructor(props) {
super(props);
this.state = {
editMode: false,
};
this.toggleEditMode = this.toggleEditMode.bind(this);
this.openCurrentModalMobile = this.openCurrentModalMobile.bind(this);
this.selectScene = this.selectScene.bind(this);
this.getScenes();
}
get activeItemScene() {
return this.props.activeScene;
}
set activeItemScene(item) {
this.props.setActiveScene(item);
}
get activeItemSceneName() {
if (this.props.activeScene === -1) return "Scene";
return this.props.scenes[this.props.activeScene].name;
}
getScenes() {
this.props.fetchAllScenes().catch(console.error);
}
openCurrentModalMobile() {
//console.log(this.activeItemScene, this.props.sceneModalRefs);
const currentModal = this.props.sceneModalRefs[this.activeItemScene]
.current;
currentModal.openModal();
}
toggleEditMode(e) {
this.setState((prevState) => ({ editMode: !prevState.editMode }));
}
selectScene(e, { id }) {
this.activeItemScene = id || -1;
this.getStates(id);
}
getStates(sceneId) {
if (sceneId) {
this.props
.fetchStates(sceneId)
.catch((err) => console.error(`error fetching states:`, err));
}
}
render() {
return (
<div style={{ background: "#1b1c1d!important", padding: "0 20px" }}>
<Responsive minWidth={768}>
<Grid>
<Grid.Row color="black">
<button style={editButtonStyle} onClick={this.toggleEditMode}>
Edit
</button>
</Grid.Row>
<Grid.Row>
<Menu inverted fluid vertical>
<Menu.Item
key={-1}
id={null}
name="scene"
active={this.activeItemScene === -1}
onClick={this.selectScene}
>
SCENES
</Menu.Item>
{Object.values(this.props.scenes).map((e, i) => {
return (
<Menu.Item
id={e.id}
key={i}
name={e.name}
active={this.activeItemScene === e.id}
onClick={this.selectScene}
>
<Grid>
<Grid.Row>
<Grid.Column width={12}>{e.name}</Grid.Column>
<Grid.Column floated="right">
{this.state.editMode ? (
<SceneModal id={e.id} />
) : null}
</Grid.Column>
</Grid.Row>
</Grid>
</Menu.Item>
);
})}
<Menu.Item name="newM">
<Grid>
<Grid.Row centered name="new">
<SceneModal id={null} />
</Grid.Row>
</Grid>
</Menu.Item>
</Menu>
</Grid.Row>
</Grid>
</Responsive>
<Responsive maxWidth={768}>
<Menu>
<Dropdown item fluid text={this.activeItemSceneName}>
<Dropdown.Menu>
<Dropdown.Item
key={-1}
id={null}
name="scene"
active={this.activeItemScene === -1}
onClick={this.selectScene}
>
<Grid>
<Grid.Row>
<Grid.Column>Scene</Grid.Column>
</Grid.Row>
</Grid>
</Dropdown.Item>
{Object.values(this.props.scenes).map((e, i) => {
return (
<Dropdown.Item
id={e.id}
key={i}
name={e.name}
active={this.activeItemScene === e.id}
onClick={this.selectScene}
>
<Grid>
<Grid.Row>
<Grid.Column>{e.name}</Grid.Column>
</Grid.Row>
</Grid>
<SceneModal
ref={this.props.sceneModalRefs[e.id]}
nicolaStop={true}
id={e.id}
/>
</Dropdown.Item>
);
})}
</Dropdown.Menu>
</Dropdown>
</Menu>
<Grid inverted>
<Grid.Row>
<Grid.Column width={8}>
<SceneModal id={null} />
</Grid.Column>
{this.activeItemScene !== -1 ? (
<Grid.Column width={8}>
<Button
icon
fluid
labelPosition="left"
onClick={this.openCurrentModalMobile}
>
<Icon name="pencil" size="small" />
EDIT SCENE
</Button>
</Grid.Column>
) : null}
</Grid.Row>
</Grid>
</Responsive>
</div>
);
}
}
const setActiveScene = (activeScene) => {
return (dispatch) => dispatch(appActions.setActiveScene(activeScene));
};
const mapStateToProps = (state, _) => ({
scenes: state.scenes,
sceneModalRefs: Object.keys(state.scenes).reduce(
(acc, key) => ({ ...acc, [key]: React.createRef() }),
{}
),
get isActiveDefaultScene() {
return state.active.activeScene === -1;
},
activeScene: state.active.activeScene,
});
const ScenesNavbarContainer = connect(mapStateToProps, {
...RemoteService,
setActiveScene,
})(ScenesNavbar);
export default ScenesNavbarContainer;