Connection frontend-backend for Curtains and Thermostat. Added button to handle off/on of thermostats

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

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-
+import "./Curtains.css";
 import { RemoteService } from "../../../remote";
 import { connect } from "react-redux";
 import { Slider } from "@material-ui/core";
@@ -59,7 +59,7 @@ class Curtain extends Component {
             this.setIntensity(1);
             this.saveIntensity();
         } else {
-            this.setIntensity(this.props.device.intensity / 100 + 0.10);
+            this.setIntensity(this.props.device.intensity / 100 + 0.1);
             this.saveIntensity();
         }
     };
@@ -69,7 +69,7 @@ class Curtain extends Component {
             this.setIntensity(0);
             this.saveIntensity();
         } else {
-            this.setIntensity(this.props.device.intensity / 100 - 0.10);
+            this.setIntensity(this.props.device.intensity / 100 - 0.1);
             this.saveIntensity();
         }
     };
@@ -80,21 +80,53 @@ class Curtain extends Component {
         this.saveIntensity();
     };
     ///*this took me way too much more time than it should have*/
+
+    handleChange = (a) => {
+        this.setIntensity(a.target.value / 100);
+        this.saveIntensity();
+    };
+
     render() {
-        return <div><p>{this.props.device.intensity}</p>
+        return (
+            <div className="container">
+                <div
+                    className="open-container"
+                    style={{
+                        height: (9 * this.props.device.intensity) / 100 + "rem",
+                    }}
+                ></div>{" "}
+                <span className="span-open">
+                    {Math.round(this.props.device.intensity)}%
+                </span>
+                <input
+                    onChange={this.handleChange}
+                    value={this.props.device.intensity}
+                    className="slider"
+                    type="range"
+                    min="0"
+                    max="100"
+                />
+            </div>
+            /*
+            <div>
+                <p>{this.props.device.intensity}</p>
 
                 <Slider
-
+                    min={0}
-                min={0} value={this.props.device.intensity} max={100} onChange={ (e, val) => {this.helper3(val)}}
+                    value={this.props.device.intensity}
+                    max={100}
+                    onChange={(e, val) => {
+                        this.helper3(val);
+                    }}
                 />
 
                 <input type="submit" value="increase" onClick={this.helper} />
                 <input type="submit" value="decrease" onClick={this.helper2} />
-        </div>;
+            </div>*/
+        );
     }
 }
 
-
 const mapStateToProps = (state, ownProps) => ({
     device: state.devices[ownProps.id],
 });

smart-hut/src/components/dashboard/devices/Curtains.css

@@ -0,0 +1,69 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+.container {
+    position: relative;
+    margin-top: 10%;
+    width: 18rem;
+    height: 9rem;
+    background-color: #f7f7f7;
+    border-radius: 5px;
+    box-shadow: 10px 10px 30px 15px rgba(0, 0, 0, 0.247);
+}
+
+.open-container {
+    position: absolute;
+    width: 18rem;
+    background-color: #f79071;
+    border-radius: 5px;
+}
+
+.slider {
+    -webkit-appearance: none;
+    width: 9rem;
+    position: absolute;
+    left: 75%;
+    top: 50%;
+    transform: translateY(-50%) rotateZ(90deg);
+    background: transparent;
+    outline: none;
+}
+
+.slider::-webkit-slider-runnable-track {
+    -webkit-appearance: none;
+    height: 5px;
+    background-color: #1b1c1d;
+    border-radius: 50px;
+    cursor: pointer;
+}
+
+.slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: #1b1c1d;
+    position: relative;
+    transition: all;
+    top: -5.5px;
+}
+
+.slider::-webkit-slider-thumb:hover {
+    transform: scale(1.2);
+}
+
+.span-open {
+    -webkit-user-select: none;
+    font-family: "Lato";
+    font-weight: bold;
+    font-size: 3rem;
+    text-emphasis: none;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}

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

