Merge branch 'dev' into 'dashboard-videocamera'

# Conflicts:
#   smart-hut/src/components/dashboard/devices/Device.js

smart-hut/src/components/AutomationModal.js

@@ -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;

smart-hut/src/components/HeaderController.js

@@ -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>

smart-hut/src/components/SceneModal.js

@@ -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;

smart-hut/src/components/dashboard/AutomationsPanel.js

@@ -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;

smart-hut/src/components/dashboard/DevicePanel.js

@@ -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,19 +15,20 @@ class DevicePanel extends Component {
   }
 
   getDevices() {
+    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} />
+              <Device tab={this.props.tab} id={e.id} />
             </Grid.Column>
           );
         })}
@@ -38,7 +38,6 @@ class DevicePanel extends Component {
           </Grid.Column>
         ) : null}
       </Grid>
-      </div>
     );
   }
 }

smart-hut/src/components/dashboard/NewSceneDevice.js

@@ -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;

smart-hut/src/components/dashboard/ScenesPanel.js

@@ -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;

smart-hut/src/components/dashboard/devices/Device.js

@@ -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,13 +61,19 @@ class Device extends React.Component {
       <Segment>
         <Grid columns={2}>
           <Grid.Column>{this.renderDeviceComponent()}</Grid.Column>
+          {this.props.tab === "Devices" ? (
             <Grid.Column textAlign="center">
-            <Header as="h3">{this.props.device.name}</Header>
+              <Header as="h3">{this.props.stateOrDevice.name}</Header>
-            <Button color="blue" icon onClick={this.edit} labelPosition="left">
+              <Button
+                color="blue"
+                icon
+                onClick={this.edit}
+                labelPosition="left"
+              >
                 <Icon name="pencil" />
                 Edit
               </Button>
-            {this.props.device.kind === "smartPlug" ? (
+              {this.props.stateOrDevice.kind === "smartPlug" ? (
                 <Button
                   color="orange"
                   icon
@@ -79,6 +85,12 @@ class Device extends React.Component {
                 </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;

smart-hut/src/components/dashboard/devices/DeviceSettingsModal.js

@@ -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>
+        <label>Edit Name: </label>
-        <input
+        <Input
           autoComplete="off"
           name="name"
           onChange={handleInputChange}
-          value={values.name}
+          placeholder={props.name}
-          placeholder="Device 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() {
+  closeModal = (e) => {
-    this.setState({ open: true });
+    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}

smart-hut/src/components/dashboard/devices/Light.js

@@ -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;
   }

smart-hut/src/components/dashboard/devices/Sensor.js

@@ -53,14 +53,29 @@ class Sensor extends Component {
 
     this.colors = temperatureSensorColors;
     this.icon = "temperatureIcon.svg";
+    this.name = "Sensor";
   }
 
-  setName = () => {
+  // setName = () => {
-    if (this.props.device.name.length > 15) {
+  //   if (this.props.device.name.length > 15) {
-      return this.props.device.name.slice(0, 12) + "...";
+  //     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}`} />

smart-hut/src/components/dashboard/devices/styleComponents.js

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

smart-hut/src/remote.js

@@ -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",
       {},
       {

smart-hut/src/store.js

@@ -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) {
+          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);
-          change.devices.$unset.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() {

smart-hut/src/storeActions.js

@@ -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;

smart-hut/src/views/AutomationsNavbar.js

@@ -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;

smart-hut/src/views/ConfirmForgotPassword.js

@@ -1,79 +1,40 @@
 import React, { Component } from "react";
-import HomeNavbar from "./../components/HomeNavbar";
+import {
-import { Image, Divider, Message, Grid } from "semantic-ui-react";
+  Image,
-
+  Grid,
-class Paragraph extends Component {
+  Button,
-  state = { visible: true };
+  Icon,
-
+  Header,
-  handleDismiss = () => {
+  Container,
-    this.setState({ visible: false });
+} from "semantic-ui-react";
-
-    setTimeout(() => {
-      this.setState({ visible: true });
-    }, 2000);
-  };
 
+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 (
+      <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>
-        <br />
+                An E-mail has been sent to your address, please follow the
-        <i>The message will return in 2s</i>
+                instructions to create a new password. If you don't find the
-        <br />
+                E-mail please check also the spam folder.
-        <br />
               </p>
-    );
+            </Container>
-  }
-}
-
-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>
+      </React.Fragment>
     );
-
-export default class ConfirmForgotPasswrod extends React.Component {
-  render() {
-    return <MessageReg />;
   }
 }

smart-hut/src/views/ConfirmRegistration.js

@@ -1,79 +1,40 @@
 import React, { Component } from "react";
-import HomeNavbar from "./../components/HomeNavbar";
+import {
-import { Image, Divider, Message, Grid } from "semantic-ui-react";
+  Image,
-
+  Grid,
-class Paragraph extends Component {
+  Button,
-  state = { visible: true };
+  Icon,
-
+  Header,
-  handleDismiss = () => {
+  Container,
-    this.setState({ visible: false });
+} from "semantic-ui-react";
-
-    setTimeout(() => {
-      this.setState({ visible: true });
-    }, 2000);
-  };
 
+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 (
+      <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>
-        <br />
+                An E-mail has been sent to your address, confirm your
-        <i>The message will return in 2s</i>
+                registration by following the enclosed link. If you don't find
-        <br />
+                the E-mail please check also the spam folder.
-        <br />
               </p>
-    );
+            </Container>
-  }
-}
-
-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>
+      </React.Fragment>
     );
-
-export default class ConfirmRegistration extends React.Component {
-  render() {
-    return <MessageReg />;
   }
 }

smart-hut/src/views/ConfirmResetPassword.js

@@ -1,79 +1,36 @@
 import React, { Component } from "react";
-import HomeNavbar from "./../components/HomeNavbar";
+import {
-import { Image, Divider, Message, Grid } from "semantic-ui-react";
+  Image,
-
+  Grid,
-class Paragraph extends Component {
+  Button,
-  state = { visible: true };
+  Icon,
-
+  Header,
-  handleDismiss = () => {
+  Container,
-    this.setState({ visible: false });
+} from "semantic-ui-react";
-
-    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>
-);
 
 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>
+    );
   }
 }

smart-hut/src/views/Dashboard.js

@@ -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;

smart-hut/src/views/Forgot-password.js

@@ -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}

smart-hut/src/views/Login.js

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

smart-hut/src/views/Navbar.js

@@ -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>

smart-hut/src/views/ScenesNavbar.js

@@ -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;