Everything related to the settings is done

smart-hut/src/App.js

@@ -98,8 +98,7 @@ class App extends Component {
           </Route>
           <Route path="/signup" exact component={Signup} />
           <Route path="/dashboard" >
-              //TODO Change this back the exclamation
-              {!this.state.loggedIn ? <Dashboard tkn={this.state.token} logout={this.logout} /> : <Redirect to="/login" />}
+              {this.state.loggedIn ? <Dashboard tkn={this.state.token} logout={this.logout} /> : <Redirect to="/login" />}
           </Route>
           <Route path="/forgot-password" >
               <ForgotPass />

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

@@ -2,7 +2,6 @@ import React, {Component} from 'react';
 import {
   Grid,
 } from "semantic-ui-react";
-import Device from "./devices/Device";
 import NewDevice from "./devices/NewDevice";
 import {LightDevice, SmartPlugDevice} from "./devices/TypesOfDevices";
 import {editButtonStyle, panelStyle} from "./devices/styleComponents";
@@ -12,6 +11,7 @@ import SmartPlug from "./devices/SmartPlug";
 import Sensor from "./devices/Sensor";
 import DigitalSensor from "./devices/DigitalSensor";
 import Switch from "./devices/Switch";
+import SettingsModal from "./devices/SettingsModal";
 
 
 const devices = [
@@ -44,7 +44,7 @@ const devices = [
   {
     "id": 5,
     "name": "Smart Plug",
-    "type": "smartplug",
+    "type": "smart-plug",
     ...SmartPlugDevice
   },
   {
@@ -64,12 +64,18 @@ class Panel extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      editMode: false,
       devices: devices,
+
+      editMode: false,
+      openSettingsModal: false,
+      settingsDeviceId: null,
     };
   }
 
-  editModeController = (e) => this.setState((prevState) => ({editMode: !prevState.editMode}));
+  editModeController = (e) => {
+    this.setState((prevState) => ({editMode: !prevState.editMode}));
+    console.log("CAMBIADO", this.state.editMode)
+  };
 
   changeDeviceData = (deviceId, newSettings) => {
     console.log(newSettings.name, " <-- new name --> ", deviceId);
@@ -95,23 +101,35 @@ class Panel extends Component {
     this.forceUpdate();
   };
 
+  openModal = (settingsDeviceId) => {
+    this.setState(prevState => ({
+      openSettingsModal: !prevState.openSettingsModal,
+      settingsDeviceId: settingsDeviceId
+    }));
+  };
 
   render() {
+    const edit = {
+      mode: this.state.editMode,
+      openModal: this.openModal,
+    };
     return (
       <div style={panelStyle}>
         <button style={editButtonStyle} onClick={this.editModeController}>Edit</button>
         <Grid doubling columns={5} divided="vertically">
+          {this.state.openSettingsModal ?
+            <SettingsModal openModal={this.openModal} device={this.state.devices.filter(d => d.id === this.state.settingsDeviceId)[0]}/> : ""}
           <Grid.Column>
-            <Light onChangeData={this.changeDeviceData} device={devices[0]} edit={this.state.editMode}/>
+            <SmartPlug onChangeData={this.changeDeviceData} device={devices[4]} edit={edit}/>
+          </Grid.Column>
+           <Grid.Column>
+              <Light onChangeData={this.changeDeviceData} device={devices[0]} edit={edit}/>
           </Grid.Column>
           <Grid.Column>
-            <SmartPlug onChangeData={this.changeDeviceData} device={devices[4]} edit={this.state.editMode}/>
+            <Sensor onChangeData={this.changeDeviceData} device={devices[5]} edit={edit}/>
           </Grid.Column>
           <Grid.Column>
-            <Sensor onChangeData={this.changeDeviceData} device={devices[5]} edit={this.state.editMode}/>
-          </Grid.Column>
-          <Grid.Column>
-            <Switch onChangeData={this.changeDeviceData} device={devices[6]} edit={this.state.editMode}/>
+            <Switch onChangeData={this.changeDeviceData} device={devices[6]} edit={edit}/>
           </Grid.Column>
           <Grid.Column>
             <NewDevice/>

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

@@ -1,48 +0,0 @@
-import React, {Component} from 'react';
-import {Image} from "semantic-ui-react";
-import {iconStyle, nameStyle, StyledDiv} from "./styleComponents";
-import Settings from './DeviceSettings';
-
-
-export default class Device extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            turnOnOff: "off",
-            icon: this.props.device.img
-        }
-    }
-
-    onClickDevice = () => {
-        if (!this.props.edit) {
-            if (this.props.device.type === "light") {
-                if (this.state.turnOnOff === "on") {
-                    this.setState({
-                        turnOnOff: "off",
-                        icon: this.props.device.img
-                    });
-                } else {
-                    this.setState({
-                        turnOnOff: "on",
-                        icon: this.props.device.imgClick
-                    });
-                }
-            }
-        }
-    };
-    render() {
-        return (
-            <StyledDiv onClick={this.props.edit ? () => {
-            } : this.onClickDevice} style={{textAlign: "center"}}>
-                <Settings
-                    deviceId={this.props.device.id}
-                    edit={this.props.edit}
-                    onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)}/>
-                <Image src={this.state.icon} style={iconStyle}/>
-                <h5 style={nameStyle}>{this.props.device.name}</h5>
-            </StyledDiv>
-        )
-    }
-}
-
-

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

