Merge branch '103-temperature-sensor-color-circle-change-with-temperature-value' into 'dev'

Resolve "temperature sensor - color circle change with temperature value"

Closes #103

See merge request sa4-2020/the-sanmarinoes/frontend!131

smart-hut/src/components/RoomModal.js

@@ -94,12 +94,12 @@ class RoomModal extends Component {
   };
 
   setSureTrue = () => {
-    this.setState({sure: true})
-  }
+    this.setState({ sure: true });
+  };
 
-  setSureFalse= () => {
-    this.setState({sure: false})
-  }
+  setSureFalse = () => {
+    this.setState({ sure: false });
+  };
 
   changeSomething = (event) => {
     let nam = event.target.name;
@@ -239,13 +239,14 @@ class RoomModal extends Component {
                   onClick={this.setSureTrue}
                 >
                   <Icon name="trash alternate" />
-                Delete Room </Button>
+                  Delete Room{" "}
+                </Button>
                 <Confirm
                   open={this.state.sure}
                   onCancel={this.setSureFalse}
-                onConfirm={this.deleteRoom}/>
+                  onConfirm={this.deleteRoom}
+                />
               </div>
-
             ) : null}
           </Modal.Content>
           <Modal.Actions>

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

@@ -141,9 +141,13 @@ class NewDevice extends Component {
       case "buttonDimmer":
       case "knobDimmer":
         outputs = this.state.lightsAttached;
-        if (this.state.lightsAttached === undefined ||
-            this.state.lightsAttached.length === 0) {
-            alert("No lights attached to this switch! Please, add a light a first.");
+        if (
+          this.state.lightsAttached === undefined ||
+          this.state.lightsAttached.length === 0
+        ) {
+          alert(
+            "No lights attached to this switch! Please, add a light a first."
+          );
           return;
         }
         break;
@@ -165,11 +169,17 @@ class NewDevice extends Component {
   render() {
     const deviceOptions = [
       //stuff
-      { key: "thermostat", text: "Thermostat", value: "thermostat", 
-        image: {avatar: true, src: "/img/thermostat-icon.png"} 
+      {
+        key: "thermostat",
+        text: "Thermostat",
+        value: "thermostat",
+        image: { avatar: true, src: "/img/thermostat-icon.png" },
       },
-      { key: "curtains", text: "Curtain", value: "curtains", 
-        image: {avatar: true, src: "/img/curtains-icon.png"} 
+      {
+        key: "curtains",
+        text: "Curtain",
+        value: "curtains",
+        image: { avatar: true, src: "/img/curtains-icon.png" },
       },
       //stuff ends
       {

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

@@ -123,6 +123,18 @@ class Sensor extends Component {
     return this.iconOff;
   };
 
+  temperatureColor = (value) => {
+    let hue = 100;
+    const min = 16;
+    const max = 20;
+    if (value >= min && value < max) {
+      hue = 100 - ((value - min) * 100) / (max - min);
+    } else if (value >= max) {
+      hue = 0;
+    }
+    return `hsl(${hue}, 100%, 50%)`;
+  };
+
   render() {
     const MotionSensor = (props) => {
       return (
@@ -161,11 +173,18 @@ class Sensor extends Component {
             >
               <CircularProgress
                 strokeWidth="2rem"
-                stroke={this.colors.progress}
+                stroke={
+                  this.props.stateOrDevice.sensor === "TEMPERATURE"
+                    ? this.temperatureColor(this.state.value)
+                    : this.colors.progress
+                }
                 fill={this.colors.circle}
               />
               <text
-                style={{ ...valueStyle, fill: this.colors.text }}
+                style={{
+                  ...valueStyle,
+                  fill: this.colors.text,
+                }}
                 x={100}
                 y={110}
                 textAnchor="middle"
@@ -177,7 +196,10 @@ class Sensor extends Component {
                 {this.units}
               </text>
               <text
-                style={{ ...sensorText, fill: this.colors.text }}
+                style={{
+                  ...sensorText,
+                  fill: this.colors.text,
+                }}
                 x={100}
                 y={150}
                 textAnchor="middle"

smart-hut/src/views/Dashboard.js

@@ -8,10 +8,7 @@ import ScenesNavbar from "./ScenesNavbar";
 import HostsNavbar from "./HostsNavbar";
 import MyHeader from "../components/HeaderController";
 import { Grid, Responsive, Button, Menu } from "semantic-ui-react";
-import {
-  panelStyle,
-  mobilePanelStyle,
-} from "../components/dashboard/devices/styleComponents";
+import { mobilePanelStyle } from "../components/dashboard/devices/styleComponents";
 
 import { RemoteService } from "../remote";
 import { connect } from "react-redux";
@@ -84,10 +81,10 @@ class Dashboard extends Component {
     // needed to correctly assign the background image
     //in case a room has one.
     let backgroundImageHelper;
-    if(this.activeTab==="Devices"){
-      backgroundImageHelper=this.props.allRooms;
-    }else{
-      backgroundImageHelper=null;
+    if (this.activeTab === "Devices") {
+      backgroundImageHelper = this.props.backgroundImage;
+    } else {
+      backgroundImageHelper = null;
     }
     //console.log("helper is",helper)
     return (
@@ -135,15 +132,19 @@ class Dashboard extends Component {
                 </Grid.Column>
               )}
               <Grid.Column width={this.hasNavbar ? 13 : 16}>
-                <div style={
-                  {backgroundImage:"url("+ backgroundImageHelper+")",
+                <div
+                  style={{
+                    backgroundImage: "url(" + backgroundImageHelper + ")",
                     backgroundColor: "#fafafa",
                     height: "85vh",
                     padding: "0rem 3rem",
                     color: "#000000",
                     overflow: "auto",
-                    maxHeight: "75vh",}
-                }>{this.renderTab(this.activeTab)}</div>
+                    maxHeight: "75vh",
+                  }}
+                >
+                  {this.renderTab(this.activeTab)}
+                </div>
               </Grid.Column>
             </Grid.Row>
           </Grid>
@@ -216,26 +217,16 @@ class Dashboard extends Component {
 
 const mapStateToProps = (state, _) => ({
   activeTab: state.active.activeTab,
-  get currentRoom(){
+  get currentRoom() {
     return state.active.activeRoom;
   },
-  //this took me way longer to figure out than it should have
-  get allRooms(){
-    if(state.active.activeRoom==-1){
+  get backgroundImage() {
+    if (state.active.activeRoom === -1) {
       return null;
-    }
-    for(let i in state.rooms){
-      if(i==state.active.activeRoom){
-        //console.log("check",state.rooms[i].image)
-        if(state.rooms[i].image===undefined){
-          return null;
-        }else{
-          return state.rooms[i].image;
-        }
-      }
+    } else {
+      return state.rooms[state.active.activeRoom].image;
     }
   },
-
 });
 
 const setActiveTab = (activeTab) => {

yarn.lock

@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+