Device feature display name

.github/workflows/build-demo-website.yml

@@ -0,0 +1,42 @@
+name: Build and publish demo website
+
+on:
+  push:
+    tags:
+      - 'v*.*.*'
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    name: Build and publish demo website
+    steps:
+      - uses: actions/checkout@v2
+      - name: 💽 Setup nodejs
+        uses: actions/setup-node@v2
+        with:
+          node-version: '16'
+      - name: 📇 Use npm cache
+        uses: actions/cache@v2
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+      - name: 📦 Install NPM front packages
+        working-directory: ./front
+        run: |
+          npm ci
+      - name: 🏗️ Build front
+        working-directory: ./front
+        env:
+          DEMO_MODE: true
+        run: |
+          npm run build
+      - name: Publish to Cloudflare Pages
+        uses: cloudflare/pages-action@1
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_PUBLISH_TO_PAGES_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          projectName: gladysassistant-demo
+          directory: ./front/build
+          gitHubToken: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/docker-pr-build.yml

@@ -132,7 +132,7 @@ jobs:
           sudo apt-get install -y libudev-dev sqlite3 openssl python-is-python3
       - name: 📦 Install NPM packages
         run: |
-          npm ci
+          npm ci && npm run install-server:dev
       - name: ✅ Cypress run
         uses: cypress-io/github-action@v2
         with:

.github/workflows/publish-gladys-plus-production.yml

@@ -0,0 +1,10 @@
+name: Publish Gladys Plus front to production
+
+on: workflow_dispatch
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Run Cloudflare Pages deploy hook
+        run: curl -X POST "https://api.cloudflare.com/client/v4/pages/webhooks/deploy_hooks/${{ secrets.CLOUDFLARE_PAGES_GLADYS_PLUS_DEPLOY_HOOK }}"

CHANGELOG.md