@@ -1,73 +1,34 @@
 import React, {Component} from "react";
-import {Button, Form} from "semantic-ui-react";
-import {editModeIconStyle, editModeStyle, formStyle} from "./styleComponents";
-
-class SettingsForm extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {}
-    };
-
-    onChangeHandler = (event) => {
-        let nam = event.target.name;
-        let val = event.target.value;
-        this.setState({[nam]: val});
-    };
-
-    saveChanges = () => {
-        let newName = this.state["new-name"];
-        this.props.onChangeData(this.props.id, {"name": newName});
-    };
-
-    render() {
-        return (
-            <Form style={formStyle}>
-                <Form.Field>
-                    <label style={{color: "white"}}>New Device Name</label>
-                    <input name="new-name" placeholder='New name' onChange={this.onChangeHandler}/>
-                </Form.Field>
-                <Button type='submit' onClick={this.saveChanges}>Save</Button>
-            </Form>
-        )
-    }
-}
+import {editModeIconStyle, editModeStyle} from "./styleComponents";
 
 
 export default class Settings extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            displayForm: false,
-        }
-    };
+  constructor(props) {
+    super(props);
+    this.state = {
+      displayForm: true,
+    }
+  };
 
-    displayForm = () => {
-        this.setState((prevState) => ({displayForm: !prevState.displayForm}));
-    };
+  displayForm = () => {
+    this.setState((prevState) => ({displayForm: !prevState.displayForm}));
+  };
 
-    render() {
-        const view = (
-            <div>
-                {this.state.displayForm ? (
-                    <SettingsForm id={this.props.deviceId} onChangeData={this.props.onChangeData}/>) : ("")}
-                <div onClick={this.displayForm}>
-                        <span style={editModeStyle}>
-                            {!this.state.displayForm ? (
-                                <img
-                                src="/img/settings.svg"
-                                alt=""
-                                style={editModeIconStyle}/>)
-                                :
-                                <p style={{color: "white"}}>&times;</p>
-                            }
-                        </span>
-                </div>
-            </div>
-        );
-        return (
-            <React.Fragment>
-                {this.props.edit ? view : ("")}
-            </React.Fragment>
-        )
-    };
+  render() {
+    const view = (
+        <div onClick={() => this.props.edit.openModal(this.props.deviceId)}>
+          <span style={editModeStyle}>
+                  <img
+                    src="/img/settings.svg"
+                    alt=""
+                    style={editModeIconStyle}/>
+          </span>
+        </div>
+    );
+    return (
+      <React.Fragment>
+        {this.props.edit.mode ? view : ("")}
+      </React.Fragment>
+    )
+  };
 }

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

