fixed bugs and cleaned code

smart-hut/src/App.js

@@ -29,7 +29,9 @@ class App extends Component {
 
 		try {
       let userJsonString = localStorage.getItem("token");
-      if (userJsonString) {
+      let exp =  localStorage.getItem("exp");
+      let date = new Date().getTime();
+      if (userJsonString && exp && date < exp) {
         loggedIn = true;
       }
 		}catch(exception) {
@@ -63,6 +65,7 @@ class App extends Component {
       .then(res => {
         if (res.data && res.status === 200) {
           localStorage.setItem("token", res.data.jwttoken);
+          localStorage.setItem("exp", new Date().getTime() + (60*60*5))
           call.setToken(res.data.jwttoken);
           this.setState(
             {

smart-hut/src/client_server.js

@@ -63,7 +63,7 @@ export var call  = {
         return axios.post(config + 'room', data, { headers: { Authorization : "Bearer " + tkn } }) 
     },
     updateRoom: function(data, headers) {
-        return axios.put(config + 'room/'+data.id)
+        return axios.put(config + 'room?name='+ data.name, data, { headers: { Authorization : "Bearer " + tkn } })
     },
     deleteRoom: function(data, headers) {
         return axios.delete(config + 'room/'+data.id, { headers: { Authorization : "Bearer " + tkn } });
@@ -71,8 +71,12 @@ export var call  = {
     devicePost: function(data, headers) {
         return axios.post(config + data.device, data.params, { headers: { Authorization : "Bearer " + tkn } })
     },
-    deviceUpdate: function(data, headers) {
+    deviceUpdate: function(data, typeDevice) {
-        return axios.put(config + 'device', data, { headers: { Authorization : "Bearer " + tkn } })
+        let url = 'device';
+        if (typeDevice) {
+            url = typeDevice;
+        }
+        return axios.put(config + url, data, { headers: { Authorization : "Bearer " + tkn } })
     },
     deviceDelete: function(data, headers) {
         return axios.delete(config + data.device + '/' + data.id, {}, { headers: { Authorization : "Bearer " + tkn } })

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

@@ -68,7 +68,7 @@ export default class DevicePanel extends Component {
                 console.log(err);
                 });
         } else {
-            call.getAllDevicesByRoom(this.state.settingsDeviceId)
+            call.getAllDevicesByRoom(this.props.activeItem)
                 .then(res => {
                     if (res.status === 200) {
                         this.setState({
@@ -98,6 +98,7 @@ export default class DevicePanel extends Component {
             .then(res => {
             if (res.status === 200) {
                 this.getDevices();
+                this.forceUpdate();
             }
             }).catch(err => {
 

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

@@ -12,6 +12,7 @@ import Settings from "./DeviceSettings";
 import {Image} from "semantic-ui-react";
 import {CircularInput, CircularProgress, CircularThumb, CircularTrack} from "react-circular-input";
 import {valueStyle, intensityLightStyle, style, nameStyle} from "./LightStyle";
+import { call } from '../../../client_server';
 
 export default class Light extends Component {
   constructor(props) {
@@ -28,7 +29,14 @@ export default class Light extends Component {
   };
 
   setIntensity = (newValue) => {
+    this.props.device.intensity = Math.round(newValue) <= 1 ? 1 : Math.round(newValue );
+    console.log(this.props.device.intensity)
+    call.deviceUpdate(this.props.device, 'dimmableLight')
+      .then(res => {
+        if (res.status === 200 ) {
           this.setState({intensity: newValue});
+        }
+      })
   };
 
   getIcon = () => {
@@ -52,7 +60,7 @@ export default class Light extends Component {
   render() {
     const intensityLightView = (
       <CircularInput
-        value={this.state.intensity}
+        value={this.props.device.intensity}
         onChange={this.setIntensity}
         style={style}
       >
@@ -61,7 +69,7 @@ export default class Light extends Component {
         <CircularThumb/>
 
         <text style={valueStyle} x={100} y={100} textAnchor="middle" dy="0.3em" fontWeight="bold">
-          {Math.round(this.state.intensity * 100)}%
+          {Math.round(this.props.device.intensity)}%
         </text>
         <text style={intensityLightStyle} x={100} y={150} textAnchor="middle" dy="0.3em" fontWeight="bold">
           {this.props.device.name}
@@ -83,7 +91,7 @@ export default class Light extends Component {
           deviceId={this.props.device.id}
           edit={this.props.edit}
           onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)}/>
-        {this.state.intensity ? (intensityLightView) : (normalLightView)}
+        {this.props.device.intensity ? (intensityLightView) : (normalLightView)}
       </StyledDiv>
     )
   }

smart-hut/src/components/modalform.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Button, Header, Modal, Form, Input, Icon } from 'semantic-ui-react'
+import { Button, Header, Modal, Form, Input, Icon, Responsive } from 'semantic-ui-react'
 import SelectIcons from "./SelectIcons";
 
 export default class ModalWindow extends Component {
@@ -22,7 +22,7 @@ export default class ModalWindow extends Component {
     let data = {
       "icon" : this.state.selectedIcon,
       "name" : this.state.name,
-      "images" : this.state.img
+      "image" : this.state.img
     }
     this.props.addRoom(data);
     this.closeModal();
@@ -30,9 +30,9 @@ export default class ModalWindow extends Component {
 
   modifyRoomModal = (e) => {
     let data = {
-      "icon" : this.state.selectedIcon,
+      "icon" : this.state.selectedIcon === "" ? this.props.idRoom.icon : this.state.selectedIcon ,
-      "name" : this.state.name,
+      "name" : this.state.name === ""? this.props.idRoom.name : this.state.name,
-      "images" : this.state.img
+      "image" : this.state.img
     }
     this.props.updateRoom(data);
     this.closeModal();
@@ -44,6 +44,7 @@ export default class ModalWindow extends Component {
   }
 
   changeSomething = (event) => {
+
    let nam = event.target.name;
    let val = event.target.value;
    this.setState({[nam]: val});
@@ -73,15 +74,30 @@ export default class ModalWindow extends Component {
 
       return (
         <div>
-
+          <Responsive minWidth={768} >
           {this.props.type === "new" ?
             <Button icon labelPosition='left' inverted onClick={this.openModal}>
               <Icon name='plus' size='small'/>
               ADD ROOM
             </Button>
             :
-         null
+              <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>
+              :
+                <Button icon fluid labelPosition='left' onClick={this.openModal}>
+                  <Icon name='pencil' size='small'/>
+                  EDIT ROOM
+                </Button>
+            }
+          </Responsive>
 
         <Modal
         onClose={this.closeModal}
@@ -92,12 +108,12 @@ export default class ModalWindow extends Component {
           <p>Insert the name of the room:</p>
             <Form.Field>
               <Input label='Room name' placeholder='Room Name' name="name" type='text' onChange={this.changeSomething}
-              value={this.props.type === "new" ? null : this.props.idRoom.name }/>
+              value={this.props.type === "new" && this.props.idRoom !== -1 ? null : this.props.idRoom.name }/>
             </Form.Field>
             <p>Insert an image of the room:</p>
             <Form.Field>
               <Input label='Room image' type='file' name="img" onChange={this.changeSomething}
-              value={this.props.type === "new" ? null : this.props.idRoom.images }/>
+              value={this.props.type === "new" && this.props.idRoom !== -1 ? null : this.props.idRoom.images }/>
             </Form.Field>
           </Form>
 

smart-hut/src/views/Dashboard.js

@@ -4,7 +4,7 @@ import Navbar from './Navbar'
 import MyHeader from '../components/HeaderController'
 
 import { call } from '../client_server';
-import { Grid } from 'semantic-ui-react'
+import { Grid, Responsive } from 'semantic-ui-react'
 /*
   rooms -> actual rooms
   activeItem -> the current room in view
@@ -26,24 +26,16 @@ export default class Dashboard extends Component{
 
     this.addRoom = this.addRoom.bind(this);
     this.deleteRoom = this.deleteRoom.bind(this);
+    this.updateRoom = this.updateRoom.bind(this);
     this.addDevice = this.addDevice.bind(this);
     this.handleItemClick = this.handleItemClick.bind(this);
   }
 
-  componentDidMount() {
+  getDevices() {
-    call.getAllRooms(this.props.tkn)
+    if (this.state.activeItem === -1) {
+        call.getAllDevices() 
             .then(res => {
-        if (res.status === 200){
+            if ( res.status === 200) {
-          this.setState({
-            rooms: res.data
-          });
-        }
-      }).catch(err => {
-        console.log(err);
-      });
-    call.getAllDevices(this.props.tkn)
-      .then(res => {
-        if (res.status === 200) {
                 this.setState({
                 devices: res.data
                 });
@@ -51,15 +43,41 @@ export default class Dashboard extends Component{
             }).catch(err => {
             console.log(err);
             });
+    } else {
+        call.getAllDevicesByRoom(this.state.activeItem)
+            .then(res => {
+                if (res.status === 200) {
+                    this.setState({
+                        devices: res.data
+                    });
+                }
+            }).catch(err => {
+
+            });
+    }
+}
+
+getRooms() {
+  call.getAllRooms(this.props.tkn)
+    .then(res => {
+      this.setState({
+        rooms: res.data
+      })
+    }).catch(err => {
+
+    });
+}
+
+  componentDidMount() {
+    this.getRooms();
+    this.getDevices();
   }
 
   addRoom(data) {
     call.createRoom(data)
       .then(res => {
         if (res.status === 200 && res.data) {
-          this.setState(state => ({
+          this.getRooms();
-            rooms: state.rooms.concat([res.data])
-          }));
         }
       }).catch(err => {
         console.log(err);
@@ -73,11 +91,25 @@ export default class Dashboard extends Component{
     call.deleteRoom(data)
       .then(res => {
         //remove room in state.rooms
+        this.getRooms();
       }).catch(err => {
         console.log(err);
       });
   }
 
+  updateRoom(data) {
+    console.log(data)
+    call.updateRoom(data)
+      .then(res => {
+        if (res.status === 200 && res.data) {
+          this.getRooms();
+          this.forceUpdate();
+        }
+      }).catch(err => {
+
+      })
+  }
+
   handleItemClick(id) {
     // el -> obj of name and id
     //da fare richiesta get della room e settare activeItem
@@ -99,10 +131,10 @@ export default class Dashboard extends Component{
       call.getAllDevicesByRoom(id, this.props.tkn)
         .then(res => {
           if (res.status === 200) {
-            console.log(res.data);
             this.setState({
               devices: res.data
             });
+            this.forceUpdate();
           }
         }).catch(err => {
           console.log(err);
@@ -127,6 +159,7 @@ export default class Dashboard extends Component{
   render () {
     return(
       <div style={{height : "110vh", background: '#1b1c1d'}}>
+        <Responsive minWidth={768} >
           <Grid >
             <Grid.Row color='black'>
               <Grid.Column>
@@ -135,7 +168,7 @@ export default class Dashboard extends Component{
             </Grid.Row>
               <Grid.Row color='black'>
                 <Grid.Column width={3}>
-              <Navbar addRoom={this.addRoom} deleteRoom={this.deleteRoom} rooms={this.state.rooms} handleItemClick={this.handleItemClick}/>
+                  <Navbar addRoom={this.addRoom} updateRoom={this.updateRoom} deleteRoom={this.deleteRoom} rooms={this.state.rooms} handleItemClick={this.handleItemClick}/>
                 </Grid.Column>
 
                 <Grid.Column width={13}>
@@ -143,6 +176,26 @@ export default class Dashboard extends Component{
                 </Grid.Column>
               </Grid.Row>
           </Grid>
+        </Responsive>
+        <Responsive maxWidth={768} >
+          <Grid inverted>
+              <Grid.Row color='black'>
+                <Grid.Column>
+                  <MyHeader logout={this.props.logout} />
+                </Grid.Column>
+              </Grid.Row>
+              <Grid.Row color='black'>
+                <Grid.Column color='black'>
+                  <Navbar addRoom={this.addRoom} deleteRoom={this.deleteRoom} rooms={this.state.rooms} handleItemClick={this.handleItemClick}/>
+                </Grid.Column>
+              </Grid.Row>
+              <Grid.Row >
+                  <Grid.Column >
+                    <DevicePanel tkn={this.props.tkn} activeItem={this.state.activeItem} addDevice={this.addDevice} devices={this.state.devices} />
+                  </Grid.Column>
+              </Grid.Row>
+            </Grid>
+        </Responsive>
       </div>
     )
   }

smart-hut/src/views/FourOhFour.js

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import { Header, Grid, Message, Button, Segment, Responsive, Image} from 'semantic-ui-react';
+import { Grid, Button, Segment, Responsive, Image} from 'semantic-ui-react';
 import {Link } from "react-router-dom";
 import MyHeader from '../components/HeaderController'
 

smart-hut/src/views/Instruction.js

@@ -1,16 +1,9 @@
 import React, { Component } from "react";
-import { render } from "react-dom";
 import HomeNavbar from "./../components/HomeNavbar";
 import {
   Container,
-  Icon,
-  Image,
-  Menu,
-  Sidebar,
-  Responsive,
   Header,
   Divider,
-  Message,
   Grid
 } from "semantic-ui-react";
 

smart-hut/src/views/Navbar.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Menu, Grid, Icon, Button, Header, Image, Modal, Responsive, Segment,  Dropdown } from "semantic-ui-react";
+import { Menu, Grid, Icon, Responsive, Segment,  Dropdown } from "semantic-ui-react";
 import {editButtonStyle} from "../components/dashboard/devices/styleComponents";
 import ModalWindow from "../components/modalform";
 
@@ -7,8 +7,8 @@ class Navbar extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      activeItem: 'Home',
       activeItemName: 'Home',
+      activeItem: -1,
       edited: "",
       editMode : false
     }
@@ -24,10 +24,11 @@ class Navbar extends Component {
         obj = e;
       }
     });
+
     this.setState({
 	      activeItem: id,
-        activeItemName: name,
+        activeRoom: obj,
-        activeRoom: obj
+        activeItemName: name
      });
     this.props.handleItemClick(id)
   }
@@ -35,7 +36,7 @@ class Navbar extends Component {
   render(){
     //const { activeItem } = this.state
     return (
-      <div>
+      <div style={{background: '#1b1c1d'}}>
       <Segment.Group>
        <Responsive as={Segment} minWidth={768}>
           <Grid>
@@ -48,7 +49,7 @@ class Navbar extends Component {
                     key={-1}
                     id={-1}
                     name='Home'
-                    active={this.state.activeItem === 'Home'}
+                    active={this.state.activeItem === -1}
                     onClick={this.handleClick}
                   >
                   <Grid>
@@ -84,7 +85,7 @@ class Navbar extends Component {
                           </Grid.Column>
                           <Grid.Column floated="right">
                             {this.state.editMode ?
-                            <ModalWindow type="modify" idRoom={e} modifyRoom={this.props.updateRoom} deleteRoom={this.props.deleteRoom}/>
+                              <ModalWindow type="modify" idRoom={e} updateRoom={this.props.updateRoom} deleteRoom={this.props.deleteRoom}/>
                               : null
                             }
                           </Grid.Column>
@@ -162,23 +163,21 @@ class Navbar extends Component {
                   </Dropdown.Menu>
                 </Dropdown>
               </Menu>
-
+              {
+                this.state.activeItem !== -1 ?
                 <Grid>
                 <Grid.Row>
                   <Grid.Column width={8}>
-                  <Button icon fluid labelPosition='left'>
+                  <ModalWindow type="new" idRoom={this.state.activeItem === -1? -1 : this.state.activeRoom} updateRoom={this.props.updateRoom} deleteRoom={this.props.deleteRoom}/>
-                    <Icon name='plus' size='small'/>
-                    ADD ROOM
-                  </Button>
                   </Grid.Column>
                   <Grid.Column width={8}>
-                  <Button icon fluid labelPosition='left'>
+                    <ModalWindow type="modify" idRoom={this.state.activeItem === -1? -1 : this.state.activeRoom} updateRoom={this.props.updateRoom} deleteRoom={this.props.deleteRoom}/>
-                    <Icon name='pencil' size='small'/>
-                    EDIT ROOM
-                  </Button>
                   </Grid.Column>
                 </Grid.Row>
                 </Grid>
+                : 
+                null
+              }
             </Responsive>
 
           </Segment.Group>