fix: Improve frontend and usability

cicoub13 · Jan 24, 2024 · 9f2c6d1 · 9f2c6d1
1 parent e6678f1
commit 9f2c6d1
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 67 deletions.
diff --git a/front/src/config/i18n/de.json b/front/src/config/i18n/de.json
@@ -1601,12 +1601,16 @@
       },
       "blinkLights": {
         "label": "Wählen Sie die Lichter aus, die Sie zum Blinken bringen möchten",
-        "description": "Konfigurieren Sie die Verzögerung zwischen jedem Blinken und die Anzahl der Blinksignale",
-        "timesToBlink": {
+        "description": "Stellen Sie die Dauer und die Geschwindigkeit des Blinkens ein",
+        "blinkingTime": {
+          "label": "Dauer (in Sekunden)",
           "placeholder": "3"
         },
-        "waitingTime": {
-          "placeholder": "200"
+        "blinkingSpeed": {
+          "label": "Modus",
+          "slow": "Langsam",
+          "medium": "Mittel",
+          "fast": "Schnell"
         }
       },
       "turnOnSwitches": {

diff --git a/front/src/config/i18n/en.json b/front/src/config/i18n/en.json
@@ -1603,12 +1603,16 @@
       },
       "blinkLights": {
         "label": "Select the lights you want to make blink",
-        "description": "Configure delay between each blink and number of blinks",
-        "timesToBlink": {
+        "description": "Configure blinking duration and speed",
+        "blinkingTime": {
+          "label": "Duration (in seconds)",
           "placeholder": "3"
         },
-        "waitingTime": {
-          "placeholder": "200"
+        "blinkingSpeed": {
+          "label": "Mode",
+          "slow": "Slow",
+          "medium": "Medium",
+          "fast": "Fast"
         }
       },
       "turnOnSwitches": {

diff --git a/front/src/config/i18n/fr.json b/front/src/config/i18n/fr.json
@@ -1605,12 +1605,16 @@
       },
       "blinkLights": {
         "label": "Sélectionnez les lumières que vous souhaitez faire clignoter",
-        "description": "Réglez le nombre de fois et le temps entre chaque clignotement",
-        "timesToBlink": {
-          "placeholder": "3 fois"
+        "description": "Réglez la durée et la vitesse de clignotement",
+        "blinkingTime": {
+          "label": "Durée (en secondes)",
+          "placeholder": "3"
         },
-        "waitingTime": {
-          "placeholder": "200ms"
+        "blinkingSpeed": {
+          "label": "Mode",
+          "slow": "Lent",
+          "medium": "Normal",
+          "fast": "Rapide"
         }
       },
       "turnOnSwitches": {

diff --git a/front/src/routes/scene/edit-scene/actions/BlinkLightParams.jsx b/front/src/routes/scene/edit-scene/actions/BlinkLightParams.jsx
@@ -29,13 +29,13 @@ class BlinkLight extends Component {
       this.props.updateActionProperty(this.props.columnIndex, this.props.index, 'devices', []);
     }
   };
-  handleChangeTimesToBlink = e => {
+  handleChangeBlinkingTime = e => {
     let newValue = Number.isInteger(parseInt(e.target.value, 10)) ? parseInt(e.target.value, 10) : 0;
-    this.props.updateActionProperty(this.props.columnIndex, this.props.index, 'timesToBlink', newValue);
+    this.props.updateActionProperty(this.props.columnIndex, this.props.index, 'blinkingTime', newValue);
   };
-  handleChangeWaitingTime = e => {
-    let newValue = Number.isInteger(parseInt(e.target.value, 10)) ? parseInt(e.target.value, 10) : 0;
-    this.props.updateActionProperty(this.props.columnIndex, this.props.index, 'waitingTime', newValue);
+  handleChangeBlinkingSpeed = e => {
+    console.log(e.target.value);
+    this.props.updateActionProperty(this.props.columnIndex, this.props.index, 'blinkingSpeed', e.target.value);
   };
   refreshSelectedOptions = nextProps => {
     const selectedOptions = [];
@@ -64,57 +64,59 @@ class BlinkLight extends Component {
     this.refreshSelectedOptions(nextProps);
   }
 
-  render(props, { selectedOptions, deviceOptions }) {
+  render(props, { selectedOptions, deviceOptions, blinkingSpeed }) {
     return (
-      <div class="row">
-        <div class="col-sm-4">
-          <div class="form-group">
-            <div class="form-label">
-              <Text id="editScene.actionsCard.blinkLigths.label" />
-            </div>
-            <Select
-              defaultValue={[]}
-              isMulti
-              value={selectedOptions}
-              onChange={this.handleChange}
-              options={deviceOptions}
-            />
-          </div>
-        </div>
-        <div class="col-sm-4">
-          <div class="form-group">
-            <div class="form-label">Répéter</div>
-            <Localizer>
-              <input
-                type="text"
-                class="form-control"
-                value={props.action.timesToBlink}
-                onChange={this.handleChangeTimesToBlink}
-                placeholder={<Text id="editScene.actionsCard.blinkLights.timesToBlink.placeholder" />}
+      <div>
+        <div class="row">
+          <div class="col-sm-12">
+            <div class="form-group">
+              <div class="form-label">
+                <Text id="editScene.actionsCard.blinkLigths.label" />
+              </div>
+              <Select
+                defaultValue={[]}
+                isMulti
+                value={selectedOptions}
+                onChange={this.handleChange}
+                options={deviceOptions}
               />
-            </Localizer>
+            </div>
           </div>
         </div>
-        <div class="col-sm-4">
-          <div class="form-group">
-            <div class="form-label">toutes les</div>
-            <Localizer>
-              <div class="input-group">
+        <div class="row">
+          <div class="col-sm-6">
+            <div class="form-group">
+              <div class="form-label">
+                <Text id="editScene.actionsCard.blinkLights.blinkingTime.label" />
+              </div>
+              <Localizer>
                 <input
                   type="text"
                   class="form-control"
-                  value={props.action.waitingTime}
-                  onChange={this.handleChangeWaitingTime}
-                  aria-describedby="basic-addon2"
-                  placeholder={<Text id="editScene.actionsCard.blinkLights.waitingTime.placeholder" />}
+                  value={props.action.blinkingTime}
+                  onChange={this.handleChangeBlinkingTime}
+                  placeholder={<Text id="editScene.actionsCard.blinkLights.blinkingTime.placeholder" />}
                 />
-                <div class="input-group-append">
-                  <span class="input-group-text" id="basic-addon2">
-                    ms
-                  </span>
-                </div>
+              </Localizer>
+            </div>
+          </div>
+          <div class="col-sm-6">
+            <div class="form-group">
+              <div class="form-label">
+                <Text id="editScene.actionsCard.blinkLights.blinkingSpeed.label" />
               </div>
-            </Localizer>
+              <select class="custom-select" value={blinkingSpeed} onChange={this.handleChangeBlinkingSpeed}>
+                <option value="slow">
+                  <Text id="editScene.actionsCard.blinkLights.blinkingSpeed.slow" />
+                </option>
+                <option value="medium">
+                  <Text id="editScene.actionsCard.blinkLights.blinkingSpeed.medium" />
+                </option>
+                <option value="fast">
+                  <Text id="editScene.actionsCard.blinkLights.blinkingSpeed.fast" />
+                </option>
+              </select>
+            </div>
           </div>
         </div>
       </div>

diff --git a/server/lib/scene/scene.actions.js b/server/lib/scene/scene.actions.js
@@ -109,6 +109,22 @@ const actionsFunc = {
     });
   },
   [ACTIONS.LIGHT.BLINK]: async (self, action, scope) => {
+    const { blinkingSpeed, blinkingTime } = action;
+    let blinkingInterval;
+    switch (blinkingSpeed) {
+      case 'slow':
+        blinkingInterval = 1000;
+        break;
+      case 'medium':
+        blinkingInterval = 500;
+        break;
+      case 'fast':
+        blinkingInterval = 100;
+        break;
+      default:
+        blinkingInterval = 100;
+        break;
+    }
     await Promise.map(action.devices, async (deviceSelector) => {
       try {
         const device = self.stateManager.get('device', deviceSelector);
@@ -117,12 +133,12 @@ const actionsFunc = {
           DEVICE_FEATURE_CATEGORIES.LIGHT,
           DEVICE_FEATURE_TYPES.LIGHT.BINARY,
         );
-        const { timesToBlink, waitingTime } = action;
         const timerId = setInterval(() => {
-          self.device.setValue(device, deviceFeature, 1);
-          self.device.setValue(device, deviceFeature, 0);
-        }, waitingTime);
-        setTimeout(() => clearInterval(timerId), waitingTime * (timesToBlink + 1));
+          const newValue = deviceFeature.last_value === 0 ? 1 : 0;
+          self.device.setValue(device, deviceFeature, newValue);
+          self.device.setValue(device, deviceFeature, !newValue);
+        }, blinkingInterval);
+        setTimeout(() => clearInterval(timerId), blinkingTime);
       } catch (e) {
         logger.warn(e);
       }

diff --git a/server/models/scene.js b/server/models/scene.js
@@ -60,8 +60,8 @@ const actionSchema = Joi.array().items(
       alarm_mode: Joi.string().valid(...ALARM_MODES_LIST),
       topic: Joi.string(),
       message: Joi.string().allow(''),
-      timesToBlink: Joi.number(),
-      waitingTime: Joi.number(),
+      blinkingTime: Joi.number(),
+      blinkingSpeed: Joi.string().valid('slow', 'medium', 'fast'),
     }),
   ),
 );