Done 1 read scene part

smart-hut/src/components/HostModal.js

@@ -22,8 +22,7 @@ class HostModal extends Component {
       .then(() => {
         this.setState({
           ...this.state,
-          guests: this.props.guests
+          guests: this.props.guests.map((u) => u.id),
-            .map((u) => u.id),
         });
       })
       .catch(console.error);
@@ -32,7 +31,9 @@ class HostModal extends Component {
       .then((users) =>
         this.setState({
           ...this.state,
-          users: users.filter(u => u.id !== this.props.currentUserId).map((u) => ({
+          users: users
+            .filter((u) => u.id !== this.props.currentUserId)
+            .map((u) => ({
               key: u.id,
               text: `@${u.username} (${u.name})`,
               value: u.id,
@@ -85,10 +86,6 @@ class HostModal extends Component {
 
         <Modal closeIcon onClose={this.closeModal} open={this.state.openModal}>
           <Header>Select guests</Header>
-          <Modal.Content>
-            <marquee scrollamount="50">
-              <h1>Spaghetti!</h1>
-            </marquee>
           <Modal.Content>
             <Form>
               <Form.Field style={{ marginTop: "1rem" }}>
@@ -105,7 +102,6 @@ class HostModal extends Component {
               </Form.Field>
             </Form>
           </Modal.Content>
-          </Modal.Content>
           <Modal.Actions>
             <Button color="red" onClick={this.closeModal}>
               <Icon name="remove" /> Discard changes
@@ -127,7 +123,7 @@ const setActiveHost = (activeHost) => {
 
 const mapStateToProps = (state) => ({
   guests: state.guests,
-  currentUserId: state.userInfo.id
+  currentUserId: state.userInfo.id,
 });
 const HostModalContainer = connect(
   mapStateToProps,

smart-hut/src/components/RoomModal.js

@@ -13,7 +13,6 @@ import SelectIcons from "./SelectIcons";
 import { connect } from "react-redux";
 import { RemoteService } from "../remote";
 import { appActions } from "../storeActions";
-import { update } from "immutability-helper";
 
 const NO_IMAGE = "https://react.semantic-ui.com/images/wireframe/image.png";
 
@@ -41,7 +40,7 @@ class RoomModal extends Component {
   unsetImage = (e) => {
     e.preventDefault();
     this.setState({ ...this.state, img: "" });
-  }
+  };
 
   setInitialState() {
     this.setState(this.initialState);

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

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import { connect } from "react-redux";
 import { RemoteService } from "../../remote";
-import { Card, Segment, Header, Icon } from "semantic-ui-react";
+import { Card, Segment, Header, Icon, Button } from "semantic-ui-react";
 import Device from "../../components/dashboard/devices/Device";
 
 class HostsPanel extends Component {
@@ -12,20 +12,47 @@ class HostsPanel extends Component {
     ) {
       this.props.fetchDevices(null, this.props.activeHost).catch(console.error);
       this.props.fetchAllRooms(this.props.activeHost).catch(console.error);
+      this.props.fetchAllScenes(this.props.activeHost).catch(console.error);
     }
   }
 
   render() {
+    if (this.props.isActiveDefaultHost) {
       return (
-      <Card.Group centered style={{ paddingTop: "3rem" }}>
+        <Segment placeholder style={{ paddingTop: "3rem" }}>
-        {this.props.isActiveDefaultHost && (
-          <Segment placeholder>
           <Header icon>
             <Icon name="folder open" />
             Please select a host to visit on the left.
           </Header>
         </Segment>
-        )}
+      );
+    }
+
+    return (
+      <React.Fragment>
+        <Header style={{ textAlign: "center", marginTop: "3rem" }} as="h3">
+          Scenes
+        </Header>
+        <Card.Group centered>
+          {this.props.hostScenes.map((scene) => (
+            <Card>
+              <Card.Header textAlign="center">
+                <Header style={{ margin: "1.5rem 0" }} as="h3">
+                  {scene.name} <Icon name={scene.icon} />
+                </Header>
+              </Card.Header>
+              <Card.Content extras>
+                <div className="ui two buttons">
+                  <Button>Apply</Button>
+                </div>
+              </Card.Content>
+            </Card>
+          ))}
+        </Card.Group>
+        <Header style={{ textAlign: "center" }} as="h3">
+          Devices
+        </Header>
+        <Card.Group centered>
           {this.props.hostDeviceIds.map((id) => {
             return (
               <Device
@@ -37,6 +64,7 @@ class HostsPanel extends Component {
             );
           })}
         </Card.Group>
+      </React.Fragment>
     );
   }
 }
@@ -44,6 +72,7 @@ class HostsPanel extends Component {
 const mapStateToProps = (state, _) => ({
   isActiveDefaultHost: state.active.activeHost === -1,
   activeHost: state.active.activeHost,
+  hostScenes: state.hostScenes[state.active.activeHost] || [],
   hostDevices: state.hostDevices,
   hostDeviceIds: Object.keys(state.hostDevices[state.active.activeHost] || {}),
 });

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

@@ -1,13 +1,5 @@
 import React, { Component, useState } from "react";
-import {
+import { Button, Form, Icon, Header, Modal, Input } from "semantic-ui-react";
-  Button,
-  Form,
-  Icon,
-  Header,
-  Modal,
-  Input,
-  Checkbox,
-} from "semantic-ui-react";
 import { connect } from "react-redux";
 import { RemoteService } from "../../../remote";
 

smart-hut/src/remote.js

@@ -304,10 +304,17 @@ export const RemoteService = {
    * @returns {Promise<Undefined, RemoteError>} promise that resolves to void and rejects
    *  with user-fiendly errors as a RemoteError
    */
-  fetchAllScenes: () => {
+  fetchAllScenes: (hostId = null) => {
     return (dispatch) => {
-      return Endpoint.get("/scene")
+      return Endpoint.get("/scene", hostId ? { hostId } : {})
-        .then((res) => void dispatch(actions.scenesUpdate(res.data)))
+        .then(
+          (res) =>
+            void dispatch(
+              !hostId
+                ? actions.scenesUpdate(res.data)
+                : actions.hostScenesUpdate(hostId, res.data)
+            )
+        )
         .catch((err) => {
           console.error("Fetch all scenes error", err);
           throw new RemoteError(["Network error"]);

smart-hut/src/store.js

@@ -120,6 +120,15 @@ function reducer(previousState, action) {
         createOrUpdateScene(scene);
       }
       break;
+    case "HOST_SCENES_UPDATE":
+      change = {
+        hostScenes: {
+          [action.hostId]: { $set: action.scenes }, // stored as array
+        },
+      };
+
+      newState = update(previousState, change);
+      break;
     case "STATES_UPDATE":
       //console.log(action.sceneStates);
       change = null;
@@ -576,6 +585,7 @@ const initState = {
   rooms: {},
   /** @type {[integer]Scene} */
   scenes: {},
+  hostScenes: {},
   /** @type {[integer]Automation} */
   automations: {},
   /** @type {[integer]Device} */

smart-hut/src/storeActions.js

@@ -102,6 +102,11 @@ const actions = {
     type: "SCENES_UPDATE",
     scenes,
   }),
+  hostScenesUpdate: (hostId, scenes) => ({
+    type: "HOST_SCENES_UPDATE",
+    hostId,
+    scenes,
+  }),
   deviceDelete: (deviceId) => ({
     type: "DEVICE_DELETE",
     deviceId,