Improve scene view (GladysAssistant#649)

* Improve scene view by making it vertical * Add trigger UI edition * Improve display of trigger with units * Use react-select in choose trigger card * Translate add trigger card * Migrate triggers to the scene table * Fix device.get filtered by name * Remove trigger table tests * Remove triggers controllers` * Translate chooseActionCard and use react-select * Improve responsive of device state change trigger card * Add action icon in config variable * Display room in device state trigger select * Improve responsive & sort device feature name * Delay action box working * Telegram card in scene view * Add loading state on scene view * Translate and bugfix delay card * Translate & make send message work * Add explanation text and placeholder * Clean actions group if needed * Add an error message in case saving the scene fail * Add all translations * Fix server-side code for lights.turn-on * Fix scenes tests * Remove trigger folder * Handle triggers + add tests * Fix scenes tests * Add listener on EVENTS.ACTION.TRIGGERED * Improve demo mode * Add test on executeSingleAction * Fix links active state * Add send message action + tests * Add more tests to room.get * Improve code coverage on device.get * Add more tests on scene.get
R6n0 · Feb 17, 2020 · 85431a1 · 85431a1
1 parent 744e29c
commit 85431a1
Show file tree

Hide file tree

Showing 83 changed files with 2,081 additions and 1,355 deletions.
diff --git a/front/package-lock.json b/front/package-lock.json
diff --git a/front/package.json b/front/package.json
@@ -38,12 +38,13 @@
     "leaflet": "^1.4.0",
     "linkstate": "^1.1.1",
     "moment": "^2.24.0",
-    "preact": "^10.0.5",
+    "preact": "^10.2.1",
     "preact-cli-plugin-fast-async": "^1.0.1",
     "preact-i18n": "^2.0.0-preactx.2",
-    "preact-router": "^3.1.0",
+    "preact-router": "^3.2.1",
     "qrcode": "^1.4.2",
     "react-big-calendar": "^0.22.1",
+    "react-select": "^3.0.8",
     "react-stripe-elements": "^5.0.1",
     "set-value": "^3.0.0",
     "tabler-ui": "0.0.32",

diff --git a/front/src/actions/scene.js b/front/src/actions/scene.js
@@ -1,8 +1,12 @@
 import { RequestStatus } from '../utils/consts';
-import update from 'immutability-helper';
+import update, { extend } from 'immutability-helper';
 import debounce from 'debounce';
 import { route } from 'preact-router';
 
+extend('$auto', function(value, object) {
+  return object ? update(object, value) : update({}, value);
+});
+
 function createActions(store) {
   const actions = {
     async getScenes(state) {
@@ -49,6 +53,9 @@ function createActions(store) {
         if (scene.actions[scene.actions.length - 1].length > 0) {
           scene.actions.push([]);
         }
+        if (!scene.triggers) {
+          scene.triggers = [];
+        }
         store.setState({
           scene,
           SceneGetStatus: RequestStatus.Success
@@ -75,31 +82,16 @@ function createActions(store) {
       }
     },
     async saveScene(state) {
-      store.setState({
-        SceneSaveStatus: RequestStatus.Getting
-      });
-      try {
-        await state.httpClient.patch(`/api/v1/scene/${state.scene.selector}`, state.scene);
-        store.setState({
-          SceneSaveStatus: RequestStatus.Success
-        });
-      } catch (e) {
-        store.setState({
-          SceneSaveStatus: RequestStatus.Error
-        });
-      }
+      await state.httpClient.patch(`/api/v1/scene/${state.scene.selector}`, state.scene);
     },
     addAction(state, columnIndex) {
-      if (!state.selectedNewAction) {
-        return null;
-      }
       let newState = update(state, {
         scene: {
           actions: {
             [columnIndex]: {
               $push: [
                 {
-                  type: state.selectedNewAction
+                  type: null
                 }
               ]
             }
@@ -118,7 +110,7 @@ function createActions(store) {
       store.setState(newState);
     },
     deleteAction(state, columnIndex, rowIndex) {
-      const newState = update(state, {
+      let newState = update(state, {
         scene: {
           actions: {
             [columnIndex]: {
@@ -127,6 +119,21 @@ function createActions(store) {
           }
         }
       });
+      // if necessary, we remove the last action group
+      if (newState.scene.actions.length >= 2) {
+        if (
+          newState.scene.actions[newState.scene.actions.length - 1].length === 0 &&
+          newState.scene.actions[newState.scene.actions.length - 2].length === 0
+        ) {
+          newState = update(newState, {
+            scene: {
+              actions: {
+                $splice: [[newState.scene.actions.length - 1, 1]]
+              }
+            }
+          });
+        }
+      }
       store.setState(newState);
     },
     updateActionProperty(state, columnIndex, rowIndex, property, value) {
@@ -145,11 +152,6 @@ function createActions(store) {
       });
       store.setState(newState);
     },
-    updateSelectedNewAction(state, e) {
-      store.setState({
-        selectedNewAction: e.target.value
-      });
-    },
     highlighCurrentlyExecutedAction(state, { columnIndex, rowIndex }) {
       store.setState({
         highLightedActions: {
@@ -200,6 +202,45 @@ function createActions(store) {
           GetUsersStatus: RequestStatus.Error
         });
       }
+    },
+    addTrigger(state) {
+      const newState = update(state, {
+        scene: {
+          triggers: {
+            $push: [
+              {
+                type: null
+              }
+            ]
+          }
+        }
+      });
+      store.setState(newState);
+    },
+    deleteTrigger(state, index) {
+      const newState = update(state, {
+        scene: {
+          triggers: {
+            $splice: [[index, 1]]
+          }
+        }
+      });
+      store.setState(newState);
+    },
+    updateTriggerProperty(state, index, property, value) {
+      console.log({ index, property, value });
+      const newState = update(state, {
+        scene: {
+          triggers: {
+            [index]: {
+              [property]: {
+                $set: value
+              }
+            }
+          }
+        }
+      });
+      store.setState(newState);
     }
   };
   actions.debouncedSearch = debounce(actions.search, 200);

diff --git a/front/src/components/boxs/device-in-room/device-features/BinaryDeviceFeature.jsx b/front/src/components/boxs/device-in-room/device-features/BinaryDeviceFeature.jsx
@@ -7,7 +7,7 @@ const BinaryDeviceType = ({ children, ...props }) => {
       props.deviceFeature,
       props.deviceIndex,
       props.deviceFeatureIndex,
-      !props.deviceFeature.last_value
+      props.deviceFeature.last_value === 0 ? 1 : 0
     );
   }
 

diff --git a/front/src/components/header/index.jsx b/front/src/components/header/index.jsx
@@ -1,4 +1,5 @@
 import { Text } from 'preact-i18n';
+import classnames from 'classnames';
 import { h } from 'preact';
 import { Link } from 'preact-router/match';
 import { isUrlInArray } from '../../utils/url';
@@ -80,22 +81,25 @@ const Header = ({ ...props }) => {
             <div class="col-lg order-lg-first">
               <ul class="nav nav-tabs border-0 flex-column flex-lg-row">
                 <li class="nav-item">
-                  <Link activeClassName="active" href="/dashboard" class="nav-link">
+                  <Link
+                    href="/dashboard"
+                    class={classnames('nav-link', {
+                      active: props.currentUrl === '/dashboard'
+                    })}
+                  >
                     <i class="fe fe-home" /> <Text id="header.home" />
                   </Link>
                 </li>
                 <li class="nav-item">
-                  <Link activeClassName="active" href="/dashboard/chat" class="nav-link">
+                  <Link
+                    href="/dashboard/chat"
+                    class={classnames('nav-link', {
+                      active: props.currentUrl === '/dashboard/chat'
+                    })}
+                  >
                     <i class="fe fe-message-square" /> <Text id="header.chat" />
                   </Link>
                 </li>
-                {false && (
-                  <li class="nav-item">
-                    <Link activeClassName="active" href="/dashboard/device" class="nav-link">
-                      <i class="fe fe-toggle-right" /> <Text id="header.devices" />
-                    </Link>
-                  </li>
-                )}
                 <li class="nav-item">
                   <Link
                     href="/dashboard/integration/device"
@@ -105,12 +109,23 @@ const Header = ({ ...props }) => {
                   </Link>
                 </li>
                 <li class="nav-item">
-                  <Link activeClassName="active" href="/dashboard/calendar" class="nav-link">
+                  <Link
+                    href="/dashboard/calendar"
+                    class={classnames('nav-link', {
+                      active: props.currentUrl === '/dashboard/calendar'
+                    })}
+                  >
                     <i class="fe fe-calendar" /> <Text id="header.calendar" />
                   </Link>
                 </li>
                 <li class="nav-item">
-                  <Link activeClassName="active" href="/dashboard/maps" class="nav-link">
+                  <Link
+                    activeClassName="active"
+                    href="/dashboard/maps"
+                    class={classnames('nav-link', {
+                      active: props.currentUrl === '/dashboard/maps'
+                    })}
+                  >
                     <i class="fe fe-map" /> <Text id="header.maps" />
                   </Link>
                 </li>

diff --git a/front/src/config/demo.json b/front/src/config/demo.json
@@ -338,7 +338,7 @@
           "features": [
             {
               "name": "Temperature",
-              "selector": "main-lamp-binary",
+              "selector": "temperature-sensor",
               "category": "temperature-sensor",
               "type": "",
               "min": -20,
@@ -350,7 +350,7 @@
             },
             {
               "name": "Humidity",
-              "selector": "main-lamp-binary",
+              "selector": "humidity-sensor",
               "category": "humidity-sensor",
               "type": "",
               "min": 0,
@@ -362,7 +362,7 @@
             },
             {
               "name": "Door",
-              "selector": "main-lamp-binary",
+              "selector": "door-opening-sensor",
               "category": "door-opening-sensor",
               "type": "",
               "min": 0,
@@ -387,7 +387,7 @@
           "features": [
             {
               "name": "Humidity",
-              "selector": "main-lamp-binary",
+              "selector": "kitchen-humidity-sensor",
               "category": "humidity-sensor",
               "type": "",
               "min": 0,
@@ -400,8 +400,8 @@
             {
               "name": "Light",
               "selector": "main-lamp-binary",
-              "category": "light-sensor",
-              "type": "",
+              "category": "light",
+              "type": "binary",
               "min": 0,
               "max": 100,
               "read_only": true,
@@ -495,18 +495,26 @@
     "selector": "wake-up",
     "icon": "fe fe-bell",
     "name": "Wake Up",
+    "triggers": [
+      {
+        "type": "device.new-state",
+        "device_feature": "main-lamp-binary",
+        "operator": "=",
+        "value": 1
+      }
+    ],
     "actions": [
       [
         {
           "type": "delay",
-          "seconds": 2
+          "value": 2,
+          "unit": "seconds"
         }
       ],
       [
         {
-          "type": "telegram.send",
-          "user": "tony",
-          "text": "Time to wake up!"
+          "type": "light.turn-on",
+          "devices": ["light"]
         }
       ]
     ]
@@ -950,6 +958,21 @@
       ]
     }
   ],
+  "get /api/v1/device": [
+    {
+      "id": "06e735a3-ac62-4a05-85b6-855f2c556d7b",
+      "name": "Living room lamp",
+      "selector": "light",
+      "features": [
+        {
+          "name": "Living room lamp",
+          "type": "binary",
+          "selector": "light.binary",
+          "category": "light"
+        }
+      ]
+    }
+  ],
   "get /api/v1/service/xiaomi": {
     "id": "70cb1e17-3b17-4886-83ab-45b00a9e03b1",
     "name": "Xiaomi",