Everything related to the settings is done

2020-03-17 23:24:40 +01:00 · 2020-03-17 23:24:40 +01:00 · 99f1e16927
commit 99f1e16927
parent 744f1b5710
15 changed files with 253 additions and 253 deletions
--- a/smart-hut/src/App.js
+++ b/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 />
--- a/smart-hut/src/components/dashboard/DevicePanel.js
+++ b/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/>
--- a/smart-hut/src/components/dashboard/devices/Device.js
+++ b/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>
-        )
-    }
-}
-
-
--- a/smart-hut/src/components/dashboard/devices/DeviceSettings.js
+++ b/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>
+    )
+  };
 }
--- a/smart-hut/src/components/dashboard/devices/DigitalSensor.js
+++ b/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}
--- a/smart-hut/src/components/dashboard/devices/Light.js
+++ b/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>
+    )
+  }
 }
--- a/smart-hut/src/components/dashboard/devices/LightStyle.js
+++ b/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"
 };
--- a/smart-hut/src/components/dashboard/devices/NewDevice.js
+++ b/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/>
--- a/smart-hut/src/components/dashboard/devices/Sensor.js
+++ b/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>
+    )
+  }
 }
--- a/smart-hut/src/components/dashboard/devices/SettingsModal.js
+++ b/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/>
+    )
+  }
+
+}
--- a/smart-hut/src/components/dashboard/devices/SmartPlug.js
+++ b/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}
--- a/smart-hut/src/components/dashboard/devices/Switch.js
+++ b/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}
--- a/smart-hut/src/components/dashboard/devices/Switcher.js
+++ b/smart-hut/src/components/dashboard/devices/Switcher.js
--- a/smart-hut/src/components/dashboard/devices/styleComponents.js
+++ b/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;
  }
--- a/smart-hut/src/views/Dashboard.js
+++ b/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}/>