Improve scene view

front/package.json

@@ -38,7 +38,7 @@
     "leaflet": "^1.4.0",
     "linkstate": "^1.1.1",
     "moment": "^2.24.0",
-    "preact": "^10.2.1",
+    "preact": "^10.3.2",
     "preact-cli-plugin-fast-async": "^1.0.1",
     "preact-i18n": "^2.0.0-preactx.2",
     "preact-router": "^3.2.1",

front/src/actions/createScene.js

@@ -10,6 +10,9 @@ function createActions(store) {
       if (!state.newScene.name) {
         newSceneErrors.name = true;
       }
+      if (state.newScene.name === 'new') {
+        newSceneErrors.name = true;
+      }
       if (!state.newScene.icon) {
         newSceneErrors.icon = true;
       }

front/src/actions/scene.js

@@ -1,7 +1,6 @@
 import { RequestStatus } from '../utils/consts';
 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);
@@ -43,204 +42,6 @@ function createActions(store) {
         getScenesOrderDir: e.target.value
       });
       await actions.getScenes(store.getState());
-    },
-    async getSceneBySelector(state, sceneSelector) {
-      store.setState({
-        SceneGetStatus: RequestStatus.Getting
-      });
-      try {
-        const scene = await state.httpClient.get(`/api/v1/scene/${sceneSelector}`);
-        if (scene.actions[scene.actions.length - 1].length > 0) {
-          scene.actions.push([]);
-        }
-        if (!scene.triggers) {
-          scene.triggers = [];
-        }
-        store.setState({
-          scene,
-          SceneGetStatus: RequestStatus.Success
-        });
-      } catch (e) {
-        store.setState({
-          SceneGetStatus: RequestStatus.Error
-        });
-      }
-    },
-    async startScene(state, selector) {
-      store.setState({
-        SceneStartStatus: RequestStatus.Getting
-      });
-      try {
-        await state.httpClient.post(`/api/v1/scene/${selector}/start`);
-        store.setState({
-          SceneStartStatus: RequestStatus.Success
-        });
-      } catch (e) {
-        store.setState({
-          SceneStartStatus: RequestStatus.Error
-        });
-      }
-    },
-    async saveScene(state) {
-      await state.httpClient.patch(`/api/v1/scene/${state.scene.selector}`, state.scene);
-    },
-    addAction(state, columnIndex) {
-      let newState = update(state, {
-        scene: {
-          actions: {
-            [columnIndex]: {
-              $push: [
-                {
-                  type: null
-                }
-              ]
-            }
-          }
-        }
-      });
-      if (state.scene.actions[columnIndex].length === 0) {
-        newState = update(newState, {
-          scene: {
-            actions: {
-              $push: [[]]
-            }
-          }
-        });
-      }
-      store.setState(newState);
-    },
-    deleteAction(state, columnIndex, rowIndex) {
-      let newState = update(state, {
-        scene: {
-          actions: {
-            [columnIndex]: {
-              $splice: [[rowIndex, 1]]
-            }
-          }
-        }
-      });
-      // 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) {
-      const newState = update(state, {
-        scene: {
-          actions: {
-            [columnIndex]: {
-              [rowIndex]: {
-                [property]: {
-                  $set: value
-                }
-              }
-            }
-          }
-        }
-      });
-      store.setState(newState);
-    },
-    highlighCurrentlyExecutedAction(state, { columnIndex, rowIndex }) {
-      store.setState({
-        highLightedActions: {
-          [`${columnIndex}:${rowIndex}`]: true
-        }
-      });
-    },
-    removeHighlighAction(state, { columnIndex, rowIndex }) {
-      setTimeout(() => {
-        store.setState({
-          highLightedActions: {
-            [`${columnIndex}:${rowIndex}`]: false
-          }
-        });
-      }, 500);
-    },
-    async getUsers(state) {
-      store.setState({
-        GetUsersStatus: RequestStatus.Getting
-      });
-      try {
-        const users = await state.httpClient.get(`/api/v1/user`);
-        const sceneParamsData = {
-          users
-        };
-        store.setState({
-          sceneParamsData,
-          GetUsersStatus: RequestStatus.Success
-        });
-      } catch (e) {
-        store.setState({
-          GetUsersStatus: RequestStatus.Error
-        });
-      }
-    },
-    async deleteScene(state, selector) {
-      store.setState({
-        deleteSceneStatus: RequestStatus.Getting
-      });
-      try {
-        await state.httpClient.delete(`/api/v1/scene/${selector}`);
-        store.setState({
-          deleteSceneStatus: RequestStatus.Success
-        });
-        route('/dashboard/scene');
-      } catch (e) {
-        store.setState({
-          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);

front/src/components/device/SelectDeviceFeature.jsx

@@ -0,0 +1,112 @@
+import { Component } from 'preact';
+import { connect } from 'unistore/preact';
+import Select from 'react-select';
+
+import { getDeviceFeatureName } from '../../utils/device';
+
+@connect('httpClient', {})
+class SelectDeviceFeature extends Component {
+  getOptions = async () => {
+    try {
+      // we get the rooms with the devices
+      const rooms = await this.props.httpClient.get('/api/v1/room?expand=devices');
+      const deviceOptions = [];
+
+      const deviceDictionnary = {};
+      const deviceFeaturesDictionnary = {};
+
+      // and compose the multi-level options
+      rooms.forEach(room => {
+        const roomDeviceFeatures = [];
+        room.devices.forEach(device => {
+          device.features.forEach(feature => {
+            // keep device / deviceFeature in dictionnary
+            deviceFeaturesDictionnary[feature.selector] = feature;
+            deviceDictionnary[feature.selector] = device;
+
+            roomDeviceFeatures.push({
+              value: feature.selector,
+              label: getDeviceFeatureName(this.context.intl.dictionary, device, feature)
+            });
+          });
+        });
+        if (roomDeviceFeatures.length > 0) {
+          roomDeviceFeatures.sort((a, b) => {
+            if (a.label < b.label) {
+              return -1;
+            } else if (a.label > b.label) {
+              return 1;
+            }
+            return 0;
+          });
+          deviceOptions.push({
+            label: room.name,
+            options: roomDeviceFeatures
+          });
+        }
+      });
+      await this.setState({ deviceOptions, deviceFeaturesDictionnary, deviceDictionnary });
+      await this.refreshSelectedOptions(this.props);
+      if (this.state.selectedOption && this.state.selectedOption.value) {
+        this.props.onDeviceFeatureChange(
+          deviceFeaturesDictionnary[this.state.selectedOption.value],
+          deviceDictionnary[this.state.selectedOption.value]
+        );
+      }
+      return deviceOptions;
+    } catch (e) {
+      console.log(e);
+    }
+  };
+  handleChange = selectedOption => {
+    const { deviceFeaturesDictionnary, deviceDictionnary } = this.state;
+    if (selectedOption && selectedOption.value) {
+      this.props.onDeviceFeatureChange(
+        deviceFeaturesDictionnary[selectedOption.value],
+        deviceDictionnary[selectedOption.value]
+      );
+    } else {
+      this.props.onDeviceFeatureChange(null);
+    }
+  };
+  refreshSelectedOptions = async nextProps => {
+    let selectedOption = '';
+    if (nextProps.value && this.state.deviceOptions) {
+      let deviceOption;
+      let i = 0;
+      while (i < this.state.deviceOptions.length && deviceOption === undefined) {
+        deviceOption = this.state.deviceOptions[i].options.find(option => option.value === nextProps.value);
+        i++;
+      }
+
+      if (deviceOption) {
+        selectedOption = deviceOption;
+      }
+    }
+    await this.setState({ selectedOption });
+  };
+  constructor(props) {
+    super(props);
+    this.state = {
+      deviceOptions: null,
+      selectedOption: ''
+    };
+  }
+
+  async componentDidMount() {
+    this.getOptions();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.refreshSelectedOptions(nextProps);
+  }
+
+  render(props, { selectedOption, deviceOptions }) {
+    if (!deviceOptions) {
+      return null;
+    }
+    return <Select defaultValue={''} value={selectedOption} onChange={this.handleChange} options={deviceOptions} />;
+  }
+}
+
+export default SelectDeviceFeature;