Philips Hue UI fixes + compatibilities (GladysAssistant#594)

* Improve UX on service * Fix GladysAssistant#592 : Add philips hue compatibilities * Philips hue: display in new only devices which are not in Gladys * Improve demo mode for lights
R6n0 · Oct 29, 2019 · 5a05b22 · 5a05b22
1 parent ffac8be
commit 5a05b22
Show file tree

Hide file tree

Showing 10 changed files with 294 additions and 155 deletions.
diff --git a/front/src/config/demo.json b/front/src/config/demo.json
@@ -202,6 +202,7 @@
     "devices": [
       {
         "id": "b32daa9a-8f77-4394-b4f3-ffea215062d2",
+        "name": "Main Lamp",
         "selector": "main-lamp",
         "features": [
           {
@@ -219,6 +220,7 @@
       },
       {
         "id": "b32daa9a-8f77-4394-b4f3-ffea215062d2",
+        "name": "TV Lamp",
         "selector": "tv-lamp",
         "features": [
           {
@@ -1030,125 +1032,85 @@
   "get /api/v1/service/philips-hue/light": [
     {
       "id": "1",
-      "name": "Lounge Living Color",
-      "type": "Extended color light",
-      "modelid": "LCT007",
-      "manufacturername": "Phillips",
-      "uniqueid": "00:17:88:01:xx:xx:xx:xx-xx",
-      "swversion": "66013452",
-      "state": {
-        "on": true,
-        "bri": 202,
-        "hue": 11315,
-        "sat": 237,
-        "effect": "none",
-        "xy": [0.5534, 0.4239],
-        "alert": "none",
-        "colormode": "xy",
-        "reachable": true
-      }
+      "name": "New Lamp",
+      "model": "LCT007",
+      "external_id": "philips-hue:4"
     },
     {
       "id": "2",
-      "name": "Right Bedside",
-      "type": "Extended color light",
-      "modelid": "LCT001",
-      "manufacturername": "Phillips",
-      "uniqueid": "00:17:88:01:xx:xx:xx:xx-xx",
-      "swversion": "66013452",
-      "state": {
-        "on": true,
-        "bri": 202,
-        "hue": 11315,
-        "sat": 237,
-        "effect": "none",
-        "xy": [0.5534, 0.4239],
-        "alert": "none",
-        "colormode": "xy",
-        "reachable": true
-      }
-    },
-    {
-      "id": "3",
-      "name": "Left Bedside",
-      "type": "Extended color light",
-      "modelid": "LCT001",
-      "manufacturername": "Phillips",
-      "uniqueid": "00:17:88:01:xx:xx:xx:xx-xx",
-      "swversion": "66013452",
-      "state": {
-        "on": true,
-        "bri": 202,
-        "hue": 11315,
-        "sat": 237,
-        "effect": "none",
-        "xy": [0.5534, 0.4239],
-        "alert": "none",
-        "colormode": "xy",
-        "reachable": true
-      }
+      "name": "Living room lamp",
+      "model": "LCT007",
+      "external_id": "philips-hue:5"
     }
   ],
   "get /api/v1/service/philips-hue/device": [
     {
       "id": "1",
       "name": "Lounge Living Color",
-      "type": "Extended color light",
-      "modelid": "LCT007",
-      "manufacturername": "Phillips",
-      "uniqueid": "00:17:88:01:xx:xx:xx:xx-xx",
-      "swversion": "66013452",
-      "state": {
-        "on": true,
-        "bri": 202,
-        "hue": 11315,
-        "sat": 237,
-        "effect": "none",
-        "xy": [0.5534, 0.4239],
-        "alert": "none",
-        "colormode": "xy",
-        "reachable": true
-      }
+      "model": "LCT007",
+      "external_id": "philips-hue:1",
+      "features": [
+        {
+          "name": "On/Off",
+          "category": "light",
+          "type": "binary",
+          "min": 0,
+          "max": 1
+        },
+        {
+          "name": "Color",
+          "category": "light",
+          "type": "color",
+          "min": 0,
+          "max": 1
+        }
+      ]
     },
     {
       "id": "2",
       "name": "Right Bedside",
       "type": "Extended color light",
-      "modelid": "LCT001",
-      "manufacturername": "Phillips",
-      "uniqueid": "00:17:88:01:xx:xx:xx:xx-xx",
-      "swversion": "66013452",
-      "state": {
-        "on": true,
-        "bri": 202,
-        "hue": 11315,
-        "sat": 237,
-        "effect": "none",
-        "xy": [0.5534, 0.4239],
-        "alert": "none",
-        "colormode": "xy",
-        "reachable": true
-      }
+      "model": "LCT001",
+      "external_id": "philips-hue:2",
+      "features": [
+        {
+          "name": "On/Off",
+          "category": "light",
+          "type": "binary",
+          "min": 0,
+          "max": 1
+        },
+        {
+          "name": "Color",
+          "category": "light",
+          "type": "color",
+          "min": 0,
+          "max": 1
+        }
+      ]
     },
     {
       "id": "3",
       "name": "Left Bedside",
       "type": "Extended color light",
-      "modelid": "LCT001",
-      "manufacturername": "Phillips",
-      "uniqueid": "00:17:88:01:xx:xx:xx:xx-xx",
-      "swversion": "66013452",
-      "state": {
-        "on": true,
-        "bri": 202,
-        "hue": 11315,
-        "sat": 237,
-        "effect": "none",
-        "xy": [0.5534, 0.4239],
-        "alert": "none",
-        "colormode": "xy",
-        "reachable": true
-      }
+      "model": "LCT001",
+      "external_id": "philips-hue:3",
+      "features": [
+        {
+          "name": "On/Off",
+          "category": "light",
+          "type": "binary",
+          "min": 0,
+          "max": 1
+        },
+        {
+          "name": "Color",
+          "category": "light",
+          "type": "color",
+          "min": 0,
+          "max": 1
+        }
+      ]
     }
   ]
 }
diff --git a/front/src/config/i18n/en.json b/front/src/config/i18n/en.json
@@ -192,14 +192,16 @@
         "scanButton": "Scan network",
         "bridgeButtonNotPressed": "Bridge button not pressed: Please press the button on your Philips Hue bridge and try again.",
         "unknownError": "An unknown error occured. Please try again or contact Gladys community.",
-        "noBridgesConnected": "No bridges connected."
+        "noBridgesConnected": "No bridges connected.",
+        "noBridgesFound": "We didn't find any Philips Hue bridges on your network. Are you sure you are connected to the same network as your bridge and your bridge is turned on?"
       },
       "device": {
         "title": "Devices in Gladys",
         "deviceOnNetworkTitle": "Devices detected on network",
         "connectButton": "Connect/Reconnect",
         "search": "Search devices",
-        "deviceNotHandled": "Device not handled yet, please contact us to help us connect it in Gladys!"
+        "deviceNotHandled": "Device not handled yet, please contact us to help us connect it in Gladys!",
+        "noDevicesFound": "No devices found. Make sure you have connected one Philips Hue bridge in the setup tab."
       }
     },
     "rtspCamera": {

diff --git a/front/src/routes/integration/all/philips-hue/device-page/FoundDevices.jsx b/front/src/routes/integration/all/philips-hue/device-page/FoundDevices.jsx
@@ -27,6 +27,13 @@ const FoundDevices = ({ children, ...props }) => (
         <div class="dimmer-content">
           {props.getPhilipsHueNewDevicesStatus === RequestStatus.Getting && <div class={style.emptyDiv} />}
           <div class="row">
+            {props.philipsHueNewDevices && props.philipsHueNewDevices.length === 0 && (
+              <div class="col-md-12">
+                <div class="alert alert-info">
+                  <Text id="integration.philipsHue.device.noDevicesFound" />
+                </div>
+              </div>
+            )}
             {props.philipsHueNewDevices &&
               props.philipsHueNewDevices.map((device, index) => (
                 <div class="col-md-4">

diff --git a/front/src/routes/integration/all/philips-hue/device-page/actions.js b/front/src/routes/integration/all/philips-hue/device-page/actions.js
@@ -25,10 +25,14 @@ function createActions(store) {
         }
         const philipsHueDevicesReceived = await state.httpClient.get('/api/v1/service/philips-hue/device', options);
         const philipsHueDevices = philipsHueDevicesReceived.filter(device => device.model !== BRIDGE_MODEL);
+        const philipsHueDevicesMap = new Map();
+        philipsHueDevices.forEach(device => philipsHueDevicesMap.set(device.external_id, device));
         store.setState({
           philipsHueDevices,
+          philipsHueDevicesMap,
           getPhilipsHueDevicesStatus: RequestStatus.Success
         });
+        actions.getPhilipsHueNewDevices(store.getState());
       } catch (e) {
         store.setState({
           getPhilipsHueDevicesStatus: RequestStatus.Error
@@ -41,8 +45,14 @@ function createActions(store) {
       });
       try {
         const philipsHueNewDevices = await state.httpClient.get('/api/v1/service/philips-hue/light');
+        const philipsHueNewDevicesFiltered = philipsHueNewDevices.filter(device => {
+          if (!state.philipsHueDevicesMap) {
+            return true;
+          }
+          return !state.philipsHueDevicesMap.has(device.external_id);
+        });
         store.setState({
-          philipsHueNewDevices,
+          philipsHueNewDevices: philipsHueNewDevicesFiltered,
           getPhilipsHueNewDevicesStatus: RequestStatus.Success
         });
       } catch (e) {

diff --git a/front/src/routes/integration/all/philips-hue/device-page/index.js b/front/src/routes/integration/all/philips-hue/device-page/index.js
@@ -6,7 +6,7 @@ import DevicePage from './DevicePage';
 import FoundDevices from './FoundDevices';
 
 @connect(
-  'session,user,philipsHueDevices,houses,getPhilipsHueDevicesStatus,philipsHueNewDevices,getPhilipsHueCreateDeviceStatus',
+  'session,user,philipsHueDevices,houses,getPhilipsHueDevicesStatus,philipsHueNewDevices,getPhilipsHueCreateDeviceStatus,getPhilipsHueNewDevicesStatus',
   actions
 )
 class PhilipsHueDevicePage extends Component {
@@ -20,7 +20,7 @@ class PhilipsHueDevicePage extends Component {
   render(props, {}) {
     return (
       <PhilipsHuePage>
-        <DevicePage {...props} />
+        {props.philipsHueDevices && props.philipsHueDevices.length ? <DevicePage {...props} /> : <div />}
         <FoundDevices {...props} />
       </PhilipsHuePage>
     );

diff --git a/front/src/routes/integration/all/philips-hue/device-page/style.css b/front/src/routes/integration/all/philips-hue/device-page/style.css
@@ -0,0 +1,3 @@
+.emptyDiv {
+  min-height: 200px
+}