@@ -45,7 +45,7 @@ export default class DigitalSensor extends Component {
 
   render() {
     return (
-      <StyledDiv style={{textAlign: "center"}}>
+      <StyledDiv>
         <Settings
           deviceId={this.props.device.id}
           edit={this.props.edit}

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

@@ -14,79 +14,79 @@ import {CircularInput, CircularProgress, CircularThumb, CircularTrack} from "rea
 import {valueStyle, intensityLightStyle, style, nameStyle} from "./LightStyle";
 
 export default class Light extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            turnedOn: false,
-            hasIntensity : false
-        };
-        this.iconOn = "/img/lightOn.svg";
-        this.iconOff = "/img/lightOff.svg"
-    }
-
-    onClickDevice = () => {
-        this.setState((prevState) => ({turnedOn: !prevState.turnedOn}));
+  constructor(props) {
+    super(props);
+    this.state = {
+      turnedOn: false,
+      hasIntensity: false
     };
+    this.iconOn = "/img/lightOn.svg";
+    this.iconOff = "/img/lightOff.svg"
+  }
 
-    setIntensity = (newValue) => {
-        this.setState({intensityLevel : newValue});
-    };
+  onClickDevice = () => {
+    this.setState((prevState) => ({turnedOn: !prevState.turnedOn}));
+  };
 
-    getIcon = () => {
-        if(this.state.turnedOn){
-            return this.iconOn;
-        }
-        return this.iconOff;
-    };
-
-    componentDidMount() {
-        if(this.props.device.hasOwnProperty("hasIntensity") && this.props.device.hasOwnProperty("intensityLevel")) {
-            this.setState({
-                hasIntensity: this.props.device.hasIntensity,
-                intensityLevel: this.props.device.intensityLevel
-            });
-        }
-        // Get the state and update it
+  setIntensity = (newValue) => {
+    this.setState({intensityLevel: newValue});
+  };
 
+  getIcon = () => {
+    if (this.state.turnedOn) {
+      return this.iconOn;
     }
+    return this.iconOff;
+  };
 
-
-    render() {
-        const intensityLightView = (
-            <CircularInput
-                value={this.state.intensityLevel}
-                onChange={this.setIntensity}
-                style={style}
-            >
-                <CircularTrack/>
-                <CircularProgress/>
-                <CircularThumb/>
-
-                <text style={valueStyle} x={100} y={100} textAnchor="middle" dy="0.3em" fontWeight="bold">
-                    {Math.round(this.state.intensityLevel*100)}%
-                </text>
-                <text style={intensityLightStyle} x={100} y={150} textAnchor="middle" dy="0.3em" fontWeight="bold">
-                    {this.props.device.name}
-                </text>
-            </CircularInput>
-        );
-
-        const normalLightView = (
-            <StyledDiv onClick={this.props.edit ? () => {
-            } : this.onClickDevice} style={{textAlign: "center"}}>
-                <Settings
-                    deviceId={this.props.device.id}
-                    edit={this.props.edit}
-                    onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)}/>
-                <Image src={this.getIcon()} style={iconStyle}/>
-                <h5 style={nameStyle}>{this.props.device.name}</h5>
-            </StyledDiv>
-        );
-
-        return (
-            <React.Fragment>
-                {this.state.hasIntensity ? (intensityLightView) : (normalLightView)}
-            </React.Fragment>
-        )
+  componentDidMount() {
+    if (this.props.device.hasOwnProperty("hasIntensity") && this.props.device.hasOwnProperty("intensityLevel")) {
+      this.setState({
+        hasIntensity: this.props.device.hasIntensity,
+        intensityLevel: this.props.device.intensityLevel
+      });
     }
+    // Get the state and update it
+
+  }
+
+
+  render() {
+    const intensityLightView = (
+      <CircularInput
+        value={this.state.intensityLevel}
+        onChange={this.setIntensity}
+        style={style}
+      >
+        <CircularTrack/>
+        <CircularProgress/>
+        <CircularThumb/>
+
+        <text style={valueStyle} x={100} y={100} textAnchor="middle" dy="0.3em" fontWeight="bold">
+          {Math.round(this.state.intensityLevel * 100)}%
+        </text>
+        <text style={intensityLightStyle} x={100} y={150} textAnchor="middle" dy="0.3em" fontWeight="bold">
+          {this.props.device.name}
+        </text>
+      </CircularInput>
+    );
+
+    const normalLightView = (
+      <div onClick={this.props.edit.mode ? () => {
+      } : this.onClickDevice}>
+        <Image src={this.getIcon()} style={iconStyle}/>
+        <h5 style={nameStyle}>{this.props.device.name}</h5>
+      </div>
+    );
+
+    return (
+      <StyledDiv>
+        <Settings
+          deviceId={this.props.device.id}
+          edit={this.props.edit}
+          onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)}/>
+        {this.state.hasIntensity ? (intensityLightView) : (normalLightView)}
+      </StyledDiv>
+    )
+  }
 }

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

