Merge branch '93-guests-implement-scenes-2' into 'dev'

Resolve "Guests: implement scenes"

Closes #93

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

smart-hut/src/components/HeaderController.js

@@ -1,5 +1,12 @@
 import React from "react";
-import { Grid, Divider, Button, Label, Responsive } from "semantic-ui-react";
+import {
+  Grid,
+  Divider,
+  Button,
+  Label,
+  Responsive,
+  Checkbox,
+} from "semantic-ui-react";
 import { Segment, Image } from "semantic-ui-react";
 import { RemoteService } from "../remote";
 import { withRouter } from "react-router-dom";
@@ -35,6 +42,16 @@ export class MyHeader extends React.Component {
       .catch((err) => console.error("MyHeader fetch user info error", err));
   }
 
+  setCameraEnabled(val) {
+    let enabled = {
+      cameraEnabled: val,
+    };
+    this.props
+      .userPermissions(enabled)
+      .then(() => this.getInfo())
+      .catch((err) => console.error("Camera enabled", err));
+  }
+
   render() {
     return (
       <div>
@@ -60,6 +77,11 @@ export class MyHeader extends React.Component {
                 <Button basic inverted onClick={this.logout}>
                   Logout
                 </Button>
+                <Checkbox
+                  checked={this.props.cameraEnabled}
+                  toggle
+                  onChange={(e, val) => this.setCameraEnabled(val.checked)}
+                />
               </Grid.Column>
             </Grid.Row>
           </Grid>
@@ -94,6 +116,7 @@ export class MyHeader extends React.Component {
 const mapStateToProps = (state, _) => ({
   username:
     state.userInfo && state.userInfo.username ? state.userInfo.username : "",
+  cameraEnabled: state.userInfo ? state.userInfo.cameraEnabled : false,
 });
 const LoginContainer = connect(
   mapStateToProps,

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

@@ -8,6 +8,7 @@ import {
   Form,
   Input,
   Dropdown,
+  Checkbox,
 } from "semantic-ui-react";
 import SelectIcons from "./SelectIcons";
 import { connect } from "react-redux";
@@ -23,6 +24,7 @@ class SceneModal extends Component {
     this.modifySceneModal = this.modifySceneModal.bind(this);
     this.deleteScene = this.deleteScene.bind(this);
     this.updateIcon = this.updateIcon.bind(this);
+    this.setGuestAccessEnabled = this.setGuestAccessEnabled.bind(this);
     this.setCopyFrom = this.setCopyFrom.bind(this);
   }
 
@@ -41,6 +43,8 @@ class SceneModal extends Component {
       selectedIcon: "home",
       scenes: this.scenes,
       copyFrom: null,
+      guestAccessEnabled:
+        this.type === "new" ? null : this.props.scene.guestAccessEnabled,
     };
   }
 
@@ -79,7 +83,9 @@ class SceneModal extends Component {
     let data = {
       name: this.state.name,
       icon: this.state.selectedIcon,
+      guestAccessEnabled: this.state.guestAccessEnabled,
     };
+    console.log(data);
 
     this.props
       .saveScene(data, this.props.id)
@@ -119,6 +125,11 @@ class SceneModal extends Component {
     this.setState({ ...this.state, copyFrom: copyFrom.value });
   }
 
+  setGuestAccessEnabled(val) {
+    console.log(this.state, val);
+    this.setState({ guestAccessEnabled: val });
+  }
+
   render() {
     const spaceDiv = {
       background: "#f4f4f4",
@@ -210,6 +221,17 @@ class SceneModal extends Component {
                   />
                 </Form.Field>
               )}
+              {this.type === "modify" ? (
+                <Form.Field>
+                  <Checkbox
+                    checked={this.state.guestAccessEnabled}
+                    toggle
+                    onChange={(e, val) =>
+                      this.setGuestAccessEnabled(val.checked)
+                    }
+                  />
+                </Form.Field>
+              ) : null}
             </Form>
 
             {this.type === "modify" ? (

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/components/dashboard/devices/Videocam.js

@@ -31,7 +31,7 @@ class Videocam extends Component {
 
   setOnOff(onOff) {
     const turn = onOff;
-    if (this.props.tab === "Devices") {
+    if (this.props.tab === "Devices" || this.props.tab === "Hosts") {
       this.props
         .saveDevice({ ...this.props.device, on: turn })
         .then((res) =>

smart-hut/src/remote.js

@@ -242,6 +242,20 @@ export const RemoteService = {
       });
   },
 
+  /**
+   * Fetches user information via REST calls, if it is logged in
+   * @returns {Promise<Undefined, RemoteError>} promise that resolves to void and rejects
+   *  with user-fiendly errors as a RemoteError
+   */
+  userPermissions: (data) => {
+    return (dispatch) => {
+      return Endpoint.put("/user/permissions", {}, data).catch((err) => {
+        console.warn("Fetch user info error", err);
+        throw new RemoteError(["Network error"]);
+      });
+    };
+  },
+
   /**
    * Fetches user information via REST calls, if it is logged in
    * @returns {Promise<Undefined, RemoteError>} promise that resolves to void and rejects
@@ -290,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"]);
@@ -458,6 +479,7 @@ export const RemoteService = {
       data = {
         name: data.name,
         icon: data.icon,
+        guestAccessEnabled: sceneId ? data.guestAccessEnabled : false,
       };
 
       return (sceneId

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,