Merge branch '100-background-image-for-rooms' into 'dev'

Added the background image for romms

Closes #100

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

smart-hut/package-lock.json

@@ -1075,6 +1075,14 @@
       "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
       "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
     },
+    "@giantmachines/redux-websocket": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@giantmachines/redux-websocket/-/redux-websocket-1.2.0.tgz",
+      "integrity": "sha512-87GXE32CnsA9/AA7jVDQupWLmycHAuoWPwNCTz2YnlRR1l8EqLlOJK6SyeMQaVRIuAvM5B7e06dylmaS9Jlgnw==",
+      "requires": {
+        "redux": "~4"
+      }
+    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -6356,6 +6364,14 @@
       "resolved": "https://registry.npmjs.org/immer/-/immer-1.10.0.tgz",
       "integrity": "sha512-O3sR1/opvCDGLEVcvrGTMtLac8GJ5IwZC4puPrLuRj3l7ICKvkmA0vGuU9OW8mV9WIBRnaxp5GJh9IEAaNOoYg=="
     },
+    "immutability-helper": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/immutability-helper/-/immutability-helper-3.0.2.tgz",
+      "integrity": "sha512-fcrJ26wpvUcuGRpoGY4hyQ/JOeR1HAunMmE3C0XYXSe6plAGtgTlB2S4BzueBANCPrDJ7AByL1yrIRLIlVfwpA==",
+      "requires": {
+        "invariant": "^2.2.4"
+      }
+    },
     "import-cwd": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
@@ -10753,6 +10769,11 @@
       "resolved": "https://registry.npmjs.org/react-circular-slider-svg/-/react-circular-slider-svg-0.1.5.tgz",
       "integrity": "sha512-ZXSlwKHExjb950+84gydH5wxX1CnND1v4w1DywOHcOgzD48Wmjr+nME4JeOumNJ9QOXhm1HROhSEDMlTFIAGqw=="
     },
+    "react-confirm-alert": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/react-confirm-alert/-/react-confirm-alert-2.6.1.tgz",
+      "integrity": "sha512-KxlpQoR4x/ET1oFPm/IGpsqnpzP17qkkQZuaO3pw7zGZ9oP5hElPtq/1vgoikoqNHQ2tMm6Iw9HQUNLoNgXkRA=="
+    },
     "react-dev-utils": {
       "version": "10.2.0",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-10.2.0.tgz",
@@ -10968,6 +10989,27 @@
         "warning": "^4.0.2"
       }
     },
+    "react-rangeslider": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/react-rangeslider/-/react-rangeslider-2.2.0.tgz",
+      "integrity": "sha512-5K7Woa+cyqZ5wiW5+KhqGV+3+FiFxGKQ9rUxTMh52sObXVYEeBbfxFrp1eBvS8mRIxnUbHz9ppnFP0LhwOyNeg==",
+      "requires": {
+        "classnames": "^2.2.3",
+        "resize-observer-polyfill": "^1.4.2"
+      }
+    },
+    "react-redux": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.0.tgz",
+      "integrity": "sha512-EvCAZYGfOLqwV7gh849xy9/pt55rJXPwmYvI4lilPM5rUT/1NxuuN59ipdBksRVSvz0KInbPnp4IfoXJXCqiDA==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "hoist-non-react-statics": "^3.3.0",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.9.0"
+      }
+    },
     "react-round-slider": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/react-round-slider/-/react-round-slider-1.0.1.tgz",
@@ -11163,6 +11205,20 @@
         "strip-indent": "^3.0.0"
       }
     },
+    "redux": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.0.5.tgz",
+      "integrity": "sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==",
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "symbol-observable": "^1.2.0"
+      }
+    },
+    "redux-thunk": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.3.0.tgz",
+      "integrity": "sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw=="
+    },
     "regenerate": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
@@ -11382,6 +11438,11 @@
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "resolve": {
       "version": "1.15.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.15.0.tgz",
@@ -12625,6 +12686,11 @@
         "util.promisify": "~1.0.0"
       }
     },
+    "symbol-observable": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",

smart-hut/package.json

@@ -17,6 +17,7 @@
     "react-axios": "^2.0.3",
     "react-circular-input": "^0.1.6",
     "react-circular-slider-svg": "^0.1.5",
+    "react-confirm-alert": "^2.6.1",
     "react-device-detect": "^1.11.14",
     "react-dom": "^16.12.0",
     "react-modal": "^2.2.2",

smart-hut/src/views/Dashboard.js

@@ -81,6 +81,15 @@ class Dashboard extends Component {
   }
 
   render() {
+    // 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;
+    }
+    //console.log("helper is",helper)
     return (
       <div style={{ background: "#1b1c1d" }}>
         <Responsive minWidth={768}>
@@ -126,7 +135,15 @@ class Dashboard extends Component {
                 </Grid.Column>
               )}
               <Grid.Column width={this.hasNavbar ? 13 : 16}>
-                <div style={panelStyle}>{this.renderTab(this.activeTab)}</div>
+                <div style={
+                  {backgroundImage:"url("+ backgroundImageHelper+")",
+                    backgroundColor: "#fafafa",
+                    height: "85vh",
+                    padding: "0rem 3rem",
+                    color: "#000000",
+                    overflow: "auto",
+                    maxHeight: "75vh",}
+                }>{this.renderTab(this.activeTab)}</div>
               </Grid.Column>
             </Grid.Row>
           </Grid>
@@ -199,6 +216,26 @@ class Dashboard extends Component {
 
 const mapStateToProps = (state, _) => ({
   activeTab: state.active.activeTab,
+  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){
+      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;
+        }
+      }
+    }
+  },
+
 });
 
 const setActiveTab = (activeTab) => {