@@ -14,9 +14,10 @@ export const intensityLightStyle = {
 };
 
 export const nameStyle = {
-    fontSize : "1.2rem",
+    fontSize : "1rem",
     position: "absolute",
     top: "50%",
     left: "50%",
-    transform: "translateX(-50%)"
+    transform: "translateX(-50%)",
+    color : "black"
 };

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

@@ -97,7 +97,7 @@ export default class NewDevice extends Component {
 
     render() {
         return (
-            <StyledDiv onClick={this.onClickDevice} style={{textAlign: "center"}}>
+            <StyledDiv onClick={this.onClickDevice}>
                 <Image src="/img/add.svg" style={{filter: "invert()"}}/>
                 {this.state.openForm ? (
                     <NewDeviceForm/>

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

@@ -9,48 +9,56 @@
 import React, {Component} from "react";
 import {CircularInput, CircularProgress, CircularTrack} from "react-circular-input";
 import {errorStyle, sensorText, style, valueStyle} from "./SensorStyle";
+import Settings from "./DeviceSettings";
+import {StyledDiv} from "./styleComponents";
 
 export default class Sensor extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            turnedOn: false,
-            value: 20,
-            error : 2.4
-        };
-        this.units = "ºC"
-    }
-
-    setName = () => {
-        if(this.props.device.name.length > 15){
-            return this.props.device.name.slice(0,12) + "..."
-        }
-       return this.props.device.name;
+  constructor(props) {
+    super(props);
+    this.state = {
+      turnedOn: false,
+      value: 20,
+      error: 2.4
     };
+    this.units = "ºC"
+  }
 
-    componentDidMount() {
+  setName = () => {
+    if (this.props.device.name.length > 15) {
+      return this.props.device.name.slice(0, 12) + "..."
     }
+    return this.props.device.name;
+  };
+
+  componentDidMount() {
+  }
 
 
-    render() {
-        return (
-            <CircularInput
-                value={this.state.value/100}
-                style={style}
-            >
-                <CircularTrack/>
-                <CircularProgress/>
+  render() {
+    return (
+      <StyledDiv>
+        <Settings
+          deviceId={this.props.device.id}
+          edit={this.props.edit}
+          onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)}/>
 
-                <text style={valueStyle} x={100} y={80} textAnchor="middle" dy="0.3em" fontWeight="bold">
-                    {Math.round(this.state.value)}{this.units}
-                </text>
-                <text style={errorStyle} x={100} y={100} textAnchor="middle" dy="0.6em" fontWeight="bold">
-                    &#177;{this.state.error}
-                </text>
-                <text style={sensorText} x={100} y={150} textAnchor="middle" dy="0.3em" fontWeight="bold">
-                    {this.setName()}
-                </text>
-            </CircularInput>
-        )
-    }
+        <CircularInput
+          value={this.state.value / 100}
+          style={style}
+        >
+          <CircularTrack/>
+          <CircularProgress/>
+          <text style={valueStyle} x={100} y={80} textAnchor="middle" dy="0.3em" fontWeight="bold">
+            {Math.round(this.state.value)}{this.units}
+          </text>
+          <text style={errorStyle} x={100} y={100} textAnchor="middle" dy="0.6em" fontWeight="bold">
+            &#177;{this.state.error}
+          </text>
+          <text style={sensorText} x={100} y={150} textAnchor="middle" dy="0.3em" fontWeight="bold">
+            {this.setName()}
+          </text>
+        </CircularInput>
+      </StyledDiv>
+    )
+  }
 }

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

@@ -0,0 +1,68 @@
+import React, {Component, useState} from 'react';
+import {Button, Checkbox, Form, Modal} from "semantic-ui-react";
+
+const SettingsForm = (props) => {
+
+  const handleInputChange = e => {
+    const {name, value} = e.target;
+    setValues({...values, [name]: value})
+  };
+
+  const handleCheckboxChange = (e,d) => {
+    const {name, checked} = d;
+    setValues({...values, [name]: checked})
+  };
+
+  const [values, setValues] = useState({name: ''});
+
+  return (
+    <Form>
+      <Form.Field>
+        <label>New Name: </label>
+        <input autoComplete="off" name="name" onChange={handleInputChange} value={values.name} placeholder='Device name'/>
+      </Form.Field>
+      {props.type === "smart-plug" ? (
+        <Form.Field>
+          <Checkbox slider name={"reset"} onClick={handleCheckboxChange} label='Reset Energy Consumption'/>
+        </Form.Field>
+      ) : ""}
+      <Button onClick={() => props.saveFunction(values)} color="green" type='submit'>Save</Button>
+    </Form>
+  )
+}
+
+export default class SettingsModal extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      open: true,
+    };
+  }
+
+  handleClose = () => {
+    this.setState({open: false});
+  };
+
+  saveSettings = (device) => {
+    // TODO Here there should be all the connections to save the data in the backend
+    console.log("SAVED: ", device);
+
+    this.props.openModal();
+  };
+
+  render() {
+    const SettingsModal = () => (
+      <Modal open={true} onOpen={this.props.openModal} onClose={this.props.openModal}>
+        <Modal.Header>Settings of {this.props.device.name}</Modal.Header>
+        <Modal.Content>
+          <SettingsForm type={this.props.device.type} saveFunction={this.saveSettings}/>
+        </Modal.Content>
+      </Modal>
+    );
+    return (
+      <SettingsModal/>
+    )
+  }
+
+}

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

