From 29d2815a775e9aeaf1a1ebf72657fcf6b5a20e5d Mon Sep 17 00:00:00 2001
From: "Claudio Maggioni (maggicl)" <maggicl@kolabnow.ch>
Date: Mon, 27 Apr 2020 14:14:11 +0200
Subject: [PATCH] Curtains style fix

---
 .../components/dashboard/devices/Curtain.js   | 203 +++++++++---------
 .../components/dashboard/devices/Curtains.css |   2 +-
 2 files changed, 106 insertions(+), 99 deletions(-)

diff --git a/smart-hut/src/components/dashboard/devices/Curtain.js b/smart-hut/src/components/dashboard/devices/Curtain.js
index 322e43c..6d102d8 100644
--- a/smart-hut/src/components/dashboard/devices/Curtain.js
+++ b/smart-hut/src/components/dashboard/devices/Curtain.js
@@ -4,116 +4,123 @@ import { RemoteService } from "../../../remote";
 import { connect } from "react-redux";
 
 class Curtain extends Component {
-    constructor(props) {
-        super(props);
-        this.state = { intensity: this.props.stateOrDevice.intensity, timeout: null };
-
-        this.setIntensity = this.setIntensity.bind(this);
-    }
-
-    //getters
-    get turnedOn() {
-        return this.props.stateOrDevice.on;
-    }
-
-    get intensity() {
-        return this.props.stateOrDevice.intensity || 0;
-    }
-
-    onClickDevice = () => {
-        const on = !this.turnedOn;
-        if(this.props.tab==="Devices"){
-            this.props
-                .saveDevice({ ...this.props.stateOrDevice, on })
-                .catch((err) => console.error("curtains update error", err));
-        }else{
-            this.props.updateState({ id: this.props.sceneState.id, on: on },this.props.sceneState.kind);
-        }
+  constructor(props) {
+    super(props);
+    this.state = {
+      intensity: this.props.stateOrDevice.intensity,
+      timeout: null,
     };
 
-    setIntensity(intensity) {
-        intensity *= 100;
+    this.setIntensity = this.setIntensity.bind(this);
+  }
 
-        if (this.state.timeout) {
-            clearTimeout(this.state.timeout);
-        }
+  //getters
+  get turnedOn() {
+    return this.props.stateOrDevice.on;
+  }
 
-        this.setState({
-            intensity,
-            timeout: setTimeout(() => {
-                this.saveIntensity();
-                this.setState({
-                    intensity: this.state.intensity,
-                    timeout: null,
-                });
-            }, 100),
-        });
+  get intensity() {
+    return this.props.stateOrDevice.intensity || 0;
+  }
+
+  onClickDevice = () => {
+    const on = !this.turnedOn;
+    if (this.props.tab === "Devices") {
+      this.props
+        .saveDevice({ ...this.props.stateOrDevice, on })
+        .catch((err) => console.error("curtains update error", err));
+    } else {
+      this.props.updateState(
+        { id: this.props.sceneState.id, on: on },
+        this.props.sceneState.kind
+      );
+    }
+  };
+
+  setIntensity(intensity) {
+    intensity *= 100;
+
+    if (this.state.timeout) {
+      clearTimeout(this.state.timeout);
     }
 
-    saveIntensity = () => {
-        const intensity = Math.round(this.state.intensity);
-        if(this.props.tab==="Devices"){
-            this.props
-                .saveDevice({ ...this.props.stateOrDevice, intensity })
-                .catch((err) => console.error("curtain update error", err));
-        }else{
-            this.props.updateState({ id: this.props.sceneState.id, intensity: intensity },this.props.sceneState.kind);
-        }
-    };
-
-    helper = () => {
-        if (this.props.device.intensity >= 90) {
-            this.setIntensity(1);
-            this.saveIntensity();
-        } else {
-            this.setIntensity(this.props.stateOrDevice.intensity / 100 + 0.1);
-            this.saveIntensity();
-        }
-    };
-
-
-    ///*this took me way too much more time than it should have*/
-
-    handleChange = (a) => {
-        this.setIntensity(a.target.value / 100);
+    this.setState({
+      intensity,
+      timeout: setTimeout(() => {
         this.saveIntensity();
-    };
+        this.setState({
+          intensity: this.state.intensity,
+          timeout: null,
+        });
+      }, 100),
+    });
+  }
 
-    render() {
-        return (
-            <div className="container">
-                <div
-                    className="open-container"
-                    style={{
-                        height: (9 * this.props.stateOrDevice.intensity) / 100 + "rem",
-                    }}
-                ></div>{" "}
-                <span className="span-open">
-                    {Math.round(this.props.stateOrDevice.intensity)}%
-                </span>
-                <input
-                    onChange={this.handleChange}
-                    value={this.props.stateOrDevice.intensity}
-                    className="slider"
-                    type="range"
-                    min="0"
-                    max="100"
-                />
-            </div>
-
-        );
+  saveIntensity = () => {
+    const intensity = Math.round(this.state.intensity);
+    if (this.props.tab === "Devices") {
+      this.props
+        .saveDevice({ ...this.props.stateOrDevice, intensity })
+        .catch((err) => console.error("curtain update error", err));
+    } else {
+      this.props.updateState(
+        { id: this.props.sceneState.id, intensity: intensity },
+        this.props.sceneState.kind
+      );
     }
+  };
+
+  helper = () => {
+    if (this.props.device.intensity >= 90) {
+      this.setIntensity(1);
+      this.saveIntensity();
+    } else {
+      this.setIntensity(this.props.stateOrDevice.intensity / 100 + 0.1);
+      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 className="container curtain-container">
+        <div
+          className="open-container"
+          style={{
+            height: (9 * this.props.stateOrDevice.intensity) / 100 + "rem",
+          }}
+        ></div>{" "}
+        <span className="span-open">
+          {Math.round(this.props.stateOrDevice.intensity)}%
+        </span>
+        <input
+          onChange={this.handleChange}
+          value={this.props.stateOrDevice.intensity}
+          className="slider"
+          type="range"
+          min="0"
+          max="100"
+        />
+      </div>
+    );
+  }
 }
 
 const mapStateToProps = (state, ownProps) => ({
-    get stateOrDevice(){
-        if(state.active.activeTab==="Devices"){
-            return state.devices[ownProps.id];
-        }else{
-            return state.sceneStates[ownProps.id];
-        }
-    },
-    //device: state.devices[ownProps.id],
+  get stateOrDevice() {
+    if (state.active.activeTab === "Devices") {
+      return state.devices[ownProps.id];
+    } else {
+      return state.sceneStates[ownProps.id];
+    }
+  },
+  //device: state.devices[ownProps.id],
 });
 const CurtainContainer = connect(mapStateToProps, RemoteService)(Curtain);
 export default CurtainContainer;
diff --git a/smart-hut/src/components/dashboard/devices/Curtains.css b/smart-hut/src/components/dashboard/devices/Curtains.css
index eb3ea90..e98e37f 100644
--- a/smart-hut/src/components/dashboard/devices/Curtains.css
+++ b/smart-hut/src/components/dashboard/devices/Curtains.css
@@ -4,7 +4,7 @@
     box-sizing: border-box;
 }
 
-.container {
+.container.curtain-container {
     position: relative;
     margin-top: 10%;
     width: 18rem;