Added and Fixed Scenes and Automations Modal and Navbars

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

@@ -5,6 +5,7 @@ import { RemoteService } from "../../remote";
 class ScenesPanel extends Component {
   constructor(props) {
     super(props);
+    console.log(this.props.activeRoom, this.props.activeTab);
   }
 
   render() {

smart-hut/src/store.js

@@ -240,6 +240,24 @@ function reducer(previousState, action) {
         },
       });
       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);
@@ -261,10 +279,14 @@ const initState = {
   errors: {},
   pendingJoins: {
     rooms: {},
+    scenes: {},
+    automations: {},
   },
   active: {
     activeRoom: -1,
     activeTab: "Devices",
+    activeScene: -1,
+    activeAutomation: -1,
   },
   login: {
     loggedIn: false,
@@ -273,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

@@ -56,6 +56,14 @@ export const appActions = {
     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

@@ -3,6 +3,8 @@ 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, Button } from "semantic-ui-react";
 import {
@@ -46,6 +48,19 @@ class Dashboard extends Component {
     }
   }
 
+  renderNavbar(tab) {
+    switch (tab) {
+      case "Devices":
+        return <Navbar />;
+      case "Scenes":
+        return <ScenesNavbar />;
+      case "Automations":
+        return <AutomationsNavbar />;
+      default:
+        return <h1>ERROR</h1>;
+    }
+  }
+
   render() {
     return (
       <div style={{ background: "#1b1c1d" }}>
@@ -87,7 +102,7 @@ class Dashboard extends Component {
             </Grid.Row>
             <Grid.Row color="black">
               <Grid.Column width={3}>
-                <Navbar />
+                {this.renderNavbar(this.activeTab)}
               </Grid.Column>
 
               <Grid.Column width={13}>

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;