@@ -4,6 +4,18 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v4.11.1](https://github.com/GladysAssistant/Gladys/compare/v4.11.0...v4.11.1)
+
+> 10 October 2022
+
+- Open-Zwave: Add button to convert Z-Wave device to MQTT device [`#1616`](https://github.com/GladysAssistant/Gladys/pull/1616)
+- Fix #1503: In scene, sort variables to avoid bad replacement in text [`#1504`](https://github.com/GladysAssistant/Gladys/pull/1504)
+- Core: Add new saveHistoricalState function + event [`#1613`](https://github.com/GladysAssistant/Gladys/pull/1613)
+- Tasmota: Fix temperature parser [`#1614`](https://github.com/GladysAssistant/Gladys/pull/1614)
+- Zigbee2mqtt: Add multiple buttons features [`#1572`](https://github.com/GladysAssistant/Gladys/pull/1572)
+- Fix #1503: In scene, sort variables to avoid bad replacement in text (#1504) [`#1503`](https://github.com/GladysAssistant/Gladys/issues/1503)
+- Update CHANGELOG [`3ec8d33`](https://github.com/GladysAssistant/Gladys/commit/3ec8d3315ee1b57f2ca38dd60246abc352f5ee47)
+
 #### [v4.11.0](https://github.com/GladysAssistant/Gladys/compare/v4.10.2...v4.11.0)
 
 > 4 October 2022

front/src/components/boxs/chart/Chart.jsx

@@ -142,10 +142,12 @@ class Chartbox extends Component {
       const series = data.map((oneFeature, index) => {
         const oneUnit = this.props.box.units ? this.props.box.units[index] : this.props.box.unit;
         const oneUnitTranslated = oneUnit ? this.props.intl.dictionary.deviceFeatureUnitShort[oneUnit] : null;
-        const name = oneUnitTranslated ? `${oneFeature.device.name} (${oneUnitTranslated})` : oneFeature.device.name;
+        const { values, deviceFeature } = oneFeature;
+        const deviceName = deviceFeature.name;
+        const name = oneUnitTranslated ? `${deviceName} (${oneUnitTranslated})` : deviceName;
         return {
           name,
-          data: oneFeature.values.map(value => {
+          data: values.map(value => {
             emptySeries = false;
             return {
               x: value.created_at,

front/src/components/boxs/device-in-room/DeviceRow.jsx

@@ -8,6 +8,7 @@ import LightTemperatureDeviceFeature from './device-features/LightTemperatureDev
 import MultiLevelDeviceFeature from './device-features/MultiLevelDeviceFeature';
 import NumberDeviceFeature from './device-features/NumberDeviceFeature';
 import CoverDeviceFeature from './device-features/CoverDeviceFeature';
+import ThermostatDeviceFeature from './device-features/ThermostatDeviceFeature';
 
 const ROW_TYPE_BY_FEATURE_TYPE = {
   [DEVICE_FEATURE_TYPES.LIGHT.BINARY]: BinaryDeviceFeature,
@@ -20,7 +21,8 @@ const ROW_TYPE_BY_FEATURE_TYPE = {
   [DEVICE_FEATURE_TYPES.SHUTTER.STATE]: CoverDeviceFeature,
   [DEVICE_FEATURE_TYPES.SHUTTER.POSITION]: MultiLevelDeviceFeature,
   [DEVICE_FEATURE_TYPES.CURTAIN.STATE]: CoverDeviceFeature,
-  [DEVICE_FEATURE_TYPES.CURTAIN.POSITION]: MultiLevelDeviceFeature
+  [DEVICE_FEATURE_TYPES.CURTAIN.POSITION]: MultiLevelDeviceFeature,
+  [DEVICE_FEATURE_TYPES.THERMOSTAT.TARGET_TEMPERATURE]: ThermostatDeviceFeature
 };
 
 const DeviceRow = ({ children, ...props }) => {

front/src/components/boxs/device-in-room/EditDeviceInRoom.jsx

@@ -18,7 +18,8 @@ const SUPPORTED_FEATURE_TYPES = [
   DEVICE_FEATURE_TYPES.TELEVISION.CHANNEL,
   DEVICE_FEATURE_TYPES.TELEVISION.VOLUME,
   DEVICE_FEATURE_TYPES.SHUTTER.POSITION,
-  DEVICE_FEATURE_TYPES.SHUTTER.STATE
+  DEVICE_FEATURE_TYPES.SHUTTER.STATE,
+  DEVICE_FEATURE_TYPES.THERMOSTAT.TARGET_TEMPERATURE
 ];
 
 @connect('httpClient', {})

front/src/components/boxs/device-in-room/device-features/BinaryDeviceFeature.jsx

@@ -1,4 +1,4 @@
-import { getDeviceName } from './utils';
+import { getDeviceName } from '../../../../utils/device';
 
 const BinaryDeviceType = ({ children, ...props }) => {
   function updateValue() {

front/src/components/boxs/device-in-room/device-features/ColorDeviceFeature.jsx

@@ -3,7 +3,7 @@ import cx from 'classnames';
 import iro from '@jaames/iro';
 
 import { intToHex, hexToInt } from '../../../../../../server/utils/colors';
-import { getDeviceName } from './utils';
+import { getDeviceName } from '../../../../utils/device';
 
 import style from './style.css';
 

front/src/components/boxs/device-in-room/device-features/CoverDeviceFeature.jsx

@@ -2,7 +2,7 @@ import get from 'get-value';
 import { Text } from 'preact-i18n';
 import cx from 'classnames';
 
-import { getDeviceName } from './utils';
+import { getDeviceName } from '../../../../utils/device';
 import { DeviceFeatureCategoriesIcon } from '../../../../utils/consts';
 import { COVER_STATE } from '../../../../../../server/utils/constants';
 

front/src/components/boxs/device-in-room/device-features/LightTemperatureDeviceFeature.jsx

@@ -1,4 +1,4 @@
-import { getDeviceName } from './utils';
+import { getDeviceName } from '../../../../utils/device';
 
 const LightTemperatureDeviceType = ({ children, ...props }) => {
   function updateValue(e) {

front/src/components/boxs/device-in-room/device-features/MultiLevelDeviceFeature.jsx

@@ -1,6 +1,6 @@
 import get from 'get-value';
 
-import { getDeviceName } from './utils';
+import { getDeviceName } from '../../../../utils/device';
 import { DeviceFeatureCategoriesIcon } from '../../../../utils/consts';
 
 const MultiLevelDeviceType = ({ children, ...props }) => {

front/src/components/boxs/device-in-room/device-features/NumberDeviceFeature.jsx

@@ -1,6 +1,6 @@
 import get from 'get-value';
 
-import { getDeviceName } from './utils';
+import { getDeviceName } from '../../../../utils/device';
 import { DeviceFeatureCategoriesIcon } from '../../../../utils/consts';
 
 const NumberDeviceFeature = ({ children, ...props }) => {

front/src/components/boxs/device-in-room/device-features/ThermostatDeviceFeature.jsx

@@ -0,0 +1,91 @@
+import get from 'get-value';
+import { Text } from 'preact-i18n';
+import cx from 'classnames';
+
+import { getDeviceName } from '../../../../utils/device';
+import { DeviceFeatureCategoriesIcon } from '../../../../utils/consts';
+
+import style from './style.css';
+
+const isNullOrUndefined = val => val === null || val === undefined;
+const DEFAULT_TEMPERATURE_IN_CASE_EMPTY = 18;
+
+const ThermostatDeviceFeature = ({ children, ...props }) => {
+  function updateValue(value) {
+    props.updateValueWithDebounce(
+      props.x,
+      props.y,
+      props.device,
+      props.deviceFeature,
+      props.deviceIndex,
+      props.deviceFeatureIndex,
+      value,
+      props.deviceFeature.last_value
+    );
+  }
+
+  function updateValueEvent(e) {
+    updateValue(e.target.value);
+  }
+
+  function add() {
+    const prevValue = isNullOrUndefined(props.deviceFeature.last_value)
+      ? DEFAULT_TEMPERATURE_IN_CASE_EMPTY
+      : props.deviceFeature.last_value;
+    updateValue(prevValue + 0.5);
+  }
+
+  function substract() {
+    const prevValue = isNullOrUndefined(props.deviceFeature.last_value)
+      ? DEFAULT_TEMPERATURE_IN_CASE_EMPTY
+      : props.deviceFeature.last_value;
+    updateValue(prevValue - 0.5);
+  }
+
+  return (
+    <tr>
+      <td>
+        <i
+          class={`fe fe-${get(
+            DeviceFeatureCategoriesIcon,
+            `${props.deviceFeature.category}.${props.deviceFeature.type}`,
+            { default: 'hash' }
+          )}`}
+        />
+      </td>
+      <td>{getDeviceName(props.device, props.deviceFeature)}</td>
+
+      <td class="py-0">
+        <div class="d-flex justify-content-end">
+          <div class="d-flex">
+            <div class="input-group">
+              <div class="input-group-prepend">
+                <button class="btn btn-outline-secondary" type="button" onClick={substract}>
+                  <Text id="dashboard.boxes.devicesInRoom.substractButton" />
+                </button>
+              </div>
+              <input
+                type="number"
+                value={props.deviceFeature.last_value}
+                class={cx('form-control text-center', style.removeNumberArrow)}
+                onChange={updateValueEvent}
+                step={0.5}
+                min={props.deviceFeature.min}
+                max={props.deviceFeature.max}
+              />
+              {props.deviceFeature.unit && (
+                <div class="input-group-append">
+                  <button class="btn btn-outline-secondary" type="button" onClick={add}>
+                    <Text id="dashboard.boxes.devicesInRoom.addButton" />
+                  </button>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </td>
+    </tr>
+  );
+};
+
+export default ThermostatDeviceFeature;

front/src/components/boxs/device-in-room/device-features/style.css

@@ -16,3 +16,15 @@ input[type='range'][class~='light-temperature']::-moz-range-progress {
 input[type='range'][class~='light-temperature']::-ms-fill-lower {
   background: linear-gradient(to right, rgb(178, 212, 251), rgb(243, 166, 60));
 }
+
+/* Chrome, Safari, Edge, Opera */
+.removeNumberArrow::-webkit-outer-spin-button,
+.removeNumberArrow::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+.removeNumberArrow {
+  -moz-appearance: textfield;
+}

front/src/components/scene/TextWithVariablesInjected.jsx

@@ -92,7 +92,8 @@ class TextWithVariablesInjected extends Component {
   };
   parseText = textContent => {
     let text = textContent ? textContent : '';
-    this.state.variableWhileList.forEach(variable => {
+    const variableWhileListSorted = this.state.variableWhileList.sort((a, b) => b.id.length - a.id.length);
+    variableWhileListSorted.forEach(variable => {
       text = text.replaceAll(variable.text, `${OPENING_VARIABLE}${variable.id}${CLOSING_VARIABLE}`);
     });
     text = text.replaceAll(`\n${OPENING_VARIABLE}`, OPENING_VARIABLE);

front/src/config/demo.js

@@ -170,7 +170,7 @@ const data = {
         {
           type: 'devices-in-room',
           room: 'parental-room',
-          device_features: ['curtain-actions', 'shutter-actions', 'shutter-position']
+          device_features: ['curtain-actions', 'shutter-actions', 'shutter-position', 'thermostat']
         }
       ]
     ],
@@ -367,7 +367,7 @@ const data = {
         selector: 'main-lamp',
         features: [
           {
-            name: 'Main Lamp',
+            name: 'First lamp',
             selector: 'main-lamp-binary',
             category: 'light',
             type: 'binary',
@@ -377,6 +377,17 @@ const data = {
             last_value: 1,
             last_value_changed: '2019-02-12 07:49:07.556 +00:00'
           },
+          {
+            name: 'Second lamp ',
+            selector: 'secondary-lamp-binary',
+            category: 'light',
+            type: 'binary',
+            min: 0,
+            max: 1,
+            read_only: false,
+            last_value: 1,
+            last_value_changed: '2019-02-12 07:49:07.556 +00:00'
+          },
           {
             name: 'TV Lamp color',
             selector: 'tv-lamp-color',
@@ -524,6 +535,25 @@ const data = {
             unit: 'percent'
           }
         ]
+      },
+      {
+        id: 'db3e81b4-00d4-4f9b-8aa6-0e50e719a729',
+        name: 'Thermostat',
+        selector: 'thermostat',
+        features: [
+          {
+            name: 'Thermostat',
+            selector: 'thermostat',
+            category: 'thermostat',
+            type: 'target-temperature',
+            min: 0,
+            max: 30,
+            read_only: false,
+            last_value: 19.5,
+            last_value_changed: '2022-10-10 07:49:07.556 +00:00',
+            unit: 'celsius'
+          }
+        ]
       }
     ]
   },