Merge branch '58-switch-and-smart-plug-update' into 'dev'

switch and smart-plug update and fixed warnings

Closes #58

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

smart-hut/src/client_server.js

@@ -233,7 +233,7 @@ export var call = {
     let promiseRes = axios.put(config + url, data, {
       headers: { Authorization: "Bearer " + tkn },
     });
-
+    // also for btn/knob dimmer
     if (typeDevice === "switch/operate") {
       promiseRes = promiseRes.then((e) => {
         if (e.status === 200) {

smart-hut/src/components/HeaderController.js

@@ -1,12 +1,7 @@
 import React from "react";
 import { Dropdown, Icon, Grid, Divider } from "semantic-ui-react";
 import { Segment, Image } from "semantic-ui-react";
-import {
+import { BrowserView, MobileView } from "react-device-detect";
-  BrowserView,
-  MobileView,
-  isBrowser,
-  isMobile,
-} from "react-device-detect";
 
 const AvatarImage = () => (
   <Image src="avatar3.png" style={{ width: "25px", height: "auto" }} centered />
@@ -22,16 +17,6 @@ const IconHomeImage = () => (
   />
 );
 
-const IconHomeImageMobile = () => (
-  <Image
-    src="smart-home.png"
-    style={{ width: "10px", height: "auto" }}
-    centered
-    as="a"
-    href="/"
-  />
-);
-
 const TitleImage = () => <Image src="title7.png" size="medium" centered />;
 
 const BrowserStructure = (props) => (

smart-hut/src/components/SelectIcons.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Button, Grid, Responsive } from "semantic-ui-react";
+import { Button, Grid } from "semantic-ui-react";
 
 export default class SelectIcons extends Component {
   constructor(props) {

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

@@ -56,7 +56,7 @@ export default class DevicePanel extends Component {
     this.forceUpdate();
   };
 
-  getDevices() {
+  getDevices = () => {
     if (this.props.activeItem === -1) {
       call
         .getAllDevices()
@@ -82,7 +82,7 @@ export default class DevicePanel extends Component {
         })
         .catch((err) => {});
     }
-  }
+  };
 
   async addDevice(data) {
     const ds = await this.props.addDevice(data);
@@ -96,10 +96,8 @@ export default class DevicePanel extends Component {
     const roomId = this.props.devices.filter(
       (d) => d.id === this.state.settingsDeviceId
     )[0].roomId;
-    console.log(roomId);
     data["id"] = this.state.settingsDeviceId;
     data["roomId"] = roomId;
-    console.log(data);
     call
       .deviceUpdate(data)
       .then((res) => {
@@ -159,6 +157,7 @@ export default class DevicePanel extends Component {
                 return (
                   <Grid.Column key={i}>
                     <DeviceType
+                      updateDev={this.props.updateDeviceUi}
                       type={e.kind}
                       onChangeData={this.changeDeviceData}
                       device={e}

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

@@ -10,6 +10,7 @@ const DeviceType = (props) => {
     case "regularLight":
       return (
         <Light
+          updateDev={props.updateDeviceUi}
           onChangeData={props.changeDeviceData}
           device={props.device}
           edit={props.edit}
@@ -18,6 +19,7 @@ const DeviceType = (props) => {
     case "sensor":
       return (
         <Sensor
+          updateDev={props.updateDeviceUi}
           onChangeData={props.changeDeviceData}
           device={props.device}
           edit={props.edit}
@@ -26,6 +28,7 @@ const DeviceType = (props) => {
     case "buttonDimmer":
       return (
         <DefaultDimmer
+          updateDev={props.updateDeviceUi}
           onChangeData={props.changeDeviceData}
           device={props.device}
           edit={props.edit}
@@ -34,6 +37,7 @@ const DeviceType = (props) => {
     case "smartPlug":
       return (
         <SmartPlug
+          updateDev={props.updateDeviceUi}
           onChangeData={props.changeDeviceData}
           device={props.device}
           edit={props.edit}
@@ -42,6 +46,7 @@ const DeviceType = (props) => {
     case "switch":
       return (
         <Switcher
+          updateDev={props.updateDeviceUi}
           onChangeData={props.changeDeviceData}
           device={props.device}
           edit={props.edit}
@@ -50,6 +55,7 @@ const DeviceType = (props) => {
     case "dimmableLight":
       return (
         <Light
+          updateDev={props.updateDeviceUi}
           onChangeData={props.changeDeviceData}
           device={props.device}
           edit={props.edit}

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

@@ -38,7 +38,9 @@ export default class Sensor extends Component {
       value: 0,
     };
     this.units = "";
-    this.stateCallback = (e) => this.setState(Object.assign(this.state, e));
+    this.stateCallback = (e) => {
+      this.setState(Object.assign(this.state, e));
+    };
 
     call.socketSubscribe(this.props.device.id, this.stateCallback);
   }
@@ -95,7 +97,7 @@ export default class Sensor extends Component {
             dy="0.3em"
             fontWeight="bold"
           >
-            {Math.round(this.state.value)}
+            {+(Math.round(this.state.value + "e+2") + "e-2")}
             {this.units}
           </text>
           <text

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

@@ -20,6 +20,21 @@ export default class SmartPlug extends Component {
     };
     this.iconOn = "/img/smart-plug.svg";
     this.iconOff = "/img/smart-plug-off.svg";
+
+    this.stateCallback = (e) => {
+      this.setState(
+        Object.assign(this.state, {
+          energyConsumed: (e.totalConsumption / 1000).toFixed(3),
+          turnedOn: e.on,
+        })
+      );
+    };
+
+    call.socketSubscribe(this.props.device.id, this.stateCallback);
+  }
+
+  componentWillUnmount() {
+    call.socketUnsubscribe(this.props.device.id, this.stateCallback);
   }
 
   onClickDevice = () => {

smart-hut/src/components/modalform.js

@@ -108,16 +108,6 @@ export default class ModalWindow extends Component {
             <Icon name="pencil" size="small" onClick={this.openModal} />
           )}
         </Responsive>
-        <Responsive maxWidth={768}>
-          {this.props.type === "new" ? (
-            <Button icon fluid labelPosition="left" onClick={this.openModal}>
-              <Icon name="plus" size="small" />
-              ADD ROOM
-            </Button>
-          ) : (
-            <Icon name="pencil" size="small" onClick={this.openModal} />
-          )}
-        </Responsive>
         <Responsive maxWidth={768}>
           {this.props.type === "new" ? (
             <Button icon fluid labelPosition="left" onClick={this.openModal}>

smart-hut/src/views/Dashboard.js

@@ -21,6 +21,7 @@ export default class Dashboard extends Component {
       rooms: [],
       activeItem: -1,
       devices: [],
+      image: "",
       tkn: this.props.tkn,
     };
 
@@ -51,6 +52,7 @@ export default class Dashboard extends Component {
         .getAllDevicesByRoom(this.state.activeItem)
         .then((res) => {
           if (res.status === 200) {
+            console.log(res.data);
             this.setState({
               devices: res.data,
             });
@@ -98,6 +100,7 @@ export default class Dashboard extends Component {
       .then((res) => {
         //remove room in state.rooms
         this.getRooms();
+        this.handleItemClick(-1);
       })
       .catch((err) => {
         console.log(err);
@@ -118,8 +121,6 @@ export default class Dashboard extends Component {
   }
 
   handleItemClick(id) {
-    // el -> obj of name and id
-    //da fare richiesta get della room e settare activeItem
     this.setState({
       activeItem: id,
     });
@@ -166,6 +167,20 @@ export default class Dashboard extends Component {
       .catch((err) => {});
   }
 
+  updateDeviceUi = (data) => {
+    let ds = this.state.devices;
+    ds.forEach((e) => {
+      if (e.id === data.id) {
+        e = data;
+      }
+    });
+    this.setState({
+      devices: ds,
+    });
+
+    return;
+  };
+
   render() {
     return (
       <div style={{ height: "110vh", background: "#1b1c1d" }}>
@@ -179,6 +194,7 @@ export default class Dashboard extends Component {
             <Grid.Row color="black">
               <Grid.Column width={3}>
                 <Navbar
+                  activeItem={this.state.activeItem}
                   addRoom={this.addRoom}
                   updateRoom={this.updateRoom}
                   deleteRoom={this.deleteRoom}
@@ -208,7 +224,9 @@ export default class Dashboard extends Component {
             <Grid.Row color="black">
               <Grid.Column color="black">
                 <Navbar
+                  activeItem={this.state.activeItem}
                   addRoom={this.addRoom}
+                  updateRoom={this.updateRoom}
                   deleteRoom={this.deleteRoom}
                   rooms={this.state.rooms}
                   handleItemClick={this.handleItemClick}
@@ -218,10 +236,12 @@ export default class Dashboard extends Component {
             <Grid.Row>
               <Grid.Column>
                 <DevicePanel
+                  img={this.state.image}
                   tkn={this.props.tkn}
                   activeItem={this.state.activeItem}
                   addDevice={this.addDevice}
                   devices={this.state.devices}
+                  updateDev={this.updateDeviceUi}
                 />
               </Grid.Column>
             </Grid.Row>

smart-hut/src/views/Navbar.js

@@ -21,6 +21,12 @@ class Navbar extends Component {
     };
   }
 
+  componentDidMount() {
+    this.setState({
+      activeItem: this.props.activeItem,
+    });
+  }
+
   editModeController = (e) =>
     this.setState((prevState) => ({ editMode: !prevState.editMode }));