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
-            .map((u) => u.id),
+          guests: this.props.guests.map((u) => u.id),
         });
       })
       .catch(console.error);
@@ -32,11 +31,13 @@ class HostModal extends Component {
       .then((users) =>
         this.setState({
           ...this.state,
-          users: users.filter(u => u.id !== this.props.currentUserId).map((u) => ({
-            key: u.id,
-            text: `@${u.username} (${u.name})`,
-            value: u.id,
-          })),
+          users: users
+            .filter((u) => u.id !== this.props.currentUserId)
+            .map((u) => ({
+              key: u.id,
+              text: `@${u.username} (${u.name})`,
+              value: u.id,
+            })),
         })
       )
       .catch(console.error);
@@ -86,25 +87,20 @@ 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" }}>
-                  <label>Select which users are your guests: </label>
-                  <Dropdown
-                    name="guests"
-                    placeholder="Select Guests"
-                    fluid
-                    multiple
-                    onChange={this.setGuests}
-                    options={this.state.users}
-                    value={this.state.guests}
-                  />
-                </Form.Field>
-              </Form>
-            </Modal.Content>
+            <Form>
+              <Form.Field style={{ marginTop: "1rem" }}>
+                <label>Select which users are your guests: </label>
+                <Dropdown
+                  name="guests"
+                  placeholder="Select Guests"
+                  fluid
+                  multiple
+                  onChange={this.setGuests}
+                  options={this.state.users}
+                  value={this.state.guests}
+                />
+              </Form.Field>
+            </Form>
           </Modal.Content>
           <Modal.Actions>
             <Button color="red" onClick={this.closeModal}>
@@ -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,31 +12,59 @@ 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 (
+        <Segment placeholder style={{ paddingTop: "3rem" }}>
+          <Header icon>
+            <Icon name="folder open" />
+            Please select a host to visit on the left.
+          </Header>
+        </Segment>
+      );
+    }
+
     return (
-      <Card.Group centered 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>
-        )}
-        {this.props.hostDeviceIds.map((id) => {
-          return (
-            <Device
-              key={id}
-              hostId={this.props.activeHost}
-              tab="Hosts"
-              id={id}
-            />
-          );
-        })}
-      </Card.Group>
+      <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
+                key={id}
+                hostId={this.props.activeHost}
+                tab="Hosts"
+                id={id}
+              />
+            );
+          })}
+        </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 {
-  Button,
-  Form,
-  Icon,
-  Header,
-  Modal,
-  Input,
-  Checkbox,
-} from "semantic-ui-react";
+import { Button, Form, Icon, Header, Modal, Input } 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")
-        .then((res) => void dispatch(actions.scenesUpdate(res.data)))
+      return Endpoint.get("/scene", hostId ? { hostId } : {})
+        .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,