Added icons to scenes

smart-hut/src/components/SceneModal.js

@@ -8,6 +8,7 @@ import {
   Form,
   Input,
 } from "semantic-ui-react";
+import SelectIcons from "./SelectIcons";
 import { connect } from "react-redux";
 import { RemoteService } from "../remote";
 import { appActions } from "../storeActions";
@@ -20,12 +21,14 @@ class SceneModal extends Component {
     this.addSceneModal = this.addSceneModal.bind(this);
     this.modifySceneModal = this.modifySceneModal.bind(this);
     this.deleteScene = this.deleteScene.bind(this);
+    this.updateIcon = this.updateIcon.bind(this);
   }
 
   get initialState() {
     return {
       name: this.type === "new" ? "New Scene" : this.props.scene.name,
       openModal: false,
+      selectedIcon: "home",
     };
   }
 
@@ -40,6 +43,7 @@ class SceneModal extends Component {
   addSceneModal = (e) => {
     let data = {
       name: this.state.name,
+      icon: this.state.selectedIcon,
     };
 
     this.props
@@ -54,6 +58,7 @@ class SceneModal extends Component {
   modifySceneModal = (e) => {
     let data = {
       name: this.state.name,
+      icon: this.state.selectedIcon,
     };
 
     this.props
@@ -86,7 +91,16 @@ class SceneModal extends Component {
     this.setState({ openModal: true });
   };
 
+  updateIcon(e) {
+    this.setState({ selectedIcon: e });
+  }
+
   render() {
+    const spaceDiv = {
+      background: "#f4f4f4",
+      padding: "10px 10px",
+      margin: "10px 0px",
+    };
     return (
       <div>
         {!this.props.nicolaStop ? (
@@ -149,6 +163,15 @@ class SceneModal extends Component {
                   value={this.state.name}
                 />
               </Form.Field>
+              <div style={spaceDiv}>
+                <p>Select an icon:</p>
+                <SelectIcons
+                  updateIcon={this.updateIcon}
+                  currentIcon={
+                    this.type === "new" ? "home" : this.props.scene.icon
+                  }
+                />
+              </div>
             </Form>
 
             {this.type === "modify" ? (

smart-hut/src/remote.js

@@ -454,6 +454,7 @@ export const RemoteService = {
     return (dispatch) => {
       data = {
         name: data.name,
+        icon: data.icon,
       };
 
       return (sceneId

smart-hut/src/store.js

@@ -49,6 +49,7 @@ function reducer(previousState, action) {
         scenes: {
           [scene.id]: {
             name: { $set: scene.name },
+            icon: { $set: scene.icon },
           },
         },
       });

smart-hut/src/views/Navbar.js

@@ -103,7 +103,7 @@ class Navbar extends Component {
                           <Grid.Column>
                             <Icon name={e.icon} size="small" />
                           </Grid.Column>
-                          <Grid.Column width={8}>{e.name}</Grid.Column>
+                          <Grid.Column width={11}>{e.name}</Grid.Column>
                           <Grid.Column floated="right">
                             {this.state.editMode ? (
                               <RoomModal id={e.id} />

smart-hut/src/views/ScenesNavbar.js

@@ -100,7 +100,10 @@ class ScenesNavbar extends Component {
                     >
                       <Grid>
                         <Grid.Row>
-                          <Grid.Column width={12}>{e.name}</Grid.Column>
+                          <Grid.Column>
+                            <Icon name={e.icon} size="small" />
+                          </Grid.Column>
+                          <Grid.Column width={11}>{e.name}</Grid.Column>
                           <Grid.Column floated="right">
                             {this.state.editMode ? (
                               <SceneModal id={e.id} />