Merge branch '74-dashboard-tab-system' into 'dev'

Resolve "dashboard-tab-system"

Closes #74

See merge request sa4-2020/the-sanmarinoes/frontend!82

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/SceneModal.js

@@ -0,0 +1,187 @@
+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 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 {
+      //INITIAL STATE HERE
+    };
+  }
+
+  setInitialState() {
+    this.setState(this.initialState);
+  }
+
+  get type() {
+    return !this.props.id ? "new" : "modify";
+  }
+
+  addSceneModal = (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));*/
+  };
+
+  modifySceneModal = (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));*/
+  };
+
+  deleteScene = (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 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>
+            {
+              //TODO FORM TO ADD OR MODIFY SCENE
+            }
+
+            {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";
@@ -23,22 +22,20 @@ class DevicePanel extends Component {
 
   render() {
     return (
-      <div style={panelStyle}>
+      <Grid doubling columns={2} divided="vertically">
-        <Grid doubling columns={2} divided="vertically">
+        {this.props.devices.map((e, i) => {
-          {this.props.devices.map((e, i) => {
+          return (
-            return (
+            <Grid.Column key={i}>
-              <Grid.Column key={i}>
+              <Device id={e.id} />
-                <Device id={e.id} />
-              </Grid.Column>
-            );
-          })}
-          {!this.props.isActiveRoomHome ? (
-            <Grid.Column>
-              <NewDevice />
             </Grid.Column>
-          ) : null}
+          );
-        </Grid>
+        })}
-      </div>
+        {!this.props.isActiveRoomHome ? (
+          <Grid.Column>
+            <NewDevice />
+          </Grid.Column>
+        ) : null}
+      </Grid>
     );
   }
 }

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

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

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/store.js

@@ -231,6 +231,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);
@@ -252,9 +279,14 @@ const initState = {
   errors: {},
   pendingJoins: {
     rooms: {},
+    scenes: {},
+    automations: {},
   },
   active: {
     activeRoom: -1,
+    activeTab: "Devices",
+    activeScene: -1,
+    activeAutomation: -1,
   },
   login: {
     loggedIn: false,
@@ -263,6 +295,10 @@ const initState = {
   userInfo: null,
   /** @type {[integer]Room} */
   rooms: {},
+  /** @type {[integer]Scenes} */
+  scenes: {},
+  /** @type {[integer]Automations} */
+  automations: {},
   /** @type {[integer]Device} */
   devices: {},
 };

smart-hut/src/storeActions.js

@@ -52,6 +52,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/Dashboard.js

@@ -1,13 +1,69 @@
 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.selectTab = this.selectTab.bind(this);
+  }
+
+  get activeTab() {
+    return this.props.activeTab;
+  }
+
+  set activeTab(tab) {
+    this.props.setActiveTab(tab);
+  }
+
+  selectTab(e, { name }) {
+    this.activeTab = name;
+  }
+
+  renderTab(tab) {
+    switch (tab) {
+      case "Devices":
+        return <DevicePanel />;
+      case "Scenes":
+        return <ScenesPanel />;
+      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 +71,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,6 +118,34 @@ 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 />
@@ -40,7 +153,9 @@ export default class Dashboard extends Component {
             </Grid.Row>
             <Grid.Row>
               <Grid.Column>
-                <DevicePanel />
+                <div style={mobilePanelStyle}>
+                  {this.renderTab(this.activeTab)}
+                </div>
               </Grid.Column>
             </Grid.Row>
           </Grid>
@@ -49,3 +164,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/ScenesNavbar.js

@@ -0,0 +1,162 @@
+import React, { Component } from "react";
+import {
+  Menu,
+  Button,
+  Grid,
+  Icon,
+  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);
+  }
+
+  get activeItemScene() {
+    return this.props.activeScene;
+  }
+
+  set activeItemScene(item) {
+    this.props.setActiveScene(item);
+  }
+
+  get activeItemSceneName() {
+    if (this.props.activeScene === -1) return "Home";
+    return this.props.scenes[this.props.activeScene].name;
+  }
+
+  openCurrentModalMobile() {
+    console.log(this.activeItem, this.props.roomModalRefs);
+    const currentModal = this.props.roomModalRefs[this.activeItem].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="scene"
+                  active={this.activeItemScene === -1}
+                  onClick={this.selectScene}
+                >
+                  <Grid>
+                    <Grid.Row>
+                      <Grid.Column>
+                        <Icon name="home" size="small" />
+                      </Grid.Column>
+                      <Grid.Column>SCENES</Grid.Column>
+                    </Grid.Row>
+                  </Grid>
+                </Menu.Item>
+                {
+                  //INSERT LIST OF SCENES HERE
+                }
+                <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>
+                        <Icon name="home" size="small" />
+                      </Grid.Column>
+                      <Grid.Column>Scene</Grid.Column>
+                    </Grid.Row>
+                  </Grid>
+                </Dropdown.Item>
+
+                {
+                  //INSERT LIST OF SCENES HERE
+                }
+              </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 ROOM
+                  </Button>
+                </Grid.Column>
+              ) : null}
+            </Grid.Row>
+          </Grid>
+        </Responsive>
+      </div>
+    );
+  }
+}
+
+const setActiveScene = (activeScene) => {
+  return (dispatch) => dispatch(appActions.setActiveScene(activeScene));
+};
+
+const mapStateToProps = (state, _) => ({
+  scenes: state.scenes,
+  activeScene: state.active.activeScene,
+  sceneModalRefs: Object.keys(state.scenes).reduce(
+    (acc, key) => ({ ...acc, [key]: React.createRef() }),
+    {}
+  ),
+});
+const ScenesNavbarContainer = connect(mapStateToProps, {
+  ...RemoteService,
+  setActiveScene,
+})(ScenesNavbar);
+export default ScenesNavbarContainer;