@@ -1,11 +1,8 @@
 /**
-
  A smart plug is a plug that has a boolean internal state, i.e., that can be turned on or off, either with the
  SmartHut interface or by a switch.
- The smart plug also stores the total energy consumed while the plug is active, in terms of kilowatt-hours
- 2
- (kWh) . The user can reset this value.
-
+ The smart plug also stores the total energy consumed while the plug is active, in terms of kilowatt-hours 2(kWh) .
+ The user can reset this value.
  **/
 import React, {Component} from 'react';
 import {StyledDiv} from "./styleComponents";
@@ -35,17 +32,12 @@ export default class SmartPlug extends Component {
         return this.iconOff;
     };
 
-    resetEnergyConsumedValue = () => {
-        // In the settings form there must be an option to restore this value
-        // along with the rename feature.
-    }
-
     componentDidMount() {
     }
 
     render(){
         return (
-            <StyledDiv onClick={this.props.edit ? () => {} : this.onClickDevice} style={{textAlign: "center"}}>
+            <StyledDiv onClick={this.props.edit.mode ? () => {} : this.onClickDevice}>
                 <Settings
                     deviceId={this.props.device.id}
                     edit={this.props.edit}

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

@@ -43,7 +43,7 @@ export default class Switch extends Component {
 
   render(){
     return (
-      <StyledDiv onClick={this.props.edit ? () => {} : this.onClickDevice} style={{textAlign: "center"}}>
+      <StyledDiv onClick={this.props.edit.mode ? () => {} : this.onClickDevice}>
         <Settings
           deviceId={this.props.device.id}
           edit={this.props.edit}

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

@@ -29,7 +29,8 @@ export const editModeStyle = {
   height : "1.5rem",
   backgroundColor : "black",
   borderRadius: "100%",
-  zIndex : "100"
+  zIndex : "1000",
+  cursor : "pointer",
 };
 
 export const editModeIconStyle = {
@@ -88,6 +89,7 @@ export const StyledDiv = styled.div`
   position : relative;
   box-shadow: 3px 2px 10px 5px #ccc;
   transition : all .3s ease-out;
+  text-align : center;
   :hover{
     background-color : #f2f2f2;
   }

smart-hut/src/views/Dashboard.js

@@ -59,14 +59,13 @@ export default class Dashboard extends Component{
 
   render () {
     return(
-      // TODO poner esto otra vez igual que antes.
       <div style={{height : "110vh", background: '#1b1c1d'}}>
         <Grid >
-        {/*<Grid.Row color='black'>*/}
-        {/*  <Grid.Column>*/}
-        {/*    <MyHeader />*/}
-        {/*  </Grid.Column>*/}
-        {/*</Grid.Row>*/}
+        <Grid.Row color='black'>
+          <Grid.Column>
+            <MyHeader />
+          </Grid.Column>
+        </Grid.Row>
         <Grid.Row color='black'>
             <Grid.Column width={3}>
               <Navbar addRoom={this.addRoom} rooms={this.state.rooms} handleItemClick={this.handleItemClick}/>