@@ -0,0 +1,41 @@
+// TODO Remove this!
+
+import React, { Component } from "react";
+import "./Curtains.css";
+
+class Curtain extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            open: 0.6,
+        };
+    }
+
+    handleChange = (e) => {
+        this.setState({ open: e.target.value / 100 });
+    };
+
+    render() {
+        return (
+            <div className="container">
+                <div
+                    className="open-container"
+                    style={{ height: 9 * this.state.open + "rem" }}
+                ></div>{" "}
+                <span className="span-open">
+                    {Math.round(this.state.open * 100)}%
+                </span>
+                <input
+                    onChange={this.handleChange}
+                    value={this.state.open * 100}
+                    className="slider"
+                    type="range"
+                    min="0"
+                    max="100"
+                />
+            </div>
+        );
+    }
+}
+
+export default Curtain;

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

@@ -35,9 +35,9 @@ class Device extends React.Component {
     renderDeviceComponent() {
         switch (this.props.stateOrDevice.kind) {
             case "curtains":
-        return <Curtains tab={this.props.tab} id={this.props.id}/>
+                return <Curtains tab={this.props.tab} id={this.props.id} />;
             case "thermostat":
-        return <Thermostat tab={this.props.tab} id={this.props.id}/>
+                return <Thermostat tab={this.props.tab} id={this.props.id} />;
             case "regularLight":
                 return <Light tab={this.props.tab} id={this.props.id} />;
             case "sensor":
@@ -68,7 +68,9 @@ class Device extends React.Component {
                     <Grid.Column>{this.renderDeviceComponent()}</Grid.Column>
                     {this.props.tab === "Devices" ? (
                         <Grid.Column textAlign="center">
-              <Header as="h3">{this.props.stateOrDevice.name}</Header>
+                            <Header as="h3">
+                                {this.props.stateOrDevice.name}
+                            </Header>
                             <Button
                                 color="blue"
                                 icon
@@ -92,11 +94,16 @@ class Device extends React.Component {
                         </Grid.Column>
                     ) : (
                         <Grid.Column textAlign="center">
-              <Header as="h3">{this.props.stateOrDevice.name}</Header>
+                            <Header as="h3">
+                                {this.props.stateOrDevice.name}
+                            </Header>
                         </Grid.Column>
                     )}
 
-          <DeviceSettingsModal ref={this.modalRef} id={this.props.id} />
+                    <DeviceSettingsModal
+                        ref={this.modalRef}
+                        id={this.props.id}
+                    />
                 </Grid>
             </Segment>
         );

smart-hut/src/components/dashboard/devices/Thermostat.css

@@ -0,0 +1,38 @@
+.slider-css {
+    -webkit-appearance: none;
+    width: 20rem;
+    font-family: "Lato";
+    position: absolute;
+    margin-top: 32%;
+    margin-left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.slider-css::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    border: 5px solid #ffffff;
+    width: 18px;
+    height: 18px;
+    border-radius: 10px;
+    background-color: rgba(94, 246, 152, 1);
+    cursor: pointer;
+    box-shadow: 1px 1px 15px 2px rgba(0, 0, 0, 0.4);
+    margin-top: -7px;
+}
+
+.slider-css:focus {
+    -webkit-appearance: none;
+
+    outline: none;
+}
+
+.slider-css::-webkit-slider-runnable-track {
+    -webkit-appearance: none;
+    outline: none;
+    width: 100%;
+    height: 7px;
+    cursor: pointer;
+    box-shadow: 4.5px 4.5px 20px 1px rgba(0, 0, 0, 0.3);
+    background: white;
+    border-radius: 5px;
+}

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

@@ -0,0 +1,62 @@
+// TODO Remove this!
+
+import React, { Component } from "react";
+import {
+    stateTag,
+    container,
+    deviceName,
+    targetTemperature,
+    slider,
+    line,
+    stateTagContainer,
+} from "./ThermostatStyle";
+
+class Thermostat extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            currentTemperature: 10,
+            targetTemperature: 20,
+            state: "idle",
+        };
+    }
+
+    handleChange = (value) => {
+        let state = this.state.state;
+        if (this.state.currentTemperature > value) {
+            state = "cooling";
+        } else if (this.state.currentTemperature < value) {
+            state = "heating";
+        } else {
+            state = "idle"; // or heating, i don't know the difference
+        }
+
+        this.setState({ targetTemperature: value, state: state });
+    };
+
+    render() {
+        return (
+            <div style={container}>
+                <h3 style={deviceName}>{this.props.device.name}</h3>
+                <div style={line}></div>
+                <span style={targetTemperature}>
+                    {this.state.targetTemperature}ºC
+                </span>
+                <input
+                    type="range"
+                    min="0"
+                    max="40"
+                    className="slider-css"
+                    value={this.state.targetTemperature}
+                    onChange={(event) => this.handleChange(event.target.value)}
+                    id="targetTemperature"
+                />
+                <div style={stateTagContainer}>
+                    <span style={stateTag}>{this.state.state}</span>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default Thermostat;

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

@@ -0,0 +1,73 @@
+export const container = {
+    position: "relative",
+    width: "25rem",
+    height: "12rem",
+    boxShadow: "22px 18px 54px -7px rgba(102,102,102,1)",
+    borderRadius: "30px",
+    backgroundColor: "white",
+};
+
+export const line = {
+    width: "250px",
+    height: "47px",
+    borderBottom: "1px solid #646464",
+    position: "absolute",
+    left: "5%",
+};
+
+export const deviceName = {
+    fontFamily: "Lato",
+    position: "absolute",
+    marginTop: "5%",
+    marginLeft: "8%",
+    fontSize: "1rem",
+    fontWeight: "bold",
+    color: "#646464",
+};
+
+export const targetTemperature = {
+    fontFamily: "Lato",
+    position: "absolute",
+    marginTop: "20%",
+    marginLeft: "50%",
+    transform: "translate(-50%,-50%)",
+    fontSize: "3.5rem",
+    fontWeight: "bold",
+    color: "#646464",
+};
+
+export const slider = {
+    width: "25rem",
+    fontFamily: "Lato",
+    position: "absolute",
+    marginTop: "35%",
+    marginLeft: "50%",
+    transform: "translate(-50%,-50%)",
+};
+
+export const stateTagContainer = {
+    textAlign: "center",
+    position: "absolute",
+    width: "4rem",
+    height: "1rem",
+    marginTop: "40%",
+    marginLeft: "50%",
+    transform: "translate(-50%,-50%)",
+    padding: "0.5rem 4rem",
+    backgroundColor: "rgba(94,246,152,1)",
+    borderRadius: "50px",
+};
+
+export const stateTag = {
+    fontFamily: "Lato",
+    fontSize: "1.2rem",
+    color: "white",
+    textTransform: "uppercase",
+};
+
+export const toggle = {
+    position: "absolute",
+    top: "10%",
+    left: "35%",
+    transform: "rotate(-360deg)",
+};

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

@@ -1,22 +1,37 @@
 import React, { Component } from "react";
-
+import { Checkbox } from "semantic-ui-react";
 import { RemoteService } from "../../../remote";
 import { connect } from "react-redux";
-
+import "./Thermostat.css";
+import {
+    stateTag,
+    container,
+    deviceName,
+    targetTemperature,
+    slider,
+    line,
+    toggle,
+    stateTagContainer,
+} from "./ThermostatStyle";
 
 //not quite working yet
 class Thermostats extends Component {
     constructor(props) {
         super(props);
-        this.state = {targetTemperature: this.props.device.targetTemperature,
+        this.state = {
-            internalSensorTemperature: this.props.device.internalSensorTemperature,
+            targetTemperature: this.props.device.targetTemperature,
+            internalSensorTemperature: this.props.device
+                .internalSensorTemperature,
             mode: this.props.device.mode,
             measuredTemperature: this.props.device.measuredTemperature,
             useExternalSensors: this.props.device.useExternalSensors,
-            timeout: null };
+            timeout: null,
+        };
         this.setMode = this.setMode.bind(this);
         this.setTargetTemperature = this.setTargetTemperature.bind(this);
-        this.setInternalSensorTemperature=this.setInternalSensorTemperature.bind(this);
+        this.setInternalSensorTemperature = this.setInternalSensorTemperature.bind(
+            this
+        );
     }
 
     //getters
@@ -47,7 +62,6 @@ class Thermostats extends Component{
 
         //i came to the conclusion that is not possible to set mode.
         this.mode = "HEATING";
-
     }
 
     onClickDevice = () => {
@@ -57,13 +71,11 @@ class Thermostats extends Component{
             .catch((err) => console.error("regular light update error", err));
     };
 
-
     //It seems to work
     saveTargetTemperature(targetTemperature) {
         this.props
             .saveDevice({ ...this.props.device, targetTemperature })
             .catch((err) => console.error(" update error", err));
-
     }
 
     setTargetTemperature(newTemp) {
@@ -100,7 +112,8 @@ class Thermostats extends Component{
             timeout: setTimeout(() => {
                 this.saveInternalSensorTemperature(newTemp);
                 this.setState({
-                    internalSensorTemperature: this.state.internalSensorTemperature,
+                    internalSensorTemperature: this.state
+                        .internalSensorTemperature,
                     timeout: null,
                 });
             }, 100),
@@ -111,23 +124,77 @@ class Thermostats extends Component{
         //this.setMode("HEATING");
         this.setTargetTemperature(20);
         //this.setInternalSensorTemperature(42);
-    }
+    };
+
+    handleChange = (value) => {
+        this.setTargetTemperature(value);
+    };
 
     render() {
-        return <div><p>"mode is: "{this.props.device.mode}</p>
+        return (
-            <p>"internalsensortemperature is: "{this.props.device.internalSensorTemperature}</p>
+            /*<div>
-            <p>"targetTemperature is: "{this.props.device.targetTemperature}</p>
+                <p>"mode is: "{this.props.device.mode}</p>
-            <p>"measuredtemperature is: "{this.props.device.measuredTemperature}</p>
+                <p>
+                    "internalsensortemperature is: "
+                    {this.props.device.internalSensorTemperature}
+                </p>
+                <p>
+                    "targetTemperature is: "
+                    {this.props.device.targetTemperature}
+                </p>
+                <p>
+                    "measuredtemperature is: "
+                    {this.props.device.measuredTemperature}
+                </p>
                 <p>{this.props.device.on}</p>
-            <input type="submit" value="change targetTemperature" onClick={this.helperMode}/>
+                <input
-            <input type="submit" value="robe" onClick={this.onClickDevice}/></div>;
+                    type="submit"
-    }
+                    value="change targetTemperature"
+                    onClick={this.helperMode}
+                />
+                <input
+                    type="submit"
+                    value="robe"
+                    onClick={this.onClickDevice}
+                />
+            </div>*/
 
+            <div style={container}>
+                <h3 style={deviceName}>{this.props.device.name}</h3>
+                <div style={line}></div>
+                <Checkbox
+                    slider
+                    style={toggle}
+                    // TODO Manage the state here
+                    onChange={(e, val) => console.log("CHANGE", val.checked)}
+                />
+
+                <span style={targetTemperature}>
+                    {this.props.device.targetTemperature}ºC
+                </span>
+                <input
+                    type="range"
+                    min="0"
+                    max="40"
+                    className="slider-css"
+                    value={this.props.device.targetTemperature}
+                    onChange={(event) => this.handleChange(event.target.value)}
+                    id="targetTemperature"
+                />
+                <div style={stateTagContainer}>
+                    <span style={stateTag}>{this.props.device.mode}</span>
+                </div>
+            </div>
+        );
+    }
 }
 
 const mapStateToProps = (state, ownProps) => ({
     device: state.devices[ownProps.id],
 });
 
-const ThermostatContainer = connect(mapStateToProps, RemoteService)(Thermostats);
+const ThermostatContainer = connect(
+    mapStateToProps,
+    RemoteService
+)(Thermostats);
 export default ThermostatContainer;