Merge pull request #1533 from proddy/https_36

keeping branch update. still memory and performance issues

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,32 +1,32 @@
 ---
-name: Problem Report/Change Request
+name: Problem Report
 about: Create a Report to help us improve
 ---
 
-<!-- Thanks for reporting an issue for this project. READ THIS FIRST:
+<!-- Thanks for reporting a problem for this project. READ THIS FIRST:
 
-Please DO NOT OPEN AN ISSUE if your EMS-ESP version is not the latest from the dev branch, please update your device before submitting your issue. Your issue might already be solved. The latest precompiled binaries of EMS-ESP can be downloaded from https://github.com/emsesp/EMS-ESP32/releases/tag/latest
+Please DO NOT OPEN AN ISSUE if your EMS-ESP version is not the latest from the dev branch, please update your device before submitting your issue. Your problem might already be solved. The latest precompiled binaries of EMS-ESP can be downloaded from https://github.com/emsesp/EMS-ESP32/releases/tag/latest
 
 Please take a few minutes to complete the requested information below.
 
 -->
 
-### DESCRIPTION
+### PROBLEM DESCRIPTION
 
-_A clear and concise description of what the problem is or the change requested._
+_A clear and concise description of what the problem is._
 
 ### REQUESTED INFORMATION
 
 _Make sure your have performed every step and checked the applicable boxes before submitting your issue. Thank you!_
 
-- [ ] Searched the issue in [issues](https://github.com/emsesp/EMS-ESP32/issues)
+- [ ] Searched the problem in [issues](https://github.com/emsesp/EMS-ESP32/issues)
-- [ ] Searched the issue in [discussions](https://github.com/emsesp/EMS-ESP32/discussions)
+- [ ] Searched the problem in [discussions](https://github.com/emsesp/EMS-ESP32/discussions)
-- [ ] Searched the issue in the [docs](https://emsesp.org/Troubleshooting/)
+- [ ] Searched the problem in the [docs](https://emsesp.github.io/docs/Troubleshooting/)
-- [ ] Searched the issue in the [chat](https://discord.gg/3J3GgnzpyT)
+- [ ] Searched the problem in the [chat](https://discord.gg/3J3GgnzpyT)
-- [ ] Provide the System information in the area below, taken from `http://<IP>/api/system`
+- [ ] Provide the output of http://ems-esp.local/api/system :
 
-```json
+```lua
-  Paste System information here....
+  System information output here:
 
 
 ```
@@ -41,10 +41,10 @@ _A clear and concise description of what you expected to happen._
 
 ### SCREENSHOTS
 
-_If applicable, add screenshots to help explain your issue._
+_If applicable, add screenshots to help explain your problem._
 
 ### ADDITIONAL CONTEXT
 
-_Add any other context about the issue here._
+_Add any other context about the problem here._
 
-**(Please remember to close the issue when it has been addressed)**
+**(Please, remember to close the issue when the problem has been addressed)**

.github/ISSUE_TEMPLATE/config.yml

@@ -1,7 +1,7 @@
 blank_issues_enabled: false
 contact_links:
   - name: EMS-ESP Docs
-    url: https://emsesp.org
+    url: https://emsesp.github.io/docs/
     about: All the information related to EMS-ESP.
   - name: EMS-ESP Discussions and Support
     url: https://github.com/emsesp/EMS-ESP32/discussions

.github/workflows/github-releases-to-discord.yml

@@ -1,7 +1,6 @@
 name: 'github-releases-to-discord'
 
 on:
-  workflow_dispatch:
   release:
     types: [published]
 
@@ -11,8 +10,7 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-        
+      - name: Github Releases To Discord
-      - name: GitHub Releases To Discord
         uses: SethCohen/github-releases-to-discord@v1.13.1
         with:
           webhook_url: ${{ secrets.WEBHOOK_URL }}

.github/workflows/pre_release.yml

@@ -10,24 +10,17 @@ jobs:
   pre-release:
     name: 'Automatic pre-release build'
     runs-on: ubuntu-latest
+
     steps:
-      - name: Checkout repository
+      - uses: actions/checkout@v4
-        uses: actions/checkout@v4
+      - uses: actions/setup-python@v4
-
-      - name: Enable Corepack
-        run: corepack enable
-        
-      - name: Install python 3.11
-        uses: actions/setup-python@v5
         with:
           python-version: '3.11'
-
+      - uses: actions/setup-node@v3
-      - name: Install Node.js 20
-        uses: actions/setup-node@v4
         with:
-          node-version: '20.x'
+          node-version: '18'
 
-      - name: Get EMS-ESP version
+      - name: Get EMS-ESP source code and version
         id: build_info
         run: |
           version=`grep -E '^#define EMSESP_APP_VERSION' ./src/version.h | awk -F'"' '{print $2}'`
@@ -47,13 +40,17 @@ jobs:
           yarn build
           yarn webUI
 
-      - name: Build all PIO target environments from default_envs
+      - name: Build firmware
         run: |
-          platformio run
+          platformio run -e ci
 
-      - name: Create GitHub Release
+      - name: Build S3 firmware
+        run: |
+          platformio run -e ci_s3
+
+      - name: Create a GH Release
         id: 'automatic_releases'
-        uses: emsesp/action-automatic-releases@v1.0.0
+        uses: 'marvinpinto/action-automatic-releases@latest'
         with:
           repo_token: '${{ secrets.GITHUB_TOKEN }}'
           title: Development Build v${{steps.build_info.outputs.VERSION}}

.github/workflows/sonar_check.yml

@@ -1,34 +1,30 @@
-# see https://github.com/marketplace/actions/sonarcloud-scan-for-c-and-c#usage
 name: Sonar Check
-
 on:
   push:
     branches:
       - dev
-  # pull_request:
+  pull_request:
-  #   types: [opened, synchronize, reopened]
+    types: [opened, synchronize, reopened]
-
 jobs:
   build:
     name: Build and analyze
-    if: github.repository == 'emsesp/EMS-ESP32'
     runs-on: ubuntu-latest
+    # if: github.repository_owner == 'emsesp'
+    # if: github.repository == 'emsesp/EMS-ESP32'
     env:
       BUILD_WRAPPER_OUT_DIR: bw-output
     steps:
-      - name: Checkout repository
+      - uses: actions/checkout@v4
-        uses: actions/checkout@v4
         with:
-          fetch-depth: 0
+          fetch-depth: 0 # Shallow clones should be disabled for a better relevancy of analysis
-
       - name: Install sonar-scanner and build-wrapper
         uses: SonarSource/sonarcloud-github-c-cpp@v2
-
       - name: Run build-wrapper
-        run:  build-wrapper-linux-x86-64 --out-dir ${{ env.BUILD_WRAPPER_OUT_DIR }} make all
+        run: |
-
+          build-wrapper-linux-x86-64 --out-dir ${{ env.BUILD_WRAPPER_OUT_DIR }} make all
       - name: Run sonar-scanner
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
-        run: sonar-scanner --define sonar.cfamily.compile-commands="${{ env.BUILD_WRAPPER_OUT_DIR }}/compile_commands.json"
+        run: |
+          sonar-scanner --define sonar.cfamily.build-wrapper-output="${{ env.BUILD_WRAPPER_OUT_DIR }}"

.github/workflows/tagged_release.yml

@@ -1,7 +1,6 @@
 name: 'tagged-release'
 
 on:
-  workflow_dispatch:
   push:
     tags:
       - 'v*'
@@ -10,27 +9,22 @@ jobs:
   tagged-release:
     name: 'Tagged Release'
     runs-on: ubuntu-latest
+
     steps:
-      - name: Checkout repository
+      - uses: actions/checkout@v4
-        uses: actions/checkout@v4
+      - uses: actions/setup-python@v4
-
-      - name: Enable Corepack
-        run: corepack enable
-
-      - name: Install python 3.11
-        uses: actions/setup-python@v5
         with:
           python-version: '3.11'
-
+      - uses: actions/setup-node@v3
-      - name: Install Node.js 20
-        uses: actions/setup-node@v4
         with:
-          node-version: '20.x'
+          node-version: '18'
 
       - name: Install PlatformIO
         run: |
           python -m pip install --upgrade pip
           pip install -U platformio
+          platformio upgrade
+          pio pkg update
 
       - name: Build WebUI
         run: |
@@ -41,12 +35,16 @@ jobs:
           yarn build
           yarn webUI
 
-      - name: Build all PIO target environments from default_envs
+      - name: Build firmware
         run: |
-          platformio run
+          platformio run -e ci
 
-      - name: Create GitHub Release
+      - name: Build S3 firmware
-        uses: emsesp/action-automatic-releases@v1.0.0
+        run: |
+          platformio run -e ci_s3
+
+      - name: Release
+        uses: 'marvinpinto/action-automatic-releases@latest'
         with:
           repo_token: '${{ secrets.GITHUB_TOKEN }}'
           prerelease: false

.github/workflows/test_release.yml

@@ -10,26 +10,27 @@ jobs:
   pre-release:
     name: 'Automatic test-release build'
     runs-on: ubuntu-latest
+
     steps:
       - uses: actions/checkout@v4
-      - name: Enable Corepack
+      - uses: actions/setup-python@v4
-        run: corepack enable
-      - uses: actions/setup-python@v5
         with:
           python-version: '3.11'
-      - name: Use Node.js 20.x
+      - uses: actions/setup-node@v3
-        uses: actions/setup-node@v4
         with:
-          node-version: '20.x'
+          node-version: '18'
+
       - name: Get EMS-ESP source code and version
         id: build_info
         run: |
           version=`grep -E '^#define EMSESP_APP_VERSION' ./src/version.h | awk -F'"' '{print $2}'`
           echo "VERSION=$version" >> $GITHUB_OUTPUT
+
       - name: Install PlatformIO
         run: |
           python -m pip install --upgrade pip
           pip install -U platformio
+
       - name: Build WebUI
         run: |
           cd interface
@@ -38,12 +39,18 @@ jobs:
           sed -i "s/= 'pl'/= 'en'/" ./src/i18n/i18n-util.ts
           yarn build
           yarn webUI
-      - name: Build all target environments from default_envs
+
+      - name: Build firmware
         run: |
-          platformio run
+          platformio run -e ci
-      - name: Create GitHub Release
+
+      - name: Build S3 firmware
+        run: |
+          platformio run -e ci_s3
+
+      - name: Create a GH Release
         id: 'automatic_releases'
-        uses: emsesp/action-automatic-releases@v1.0.0
+        uses: 'marvinpinto/action-automatic-releases@latest'
         with:
           repo_token: '${{ secrets.GITHUB_TOKEN }}'
           title: Test Build v${{steps.build_info.outputs.VERSION}}

.gitignore

@@ -2,7 +2,7 @@
 .vscode/c_cpp_properties.json
 .vscode/extensions.json
 .vscode/launch.json
-.vscode/settings.json
+# .vscode/settings.json
 
 # c++ compiling
 .clang_complete
@@ -12,11 +12,11 @@ cppcheck.out.xml
 # platformio
 .pio
 pio_local.ini
-*_old
 
 # OS specific
 .DS_Store
 *Thumbs.db
+emsesp
 
 # web specfic
 build/
@@ -30,16 +30,20 @@ stats.html
 *.sln
 *.sw?
 .pnp.*
-*/.yarn/*
+.yarn/*
 !.yarn/patches
 !.yarn/plugins
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
 yarn.lock
-analyse.html
+interface/analyse.html
-interface/vite.config.ts.timestamp*
+
-*.local
+# scripts
+test.sh
+scripts/run.sh
+scripts/__pycache__
+/scripts/stackdmp.txt
 
 # i18n generated files
 interface/src/i18n/i18n-react.tsx
@@ -48,27 +52,13 @@ interface/src/i18n/i18n-util.ts
 interface/src/i18n/i18n-util.sync.ts
 interface/src/i18n/i18n-util.async.ts
 
-# scripts
-test.sh
-scripts/run.sh
-scripts/__pycache__
-scripts/stackdmp.txt
-
 # sonar
 .scannerwork/
 sonar/
 bw-output/
 
-# standalone executable for testing
+# entity dump results
-emsesp
+# dump_entities.csv
-interface/tsconfig.tsbuildinfo
+# dump_entities.xls*
 
-# python virtual environment
+benchmark/*.log
-venv/
-
-# cspell
-words-found-verbose.txt
-
-# sonarlint
-compile_commands.json
-package.json

.prettierignore

@@ -1,6 +0,0 @@
-*/node_modules/
-build/
-dist/*
-interface/src/i18n/*
-
-.typesafe-i18n.json

.prettierrc

@@ -1,13 +1,8 @@
 {
-  "plugins": ["@trivago/prettier-plugin-sort-imports"],
   "trailingComma": "none",
   "tabWidth": 2,
   "semi": true,
   "singleQuote": true,
-  "printWidth": 85,
+  "printWidth": 120,
-  "bracketSpacing": true,
+  "bracketSpacing": true
-  "importOrder": ["^react", "^@mui/(.*)$", "^api*/(.*)$", "<THIRD_PARTY_MODULES>", "^[./]"],
-  "importOrderSeparation": true,
-  "importOrderSortSpecifiers": true,
-  "importOrderGroupNamespaceSpecifiers": true
 }

.sonarlint/connectedMode.json

@@ -1,4 +0,0 @@
-{
-    "sonarCloudOrganization": "emsesp",
-    "projectKey": "emsesp_EMS-ESP32"
-}

.vscode/extensions.json

@@ -0,0 +1,12 @@
+{
+    // See http://go.microsoft.com/fwlink/?LinkId=827846
+    // for the documentation about the extensions.json format
+    "recommendations": [
+        "dbaeumer.vscode-eslint",
+        "esbenp.prettier-vscode",
+        "platformio.platformio-ide"
+    ],
+    "unwantedRecommendations": [
+        "ms-vscode.cpptools-extension-pack"
+    ]
+}

.vscode/settings.json

@@ -6,10 +6,6 @@
   "editor.codeActionsOnSave": {
     "source.fixAll": "explicit"
   },
-    "eslint.validate": [
-      "typescript"
-    ],
-    "eslint.codeActionsOnSave.rules": null,
   "eslint.nodePath": "interface/.yarn/sdks",
   "eslint.workingDirectories": ["interface"],
   "prettier.prettierPath": "",
@@ -88,14 +84,5 @@
     "**/*.map",
     "**/ArduinoJson/**"
   ],
-    "cSpell.enableFiletypes": [
+  "cSpell.enableFiletypes": ["!cpp"]
-      "ini",
+}
-      "makefile"
-    ],
-    "typescript.preferences.preferTypeOnlyAutoImports": true,
-    "sonarlint.pathToCompileCommands": "${workspaceFolder}/compile_commands.json",
-    "sonarlint.connectedMode.project": {
-      "connectionId": "emsesp",
-      "projectKey": "emsesp_EMS-ESP32"
-    }
-  }

.vscode/tasks.json

@@ -0,0 +1,18 @@
+{
+  // See https://go.microsoft.com/fwlink/?LinkId=733558
+  // for the documentation about the tasks.json format
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "shell",
+      "label": "build standalone emsesp",
+      "command": "make",
+      "args": [],
+      "problemMatcher": ["$gcc"],
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      }
+    }
+  ]
+}

CHANGELOG.md

@@ -5,148 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [3.7.0] October 27 2024
-
-## **IMPORTANT! BREAKING CHANGES with 3.6.5**
-
-- "ww" and "wwc" has been renamed to "dhw". It is nested JSON object in both the MQTT and API outputs. The old prefix has also been removed from MQTT topics ([#1634](https://github.com/emsesp/EMS-ESP32/issues/1634)). This will impact historical data in home automation systems like Home Assistant and IOBroker. To preserve the current value of dhw energy (was previously nrgww) refer to this issue [#1938](https://github.com/emsesp/EMS-ESP32/issues/1938).
-- dhw entities from the MM100/SM100 have been moved under a new Device called 'water'.
-- The automatically generated temperature sensor ID has replaced dashes (`-`) with underscores (`_`) to be compatible with Home Assistant.
-- `api/system/info` has it's JSON key names changed to camelCase syntax.
-
-For more details go to [www.emsesp.org](https://www.emsesp.org/).
-
-## Added
-
-- some more entities for dhw with SM100 module
-- thermostat second dhw circuit [#1634](https://github.com/emsesp/EMS-ESP32/issues/1634)
-- remote thermostat emulation for RC100H, RC200 and FB10 [#1287](https://github.com/emsesp/EMS-ESP32/discussions/1287), [#1602](https://github.com/emsesp/EMS-ESP32/discussions/1602), [#1551](https://github.com/emsesp/EMS-ESP32/discussions/1551)
-- heatpump dhw stop temperatures [#1624](https://github.com/emsesp/EMS-ESP32/issues/1624)
-- reset history [#1695](https://github.com/emsesp/EMS-ESP32/issues/1695)
-- heatpump entities `fan` and `shutdown` [#1690](https://github.com/emsesp/EMS-ESP32/discussions/1690)
-- mqtt HA-mode 3 for v3.6 compatible HA entities, set on update v3.6->v3.7
-- HP input states [#1723](https://github.com/emsesp/EMS-ESP32/discussions/1723)
-- holiday settings for rego 3000  [#1735](https://github.com/emsesp/EMS-ESP32/issues/1735)
-- Added scripts for OTA (scripts/upload.py and upload_cli.py) [#1738](https://github.com/emsesp/EMS-ESP32/issues/1738)
-- timeout for remote thermostat emulation [#1680](https://github.com/emsesp/EMS-ESP32/discussions/1680), [#1774](https://github.com/emsesp/EMS-ESP32/issues/1774)
-- CR120 thermostat as own model() [#1779](https://github.com/emsesp/EMS-ESP32/discussions/1779)
-- modules - external linkable module library [#1778](https://github.com/emsesp/EMS-ESP32/issues/1778)
-- scheduler onChange and Conditions [#1806](https://github.com/emsesp/EMS-ESP32/issues/1806)
-- make remote control timeout editable [#1774](https://github.com/emsesp/EMS-ESP32/issues/1774)
-- added extra pump characteristics (mode and pressure for EMS+) by @SLTKA [#1802](https://github.com/emsesp/EMS-ESP32/pull/1802)
-- allow device name to be customized [#1174](https://github.com/emsesp/EMS-ESP32/issues/1174)
-- Modbus support by @mheyse [#1744](https://github.com/emsesp/EMS-ESP32/issues/1744)
-- System Message command [#1854](https://github.com/emsesp/EMS-ESP32/issues/1854)
-- scheduler can use web get/post for values and commands [#1806](https://github.com/emsesp/EMS-ESP32/issues/1806)
-- RT800 remote emulation [#1867](https://github.com/emsesp/EMS-ESP32/issues/1867)
-- RC310 cooling parameters [#1857](https://github.com/emsesp/EMS-ESP32/issues/1857)
-- command `api/device/entities` [#1897](https://github.com/emsesp/EMS-ESP32/issues/1897)
-- switchprogmode [#1903](https://github.com/emsesp/EMS-ESP32/discussions/1903)
-- autodetect and download firmware upgrades via the WebUI
-- command 'show log' that lists out the current weblog buffer, showing last messages.
-- default web log buffer to 25 lines for ESP32s with no PSRAM
-- try and determine correct board profile if none is set during boot
-- auto Scroll in WebLog UI - reduced delay so incoming logs are faster
-- uploading custom support info, shown to Guest users in Help page [#2054](https://github.com/emsesp/EMS-ESP32/issues/2054)
-- feature: Dashboard showing all data (favorites, sensors, custom) [#1958](https://github.com/emsesp/EMS-ESP32/issues/1958)
-- entity for low-temperature boilers pump start temp (pumpOnTemp) #2088 [#2088](https://github.com/emsesp/EMS-ESP32/issues/2088)
-- internal ESP32 temperature sensor on the S3 [#2077](https://github.com/emsesp/EMS-ESP32/issues/2077)
-- MQTT status topic (used in connect and last will) set to Retain [#2086](https://github.com/emsesp/EMS-ESP32/discussions/2086)
-- Czech language [2096](https://github.com/emsesp/EMS-ESP32/issues/2096)
-- Developer Mode and send EMS Read Commands from WebUI [#2116](https://github.com/emsesp/EMS-ESP32/issues/2116)
-- Scheduler functions [#2115](https://github.com/emsesp/EMS-ESP32/issues/2115)
-- Set device custom name from telegram 0x01 [#2073](https://github.com/emsesp/EMS-ESP32/issues/2073)
-
-## Fixed
-
-- remote thermostat emulation for RC200 on Rego2000/3000 thermostats [#1691](https://github.com/emsesp/EMS-ESP32/discussions/1691)
-- log shows data for F7/F9 requests
-- Detection of LittleFS for factory setting wasn't working
-- Check for bad GPIOs with Ethernet before the ethernet is initialized
-- Show values with factor 50 on webUI [#2064](https://github.com/emsesp/EMS-ESP32/issues/2064)
-- Rendering of values between -1 and 0
-- Value for 32bit times not-set [#2109](https://github.com/emsesp/EMS-ESP32/issues/2109)
-
-## Changed
-
-- use flag for BC400 compatible thermostats, manage different mode settings
-- use factory partition for 16M flash
-- store digital out states to nvs
-- Refresh UI - moving settings to one location [#1665](https://github.com/emsesp/EMS-ESP32/issues/1665)
-- rename DeviceValueTypes, add UINT32 for custom entities
-- dynamic register dhw circuits for thermostat
-- removed OTA feature [#1738](https://github.com/emsesp/EMS-ESP32/issues/1738)
-- added shower min duration [#1801](https://github.com/emsesp/EMS-ESP32/issues/1801)
-- Include TXT file along with the generated CSV for Device Data export/download
-- thermostat/remotetemp as command [#1835](https://github.com/emsesp/EMS-ESP32/discussions/1835)
-- temperaturesensor id notation with underscore [#1794](https://github.com/emsesp/EMS-ESP32/discussions/1794)
-- Change key-names in JSON to be compliant and consistent [#1860](https://github.com/emsesp/EMS-ESP32/issues/1860)
-- Updates to webUI [#1920](https://github.com/emsesp/EMS-ESP32/issues/1920)
-- Correct firmware naming #1933 [#1933](https://github.com/emsesp/EMS-ESP32/issues/1933)
-- Don't start Serial console if not connected to a Serial port. Will initiate manually after a CTRL-C/CTRL-S  
-- WebLog UI matches color schema of the terminal console correctly
-- Updated Web libraries, ArduinoJson
-- Help page doesn't show detailed tech info if the user is not 'admin' role [#2054](https://github.com/emsesp/EMS-ESP32/issues/2054)
-- removed system command `allvalues` and moved to an action called `export`
-- Show ems-esp internal devices in device list of system/info
-- Scheduler and mqtt run async on systems with psram
-- Show IPv6 address type (local/global/ula) in log
-
-## [3.6.5] March 23 2024
-
-## **IMPORTANT! BREAKING CHANGES**
-
-- The Wifi Tx Power setting in Network Settings will be reset to Auto
-
-## Added
-
-- thermostat boost mode and boost time [#1446](https://github.com/emsesp/EMS-ESP32/issues/1446)
-- heatpump energy meters [#1463](https://github.com/emsesp/EMS-ESP32/issues/1463)
-- heatpump max power [#1475](https://github.com/emsesp/EMS-ESP32/issues/1475)
-- checkbox for MQTT-TLS enable [#1474](https://github.com/emsesp/EMS-ESP32/issues/1474)
-- added SK (Slovak) language. Thanks @misa1515
-- CPU info [#1497](https://github.com/emsesp/EMS-ESP32/pull/1497)
-- Show network hostname in Web UI under Network Status
-- Improved HA Discovery so each section (EMS device, Scheduler, Analog, Temperature, Custom, Shower) have their own section
-- boiler Bosch C1200W, id 12, [#1536](https://github.com/emsesp/EMS-ESP32/issues/1536)
-- mixer MM100 telegram 0x2CC [#1554](https://github.com/emsesp/EMS-ESP32/issues/1554)
-- boiler hpSetDiffPressure [#1563](https://github.com/emsesp/EMS-ESP32/issues/1563)
-- custom variables [#1423](https://github.com/emsesp/EMS-ESP32/issues/1423)
-- weather compensation [#1642](https://github.com/emsesp/EMS-ESP32/issues/1642)
-- env and partitions for DevKitC-1-N32R8 [#1635](https://github.com/emsesp/EMS-ESP32/discussions/1635)
-- command `restart partitionname` and button long press to start with other partition [#1657](https://github.com/emsesp/EMS-ESP32/issues/1657)
-- command `set service  <mqtt|ota|ntp|ap> <enable|disable>` [#1663](https://github.com/emsesp/EMS-ESP32/issues/1663)
-
-## Fixed
-
-- exhaust temperature for some boilers
-- add back boil2hyst [#1477](https://github.com/emsesp/EMS-ESP32/issues/1477)
-- subscribed MQTT topics not detecting changes by EMS-ESP [#1494](https://github.com/emsesp/EMS-ESP32/issues/1494)
-- changed HA name and grouping to be consistent [#1528](https://github.com/emsesp/EMS-ESP32/issues/1528)
-- MQTT autodiscovery in Domoticz not working [#1360](https://github.com/emsesp/EMS-ESP32/issues/1528)
-- dhw comfort for new ems+, [#1495](https://github.com/emsesp/EMS-ESP32/issues/1495)
-- added writeable icon to Web's Custom Entity page for each entity shown in the table
-- Wifi Tx Power not adjusted [#1614](https://github.com/emsesp/EMS-ESP32/issues/1614)
-- MQTT discovery of custom entity doesn't consider type of data [#1587](https://github.com/emsesp/EMS-ESP32/issues/1587)
-- WiFi TxPower wasn't correctly used. Added an 'Auto' setting, which is the default.
-- dns w/wo IPv6 [#1644](https://github.com/emsesp/EMS-ESP32/issues/1644)
-
-## Changed
-
-- HA don't set entity_category to Diagnostic/Configuration for EMS entities [#1459](https://github.com/emsesp/EMS-ESP32/discussions/1459)
-- upgraded ArduinoJson to 7.0.0 #1538 and then 7.0.2
-- small changes to the API for analog and temperature sensors
-- Length of mqtt Broker adress [#1619](https://github.com/emsesp/EMS-ESP32/issues/1619)
-- C++ optimizations - see <https://github.com/emsesp/EMS-ESP32/pull/1615>
-- Send MQTT heartbeat immediately after connection [#1628](https://github.com/emsesp/EMS-ESP32/issues/1628)
-- 16MB partitions with second nvs, larger FS, Coredump, optional factory partition
-- stop fetching empty telegrams after 5 min
-
 ## [3.6.4] November 24 2023
 
 ## **IMPORTANT! BREAKING CHANGES**
 
-Writeable Text entities have moved from type `sensor` to `text` in Home Assistant to make them also editable within an HA dashboard. Examples are `datetime`, `holidays`, `switchtime`, `vacations`, `maintenancedate`. You will need to manually remove any old discovery topics from your MQTT broker using an application like MQTT Explorer.
+Writeable Text entities have moved from type `sensor` to `text` in Home Assistant to make them also editable within an HA dashboard. Examples are `datetime`, `holidays`, `switchtime`, `vacations`, `maintenancedate`... You will need to manually remove any old discovery topics from your MQTT broker using an application like MQTT Explorer.
 
 ## Added
 
@@ -373,7 +236,7 @@ There are breaking changes between 3.5.x and earlier versions of 3.6.0. Please r
 
 - fix Table resizing in WebUI [#519](https://github.com/emsesp/EMS-ESP32/issues/519)
 - allow larger customization files [#570](https://github.com/emsesp/EMS-ESP32/issues/570)
-- losing entity wwcomfort [#581](https://github.com/emsesp/EMS-ESP32/issues/581)
+- losing entitiy wwcomfort [#581](https://github.com/emsesp/EMS-ESP32/issues/581)
 
 ## Changed
 

CHANGELOG_LATEST.md

@@ -1 +1,24 @@
 # Changelog
+
+## [3.6.5]
+
+## **IMPORTANT! BREAKING CHANGES**
+
+## Added
+
+- thermostat boost mode and boost time [#1446](https://github.com/emsesp/EMS-ESP32/issues/1446)
+- heatpump energy meters [#1463](https://github.com/emsesp/EMS-ESP32/issues/1463)
+- heatpump max power [#1475](https://github.com/emsesp/EMS-ESP32/issues/1475)
+- checkbox for MQTT-TLS enable [#1474](https://github.com/emsesp/EMS-ESP32/issues/1474)
+- added SK (Slovencina) language. Thanks @misa1515
+- CPU info [#1497](https://github.com/emsesp/EMS-ESP32/pull/1497)
+
+## Fixed
+
+- exhaust temperature for some boilers
+- add back boil2hyst [#1477](https://github.com/emsesp/EMS-ESP32/issues/1477)
+- subscribed MQTT topics not detecting changes by EMS-ESP [#1494](https://github.com/emsesp/EMS-ESP32/issues/1494)
+
+## Changed
+
+- HA don't set entity_category to Diagnostic/Configuration for EMS entities [#1459](https://github.com/emsesp/EMS-ESP32/discussions/1459)

CONTRIBUTING.md

@@ -6,7 +6,7 @@ Everybody is welcome and invited to contribute to the EMS-ESP Project by:
 
 - providing Pull Requests (Features, Fixes, suggestions)
 - testing new released features and report issues on your EMS equipment
-- contributing to missing [documentation](https://emsesp.org)
+- contributing to missing [documentation](https://emsesp.github.io/docs)
 
 This document describes rules that are in effect for this repository, meant for handling issues by contributors in the issue tracker and PRs.
 

Makefile

@@ -1,11 +1,9 @@
 #
 # GNUMakefile for EMS-ESP
-# This is mainly used to generate the .o files for SonarQube analysis
 #
 
-# NUMJOBS=${NUMJOBS:-" -j10 "}
+NUMJOBS=${NUMJOBS:-" -j4 "}
-# MAKEFLAGS+="j "
+MAKEFLAGS+="j "
-
 #----------------------------------------------------------------------
 # Project Structure
 #----------------------------------------------------------------------
@@ -31,7 +29,8 @@ CHECKFLAGS = -q --force --std=c++11
 # Languages Standard
 #----------------------------------------------------------------------
 C_STANDARD   := -std=c17
-CXX_STANDARD := -std=gnu++14
+# CXX_STANDARD := -std=c++17
+CXX_STANDARD := -std=gnu++11
 
 # C_STANDARD   := -std=c11
 # CXX_STANDARD := -std=c++11
@@ -39,11 +38,11 @@ CXX_STANDARD := -std=gnu++14
 #----------------------------------------------------------------------
 # Defined Symbols
 #----------------------------------------------------------------------
-DEFINES += -DARDUINOJSON_ENABLE -DARDUINOJSON_ENABLE_ARDUINO_STRING -DARDUINOJSON_USE_DOUBLE=0
+DEFINES += -DARDUINOJSON_ENABLE_STD_STRING=1 -DARDUINOJSON_ENABLE_PROGMEM=1 -DARDUINOJSON_ENABLE_ARDUINO_STRING -DARDUINOJSON_USE_DOUBLE=0
-DEFINES += -DEMSESP_STANDALONE -DEMSESP_TEST -DEMSESP_DEBUG -DEMC_RX_BUFFER_SIZE=1500
+DEFINES += -DEMSESP_DEBUG -DEMSESP_STANDALONE -DEMSESP_TEST -D__linux__ -DEMC_RX_BUFFER_SIZE=1500
 DEFINES += $(ARGS)
 
-DEFAULTS = -DEMSESP_DEFAULT_LOCALE=\"en\" -DEMSESP_DEFAULT_TX_MODE=8 -DEMSESP_DEFAULT_VERSION=\"3.7.0-dev\" -DEMSESP_DEFAULT_BOARD_PROFILE=\"S32\"
+DEFAULTS = -DEMSESP_DEFAULT_LOCALE=\"en\" -DEMSESP_DEFAULT_TX_MODE=8 -DEMSESP_DEFAULT_VERSION=\"3.6.4-dev\" -DEMSESP_DEFAULT_BOARD_PROFILE=\"S32\"
 
 #----------------------------------------------------------------------
 # Sources & Files
@@ -82,8 +81,8 @@ CPPFLAGS  += -g3
 CPPFLAGS  += -Os
 
 CFLAGS    += $(CPPFLAGS)
-CFLAGS    += -Wall -Wextra -Werror -Wswitch-enum
+CFLAGS    += -Wall -Wextra -Werror -Wswitch-enum -Wno-unused-parameter -Wno-inconsistent-missing-override -Wno-missing-braces -Wno-unused-lambda-capture -Wno-sign-compare
-CFLAGS    += -Wno-tautological-constant-out-of-range-compare -Wno-unused-parameter -Wno-inconsistent-missing-override -Wno-missing-braces -Wno-unused-lambda-capture -Wno-sign-compare
+
 CXXFLAGS  += $(CFLAGS) -MMD
 
 #----------------------------------------------------------------------

README.md

@@ -4,7 +4,7 @@
 [![release-date](https://img.shields.io/github/release-date/emsesp/EMS-ESP32.svg?label=Released)](https://github.com/emsesp/EMS-ESP32/commits/main)
 [![license](https://img.shields.io/github/license/emsesp/EMS-ESP32.svg)](LICENSE)
 [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=emsesp_EMS-ESP32&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=emsesp_EMS-ESP32)
-[![Codacy Badge](https://app.codacy.com/project/badge/Grade/9441142f49424ef891e8f5251866ee6b)](https://app.codacy.com/gh/emsesp/EMS-ESP32/dashboard?utm_source=gh&utm_medium=referral&utm_content=&utm_campaign=Badge_grade)
+[![Codacy Badge](https://app.codacy.com/project/badge/Grade/9441142f49424ef891e8f5251866ee6b)](https://www.codacy.com/gh/emsesp/EMS-ESP32/dashboard?utm_source=github.com&utm_medium=referral&utm_content=emsesp/EMS-ESP32&utm_campaign=Badge_Grade)
 [![downloads](https://img.shields.io/github/downloads/emsesp/EMS-ESP32/total.svg)](https://github.com/emsesp/EMS-ESP32/releases)
 [![chat](https://img.shields.io/discord/816637840644505620.svg?style=flat-square&color=blueviolet)](https://discord.gg/3J3GgnzpyT)
 
@@ -12,61 +12,41 @@
 [![GitHub forks](https://img.shields.io/github/forks/emsesp/EMS-ESP32.svg?style=social&label=Fork)](https://github.com/emsesp/EMS-ES32P/network)
 [![donate](https://img.shields.io/badge/donate-PayPal-blue.svg)](https://www.paypal.com/paypalme/prderbyshire/2)
 
-**EMS-ESP** is an open-source firmware for the Espressif ESP32 microcontroller to communicate with **EMS** (Energy Management System) compatible equipment from manufacturers such as Bosch, Buderus, Nefit, Junkers, Worcester, Sieger, elm.leblanc and iVT.
+**EMS-ESP** is an open-source firmware for the Espressif ESP32 microcontroller that communicates with **EMS** (Energy Management System) based equipment from manufacturers like Bosch, Buderus, Nefit, Junkers, Worcester and Sieger. It requires a small gateway circuit to interface with the EMS bus which can be purchased from <https://bbqkees-electronics.nl> or custom built.
 
-It requires a small circuit to interface with the EMS bus which can be purchased from <https://bbqkees-electronics.nl> or custom built.
+## **Features**
 
-## **Key Features**
+- A multi-user, multi-language secure web interface to change settings and monitor incoming data
-
+- A console, accessible via Serial and Telnet for more advanced monitoring
-- Compatible with EMS, EMS+, EMS2, EMS Plus, Logamatic EMS, Junkers 2-wire, Heatronic 3 and 4
+- Native support for Home Assistant, Domoticz and openHAB via [MQTT Discovery](https://www.home-assistant.io/docs/mqtt/discovery/)
-- Supporting over 120 different EMS compatible devices such as thermostats, boilers, heat pumps, mixing units, solar modules, connect modules, ventilation units, switches and more
+- Can run standalone as an independent WiFi Access Point or join an existing WiFi network
-- Easy to add external Temperature and Analog sensors that are attached to GPIO pins on the ESP32 board
+- Easy first-time configuration via a web Captive Portal
-- A multi-user, multi-language web interface to change settings and monitor incoming data
+- Support for more than [110+ EMS devices](https://emsesp.github.io/docs/All-Devices/) (boilers, thermostats, solar modules, mixer modules, heat pumps, gateways, switches, heat sources)
-- A simple to use console, accessible via Serial/USB or Telnet for advanced operations and detailed monitoring
-- Native integration with Home Assistant, Domoticz, openHAB and Modbus
-- Easy setup and install with automatic updates
-- Simulation of remote thermostats
-- Localized in 11 languages, and customizable to rename any device or sensor
-- Extendable by adding own custom EMS entities
-- Expandable via adding user-built external modules
-- A powerful Scheduler to automate tasks and trigger events based data changes
-- A Notification service to alert you of important events
-
-## **Installing**
-
-For a quick install of the latest stable release go to [https://install.emsesp.org](https://install.emsesp.org). For other methods of installing and upgrading, and switching over to the development version go to [this section](https://emsesp.org/Getting-Started/#first-time-install) in the documentation.
-
-If you're upgrading a BBQKees Electronics EMS Gateway and unsure which firmware to use, please refer to the [this overview](https://emsesp.org/Getting-Started/#bbqkees-electronics-ems-gateway).
 
 ## **Documentation**
 
-Visit [emsesp.org](https://emsesp.org) for more details on how to install and configure EMS-ESP. There is also a collection of Frequently Asked Questions and Troubleshooting tips with example customizations from the community.
+For the complete documentation on how to install, configure and get support visit the [EMS-ESP Wiki](https://emsesp.github.io/docs).
 
-## **Getting Support**
+## **Support**
 
 To chat with the community reach out on our [Discord Server](https://discord.gg/3J3GgnzpyT).
 
-If you find an issue or have a request, see [here](https://emsesp.org/Support/) on how to submit a bug report or feature request.
+If you like **EMS-ESP**, please give it a star, or fork it and contribute or offer a small donation!
 
-## **Live Demo**
+## **Demo**
 
-For a live demo go to [demo.emsesp.org](https://demo.emsesp.org). Pick a language from the sign on page and log in with any username or password. Note not all features are operational as it's based on static data.
+For a live demo of the Web UI click [here](https://ems-esp.derbyshire.nl) and log in with any username/password.
 
-## **Contributors**
+## **Contributors ✨**
 
-EMS-ESP is a project created by [proddy](https://github.com/proddy) and owned and maintained by both [proddy](https://github.com/proddy) and [MichaelDvP](https://github.com/MichaelDvP) with support from [BBQKees Electronics](https://bbqkees-electronics.nl).
+EMS-ESP is a project owned and maintained by [proddy](https://github.com/proddy) and [MichaelDvP](https://github.com/MichaelDvP).
-
-You can contact us using [this form](https://emsesp.org/Contact/).
-
-If you like **EMS-ESP**, please give it a ✨ on GitHub, or even better fork it and contribute. You can also offer a small donation. This is an open-source project maintained by volunteers, and your support is greatly appreciated.
 
 ## **Libraries used**
 
-- [esp8266-react](https://github.com/rjwats/esp8266-react) by @rjwats for the core framework that provides the Web UI, which has been heavily modified
+- [esp8266-react](https://github.com/rjwats/esp8266-react) by @rjwats for the framework that provides the core of the Web UI
-- [uuid-\*](https://github.com/nomis/mcu-uuid-console) from @nomis. The console, syslog, telnet and logging are based off these awesome open source libraries
+- [uuid-\*](https://github.com/nomis/mcu-uuid-console) from @nomis. The console, syslog, telnet and logging are based off these open source libraries
-- [ArduinoJson](https://github.com/bblanchon/ArduinoJson) for all the JSON processing
+- [ArduinoJson](https://github.com/bblanchon/ArduinoJson) for all the JSON
-- [espMqttClient](https://github.com/bertmelis/espMqttClient) for the MQTT client
+- [espMqttClient](https://github.com/bertmelis/espMqttClient) for the MQTT client, with custom modifications from @MichaelDvP and @proddy
-- ESPAsyncWebServer and AsyncTCP for the Web server and TCP backends, with custom modifications for performance
 
 ## **License**
 
@@ -78,14 +58,14 @@ This program is licensed under GPL-3.0
 
 |                                    |                                  |
 | ---------------------------------- | -------------------------------- |
-| ![Web Settings](media/web_settings.png) | ![Web Status](media/web_status.png) |
+| <img src="media/web_settings.png"> | <img src="media/web_status.png"> |
-| ![Web Devices](media/web_devices.png)  | ![Web MQTT](media/web_mqtt.png)   |
+| <img src="media/web_devices.png">  | <img src="media/web_mqtt.png">   |
-| ![Web Edit](media/web_edit.png)     | ![Web Log](media/web_log.png)    |
+| <img src="media/web_edit.png">     | <img src="media/web_log.png">    |
 
 ### Telnet Console
 
-![Console](media/console0.png)
+<img src="media/console0.png" width=80% height=80%>
 
-### Home Assistant
+### In Home Assistant
 
-![Home Assistant](media/ha_lovelace.png)
+<img src="media/ha_lovelace.png" width=80% height=80%>

benchmark/http-client-test.js

@@ -0,0 +1,39 @@
+#!/usr/bin/env node
+
+const axios = require('axios');
+
+const url = 'http://10.10.10.135/api/system/commands';
+const queryParams = {
+  entity: 'commands',
+  id: 0
+};
+
+const totalRequests = 1000000;
+const requestsPerCount = 100;
+
+let requestCount = 0;
+
+function fetchData() {
+  axios
+    .get(url, { params: queryParams })
+    .then((response) => {
+      requestCount++;
+
+      if (requestCount % requestsPerCount === 0) {
+        console.log(`Requests completed: ${requestCount}`);
+      }
+
+      if (requestCount < totalRequests) {
+        fetchData();
+      } else {
+        console.log('All requests completed.');
+      }
+    })
+    .catch((error) => {
+      console.error('Error making request:', error.message);
+    });
+}
+
+// Start making requests
+console.log(`Starting test`);
+fetchData();

benchmark/loadtest-http.sh

@@ -0,0 +1,38 @@
+#!/usr/bin/env bash
+# Install:
+#  npm install -g autocannon
+#  yarn global add autocannon
+#
+# or run https://github.com/nearform/autocannon-ui
+
+TEST_IP="10.10.10.135"
+TEST_TIME=60
+LOG_FILE=http-loadtest.log
+TIMEOUT=10000
+PROTOCOL=http
+#PROTOCOL=https
+
+if test -f "$LOG_FILE"; then
+  rm $LOG_FILE
+fi
+
+# for CONCURRENCY in 1 2 3 4 5 6 7 8 9 10 15 20
+for CONCURRENCY in 1
+#for CONCURRENCY in 20
+do
+  printf "\n\nCLIENTS: *** $CONCURRENCY ***\n\n" >> $LOG_FILE
+  echo "Testing $CONCURRENCY clients on $PROTOCOL://$TEST_IP/"
+  autocannon -c $CONCURRENCY -w 1 -d $TEST_TIME --renderStatusCodes "$PROTOCOL://$TEST_IP/" >> $LOG_FILE 2>&1
+  printf "\n\n----------------\n\n" >> $LOG_FILE
+  sleep 1
+
+  echo "Testing $CONCURRENCY clients on $PROTOCOL://$TEST_IP/api/system/commands"
+  autocannon -c $CONCURRENCY -w 1 -d $TEST_TIME --renderStatusCodes "$PROTOCOL://$TEST_IP/api/system/commands" >> $LOG_FILE 2>&1
+  printf "\n\n----------------\n\n" >> $LOG_FILE
+  sleep 1
+
+  echo "Testing $CONCURRENCY clients on $PROTOCOL://$TEST_IP/app/icon.png"
+  autocannon -c $CONCURRENCY -w 1 -d $TEST_TIME --renderStatusCodes "$PROTOCOL://$TEST_IP/app/icon.png" >> $LOG_FILE 2>&1
+  printf "\n\n----------------\n\n" >> $LOG_FILE
+  sleep 1
+done

benchmark/package.json

@@ -0,0 +1,8 @@
+{
+  "dependencies": {
+    "autocannon": "^7.14.0",
+    "axios": "^1.6.2",
+    "eventsource": "^2.0.2",
+    "ws": "^8.14.2"
+  }
+}

cspell.json

@@ -1,13 +0,0 @@
-{
-    "$schema": "https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json",
-    "version": "0.2",
-    "dictionaryDefinitions": [
-      {
-        "name": "project-words",
-        "path": "./project-words.txt",
-        "addWords": true
-      }
-    ],
-    "dictionaries": ["project-words"],
-    "ignorePaths": ["node_modules", "compile_commands.json", "WWWData.h", "**/venv/**", "lib/eModbus", "lib/ESPAsyncWebServer", "lib/espMqttClient", "analyse.html", "dist", "**/*.csv", "locale_translations.h", "TZ.tsx", "**/*.txt","build/**", "**/i18n/**", "/project-words.txt"]
-  }

dump_telegrams.csv

@@ -1,212 +0,0 @@
-telegram_type_id,name,is_fetched
-0x04,UBAFactory,fetched
-0x06,RCTime, 
-0x0A,EasyMonitor,fetched
-0x10,UBAErrorMessage1, 
-0x11,UBAErrorMessage2, 
-0x12,RCErrorMessage, 
-0x13,RCErrorMessage2, 
-0x14,UBATotalUptime,fetched
-0x15,UBAMaintenanceData, 
-0x16,UBAParameters,fetched
-0x18,UBAMonitorFast, 
-0x19,UBAMonitorSlow, 
-0x1A,UBASetPoints, 
-0x1C,UBAMaintenanceStatus, 
-0x1E,WM10TempMessage, 
-0x23,JunkersSetMixer,fetched
-0x26,UBASettingsWW,fetched
-0x28,WeatherComp,fetched
-0x2A,MC110Status, 
-0x2E,Meters, 
-0x33,UBAParameterWW,fetched
-0x34,UBAMonitorWW, 
-0x35,UBAFlags, 
-0x37,WWSettings,fetched
-0x38,WWTimer,fetched
-0x39,WWCircTimer,fetched
-0x3A,RC30WWSettings,fetched
-0x3B,Energy, 
-0x3D,RC35Set, 
-0x3E,RC35Monitor, 
-0x3F,RC35Timer, 
-0x40,RC30Temp, 
-0x41,RC30Monitor, 
-0x42,RC35Timer2, 
-0x47,RC35Set, 
-0x48,RC35Monitor, 
-0x49,RC35Timer, 
-0x4C,RC35Timer2, 
-0x51,RC35Set, 
-0x52,RC35Monitor, 
-0x53,RC35Timer, 
-0x56,RC35Timer2, 
-0x5B,RC35Set, 
-0x5C,RC35Monitor, 
-0x5D,RC35Timer, 
-0x60,RC35Timer2, 
-0x96,SM10Config,fetched
-0x97,SM10Monitor, 
-0x9C,WM10MonitorMessage, 
-0x9D,WM10SetMessage, 
-0xA2,RCError, 
-0xA3,RCOutdoorTemp, 
-0xA5,IBASettings,fetched
-0xA7,RC30Set, 
-0xA9,RC30Vacation,fetched
-0xAA,MMConfigMessage,fetched
-0xAB,MMStatusMessage, 
-0xAC,MMSetMessage, 
-0xAF,RC20Remote, 
-0xB0,RC10Set, 
-0xB1,RC10Monitor, 
-0xBB,HybridSettings,fetched
-0xBF,ErrorMessage, 
-0xC2,UBAErrorMessage3, 
-0xD1,UBAOutdoorTemp, 
-0xE3,UBAMonitorSlowPlus2, 
-0xE4,UBAMonitorFastPlus, 
-0xE5,UBAMonitorSlowPlus, 
-0xE6,UBAParametersPlus,fetched
-0xE9,UBAMonitorWWPlus, 
-0xEA,UBAParameterWWPlus,fetched
-0x0101,ISM1Set,fetched
-0x0103,ISM1StatusMessage,fetched
-0x0104,ISM2StatusMessage, 
-0x010C,IPMStatusMessage, 
-0x011E,IPMTempMessage, 
-0x0165,JunkersSet, 
-0x0166,JunkersSet, 
-0x0167,JunkersSet, 
-0x0168,JunkersSet, 
-0x016F,JunkersMonitor, 
-0x0170,JunkersMonitor, 
-0x0171,JunkersMonitor, 
-0x0172,JunkersMonitor, 
-0x0179,JunkersSet, 
-0x017A,JunkersSet, 
-0x017B,JunkersSet, 
-0x017C,JunkersSet, 
-0x01D3,JunkersDhw,fetched
-0x023A,RC300OutdoorTemp,fetched
-0x023E,PVSettings,fetched
-0x0240,RC300Settings,fetched
-0x0267,RC300Floordry, 
-0x0269,RC300Holiday1,fetched
-0x0291,HPMode,fetched
-0x0292,HPMode,fetched
-0x0293,HPMode,fetched
-0x0294,HPMode,fetched
-0x029B,RC300Curves, 
-0x029C,RC300Curves, 
-0x029D,RC300Curves, 
-0x029E,RC300Curves, 
-0x029F,RC300Curves, 
-0x02A0,RC300Curves, 
-0x02A1,RC300Curves, 
-0x02A2,RC300Curves, 
-0x02A5,RC300Monitor, 
-0x02A6,RC300Monitor, 
-0x02A7,RC300Monitor, 
-0x02A8,RC300Monitor, 
-0x02A9,RC300Monitor, 
-0x02AA,RC300Monitor, 
-0x02AB,RC300Monitor, 
-0x02AC,RC300Monitor, 
-0x02AF,RC300Summer, 
-0x02B0,RC300Summer, 
-0x02B1,RC300Summer, 
-0x02B2,RC300Summer, 
-0x02B3,RC300Summer, 
-0x02B4,RC300Summer, 
-0x02B5,RC300Summer, 
-0x02B6,RC300Summer, 
-0x02B9,RC300Set, 
-0x02BA,RC300Set, 
-0x02BB,RC300Set, 
-0x02BC,RC300Set, 
-0x02BD,RC300Set, 
-0x02BE,RC300Set, 
-0x02BF,RC300Set, 
-0x02C0,RC300Set, 
-0x02CC,RC300Set2, 
-0x02CD,MMPLUSConfigMessage,fetched
-0x02CE,RC300Set2, 
-0x02D0,RC300Set2, 
-0x02D2,RC300Set2, 
-0x02D5,MMPLUSConfigMessage,fetched
-0x02D6,HPPump2,fetched
-0x02D7,MMPLUSStatusMessage, 
-0x02DF,MMPLUSStatusMessage, 
-0x02F5,RC300WWmode,fetched
-0x02F6,RC300WW2mode,fetched
-0x031B,RC300WWtemp,fetched
-0x031D,RC300WWmode2, 
-0x031E,RC300WWmode2, 
-0x0358,SM100SystemConfig,fetched
-0x035A,SM100CircuitConfig,fetched
-0x035C,SM100HeatAssist,fetched
-0x035D,SM100Circuit2Config,fetched
-0x035F,SM100Config1,fetched
-0x0361,SM100Differential,fetched
-0x0362,SM100Monitor, 
-0x0363,SM100Monitor2, 
-0x0364,SM100Status, 
-0x0366,SM100Config, 
-0x036A,SM100Status2, 
-0x0380,SM100CollectorConfig,fetched
-0x038E,SM100Energy,fetched
-0x0391,SM100Time,fetched
-0x0467,HPSet, 
-0x0468,HPSet, 
-0x0469,HPSet, 
-0x046A,HPSet, 
-0x0471,RC300Summer2, 
-0x0472,RC300Summer2, 
-0x0473,RC300Summer2, 
-0x0474,RC300Summer2, 
-0x0475,RC300Summer2, 
-0x0476,RC300Summer2, 
-0x0477,RC300Summer2, 
-0x0478,RC300Summer2, 
-0x047B,HP2, 
-0x0484,HPSilentMode,fetched
-0x0485,HpCooling,fetched
-0x0486,HpInConfig,fetched
-0x0488,HPValve,fetched
-0x048A,HpPool,fetched
-0x048B,HPPumps,fetched
-0x048D,HpPower,fetched
-0x048F,HpTemperatures, 
-0x0491,HPAdditionalHeater,fetched
-0x0492,HpHeaterConfig,fetched
-0x0494,UBAEnergySupplied, 
-0x0495,UBAInformation, 
-0x0499,HPDhwSettings,fetched
-0x049C,HPSettings2,fetched
-0x049D,HPSettings3,fetched
-0x04A2,HpInput,fetched
-0x04A5,HPFan,fetched
-0x04A7,HPPowerLimit,fetched
-0x04AA,HPPower2,fetched
-0x04AE,HPEnergy,fetched
-0x04AF,HPMeters,fetched
-0x056B,VentilationMode,fetched
-0x0583,VentilationMonitor, 
-0x0585,Blowerspeed, 
-0x0587,Bypass, 
-0x05BA,HpPoolStatus,fetched
-0x05D9,Airquality, 
-0x0772,HIUSettings, 
-0x0779,HIUMonitor, 
-0x0935,EM100SetMessage,fetched
-0x0936,EM100OutMessage, 
-0x0937,EM100TempMessage, 
-0x0938,EM100InputMessage, 
-0x0939,EM100MonitorMessage, 
-0x093A,EM100ConfigMessage, 
-0x0998,HPSettings,fetched
-0x0999,HPFunctionTest,fetched
-0x099B,HPFlowTemp, 
-0x099C,HPComp, 
-0x09A0,HPTemperature, 

esp32_partition_16M.csv

@@ -1,9 +1,6 @@
 # Name,   Type, SubType, Offset,   Size,    Flags
-nvs,      data, nvs,     0x9000,   0x005000,
+nvs,      data, nvs,     0x9000,   0x5000,
-otadata,  data, ota,     ,         0x002000,
+otadata,  data, ota,     ,         0x2000,
-boot,     app,  factory, ,         0x480000,
+app0,     app,  ota_0,   ,         0x7F0000,
-app0,     app,  ota_0,   ,         0x490000,
+app1,     app,  ota_1,   ,         0x7F0000,
-app1,     app,  ota_1,   ,         0x490000,
+spiffs,   data, spiffs,  ,         64K,
-nvs1,     data, nvs,     ,         0x040000,
-spiffs,   data, spiffs,  ,         0x200000,
-coredump, data, coredump,,         0x010000,

esp32_partition_32M.csv

@@ -1,8 +0,0 @@
-# Name,   Type, SubType, Offset,   Size,    Flags
-nvs,      data, nvs,     0x9000,   0x005000,
-otadata,  data, ota,     ,         0x002000,
-app0,     app,  ota_0,   ,         0xDD0000,
-app1,     app,  ota_1,   ,         0xDD0000,
-nvs1,     data, nvs,     ,         0x040000,
-spiffs,   data, spiffs,  ,         0x400000,
-coredump, data, coredump,,         0x010000,

factory_settings.ini

@@ -25,12 +25,18 @@ build_flags =
     -D FACTORY_NTP_TIME_ZONE_FORMAT=\"CET-1CEST,M3.5.0,M10.5.0/3\"
     -D FACTORY_NTP_SERVER=\"time.google.com\"
 
+    ; OTA settings
+    -D FACTORY_OTA_PORT=8266
+    -D FACTORY_OTA_PASSWORD=\"ems-esp-neo\"
+    -D FACTORY_OTA_ENABLED=false
+
     ; MQTT settings
     -D FACTORY_MQTT_ENABLED=false
     -D FACTORY_MQTT_HOST=\"\"
     -D FACTORY_MQTT_PORT=1883
     -D FACTORY_MQTT_USERNAME=\"\"
     -D FACTORY_MQTT_PASSWORD=\"\"
+    -D FACTORY_MQTT_CLIENT_ID=\"ems-esp\"
     -D FACTORY_MQTT_KEEP_ALIVE=60
     -D FACTORY_MQTT_CLEAN_SESSION=false
     -D FACTORY_MQTT_MAX_TOPIC_LENGTH=128

interface/.eslintignore

@@ -0,0 +1,12 @@
+node_modules/
+build/
+dist/
+.yarn/
+
+.prettierrc
+.eslintrc*
+env.d.ts
+progmem-generator.js
+unpack.ts
+vite.config.ts
+package.json

interface/.eslintrc.json

@@ -0,0 +1,108 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "airbnb/hooks",
+    "airbnb-typescript",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended-requiring-type-checking",
+    "plugin:prettier/recommended",
+    "plugin:import/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module",
+    "tsconfigRootDir": ".",
+    "project": ["tsconfig.json"]
+  },
+  "plugins": ["react", "@typescript-eslint", "autofix", "react-hooks"],
+  "settings": {
+    "import/resolver": {
+      "typescript": {
+        "project": "./tsconfig.json"
+      }
+    },
+    "react": {
+      "version": "18.x"
+    }
+  },
+  "rules": {
+    "object-shorthand": "error",
+    "no-console": "warn",
+    "@typescript-eslint/consistent-type-definitions": ["off", "type"],
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/no-unsafe-call": "off",
+    "@typescript-eslint/no-unsafe-enum-comparison": "off",
+    "@typescript-eslint/no-unsafe-assignment": "off",
+    "@typescript-eslint/no-unsafe-return": "off",
+    "@typescript-eslint/no-unsafe-member-access": "off",
+    "@typescript-eslint/naming-convention": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-unsafe-argument": "off",
+    "@typescript-eslint/restrict-plus-operands": "off",
+    "@typescript-eslint/no-unused-expressions": "off",
+    "@typescript-eslint/no-implied-eval": "off",
+    "@typescript-eslint/no-misused-promises": "off",
+    "arrow-body-style": ["error", "as-needed"],
+    "react-hooks/exhaustive-deps": "warn",
+    "@typescript-eslint/consistent-type-imports": [
+      "error",
+      {
+        "prefer": "type-imports"
+      }
+    ],
+    "import/order": [
+      "warn",
+      {
+        "groups": ["builtin", "external", "parent", "sibling", "index", "object", "type"],
+        "pathGroups": [
+          {
+            "pattern": "@/**/**",
+            "group": "parent",
+            "position": "before"
+          }
+        ],
+        "alphabetize": { "order": "asc" }
+      }
+    ],
+    // "autofix/no-unused-vars": [
+    //   "error",
+    //   {
+    //     "argsIgnorePattern": "^_",
+    //     "ignoreRestSiblings": true,
+    //     "destructuredArrayIgnorePattern": "^_"
+    //   }
+    // ],
+    "react/self-closing-comp": [
+      "error",
+      {
+        "component": true,
+        "html": true
+      }
+    ],
+    "@typescript-eslint/ban-types": [
+      "error",
+      {
+        "extendDefaults": true,
+        "types": {
+          "{}": false
+        }
+      }
+    ],
+    "prettier/prettier": [
+      "error",
+      {
+        "endOfLine": "auto"
+      }
+    ]
+  }
+}

interface/.gitattributes

@@ -1,4 +0,0 @@
-/.yarn/**            linguist-vendored
-/.yarn/releases/*    binary
-/.yarn/plugins/**/*  binary
-/.pnp.*              binary linguist-generated

interface/.gitignore

@@ -0,0 +1,7 @@
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

interface/.prettierignore

@@ -1,8 +1,6 @@
 node_modules/
 build/
 dist/
-src/i18n/*
-
 .prettierrc
 .yarn/
 .typesafe-i18n.json

interface/.yarnrc.yml

@@ -1 +1,7 @@
+compressionLevel: mixed
+
+enableGlobalCache: false
+
 nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.0.2.cjs

interface/eslint.config.js

@@ -1,44 +0,0 @@
-// @ts-check
-import eslint from '@eslint/js';
-import prettierConfig from 'eslint-config-prettier';
-import tseslint from 'typescript-eslint';
-
-export default tseslint.config(
-  eslint.configs.recommended,
-  ...tseslint.configs.recommendedTypeChecked,
-  prettierConfig,
-  {
-    languageOptions: {
-      parserOptions: {
-        project: true,
-        tsconfigRootDir: import.meta.dirname
-      }
-    }
-  },
-  {
-    ignores: [
-      'dist/*',
-      '*.mjs',
-      'build/*',
-      '*.js',
-      '**/*.cjs',
-      '**/unpack.ts',
-      'i18n*.*'
-    ]
-  },
-  {
-    rules: {
-      '@typescript-eslint/no-unsafe-enum-comparison': 'off',
-      '@typescript-eslint/no-unused-expressions': 'off',
-      '@typescript-eslint/no-unsafe-assignment': 'off',
-      '@typescript-eslint/no-unsafe-member-access': 'off',
-      '@typescript-eslint/no-unsafe-call': 'off',
-      '@typescript-eslint/no-misused-promises': [
-        'error',
-        {
-          checksVoidReturn: false
-        }
-      ]
-    }
-  }
-);

interface/package.json

@@ -1,67 +1,78 @@
 {
   "name": "EMS-ESP",
-  "version": "3.7.0",
+  "version": "3.6.5",
-  "description": "EMS-ESP WebUI",
+  "description": "build EMS-ESP WebUI",
-  "homepage": "https://emsesp.org",
+  "homepage": "https://emsesp.github.io/docs",
-  "author": "proddy, emsesp.org",
+  "author": "proddy",
   "license": "MIT",
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite dev",
     "build": "vite build",
     "preview": "vite preview",
     "build-hosted": "typesafe-i18n --no-watch && vite build --mode hosted",
-    "preview-standalone": "typesafe-i18n --no-watch && vite build && concurrently -c \"auto\" \"npm:mock-rest\" \"vite preview\"",
+    "preview-standalone": "typesafe-i18n --no-watch && vite build && concurrently -c \"auto\" \"npm:mock-api\" \"vite preview\"",
-    "mock-rest": "bun --watch ../mock-api/rest_server.ts",
+    "mock-api": "bun --watch ../mock-api/server.ts",
-    "standalone": "concurrently -c \"auto\" \"typesafe-i18n\" \"npm:mock-rest\" \"vite\"",
+    "standalone": "concurrently -c \"auto\" \"typesafe-i18n\" \"npm:mock-api\" \"vite\"",
     "typesafe-i18n": "typesafe-i18n --no-watch",
     "webUI": "node progmem-generator.js",
-    "format": "prettier -l -w '**/*.{ts,tsx,js,css,json,md}'",
+    "format": "prettier --write '**/*.{ts,tsx,js,css,json,md}'",
-    "lint": "eslint . --fix"
+    "lint": "eslint . --cache --fix"
   },
   "dependencies": {
-    "@alova/adapter-xhr": "2.0.9",
+    "@alova/adapter-xhr": "^1.0.2",
-    "@emotion/react": "^11.13.3",
+    "@babel/core": "^7.23.7",
-    "@emotion/styled": "^11.13.0",
+    "@emotion/react": "^11.11.3",
-    "@mui/icons-material": "^6.1.5",
+    "@emotion/styled": "^11.11.0",
-    "@mui/material": "^6.1.5",
+    "@mui/icons-material": "^5.15.2",
+    "@mui/material": "^5.15.2",
     "@table-library/react-table-library": "4.1.7",
-    "alova": "3.1.1",
+    "@types/imagemin": "^8.0.5",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^20.10.6",
+    "@types/react": "^18.2.46",
+    "@types/react-dom": "^18.2.18",
+    "@types/react-router-dom": "^5.3.3",
+    "alova": "^2.16.2",
     "async-validator": "^4.2.5",
+    "history": "^5.3.0",
     "jwt-decode": "^4.0.0",
+    "lodash-es": "^4.17.21",
     "mime-types": "^2.1.35",
-    "preact": "^10.24.3",
+    "react": "latest",
-    "react": "^18.3.1",
+    "react-dom": "latest",
-    "react-dom": "^18.3.1",
+    "react-dropzone": "^14.2.3",
-    "react-icons": "^5.3.0",
+    "react-icons": "^4.12.0",
-    "react-router-dom": "^6.27.0",
+    "react-router-dom": "^6.21.1",
-    "react-toastify": "^10.0.6",
+    "react-toastify": "^9.1.3",
+    "sockette": "^2.0.6",
     "typesafe-i18n": "^5.26.2",
-    "typescript": "^5.6.3"
+    "typescript": "^5.3.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.26.0",
+    "@preact/compat": "^17.1.2",
-    "@eslint/js": "^9.13.0",
+    "@preact/preset-vite": "^2.7.0",
-    "@preact/compat": "^18.3.1",
+    "@typescript-eslint/eslint-plugin": "^6.17.0",
-    "@preact/preset-vite": "^2.9.1",
+    "@typescript-eslint/parser": "^6.17.0",
-    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "concurrently": "^8.2.2",
-    "@types/formidable": "^3",
+    "eslint": "^8.56.0",
-    "@types/node": "^22.8.1",
+    "eslint-config-airbnb": "^19.0.4",
-    "@types/react": "^18.3.12",
+    "eslint-config-airbnb-typescript": "^17.1.0",
-    "@types/react-dom": "^18.3.1",
-    "@types/react-router-dom": "^5.3.3",
-    "concurrently": "^9.0.1",
-    "eslint": "^9.13.0",
     "eslint-config-prettier": "^9.1.0",
-    "formidable": "^3.5.2",
+    "eslint-import-resolver-typescript": "^3.6.1",
-    "prettier": "^3.3.3",
+    "eslint-plugin-autofix": "^1.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-prettier": "alpha",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "preact": "^10.19.3",
+    "prettier": "^3.1.1",
     "rollup-plugin-visualizer": "^5.12.0",
-    "terser": "^5.36.0",
+    "terser": "^5.26.0",
-    "typescript-eslint": "8.11.0",
+    "vite": "^5.0.10",
-    "vite": "^5.4.10",
     "vite-plugin-imagemin": "^0.6.1",
-    "vite-tsconfig-paths": "^5.0.1"
+    "vite-tsconfig-paths": "^4.2.3"
   },
-  "packageManager": "yarn@4.5.1"
+  "packageManager": "yarn@4.0.2"
 }

interface/progmem-generator.js

@@ -1,14 +1,7 @@
-import crypto from 'crypto';
+import { readdirSync, existsSync, unlinkSync, readFileSync, createWriteStream } from 'fs';
-import {
+import { resolve, relative, sep } from 'path';
-  createWriteStream,
-  existsSync,
-  readFileSync,
-  readdirSync,
-  unlinkSync
-} from 'fs';
-import mime from 'mime-types';
-import { relative, resolve, sep } from 'path';
 import zlib from 'zlib';
+import mime from 'mime-types';
 
 const ARDUINO_INCLUDES = '#include <Arduino.h>\n\n';
 const INDENT = '  ';
@@ -18,13 +11,15 @@ const bytesPerLine = 20;
 var totalSize = 0;
 
 const generateWWWClass = () =>
-  `typedef std::function<void(const char * uri, const String & contentType, const uint8_t * content, size_t len, const String & hash)> RouteRegistrationHandler;
+  `typedef std::function<void(const String &, const String & contentType, const uint8_t * content, size_t len)> RouteRegistrationHandler;
 // Total size is ${totalSize} bytes
 
 class WWWData {
 ${indent}public:
 ${indent.repeat(2)}static void registerRoutes(RouteRegistrationHandler handler) {
-${fileInfo.map((file) => `${indent.repeat(3)}handler("${file.uri}", "${file.mimeType}", ${file.variable}, ${file.size}, "${file.hash}");`).join('\n')}
+${fileInfo
+  .map((file) => `${indent.repeat(3)}handler("${file.uri}", "${file.mimeType}", ${file.variable}, ${file.size});`)
+  .join('\n')}
 ${indent.repeat(2)}}
 };
 `;
@@ -55,12 +50,6 @@ const writeFile = (relativeFilePath, buffer) => {
   writeStream.write('const uint8_t ' + variable + '[] = {');
   // const zipBuffer = zlib.brotliCompressSync(buffer, { quality: 1 });
   const zipBuffer = zlib.gzipSync(buffer, { level: 9 });
-
-  // create sha
-  const hashSum = crypto.createHash('sha256');
-  hashSum.update(zipBuffer);
-  const hash = hashSum.digest('hex');
-
   zipBuffer.forEach((b) => {
     if (!(size % bytesPerLine)) {
       writeStream.write('\n');
@@ -69,19 +58,15 @@ const writeFile = (relativeFilePath, buffer) => {
     writeStream.write('0x' + ('00' + b.toString(16).toUpperCase()).slice(-2) + ',');
     size++;
   });
-
   if (size % bytesPerLine) {
     writeStream.write('\n');
   }
-
   writeStream.write('};\n\n');
-
   fileInfo.push({
     uri: '/' + relativeFilePath.replace(sep, '/'),
     mimeType,
     variable,
-    size,
+    size
-    hash
   });
 
   // console.log(relativeFilePath + ' (size ' + size + ' bytes)');

interface/public/css/roboto.css

@@ -1,6 +1,5 @@
 /*
-* Uses font-weight 400 (normal) only, no bold, and Latin with a few extra unicode chars.
+* Uses font-size 400 (normal) only and Latin (plus extra unicode chars) to keep flash memory to a minimum
-* This is to keep flash memory to a minimum
 * View fonts on https://fonts.google.com/
 * Download woff2 using e.g. https://fonts.googleapis.com/css2?family=Lato or https://fonts.googleapis.com/css2?family=Roboto
 */
@@ -13,8 +12,7 @@
     local('Roboto'),
     local('Roboto-Regular'),
     url(../fonts/re.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0104-0107, U+0118-0119, U+011E-011F, U+0130-0131,
+  unicode-range: U+0000-00FF, U+0104-0107, U+0118-0119, U+011E-011F, U+0130-0131, U+0141-0144, U+0152-0153, U+015A-015B,
-    U+0141-0144, U+0152-0153, U+015A-015B, U+015E-015F, U+0179-017C, U+02BB-02BC,
+    U+015E-015F, U+0179-017C, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
-    U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
     U+2212, U+2215, U+FEFF, U+FFFD;
 }

interface/src/App.tsx

@@ -1,17 +1,21 @@
 import { useEffect, useState } from 'react';
-import { Slide, ToastContainer } from 'react-toastify';
+import { ToastContainer, Slide } from 'react-toastify';
+
 import 'react-toastify/dist/ReactToastify.min.css';
 
+import { localStorageDetector } from 'typesafe-i18n/detectors';
+import { FeaturesLoader } from './contexts/features';
+import type { FC } from 'react';
 import AppRouting from 'AppRouting';
 import CustomTheme from 'CustomTheme';
+
 import TypesafeI18n from 'i18n/i18n-react';
 import { detectLocale } from 'i18n/i18n-util';
 import { loadLocaleAsync } from 'i18n/i18n-util.async';
-import { localStorageDetector } from 'typesafe-i18n/detectors';
 
 const detectedLocale = detectLocale(localStorageDetector);
 
-const App = () => {
+const App: FC = () => {
   const [wasLoaded, setWasLoaded] = useState(false);
 
   useEffect(() => {
@@ -23,7 +27,9 @@ const App = () => {
   return (
     <TypesafeI18n locale={detectedLocale}>
       <CustomTheme>
+        <FeaturesLoader>
           <AppRouting />
+        </FeaturesLoader>
         <ToastContainer
           position="bottom-left"
           autoClose={3000}

interface/src/AppRouting.tsx

@@ -1,10 +1,14 @@
 import { useContext, useEffect } from 'react';
-import { Navigate, Route, Routes } from 'react-router-dom';
+
+import { Route, Routes, Navigate, useLocation } from 'react-router-dom';
+
 import { toast } from 'react-toastify';
+import type { FC } from 'react';
 
 import AuthenticatedRouting from 'AuthenticatedRouting';
 import SignIn from 'SignIn';
 import { RequireAuthenticated, RequireUnauthenticated } from 'components';
+
 import { Authentication, AuthenticationContext } from 'contexts/authentication';
 import { useI18nContext } from 'i18n/i18n-react';
 
@@ -13,7 +17,7 @@ interface SecurityRedirectProps {
   signOut?: boolean;
 }
 
-const RootRedirect = ({ message, signOut }: SecurityRedirectProps) => {
+const RootRedirect: FC<SecurityRedirectProps> = ({ message, signOut }) => {
   const authenticationContext = useContext(AuthenticationContext);
   useEffect(() => {
     signOut && authenticationContext.signOut(false);
@@ -22,20 +26,29 @@ const RootRedirect = ({ message, signOut }: SecurityRedirectProps) => {
   return <Navigate to="/" />;
 };
 
-const AppRouting = () => {
+export const RemoveTrailingSlashes = () => {
+  const location = useLocation();
+  return (
+    location.pathname.match('/.*/$') && (
+      <Navigate
+        to={{
+          pathname: location.pathname.replace(/\/+$/, ''),
+          search: location.search
+        }}
+      />
+    )
+  );
+};
+
+const AppRouting: FC = () => {
   const { LL } = useI18nContext();
 
   return (
     <Authentication>
+      <RemoveTrailingSlashes />
       <Routes>
-        <Route
+        <Route path="/unauthorized" element={<RootRedirect message={LL.PLEASE_SIGNIN()} signOut />} />
-          path="/unauthorized"
+        <Route path="/fileUpdated" element={<RootRedirect message={LL.UPLOAD_SUCCESSFUL()} />} />
-          element={<RootRedirect message={LL.PLEASE_SIGNIN()} signOut />}
-        />
-        <Route
-          path="/fileUpdated"
-          element={<RootRedirect message={LL.UPLOAD_SUCCESSFUL()} />}
-        />
         <Route
           path="/"
           element={

interface/src/AuthenticatedRouting.tsx

@@ -1,76 +1,64 @@
-import { useContext } from 'react';
+import { Navigate, Routes, Route } from 'react-router-dom';
-import { Navigate, Route, Routes } from 'react-router-dom';
+import Dashboard from './project/Dashboard';
+import Help from './project/Help';
+import Settings from './project/Settings';
+import type { FC } from 'react';
 
-import CustomEntities from 'app/main/CustomEntities';
+import { Layout, RequireAdmin } from 'components';
-import Customizations from 'app/main/Customizations';
+import AccessPoint from 'framework/ap/AccessPoint';
-import Dashboard from 'app/main/Dashboard';
+import Mqtt from 'framework/mqtt/Mqtt';
-import Devices from 'app/main/Devices';
+import NetworkConnection from 'framework/network/NetworkConnection';
-import Help from 'app/main/Help';
+import NetworkTime from 'framework/ntp/NetworkTime';
-import Modules from 'app/main/Modules';
+import Security from 'framework/security/Security';
-import Scheduler from 'app/main/Scheduler';
+import System from 'framework/system/System';
-import Sensors from 'app/main/Sensors';
+
-import APSettings from 'app/settings/APSettings';
+const AuthenticatedRouting: FC = () => (
-import ApplicationSettings from 'app/settings/ApplicationSettings';
+  // const location = useLocation();
-import DownloadUpload from 'app/settings/DownloadUpload';
+  // const navigate = useNavigate();
-import MqttSettings from 'app/settings/MqttSettings';
+  // const handleApiResponseError = useCallback(
-import NTPSettings from 'app/settings/NTPSettings';
+  //   (error: AxiosError) => {
-import Settings from 'app/settings/Settings';
+  //     if (error.response && error.response.status === 401) {
-import Version from 'app/settings/Version';
+  //       AuthenticationApi.storeLoginRedirect(location);
-import Network from 'app/settings/network/Network';
+  //       navigate('/unauthorized');
-import Security from 'app/settings/security/Security';
+  //     }
-import APStatus from 'app/status/APStatus';
+  //     return Promise.reject(error);
-import Activity from 'app/status/Activity';
+  //   },
-import HardwareStatus from 'app/status/HardwareStatus';
+  //   [location, navigate]
-import MqttStatus from 'app/status/MqttStatus';
+  // );
-import NTPStatus from 'app/status/NTPStatus';
+  // useEffect(() => {
-import NetworkStatus from 'app/status/NetworkStatus';
+  //   const axiosHandlerId = AXIOS.interceptors.response.use((response) => response, handleApiResponseError);
-import Status from 'app/status/Status';
+  //   return () => AXIOS.interceptors.response.eject(axiosHandlerId);
-import SystemLog from 'app/status/SystemLog';
+  // }, [handleApiResponseError]);
-import { Layout } from 'components';
-import { AuthenticatedContext } from 'contexts/authentication';
 
-const AuthenticatedRouting = () => {
-  const { me } = useContext(AuthenticatedContext);
-  return (
   <Layout>
     <Routes>
       <Route path="/dashboard/*" element={<Dashboard />} />
-        <Route path="/devices/*" element={<Devices />} />
+      <Route
-        <Route path="/sensors/*" element={<Sensors />} />
+        path="/settings/*"
-        <Route path="/status/*" element={<Status />} />
+        element={
+          <RequireAdmin>
+            <Settings />
+          </RequireAdmin>
+        }
+      />
       <Route path="/help/*" element={<Help />} />
+
+      <Route path="/network/*" element={<NetworkConnection />} />
+      <Route path="/ap/*" element={<AccessPoint />} />
+      <Route path="/ntp/*" element={<NetworkTime />} />
+      <Route path="/mqtt/*" element={<Mqtt />} />
+      <Route
+        path="/security/*"
+        element={
+          <RequireAdmin>
+            <Security />
+          </RequireAdmin>
+        }
+      />
+      <Route path="/system/*" element={<System />} />
       <Route path="/*" element={<Navigate to="/" />} />
-
-        <Route path="/status/hardwarestatus/*" element={<HardwareStatus />} />
-        <Route path="/status/activity" element={<Activity />} />
-        <Route path="/status/log" element={<SystemLog />} />
-        <Route path="/status/mqtt" element={<MqttStatus />} />
-        <Route path="/status/ntp" element={<NTPStatus />} />
-        <Route path="/status/ap" element={<APStatus />} />
-        <Route path="/status/network" element={<NetworkStatus />} />
-
-        {me.admin && (
-          <>
-            <Route path="/settings" element={<Settings />} />
-            <Route path="/settings/version" element={<Version />} />
-            <Route path="/settings/application" element={<ApplicationSettings />} />
-            <Route path="/settings/mqtt" element={<MqttSettings />} />
-            <Route path="/settings/ntp" element={<NTPSettings />} />
-            <Route path="/settings/ap" element={<APSettings />} />
-            <Route path="/settings/modules" element={<Modules />} />
-            <Route path="/settings/upload" element={<DownloadUpload />} />
-
-            <Route path="/settings/network/*" element={<Network />} />
-            <Route path="/settings/security/*" element={<Security />} />
-
-            <Route path="/customizations" element={<Customizations />} />
-            <Route path="/scheduler" element={<Scheduler />} />
-            <Route path="/customentities" element={<CustomEntities />} />
-          </>
-        )}
     </Routes>
   </Layout>
-  );
+);
-};
 
 export default AuthenticatedRouting;

interface/src/CustomTheme.tsx

@@ -1,11 +1,6 @@
-import type { FC } from 'react';
-
 import { CssBaseline } from '@mui/material';
-import {
+import { createTheme, responsiveFontSizes, ThemeProvider } from '@mui/material/styles';
-  ThemeProvider,
+import type { FC } from 'react';
-  createTheme,
-  responsiveFontSizes
-} from '@mui/material/styles';
 
 import type { RequiredChildrenProps } from 'utils';
 
@@ -15,7 +10,8 @@ export const dialogStyle = {
     borderColor: '#565656',
     borderStyle: 'solid',
     borderWidth: '1px'
-  }
+  },
+  backdropFilter: 'blur(1px)'
 };
 
 const theme = responsiveFontSizes(

interface/src/SignIn.tsx

@@ -1,28 +1,41 @@
+import ForwardIcon from '@mui/icons-material/Forward';
+import { Box, Paper, Typography, MenuItem, TextField, Button } from '@mui/material';
+import { useRequest } from 'alova';
 import { useContext, useState } from 'react';
 import { toast } from 'react-toastify';
-
+import { FeaturesContext } from './contexts/features';
-import ForwardIcon from '@mui/icons-material/Forward';
-import { Box, Button, Paper, Typography } from '@mui/material';
-
-import * as AuthenticationApi from 'components/routing/authentication';
-import { useRequest } from 'alova/client';
 import type { ValidateFieldsError } from 'async-validator';
-import {
+
-  LanguageSelector,
+import type { Locales } from 'i18n/i18n-types';
-  ValidatedPasswordField,
+import type { ChangeEventHandler, FC } from 'react';
-  ValidatedTextField
-} from 'components';
-import { AuthenticationContext } from 'contexts/authentication';
-import { PROJECT_NAME } from 'env';
-import { useI18nContext } from 'i18n/i18n-react';
 import type { SignInRequest } from 'types';
+import * as AuthenticationApi from 'api/authentication';
+import { PROJECT_NAME } from 'api/env';
+
+import { ValidatedPasswordField, ValidatedTextField } from 'components';
+import { AuthenticationContext } from 'contexts/authentication';
+
+import DEflag from 'i18n/DE.svg';
+import FRflag from 'i18n/FR.svg';
+import GBflag from 'i18n/GB.svg';
+import ITflag from 'i18n/IT.svg';
+import NLflag from 'i18n/NL.svg';
+import NOflag from 'i18n/NO.svg';
+import PLflag from 'i18n/PL.svg';
+import SKflag from 'i18n/SK.svg';
+import SVflag from 'i18n/SV.svg';
+import TRflag from 'i18n/TR.svg';
+import { I18nContext } from 'i18n/i18n-react';
+import { loadLocaleAsync } from 'i18n/i18n-util.async';
 import { onEnterCallback, updateValue } from 'utils';
 import { SIGN_IN_REQUEST_VALIDATOR, validate } from 'validators';
 
-const SignIn = () => {
+const SignIn: FC = () => {
   const authenticationContext = useContext(AuthenticationContext);
 
-  const { LL } = useI18nContext();
+  const { LL, setLocale, locale } = useContext(I18nContext);
+
+  const { features } = useContext(FeaturesContext);
 
   const [signInRequest, setSignInRequest] = useState<SignInRequest>({
     username: '',
@@ -31,12 +44,11 @@ const SignIn = () => {
   const [processing, setProcessing] = useState<boolean>(false);
   const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
 
-  const { send: callSignIn } = useRequest(
+  const { send: callSignIn, onSuccess } = useRequest((request: SignInRequest) => AuthenticationApi.signIn(request), {
-    (request: SignInRequest) => AuthenticationApi.signIn(request),
-    {
     immediate: false
-    }
+  });
-  ).onSuccess((response) => {
+
+  onSuccess((response) => {
     if (response.data) {
       authenticationContext.signIn(response.data.access_token);
     }
@@ -45,7 +57,7 @@ const SignIn = () => {
   const updateLoginRequestValue = updateValue(setSignInRequest);
 
   const signIn = async () => {
-    await callSignIn(signInRequest).catch((event: Error) => {
+    await callSignIn(signInRequest).catch((event) => {
       if (event.message === 'Unauthorized') {
         toast.warning(LL.INVALID_LOGIN());
       } else {
@@ -63,14 +75,21 @@ const SignIn = () => {
     try {
       await validate(SIGN_IN_REQUEST_VALIDATOR, signInRequest);
       await signIn();
-    } catch (error) {
+    } catch (errors: any) {
-      setFieldErrors(error as ValidateFieldsError);
+      setFieldErrors(errors);
       setProcessing(false);
     }
   };
 
   const submitOnEnter = onEnterCallback(signIn);
 
+  const onLocaleSelected: ChangeEventHandler<HTMLInputElement> = async ({ target }) => {
+    const loc = target.value as Locales;
+    localStorage.setItem('lang', loc);
+    await loadLocaleAsync(loc);
+    setLocale(loc);
+  };
+
   return (
     <Box
       display="flex"
@@ -93,8 +112,50 @@ const SignIn = () => {
         })}
       >
         <Typography variant="h4">{PROJECT_NAME}</Typography>
+        <Typography variant="subtitle2">{features.version}</Typography>
 
-        <LanguageSelector />
+        <TextField name="locale" variant="outlined" value={locale} onChange={onLocaleSelected} size="small" select>
+          <MenuItem key="de" value="de">
+            <img src={DEflag} style={{ width: 16, verticalAlign: 'middle' }} />
+            &nbsp;DE
+          </MenuItem>
+          <MenuItem key="en" value="en">
+            <img src={GBflag} style={{ width: 16, verticalAlign: 'middle' }} />
+            &nbsp;EN
+          </MenuItem>
+          <MenuItem key="fr" value="fr">
+            <img src={FRflag} style={{ width: 16, verticalAlign: 'middle' }} />
+            &nbsp;FR
+          </MenuItem>
+          <MenuItem key="it" value="it">
+            <img src={ITflag} style={{ width: 16, verticalAlign: 'middle' }} />
+            &nbsp;IT
+          </MenuItem>
+          <MenuItem key="nl" value="nl">
+            <img src={NLflag} style={{ width: 16, verticalAlign: 'middle' }} />
+            &nbsp;NL
+          </MenuItem>
+          <MenuItem key="no" value="no">
+            <img src={NOflag} style={{ width: 16, verticalAlign: 'middle' }} />
+            &nbsp;NO
+          </MenuItem>
+          <MenuItem key="pl" value="pl">
+            <img src={PLflag} style={{ width: 16, verticalAlign: 'middle' }} />
+            &nbsp;PL
+          </MenuItem>
+          <MenuItem key="sk" value="sk">
+            <img src={SKflag} style={{ width: 16, verticalAlign: 'middle' }} />
+            &nbsp;SK
+          </MenuItem>
+          <MenuItem key="sv" value="sv">
+            <img src={SVflag} style={{ width: 16, verticalAlign: 'middle' }} />
+            &nbsp;SV
+          </MenuItem>
+          <MenuItem key="tr" value="tr">
+            <img src={TRflag} style={{ width: 16, verticalAlign: 'middle' }} />
+            &nbsp;TR
+          </MenuItem>
+        </TextField>
 
         <Box display="flex" flexDirection="column" alignItems="center">
           <ValidatedTextField
@@ -109,12 +170,6 @@ const SignIn = () => {
             onChange={updateLoginRequestValue}
             margin="normal"
             variant="outlined"
-            slotProps={{
-              input: {
-                autoCapitalize: 'none',
-                autoCorrect: 'off'
-              }
-            }}
           />
           <ValidatedPasswordField
             fieldErrors={fieldErrors}
@@ -131,13 +186,7 @@ const SignIn = () => {
           />
         </Box>
 
-        <Button
+        <Button variant="contained" color="primary" sx={{ mt: 2 }} onClick={validateAndSignIn} disabled={processing}>
-          variant="contained"
-          color="primary"
-          sx={{ mt: 2 }}
-          onClick={validateAndSignIn}
-          disabled={processing}
-        >
           <ForwardIcon sx={{ mr: 1 }} />
           {LL.SIGN_IN()}
         </Button>

interface/src/api/ap.ts

@@ -1,9 +1,7 @@
-import type { APSettingsType, APStatusType } from 'types';
-
 import { alovaInstance } from './endpoints';
 
-export const readAPStatus = () => alovaInstance.Get<APStatusType>('/rest/apStatus');
+import type { APSettings, APStatus } from 'types';
-export const readAPSettings = () =>
+
-  alovaInstance.Get<APSettingsType>('/rest/apSettings');
+export const readAPStatus = () => alovaInstance.Get<APStatus>('/rest/apStatus');
-export const updateAPSettings = (data: APSettingsType) =>
+export const readAPSettings = () => alovaInstance.Get<APSettings>('/rest/apSettings');
-  alovaInstance.Post<APSettingsType>('/rest/apSettings', data);
+export const updateAPSettings = (data: APSettings) => alovaInstance.Post<APSettings>('/rest/apSettings', data);

interface/src/api/app.ts

@@ -1,151 +0,0 @@
-import { alovaInstance } from 'api/endpoints';
-
-import type {
-  APIcall,
-  Action,
-  Activity,
-  CoreData,
-  DashboardItem,
-  DeviceData,
-  DeviceEntity,
-  Entities,
-  EntityItem,
-  ModuleItem,
-  Modules,
-  Schedule,
-  ScheduleItem,
-  SensorData,
-  Settings,
-  WriteAnalogSensor,
-  WriteTemperatureSensor
-} from '../app/main/types';
-
-// Dashboard
-export const readDashboard = () =>
-  alovaInstance.Get<DashboardItem[]>('/rest/dashboardData', {
-    responseType: 'arraybuffer' // uses msgpack
-  });
-
-// Devices
-export const readCoreData = () => alovaInstance.Get<CoreData>(`/rest/coreData`);
-export const readDeviceData = (id: number) =>
-  alovaInstance.Get<DeviceData>('/rest/deviceData', {
-    // alovaInstance.Get<DeviceData>(`/rest/deviceData/${id}`, {
-    params: { id },
-    responseType: 'arraybuffer' // uses msgpack
-  });
-export const writeDeviceValue = (data: { id: number; c: string; v: unknown }) =>
-  alovaInstance.Post('/rest/writeDeviceValue', data);
-
-// Application Settings
-export const readSettings = () => alovaInstance.Get<Settings>('/rest/settings');
-export const writeSettings = (data: Settings) =>
-  alovaInstance.Post('/rest/settings', data);
-export const getBoardProfile = (boardProfile: string) =>
-  alovaInstance.Get('/rest/boardProfile', {
-    params: { boardProfile }
-  });
-
-// Sensors
-export const readSensorData = () =>
-  alovaInstance.Get<SensorData>('/rest/sensorData');
-export const writeTemperatureSensor = (ts: WriteTemperatureSensor) =>
-  alovaInstance.Post('/rest/writeTemperatureSensor', ts);
-export const writeAnalogSensor = (as: WriteAnalogSensor) =>
-  alovaInstance.Post('/rest/writeAnalogSensor', as);
-
-// Activity
-export const readActivity = () => alovaInstance.Get<Activity>('/rest/activity');
-
-// API
-export const API = (apiCall: APIcall) => alovaInstance.Post('/api', apiCall);
-
-// Generic action
-export const callAction = (action: Action) =>
-  alovaInstance.Post('/rest/action', action);
-
-// SettingsCustomization
-export const readDeviceEntities = (id: number) =>
-  // alovaInstance.Get<DeviceEntity[]>(`/rest/deviceEntities/${id}`, {
-  alovaInstance.Get<DeviceEntity[]>(`/rest/deviceEntities`, {
-    params: { id },
-    responseType: 'arraybuffer',
-    transform(data) {
-      return (data as DeviceEntity[]).map((de: DeviceEntity) => ({
-        ...de,
-        o_m: de.m,
-        o_cn: de.cn,
-        o_mi: de.mi,
-        o_ma: de.ma
-      }));
-    }
-  });
-export const resetCustomizations = () =>
-  alovaInstance.Post('/rest/resetCustomizations');
-export const writeCustomizationEntities = (data: {
-  id: number;
-  entity_ids: string[];
-}) => alovaInstance.Post('/rest/customizationEntities', data);
-export const writeDeviceName = (data: { id: number; name: string }) =>
-  alovaInstance.Post('/rest/writeDeviceName', data);
-
-// SettingsScheduler
-export const readSchedule = () =>
-  alovaInstance.Get<ScheduleItem[]>('/rest/schedule', {
-    transform(data) {
-      return (data as Schedule).schedule.map((si: ScheduleItem) => ({
-        ...si,
-        o_id: si.id,
-        o_active: si.active,
-        o_deleted: si.deleted,
-        o_flags: si.flags,
-        o_time: si.time,
-        o_cmd: si.cmd,
-        o_value: si.value,
-        o_name: si.name
-      }));
-    }
-  });
-export const writeSchedule = (data: Schedule) =>
-  alovaInstance.Post('/rest/schedule', data);
-
-// Modules
-export const readModules = () =>
-  alovaInstance.Get<ModuleItem[]>('/rest/modules', {
-    transform(data) {
-      return (data as Modules).modules.map((mi: ModuleItem) => ({
-        ...mi,
-        o_enabled: mi.enabled,
-        o_license: mi.license
-      }));
-    }
-  });
-export const writeModules = (data: {
-  key: string;
-  enabled: boolean;
-  license: string;
-}) => alovaInstance.Post('/rest/modules', data);
-
-// CustomEntities
-export const readCustomEntities = () =>
-  alovaInstance.Get<EntityItem[]>('/rest/customEntities', {
-    transform(data) {
-      return (data as Entities).entities.map((ei: EntityItem) => ({
-        ...ei,
-        o_id: ei.id,
-        o_ram: ei.ram,
-        o_device_id: ei.device_id,
-        o_type_id: ei.type_id,
-        o_offset: ei.offset,
-        o_factor: ei.factor,
-        o_uom: ei.uom,
-        o_value_type: ei.value_type,
-        o_name: ei.name,
-        o_writeable: ei.writeable,
-        o_value: ei.value,
-        o_deleted: ei.deleted
-      }));
-    }
-  });
-export const writeCustomEntities = (data: Entities) =>
-  alovaInstance.Post('/rest/customEntities', data);

interface/src/api/authentication.ts

@@ -1,18 +1,15 @@
+import { jwtDecode } from 'jwt-decode';
+import { ACCESS_TOKEN, alovaInstance } from './endpoints';
+import type * as H from 'history';
 import type { Path } from 'react-router-dom';
 
-import type * as H from 'history';
-import { jwtDecode } from 'jwt-decode';
 import type { Me, SignInRequest, SignInResponse } from 'types';
 
-import { ACCESS_TOKEN, alovaInstance } from '../../api/endpoints';
-
 export const SIGN_IN_PATHNAME = 'loginPathname';
 export const SIGN_IN_SEARCH = 'loginSearch';
 
-export const verifyAuthorization = () =>
+export const verifyAuthorization = () => alovaInstance.Get('/rest/verifyAuthorization');
-  alovaInstance.Get('/rest/verifyAuthorization');
+export const signIn = (request: SignInRequest) => alovaInstance.Post<SignInResponse>('/rest/signIn', request);
-export const signIn = (request: SignInRequest) =>
-  alovaInstance.Post<SignInResponse>('/rest/signIn', request);
 
 export function getStorage() {
   return localStorage || sessionStorage;

interface/src/api/endpoints.ts

@@ -1,36 +1,33 @@
-import { type AlovaXHRResponse, xhrRequestAdapter } from '@alova/adapter-xhr';
+import { xhrRequestAdapter } from '@alova/adapter-xhr';
 import { createAlova } from 'alova';
 import ReactHook from 'alova/react';
-
+import { unpack } from '../api/unpack';
-import { unpack } from './unpack';
 
 export const ACCESS_TOKEN = 'access_token';
 
+const host = window.location.host;
+export const WEB_SOCKET_ROOT = 'ws://' + host + '/ws/';
+export const EVENT_SOURCE_ROOT = 'http://' + host + '/es/';
+
 export const alovaInstance = createAlova({
   statesHook: ReactHook,
-  // timeout: 3000, // 3 seconds before throwing a timeout error, default is 0 = none
+  timeout: 3000, // 3 seconds but throwing a timeout error
-  cacheFor: null, // disable cache
+  localCache: null,
-  // cacheFor: {
+  // localCache: {
   //   GET: {
-  //     mode: 'memory',
+  //     mode: 'placeholder', // see https://alova.js.org/learning/response-cache/#cache-replaceholder-mode
-  //     expire: 60 * 10 * 1000 // 60 seconds in cache
+  //     expire: 2000
   //   }
   // },
   requestAdapter: xhrRequestAdapter(),
   beforeRequest(method) {
     if (localStorage.getItem(ACCESS_TOKEN)) {
-      method.config.headers.Authorization =
+      method.config.headers.Authorization = 'Bearer ' + localStorage.getItem(ACCESS_TOKEN);
-        'Bearer ' + localStorage.getItem(ACCESS_TOKEN);
     }
-    // for simulating vrey slow networks
-    // return new Promise((resolve) => {
-    //   const random = 3000 + Math.random() * 2000;
-    //   setTimeout(resolve, Math.floor(random));
-    // });
   },
 
   responded: {
-    onSuccess: async (response: AlovaXHRResponse) => {
+    onSuccess: async (response) => {
       // if (response.status === 202) {
       //   throw new Error('Wait'); // wifi scan in progress
       // } else
@@ -41,9 +38,9 @@ export const alovaInstance = createAlova({
       } else if (response.status >= 400) {
         throw new Error(response.statusText);
       }
-      const data: ArrayBuffer = (await response.data) as ArrayBuffer;
+      const data = await response.data;
       if (response.data instanceof ArrayBuffer) {
-        return unpack(data) as ArrayBuffer;
+        return unpack(data);
       }
       return data;
     }

interface/src/api/features.ts

@@ -0,0 +1,5 @@
+import { alovaInstance } from './endpoints';
+
+import type { Features } from 'types';
+
+export const readFeatures = () => alovaInstance.Get<Features>('/rest/features');

interface/src/api/mqtt.ts

@@ -1,10 +1,6 @@
-import type { MqttSettingsType, MqttStatusType } from 'types';
-
 import { alovaInstance } from './endpoints';
+import type { MqttSettings, MqttStatus } from 'types';
 
-export const readMqttStatus = () =>
+export const readMqttStatus = () => alovaInstance.Get<MqttStatus>('/rest/mqttStatus');
-  alovaInstance.Get<MqttStatusType>('/rest/mqttStatus');
+export const readMqttSettings = () => alovaInstance.Get<MqttSettings>('/rest/mqttSettings');
-export const readMqttSettings = () =>
+export const updateMqttSettings = (data: MqttSettings) => alovaInstance.Post<MqttSettings>('/rest/mqttSettings', data);
-  alovaInstance.Get<MqttSettingsType>('/rest/mqttSettings');
-export const updateMqttSettings = (data: MqttSettingsType) =>
-  alovaInstance.Post<MqttSettingsType>('/rest/mqttSettings', data);

interface/src/api/network.ts

@@ -1,15 +1,15 @@
-import type { NetworkSettingsType, NetworkStatusType, WiFiNetworkList } from 'types';
-
 import { alovaInstance } from './endpoints';
 
-export const readNetworkStatus = () =>
+import type { WiFiNetworkList, NetworkSettings, NetworkStatus } from 'types';
-  alovaInstance.Get<NetworkStatusType>('/rest/networkStatus');
+
+export const readNetworkStatus = () => alovaInstance.Get<NetworkStatus>('/rest/networkStatus');
 export const scanNetworks = () => alovaInstance.Get('/rest/scanNetworks');
 export const listNetworks = () =>
   alovaInstance.Get<WiFiNetworkList>('/rest/listNetworks', {
-    timeout: 20000 // 20 seconds
+    name: 'listNetworks',
+    timeout: 20000 // timeout 20 seconds
   });
 export const readNetworkSettings = () =>
-  alovaInstance.Get<NetworkSettingsType>('/rest/networkSettings');
+  alovaInstance.Get<NetworkSettings>('/rest/networkSettings', { name: 'networkSettings' });
-export const updateNetworkSettings = (wifiSettings: NetworkSettingsType) =>
+export const updateNetworkSettings = (wifiSettings: NetworkSettings) =>
-  alovaInstance.Post<NetworkSettingsType>('/rest/networkSettings', wifiSettings);
+  alovaInstance.Post<NetworkSettings>('/rest/networkSettings', wifiSettings);

interface/src/api/ntp.ts

@@ -1,14 +1,11 @@
-import type { NTPSettingsType, NTPStatusType, Time } from 'types';
-
 import { alovaInstance } from './endpoints';
+import type { NTPSettings, NTPStatus, Time } from 'types';
 
-export const readNTPStatus = () =>
+export const readNTPStatus = () => alovaInstance.Get<NTPStatus>('/rest/ntpStatus');
-  alovaInstance.Get<NTPStatusType>('/rest/ntpStatus');
-
 export const readNTPSettings = () =>
-  alovaInstance.Get<NTPSettingsType>('/rest/ntpSettings', {});
+  alovaInstance.Get<NTPSettings>('/rest/ntpSettings', {
-export const updateNTPSettings = (data: NTPSettingsType) =>
+    name: 'ntpSettings'
-  alovaInstance.Post<NTPSettingsType>('/rest/ntpSettings', data);
+  });
+export const updateNTPSettings = (data: NTPSettings) => alovaInstance.Post<NTPSettings>('/rest/ntpSettings', data);
 
-export const updateTime = (data: Time) =>
+export const updateTime = (data: Time) => alovaInstance.Post<Time>('/rest/time', data);
-  alovaInstance.Post<Time>('/rest/time', data);

interface/src/api/security.ts

@@ -1,11 +1,10 @@
-import type { SecuritySettingsType, Token } from 'types';
-
 import { alovaInstance } from './endpoints';
 
-export const readSecuritySettings = () =>
+import type { SecuritySettings, Token } from 'types';
-  alovaInstance.Get<SecuritySettingsType>('/rest/securitySettings');
 
-export const updateSecuritySettings = (securitySettings: SecuritySettingsType) =>
+export const readSecuritySettings = () => alovaInstance.Get<SecuritySettings>('/rest/securitySettings');
+
+export const updateSecuritySettings = (securitySettings: SecuritySettings) =>
   alovaInstance.Post('/rest/securitySettings', securitySettings);
 
 export const generateToken = (username?: string) =>

interface/src/api/system.ts

@@ -1,28 +1,33 @@
-import type { LogSettings, SystemStatus } from 'types';
-
 import { alovaInstance, alovaInstanceGH } from './endpoints';
+import type { OTASettings, SystemStatus, LogSettings } from 'types';
 
-// systemStatus - also used to ping in Restart monitor for pinging
+// SystemStatus - also used to ping in Restart monitor for pinging
-export const readSystemStatus = () =>
+export const readSystemStatus = () => alovaInstance.Get<SystemStatus>('/rest/systemStatus');
-  alovaInstance.Get<SystemStatus>('/rest/systemStatus');
+
+// commands
+export const restart = () => alovaInstance.Post('/rest/restart');
+export const partition = () => alovaInstance.Post('/rest/partition');
+export const factoryReset = () => alovaInstance.Post('/rest/factoryReset');
+
+// OTA
+export const readOTASettings = () => alovaInstance.Get<OTASettings>(`/rest/otaSettings`);
+export const updateOTASettings = (data: any) => alovaInstance.Post('/rest/otaSettings', data);
 
 // SystemLog
-export const readLogSettings = () =>
+export const readLogSettings = () => alovaInstance.Get<LogSettings>(`/rest/logSettings`);
-  alovaInstance.Get<LogSettings>(`/rest/logSettings`);
+export const updateLogSettings = (data: any) => alovaInstance.Post('/rest/logSettings', data);
-export const updateLogSettings = (data: LogSettings) =>
+export const fetchLog = () => alovaInstance.Post('/rest/fetchLog');
-  alovaInstance.Post('/rest/logSettings', data);
-export const fetchLogES = () => alovaInstance.Get('/es/log');
 
-// Get versions from GitHub
+// Get versions from github
 export const getStableVersion = () =>
   alovaInstanceGH.Get('latest', {
-    transform(response: { data: { name: string } }) {
+    transformData(response: any) {
       return response.data.name.substring(1);
     }
   });
 export const getDevVersion = () =>
   alovaInstanceGH.Get('tags/latest', {
-    transform(response: { data: { name: string } }) {
+    transformData(response: any) {
       return response.data.name.split(/\s+/).splice(-1)[0].substring(1);
     }
   });
@@ -31,6 +36,7 @@ export const uploadFile = (file: File) => {
   const formData = new FormData();
   formData.append('file', file);
   return alovaInstance.Post('/rest/uploadFile', formData, {
-    timeout: 60000 // override timeout for uploading firmware - 1 minute
+    timeout: 60000, // override timeout for uploading firmware - 1 minute
+    enableUpload: true
   });
 };

interface/src/api/unpack.ts

@@ -38,8 +38,7 @@ try {
 export class Unpackr {
   constructor(options) {
     if (options) {
-      if (options.useRecords === false && options.mapsAsObjects === undefined)
+      if (options.useRecords === false && options.mapsAsObjects === undefined) options.mapsAsObjects = true;
-        options.mapsAsObjects = true;
       if (options.sequential && options.trusted !== false) {
         options.trusted = true;
         if (!options.structures && options.useRecords != false) {
@@ -47,8 +46,7 @@ export class Unpackr {
           if (!options.maxSharedStructures) options.maxSharedStructures = 0;
         }
       }
-      if (options.structures)
+      if (options.structures) options.structures.sharedLength = options.structures.length;
-        options.structures.sharedLength = options.structures.length;
       else if (options.getStructures) {
         (options.structures = []).uninitialized = true; // this is what we use to denote an uninitialized structures
         options.structures.sharedLength = 0;
@@ -65,14 +63,11 @@ export class Unpackr {
       // re-entrant execution, save the state and restore it after we do this unpack
       return saveState(() => {
         clearSource();
-        return this
+        return this ? this.unpack(source, options) : Unpackr.prototype.unpack.call(defaultOptions, source, options);
-          ? this.unpack(source, options)
-          : Unpackr.prototype.unpack.call(defaultOptions, source, options);
       });
     }
     if (!source.buffer && source.constructor === ArrayBuffer)
-      source =
+      source = typeof Buffer !== 'undefined' ? Buffer.from(source) : new Uint8Array(source);
-        typeof Buffer !== 'undefined' ? Buffer.from(source) : new Uint8Array(source);
     if (typeof options === 'object') {
       srcEnd = options.end || source.length;
       position = options.start || 0;
@@ -91,21 +86,14 @@ export class Unpackr {
     // new ones
     try {
       dataView =
-        source.dataView ||
+        source.dataView || (source.dataView = new DataView(source.buffer, source.byteOffset, source.byteLength));
-        (source.dataView = new DataView(
-          source.buffer,
-          source.byteOffset,
-          source.byteLength
-        ));
     } catch (error) {
       // if it doesn't have a buffer, maybe it is the wrong type of object
       src = null;
       if (source instanceof Uint8Array) throw error;
       throw new Error(
         'Source must be a Uint8Array or Buffer but was a ' +
-          (source && typeof source == 'object'
+          (source && typeof source == 'object' ? source.constructor.name : typeof source)
-            ? source.constructor.name
-            : typeof source)
       );
     }
     if (this instanceof Unpackr) {
@@ -129,9 +117,7 @@ export class Unpackr {
     try {
       sequentialMode = true;
       const size = source.length;
-      const value = this
+      const value = this ? this.unpack(source, size) : defaultUnpackr.unpack(source, size);
-        ? this.unpack(source, size)
-        : defaultUnpackr.unpack(source, size);
       if (forEach) {
         if (forEach(value) === false) return;
         while (position < size) {
@@ -159,11 +145,9 @@ export class Unpackr {
   }
 
   _mergeStructures(loadedStructures, existingStructures) {
-    if (onLoadedStructures)
+    if (onLoadedStructures) loadedStructures = onLoadedStructures.call(this, loadedStructures);
-      loadedStructures = onLoadedStructures.call(this, loadedStructures);
     loadedStructures = loadedStructures || [];
-    if (Object.isFrozen(loadedStructures))
+    if (Object.isFrozen(loadedStructures)) loadedStructures = loadedStructures.map((structure) => structure.slice(0));
-      loadedStructures = loadedStructures.map((structure) => structure.slice(0));
     for (let i = 0, l = loadedStructures.length; i < l; i++) {
       const structure = loadedStructures[i];
       if (structure) {
@@ -178,8 +162,7 @@ export class Unpackr {
         const existing = existingStructures[id];
         if (existing) {
           if (structure)
-            (loadedStructures.restoreStructures ||
+            (loadedStructures.restoreStructures || (loadedStructures.restoreStructures = []))[id] = structure;
-              (loadedStructures.restoreStructures = []))[id] = structure;
           loadedStructures[id] = existing;
         }
       }
@@ -198,16 +181,10 @@ export function checkedRead(options: any) {
   try {
     if (!currentUnpackr.trusted && !sequentialMode) {
       const sharedLength = currentStructures.sharedLength || 0;
-      if (sharedLength < currentStructures.length)
+      if (sharedLength < currentStructures.length) currentStructures.length = sharedLength;
-        currentStructures.length = sharedLength;
     }
     let result;
-    if (
+    if (currentUnpackr.randomAccessStructure && src[position] < 0x40 && src[position] >= 0x20 && readStruct) {
-      currentUnpackr.randomAccessStructure &&
-      src[position] < 0x40 &&
-      src[position] >= 0x20 &&
-      readStruct
-    ) {
       result = readStruct(src, position, srcEnd, currentUnpackr);
       src = null; // dispose of this so that recursive unpack calls don't save state
       if (!(options && options.lazy) && result) result = result.toJSON();
@@ -221,8 +198,7 @@ export function checkedRead(options: any) {
 
     if (position == srcEnd) {
       // finished reading this source, cleanup references
-      if (currentStructures && currentStructures.restoreStructures)
+      if (currentStructures && currentStructures.restoreStructures) restoreStructures();
-        restoreStructures();
       currentStructures = null;
       src = null;
       if (referenceMap) referenceMap = null;
@@ -232,9 +208,10 @@ export function checkedRead(options: any) {
     } else if (!sequentialMode) {
       let jsonView;
       try {
-        jsonView = JSON.stringify(result, (_, value) =>
+        jsonView = JSON.stringify(result, (_, value) => (typeof value === 'bigint' ? `${value}n` : value)).slice(
-          typeof value === 'bigint' ? `${value}n` : value
+          0,
-        ).slice(0, 100);
+          100
+        );
       } catch (error) {
         jsonView = '(JSON view not available ' + error + ')';
       }
@@ -243,14 +220,9 @@ export function checkedRead(options: any) {
     // else more to read, but we are reading sequentially, so don't clear source yet
     return result;
   } catch (error) {
-    if (currentStructures && currentStructures.restoreStructures)
+    if (currentStructures && currentStructures.restoreStructures) restoreStructures();
-      restoreStructures();
     clearSource();
-    if (
+    if (error instanceof RangeError || error.message.startsWith('Unexpected end of buffer') || position > srcEnd) {
-      error instanceof RangeError ||
-      error.message.startsWith('Unexpected end of buffer') ||
-      position > srcEnd
-    ) {
       error.incomplete = true;
     }
     throw error;
@@ -271,8 +243,7 @@ export function read() {
       if (token < 0x40) return token;
       else {
         const structure =
-          currentStructures[token & 0x3f] ||
+          currentStructures[token & 0x3f] || (currentUnpackr.getStructures && loadStructures()[token & 0x3f]);
-          (currentUnpackr.getStructures && loadStructures()[token & 0x3f]);
         if (structure) {
           if (!structure.read) {
             structure.read = createStructureReader(structure, token & 0x3f);
@@ -311,10 +282,7 @@ export function read() {
     // fixstr
     const length = token - 0xa0;
     if (srcStringEnd >= position) {
-      return srcString.slice(
+      return srcString.slice(position - srcStringStart, (position += length) - srcStringStart);
-        position - srcStringStart,
-        (position += length) - srcStringStart
-      );
     }
     if (srcStringEnd == 0 && srcEnd < 140) {
       // for small blocks, avoiding the overhead of the extract call is helpful
@@ -330,16 +298,8 @@ export function read() {
       case 0xc1:
         if (bundledStrings) {
           value = read(); // followed by the length of the string in characters (not bytes!)
-          if (value > 0)
+          if (value > 0) return bundledStrings[1].slice(bundledStrings.position1, (bundledStrings.position1 += value));
-            return bundledStrings[1].slice(
+          else return bundledStrings[0].slice(bundledStrings.position0, (bundledStrings.position0 -= value));
-              bundledStrings.position1,
-              (bundledStrings.position1 += value)
-            );
-          else
-            return bundledStrings[0].slice(
-              bundledStrings.position0,
-              (bundledStrings.position0 -= value)
-            );
         }
         return C1; // "never-used", return special object to denote that
       case 0xc2:
@@ -378,8 +338,7 @@ export function read() {
         value = dataView.getFloat32(position);
         if (currentUnpackr.useFloat32 > 2) {
           // this does rounding of numbers that were encoded in 32-bit float to nearest significant decimal digit that could be preserved
-          const multiplier =
+          const multiplier = mult10[((src[position] & 0x7f) << 1) | (src[position + 1] >> 7)];
-            mult10[((src[position] & 0x7f) << 1) | (src[position + 1] >> 7)];
           position += 4;
           return ((multiplier * value + (value > 0 ? 0.5 : -0.5)) >> 0) / multiplier;
         }
@@ -432,8 +391,7 @@ export function read() {
           value = dataView.getBigInt64(position).toString();
         } else if (currentUnpackr.int64AsType === 'auto') {
           value = dataView.getBigInt64(position);
-          if (value >= BigInt(-2) << BigInt(52) && value <= BigInt(2) << BigInt(52))
+          if (value >= BigInt(-2) << BigInt(52) && value <= BigInt(2) << BigInt(52)) value = Number(value);
-            value = Number(value);
         } else value = dataView.getBigInt64(position);
         position += 8;
         return value;
@@ -475,10 +433,7 @@ export function read() {
         // str 8
         value = src[position++];
         if (srcStringEnd >= position) {
-          return srcString.slice(
+          return srcString.slice(position - srcStringStart, (position += value) - srcStringStart);
-            position - srcStringStart,
-            (position += value) - srcStringStart
-          );
         }
         return readString8(value);
       case 0xda:
@@ -486,10 +441,7 @@ export function read() {
         value = dataView.getUint16(position);
         position += 2;
         if (srcStringEnd >= position) {
-          return srcString.slice(
+          return srcString.slice(position - srcStringStart, (position += value) - srcStringStart);
-            position - srcStringStart,
-            (position += value) - srcStringStart
-          );
         }
         return readString16(value);
       case 0xdb:
@@ -497,10 +449,7 @@ export function read() {
         value = dataView.getUint32(position);
         position += 4;
         if (srcStringEnd >= position) {
-          return srcString.slice(
+          return srcString.slice(position - srcStringStart, (position += value) - srcStringStart);
-            position - srcStringStart,
-            (position += value) - srcStringStart
-          );
         }
         return readString32(value);
       case 0xdc:
@@ -555,8 +504,7 @@ function createStructureReader(structure, firstId) {
             .join(',') +
           '})}'
       )(read));
-      if (structure.highByte === 0)
+      if (structure.highByte === 0) structure.read = createSecondByteReader(firstId, structure.read);
-        structure.read = createSecondByteReader(firstId, structure.read);
       return readObject(); // second byte is already read, if there is one so immediately read object
     }
     const object = {};
@@ -579,8 +527,7 @@ const createSecondByteReader = (firstId, read0) =>
   function () {
     const highByte = src[position++];
     if (highByte === 0) return read0();
-    const id =
+    const id = firstId < 32 ? -(firstId + (highByte << 5)) : firstId + (highByte << 5);
-      firstId < 32 ? -(firstId + (highByte << 5)) : firstId + (highByte << 5);
     const structure = currentStructures[id] || loadStructures()[id];
     if (!structure) {
       throw new Error('Record id is not defined for ' + id);
@@ -595,10 +542,7 @@ export function loadStructures() {
     src = null;
     return currentUnpackr.getStructures();
   });
-  return (currentStructures = currentUnpackr._mergeStructures(
+  return (currentStructures = currentUnpackr._mergeStructures(loadedStructures, currentStructures));
-    loadedStructures,
-    currentStructures
-  ));
 }
 
 var readFixedString = readStringJS;
@@ -619,11 +563,7 @@ export function setExtractor(extractStrings) {
       if (string == null) {
         if (bundledStrings) return readStringJS(length);
         const byteOffset = src.byteOffset;
-        const extraction = extractStrings(
+        const extraction = extractStrings(position - headerLength + byteOffset, srcEnd + byteOffset, src.buffer);
-          position - headerLength + byteOffset,
-          srcEnd + byteOffset,
-          src.buffer
-        );
         if (typeof extraction == 'string') {
           string = extraction;
           strings = EMPTY_ARRAY;
@@ -653,8 +593,7 @@ function readStringJS(length) {
   if (length < 16) {
     if ((result = shortStringInJS(length))) return result;
   }
-  if (length > 64 && decoder)
+  if (length > 64 && decoder) return decoder.decode(src.subarray(position, (position += length)));
-    return decoder.decode(src.subarray(position, (position += length)));
   const end = position + length;
   const units = [];
   result = '';
@@ -677,8 +616,7 @@ function readStringJS(length) {
       const byte2 = src[position++] & 0x3f;
       const byte3 = src[position++] & 0x3f;
       const byte4 = src[position++] & 0x3f;
-      let unit =
+      let unit = ((byte1 & 0x07) << 0x12) | (byte2 << 0x0c) | (byte3 << 0x06) | byte4;
-        ((byte1 & 0x07) << 0x12) | (byte2 << 0x0c) | (byte3 << 0x06) | byte4;
       if (unit > 0xffff) {
         unit -= 0x10000;
         units.push(((unit >>> 10) & 0x3ff) | 0xd800);
@@ -872,8 +810,7 @@ function shortStringInJS(length) {
             position -= 14;
             return;
           }
-          if (length < 15)
+          if (length < 15) return fromCharCode(a, b, c, d, e, f, g, h, i, j, k, l, m, n);
-            return fromCharCode(a, b, c, d, e, f, g, h, i, j, k, l, m, n);
           const o = src[position++];
           if ((o & 0x80) > 0) {
             position -= 15;
@@ -925,17 +862,14 @@ function readExt(length) {
   const type = src[position++];
   if (currentExtensions[type]) {
     let end;
-    return currentExtensions[type](
+    return currentExtensions[type](src.subarray(position, (end = position += length)), (readPosition) => {
-      src.subarray(position, (end = position += length)),
-      (readPosition) => {
       position = readPosition;
       try {
         return read();
       } finally {
         position = end;
       }
-      }
+    });
-    );
   } else throw new Error('Unknown extension type ' + type);
 }
 
@@ -947,20 +881,14 @@ function readKey() {
     length = length - 0xa0;
     if (srcStringEnd >= position)
       // if it has been extracted, must use it (and faster anyway)
-      return srcString.slice(
+      return srcString.slice(position - srcStringStart, (position += length) - srcStringStart);
-        position - srcStringStart,
-        (position += length) - srcStringStart
-      );
     else if (!(srcStringEnd == 0 && srcEnd < 180)) return readFixedString(length);
   } else {
     // not cacheable, go back and do a standard read
     position--;
     return read().toString();
   }
-  const key =
+  const key = ((length << 5) ^ (length > 1 ? dataView.getUint16(position) : length > 0 ? src[position] : 0)) & 0xfff;
-    ((length << 5) ^
-      (length > 1 ? dataView.getUint16(position) : length > 0 ? src[position] : 0)) &
-    0xfff;
   let entry = keyCache[key];
   let checkPosition = position;
   let end = position + length - 3;
@@ -1019,8 +947,7 @@ const recordDefinition = (id, highByte) => {
   }
   const existingStructure = currentStructures[id];
   if (existingStructure && existingStructure.isShared) {
-    (currentStructures.restoreStructures ||
+    (currentStructures.restoreStructures || (currentStructures.restoreStructures = []))[id] = existingStructure;
-      (currentStructures.restoreStructures = []))[id] = existingStructure;
   }
   currentStructures[id] = structure;
   structure.read = createStructureReader(structure, firstByte);
@@ -1082,8 +1009,7 @@ export const typedArrays = [
 currentExtensions[0x74] = (data) => {
   const typeCode = data[0];
   const typedArrayName = typedArrays[typeCode];
-  if (!typedArrayName)
+  if (!typedArrayName) throw new Error('Could not find typed array for code ' + typeCode);
-    throw new Error('Could not find typed array for code ' + typeCode);
   // we have to always slice/copy here to get a new ArrayBuffer that is word/byte aligned
   return new glbl[typedArrayName](Uint8Array.prototype.slice.call(data, 1).buffer);
 };
@@ -1107,20 +1033,11 @@ currentExtensions[0x62] = (data) => {
 
 currentExtensions[0xff] = (data) => {
   // 32-bit date extension
-  if (data.length == 4)
+  if (data.length == 4) return new Date((data[0] * 0x1000000 + (data[1] << 16) + (data[2] << 8) + data[3]) * 1000);
-    return new Date(
-      (data[0] * 0x1000000 + (data[1] << 16) + (data[2] << 8) + data[3]) * 1000
-    );
   else if (data.length == 8)
     return new Date(
-      ((data[0] << 22) + (data[1] << 14) + (data[2] << 6) + (data[3] >> 2)) /
+      ((data[0] << 22) + (data[1] << 14) + (data[2] << 6) + (data[3] >> 2)) / 1000000 +
-        1000000 +
+        ((data[3] & 0x3) * 0x100000000 + data[4] * 0x1000000 + (data[5] << 16) + (data[6] << 8) + data[7]) * 1000
-        ((data[3] & 0x3) * 0x100000000 +
-          data[4] * 0x1000000 +
-          (data[5] << 16) +
-          (data[6] << 8) +
-          data[7]) *
-          1000
     );
   else if (data.length == 12)
     return new Date(
@@ -1153,10 +1070,7 @@ function saveState(callback) {
 
   const savedSrc = new Uint8Array(src.slice(0, srcEnd)); // we copy the data in case it changes while external data is processed
   const savedStructures = currentStructures;
-  const savedStructuresContents = currentStructures.slice(
+  const savedStructuresContents = currentStructures.slice(0, currentStructures.length);
-    0,
-    currentStructures.length
-  );
   const savedPackr = currentUnpackr;
   const savedSequentialMode = sequentialMode;
   const value = callback();
@@ -1208,10 +1122,7 @@ const u8Array = new Uint8Array(f32Array.buffer, 0, 4);
 export function roundFloat32(float32Number) {
   f32Array[0] = float32Number;
   const multiplier = mult10[((u8Array[3] & 0x7f) << 1) | (u8Array[2] >> 7)];
-  return (
+  return ((multiplier * float32Number + (float32Number > 0 ? 0.5 : -0.5)) >> 0) / multiplier;
-    ((multiplier * float32Number + (float32Number > 0 ? 0.5 : -0.5)) >> 0) /
-    multiplier
-  );
 }
 export function setReadStruct(updatedReadStruct, loadedStructs, saveState) {
   readStruct = updatedReadStruct;

interface/src/app/main/CustomEntitiesDialog.tsx

@@ -1,342 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import AddIcon from '@mui/icons-material/Add';
-import CancelIcon from '@mui/icons-material/Cancel';
-import DoneIcon from '@mui/icons-material/Done';
-import RemoveIcon from '@mui/icons-material/RemoveCircleOutline';
-import {
-  Box,
-  Button,
-  Checkbox,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  InputAdornment,
-  MenuItem,
-  TextField
-} from '@mui/material';
-import Grid from '@mui/material/Grid2';
-
-import { dialogStyle } from 'CustomTheme';
-import type Schema from 'async-validator';
-import type { ValidateFieldsError } from 'async-validator';
-import { BlockFormControlLabel, ValidatedTextField } from 'components';
-import { useI18nContext } from 'i18n/i18n-react';
-import { numberValue, updateValue } from 'utils';
-import { validate } from 'validators';
-
-import { DeviceValueType, DeviceValueTypeNames, DeviceValueUOM_s } from './types';
-import type { EntityItem } from './types';
-
-interface CustomEntitiesDialogProps {
-  open: boolean;
-  creating: boolean;
-  onClose: () => void;
-  onSave: (ei: EntityItem) => void;
-  selectedItem: EntityItem;
-  validator: Schema;
-}
-
-const CustomEntitiesDialog = ({
-  open,
-  creating,
-  onClose,
-  onSave,
-  selectedItem,
-  validator
-}: CustomEntitiesDialogProps) => {
-  const { LL } = useI18nContext();
-  const [editItem, setEditItem] = useState<EntityItem>(selectedItem);
-  const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
-  const updateFormValue = updateValue(setEditItem);
-
-  useEffect(() => {
-    if (open) {
-      setFieldErrors(undefined);
-      setEditItem(selectedItem);
-      // convert to hex strings straight away
-      setEditItem({
-        ...selectedItem,
-        device_id: selectedItem.device_id.toString(16).toUpperCase(),
-        type_id: selectedItem.type_id.toString(16).toUpperCase()
-      });
-    }
-  }, [open, selectedItem]);
-
-  const handleClose = (_event, reason: 'backdropClick' | 'escapeKeyDown') => {
-    if (reason !== 'backdropClick') {
-      onClose();
-    }
-  };
-
-  const save = async () => {
-    try {
-      setFieldErrors(undefined);
-      await validate(validator, editItem);
-      if (typeof editItem.device_id === 'string') {
-        editItem.device_id = parseInt(editItem.device_id, 16);
-      }
-      if (typeof editItem.type_id === 'string') {
-        editItem.type_id = parseInt(editItem.type_id, 16);
-      }
-      onSave(editItem);
-    } catch (error) {
-      setFieldErrors(error as ValidateFieldsError);
-    }
-  };
-
-  const remove = () => {
-    editItem.deleted = true;
-    onSave(editItem);
-  };
-
-  return (
-    <Dialog sx={dialogStyle} open={open} onClose={handleClose}>
-      <DialogTitle>
-        {creating ? LL.ADD(1) + ' ' + LL.NEW(1) : LL.EDIT()}&nbsp;{LL.ENTITY()}
-      </DialogTitle>
-      <DialogContent dividers>
-        <Box display="flex" flexWrap="wrap" mb={1}>
-          <Box flexWrap="nowrap" whiteSpace="nowrap" />
-        </Box>
-        <Grid container spacing={2} rowSpacing={0}>
-          <Grid size={12}>
-            <ValidatedTextField
-              fieldErrors={fieldErrors}
-              name="name"
-              label={LL.NAME(0)}
-              value={editItem.name}
-              margin="normal"
-              fullWidth
-              onChange={updateFormValue}
-            />
-          </Grid>
-          <Grid>
-            <TextField
-              name="ram"
-              label={LL.VALUE(0) + ' ' + LL.TYPE(1)}
-              value={editItem.ram}
-              variant="outlined"
-              onChange={updateFormValue}
-              margin="normal"
-              fullWidth
-              select
-            >
-              <MenuItem value={0}>EMS-{LL.VALUE(1)}</MenuItem>
-              <MenuItem value={1}>RAM-{LL.VALUE(1)}</MenuItem>
-            </TextField>
-          </Grid>
-          {editItem.ram === 1 && (
-            <Grid>
-              <TextField
-                name="value"
-                label={LL.DEFAULT(0) + ' ' + LL.VALUE(0)}
-                type="string"
-                value={editItem.value as string}
-                variant="outlined"
-                onChange={updateFormValue}
-                fullWidth
-                margin="normal"
-              />
-            </Grid>
-          )}
-          {editItem.ram === 0 && (
-            <>
-              <Grid mt={3} size={9}>
-                <BlockFormControlLabel
-                  control={
-                    <Checkbox
-                      checked={editItem.writeable}
-                      onChange={updateFormValue}
-                      name="writeable"
-                    />
-                  }
-                  label={LL.WRITEABLE()}
-                />
-              </Grid>
-              <Grid>
-                <ValidatedTextField
-                  fieldErrors={fieldErrors}
-                  name="device_id"
-                  label={LL.ID_OF(LL.DEVICE())}
-                  margin="normal"
-                  sx={{ width: '11ch' }}
-                  type="string"
-                  value={editItem.device_id as string}
-                  onChange={updateFormValue}
-                  slotProps={{
-                    input: {
-                      startAdornment: (
-                        <InputAdornment position="start">0x</InputAdornment>
-                      )
-                    },
-                    htmlInput: { style: { textTransform: 'uppercase' } }
-                  }}
-                />
-              </Grid>
-              <Grid>
-                <ValidatedTextField
-                  fieldErrors={fieldErrors}
-                  name="type_id"
-                  label={LL.ID_OF(LL.TYPE(1))}
-                  margin="normal"
-                  sx={{ width: '11ch' }}
-                  type="string"
-                  value={editItem.type_id as string}
-                  onChange={updateFormValue}
-                  slotProps={{
-                    input: {
-                      startAdornment: (
-                        <InputAdornment position="start">0x</InputAdornment>
-                      )
-                    },
-                    htmlInput: { style: { textTransform: 'uppercase' } }
-                  }}
-                />
-              </Grid>
-              <Grid>
-                <ValidatedTextField
-                  fieldErrors={fieldErrors}
-                  name="offset"
-                  label={LL.OFFSET()}
-                  margin="normal"
-                  sx={{ width: '11ch' }}
-                  type="number"
-                  value={numberValue(editItem.offset)}
-                  onChange={updateFormValue}
-                />
-              </Grid>
-              <Grid>
-                <TextField
-                  name="value_type"
-                  label={LL.VALUE(0) + ' ' + LL.TYPE(1)}
-                  value={editItem.value_type}
-                  variant="outlined"
-                  sx={{ width: '11ch' }}
-                  onChange={updateFormValue}
-                  margin="normal"
-                  select
-                >
-                  <MenuItem value={DeviceValueType.BOOL}>
-                    {DeviceValueTypeNames[DeviceValueType.BOOL]}
-                  </MenuItem>
-                  <MenuItem value={DeviceValueType.INT8}>
-                    {DeviceValueTypeNames[DeviceValueType.INT8]}
-                  </MenuItem>
-                  <MenuItem value={DeviceValueType.UINT8}>
-                    {DeviceValueTypeNames[DeviceValueType.UINT8]}
-                  </MenuItem>
-                  <MenuItem value={DeviceValueType.INT16}>
-                    {DeviceValueTypeNames[DeviceValueType.INT16]}
-                  </MenuItem>
-                  <MenuItem value={DeviceValueType.UINT16}>
-                    {DeviceValueTypeNames[DeviceValueType.UINT16]}
-                  </MenuItem>
-                  <MenuItem value={DeviceValueType.UINT24}>
-                    {DeviceValueTypeNames[DeviceValueType.UINT24]}
-                  </MenuItem>
-                  <MenuItem value={DeviceValueType.TIME}>
-                    {DeviceValueTypeNames[DeviceValueType.TIME]}
-                  </MenuItem>
-                  <MenuItem value={DeviceValueType.UINT32}>
-                    {DeviceValueTypeNames[DeviceValueType.UINT32]}
-                  </MenuItem>
-                  <MenuItem value={DeviceValueType.STRING}>
-                    {DeviceValueTypeNames[DeviceValueType.STRING]}
-                  </MenuItem>
-                </TextField>
-              </Grid>
-
-              {editItem.value_type !== DeviceValueType.BOOL &&
-                editItem.value_type !== DeviceValueType.STRING && (
-                  <>
-                    <Grid>
-                      <TextField
-                        name="factor"
-                        label={LL.FACTOR()}
-                        value={numberValue(editItem.factor)}
-                        variant="outlined"
-                        onChange={updateFormValue}
-                        sx={{ width: '11ch' }}
-                        margin="normal"
-                        type="number"
-                        slotProps={{
-                          htmlInput: { step: '0.001' }
-                        }}
-                      />
-                    </Grid>
-                    <Grid>
-                      <TextField
-                        name="uom"
-                        label={LL.UNIT()}
-                        value={editItem.uom}
-                        margin="normal"
-                        sx={{ width: '11ch' }}
-                        onChange={updateFormValue}
-                        select
-                      >
-                        {DeviceValueUOM_s.map((val, i) => (
-                          <MenuItem key={val} value={i}>
-                            {val}
-                          </MenuItem>
-                        ))}
-                      </TextField>
-                    </Grid>
-                  </>
-                )}
-              {editItem.value_type === DeviceValueType.STRING &&
-                editItem.device_id !== '0' && (
-                  <Grid>
-                    <ValidatedTextField
-                      fieldErrors={fieldErrors}
-                      name="factor"
-                      label="Bytes"
-                      value={numberValue(editItem.factor)}
-                      sx={{ width: '11ch' }}
-                      variant="outlined"
-                      onChange={updateFormValue}
-                      margin="normal"
-                      type="number"
-                    />
-                  </Grid>
-                )}
-            </>
-          )}
-        </Grid>
-      </DialogContent>
-      <DialogActions>
-        {!creating && (
-          <Box flexGrow={1}>
-            <Button
-              startIcon={<RemoveIcon />}
-              variant="outlined"
-              color="warning"
-              onClick={remove}
-            >
-              {LL.REMOVE()}
-            </Button>
-          </Box>
-        )}
-        <Button
-          startIcon={<CancelIcon />}
-          variant="outlined"
-          onClick={onClose}
-          color="secondary"
-        >
-          {LL.CANCEL()}
-        </Button>
-        <Button
-          startIcon={creating ? <AddIcon /> : <DoneIcon />}
-          variant="outlined"
-          onClick={save}
-          color="primary"
-        >
-          {creating ? LL.ADD(0) : LL.UPDATE()}
-        </Button>
-      </DialogActions>
-    </Dialog>
-  );
-};
-
-export default CustomEntitiesDialog;

interface/src/app/main/Dashboard.tsx

@@ -1,366 +0,0 @@
-import { useContext, useEffect, useState } from 'react';
-import { IconContext } from 'react-icons/lib';
-import { toast } from 'react-toastify';
-
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
-import EditIcon from '@mui/icons-material/Edit';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import UnfoldLessIcon from '@mui/icons-material/UnfoldLess';
-import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore';
-import {
-  Box,
-  IconButton,
-  ToggleButton,
-  ToggleButtonGroup,
-  Tooltip,
-  Typography
-} from '@mui/material';
-import Grid from '@mui/material/Grid2';
-
-import { Body, Cell, Row, Table } from '@table-library/react-table-library/table';
-import { useTheme } from '@table-library/react-table-library/theme';
-import { CellTree, useTree } from '@table-library/react-table-library/tree';
-import { useRequest } from 'alova/client';
-import { FormLoader, SectionContent, useLayoutTitle } from 'components';
-import { AuthenticatedContext } from 'contexts/authentication';
-import { useI18nContext } from 'i18n/i18n-react';
-import { useInterval, usePersistState } from 'utils';
-
-import { readDashboard, writeDeviceValue } from '../../api/app';
-import DeviceIcon from './DeviceIcon';
-import DevicesDialog from './DevicesDialog';
-import { formatValue } from './deviceValue';
-import {
-  type DashboardItem,
-  DeviceEntityMask,
-  DeviceType,
-  type DeviceValue
-} from './types';
-import { deviceValueItemValidation } from './validators';
-
-const Dashboard = () => {
-  const { LL } = useI18nContext();
-  const { me } = useContext(AuthenticatedContext);
-
-  useLayoutTitle(LL.DASHBOARD());
-
-  const [showAll, setShowAll] = usePersistState(true, 'showAll');
-
-  const [deviceValueDialogOpen, setDeviceValueDialogOpen] = useState<boolean>(false);
-  const [parentNodes, setParentNodes] = useState<number>(0);
-  const [selectedDashboardItem, setSelectedDashboardItem] =
-    useState<DashboardItem>();
-
-  const {
-    data,
-    send: fetchDashboard,
-    error,
-    loading
-  } = useRequest(readDashboard, {
-    initialData: []
-  }).onSuccess((event) => {
-    if (event.data.length !== parentNodes) {
-      setParentNodes(event.data.length); // count number of parents/devices
-    }
-  });
-
-  const { loading: submitting, send: sendDeviceValue } = useRequest(
-    (data: { id: number; c: string; v: unknown }) => writeDeviceValue(data),
-    {
-      immediate: false
-    }
-  );
-
-  const deviceValueDialogSave = async (devicevalue: DeviceValue) => {
-    if (!selectedDashboardItem) {
-      return;
-    }
-    const id = selectedDashboardItem.parentNode.id; // this is the parent ID
-    await sendDeviceValue({ id, c: devicevalue.c ?? '', v: devicevalue.v })
-      .then(() => {
-        toast.success(LL.WRITE_CMD_SENT());
-      })
-      .catch((error: Error) => {
-        toast.error(error.message);
-      })
-      .finally(() => {
-        setDeviceValueDialogOpen(false);
-        setSelectedDashboardItem(undefined);
-      });
-  };
-
-  const dashboard_theme = useTheme({
-    Table: `
-      --data-table-library_grid-template-columns: minmax(80px, auto) 120px 32px;
-    `,
-    BaseRow: `
-      font-size: 14px;
-      .td {
-        height: 28px;
-      }
-    `,
-    Row: `
-      cursor: pointer;
-      background-color: #1e1e1e;
-      &:nth-of-type(odd) .td {
-          background-color: #303030;
-      },
-      &:hover .td {
-        background-color: #177ac9;
-      }
-    `,
-    BaseCell: `
-      &:nth-of-type(2) {
-        text-align: right;
-      }
-      &:nth-of-type(3) {
-        text-align: right;
-      }
-    `
-  });
-
-  const tree = useTree(
-    { nodes: data },
-    {
-      onChange: undefined // not used but needed
-    },
-    {
-      treeIcon: {
-        margin: '4px',
-        iconDefault: null,
-        iconRight: (
-          <ChevronRightIcon
-            sx={{ fontSize: 16, verticalAlign: 'middle' }}
-            color="info"
-          />
-        ),
-        iconDown: (
-          <ExpandMoreIcon
-            sx={{ fontSize: 16, verticalAlign: 'middle' }}
-            color="info"
-          />
-        )
-      },
-      indentation: 45
-    }
-  );
-
-  useInterval(() => {
-    if (!deviceValueDialogOpen) {
-      void fetchDashboard();
-    }
-  }, 3000);
-
-  useEffect(() => {
-    showAll
-      ? tree.fns.onAddAll(data.map((item: DashboardItem) => item.id)) // expand tree
-      : tree.fns.onRemoveAll(); // collapse tree
-  }, [parentNodes]);
-
-  const showType = (n?: string, t?: number) => {
-    // if we have a name show it
-    if (n) {
-      return n;
-    }
-    if (t) {
-      // otherwise pick translation based on type
-      switch (t) {
-        case DeviceType.CUSTOM:
-          return LL.CUSTOM_ENTITIES(0);
-        case DeviceType.ANALOGSENSOR:
-          return LL.ANALOG_SENSORS();
-        case DeviceType.TEMPERATURESENSOR:
-          return LL.TEMP_SENSORS();
-        case DeviceType.SCHEDULER:
-          return LL.SCHEDULER();
-        default:
-          break;
-      }
-    }
-    return '';
-  };
-
-  const showName = (di: DashboardItem) => {
-    if (di.id < 100) {
-      // if its a device (parent node) and has entities
-      if (di.nodes?.length) {
-        return (
-          <>
-            <span style="font-size: 14px">
-              <DeviceIcon type_id={di.t ?? 0} />
-              &nbsp;&nbsp;{showType(di.n, di.t)}
-            </span>
-            <span style={{ color: 'lightblue' }}>&nbsp;({di.nodes?.length})</span>
-          </>
-        );
-      }
-    }
-    if (di.dv) {
-      return <span style="color:lightgrey">{di.dv.id.slice(2)}</span>;
-    }
-  };
-
-  const hasMask = (id: string, mask: number) =>
-    (parseInt(id.slice(0, 2), 16) & mask) === mask;
-
-  const editDashboardValue = (di: DashboardItem) => {
-    if (me.admin && di.dv?.c) {
-      setSelectedDashboardItem(di);
-      setDeviceValueDialogOpen(true);
-    }
-  };
-
-  const handleShowAll = (
-    event: React.MouseEvent<HTMLElement>,
-    toggle: boolean | null
-  ) => {
-    if (toggle !== null) {
-      tree.fns.onToggleAll({});
-      setShowAll(toggle);
-    }
-  };
-
-  const renderContent = () => {
-    if (!data) {
-      return <FormLoader onRetry={fetchDashboard} errorMessage={error?.message} />;
-    }
-
-    return (
-      <>
-        <Box
-          sx={{
-            backgroundColor: 'black',
-            pt: 1,
-            pl: 2
-          }}
-        >
-          <Grid container spacing={0} justifyContent="flex-start">
-            <Grid size={11}>
-              <Typography mb={2} variant="body1" color="warning">
-                {LL.DASHBOARD_1()}.
-              </Typography>
-            </Grid>
-
-            <Grid size={1} alignItems="end">
-              <ToggleButtonGroup
-                color="primary"
-                size="small"
-                value={showAll}
-                exclusive
-                onChange={handleShowAll}
-              >
-                <ToggleButton value={true}>
-                  <UnfoldMoreIcon sx={{ fontSize: 14 }} />
-                </ToggleButton>
-                <ToggleButton value={false}>
-                  <UnfoldLessIcon sx={{ fontSize: 14 }} />
-                </ToggleButton>
-              </ToggleButtonGroup>
-            </Grid>
-          </Grid>
-        </Box>
-
-        <Box
-          padding={1}
-          justifyContent="center"
-          flexDirection="column"
-          sx={{
-            borderRadius: 1,
-            border: '1px solid grey'
-          }}
-        >
-          <IconContext.Provider
-            value={{
-              color: 'lightblue',
-              size: '16',
-              style: { verticalAlign: 'middle' }
-            }}
-          >
-            {!loading && data.length === 0 ? (
-              <Typography variant="subtitle2" color="secondary">
-                {LL.NO_DATA()}
-              </Typography>
-            ) : (
-              <Table
-                data={{ nodes: data }}
-                theme={dashboard_theme}
-                layout={{ custom: true }}
-                tree={tree}
-              >
-                {(tableList: DashboardItem[]) => (
-                  <Body>
-                    {tableList.map((di: DashboardItem) => (
-                      <Row
-                        key={di.id}
-                        item={di}
-                        onClick={() => editDashboardValue(di)}
-                      >
-                        {di.id > 99 ? (
-                          <>
-                            <Cell>{showName(di)}</Cell>
-                            <Cell>
-                              <Tooltip
-                                placement="left"
-                                title={formatValue(LL, di.dv?.v, di.dv?.u)}
-                                arrow
-                              >
-                                <span style={{ color: 'lightgrey' }}>
-                                  {formatValue(LL, di.dv?.v, di.dv?.u)}
-                                </span>
-                              </Tooltip>
-                            </Cell>
-
-                            <Cell>
-                              {me.admin &&
-                                di.dv?.c &&
-                                !hasMask(di.dv.id, DeviceEntityMask.DV_READONLY) && (
-                                  <IconButton
-                                    size="small"
-                                    onClick={() => editDashboardValue(di)}
-                                  >
-                                    <EditIcon
-                                      color="primary"
-                                      sx={{ fontSize: 16 }}
-                                    />
-                                  </IconButton>
-                                )}
-                            </Cell>
-                          </>
-                        ) : (
-                          <>
-                            <CellTree item={di}>{showName(di)}</CellTree>
-                            <Cell />
-                            <Cell />
-                          </>
-                        )}
-                      </Row>
-                    ))}
-                  </Body>
-                )}
-              </Table>
-            )}
-          </IconContext.Provider>
-        </Box>
-      </>
-    );
-  };
-
-  return (
-    <SectionContent>
-      {renderContent()}
-      {selectedDashboardItem && selectedDashboardItem.dv && (
-        <DevicesDialog
-          open={deviceValueDialogOpen}
-          onClose={() => setDeviceValueDialogOpen(false)}
-          onSave={deviceValueDialogSave}
-          selectedItem={selectedDashboardItem.dv}
-          writeable={true}
-          validator={deviceValueItemValidation(selectedDashboardItem.dv)}
-          progress={submitting}
-        />
-      )}
-    </SectionContent>
-  );
-};
-
-export default Dashboard;

interface/src/app/main/DeviceIcon.tsx

@@ -1,53 +0,0 @@
-import { AiOutlineAlert, AiOutlineControl, AiOutlineGateway } from 'react-icons/ai';
-import { CgSmartHomeBoiler } from 'react-icons/cg';
-import { FaSolarPanel } from 'react-icons/fa';
-import { GiHeatHaze, GiTap } from 'react-icons/gi';
-import { MdPlaylistAdd } from 'react-icons/md';
-import { MdMoreTime } from 'react-icons/md';
-import {
-  MdOutlineDevices,
-  MdOutlinePool,
-  MdOutlineSensors,
-  MdThermostatAuto
-} from 'react-icons/md';
-import { PiFan, PiGauge } from 'react-icons/pi';
-import { TiFlowSwitch, TiThermometer } from 'react-icons/ti';
-import { VscVmConnect } from 'react-icons/vsc';
-
-import type { SvgIconProps } from '@mui/material';
-
-import { DeviceType } from './types';
-
-const deviceIconLookup: {
-  [key in DeviceType]: React.ComponentType<SvgIconProps> | undefined;
-} = {
-  [DeviceType.TEMPERATURESENSOR]: TiThermometer,
-  [DeviceType.ANALOGSENSOR]: PiGauge,
-  [DeviceType.BOILER]: CgSmartHomeBoiler,
-  [DeviceType.HEATSOURCE]: CgSmartHomeBoiler,
-  [DeviceType.THERMOSTAT]: MdThermostatAuto,
-  [DeviceType.MIXER]: AiOutlineControl,
-  [DeviceType.SOLAR]: FaSolarPanel,
-  [DeviceType.HEATPUMP]: GiHeatHaze,
-  [DeviceType.GATEWAY]: AiOutlineGateway,
-  [DeviceType.SWITCH]: TiFlowSwitch,
-  [DeviceType.CONTROLLER]: VscVmConnect,
-  [DeviceType.CONNECT]: VscVmConnect,
-  [DeviceType.ALERT]: AiOutlineAlert,
-  [DeviceType.EXTENSION]: MdOutlineDevices,
-  [DeviceType.WATER]: GiTap,
-  [DeviceType.POOL]: MdOutlinePool,
-  [DeviceType.CUSTOM]: MdPlaylistAdd,
-  [DeviceType.UNKNOWN]: MdOutlineSensors,
-  [DeviceType.SYSTEM]: undefined,
-  [DeviceType.SCHEDULER]: MdMoreTime,
-  [DeviceType.GENERIC]: MdOutlineSensors,
-  [DeviceType.VENTILATION]: PiFan
-};
-
-const DeviceIcon = ({ type_id }: { type_id: DeviceType }) => {
-  const Icon = deviceIconLookup[type_id];
-  return Icon ? <Icon /> : null;
-};
-
-export default DeviceIcon;

interface/src/app/main/Devices.tsx

@@ -1,769 +0,0 @@
-import {
-  useCallback,
-  useContext,
-  useEffect,
-  useLayoutEffect,
-  useState
-} from 'react';
-import { IconContext } from 'react-icons';
-import { useNavigate } from 'react-router-dom';
-import { toast } from 'react-toastify';
-
-import CommentsDisabledOutlinedIcon from '@mui/icons-material/CommentsDisabledOutlined';
-import EditIcon from '@mui/icons-material/Edit';
-import EditOffOutlinedIcon from '@mui/icons-material/EditOffOutlined';
-import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered';
-import DownloadIcon from '@mui/icons-material/GetApp';
-import HighlightOffIcon from '@mui/icons-material/HighlightOff';
-import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
-import KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined';
-import KeyboardArrowUpOutlinedIcon from '@mui/icons-material/KeyboardArrowUpOutlined';
-import PlayArrowIcon from '@mui/icons-material/PlayArrow';
-import StarIcon from '@mui/icons-material/Star';
-import StarBorderOutlinedIcon from '@mui/icons-material/StarBorderOutlined';
-import UnfoldMoreOutlinedIcon from '@mui/icons-material/UnfoldMoreOutlined';
-import {
-  Box,
-  Button,
-  CircularProgress,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  IconButton,
-  List,
-  ListItem,
-  ListItemText,
-  Tooltip,
-  type TooltipProps,
-  Typography,
-  styled,
-  tooltipClasses
-} from '@mui/material';
-import Grid from '@mui/material/Grid2';
-
-import { useRowSelect } from '@table-library/react-table-library/select';
-import { SortToggleType, useSort } from '@table-library/react-table-library/sort';
-import {
-  Body,
-  Cell,
-  Header,
-  HeaderCell,
-  HeaderRow,
-  Row,
-  Table
-} from '@table-library/react-table-library/table';
-import { useTheme } from '@table-library/react-table-library/theme';
-import type { Action, State } from '@table-library/react-table-library/types/common';
-import { dialogStyle } from 'CustomTheme';
-import { useRequest } from 'alova/client';
-import { MessageBox, SectionContent, useLayoutTitle } from 'components';
-import { AuthenticatedContext } from 'contexts/authentication';
-import { useI18nContext } from 'i18n/i18n-react';
-import { useInterval } from 'utils';
-
-import { readCoreData, readDeviceData, writeDeviceValue } from '../../api/app';
-import DeviceIcon from './DeviceIcon';
-import DevicesDialog from './DevicesDialog';
-import { formatValue } from './deviceValue';
-import { DeviceEntityMask, DeviceType, DeviceValueUOM_s } from './types';
-import type { Device, DeviceValue } from './types';
-import { deviceValueItemValidation } from './validators';
-
-const Devices = () => {
-  const { LL } = useI18nContext();
-  const { me } = useContext(AuthenticatedContext);
-
-  const [size, setSize] = useState([0, 0]);
-  const [selectedDeviceValue, setSelectedDeviceValue] = useState<DeviceValue>();
-  const [onlyFav, setOnlyFav] = useState(false);
-  const [deviceValueDialogOpen, setDeviceValueDialogOpen] = useState(false);
-  const [showDeviceInfo, setShowDeviceInfo] = useState(false);
-  const [selectedDevice, setSelectedDevice] = useState<number>();
-
-  const navigate = useNavigate();
-
-  useLayoutTitle(LL.DEVICES());
-
-  const { data: coreData, send: sendCoreData } = useRequest(() => readCoreData(), {
-    initialData: {
-      connected: true,
-      devices: []
-    }
-  });
-
-  const { data: deviceData, send: sendDeviceData } = useRequest(
-    (id: number) => readDeviceData(id),
-    {
-      initialData: {
-        nodes: []
-      },
-      immediate: false
-    }
-  );
-
-  const { loading: submitting, send: sendDeviceValue } = useRequest(
-    (data: { id: number; c: string; v: unknown }) => writeDeviceValue(data),
-    {
-      immediate: false
-    }
-  );
-
-  useLayoutEffect(() => {
-    function updateSize() {
-      setSize([window.innerWidth, window.innerHeight]);
-    }
-    window.addEventListener('resize', updateSize);
-    updateSize();
-    return () => window.removeEventListener('resize', updateSize);
-  }, []);
-
-  const leftOffset = () => {
-    const devicesWindow = document.getElementById('devices-window');
-    if (!devicesWindow) {
-      return 0;
-    }
-
-    const clientRect = devicesWindow.getBoundingClientRect();
-    const left = clientRect.left;
-    const right = clientRect.right;
-
-    if (!left || !right) {
-      return 0;
-    }
-
-    return left + (right - left < 400 ? 0 : 200);
-  };
-
-  const common_theme = useTheme({
-    BaseRow: `
-      font-size: 14px;
-    `,
-    HeaderRow: `
-      text-transform: uppercase;
-      background-color: black;
-      color: #90CAF9;
-      .th {
-        border-bottom: 1px solid #565656;
-      }
-    `,
-    Row: `
-      cursor: pointer;
-      background-color: #1E1E1E;
-      .td {
-        padding: 8px;
-      }
-      &.tr.tr-body.row-select.row-select-single-selected {
-        background-color: #177ac9;
-        font-weight: normal;
-      }
-    `
-  });
-
-  const device_theme = useTheme([
-    common_theme,
-    {
-      Table: `
-        --data-table-library_grid-template-columns: repeat(1, minmax(0, 1fr)) 130px;
-      `,
-      HeaderRow: `
-        .th {
-          padding: 8px;
-          height: 36px;
-      `,
-      Row: `
-        &:hover .td {
-        background-color: #177ac9;
-      `
-    }
-  ]);
-
-  const data_theme = useTheme([
-    common_theme,
-    {
-      Table: `
-        --data-table-library_grid-template-columns: minmax(200px, auto) minmax(150px, auto) 40px;
-        height: auto;
-        max-height: 100%;
-        overflow-y: scroll;
-        ::-webkit-scrollbar {
-          display:none;
-        }
-      `,
-      BaseRow: `
-      .td {
-        height: 32px;
-      }
-     `,
-      BaseCell: `
-        &:nth-of-type(1) {
-          border-left: 1px solid #177ac9;
-        },
-        &:nth-of-type(2) {
-          text-align: right;
-        },
-        &:nth-of-type(3) {
-          border-right: 1px solid #177ac9;
-        }
-      `,
-      HeaderRow: `
-        .th {
-          border-top: 1px solid #565656;
-        }
-      `,
-      Row: `
-        &:nth-of-type(odd) .td {
-          background-color: #303030;
-        },
-        &:hover .td {
-        background-color: #177ac9;
-      }
-      `
-    }
-  ]);
-
-  const ButtonTooltip = styled(({ className, ...props }: TooltipProps) => (
-    <Tooltip {...props} arrow classes={{ popper: className }} />
-  ))(({ theme }) => ({
-    [`& .${tooltipClasses.arrow}`]: {
-      color: theme.palette.success.main
-    },
-    [`& .${tooltipClasses.tooltip}`]: {
-      backgroundColor: theme.palette.success.main,
-      color: 'rgba(0, 0, 0, 0.87)',
-      boxShadow: theme.shadows[1],
-      fontSize: 10
-    }
-  }));
-
-  const getSortIcon = (state: State, sortKey: unknown) => {
-    if (state.sortKey === sortKey && state.reverse) {
-      return <KeyboardArrowDownOutlinedIcon />;
-    }
-    if (state.sortKey === sortKey && !state.reverse) {
-      return <KeyboardArrowUpOutlinedIcon />;
-    }
-    return <UnfoldMoreOutlinedIcon />;
-  };
-
-  const dv_sort = useSort(
-    { nodes: deviceData.nodes },
-    {},
-    {
-      sortIcon: {
-        iconDefault: <UnfoldMoreOutlinedIcon />,
-        iconUp: <KeyboardArrowUpOutlinedIcon />,
-        iconDown: <KeyboardArrowDownOutlinedIcon />
-      },
-      sortToggleType: SortToggleType.AlternateWithReset,
-      sortFns: {
-        NAME: (array) =>
-          array.sort((a, b) =>
-            a.id.toString().slice(2).localeCompare(b.id.toString().slice(2))
-          ),
-
-        VALUE: (array) =>
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-          array.sort((a, b) => a.v.toString().localeCompare(b.v.toString()))
-      }
-    }
-  );
-
-  async function onSelectChange(action: Action, state: State) {
-    setSelectedDevice(state.id as number);
-    if (action.type === 'ADD_BY_ID_EXCLUSIVELY') {
-      await sendDeviceData(state.id as number);
-    }
-  }
-
-  const device_select = useRowSelect(
-    { nodes: coreData.devices },
-    {
-      onChange: onSelectChange
-    }
-  );
-
-  const resetDeviceSelect = () => {
-    device_select.fns.onRemoveAll();
-  };
-
-  const escFunction = useCallback(
-    (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        if (device_select) {
-          device_select.fns.onRemoveAll();
-        }
-      }
-    },
-    [device_select]
-  );
-
-  useEffect(() => {
-    document.addEventListener('keydown', escFunction);
-    return () => {
-      document.removeEventListener('keydown', escFunction);
-    };
-  }, [escFunction]);
-
-  const customize = () => {
-    if (selectedDevice === 99) {
-      navigate('/customentities');
-    } else {
-      navigate('/customizations', { state: selectedDevice });
-    }
-  };
-
-  const escapeCsvCell = (cell: string) => {
-    if (cell == null) {
-      return '';
-    }
-    const sc = cell.toString().trim();
-    if (sc === '' || sc === '""') {
-      return sc;
-    }
-    if (
-      sc.includes('"') ||
-      sc.includes(';') ||
-      sc.includes('\n') ||
-      sc.includes('\r')
-    ) {
-      return '"' + sc.replace(/"/g, '""') + '"';
-    }
-    return sc;
-  };
-
-  const hasMask = (id: string, mask: number) =>
-    (parseInt(id.slice(0, 2), 16) & mask) === mask;
-
-  const handleDownloadCsv = () => {
-    const deviceIndex = coreData.devices.findIndex(
-      (d) => d.id === device_select.state.id
-    );
-    if (deviceIndex === -1) {
-      return;
-    }
-    const filename =
-      coreData.devices[deviceIndex].tn + '_' + coreData.devices[deviceIndex].n;
-
-    const columns = [
-      {
-        accessor: (dv: DeviceValue) => dv.id.slice(2),
-        name: LL.ENTITY_NAME(0)
-      },
-      {
-        accessor: (dv: DeviceValue) =>
-          typeof dv.v === 'number' ? new Intl.NumberFormat().format(dv.v) : dv.v,
-        name: LL.VALUE(0)
-      },
-      {
-        accessor: (dv: DeviceValue) =>
-          dv.u !== undefined && DeviceValueUOM_s[dv.u]
-            ? DeviceValueUOM_s[dv.u].replace(/[^a-zA-Z0-9]/g, '')
-            : '',
-        name: 'UoM'
-      },
-      {
-        accessor: (dv: DeviceValue) =>
-          dv.c && !hasMask(dv.id, DeviceEntityMask.DV_READONLY) ? 'yes' : 'no',
-        name: LL.WRITEABLE()
-      },
-      {
-        accessor: (dv: DeviceValue) =>
-          dv.h
-            ? dv.h
-            : dv.l
-              ? dv.l.join(' | ')
-              : dv.m !== undefined && dv.x !== undefined
-                ? dv.m + ', ' + dv.x
-                : '',
-        name: 'Range'
-      }
-    ];
-
-    const data = onlyFav
-      ? deviceData.nodes.filter((dv) => hasMask(dv.id, DeviceEntityMask.DV_FAVORITE))
-      : deviceData.nodes;
-
-    const csvData = data.reduce(
-      (csvString: string, rowItem: DeviceValue) =>
-        csvString +
-        columns
-          .map(({ accessor }: { accessor: (dv: DeviceValue) => unknown }) =>
-            escapeCsvCell(accessor(rowItem) as string)
-          )
-          .join(';') +
-        '\r\n',
-      columns.map(({ name }: { name: string }) => escapeCsvCell(name)).join(';') +
-        '\r\n'
-    );
-
-    const downloadBlob = (blob: Blob) => {
-      const downloadLink = document.createElement('a');
-      downloadLink.download = filename;
-      downloadLink.href = window.URL.createObjectURL(blob);
-      document.body.appendChild(downloadLink);
-      downloadLink.click();
-      document.body.removeChild(downloadLink);
-    };
-
-    const device = { ...{ device: coreData.devices[deviceIndex] }, ...deviceData };
-    downloadBlob(
-      new Blob([JSON.stringify(device, null, 2)], {
-        type: 'text;charset:utf-8'
-      })
-    );
-
-    downloadBlob(new Blob([csvData], { type: 'text/csv;charset:utf-8' }));
-  };
-
-  useInterval(() => {
-    if (!deviceValueDialogOpen) {
-      selectedDevice ? void sendDeviceData(selectedDevice) : void sendCoreData();
-    }
-  }, 3000);
-
-  const deviceValueDialogSave = async (devicevalue: DeviceValue) => {
-    const id = Number(device_select.state.id);
-    await sendDeviceValue({ id, c: devicevalue.c ?? '', v: devicevalue.v })
-      .then(() => {
-        toast.success(LL.WRITE_CMD_SENT());
-      })
-      .catch((error: Error) => {
-        toast.error(error.message);
-      })
-      .finally(async () => {
-        setDeviceValueDialogOpen(false);
-        await sendDeviceData(id);
-        setSelectedDeviceValue(undefined);
-      });
-  };
-
-  const renderDeviceDetails = () => {
-    if (showDeviceInfo) {
-      const deviceIndex = coreData.devices.findIndex(
-        (d) => d.id === device_select.state.id
-      );
-      if (deviceIndex === -1) {
-        return;
-      }
-
-      return (
-        <Dialog
-          sx={dialogStyle}
-          open={showDeviceInfo}
-          onClose={() => setShowDeviceInfo(false)}
-        >
-          <DialogTitle>{LL.DEVICE_DETAILS()}</DialogTitle>
-          <DialogContent dividers>
-            <List dense={true}>
-              <ListItem>
-                <ListItemText
-                  primary={LL.TYPE(0)}
-                  secondary={coreData.devices[deviceIndex].tn}
-                />
-              </ListItem>
-              <ListItem>
-                <ListItemText
-                  primary={LL.NAME(0)}
-                  secondary={coreData.devices[deviceIndex].n}
-                />
-              </ListItem>
-              {coreData.devices[deviceIndex].t !== DeviceType.CUSTOM && (
-                <>
-                  <ListItem>
-                    <ListItemText
-                      primary={LL.BRAND()}
-                      secondary={coreData.devices[deviceIndex].b}
-                    />
-                  </ListItem>
-                  <ListItem>
-                    <ListItemText
-                      primary={LL.ID_OF(LL.DEVICE())}
-                      secondary={
-                        '0x' +
-                        (
-                          '00' +
-                          coreData.devices[deviceIndex].d.toString(16).toUpperCase()
-                        ).slice(-2)
-                      }
-                    />
-                  </ListItem>
-                  <ListItem>
-                    <ListItemText
-                      primary={LL.ID_OF(LL.PRODUCT())}
-                      secondary={coreData.devices[deviceIndex].p}
-                    />
-                  </ListItem>
-                  <ListItem>
-                    <ListItemText
-                      primary={LL.VERSION()}
-                      secondary={coreData.devices[deviceIndex].v}
-                    />
-                  </ListItem>
-                </>
-              )}
-            </List>
-          </DialogContent>
-          <DialogActions>
-            <Button
-              variant="outlined"
-              onClick={() => setShowDeviceInfo(false)}
-              color="secondary"
-            >
-              {LL.CLOSE()}
-            </Button>
-          </DialogActions>
-        </Dialog>
-      );
-    }
-  };
-
-  const renderCoreData = () => (
-    <>
-      <IconContext.Provider
-        value={{
-          color: 'lightblue',
-          size: '18',
-          style: { verticalAlign: 'middle' }
-        }}
-      >
-        {!coreData.connected && (
-          <MessageBox my={2} level="error" message={LL.EMS_BUS_WARNING()} />
-        )}
-
-        {coreData.connected && (
-          <Table
-            data={{ nodes: coreData.devices }}
-            select={device_select}
-            theme={device_theme}
-            layout={{ custom: true }}
-          >
-            {(tableList: Device[]) => (
-              <>
-                <Header>
-                  <HeaderRow>
-                    <HeaderCell resize>{LL.DESCRIPTION()}</HeaderCell>
-                    <HeaderCell stiff>{LL.TYPE(0)}</HeaderCell>
-                  </HeaderRow>
-                </Header>
-                <Body>
-                  {tableList.length === 0 && (
-                    <CircularProgress sx={{ margin: 1 }} size={18} />
-                  )}
-                  {tableList.map((device: Device) => (
-                    <Row key={device.id} item={device}>
-                      <Cell>
-                        <DeviceIcon type_id={device.t} />
-                        &nbsp;&nbsp;
-                        {device.n}
-                        <span style={{ color: 'lightblue' }}>
-                          &nbsp;&nbsp;({device.e})
-                        </span>
-                      </Cell>
-                      <Cell stiff>{device.tn}</Cell>
-                    </Row>
-                  ))}
-                </Body>
-              </>
-            )}
-          </Table>
-        )}
-      </IconContext.Provider>
-    </>
-  );
-
-  const deviceValueDialogClose = () => {
-    setDeviceValueDialogOpen(false);
-    void sendDeviceData(selectedDevice);
-  };
-
-  const renderDeviceData = () => {
-    if (!selectedDevice) {
-      return;
-    }
-
-    const showDeviceValue = (dv: DeviceValue) => {
-      setSelectedDeviceValue(dv);
-      setDeviceValueDialogOpen(true);
-    };
-
-    const renderNameCell = (dv: DeviceValue) => (
-      <>
-        {dv.id.slice(2)}&nbsp;
-        {hasMask(dv.id, DeviceEntityMask.DV_FAVORITE) && (
-          <StarIcon color="primary" sx={{ fontSize: 12 }} />
-        )}
-        {hasMask(dv.id, DeviceEntityMask.DV_READONLY) && (
-          <EditOffOutlinedIcon color="primary" sx={{ fontSize: 12 }} />
-        )}
-        {hasMask(dv.id, DeviceEntityMask.DV_API_MQTT_EXCLUDE) && (
-          <CommentsDisabledOutlinedIcon color="primary" sx={{ fontSize: 12 }} />
-        )}
-      </>
-    );
-
-    const shown_data = onlyFav
-      ? deviceData.nodes.filter((dv) => hasMask(dv.id, DeviceEntityMask.DV_FAVORITE))
-      : deviceData.nodes;
-
-    const deviceIndex = coreData.devices.findIndex(
-      (d) => d.id === device_select.state.id
-    );
-    if (deviceIndex === -1) {
-      return;
-    }
-
-    return (
-      <Box
-        sx={{
-          backgroundColor: 'black',
-          position: 'absolute',
-          left: () => leftOffset(),
-          right: 0,
-          bottom: 0,
-          top: 64,
-          zIndex: 'modal',
-          maxHeight: () => size[1] - 126,
-          border: '1px solid #177ac9'
-        }}
-      >
-        <Box sx={{ border: '1px solid #177ac9' }}>
-          <Typography noWrap variant="subtitle1" color="warning.main" sx={{ ml: 1 }}>
-            {coreData.devices[deviceIndex].n}&nbsp;(
-            {coreData.devices[deviceIndex].tn})
-          </Typography>
-
-          <Grid container justifyContent="space-between">
-            <Typography sx={{ ml: 1 }} variant="subtitle2" color="grey">
-              {LL.SHOWING() +
-                ' ' +
-                shown_data.length +
-                '/' +
-                coreData.devices[deviceIndex].e +
-                ' ' +
-                LL.ENTITIES(shown_data.length)}
-              <ButtonTooltip title="Info">
-                <IconButton onClick={() => setShowDeviceInfo(true)}>
-                  <InfoOutlinedIcon color="primary" sx={{ fontSize: 18 }} />
-                </IconButton>
-              </ButtonTooltip>
-              {me.admin && (
-                <ButtonTooltip title={LL.CUSTOMIZATIONS()}>
-                  <IconButton onClick={customize}>
-                    <FormatListNumberedIcon color="primary" sx={{ fontSize: 18 }} />
-                  </IconButton>
-                </ButtonTooltip>
-              )}
-              <ButtonTooltip title={LL.EXPORT()}>
-                <IconButton onClick={handleDownloadCsv}>
-                  <DownloadIcon color="primary" sx={{ fontSize: 18 }} />
-                </IconButton>
-              </ButtonTooltip>
-              <ButtonTooltip title={LL.FAVORITES()}>
-                <IconButton onClick={() => setOnlyFav(!onlyFav)}>
-                  {onlyFav ? (
-                    <StarIcon color="primary" sx={{ fontSize: 18 }} />
-                  ) : (
-                    <StarBorderOutlinedIcon color="primary" sx={{ fontSize: 18 }} />
-                  )}
-                </IconButton>
-              </ButtonTooltip>
-            </Typography>
-            <Grid justifyContent="flex-end">
-              <ButtonTooltip title={LL.CANCEL()}>
-                <IconButton onClick={resetDeviceSelect}>
-                  <HighlightOffIcon color="primary" sx={{ fontSize: 18 }} />
-                </IconButton>
-              </ButtonTooltip>
-            </Grid>
-          </Grid>
-        </Box>
-
-        <Table
-          data={{ nodes: shown_data }}
-          theme={data_theme}
-          sort={dv_sort}
-          layout={{ custom: true, fixedHeader: true }}
-        >
-          {(tableList: DeviceValue[]) => (
-            <>
-              <Header>
-                <HeaderRow>
-                  <HeaderCell resize>
-                    <Button
-                      fullWidth
-                      style={{ fontSize: '14px', justifyContent: 'flex-start' }}
-                      endIcon={getSortIcon(dv_sort.state, 'NAME')}
-                      onClick={() => dv_sort.fns.onToggleSort({ sortKey: 'NAME' })}
-                    >
-                      {LL.ENTITY_NAME(0)}
-                    </Button>
-                  </HeaderCell>
-                  <HeaderCell resize>
-                    <Button
-                      fullWidth
-                      style={{ fontSize: '14px', justifyContent: 'flex-end' }}
-                      endIcon={getSortIcon(dv_sort.state, 'VALUE')}
-                      onClick={() => dv_sort.fns.onToggleSort({ sortKey: 'VALUE' })}
-                    >
-                      {LL.VALUE(0)}
-                    </Button>
-                  </HeaderCell>
-                  <HeaderCell stiff />
-                </HeaderRow>
-              </Header>
-              <Body>
-                {tableList.map((dv: DeviceValue) => (
-                  <Row key={dv.id} item={dv} onClick={() => showDeviceValue(dv)}>
-                    <Cell>{renderNameCell(dv)}</Cell>
-                    <Cell>{formatValue(LL, dv.v, dv.u)}</Cell>
-                    <Cell stiff>
-                      {me.admin &&
-                        dv.c &&
-                        !hasMask(dv.id, DeviceEntityMask.DV_READONLY) && (
-                          <IconButton
-                            size="small"
-                            onClick={() => showDeviceValue(dv)}
-                          >
-                            {dv.v === '' ? (
-                              <PlayArrowIcon color="primary" sx={{ fontSize: 16 }} />
-                            ) : (
-                              <EditIcon color="primary" sx={{ fontSize: 16 }} />
-                            )}
-                          </IconButton>
-                        )}
-                    </Cell>
-                  </Row>
-                ))}
-              </Body>
-            </>
-          )}
-        </Table>
-      </Box>
-    );
-  };
-
-  return (
-    <SectionContent id="devices-window">
-      {renderCoreData()}
-      {renderDeviceData()}
-      {renderDeviceDetails()}
-      {selectedDeviceValue && (
-        <DevicesDialog
-          open={deviceValueDialogOpen}
-          onClose={deviceValueDialogClose}
-          onSave={deviceValueDialogSave}
-          selectedItem={selectedDeviceValue}
-          writeable={
-            selectedDeviceValue.c !== undefined &&
-            !hasMask(selectedDeviceValue.id, DeviceEntityMask.DV_READONLY)
-          }
-          validator={deviceValueItemValidation(selectedDeviceValue)}
-          progress={submitting}
-        />
-      )}
-    </SectionContent>
-  );
-};
-
-export default Devices;

interface/src/app/main/Help.tsx

@@ -1,191 +0,0 @@
-import { useContext, useState } from 'react';
-import { toast } from 'react-toastify';
-
-import CommentIcon from '@mui/icons-material/CommentTwoTone';
-import DownloadIcon from '@mui/icons-material/GetApp';
-import GitHubIcon from '@mui/icons-material/GitHub';
-import MenuBookIcon from '@mui/icons-material/MenuBookTwoTone';
-import {
-  Avatar,
-  Box,
-  Button,
-  Divider,
-  Link,
-  List,
-  ListItem,
-  ListItemAvatar,
-  ListItemButton,
-  ListItemText,
-  Stack,
-  Typography
-} from '@mui/material';
-
-import { useRequest } from 'alova/client';
-import { SectionContent, useLayoutTitle } from 'components';
-import { AuthenticatedContext } from 'contexts/authentication';
-import { useI18nContext } from 'i18n/i18n-react';
-import { saveFile } from 'utils';
-
-import { API, callAction } from '../../api/app';
-import type { APIcall } from './types';
-
-const Help = () => {
-  const { LL } = useI18nContext();
-  useLayoutTitle(LL.HELP());
-
-  const { me } = useContext(AuthenticatedContext);
-
-  const [customSupportIMG, setCustomSupportIMG] = useState<string | null>(null);
-  const [customSupportHTML, setCustomSupportHTML] = useState<string | null>(null);
-  const [notFound, setNotFound] = useState<boolean>(false);
-
-  useRequest(() => callAction({ action: 'customSupport' })).onSuccess((event) => {
-    if (event && event.data && Object.keys(event.data).length !== 0) {
-      const data = event.data.Support;
-      if (data.img_url) {
-        setCustomSupportIMG(data.img_url);
-      }
-      if (data.html) {
-        setCustomSupportHTML(data.html.join('<br/>'));
-      }
-    }
-  });
-
-  // const { send: sendExportAllValues } = useRequest(
-  //   () => callAction({ action: 'export', param: 'allvalues' }),
-  //   {
-  //     immediate: false
-  //   }
-  // )
-  //   .onSuccess((event) => {
-  //     saveFile(event.data, 'allvalues', '.txt');
-  //     toast.info(LL.DOWNLOAD_SUCCESSFUL());
-  //   })
-  //   .onError((error) => {
-  //     toast.error(error.message);
-  //   });
-
-  const { send: sendAPI } = useRequest((data: APIcall) => API(data), {
-    immediate: false
-  })
-    .onSuccess((event) => {
-      saveFile(event.data, 'system_info', '.json');
-      toast.info(LL.DOWNLOAD_SUCCESSFUL());
-    })
-    .onError((error) => {
-      toast.error(error.message);
-    });
-
-  return (
-    <SectionContent>
-      <Stack
-        padding={1}
-        mb={2}
-        direction="row"
-        divider={<Divider orientation="vertical" flexItem />}
-        sx={{
-          borderRadius: 3,
-          border: '2px solid grey',
-          justifyContent: 'space-evenly',
-          alignItems: 'center'
-        }}
-      >
-        <Typography variant="subtitle1">
-          {customSupportHTML ? (
-            <div dangerouslySetInnerHTML={{ __html: customSupportHTML }} />
-          ) : (
-            LL.HELP_INFORMATION_5()
-          )}
-        </Typography>
-        <Box
-          component="img"
-          referrerPolicy="no-referrer"
-          sx={{
-            maxHeight: { xs: 100, md: 250 }
-          }}
-          onError={() => setNotFound(true)}
-          src={
-            notFound
-              ? ''
-              : customSupportIMG || 'https://emsesp.org/_media/images/installer.jpeg'
-          }
-        />
-      </Stack>
-
-      {me.admin && (
-        <List sx={{ borderRadius: 3, border: '2px solid grey' }}>
-          <ListItem>
-            <ListItemButton component="a" href="https://emsesp.org">
-              <ListItemAvatar>
-                <Avatar sx={{ bgcolor: '#72caf9' }}>
-                  <MenuBookIcon />
-                </Avatar>
-              </ListItemAvatar>
-              <ListItemText primary={LL.HELP_INFORMATION_1()} />
-            </ListItemButton>
-          </ListItem>
-
-          <ListItem>
-            <ListItemButton component="a" href="https://discord.gg/3J3GgnzpyT">
-              <ListItemAvatar>
-                <Avatar sx={{ bgcolor: '#72caf9' }}>
-                  <CommentIcon />
-                </Avatar>
-              </ListItemAvatar>
-              <ListItemText primary={LL.HELP_INFORMATION_2()} />
-            </ListItemButton>
-          </ListItem>
-
-          <ListItem>
-            <ListItemButton
-              component="a"
-              href="https://github.com/emsesp/EMS-ESP32/issues/new/choose"
-            >
-              <ListItemAvatar>
-                <Avatar sx={{ bgcolor: '#72caf9' }}>
-                  <GitHubIcon />
-                </Avatar>
-              </ListItemAvatar>
-              <ListItemText primary={LL.HELP_INFORMATION_3()} />
-            </ListItemButton>
-          </ListItem>
-        </List>
-      )}
-
-      <Box p={2} color="warning.main">
-        <Typography mb={1} variant="body1">
-          {LL.HELP_INFORMATION_4()}.
-        </Typography>
-        <Button
-          startIcon={<DownloadIcon />}
-          variant="outlined"
-          color="primary"
-          onClick={() => sendAPI({ device: 'system', cmd: 'info', id: 0 })}
-        >
-          {LL.SUPPORT_INFORMATION(0)}
-        </Button>
-      </Box>
-
-      {/* <Button
-        sx={{ ml: 2 }}
-        startIcon={<DownloadIcon />}
-        variant="outlined"
-        color="primary"
-        onClick={() => sendExportAllValues()}
-      >
-        {LL.DOWNLOAD(1)}&nbsp;{LL.ALLVALUES()}
-      </Button> */}
-
-      <Divider sx={{ mt: 4 }} />
-
-      <Typography color="white" variant="subtitle1" align="center" mt={1}>
-        &copy;&nbsp;
-        <Link target="_blank" href="https://emsesp.org" color="primary">
-          {'emsesp.org'}
-        </Link>
-      </Typography>
-    </SectionContent>
-  );
-};
-
-export default Help;

interface/src/app/main/Modules.tsx

@@ -1,269 +0,0 @@
-import { useCallback, useState } from 'react';
-import { useBlocker } from 'react-router-dom';
-import { toast } from 'react-toastify';
-
-import CancelIcon from '@mui/icons-material/Cancel';
-import CircleIcon from '@mui/icons-material/Circle';
-import WarningIcon from '@mui/icons-material/Warning';
-import { Box, Button, Typography } from '@mui/material';
-
-import {
-  Body,
-  Cell,
-  Header,
-  HeaderCell,
-  HeaderRow,
-  Row,
-  Table
-} from '@table-library/react-table-library/table';
-import { useTheme } from '@table-library/react-table-library/theme';
-import { updateState, useRequest } from 'alova/client';
-import {
-  BlockNavigation,
-  ButtonRow,
-  FormLoader,
-  SectionContent,
-  useLayoutTitle
-} from 'components';
-import { useI18nContext } from 'i18n/i18n-react';
-
-import { readModules, writeModules } from '../../api/app';
-import ModulesDialog from './ModulesDialog';
-import type { ModuleItem } from './types';
-
-const Modules = () => {
-  const { LL } = useI18nContext();
-  const [numChanges, setNumChanges] = useState<number>(0);
-  const blocker = useBlocker(numChanges !== 0);
-
-  const [selectedModuleItem, setSelectedModuleItem] = useState<ModuleItem>();
-  const [dialogOpen, setDialogOpen] = useState<boolean>(false);
-
-  useLayoutTitle(LL.MODULES());
-
-  const {
-    data: modules,
-    send: fetchModules,
-    error
-  } = useRequest(readModules, {
-    initialData: []
-  });
-
-  const { send: updateModules } = useRequest(
-    (data: { key: string; enabled: boolean; license: string }) => writeModules(data),
-    {
-      immediate: false
-    }
-  );
-
-  const modules_theme = useTheme({
-    Table: `
-      --data-table-library_grid-template-columns: 48px 180px 120px 100px repeat(1, minmax(160px, 1fr)) 180px;
-    `,
-    BaseRow: `
-      font-size: 14px;
-      .td {
-        height: 32px;
-      }
-    `,
-    BaseCell: `
-      &:nth-of-type(1) {
-        text-align: center;
-      }
-    `,
-    HeaderRow: `
-      text-transform: uppercase;
-      background-color: black;
-      color: #90CAF9;
-      .th {
-        border-bottom: 1px solid #565656;
-        height: 36px;
-      }
-    `,
-    Row: `
-      background-color: #1e1e1e;
-      position: relative;
-      cursor: pointer;
-      .td {
-        border-top: 1px solid #565656;
-        border-bottom: 1px solid #565656;
-      }
-      &:hover .td {
-        border-top: 1px solid #177ac9;
-        border-bottom: 1px solid #177ac9;
-      }
-      &:nth-of-type(odd) .td {
-        background-color: #303030;
-      }
-    `
-  });
-
-  const onDialogClose = () => {
-    setDialogOpen(false);
-  };
-
-  const onDialogSave = (updatedItem: ModuleItem) => {
-    setDialogOpen(false);
-    updateModuleItem(updatedItem);
-  };
-
-  const editModuleItem = useCallback((mi: ModuleItem) => {
-    setSelectedModuleItem(mi);
-    setDialogOpen(true);
-  }, []);
-
-  const onCancel = async () => {
-    await fetchModules().then(() => {
-      setNumChanges(0);
-    });
-  };
-
-  function hasModulesChanged(mi: ModuleItem) {
-    return mi.enabled !== mi.o_enabled || mi.license !== mi.o_license;
-  }
-
-  const updateModuleItem = (updatedItem: ModuleItem) => {
-    void updateState(readModules(), (data: ModuleItem[]) => {
-      const new_data = data.map((mi) =>
-        mi.id === updatedItem.id ? { ...mi, ...updatedItem } : mi
-      );
-      setNumChanges(new_data.filter((mi) => hasModulesChanged(mi)).length);
-      return new_data;
-    });
-  };
-
-  const saveModules = async () => {
-    await updateModules({
-      modules: modules.map((condensed_mi) => ({
-        key: condensed_mi.key,
-        enabled: condensed_mi.enabled,
-        license: condensed_mi.license
-      }))
-    })
-      .then(() => {
-        toast.success(LL.MODULES_UPDATED());
-      })
-      .catch((error: Error) => {
-        toast.error(error.message);
-      })
-      .finally(async () => {
-        await fetchModules();
-        setNumChanges(0);
-      });
-  };
-
-  const renderContent = () => {
-    if (!modules) {
-      return <FormLoader onRetry={fetchModules} errorMessage={error?.message} />;
-    }
-
-    if (modules.length === 0) {
-      return (
-        <Typography variant="body2" color="error">
-          {LL.MODULES_NONE()}
-        </Typography>
-      );
-    }
-
-    const colorStatus = (status: number) => {
-      if (status === 1) {
-        return <div style={{ color: 'red' }}>Pending Activation</div>;
-      }
-      return <div style={{ color: '#00FF7F' }}>Activated</div>;
-    };
-
-    return (
-      <>
-        <Box mb={2} color="warning.main">
-          <Typography variant="body1">{LL.MODULES_DESCRIPTION()}.</Typography>
-        </Box>
-        <Table
-          data={{ nodes: modules }}
-          theme={modules_theme}
-          layout={{ custom: true }}
-        >
-          {(tableList: ModuleItem[]) => (
-            <>
-              <Header>
-                <HeaderRow>
-                  <HeaderCell />
-                  <HeaderCell>{LL.NAME(0)}</HeaderCell>
-                  <HeaderCell>Author</HeaderCell>
-                  <HeaderCell>{LL.VERSION()}</HeaderCell>
-                  <HeaderCell>Message</HeaderCell>
-                  <HeaderCell>{LL.STATUS_OF('')}</HeaderCell>
-                </HeaderRow>
-              </Header>
-              <Body>
-                {tableList.map((mi: ModuleItem) => (
-                  <Row key={mi.id} item={mi} onClick={() => editModuleItem(mi)}>
-                    <Cell stiff>
-                      {mi.enabled ? (
-                        <CircleIcon
-                          color="success"
-                          sx={{ fontSize: 16, verticalAlign: 'middle' }}
-                        />
-                      ) : (
-                        <CircleIcon
-                          color="error"
-                          sx={{ fontSize: 16, verticalAlign: 'middle' }}
-                        />
-                      )}
-                    </Cell>
-                    <Cell>{mi.name}</Cell>
-                    <Cell>{mi.author}</Cell>
-                    <Cell>{mi.version}</Cell>
-                    <Cell>{mi.message}</Cell>
-                    <Cell>{colorStatus(mi.status)}</Cell>
-                  </Row>
-                ))}
-              </Body>
-            </>
-          )}
-        </Table>
-
-        <Box mt={1} display="flex" flexWrap="wrap">
-          <Box flexGrow={1}>
-            {numChanges !== 0 && (
-              <ButtonRow>
-                <Button
-                  startIcon={<CancelIcon />}
-                  variant="outlined"
-                  onClick={onCancel}
-                  color="secondary"
-                >
-                  {LL.CANCEL()}
-                </Button>
-                <Button
-                  startIcon={<WarningIcon color="warning" />}
-                  variant="contained"
-                  color="info"
-                  onClick={saveModules}
-                >
-                  {LL.APPLY_CHANGES(numChanges)}
-                </Button>
-              </ButtonRow>
-            )}
-          </Box>
-        </Box>
-      </>
-    );
-  };
-
-  return (
-    <SectionContent>
-      {blocker ? <BlockNavigation blocker={blocker} /> : null}
-      {renderContent()}
-      {selectedModuleItem && (
-        <ModulesDialog
-          open={dialogOpen}
-          onClose={onDialogClose}
-          onSave={onDialogSave}
-          selectedItem={selectedModuleItem}
-        />
-      )}
-    </SectionContent>
-  );
-};
-
-export default Modules;

interface/src/app/main/ModulesDialog.tsx

@@ -1,106 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import CancelIcon from '@mui/icons-material/Cancel';
-import DoneIcon from '@mui/icons-material/Done';
-import {
-  Box,
-  Button,
-  Checkbox,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  TextField
-} from '@mui/material';
-import Grid from '@mui/material/Grid2';
-
-import { dialogStyle } from 'CustomTheme';
-import { BlockFormControlLabel } from 'components';
-import { useI18nContext } from 'i18n/i18n-react';
-import { updateValue } from 'utils';
-
-import type { ModuleItem } from './types';
-
-interface ModulesDialogProps {
-  open: boolean;
-  onClose: () => void;
-  onSave: (mi: ModuleItem) => void;
-  selectedItem: ModuleItem;
-}
-
-const ModulesDialog = ({
-  open,
-  onClose,
-  onSave,
-  selectedItem
-}: ModulesDialogProps) => {
-  const { LL } = useI18nContext();
-  const [editItem, setEditItem] = useState<ModuleItem>(selectedItem);
-
-  const updateFormValue = updateValue(setEditItem);
-
-  useEffect(() => {
-    if (open) {
-      setEditItem(selectedItem);
-    }
-  }, [open, selectedItem]);
-
-  const close = () => {
-    onClose();
-  };
-
-  const save = () => {
-    onSave(editItem);
-  };
-
-  return (
-    <Dialog sx={dialogStyle} fullWidth maxWidth="xs" open={open} onClose={onClose}>
-      <DialogTitle>{LL.EDIT() + ' ' + editItem.key}</DialogTitle>
-      <DialogContent dividers>
-        <Grid container>
-          <BlockFormControlLabel
-            control={
-              <Checkbox
-                checked={editItem.enabled}
-                onChange={updateFormValue}
-                name="enabled"
-              />
-            }
-            label="Enabled"
-          />
-        </Grid>
-        <Box mt={2} mb={1}>
-          <TextField
-            name="license"
-            label="License Key"
-            multiline
-            rows={6}
-            fullWidth
-            value={editItem.license}
-            onChange={updateFormValue}
-          />
-        </Box>
-      </DialogContent>
-      <DialogActions>
-        <Button
-          startIcon={<CancelIcon />}
-          variant="outlined"
-          onClick={close}
-          color="secondary"
-        >
-          {LL.CANCEL()}
-        </Button>
-        <Button
-          startIcon={<DoneIcon />}
-          variant="outlined"
-          onClick={save}
-          color="primary"
-        >
-          {LL.UPDATE()}
-        </Button>
-      </DialogActions>
-    </Dialog>
-  );
-};
-
-export default ModulesDialog;

interface/src/app/main/SchedulerDialog.tsx

@@ -1,401 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import AddIcon from '@mui/icons-material/Add';
-import CancelIcon from '@mui/icons-material/Cancel';
-import DoneIcon from '@mui/icons-material/Done';
-import PlayArrowIcon from '@mui/icons-material/PlayArrow';
-import RemoveIcon from '@mui/icons-material/RemoveCircleOutline';
-import {
-  Box,
-  Button,
-  Checkbox,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  TextField,
-  ToggleButton,
-  ToggleButtonGroup,
-  Typography
-} from '@mui/material';
-import Grid from '@mui/material/Grid2';
-
-import { dialogStyle } from 'CustomTheme';
-import type Schema from 'async-validator';
-import type { ValidateFieldsError } from 'async-validator';
-import { BlockFormControlLabel, ValidatedTextField } from 'components';
-import { useI18nContext } from 'i18n/i18n-react';
-import { updateValue } from 'utils';
-import { validate } from 'validators';
-
-import { ScheduleFlag } from './types';
-import type { ScheduleItem } from './types';
-
-interface SchedulerDialogProps {
-  open: boolean;
-  creating: boolean;
-  onClose: () => void;
-  onSave: (ei: ScheduleItem) => void;
-  selectedItem: ScheduleItem;
-  validator: Schema;
-  dow: string[];
-}
-
-const SchedulerDialog = ({
-  open,
-  creating,
-  onClose,
-  onSave,
-  selectedItem,
-  validator,
-  dow
-}: SchedulerDialogProps) => {
-  const { LL } = useI18nContext();
-  const [editItem, setEditItem] = useState<ScheduleItem>(selectedItem);
-  const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
-
-  const [scheduleType, setScheduleType] = useState<ScheduleFlag>();
-
-  const updateFormValue = updateValue(setEditItem);
-
-  useEffect(() => {
-    if (open) {
-      setFieldErrors(undefined);
-      setEditItem(selectedItem);
-      // set the flags based on type when page is loaded...
-      // 0-127 is day schedule
-      // 128 is timer
-      // 129 is on change
-      // 130 is on condition
-      // 132 is immediate
-      setScheduleType(
-        selectedItem.flags < 128 ? ScheduleFlag.SCHEDULE_DAY : selectedItem.flags
-      );
-    }
-  }, [open, selectedItem]);
-
-  const save = async () => {
-    try {
-      setFieldErrors(undefined);
-      await validate(validator, editItem);
-      onSave(editItem);
-    } catch (error) {
-      setFieldErrors(error as ValidateFieldsError);
-    }
-  };
-
-  const saveandactivate = async () => {
-    editItem.active = true;
-    try {
-      setFieldErrors(undefined);
-      await validate(validator, editItem);
-      onSave(editItem);
-    } catch (error) {
-      setFieldErrors(error as ValidateFieldsError);
-    }
-  };
-
-  const remove = () => {
-    editItem.deleted = true;
-    onSave(editItem);
-  };
-
-  const getFlagDOWnumber = (newFlag: string[]) => {
-    let new_flag = 0;
-    for (const entry of newFlag) {
-      new_flag |= Number(entry);
-    }
-    return new_flag & 127;
-  };
-
-  const getFlagDOWstring = (f: number) => {
-    const new_flags: string[] = [];
-    if ((f & 129) === 1) {
-      new_flags.push('1');
-    }
-    if ((f & 130) === 2) {
-      new_flags.push('2');
-    }
-    if ((f & 4) === 4) {
-      new_flags.push('4');
-    }
-    if ((f & 8) === 8) {
-      new_flags.push('8');
-    }
-    if ((f & 16) === 16) {
-      new_flags.push('16');
-    }
-    if ((f & 32) === 32) {
-      new_flags.push('32');
-    }
-    if ((f & 64) === 64) {
-      new_flags.push('64');
-    }
-
-    return new_flags;
-  };
-
-  const showDOW = (si: ScheduleItem, flag: number) => (
-    <Typography
-      sx={{ fontSize: 10 }}
-      color={(si.flags & flag) === flag ? 'primary' : 'grey'}
-    >
-      {dow[Math.log(flag) / Math.log(2)]}
-    </Typography>
-  );
-
-  const handleClose = (_event, reason: 'backdropClick' | 'escapeKeyDown') => {
-    if (reason !== 'backdropClick') {
-      onClose();
-    }
-  };
-
-  return (
-    <Dialog sx={dialogStyle} open={open} onClose={handleClose}>
-      <DialogTitle>
-        {creating ? LL.ADD(1) + ' ' + LL.NEW(0) : LL.EDIT()}&nbsp;
-        {LL.SCHEDULE(1)}
-      </DialogTitle>
-      <DialogContent dividers>
-        <ToggleButtonGroup
-          size="small"
-          color="secondary"
-          value={scheduleType}
-          exclusive
-          disabled={!creating}
-          onChange={(_event, flag: ScheduleFlag) => {
-            if (flag !== null) {
-              setFieldErrors(undefined); // clear any validation errors
-              setScheduleType(flag);
-              // wipe the time field when changing the schedule type
-              setEditItem({ ...editItem, time: '' });
-              // set the flags based on type
-              // 0-127 is day schedule
-              // 128 is timer
-              // 129 is on change
-              // 130 is on condition
-              // 132 is immediate
-              setEditItem(
-                flag === ScheduleFlag.SCHEDULE_DAY
-                  ? { ...editItem, flags: 0 }
-                  : { ...editItem, flags: flag }
-              );
-            }
-          }}
-        >
-          <ToggleButton value={ScheduleFlag.SCHEDULE_DAY}>
-            <Typography
-              sx={{ fontSize: 10 }}
-              color={scheduleType === ScheduleFlag.SCHEDULE_DAY ? 'primary' : 'grey'}
-            >
-              {LL.SCHEDULE(0)}
-            </Typography>
-          </ToggleButton>
-          <ToggleButton value={ScheduleFlag.SCHEDULE_TIMER}>
-            <Typography
-              sx={{ fontSize: 10 }}
-              color={
-                scheduleType === ScheduleFlag.SCHEDULE_TIMER ? 'primary' : 'grey'
-              }
-            >
-              {LL.TIMER(0)}
-            </Typography>
-          </ToggleButton>
-          <ToggleButton value={ScheduleFlag.SCHEDULE_ONCHANGE}>
-            <Typography
-              sx={{ fontSize: 10 }}
-              color={
-                scheduleType === ScheduleFlag.SCHEDULE_ONCHANGE ? 'primary' : 'grey'
-              }
-            >
-              {LL.ONCHANGE()}
-            </Typography>
-          </ToggleButton>
-          <ToggleButton value={ScheduleFlag.SCHEDULE_CONDITION}>
-            <Typography
-              sx={{ fontSize: 10 }}
-              color={
-                scheduleType === ScheduleFlag.SCHEDULE_CONDITION ? 'primary' : 'grey'
-              }
-            >
-              {LL.CONDITION()}
-            </Typography>
-          </ToggleButton>
-          <ToggleButton value={ScheduleFlag.SCHEDULE_IMMEDIATE}>
-            <Typography
-              sx={{ fontSize: 10 }}
-              color={
-                scheduleType === ScheduleFlag.SCHEDULE_IMMEDIATE ? 'primary' : 'grey'
-              }
-            >
-              {LL.IMMEDIATE()}
-            </Typography>
-          </ToggleButton>
-        </ToggleButtonGroup>
-
-        {scheduleType === ScheduleFlag.SCHEDULE_DAY && (
-          <ToggleButtonGroup
-            size="small"
-            color="secondary"
-            value={getFlagDOWstring(editItem.flags)}
-            onChange={(_event, flag: string[]) => {
-              setEditItem({ ...editItem, flags: getFlagDOWnumber(flag) });
-            }}
-          >
-            <ToggleButton value="2">
-              {showDOW(editItem, ScheduleFlag.SCHEDULE_MON)}
-            </ToggleButton>
-            <ToggleButton value="4">
-              {showDOW(editItem, ScheduleFlag.SCHEDULE_TUE)}
-            </ToggleButton>
-            <ToggleButton value="8">
-              {showDOW(editItem, ScheduleFlag.SCHEDULE_WED)}
-            </ToggleButton>
-            <ToggleButton value="16">
-              {showDOW(editItem, ScheduleFlag.SCHEDULE_THU)}
-            </ToggleButton>
-            <ToggleButton value="32">
-              {showDOW(editItem, ScheduleFlag.SCHEDULE_FRI)}
-            </ToggleButton>
-            <ToggleButton value="64">
-              {showDOW(editItem, ScheduleFlag.SCHEDULE_SAT)}
-            </ToggleButton>
-            <ToggleButton value="1">
-              {showDOW(editItem, ScheduleFlag.SCHEDULE_SUN)}
-            </ToggleButton>
-          </ToggleButtonGroup>
-        )}
-
-        {scheduleType !== ScheduleFlag.SCHEDULE_IMMEDIATE && (
-          <>
-            <Grid container>
-              <BlockFormControlLabel
-                control={
-                  <Checkbox
-                    checked={editItem.active}
-                    onChange={updateFormValue}
-                    name="active"
-                  />
-                }
-                label={LL.ACTIVE()}
-              />
-            </Grid>
-            <Grid container>
-              {scheduleType === ScheduleFlag.SCHEDULE_DAY ||
-              scheduleType === ScheduleFlag.SCHEDULE_TIMER ? (
-                <>
-                  <TextField
-                    name="time"
-                    type="time"
-                    label={
-                      scheduleType === ScheduleFlag.SCHEDULE_TIMER
-                        ? LL.TIMER(1)
-                        : LL.TIME(1)
-                    }
-                    value={editItem.time === '' ? '00:00' : editItem.time}
-                    margin="normal"
-                    onChange={updateFormValue}
-                  />
-                  {scheduleType === ScheduleFlag.SCHEDULE_TIMER && (
-                    <Box color="warning.main" ml={2} mt={4}>
-                      <Typography variant="body2">
-                        {LL.SCHEDULER_HELP_2()}
-                      </Typography>
-                    </Box>
-                  )}
-                </>
-              ) : (
-                <TextField
-                  name="time"
-                  label={
-                    scheduleType === ScheduleFlag.SCHEDULE_CONDITION
-                      ? LL.CONDITION()
-                      : scheduleType === ScheduleFlag.SCHEDULE_ONCHANGE
-                        ? LL.ONCHANGE()
-                        : LL.IMMEDIATE()
-                  }
-                  multiline
-                  fullWidth
-                  value={editItem.time === '00:00' ? '' : editItem.time}
-                  margin="normal"
-                  onChange={updateFormValue}
-                />
-              )}
-            </Grid>
-          </>
-        )}
-        <ValidatedTextField
-          fieldErrors={fieldErrors}
-          name="cmd"
-          label={LL.COMMAND(0)}
-          multiline
-          fullWidth
-          value={editItem.cmd}
-          margin="normal"
-          onChange={updateFormValue}
-        />
-        <TextField
-          name="value"
-          label={LL.VALUE(0)}
-          multiline
-          margin="normal"
-          fullWidth
-          value={editItem.value}
-          onChange={updateFormValue}
-        />
-        <ValidatedTextField
-          fieldErrors={fieldErrors}
-          name="name"
-          label={LL.NAME(0) + ' (' + LL.OPTIONAL() + ')'}
-          value={editItem.name}
-          fullWidth
-          margin="normal"
-          onChange={updateFormValue}
-        />
-      </DialogContent>
-
-      <DialogActions>
-        {!creating && (
-          <Box flexGrow={1}>
-            <Button
-              startIcon={<RemoveIcon />}
-              variant="outlined"
-              color="warning"
-              onClick={remove}
-            >
-              {LL.REMOVE()}
-            </Button>
-          </Box>
-        )}
-        <Button
-          startIcon={<CancelIcon />}
-          variant="outlined"
-          onClick={onClose}
-          color="secondary"
-        >
-          {LL.CANCEL()}
-        </Button>
-        <Button
-          startIcon={creating ? <AddIcon /> : <DoneIcon />}
-          variant="outlined"
-          onClick={save}
-          color="primary"
-        >
-          {creating ? LL.ADD(0) : LL.UPDATE()}
-        </Button>
-        {scheduleType === ScheduleFlag.SCHEDULE_IMMEDIATE && editItem.cmd !== '' && (
-          <Button
-            startIcon={<PlayArrowIcon />}
-            variant="outlined"
-            onClick={saveandactivate}
-            color="success"
-          >
-            {LL.EXECUTE()}
-          </Button>
-        )}
-      </DialogActions>
-    </Dialog>
-  );
-};
-
-export default SchedulerDialog;

interface/src/app/main/validators.ts

@@ -1,504 +0,0 @@
-import Schema from 'async-validator';
-import type { InternalRuleItem } from 'async-validator';
-import { IP_OR_HOSTNAME_VALIDATOR } from 'validators/shared';
-
-import type {
-  AnalogSensor,
-  DeviceValue,
-  EntityItem,
-  ScheduleItem,
-  Settings,
-  TemperatureSensor
-} from './types';
-
-export const GPIO_VALIDATOR = {
-  validator(
-    rule: InternalRuleItem,
-    value: number,
-    callback: (error?: string) => void
-  ) {
-    if (
-      value &&
-      (value === 1 ||
-        (value >= 6 && value <= 11) ||
-        value === 20 ||
-        value === 24 ||
-        (value >= 28 && value <= 31) ||
-        value > 40 ||
-        value < 0)
-    ) {
-      callback('Must be an valid GPIO port');
-    } else {
-      callback();
-    }
-  }
-};
-
-export const GPIO_VALIDATORR = {
-  validator(
-    rule: InternalRuleItem,
-    value: number,
-    callback: (error?: string) => void
-  ) {
-    if (
-      value &&
-      (value === 1 ||
-        (value >= 6 && value <= 11) ||
-        (value >= 16 && value <= 17) ||
-        value === 20 ||
-        value === 24 ||
-        (value >= 28 && value <= 31) ||
-        value > 40 ||
-        value < 0)
-    ) {
-      callback('Must be an valid GPIO port');
-    } else {
-      callback();
-    }
-  }
-};
-
-export const GPIO_VALIDATORC3 = {
-  validator(
-    rule: InternalRuleItem,
-    value: number,
-    callback: (error?: string) => void
-  ) {
-    if (value && ((value >= 11 && value <= 19) || value > 21 || value < 0)) {
-      callback('Must be an valid GPIO port');
-    } else {
-      callback();
-    }
-  }
-};
-
-export const GPIO_VALIDATORS2 = {
-  validator(
-    rule: InternalRuleItem,
-    value: number,
-    callback: (error?: string) => void
-  ) {
-    if (
-      value &&
-      ((value >= 19 && value <= 20) ||
-        (value >= 22 && value <= 32) ||
-        value > 40 ||
-        value < 0)
-    ) {
-      callback('Must be an valid GPIO port');
-    } else {
-      callback();
-    }
-  }
-};
-
-export const GPIO_VALIDATORS3 = {
-  validator(
-    rule: InternalRuleItem,
-    value: number,
-    callback: (error?: string) => void
-  ) {
-    if (
-      value &&
-      ((value >= 19 && value <= 20) ||
-        (value >= 22 && value <= 37) ||
-        (value >= 39 && value <= 42) ||
-        value > 48 ||
-        value < 0)
-    ) {
-      callback('Must be an valid GPIO port');
-    } else {
-      callback();
-    }
-  }
-};
-
-export const createSettingsValidator = (settings: Settings) =>
-  new Schema({
-    ...(settings.board_profile === 'CUSTOM' &&
-      settings.platform === 'ESP32' && {
-        led_gpio: [
-          { required: true, message: 'LED GPIO is required' },
-          GPIO_VALIDATOR
-        ],
-        dallas_gpio: [
-          { required: true, message: 'GPIO is required' },
-          GPIO_VALIDATOR
-        ],
-        pbutton_gpio: [
-          { required: true, message: 'Button GPIO is required' },
-          GPIO_VALIDATOR
-        ],
-        tx_gpio: [
-          { required: true, message: 'Tx GPIO is required' },
-          GPIO_VALIDATOR
-        ],
-        rx_gpio: [{ required: true, message: 'Rx GPIO is required' }, GPIO_VALIDATOR]
-      }),
-    ...(settings.board_profile === 'CUSTOM' &&
-      settings.platform === 'ESP32C3' && {
-        led_gpio: [
-          { required: true, message: 'LED GPIO is required' },
-          GPIO_VALIDATORC3
-        ],
-        dallas_gpio: [
-          { required: true, message: 'GPIO is required' },
-          GPIO_VALIDATORC3
-        ],
-        pbutton_gpio: [
-          { required: true, message: 'Button GPIO is required' },
-          GPIO_VALIDATORC3
-        ],
-        tx_gpio: [
-          { required: true, message: 'Tx GPIO is required' },
-          GPIO_VALIDATORC3
-        ],
-        rx_gpio: [
-          { required: true, message: 'Rx GPIO is required' },
-          GPIO_VALIDATORC3
-        ]
-      }),
-    ...(settings.board_profile === 'CUSTOM' &&
-      settings.platform === 'ESP32S2' && {
-        led_gpio: [
-          { required: true, message: 'LED GPIO is required' },
-          GPIO_VALIDATORS2
-        ],
-        dallas_gpio: [
-          { required: true, message: 'GPIO is required' },
-          GPIO_VALIDATORS2
-        ],
-        pbutton_gpio: [
-          { required: true, message: 'Button GPIO is required' },
-          GPIO_VALIDATORS2
-        ],
-        tx_gpio: [
-          { required: true, message: 'Tx GPIO is required' },
-          GPIO_VALIDATORS2
-        ],
-        rx_gpio: [
-          { required: true, message: 'Rx GPIO is required' },
-          GPIO_VALIDATORS2
-        ]
-      }),
-    ...(settings.board_profile === 'CUSTOM' &&
-      settings.platform === 'ESP32S3' && {
-        led_gpio: [
-          { required: true, message: 'LED GPIO is required' },
-          GPIO_VALIDATORS3
-        ],
-        dallas_gpio: [
-          { required: true, message: 'GPIO is required' },
-          GPIO_VALIDATORS3
-        ],
-        pbutton_gpio: [
-          { required: true, message: 'Button GPIO is required' },
-          GPIO_VALIDATORS3
-        ],
-        tx_gpio: [
-          { required: true, message: 'Tx GPIO is required' },
-          GPIO_VALIDATORS3
-        ],
-        rx_gpio: [
-          { required: true, message: 'Rx GPIO is required' },
-          GPIO_VALIDATORS3
-        ]
-      }),
-    ...(settings.syslog_enabled && {
-      syslog_host: [
-        { required: true, message: 'Host is required' },
-        IP_OR_HOSTNAME_VALIDATOR
-      ],
-      syslog_port: [
-        { required: true, message: 'Port is required' },
-        { type: 'number', min: 0, max: 65535, message: 'Invalid Port' }
-      ],
-      syslog_mark_interval: [
-        { required: true, message: 'Mark interval is required' },
-        { type: 'number', min: 0, max: 10, message: 'Must be between 0 and 10' }
-      ]
-    }),
-    ...(settings.modbus_enabled && {
-      modbus_max_clients: [
-        { required: true, message: 'Max clients is required' },
-        { type: 'number', min: 0, max: 50, message: 'Invalid number' }
-      ],
-      modbus_port: [
-        { required: true, message: 'Port is required' },
-        { type: 'number', min: 0, max: 65535, message: 'Invalid Port' }
-      ],
-      modbus_timeout: [
-        { required: true, message: 'Timeout is required' },
-        {
-          type: 'number',
-          min: 100,
-          max: 20000,
-          message: 'Must be between 100 and 20000'
-        }
-      ]
-    }),
-    ...(settings.shower_timer && {
-      shower_min_duration: [
-        {
-          type: 'number',
-          min: 10,
-          max: 360,
-          message: 'Time must be between 10 and 360 seconds'
-        }
-      ]
-    }),
-    ...(settings.shower_alert && {
-      shower_alert_trigger: [
-        {
-          type: 'number',
-          min: 1,
-          max: 20,
-          message: 'Time must be between 1 and 20 minutes'
-        }
-      ],
-      shower_alert_coldshot: [
-        {
-          type: 'number',
-          min: 1,
-          max: 10,
-          message: 'Time must be between 1 and 10 seconds'
-        }
-      ]
-    }),
-    ...(settings.remote_timeout_en && {
-      remote_timeout: [
-        {
-          type: 'number',
-          min: 1,
-          max: 240,
-          message: 'Timeout must be between 1 and 240 hours'
-        }
-      ]
-    })
-  });
-
-export const uniqueNameValidator = (schedule: ScheduleItem[], o_name?: string) => ({
-  validator(
-    rule: InternalRuleItem,
-    name: string,
-    callback: (error?: string) => void
-  ) {
-    if (
-      name !== '' &&
-      (o_name === undefined || o_name.toLowerCase() !== name.toLowerCase()) &&
-      schedule.find((si) => si.name.toLowerCase() === name.toLowerCase())
-    ) {
-      callback('Name already in use');
-    } else {
-      callback();
-    }
-  }
-});
-
-export const schedulerItemValidation = (
-  schedule: ScheduleItem[],
-  scheduleItem: ScheduleItem
-) =>
-  new Schema({
-    name: [
-      {
-        type: 'string',
-        pattern: /^[a-zA-Z0-9_]{0,19}$/,
-        message: "Must be <20 characters: alphanumeric or '_'"
-      },
-      ...[uniqueNameValidator(schedule, scheduleItem.o_name)]
-    ],
-    cmd: [
-      { required: true, message: 'Command is required' },
-      {
-        type: 'string',
-        min: 1,
-        max: 300,
-        message: 'Command must be 1-300 characters'
-      }
-    ]
-  });
-
-export const uniqueCustomNameValidator = (
-  entity: EntityItem[],
-  o_name?: string
-) => ({
-  validator(
-    rule: InternalRuleItem,
-    name: string,
-    callback: (error?: string) => void
-  ) {
-    if (
-      (o_name === undefined || o_name.toLowerCase() !== name.toLowerCase()) &&
-      entity.find((ei) => ei.name.toLowerCase() === name.toLowerCase())
-    ) {
-      callback('Name already in use');
-    } else {
-      callback();
-    }
-  }
-});
-
-export const entityItemValidation = (entity: EntityItem[], entityItem: EntityItem) =>
-  new Schema({
-    name: [
-      { required: true, message: 'Name is required' },
-      {
-        type: 'string',
-        pattern: /^[a-zA-Z0-9_]{1,19}$/,
-        message: "Must be <20 characters: alphanumeric or '_'"
-      },
-      ...[uniqueCustomNameValidator(entity, entityItem.o_name)]
-    ],
-    device_id: [
-      {
-        validator(
-          rule: InternalRuleItem,
-          value: string,
-          callback: (error?: string) => void
-        ) {
-          if (isNaN(parseInt(value, 16))) {
-            callback('Is required and must be in hex format');
-          }
-          callback();
-        }
-      }
-    ],
-    type_id: [
-      {
-        validator(
-          rule: InternalRuleItem,
-          value: string,
-          callback: (error?: string) => void
-        ) {
-          if (isNaN(parseInt(value, 16))) {
-            callback('Is required and must be in hex format');
-          }
-          callback();
-        }
-      }
-    ],
-    offset: [
-      { required: true, message: 'Offset is required' },
-      { type: 'number', min: 0, max: 255, message: 'Must be between 0 and 255' }
-    ],
-    factor: [
-      { required: true, message: 'Bytes is required' },
-      { type: 'number', min: 1, max: 255, message: 'Must be between 1 and 255' }
-    ]
-  });
-
-export const uniqueTemperatureNameValidator = (
-  sensors: TemperatureSensor[],
-  o_name?: string
-) => ({
-  validator(rule: InternalRuleItem, n: string, callback: (error?: string) => void) {
-    if (
-      (o_name === undefined || o_name.toLowerCase() !== n.toLowerCase()) &&
-      n !== '' &&
-      sensors.find((ts) => ts.n.toLowerCase() === n.toLowerCase())
-    ) {
-      callback('Name already in use');
-    } else {
-      callback();
-    }
-  }
-});
-
-export const temperatureSensorItemValidation = (
-  sensors: TemperatureSensor[],
-  sensor: TemperatureSensor
-) =>
-  new Schema({
-    n: [
-      {
-        type: 'string',
-        pattern: /^[a-zA-Z0-9_]{0,19}$/,
-        message: "Must be <20 characters: alphanumeric or '_'"
-      },
-      ...[uniqueTemperatureNameValidator(sensors, sensor.o_n)]
-    ]
-  });
-
-export const isGPIOUniqueValidator = (sensors: AnalogSensor[]) => ({
-  validator(
-    rule: InternalRuleItem,
-    gpio: number,
-    callback: (error?: string) => void
-  ) {
-    if (sensors.find((as) => as.g === gpio)) {
-      callback('GPIO already in use');
-    } else {
-      callback();
-    }
-  }
-});
-
-export const uniqueAnalogNameValidator = (
-  sensors: AnalogSensor[],
-  o_name?: string
-) => ({
-  validator(rule: InternalRuleItem, n: string, callback: (error?: string) => void) {
-    if (
-      (o_name === undefined || o_name.toLowerCase() !== n.toLowerCase()) &&
-      n !== '' &&
-      sensors.find((as) => as.n.toLowerCase() === n.toLowerCase())
-    ) {
-      callback('Name already in use');
-    } else {
-      callback();
-    }
-  }
-});
-
-export const analogSensorItemValidation = (
-  sensors: AnalogSensor[],
-  sensor: AnalogSensor,
-  creating: boolean,
-  platform: string
-) =>
-  new Schema({
-    n: [
-      {
-        type: 'string',
-        pattern: /^[a-zA-Z0-9_]{0,19}$/,
-        message: "Must be <20 characters: alphanumeric or '_'"
-      },
-      ...[uniqueAnalogNameValidator(sensors, sensor.o_n)]
-    ],
-    g: [
-      { required: true, message: 'GPIO is required' },
-      platform === 'ESP32S3'
-        ? GPIO_VALIDATORS3
-        : platform === 'ESP32S2'
-          ? GPIO_VALIDATORS2
-          : platform === 'ESP32C3'
-            ? GPIO_VALIDATORC3
-            : GPIO_VALIDATOR,
-      ...(creating ? [isGPIOUniqueValidator(sensors)] : [])
-    ]
-  });
-
-export const deviceValueItemValidation = (dv: DeviceValue) =>
-  new Schema({
-    v: [
-      { required: true, message: 'Value is required' },
-      {
-        validator(
-          rule: InternalRuleItem,
-          value: unknown,
-          callback: (error?: string) => void
-        ) {
-          if (
-            typeof value === 'number' &&
-            dv.m &&
-            dv.x &&
-            (value < dv.m || value > dv.x)
-          ) {
-            callback('Value out of range');
-          }
-          callback();
-        }
-      }
-    ]
-  });

interface/src/app/settings/DownloadUpload.tsx

@@ -1,131 +0,0 @@
-import { useState } from 'react';
-import { toast } from 'react-toastify';
-
-import DownloadIcon from '@mui/icons-material/GetApp';
-import { Box, Button, Typography } from '@mui/material';
-import Grid from '@mui/material/Grid2';
-
-import * as SystemApi from 'api/system';
-import { API, callAction } from 'api/app';
-
-import { useRequest } from 'alova/client';
-import type { APIcall } from 'app/main/types';
-import RestartMonitor from 'app/status/RestartMonitor';
-import {
-  FormLoader,
-  SectionContent,
-  SingleUpload,
-  useLayoutTitle
-} from 'components';
-import { useI18nContext } from 'i18n/i18n-react';
-import { saveFile } from 'utils';
-
-const DownloadUpload = () => {
-  const { LL } = useI18nContext();
-
-  const [restarting, setRestarting] = useState<boolean>(false);
-
-  const { send: sendExportData } = useRequest(
-    (type: string) => callAction({ action: 'export', param: type }),
-    {
-      immediate: false
-    }
-  )
-    .onSuccess((event) => {
-      saveFile(event.data, event.args[0], '.json');
-      toast.info(LL.DOWNLOAD_SUCCESSFUL());
-    })
-    .onError((error) => {
-      toast.error(error.message);
-    });
-
-  const { send: sendAPI } = useRequest((data: APIcall) => API(data), {
-    immediate: false
-  });
-
-  const { data, send: loadData, error } = useRequest(SystemApi.readSystemStatus);
-
-  const doRestart = async () => {
-    setRestarting(true);
-    await sendAPI({ device: 'system', cmd: 'restart', id: 0 }).catch(
-      (error: Error) => {
-        toast.error(error.message);
-      }
-    );
-  };
-
-  useLayoutTitle(LL.DOWNLOAD_UPLOAD());
-
-  const content = () => {
-    if (!data) {
-      return <FormLoader onRetry={loadData} errorMessage={error?.message} />;
-    }
-
-    return (
-      <>
-        <Typography sx={{ pb: 2 }} variant="h6" color="primary">
-          {LL.DOWNLOAD(0)}
-        </Typography>
-
-        <Typography mb={1} variant="body1" color="warning">
-          {LL.DOWNLOAD_SETTINGS_TEXT()}.
-        </Typography>
-        <Grid container spacing={1}>
-          <Button
-            sx={{ ml: 2 }}
-            startIcon={<DownloadIcon />}
-            variant="outlined"
-            color="primary"
-            onClick={() => sendExportData('settings')}
-          >
-            {LL.SETTINGS_OF(LL.APPLICATION())}
-          </Button>
-
-          <Button
-            sx={{ ml: 2 }}
-            startIcon={<DownloadIcon />}
-            variant="outlined"
-            color="primary"
-            onClick={() => sendExportData('customizations')}
-          >
-            {LL.CUSTOMIZATIONS()}
-          </Button>
-          <Button
-            sx={{ ml: 2 }}
-            startIcon={<DownloadIcon />}
-            variant="outlined"
-            color="primary"
-            onClick={() => sendExportData('entities')}
-          >
-            {LL.CUSTOM_ENTITIES(0)}
-          </Button>
-          <Button
-            sx={{ ml: 2 }}
-            startIcon={<DownloadIcon />}
-            variant="outlined"
-            color="primary"
-            onClick={() => sendExportData('schedule')}
-          >
-            {LL.SCHEDULE(0)}
-          </Button>
-        </Grid>
-
-        <Typography sx={{ pt: 2, pb: 2 }} variant="h6" color="primary">
-          {LL.UPLOAD()}
-        </Typography>
-
-        <Box color="warning.main" sx={{ pb: 2 }}>
-          <Typography variant="body1">{LL.UPLOAD_TEXT()}.</Typography>
-        </Box>
-
-        <SingleUpload doRestart={doRestart} />
-      </>
-    );
-  };
-
-  return (
-    <SectionContent>{restarting ? <RestartMonitor /> : content()}</SectionContent>
-  );
-};
-
-export default DownloadUpload;

interface/src/app/settings/Settings.tsx

@@ -1,176 +0,0 @@
-import { useState } from 'react';
-
-import AccessTimeIcon from '@mui/icons-material/AccessTime';
-import BuildIcon from '@mui/icons-material/Build';
-import CancelIcon from '@mui/icons-material/Cancel';
-import DeviceHubIcon from '@mui/icons-material/DeviceHub';
-import ImportExportIcon from '@mui/icons-material/ImportExport';
-import LockIcon from '@mui/icons-material/Lock';
-import SettingsBackupRestoreIcon from '@mui/icons-material/SettingsBackupRestore';
-import SettingsEthernetIcon from '@mui/icons-material/SettingsEthernet';
-import SettingsInputAntennaIcon from '@mui/icons-material/SettingsInputAntenna';
-import TuneIcon from '@mui/icons-material/Tune';
-import ViewModuleIcon from '@mui/icons-material/ViewModule';
-import {
-  Box,
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  List
-} from '@mui/material';
-
-import { API, callAction } from 'api/app';
-
-import { dialogStyle } from 'CustomTheme';
-import { useRequest } from 'alova/client';
-import type { APIcall } from 'app/main/types';
-import { SectionContent, useLayoutTitle } from 'components';
-import ListMenuItem from 'components/layout/ListMenuItem';
-import { useI18nContext } from 'i18n/i18n-react';
-
-const Settings = () => {
-  const { LL } = useI18nContext();
-  useLayoutTitle(LL.SETTINGS(0));
-
-  const [confirmFactoryReset, setConfirmFactoryReset] = useState<boolean>(false);
-
-  const { send: sendAPI } = useRequest((data: APIcall) => API(data), {
-    immediate: false
-  });
-
-  // call checkUpgrade with no param to fetch EMS-ESP version
-  const { data } = useRequest(() => callAction({ action: 'checkUpgrade' }), {
-    initialData: { emsesp_version: '...' }
-  });
-
-  const doFormat = async () => {
-    await sendAPI({ device: 'system', cmd: 'format', id: 0 }).then(() => {
-      setConfirmFactoryReset(false);
-    });
-  };
-
-  const renderFactoryResetDialog = () => (
-    <Dialog
-      sx={dialogStyle}
-      open={confirmFactoryReset}
-      onClose={() => setConfirmFactoryReset(false)}
-    >
-      <DialogTitle>{LL.FACTORY_RESET()}</DialogTitle>
-      <DialogContent dividers>{LL.SYSTEM_FACTORY_TEXT_DIALOG()}</DialogContent>
-      <DialogActions>
-        <Button
-          startIcon={<CancelIcon />}
-          variant="outlined"
-          onClick={() => setConfirmFactoryReset(false)}
-          color="secondary"
-        >
-          {LL.CANCEL()}
-        </Button>
-        <Button
-          startIcon={<SettingsBackupRestoreIcon />}
-          variant="outlined"
-          onClick={doFormat}
-          color="error"
-        >
-          {LL.FACTORY_RESET()}
-        </Button>
-      </DialogActions>
-    </Dialog>
-  );
-
-  const content = () => (
-    <>
-      <List sx={{ borderRadius: 3, border: '2px solid grey' }}>
-        <ListMenuItem
-          icon={BuildIcon}
-          bgcolor="#72caf9"
-          label={LL.EMS_ESP_VER()}
-          text={data.emsesp_version}
-          to="version"
-        />
-
-        <ListMenuItem
-          icon={TuneIcon}
-          bgcolor="#134ba2"
-          label={LL.APPLICATION()}
-          text={LL.APPLICATION_SETTINGS_1()}
-          to="application"
-        />
-
-        <ListMenuItem
-          icon={SettingsEthernetIcon}
-          bgcolor="#40828f"
-          label={LL.NETWORK(0)}
-          text={LL.CONFIGURE(LL.SETTINGS_OF(LL.NETWORK(1)))}
-          to="network"
-        />
-
-        <ListMenuItem
-          icon={SettingsInputAntennaIcon}
-          bgcolor="#5f9a5f"
-          label={LL.ACCESS_POINT(0)}
-          text={LL.CONFIGURE(LL.ACCESS_POINT(1))}
-          to="ap"
-        />
-
-        <ListMenuItem
-          icon={AccessTimeIcon}
-          bgcolor="#c5572c"
-          label="NTP"
-          text={LL.CONFIGURE(LL.LOCAL_TIME(1))}
-          to="ntp"
-        />
-
-        <ListMenuItem
-          icon={DeviceHubIcon}
-          bgcolor="#68374d"
-          label="MQTT"
-          text={LL.CONFIGURE('MQTT')}
-          to="mqtt"
-        />
-
-        <ListMenuItem
-          icon={LockIcon}
-          label={LL.SECURITY(0)}
-          text={LL.SECURITY_1()}
-          to="security"
-        />
-
-        <ListMenuItem
-          icon={ViewModuleIcon}
-          bgcolor="#efc34b"
-          label={LL.MODULES()}
-          text={LL.MODULES_1()}
-          to="modules"
-        />
-
-        <ListMenuItem
-          icon={ImportExportIcon}
-          bgcolor="#5d89f7"
-          label={LL.DOWNLOAD_UPLOAD()}
-          text={LL.DOWNLOAD_UPLOAD_1()}
-          to="upload"
-        />
-      </List>
-
-      {renderFactoryResetDialog()}
-
-      <Box mt={2} display="flex" flexWrap="wrap">
-        <Button
-          startIcon={<SettingsBackupRestoreIcon />}
-          variant="outlined"
-          onClick={() => setConfirmFactoryReset(true)}
-          color="error"
-        >
-          {LL.FACTORY_RESET()}
-        </Button>
-      </Box>
-    </>
-  );
-
-  return <SectionContent>{content()}</SectionContent>;
-};
-
-export default Settings;

interface/src/app/settings/Version.tsx

@@ -1,277 +0,0 @@
-import { useState } from 'react';
-import { toast } from 'react-toastify';
-
-import CancelIcon from '@mui/icons-material/Cancel';
-import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
-import WarningIcon from '@mui/icons-material/Warning';
-import {
-  Box,
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  Divider,
-  Link,
-  Typography
-} from '@mui/material';
-import Grid from '@mui/material/Grid2';
-
-import * as SystemApi from 'api/system';
-import { callAction } from 'api/app';
-import { getDevVersion, getStableVersion } from 'api/system';
-
-import { dialogStyle } from 'CustomTheme';
-import { useRequest } from 'alova/client';
-import RestartMonitor from 'app/status/RestartMonitor';
-import { FormLoader, SectionContent, useLayoutTitle } from 'components';
-import { useI18nContext } from 'i18n/i18n-react';
-
-const Version = () => {
-  const { LL } = useI18nContext();
-
-  const [restarting, setRestarting] = useState<boolean>(false);
-  const [openDialog, setOpenDialog] = useState<boolean>(false);
-  const [useDev, setUseDev] = useState<boolean>(false);
-  const [upgradeAvailable, setUpgradeAvailable] = useState<boolean>(false);
-
-  const { send: sendCheckUpgrade } = useRequest(
-    (version: string) => callAction({ action: 'checkUpgrade', param: version }),
-    {
-      immediate: false
-    }
-  ).onSuccess((event) => {
-    const data = event.data as { emsesp_version: string; upgradeable: boolean };
-    setUpgradeAvailable(data.upgradeable);
-  });
-
-  const { data, send: loadData, error } = useRequest(SystemApi.readSystemStatus);
-
-  const { send: sendUploadURL } = useRequest(
-    (url: string) => callAction({ action: 'uploadURL', param: url }),
-    {
-      immediate: false
-    }
-  );
-
-  // called immediately to get the latest version, on page load
-  const { data: latestVersion } = useRequest(getStableVersion, {
-    // uncomment next 2 lines for testing, uses https://github.com/emsesp/EMS-ESP32/releases/download/v3.6.5/EMS-ESP-3_6_5-ESP32-16MB+.bin
-    // immediate: false,
-    // initialData: '3.6.5'
-  });
-
-  // called immediately to get the latest version, on page load, then check for upgrade (works for both dev and stable)
-  const { data: latestDevVersion } = useRequest(getDevVersion, {
-    // uncomment next 2 lines for testing, uses https://github.com/emsesp/EMS-ESP32/releases/download/latest/EMS-ESP-3_7_0-dev_31-ESP32-16MB+.bin
-    // immediate: false,
-    // initialData: '3.7.0-dev.32'
-  }).onSuccess((event) => {
-    void sendCheckUpgrade(event.data);
-  });
-
-  const STABLE_URL = 'https://github.com/emsesp/EMS-ESP32/releases/download/';
-  const STABLE_RELNOTES_URL =
-    'https://github.com/emsesp/EMS-ESP32/blob/main/CHANGELOG.md';
-
-  const DEV_URL = 'https://github.com/emsesp/EMS-ESP32/releases/download/latest/';
-  const DEV_RELNOTES_URL =
-    'https://github.com/emsesp/EMS-ESP32/blob/dev/CHANGELOG_LATEST.md';
-
-  const getBinURL = (useDevVersion: boolean) => {
-    if (!latestVersion || !latestDevVersion) {
-      return '';
-    }
-    const filename =
-      'EMS-ESP-' +
-      (useDevVersion ? latestDevVersion : latestVersion).replaceAll('.', '_') +
-      '-' +
-      getPlatform() +
-      '.bin';
-    return useDevVersion
-      ? DEV_URL + filename
-      : STABLE_URL + 'v' + latestVersion + '/' + filename;
-  };
-
-  const getPlatform = () => {
-    return (
-      [data.esp_platform, data.flash_chip_size >= 16384 ? '16MB' : '4MB'].join('-') +
-      (data.psram ? '+' : '')
-    );
-  };
-
-  const installFirmwareURL = async (url: string) => {
-    await sendUploadURL(url).catch((error: Error) => {
-      toast.error(error.message);
-    });
-    setRestarting(true);
-  };
-
-  useLayoutTitle(LL.EMS_ESP_VER());
-
-  const internet_live =
-    latestDevVersion !== undefined && latestVersion !== undefined;
-
-  const renderUploadDialog = () => {
-    if (!internet_live) {
-      return null;
-    }
-
-    return (
-      <Dialog
-        sx={dialogStyle}
-        open={openDialog}
-        onClose={() => setOpenDialog(false)}
-      >
-        <DialogTitle>
-          {LL.INSTALL('') +
-            ' ' +
-            (useDev ? LL.DEVELOPMENT() : LL.STABLE()) +
-            ' Firmware'}
-        </DialogTitle>
-        <DialogContent dividers>
-          <Typography mb={2}>
-            {LL.INSTALL_VERSION(useDev ? latestDevVersion : latestVersion)}
-          </Typography>
-          <Link
-            target="_blank"
-            href={useDev ? DEV_RELNOTES_URL : STABLE_RELNOTES_URL}
-            color="primary"
-          >
-            changelog
-          </Link>
-          &nbsp;|&nbsp;
-          <Link target="_blank" href={getBinURL(useDev)} color="primary">
-            {LL.DOWNLOAD(1)}
-          </Link>
-        </DialogContent>
-        <DialogActions>
-          <Button
-            startIcon={<CancelIcon />}
-            variant="outlined"
-            onClick={() => setOpenDialog(false)}
-            color="secondary"
-          >
-            {LL.CANCEL()}
-          </Button>
-          <Button
-            startIcon={<WarningIcon color="warning" />}
-            variant="outlined"
-            onClick={() => installFirmwareURL(getBinURL(useDev))}
-            color="primary"
-          >
-            {LL.INSTALL('')}
-          </Button>
-        </DialogActions>
-      </Dialog>
-    );
-  };
-
-  // useDevVersion = true to force using the dev version
-  const showFirmwareDialog = (useDevVersion: boolean) => {
-    if (useDevVersion || data.emsesp_version.includes('dev')) {
-      setUseDev(true);
-    }
-    setOpenDialog(true);
-  };
-
-  const content = () => {
-    if (!data) {
-      return <FormLoader onRetry={loadData} errorMessage={error?.message} />;
-    }
-
-    const isDev = data.emsesp_version.includes('dev');
-
-    return (
-      <>
-        <Box p={2} border="1px solid grey" borderRadius={2}>
-          <Grid container spacing={3}>
-            <Grid mb={1}>
-              <Typography mb={1} fontWeight={'fontWeightBold'}>
-                {LL.VERSION()}
-              </Typography>
-              <Typography mb={1} fontWeight={'fontWeightBold'}>
-                Platform
-              </Typography>
-              <Typography mb={1} fontWeight={'fontWeightBold'}>
-                Release
-              </Typography>
-            </Grid>
-            <Grid>
-              <Typography mb={1}>
-                {data.emsesp_version}
-                {data.build_flags && (
-                  <Typography variant="caption">
-                    &nbsp; &#40;{data.build_flags}&#41;
-                  </Typography>
-                )}
-              </Typography>
-              <Typography mb={1}>{getPlatform()}</Typography>
-              <Typography>
-                {isDev ? LL.DEVELOPMENT() : LL.STABLE()}&nbsp;
-                <Link
-                  target="_blank"
-                  href={useDev ? DEV_RELNOTES_URL : STABLE_RELNOTES_URL}
-                  color="primary"
-                >
-                  (changelog)
-                </Link>
-              </Typography>
-            </Grid>
-          </Grid>
-
-          <Divider />
-
-          {!isDev && (
-            <Button
-              sx={{ mt: 2 }}
-              variant="outlined"
-              color="primary"
-              size="small"
-              onClick={() => showFirmwareDialog(true)}
-            >
-              {LL.SWITCH_DEV()}
-            </Button>
-          )}
-
-          <Typography mt={2} color="warning">
-            <InfoOutlinedIcon color="warning" sx={{ verticalAlign: 'middle' }} />
-            &nbsp;&nbsp;
-            {upgradeAvailable ? LL.UPGRADE_AVAILABLE() : LL.LATEST_VERSION()}
-            {upgradeAvailable &&
-              internet_live &&
-              (data.psram ? (
-                <Button
-                  sx={{ ml: 2, textTransform: 'none' }}
-                  variant="outlined"
-                  color="primary"
-                  size="small"
-                  onClick={() => showFirmwareDialog(false)}
-                >
-                  {isDev
-                    ? LL.INSTALL('v' + latestDevVersion)
-                    : LL.INSTALL('v' + latestVersion)}
-                </Button>
-              ) : (
-                <>
-                  &nbsp;&nbsp;
-                  <Link target="_blank" href={getBinURL(isDev)} color="primary">
-                    {LL.DOWNLOAD(1)}&nbsp;v
-                    {isDev ? latestDevVersion : latestVersion}
-                  </Link>
-                </>
-              ))}
-          </Typography>
-
-          {renderUploadDialog()}
-        </Box>
-      </>
-    );
-  };
-
-  return (
-    <SectionContent>{restarting ? <RestartMonitor /> : content()}</SectionContent>
-  );
-};
-
-export default Version;

interface/src/app/settings/network/Network.tsx

@@ -1,57 +0,0 @@
-import { useCallback, useState } from 'react';
-import { Navigate, Route, Routes, useNavigate } from 'react-router-dom';
-
-import { Tab } from '@mui/material';
-
-import { RouterTabs, useLayoutTitle, useRouterTab } from 'components';
-import { useI18nContext } from 'i18n/i18n-react';
-import type { WiFiNetwork } from 'types';
-
-import NetworkSettings from './NetworkSettings';
-import { WiFiConnectionContext } from './WiFiConnectionContext';
-import WiFiNetworkScanner from './WiFiNetworkScanner';
-
-const Network = () => {
-  const { LL } = useI18nContext();
-  useLayoutTitle(LL.SETTINGS_OF(LL.NETWORK(0)));
-
-  const { routerTab } = useRouterTab();
-
-  const navigate = useNavigate();
-
-  const [selectedNetwork, setSelectedNetwork] = useState<WiFiNetwork>();
-
-  const selectNetwork = useCallback(
-    (network: WiFiNetwork) => {
-      setSelectedNetwork(network);
-      navigate('settings');
-    },
-    [navigate]
-  );
-
-  const deselectNetwork = useCallback(() => {
-    setSelectedNetwork(undefined);
-  }, []);
-
-  return (
-    <WiFiConnectionContext.Provider
-      value={{
-        selectedNetwork,
-        selectNetwork,
-        deselectNetwork
-      }}
-    >
-      <RouterTabs value={routerTab}>
-        <Tab value="settings" label={LL.SETTINGS_OF(LL.NETWORK(1))} />
-        <Tab value="scan" label={LL.NETWORK_SCAN()} />
-      </RouterTabs>
-      <Routes>
-        <Route path="scan" element={<WiFiNetworkScanner />} />
-        <Route path="settings" element={<NetworkSettings />} />
-        <Route path="*" element={<Navigate replace to="settings" />} />
-      </Routes>
-    </WiFiConnectionContext.Provider>
-  );
-};
-
-export default Network;

interface/src/app/settings/security/Security.tsx

@@ -1,32 +0,0 @@
-import { Navigate, Route, Routes } from 'react-router-dom';
-
-import { Tab } from '@mui/material';
-
-import { RouterTabs, useLayoutTitle, useRouterTab } from 'components';
-import { useI18nContext } from 'i18n/i18n-react';
-
-import ManageUsers from './ManageUsers';
-import SecuritySettings from './SecuritySettings';
-
-const Security = () => {
-  const { LL } = useI18nContext();
-  useLayoutTitle(LL.SETTINGS_OF(LL.SECURITY(0)));
-
-  const { routerTab } = useRouterTab();
-
-  return (
-    <>
-      <RouterTabs value={routerTab}>
-        <Tab value="settings" label={LL.SETTINGS_OF(LL.SECURITY(1))} />
-        <Tab value="users" label={LL.MANAGE_USERS()} />
-      </RouterTabs>
-      <Routes>
-        <Route path="users" element={<ManageUsers />} />
-        <Route path="settings" element={<SecuritySettings />} />
-        <Route path="*" element={<Navigate replace to="settings" />} />
-      </Routes>
-    </>
-  );
-};
-
-export default Security;

interface/src/app/status/APStatus.tsx

@@ -1,112 +0,0 @@
-import ComputerIcon from '@mui/icons-material/Computer';
-import DeviceHubIcon from '@mui/icons-material/DeviceHub';
-import SettingsInputAntennaIcon from '@mui/icons-material/SettingsInputAntenna';
-import {
-  Avatar,
-  Divider,
-  List,
-  ListItem,
-  ListItemAvatar,
-  ListItemText,
-  useTheme
-} from '@mui/material';
-import type { Theme } from '@mui/material';
-
-import * as APApi from 'api/ap';
-
-import { useAutoRequest } from 'alova/client';
-import { FormLoader, SectionContent, useLayoutTitle } from 'components';
-import { useI18nContext } from 'i18n/i18n-react';
-import type { APStatusType } from 'types';
-import { APNetworkStatus } from 'types';
-
-export const apStatusHighlight = ({ status }: APStatusType, theme: Theme) => {
-  switch (status) {
-    case APNetworkStatus.ACTIVE:
-      return theme.palette.success.main;
-    case APNetworkStatus.INACTIVE:
-      return theme.palette.info.main;
-    case APNetworkStatus.LINGERING:
-      return theme.palette.warning.main;
-    default:
-      return theme.palette.warning.main;
-  }
-};
-
-const APStatus = () => {
-  const {
-    data,
-    send: loadData,
-    error
-  } = useAutoRequest(APApi.readAPStatus, { pollingTime: 3000 });
-
-  const { LL } = useI18nContext();
-  useLayoutTitle(LL.STATUS_OF(LL.ACCESS_POINT(0)));
-
-  const theme = useTheme();
-
-  const apStatus = ({ status }: APStatusType) => {
-    switch (status) {
-      case APNetworkStatus.ACTIVE:
-        return LL.ACTIVE();
-      case APNetworkStatus.INACTIVE:
-        return LL.INACTIVE(0);
-      case APNetworkStatus.LINGERING:
-        return 'Lingering until idle';
-      default:
-        return LL.UNKNOWN();
-    }
-  };
-
-  const content = () => {
-    if (!data) {
-      return <FormLoader onRetry={loadData} errorMessage={error?.message} />;
-    }
-
-    return (
-      <List>
-        <ListItem>
-          <ListItemAvatar>
-            <Avatar sx={{ bgcolor: apStatusHighlight(data, theme) }}>
-              <SettingsInputAntennaIcon />
-            </Avatar>
-          </ListItemAvatar>
-          <ListItemText primary={LL.STATUS_OF('')} secondary={apStatus(data)} />
-        </ListItem>
-        <Divider variant="inset" component="li" />
-        <ListItem>
-          <ListItemAvatar>
-            <Avatar>IP</Avatar>
-          </ListItemAvatar>
-          <ListItemText primary={LL.ADDRESS_OF('IP')} secondary={data.ip_address} />
-        </ListItem>
-        <Divider variant="inset" component="li" />
-        <ListItem>
-          <ListItemAvatar>
-            <Avatar>
-              <DeviceHubIcon />
-            </Avatar>
-          </ListItemAvatar>
-          <ListItemText
-            primary={LL.ADDRESS_OF('MAC')}
-            secondary={data.mac_address}
-          />
-        </ListItem>
-        <Divider variant="inset" component="li" />
-        <ListItem>
-          <ListItemAvatar>
-            <Avatar>
-              <ComputerIcon />
-            </Avatar>
-          </ListItemAvatar>
-          <ListItemText primary={LL.AP_CLIENTS()} secondary={data.station_num} />
-        </ListItem>
-        <Divider variant="inset" component="li" />
-      </List>
-    );
-  };
-
-  return <SectionContent>{content()}</SectionContent>;
-};
-
-export default APStatus;

interface/src/app/status/Activity.tsx

@@ -1,127 +0,0 @@
-import {
-  Body,
-  Cell,
-  Header,
-  HeaderCell,
-  HeaderRow,
-  Row,
-  Table
-} from '@table-library/react-table-library/table';
-import { useTheme as tableTheme } from '@table-library/react-table-library/theme';
-import { useAutoRequest } from 'alova/client';
-import { FormLoader, SectionContent, useLayoutTitle } from 'components';
-import { useI18nContext } from 'i18n/i18n-react';
-import type { Translation } from 'i18n/i18n-types';
-
-import { readActivity } from '../../api/app';
-import type { Stat } from '../main/types';
-
-const SystemActivity = () => {
-  const {
-    data,
-    send: loadData,
-    error
-  } = useAutoRequest(readActivity, { pollingTime: 3000 });
-
-  const { LL } = useI18nContext();
-
-  useLayoutTitle(LL.DATA_TRAFFIC());
-
-  const stats_theme = tableTheme({
-    Table: `
-      --data-table-library_grid-template-columns: repeat(1, minmax(0, 1fr)) 90px 90px 80px;
-    `,
-    BaseRow: `
-      font-size: 14px;
-    `,
-    HeaderRow: `
-      text-transform: uppercase;
-      background-color: black;
-      color: #90CAF9;
-
-      .th {
-        height: 36px;
-        border-bottom: 1px solid #565656;
-      }
-    `,
-    Row: `
-      .td {
-        padding: 8px;
-        border-top: 1px solid #565656;
-        border-bottom: 1px solid #565656;
-      }
-
-      &:nth-of-type(odd) .td {
-        background-color: #303030;
-      }
-      &:nth-of-type(even) .td {
-        background-color: #1e1e1e;
-      }
-    `,
-    BaseCell: `
-      &:not(:first-of-type) {
-        text-align: center;
-      }
-    `
-  });
-
-  const showName = (id: number) => {
-    const name: keyof Translation['STATUS_NAMES'] = id;
-    return LL.STATUS_NAMES[name]();
-  };
-
-  const showQuality = (stat: Stat) => {
-    if (stat.q === 0 || stat.s + stat.f === 0) {
-      return;
-    }
-    if (stat.q === 100) {
-      return <div style={{ color: '#00FF7F' }}>{stat.q}%</div>;
-    }
-    if (stat.q >= 95) {
-      return <div style={{ color: 'orange' }}>{stat.q}%</div>;
-    } else {
-      return <div style={{ color: 'red' }}>{stat.q}%</div>;
-    }
-  };
-
-  const content = () => {
-    if (!data) {
-      return <FormLoader onRetry={loadData} errorMessage={error?.message} />;
-    }
-
-    return (
-      <Table
-        data={{ nodes: data.stats }}
-        theme={stats_theme}
-        layout={{ custom: true }}
-      >
-        {(tableList: Stat[]) => (
-          <>
-            <Header>
-              <HeaderRow>
-                <HeaderCell resize />
-                <HeaderCell stiff>{LL.SUCCESS()}</HeaderCell>
-                <HeaderCell stiff>{LL.FAIL()}</HeaderCell>
-                <HeaderCell stiff>{LL.QUALITY()}</HeaderCell>
-              </HeaderRow>
-            </Header>
-            <Body>
-              {tableList.map((stat: Stat) => (
-                <Row key={stat.id} item={stat}>
-                  <Cell>{showName(stat.id)}</Cell>
-                  <Cell stiff>{Intl.NumberFormat().format(stat.s)}</Cell>
-                  <Cell stiff>{Intl.NumberFormat().format(stat.f)}</Cell>
-                  <Cell stiff>{showQuality(stat)}</Cell>
-                </Row>
-              ))}
-            </Body>
-          </>
-        )}
-      </Table>
-    );
-  };
-
-  return <SectionContent>{content()}</SectionContent>;
-};
-
-export default SystemActivity;

interface/src/app/status/HardwareStatus.tsx

@@ -1,206 +0,0 @@
-import AppsIcon from '@mui/icons-material/Apps';
-import DeveloperBoardIcon from '@mui/icons-material/DeveloperBoard';
-import DevicesIcon from '@mui/icons-material/Devices';
-import FolderIcon from '@mui/icons-material/Folder';
-import MemoryIcon from '@mui/icons-material/Memory';
-import SdCardAlertIcon from '@mui/icons-material/SdCardAlert';
-import SdStorageIcon from '@mui/icons-material/SdStorage';
-import TapAndPlayIcon from '@mui/icons-material/TapAndPlay';
-import {
-  Avatar,
-  Divider,
-  List,
-  ListItem,
-  ListItemAvatar,
-  ListItemText
-} from '@mui/material';
-
-import * as SystemApi from 'api/system';
-
-import { useAutoRequest } from 'alova/client';
-import { FormLoader, SectionContent, useLayoutTitle } from 'components';
-import { useI18nContext } from 'i18n/i18n-react';
-
-import BBQKeesIcon from './bbqkees.svg';
-
-function formatNumber(num: number) {
-  return new Intl.NumberFormat().format(num);
-}
-
-const HardwareStatus = () => {
-  const { LL } = useI18nContext();
-
-  useLayoutTitle(LL.STATUS_OF(LL.HARDWARE()));
-
-  const {
-    data,
-    send: loadData,
-    error
-  } = useAutoRequest(SystemApi.readSystemStatus, { pollingTime: 3000 });
-
-  const content = () => {
-    if (!data) {
-      return <FormLoader onRetry={loadData} errorMessage={error?.message} />;
-    }
-
-    return (
-      <List>
-        <ListItem>
-          <ListItemAvatar>
-            {data.model ? (
-              <Avatar sx={{ bgcolor: '#003289', color: 'white' }}>
-                <img
-                  alt="BBQKees"
-                  src={BBQKeesIcon}
-                  style={{ width: 16, verticalAlign: 'middle' }}
-                />
-              </Avatar>
-            ) : (
-              <Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
-                <TapAndPlayIcon />
-              </Avatar>
-            )}
-          </ListItemAvatar>
-          <ListItemText
-            primary={LL.HARDWARE() + ' ' + LL.DEVICE()}
-            secondary={data.model ? data.model : data.cpu_type}
-          />
-        </ListItem>
-        <Divider variant="inset" component="li" />
-        <ListItem>
-          <ListItemAvatar>
-            <Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
-              <DevicesIcon />
-            </Avatar>
-          </ListItemAvatar>
-          <ListItemText
-            primary="SDK"
-            secondary={data.arduino_version + ' / ESP-IDF ' + data.sdk_version}
-          />
-        </ListItem>
-        <Divider variant="inset" component="li" />
-        <ListItem>
-          <ListItemAvatar>
-            <Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
-              <DeveloperBoardIcon />
-            </Avatar>
-          </ListItemAvatar>
-          <ListItemText
-            primary="CPU"
-            secondary={
-              data.esp_platform +
-              '/' +
-              data.cpu_type +
-              ' (rev.' +
-              data.cpu_rev +
-              ', ' +
-              (data.cpu_cores === 1 ? 'single-core)' : 'dual-core)') +
-              ' @ ' +
-              data.cpu_freq_mhz +
-              ' Mhz' +
-              (data.temperature ? ', T: ' + data.temperature + ' °C' : '')
-            }
-          />
-        </ListItem>
-        <Divider variant="inset" component="li" />
-        <ListItem>
-          <ListItemAvatar>
-            <Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
-              <MemoryIcon />
-            </Avatar>
-          </ListItemAvatar>
-          <ListItemText
-            primary={LL.FREE_MEMORY()}
-            secondary={
-              formatNumber(data.free_heap) +
-              ' KB (' +
-              formatNumber(data.max_alloc_heap) +
-              ' KB max alloc, ' +
-              formatNumber(data.free_caps) +
-              ' KB caps)'
-            }
-          />
-        </ListItem>
-        {data.psram_size !== undefined && data.free_psram !== undefined && (
-          <>
-            <Divider variant="inset" component="li" />
-            <ListItem>
-              <ListItemAvatar>
-                <Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
-                  <AppsIcon />
-                </Avatar>
-              </ListItemAvatar>
-              <ListItemText
-                primary={LL.PSRAM()}
-                secondary={
-                  formatNumber(data.psram_size) +
-                  ' KB / ' +
-                  formatNumber(data.free_psram) +
-                  ' KB'
-                }
-              />
-            </ListItem>
-          </>
-        )}
-        <Divider variant="inset" component="li" />
-        <ListItem>
-          <ListItemAvatar>
-            <Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
-              <SdStorageIcon />
-            </Avatar>
-          </ListItemAvatar>
-          <ListItemText
-            primary={LL.FLASH()}
-            secondary={
-              formatNumber(data.flash_chip_size) +
-              ' KB , ' +
-              (data.flash_chip_speed / 1000000).toFixed(0) +
-              ' MHz'
-            }
-          />
-        </ListItem>
-        <Divider variant="inset" component="li" />
-        <ListItem>
-          <ListItemAvatar>
-            <Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
-              <SdCardAlertIcon />
-            </Avatar>
-          </ListItemAvatar>
-          <ListItemText
-            primary={LL.APPSIZE()}
-            secondary={
-              data.partition +
-              ': ' +
-              formatNumber(data.app_used) +
-              ' KB / ' +
-              formatNumber(data.app_free) +
-              ' KB'
-            }
-          />
-        </ListItem>
-        <Divider variant="inset" component="li" />
-        <ListItem>
-          <ListItemAvatar>
-            <Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
-              <FolderIcon />
-            </Avatar>
-          </ListItemAvatar>
-          <ListItemText
-            primary={LL.FILESYSTEM()}
-            secondary={
-              formatNumber(data.fs_used) +
-              ' KB / ' +
-              formatNumber(data.fs_free) +
-              ' KB'
-            }
-          />
-        </ListItem>
-        <Divider variant="inset" component="li" />
-      </List>
-    );
-  };
-
-  return <SectionContent>{content()}</SectionContent>;
-};
-
-export default HardwareStatus;

interface/src/app/status/NetworkStatus.tsx

@@ -1,223 +0,0 @@
-import DeviceHubIcon from '@mui/icons-material/DeviceHub';
-import DnsIcon from '@mui/icons-material/Dns';
-import GiteIcon from '@mui/icons-material/Gite';
-import RouterIcon from '@mui/icons-material/Router';
-import SettingsInputAntennaIcon from '@mui/icons-material/SettingsInputAntenna';
-import SettingsInputComponentIcon from '@mui/icons-material/SettingsInputComponent';
-import WifiIcon from '@mui/icons-material/Wifi';
-import {
-  Avatar,
-  Divider,
-  List,
-  ListItem,
-  ListItemAvatar,
-  ListItemText,
-  useTheme
-} from '@mui/material';
-import type { Theme } from '@mui/material';
-
-import * as NetworkApi from 'api/network';
-
-import { useAutoRequest } from 'alova/client';
-import { FormLoader, SectionContent, useLayoutTitle } from 'components';
-import { useI18nContext } from 'i18n/i18n-react';
-import type { NetworkStatusType } from 'types';
-import { NetworkConnectionStatus } from 'types';
-
-const isConnected = ({ status }: NetworkStatusType) =>
-  status === NetworkConnectionStatus.WIFI_STATUS_CONNECTED ||
-  status === NetworkConnectionStatus.ETHERNET_STATUS_CONNECTED;
-
-const networkStatusHighlight = ({ status }: NetworkStatusType, theme: Theme) => {
-  switch (status) {
-    case NetworkConnectionStatus.WIFI_STATUS_IDLE:
-    case NetworkConnectionStatus.WIFI_STATUS_DISCONNECTED:
-    case NetworkConnectionStatus.WIFI_STATUS_NO_SHIELD:
-      return theme.palette.info.main;
-    case NetworkConnectionStatus.WIFI_STATUS_CONNECTED:
-    case NetworkConnectionStatus.ETHERNET_STATUS_CONNECTED:
-      return theme.palette.success.main;
-    case NetworkConnectionStatus.WIFI_STATUS_CONNECT_FAILED:
-    case NetworkConnectionStatus.WIFI_STATUS_CONNECTION_LOST:
-      return theme.palette.error.main;
-    default:
-      return theme.palette.warning.main;
-  }
-};
-
-const networkQualityHighlight = ({ rssi }: NetworkStatusType, theme: Theme) => {
-  if (rssi <= -85) {
-    return theme.palette.error.main;
-  } else if (rssi <= -75) {
-    return theme.palette.warning.main;
-  }
-  return theme.palette.success.main;
-};
-
-export const isWiFi = ({ status }: NetworkStatusType) =>
-  status === NetworkConnectionStatus.WIFI_STATUS_CONNECTED;
-export const isEthernet = ({ status }: NetworkStatusType) =>
-  status === NetworkConnectionStatus.ETHERNET_STATUS_CONNECTED;
-
-const dnsServers = ({ dns_ip_1, dns_ip_2 }: NetworkStatusType) => {
-  if (!dns_ip_1) {
-    return 'none';
-  }
-  return dns_ip_1 + (!dns_ip_2 || dns_ip_2 === '0.0.0.0' ? '' : ', ' + dns_ip_2);
-};
-
-const IPs = (status: NetworkStatusType) => {
-  if (
-    !status.local_ipv6 ||
-    status.local_ipv6 === '0000:0000:0000:0000:0000:0000:0000:0000' ||
-    status.local_ipv6 === '::'
-  ) {
-    return status.local_ip;
-  }
-  if (!status.local_ip || status.local_ip === '0.0.0.0') {
-    return status.local_ipv6;
-  }
-  return status.local_ip + ', ' + status.local_ipv6;
-};
-
-const NetworkStatus = () => {
-  const {
-    data,
-    send: loadData,
-    error
-  } = useAutoRequest(NetworkApi.readNetworkStatus, { pollingTime: 3000 });
-
-  const { LL } = useI18nContext();
-  useLayoutTitle(LL.STATUS_OF(LL.NETWORK(1)));
-
-  const theme = useTheme();
-
-  const networkStatus = ({ status }: NetworkStatusType) => {
-    switch (status) {
-      case NetworkConnectionStatus.WIFI_STATUS_NO_SHIELD:
-        return LL.INACTIVE(1);
-      case NetworkConnectionStatus.WIFI_STATUS_IDLE:
-        return LL.IDLE();
-      case NetworkConnectionStatus.WIFI_STATUS_NO_SSID_AVAIL:
-        return 'No SSID Available';
-      case NetworkConnectionStatus.WIFI_STATUS_CONNECTED:
-        return LL.CONNECTED(0) + ' (WiFi)';
-      case NetworkConnectionStatus.ETHERNET_STATUS_CONNECTED:
-        return LL.CONNECTED(0) + ' (Ethernet)';
-      case NetworkConnectionStatus.WIFI_STATUS_CONNECT_FAILED:
-        return LL.CONNECTED(1) + ' ' + LL.FAILED(0);
-      case NetworkConnectionStatus.WIFI_STATUS_CONNECTION_LOST:
-        return LL.CONNECTED(1) + ' ' + LL.LOST();
-      case NetworkConnectionStatus.WIFI_STATUS_DISCONNECTED:
-        return LL.DISCONNECTED();
-      default:
-        return LL.UNKNOWN();
-    }
-  };
-
-  const content = () => {
-    if (!data) {
-      return <FormLoader onRetry={loadData} errorMessage={error?.message} />;
-    }
-
-    return (
-      <List>
-        <ListItem>
-          <ListItemAvatar>
-            <Avatar sx={{ bgcolor: networkStatusHighlight(data, theme) }}>
-              {isWiFi(data) && <WifiIcon />}
-              {isEthernet(data) && <RouterIcon />}
-            </Avatar>
-          </ListItemAvatar>
-          <ListItemText primary="Status" secondary={networkStatus(data)} />
-        </ListItem>
-        <Divider variant="inset" component="li" />
-        <ListItem>
-          <ListItemAvatar>
-            <Avatar sx={{ bgcolor: networkStatusHighlight(data, theme) }}>
-              <GiteIcon />
-            </Avatar>
-          </ListItemAvatar>
-          <ListItemText primary={LL.HOSTNAME()} secondary={data.hostname} />
-        </ListItem>
-        <Divider variant="inset" component="li" />
-        {isWiFi(data) && (
-          <>
-            <ListItem>
-              <ListItemAvatar>
-                <Avatar sx={{ bgcolor: networkQualityHighlight(data, theme) }}>
-                  <SettingsInputAntennaIcon />
-                </Avatar>
-              </ListItemAvatar>
-              <ListItemText
-                primary="SSID (RSSI)"
-                secondary={data.ssid + ' (' + data.rssi + ' dBm)'}
-              />
-            </ListItem>
-            <Divider variant="inset" component="li" />
-          </>
-        )}
-        {isConnected(data) && (
-          <>
-            <ListItem>
-              <ListItemAvatar>
-                <Avatar>IP</Avatar>
-              </ListItemAvatar>
-              <ListItemText primary={LL.ADDRESS_OF('IP')} secondary={IPs(data)} />
-            </ListItem>
-            <Divider variant="inset" component="li" />
-            <ListItem>
-              <ListItemAvatar>
-                <Avatar>
-                  <DeviceHubIcon />
-                </Avatar>
-              </ListItemAvatar>
-              <ListItemText
-                primary={LL.ADDRESS_OF('MAC')}
-                secondary={data.mac_address}
-              />
-            </ListItem>
-            <Divider variant="inset" component="li" />
-            <ListItem>
-              <ListItemAvatar>
-                <Avatar>#</Avatar>
-              </ListItemAvatar>
-              <ListItemText
-                primary={LL.NETWORK_SUBNET()}
-                secondary={data.subnet_mask}
-              />
-            </ListItem>
-            <Divider variant="inset" component="li" />
-            <ListItem>
-              <ListItemAvatar>
-                <Avatar>
-                  <SettingsInputComponentIcon />
-                </Avatar>
-              </ListItemAvatar>
-              <ListItemText
-                primary={LL.NETWORK_GATEWAY()}
-                secondary={data.gateway_ip || 'none'}
-              />
-            </ListItem>
-            <Divider variant="inset" component="li" />
-            <ListItem>
-              <ListItemAvatar>
-                <Avatar>
-                  <DnsIcon />
-                </Avatar>
-              </ListItemAvatar>
-              <ListItemText
-                primary={LL.NETWORK_DNS()}
-                secondary={dnsServers(data)}
-              />
-            </ListItem>
-          </>
-        )}
-      </List>
-    );
-  };
-
-  return <SectionContent>{content()}</SectionContent>;
-};
-
-export default NetworkStatus;

interface/src/app/status/RestartMonitor.tsx

@@ -1,81 +0,0 @@
-import { useState } from 'react';
-
-import {
-  Box,
-  CircularProgress,
-  Dialog,
-  DialogContent,
-  Typography
-} from '@mui/material';
-
-import { readSystemStatus } from 'api/system';
-
-import { dialogStyle } from 'CustomTheme';
-import { useAutoRequest } from 'alova/client';
-import MessageBox from 'components/MessageBox';
-import { useI18nContext } from 'i18n/i18n-react';
-
-const RestartMonitor = () => {
-  const [errorMessage, setErrorMessage] = useState<string>();
-
-  const { LL } = useI18nContext();
-
-  let count = 0;
-
-  const { data } = useAutoRequest(readSystemStatus, {
-    pollingTime: 1000,
-    force: true,
-    initialData: { status: 'Getting ready...' },
-    async middleware(_, next) {
-      if (count++ >= 1) {
-        // skip first request (1 second) to allow AsyncWS to send its response
-        await next();
-      }
-    }
-  })
-    .onSuccess((event) => {
-      if (event.data.status === 'ready' || event.data.status === undefined) {
-        document.location.href = '/';
-      }
-    })
-    .onError((error) => {
-      setErrorMessage(error.message);
-    });
-
-  return (
-    <Dialog fullWidth={true} sx={dialogStyle} open={true}>
-      <DialogContent dividers>
-        <Box m={0} py={0} display="flex" alignItems="center" flexDirection="column">
-          <Typography
-            color="secondary"
-            variant="h6"
-            fontWeight={400}
-            textAlign="center"
-          >
-            {data?.status === 'uploading'
-              ? LL.WAIT_FIRMWARE()
-              : data?.status === 'restarting'
-                ? LL.APPLICATION_RESTARTING()
-                : data?.status === 'ready'
-                  ? LL.RESTARTING_PRE()
-                  : LL.RESTARTING_POST()}
-            &hellip;
-          </Typography>
-          <Typography mt={2} variant="h6" fontWeight={400} textAlign="center">
-            {LL.PLEASE_WAIT()}
-          </Typography>
-
-          {errorMessage ? (
-            <MessageBox my={2} level="error" message={errorMessage} />
-          ) : (
-            <Box py={2}>
-              <CircularProgress size={32} />
-            </Box>
-          )}
-        </Box>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-export default RestartMonitor;

interface/src/app/status/Status.tsx

@@ -1,346 +0,0 @@
-import { useContext, useState } from 'react';
-import { toast } from 'react-toastify';
-
-import AccessTimeIcon from '@mui/icons-material/AccessTime';
-import CancelIcon from '@mui/icons-material/Cancel';
-import DeviceHubIcon from '@mui/icons-material/DeviceHub';
-import DirectionsBusIcon from '@mui/icons-material/DirectionsBus';
-import LogoDevIcon from '@mui/icons-material/LogoDev';
-import MemoryIcon from '@mui/icons-material/Memory';
-import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew';
-import RouterIcon from '@mui/icons-material/Router';
-import SettingsInputAntennaIcon from '@mui/icons-material/SettingsInputAntenna';
-import TimerIcon from '@mui/icons-material/Timer';
-import WifiIcon from '@mui/icons-material/Wifi';
-import {
-  Avatar,
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  List,
-  ListItem,
-  ListItemAvatar,
-  ListItemText,
-  useTheme
-} from '@mui/material';
-
-import { API } from 'api/app';
-import { readSystemStatus } from 'api/system';
-
-import { dialogStyle } from 'CustomTheme';
-import { useAutoRequest, useRequest } from 'alova/client';
-import { type APIcall, busConnectionStatus } from 'app/main/types';
-import { FormLoader, SectionContent, useLayoutTitle } from 'components';
-import ListMenuItem from 'components/layout/ListMenuItem';
-import { AuthenticatedContext } from 'contexts/authentication';
-import { useI18nContext } from 'i18n/i18n-react';
-import { NTPSyncStatus, NetworkConnectionStatus } from 'types';
-
-import RestartMonitor from './RestartMonitor';
-
-const SystemStatus = () => {
-  const { LL } = useI18nContext();
-
-  useLayoutTitle(LL.STATUS_OF(''));
-
-  const { me } = useContext(AuthenticatedContext);
-
-  const [confirmRestart, setConfirmRestart] = useState<boolean>(false);
-  const [restarting, setRestarting] = useState<boolean>();
-
-  const { send: sendAPI } = useRequest((data: APIcall) => API(data), {
-    immediate: false
-  });
-
-  const {
-    data,
-    send: loadData,
-    error
-  } = useAutoRequest(readSystemStatus, {
-    initialData: [],
-    pollingTime: 3000,
-    async middleware(_, next) {
-      if (!restarting) {
-        await next();
-      }
-    }
-  });
-
-  const theme = useTheme();
-
-  const formatDurationSec = (duration_sec: number) => {
-    const days = Math.trunc((duration_sec * 1000) / 86400000);
-    const hours = Math.trunc((duration_sec * 1000) / 3600000) % 24;
-    const minutes = Math.trunc((duration_sec * 1000) / 60000) % 60;
-    const seconds = Math.trunc((duration_sec * 1000) / 1000) % 60;
-
-    let formatted = '';
-    if (days) {
-      formatted += LL.NUM_DAYS({ num: days }) + ' ';
-    }
-    if (hours) {
-      formatted += LL.NUM_HOURS({ num: hours }) + ' ';
-    }
-    if (minutes) {
-      formatted += LL.NUM_MINUTES({ num: minutes }) + ' ';
-    }
-    formatted += LL.NUM_SECONDS({ num: seconds });
-    return formatted;
-  };
-
-  function formatNumber(num: number) {
-    return new Intl.NumberFormat().format(num);
-  }
-
-  const busStatus = () => {
-    if (data) {
-      switch (data.bus_status) {
-        case busConnectionStatus.BUS_STATUS_CONNECTED:
-          return (
-            'EMS ' +
-            LL.CONNECTED(0) +
-            ' (' +
-            formatDurationSec(data.bus_uptime) +
-            ')'
-          );
-        case busConnectionStatus.BUS_STATUS_TX_ERRORS:
-          return 'EMS ' + LL.TX_ISSUES();
-        case busConnectionStatus.BUS_STATUS_OFFLINE:
-          return 'EMS ' + LL.DISCONNECTED();
-      }
-    }
-    return 'EMS state unknown';
-  };
-
-  const busStatusHighlight = () => {
-    switch (data.bus_status) {
-      case busConnectionStatus.BUS_STATUS_TX_ERRORS:
-        return theme.palette.warning.main;
-      case busConnectionStatus.BUS_STATUS_CONNECTED:
-        return theme.palette.success.main;
-      case busConnectionStatus.BUS_STATUS_OFFLINE:
-        return theme.palette.error.main;
-      default:
-        return theme.palette.warning.main;
-    }
-  };
-
-  const ntpStatus = () => {
-    switch (data.ntp_status) {
-      case NTPSyncStatus.NTP_DISABLED:
-        return LL.NOT_ENABLED();
-      case NTPSyncStatus.NTP_INACTIVE:
-        return LL.INACTIVE(0);
-      case NTPSyncStatus.NTP_ACTIVE:
-        return LL.ACTIVE();
-      default:
-        return LL.UNKNOWN();
-    }
-  };
-
-  const ntpStatusHighlight = () => {
-    switch (data.ntp_status) {
-      case NTPSyncStatus.NTP_DISABLED:
-        return theme.palette.info.main;
-      case NTPSyncStatus.NTP_INACTIVE:
-        return theme.palette.error.main;
-      case NTPSyncStatus.NTP_ACTIVE:
-        return theme.palette.success.main;
-      default:
-        return theme.palette.error.main;
-    }
-  };
-
-  const networkStatusHighlight = () => {
-    switch (data.network_status) {
-      case NetworkConnectionStatus.WIFI_STATUS_IDLE:
-      case NetworkConnectionStatus.WIFI_STATUS_DISCONNECTED:
-      case NetworkConnectionStatus.WIFI_STATUS_NO_SHIELD:
-        return theme.palette.info.main;
-      case NetworkConnectionStatus.WIFI_STATUS_CONNECTED:
-      case NetworkConnectionStatus.ETHERNET_STATUS_CONNECTED:
-        return theme.palette.success.main;
-      case NetworkConnectionStatus.WIFI_STATUS_CONNECT_FAILED:
-      case NetworkConnectionStatus.WIFI_STATUS_CONNECTION_LOST:
-        return theme.palette.error.main;
-      default:
-        return theme.palette.warning.main;
-    }
-  };
-
-  const networkStatus = () => {
-    switch (data.network_status) {
-      case NetworkConnectionStatus.WIFI_STATUS_NO_SHIELD:
-        return LL.INACTIVE(1);
-      case NetworkConnectionStatus.WIFI_STATUS_IDLE:
-        return LL.IDLE();
-      case NetworkConnectionStatus.WIFI_STATUS_NO_SSID_AVAIL:
-        return 'No SSID Available';
-      case NetworkConnectionStatus.WIFI_STATUS_CONNECTED:
-        return LL.CONNECTED(0) + ' (WiFi, ' + data.wifi_rssi + ' dBm)';
-      case NetworkConnectionStatus.ETHERNET_STATUS_CONNECTED:
-        return LL.CONNECTED(0) + ' (Ethernet)';
-      case NetworkConnectionStatus.WIFI_STATUS_CONNECT_FAILED:
-        return LL.CONNECTED(1) + ' ' + LL.FAILED(0);
-      case NetworkConnectionStatus.WIFI_STATUS_CONNECTION_LOST:
-        return LL.CONNECTED(1) + ' ' + LL.LOST();
-      case NetworkConnectionStatus.WIFI_STATUS_DISCONNECTED:
-        return LL.DISCONNECTED();
-      default:
-        return LL.UNKNOWN();
-    }
-  };
-
-  const activeHighlight = (value: boolean) =>
-    value ? theme.palette.success.main : theme.palette.info.main;
-
-  const doRestart = async () => {
-    setConfirmRestart(false);
-    setRestarting(true);
-    await sendAPI({ device: 'system', cmd: 'restart', id: 0 }).catch(
-      (error: Error) => {
-        toast.error(error.message);
-      }
-    );
-  };
-
-  const renderRestartDialog = () => (
-    <Dialog
-      sx={dialogStyle}
-      open={confirmRestart}
-      onClose={() => setConfirmRestart(false)}
-    >
-      <DialogTitle>{LL.RESTART()}</DialogTitle>
-      <DialogContent dividers>{LL.RESTART_CONFIRM()}</DialogContent>
-      <DialogActions>
-        <Button
-          startIcon={<CancelIcon />}
-          variant="outlined"
-          onClick={() => setConfirmRestart(false)}
-          color="secondary"
-        >
-          {LL.CANCEL()}
-        </Button>
-        <Button
-          startIcon={<PowerSettingsNewIcon />}
-          variant="outlined"
-          onClick={doRestart}
-          color="error"
-        >
-          {LL.RESTART()}
-        </Button>
-      </DialogActions>
-    </Dialog>
-  );
-
-  const content = () => {
-    if (!data || !LL) {
-      return <FormLoader onRetry={loadData} errorMessage={error?.message} />;
-    }
-
-    return (
-      <>
-        <List sx={{ borderRadius: 3, border: '2px solid grey' }}>
-          <ListItem>
-            <ListItemAvatar>
-              <Avatar sx={{ bgcolor: '#c5572c', color: 'white' }}>
-                <TimerIcon />
-              </Avatar>
-            </ListItemAvatar>
-            <ListItemText
-              primary={LL.UPTIME()}
-              secondary={formatDurationSec(data.uptime)}
-            />
-            {me.admin && (
-              <Button
-                startIcon={<PowerSettingsNewIcon />}
-                variant="outlined"
-                color="error"
-                onClick={() => setConfirmRestart(true)}
-              >
-                {LL.RESTART()}
-              </Button>
-            )}
-          </ListItem>
-
-          <ListMenuItem
-            disabled={!me.admin}
-            icon={MemoryIcon}
-            bgcolor="#68374d"
-            label={LL.HARDWARE()}
-            text={formatNumber(data.free_heap) + ' KB' + ' ' + LL.FREE_MEMORY()}
-            to="/status/hardwarestatus"
-          />
-
-          <ListMenuItem
-            disabled={!me.admin}
-            icon={DirectionsBusIcon}
-            bgcolor={busStatusHighlight()}
-            label={LL.DATA_TRAFFIC()}
-            text={busStatus()}
-            to="/status/activity"
-          />
-
-          <ListMenuItem
-            disabled={!me.admin}
-            icon={
-              data.network_status === NetworkConnectionStatus.WIFI_STATUS_CONNECTED
-                ? WifiIcon
-                : RouterIcon
-            }
-            bgcolor={networkStatusHighlight()}
-            label={LL.NETWORK(1)}
-            text={networkStatus()}
-            to="/status/network"
-          />
-
-          <ListMenuItem
-            disabled={!me.admin}
-            icon={DeviceHubIcon}
-            bgcolor={activeHighlight(data.mqtt_status)}
-            label="MQTT"
-            text={data.mqtt_status ? LL.ACTIVE() : LL.INACTIVE(0)}
-            to="/status/mqtt"
-          />
-
-          <ListMenuItem
-            disabled={!me.admin}
-            icon={AccessTimeIcon}
-            bgcolor={ntpStatusHighlight()}
-            label="NTP"
-            text={ntpStatus()}
-            to="/status/ntp"
-          />
-
-          <ListMenuItem
-            disabled={!me.admin}
-            icon={SettingsInputAntennaIcon}
-            bgcolor={activeHighlight(data.ap_status)}
-            label={LL.ACCESS_POINT(0)}
-            text={data.ap_status ? LL.ACTIVE() : LL.INACTIVE(0)}
-            to="/status/ap"
-          />
-
-          <ListMenuItem
-            disabled={!me.admin}
-            icon={LogoDevIcon}
-            bgcolor="#40828f"
-            label={LL.LOG_OF(LL.SYSTEM(0))}
-            text={LL.VIEW_LOG()}
-            to="/status/log"
-          />
-        </List>
-
-        {renderRestartDialog()}
-      </>
-    );
-  };
-
-  return (
-    <SectionContent>{restarting ? <RestartMonitor /> : content()}</SectionContent>
-  );
-};
-
-export default SystemStatus;

interface/src/app/status/SystemLog.tsx

@@ -1,358 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import { toast } from 'react-toastify';
-
-import DownloadIcon from '@mui/icons-material/GetApp';
-import PlayArrowIcon from '@mui/icons-material/PlayArrow';
-import WarningIcon from '@mui/icons-material/Warning';
-import {
-  Box,
-  Button,
-  Checkbox,
-  IconButton,
-  MenuItem,
-  TextField,
-  styled
-} from '@mui/material';
-import Grid from '@mui/material/Grid2';
-
-import { API } from 'api/app';
-import { fetchLogES, readLogSettings, updateLogSettings } from 'api/system';
-
-import { useRequest, useSSE } from 'alova/client';
-import {
-  BlockFormControlLabel,
-  BlockNavigation,
-  FormLoader,
-  SectionContent,
-  useLayoutTitle
-} from 'components';
-import { useI18nContext } from 'i18n/i18n-react';
-import type { LogEntry, LogSettings } from 'types';
-import { LogLevel } from 'types';
-import { updateValueDirty, useRest } from 'utils';
-
-const TextColors = {
-  [LogLevel.ERROR]: '#ff0000', // red
-  [LogLevel.WARNING]: '#ff0000', // red
-  [LogLevel.NOTICE]: '#ffffff', // white
-  [LogLevel.INFO]: '#ffcc00', // yellow
-  [LogLevel.DEBUG]: '#00ffff', // cyan
-  [LogLevel.TRACE]: '#00ffff' // cyan
-};
-
-const LogEntryLine = styled('span')(
-  ({ details: { level } }: { details: { level: LogLevel } }) => ({
-    color: TextColors[level]
-  })
-);
-
-const topOffset = () =>
-  document.getElementById('log-window')?.getBoundingClientRect().bottom || 0;
-const leftOffset = () =>
-  document.getElementById('log-window')?.getBoundingClientRect().left || 0;
-
-const levelLabel = (level: LogLevel) => {
-  switch (level) {
-    case LogLevel.ERROR:
-      return 'ERROR';
-    case LogLevel.WARNING:
-      return 'WARNING';
-    case LogLevel.NOTICE:
-      return 'NOTICE';
-    case LogLevel.INFO:
-      return 'INFO';
-    case LogLevel.DEBUG:
-      return 'DEBUG';
-    case LogLevel.TRACE:
-      return 'TRACE';
-    default:
-      return '';
-  }
-};
-
-const SystemLog = () => {
-  const { LL } = useI18nContext();
-
-  useLayoutTitle(LL.LOG_OF(LL.SYSTEM(0)));
-
-  const {
-    loadData,
-    data,
-    updateDataValue,
-    origData,
-    dirtyFlags,
-    setDirtyFlags,
-    blocker,
-    saveData,
-    errorMessage
-  } = useRest<LogSettings>({
-    read: readLogSettings,
-    update: updateLogSettings
-  });
-
-  const { send } = useRequest(
-    (data: string) => API({ device: 'system', cmd: 'read', id: 0, data: data }),
-    {
-      immediate: false
-    }
-  );
-
-  const [readValue, setReadValue] = useState('');
-  const [readOpen, setReadOpen] = useState(false);
-  const [logEntries, setLogEntries] = useState<LogEntry[]>([]);
-  const [autoscroll, setAutoscroll] = useState(true);
-
-  const ALPHA_NUMERIC_DASH_REGEX = /^[a-fA-F0-9 ]+$/;
-
-  const updateFormValue = updateValueDirty(
-    origData,
-    dirtyFlags,
-    setDirtyFlags,
-    updateDataValue
-  );
-
-  useSSE(fetchLogES, {
-    immediate: true,
-    interceptByGlobalResponded: false
-  })
-    .onMessage((message: { id: number; data: string }) => {
-      const rawData = message.data;
-      const logentry = JSON.parse(rawData) as LogEntry;
-      setLogEntries((log) => [...log, logentry]);
-    })
-    .onError(() => {
-      toast.error('No connection to Log service');
-    });
-
-  const paddedLevelLabel = (level: LogLevel) => {
-    const label = levelLabel(level);
-    return data?.compact ? ' ' + label[0] : label.padStart(8, '\xa0');
-  };
-
-  const paddedNameLabel = (name: string) => {
-    const label = '[' + name + ']';
-    return data?.compact ? label : label.padEnd(12, '\xa0');
-  };
-
-  const paddedIDLabel = (id: number) => {
-    const label = id + ':';
-    return data?.compact ? label : label.padEnd(7, '\xa0');
-  };
-
-  const onDownload = () => {
-    let result = '';
-    for (const i of logEntries) {
-      result +=
-        i.t + ' ' + levelLabel(i.l) + ' ' + i.i + ': [' + i.n + '] ' + i.m + '\n';
-    }
-    const a = document.createElement('a');
-    a.setAttribute(
-      'href',
-      'data:text/plain;charset=utf-8,' + encodeURIComponent(result)
-    );
-    a.setAttribute('download', 'log.txt');
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-  };
-
-  const saveSettings = async () => {
-    await saveData();
-  };
-
-  // handle scrolling
-  const ref = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    if (logEntries.length && autoscroll) {
-      ref.current?.scrollIntoView({
-        behavior: 'smooth',
-        block: 'end'
-      });
-    }
-  }, [logEntries.length]);
-
-  const sendReadCommand = () => {
-    if (readValue === '') {
-      setReadOpen(!readOpen);
-      return;
-    }
-
-    if (readValue.split(' ').filter((word) => word !== '').length > 1) {
-      void send(readValue);
-      setReadOpen(false);
-      setReadValue('');
-    }
-  };
-
-  const content = () => {
-    if (!data) {
-      return <FormLoader onRetry={loadData} errorMessage={errorMessage} />;
-    }
-
-    return (
-      <>
-        <Grid container spacing={2} alignItems="center">
-          <Grid>
-            <TextField
-              name="level"
-              label={LL.LOG_LEVEL()}
-              value={data.level}
-              sx={{ width: '10ch' }}
-              variant="outlined"
-              onChange={updateFormValue}
-              margin="normal"
-              select
-            >
-              <MenuItem value={-1}>OFF</MenuItem>
-              <MenuItem value={3}>ERROR</MenuItem>
-              <MenuItem value={4}>WARNING</MenuItem>
-              <MenuItem value={5}>NOTICE</MenuItem>
-              <MenuItem value={6}>INFO</MenuItem>
-              <MenuItem value={9}>ALL</MenuItem>
-            </TextField>
-          </Grid>
-          {data.psram && (
-            <Grid>
-              <TextField
-                name="max_messages"
-                label={LL.BUFFER_SIZE()}
-                value={data.max_messages}
-                sx={{ width: '15ch' }}
-                variant="outlined"
-                onChange={updateFormValue}
-                margin="normal"
-                select
-              >
-                <MenuItem value={25}>25</MenuItem>
-                <MenuItem value={50}>50</MenuItem>
-                <MenuItem value={75}>75</MenuItem>
-                <MenuItem value={100}>100</MenuItem>
-              </TextField>
-            </Grid>
-          )}
-          <Grid>
-            <BlockFormControlLabel
-              control={
-                <Checkbox
-                  checked={data.compact}
-                  onChange={updateFormValue}
-                  name="compact"
-                />
-              }
-              label={LL.COMPACT()}
-            />
-            <BlockFormControlLabel
-              control={
-                <Checkbox
-                  checked={autoscroll}
-                  onChange={() => setAutoscroll(!autoscroll)}
-                  name="autoscroll"
-                />
-              }
-              label={LL.AUTO_SCROLL()}
-            />
-          </Grid>
-          <Grid>
-            <Button
-              startIcon={<DownloadIcon />}
-              variant="outlined"
-              color="secondary"
-              onClick={onDownload}
-            >
-              {LL.EXPORT()}
-            </Button>
-            {dirtyFlags && dirtyFlags.length !== 0 && (
-              <Button
-                startIcon={<WarningIcon color="warning" />}
-                variant="contained"
-                color="info"
-                onClick={saveSettings}
-              >
-                {LL.APPLY_CHANGES(dirtyFlags.length)}
-              </Button>
-            )}
-          </Grid>
-
-          {readOpen ? (
-            <Box
-              component="form"
-              sx={{ display: 'flex', alignItems: 'flex-end' }}
-              onSubmit={(e) => {
-                e.preventDefault();
-                sendReadCommand();
-              }}
-            >
-              <IconButton
-                disableRipple
-                onClick={() => {
-                  setReadOpen(false);
-                  setReadValue('');
-                }}
-              >
-                <PlayArrowIcon color="primary" sx={{ my: 2.5 }} />
-              </IconButton>
-              <TextField
-                value={readValue}
-                onChange={(e) => {
-                  const value = e.target.value;
-                  if (value !== '' && !ALPHA_NUMERIC_DASH_REGEX.test(value)) {
-                    return;
-                  }
-                  setReadValue(value);
-                }}
-                focused={true}
-                size="small"
-                label="Send Read command" // doesn't need translating - developer only
-                helperText="<deviceID> <typeID> [offset] [len]"
-              />
-            </Box>
-          ) : (
-            <>
-              {data.developer_mode && (
-                <IconButton onClick={sendReadCommand}>
-                  <PlayArrowIcon color="primary" />
-                </IconButton>
-              )}
-            </>
-          )}
-        </Grid>
-
-        <Box
-          sx={{
-            backgroundColor: 'black',
-            overflowY: 'scroll',
-            position: 'absolute',
-            right: 18,
-            bottom: 18,
-            left: () => leftOffset(),
-            top: () => topOffset(),
-            p: 1
-          }}
-        >
-          {logEntries.map((e) => (
-            <div key={e.i} style={{ font: '14px monospace', whiteSpace: 'nowrap' }}>
-              <span>{e.t}</span>
-              <span>{paddedLevelLabel(e.l)}&nbsp;</span>
-              <span>{paddedIDLabel(e.i)} </span>
-              <span>{paddedNameLabel(e.n)} </span>
-              <LogEntryLine details={{ level: e.l }} key={e.i}>
-                {e.m}
-              </LogEntryLine>
-            </div>
-          ))}
-
-          <div ref={ref} />
-        </Box>
-      </>
-    );
-  };
-
-  return (
-    <SectionContent id="log-window">
-      {blocker ? <BlockNavigation blocker={blocker} /> : null}
-      {content()}
-    </SectionContent>
-  );
-};
-
-export default SystemLog;

interface/src/app/status/bbqkees.svg

@@ -1,26 +0,0 @@
-<svg width="20mm" height="30.146mm" version="1.1" viewBox="0 0 20 30.146" xmlns="http://www.w3.org/2000/svg">
- <g transform="translate(-86.195 -104.7)">
-  <g transform="matrix(.53414 0 0 .53414 70.913 49.568)">
-   <g fill="#fff">
-    <path d="m66.034 122.7h-37.398a18.722 18.722 0 0 0-0.02643 0.52631 18.722 18.722 0 0 0 18.722 18.722 18.722 18.722 0 0 0 18.722-18.722 18.722 18.722 0 0 0-0.01882-0.52631z" color="#000000" stroke-width=".15037" style="-inkscape-stroke:none"/>
-    <path d="m30.943 141.6v2h32.174v-2z" color="#000000" style="-inkscape-stroke:none"/>
-    <path d="m40.738 142-6.9004 11.951 1.7305 1 6.9023-11.951z" color="#000000" style="-inkscape-stroke:none"/>
-    <g fill="#fff" fill-rule="evenodd">
-     <path d="m32.395 158.45-0.0041-7.9929 6.9282 4z" color="#000000" stroke-width=".8pt" style="-inkscape-stroke:none"/>
-     <path d="m31.857 149.54 0.0039 9.8398 0.80078-0.46094 7.7246-4.4551zm1.0664 1.8457 5.3281 3.0762-5.3242 3.0723z" color="#000000" style="-inkscape-stroke:none"/>
-    </g>
-    <path d="m56.547 103.22-1.5645 1.2461s0.33514 0.43498 0.48828 1.0391c0.15315 0.60408 0.18926 1.209-0.57617 1.9688-1.1965 1.1876-1.5061 2.5227-1.4004 3.4902 0.10574 0.96749 0.5918 1.6426 0.5918 1.6426l1.6211-1.1699s-0.17552-0.2403-0.22461-0.68946c-0.04909-0.44915-0.0062-1.0331 0.82031-1.8535 1.2576-1.2483 1.3774-2.8142 1.1074-3.8789s-0.86328-1.7949-0.86328-1.7949z" color="#000000" style="-inkscape-stroke:none"/>
-    <path d="m48.918 103.22-1.5645 1.2461s0.33513 0.43498 0.48828 1.0391 0.18926 1.209-0.57617 1.9688c-1.1965 1.1876-1.5042 2.5227-1.3984 3.4902 0.10574 0.96749 0.58984 1.6426 0.58984 1.6426l1.623-1.1699s-0.17552-0.2403-0.22461-0.68946c-0.04909-0.44915-0.0062-1.0331 0.82031-1.8535 1.2576-1.2483 1.3754-2.8142 1.1055-3.8789s-0.86328-1.7949-0.86328-1.7949z" color="#000000" style="-inkscape-stroke:none"/>
-    <path d="m41.291 103.22-1.5664 1.2461s0.33709 0.43498 0.49024 1.0391 0.18926 1.209-0.57617 1.9688c-1.1965 1.1876-1.5061 2.5227-1.4004 3.4902s0.5918 1.6426 0.5918 1.6426l1.6211-1.1699s-0.17552-0.2403-0.22461-0.68946c-0.04909-0.44916-0.0062-1.0331 0.82031-1.8535 1.2576-1.2483 1.3754-2.8142 1.1055-3.8789-0.26993-1.0647-0.86133-1.7949-0.86133-1.7949z" color="#000000" style="-inkscape-stroke:none"/>
-    <path d="m54.896 113.47c-1.4548 0-2.706 0.87699-3.5293 2.0957-0.82334 1.2187-1.291 2.8147-1.291 4.5586v8e-3c5.87e-4 0.0787 0.0036 0.15349 0.0059 0.22656l1.998-0.0605c-0.0019-0.0604-0.0034-0.11856-0.0039-0.17383v-2e-3c-1.6e-5 -2e-3 1.4e-5 -4e-3 0-6e-3 0.0015-1.3755 0.38921-2.6056 0.94726-3.4316 0.55917-0.82768 1.2182-1.2148 1.873-1.2148 0.65485 0 1.3139 0.38716 1.873 1.2148s0.94727 2.0607 0.94727 3.4394h2c0-1.7439-0.46768-3.3399-1.291-4.5586-0.82334-1.2187-2.0745-2.0957-3.5293-2.0957z" color="#000000" style="-inkscape-stroke:none;paint-order:stroke fill markers"/>
-    <path d="m47.27 113.47c-1.4548 0-2.706 0.87699-3.5293 2.0957-0.82334 1.2187-1.291 2.8147-1.291 4.5586h2c0-1.3788 0.38809-2.6118 0.94726-3.4394 0.55917-0.82768 1.2182-1.2148 1.873-1.2148 0.65484-1e-5 1.3119 0.38716 1.8711 1.2148 0.55802 0.82598 0.94567 2.0563 0.94727 3.4316-0.0018 0.0584-0.0035 0.11387-0.0059 0.16406l1.998 0.0957c0.0037-0.0788 0.0057-0.15249 0.0078-0.22071l2e-3 -0.0156v-0.0156c0-1.7439-0.46767-3.3399-1.291-4.5586-0.82334-1.2187-2.0745-2.0957-3.5293-2.0957z" color="#000000" style="-inkscape-stroke:none"/>
-    <path d="m39.641 113.47c-1.4548 0-2.706 0.87699-3.5293 2.0957-0.82334 1.2187-1.291 2.8147-1.291 4.5586v0.012c8.96e-4 0.0721 0.0037 0.15312 0.0078 0.24024l1.9961-0.0957c-0.0021-0.0456-0.0031-0.0976-0.0039-0.15625v-2e-3c3.87e-4 -1.378 0.38837-2.6102 0.94727-3.4375 0.55917-0.82768 1.2182-1.2148 1.873-1.2148 0.65484 0 1.3139 0.38716 1.873 1.2148s0.94726 2.0607 0.94726 3.4394h2c0-1.7439-0.46768-3.3399-1.291-4.5586s-2.0745-2.0957-3.5293-2.0957z" color="#000000" style="-inkscape-stroke:none"/>
-    <path d="m57.557 119.33v2h5.8418v-2z" color="#000000" style="-inkscape-stroke:none"/>
-    <path d="m31.137 119.33v2h5.8418v-2z" color="#000000" style="-inkscape-stroke:none"/>
-   </g>
-   <path d="m35.826 119.95v0.77149h22.883v-0.77149z" color="#000000" fill-opacity="0" style="-inkscape-stroke:none"/>
-   <path d="m59.064 150.73c-2.4534 0-4.4629 2.0115-4.4629 4.4648s2.0095 4.4629 4.4629 4.4629 4.4629-2.0095 4.4629-4.4629-2.0095-4.4648-4.4629-4.4648zm0 2c1.3725 0 2.4629 1.0924 2.4629 2.4648s-1.0904 2.4629-2.4629 2.4629-2.4629-1.0904-2.4629-2.4629 1.0904-2.4648 2.4629-2.4648z" color="#000000" fill="#fff" style="-inkscape-stroke:none;paint-order:stroke fill markers"/>
-   <path d="m54.932 142.14-1.8359 0.79687 3.752 8.6582 1.8359-0.79493z" color="#000000" fill="#fff" style="-inkscape-stroke:none"/>
-  </g>
- </g>
-</svg>

interface/src/components/ButtonRow.tsx

@@ -1,7 +1,6 @@
-import type { FC } from 'react';
-
 import { Box } from '@mui/material';
 import type { BoxProps } from '@mui/material';
+import type { FC } from 'react';
 
 const ButtonRow: FC<BoxProps> = ({ children, ...rest }) => (
   <Box

interface/src/components/MessageBox.tsx

@@ -1,11 +1,10 @@
-import type { FC } from 'react';
-
 import CheckCircleOutlineOutlinedIcon from '@mui/icons-material/CheckCircleOutlineOutlined';
 import ErrorIcon from '@mui/icons-material/Error';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import ReportProblemOutlinedIcon from '@mui/icons-material/ReportProblemOutlined';
 import { Box, Typography, useTheme } from '@mui/material';
 import type { BoxProps, SvgIconProps, Theme } from '@mui/material';
+import type { FC } from 'react';
 
 type MessageBoxLevel = 'warning' | 'success' | 'info' | 'error';
 
@@ -14,44 +13,27 @@ export interface MessageBoxProps extends BoxProps {
   message: string;
 }
 
-const LEVEL_ICONS: {
+const LEVEL_ICONS: { [type in MessageBoxLevel]: React.ComponentType<SvgIconProps> } = {
-  [type in MessageBoxLevel]: React.ComponentType<SvgIconProps>;
-} = {
   success: CheckCircleOutlineOutlinedIcon,
   info: InfoOutlinedIcon,
   warning: ReportProblemOutlinedIcon,
   error: ErrorIcon
 };
 
-const LEVEL_BACKGROUNDS: {
+const LEVEL_BACKGROUNDS: { [type in MessageBoxLevel]: (theme: Theme) => string } = {
-  [type in MessageBoxLevel]: (theme: Theme) => string;
-} = {
   success: (theme: Theme) => theme.palette.success.dark,
   info: (theme: Theme) => theme.palette.info.main,
   warning: (theme: Theme) => theme.palette.warning.dark,
   error: (theme: Theme) => theme.palette.error.dark
 };
 
-const MessageBox: FC<MessageBoxProps> = ({
+const MessageBox: FC<MessageBoxProps> = ({ level, message, sx, children, ...rest }) => {
-  level,
-  message,
-  sx,
-  children,
-  ...rest
-}) => {
   const theme = useTheme();
   const Icon = LEVEL_ICONS[level];
   const backgroundColor = LEVEL_BACKGROUNDS[level](theme);
   const color = 'white';
   return (
-    <Box
+    <Box p={2} display="flex" alignItems="center" borderRadius={1} sx={{ backgroundColor, color, ...sx }} {...rest}>
-      p={2}
-      display="flex"
-      alignItems="center"
-      borderRadius={1}
-      sx={{ backgroundColor, color, ...sx }}
-      {...rest}
-    >
       <Icon />
       <Typography sx={{ ml: 2, flexGrow: 1 }} variant="body1">
         {message}

interface/src/components/SectionContent.tsx

@@ -1,11 +1,11 @@
+import { Paper, Divider } from '@mui/material';
 import type { FC } from 'react';
 
-import { Divider, Paper } from '@mui/material';
-
 import type { RequiredChildrenProps } from 'utils';
 
 interface SectionContentProps extends RequiredChildrenProps {
-  title?: string;
+  title: string;
+  titleGutter?: boolean;
   id?: string;
 }
 
@@ -13,18 +13,7 @@ const SectionContent: FC<SectionContentProps> = (props) => {
   const { children, title, id } = props;
   return (
     <Paper id={id} sx={{ p: 2, m: 2 }}>
-      {title && (
+      <Divider sx={{ pb: 2, borderColor: 'primary.main', fontSize: 20, color: 'primary.main' }}>{title}</Divider>
-        <Divider
-          sx={{
-            pb: 2,
-            borderColor: 'primary.main',
-            fontSize: 20,
-            color: 'primary.main'
-          }}
-        >
-          {title}
-        </Divider>
-      )}
       {children}
     </Paper>
   );

interface/src/components/inputs/BlockFormControlLabel.tsx

@@ -1,7 +1,6 @@
-import type { FC } from 'react';
-
 import { FormControlLabel } from '@mui/material';
 import type { FormControlLabelProps } from '@mui/material';
+import type { FC } from 'react';
 
 const BlockFormControlLabel: FC<FormControlLabelProps> = (props) => (
   <div>

interface/src/components/inputs/LanguageSelector.tsx

@@ -1,89 +0,0 @@
-import { type ChangeEventHandler, useContext } from 'react';
-
-import { MenuItem, TextField } from '@mui/material';
-
-import CZflag from 'i18n/CZ.svg';
-import DEflag from 'i18n/DE.svg';
-import FRflag from 'i18n/FR.svg';
-import GBflag from 'i18n/GB.svg';
-import ITflag from 'i18n/IT.svg';
-import NLflag from 'i18n/NL.svg';
-import NOflag from 'i18n/NO.svg';
-import PLflag from 'i18n/PL.svg';
-import SKflag from 'i18n/SK.svg';
-import SVflag from 'i18n/SV.svg';
-import TRflag from 'i18n/TR.svg';
-import { I18nContext } from 'i18n/i18n-react';
-import type { Locales } from 'i18n/i18n-types';
-import { loadLocaleAsync } from 'i18n/i18n-util.async';
-
-const LanguageSelector = () => {
-  const { setLocale, locale } = useContext(I18nContext);
-
-  const onLocaleSelected: ChangeEventHandler<HTMLInputElement> = async ({
-    target
-  }) => {
-    const loc = target.value as Locales;
-    localStorage.setItem('lang', loc);
-    await loadLocaleAsync(loc);
-    setLocale(loc);
-  };
-
-  return (
-    <TextField
-      name="locale"
-      variant="outlined"
-      value={locale}
-      onChange={onLocaleSelected}
-      size="small"
-      select
-    >
-      <MenuItem key="cz" value="cz">
-        <img src={CZflag} style={{ width: 16, verticalAlign: 'middle' }} />
-        &nbsp;CZ
-      </MenuItem>
-      <MenuItem key="de" value="de">
-        <img src={DEflag} style={{ width: 16, verticalAlign: 'middle' }} />
-        &nbsp;DE
-      </MenuItem>
-      <MenuItem key="en" value="en">
-        <img src={GBflag} style={{ width: 16, verticalAlign: 'middle' }} />
-        &nbsp;EN
-      </MenuItem>
-      <MenuItem key="fr" value="fr">
-        <img src={FRflag} style={{ width: 16, verticalAlign: 'middle' }} />
-        &nbsp;FR
-      </MenuItem>
-      <MenuItem key="it" value="it">
-        <img src={ITflag} style={{ width: 16, verticalAlign: 'middle' }} />
-        &nbsp;IT
-      </MenuItem>
-      <MenuItem key="nl" value="nl">
-        <img src={NLflag} style={{ width: 16, verticalAlign: 'middle' }} />
-        &nbsp;NL
-      </MenuItem>
-      <MenuItem key="no" value="no">
-        <img src={NOflag} style={{ width: 16, verticalAlign: 'middle' }} />
-        &nbsp;NO
-      </MenuItem>
-      <MenuItem key="pl" value="pl">
-        <img src={PLflag} style={{ width: 16, verticalAlign: 'middle' }} />
-        &nbsp;PL
-      </MenuItem>
-      <MenuItem key="sk" value="sk">
-        <img src={SKflag} style={{ width: 16, verticalAlign: 'middle' }} />
-        &nbsp;SK
-      </MenuItem>
-      <MenuItem key="sv" value="sv">
-        <img src={SVflag} style={{ width: 16, verticalAlign: 'middle' }} />
-        &nbsp;SV
-      </MenuItem>
-      <MenuItem key="tr" value="tr">
-        <img src={TRflag} style={{ width: 16, verticalAlign: 'middle' }} />
-        &nbsp;TR
-      </MenuItem>
-    </TextField>
-  );
-};
-
-export default LanguageSelector;

interface/src/components/inputs/ValidatedPasswordField.tsx

@@ -1,24 +1,23 @@
-import { useState } from 'react';
-import type { FC } from 'react';
-
 import VisibilityIcon from '@mui/icons-material/Visibility';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import { IconButton, InputAdornment } from '@mui/material';
+import { useState } from 'react';
 
 import ValidatedTextField from './ValidatedTextField';
 import type { ValidatedTextFieldProps } from './ValidatedTextField';
+import type { FC } from 'react';
 
 type ValidatedPasswordFieldProps = Omit<ValidatedTextFieldProps, 'type'>;
 
-const ValidatedPasswordField: FC<ValidatedPasswordFieldProps> = ({ ...props }) => {
+const ValidatedPasswordField: FC<ValidatedPasswordFieldProps> = ({ InputProps, ...props }) => {
   const [showPassword, setShowPassword] = useState<boolean>(false);
 
   return (
     <ValidatedTextField
       {...props}
       type={showPassword ? 'text' : 'password'}
-      slotProps={{
+      InputProps={{
-        input: {
+        ...InputProps,
         endAdornment: (
           <InputAdornment position="end">
             <IconButton onClick={() => setShowPassword(!showPassword)} edge="end">
@@ -26,7 +25,6 @@ const ValidatedPasswordField: FC<ValidatedPasswordFieldProps> = ({ ...props }) =
             </IconButton>
           </InputAdornment>
         )
-        }
       }}
     />
   );

interface/src/components/inputs/ValidatedTextField.tsx

@@ -1,9 +1,7 @@
-import type { FC } from 'react';
-
 import { FormHelperText, TextField } from '@mui/material';
 import type { TextFieldProps } from '@mui/material';
-
 import type { ValidateFieldsError } from 'async-validator';
+import type { FC } from 'react';
 
 interface ValidatedFieldProps {
   fieldErrors?: ValidateFieldsError;
@@ -12,14 +10,9 @@ interface ValidatedFieldProps {
 
 export type ValidatedTextFieldProps = ValidatedFieldProps & TextFieldProps;
 
-const ValidatedTextField: FC<ValidatedTextFieldProps> = ({
+const ValidatedTextField: FC<ValidatedTextFieldProps> = ({ fieldErrors, ...rest }) => {
-  fieldErrors,
-  ...rest
-}) => {
   const errors = fieldErrors && fieldErrors[rest.name];
-  const renderErrors = () =>
+  const renderErrors = () => errors && errors.map((e, i) => <FormHelperText key={i}>{e.message}</FormHelperText>);
-    errors &&
-    errors.map((e) => <FormHelperText key={e.message}>{e.message}</FormHelperText>);
   return (
     <>
       <TextField error={!!errors} {...rest} />

interface/src/components/inputs/index.ts

@@ -1,4 +1,3 @@
 export { default as BlockFormControlLabel } from './BlockFormControlLabel';
 export { default as ValidatedPasswordField } from './ValidatedPasswordField';
 export { default as ValidatedTextField } from './ValidatedTextField';
-export { default as LanguageSelector } from './LanguageSelector';

interface/src/components/layout/Layout.tsx

@@ -1,15 +1,13 @@
-import { useEffect, useMemo, useState } from 'react';
-import type { FC } from 'react';
-import { useLocation } from 'react-router-dom';
-
 import { Box, Toolbar } from '@mui/material';
-
+import { useState, useEffect } from 'react';
-import { PROJECT_NAME } from 'env';
+import { useLocation } from 'react-router-dom';
-import type { RequiredChildrenProps } from 'utils';
-
 import LayoutAppBar from './LayoutAppBar';
 import LayoutDrawer from './LayoutDrawer';
 import { LayoutContext } from './context';
+import type { FC } from 'react';
+
+import type { RequiredChildrenProps } from 'utils';
+import { PROJECT_NAME } from 'api/env';
 
 export const DRAWER_WIDTH = 210;
 
@@ -24,11 +22,8 @@ const Layout: FC<RequiredChildrenProps> = ({ children }) => {
 
   useEffect(() => setMobileOpen(false), [pathname]);
 
-  // cache the object to prevent unnecessary re-renders
-  const obj = useMemo(() => ({ title, setTitle }), [title]);
-
   return (
-    <LayoutContext.Provider value={obj}>
+    <LayoutContext.Provider value={{ title, setTitle }}>
       <LayoutAppBar title={title} onToggleDrawer={handleDrawerToggle} />
       <LayoutDrawer mobileOpen={mobileOpen} onClose={handleDrawerToggle} />
       <Box component="main" sx={{ marginLeft: { md: `${DRAWER_WIDTH}px` } }}>

interface/src/components/layout/LayoutAppBar.tsx

@@ -1,8 +1,7 @@
-import { useLocation, useNavigate } from 'react-router-dom';
-
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import MenuIcon from '@mui/icons-material/Menu';
-import { AppBar, IconButton, Toolbar, Typography } from '@mui/material';
+import { AppBar, Box, IconButton, Toolbar, Typography } from '@mui/material';
+import LayoutAuthMenu from './LayoutAuthMenu';
+import type { FC } from 'react';
 
 export const DRAWER_WIDTH = 210;
 
@@ -11,15 +10,7 @@ interface LayoutAppBarProps {
   onToggleDrawer: () => void;
 }
 
-const LayoutAppBar = ({ title, onToggleDrawer }: LayoutAppBarProps) => {
+const LayoutAppBar: FC<LayoutAppBarProps> = ({ title, onToggleDrawer }) => (
-  const pathnames = useLocation()
-    .pathname.split('/')
-    .filter((x) => x);
-  const show_back = pathnames.length > 1;
-
-  const navigate = useNavigate();
-
-  return (
   <AppBar
     position="fixed"
     sx={{
@@ -30,32 +21,16 @@ const LayoutAppBar = ({ title, onToggleDrawer }: LayoutAppBarProps) => {
     }}
   >
     <Toolbar>
-        <IconButton
+      <IconButton color="inherit" edge="start" onClick={onToggleDrawer} sx={{ mr: 2, display: { md: 'none' } }}>
-          color="inherit"
-          edge="start"
-          onClick={onToggleDrawer}
-          sx={{ mr: 2, display: { md: 'none' } }}
-        >
         <MenuIcon />
       </IconButton>
-
-        {show_back && (
-          <IconButton
-            sx={{ mr: 1 }}
-            color="inherit"
-            edge="start"
-            onClick={() => navigate(pathnames[0])}
-          >
-            <ArrowBackIcon />
-          </IconButton>
-        )}
-
       <Typography variant="h6" noWrap component="div">
         {title}
       </Typography>
+      <Box flexGrow={1} />
+      <LayoutAuthMenu />
     </Toolbar>
   </AppBar>
-  );
+);
-};
 
 export default LayoutAppBar;

interface/src/components/layout/LayoutAuthMenu.tsx

@@ -0,0 +1,165 @@
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+import PersonIcon from '@mui/icons-material/Person';
+import {
+  Box,
+  Button,
+  Divider,
+  IconButton,
+  Popover,
+  Typography,
+  Avatar,
+  styled,
+  MenuItem,
+  TextField
+} from '@mui/material';
+import { useState, useContext } from 'react';
+import type { TypographyProps } from '@mui/material';
+import type { Locales } from 'i18n/i18n-types';
+import type { FC, ChangeEventHandler } from 'react';
+import { AuthenticatedContext } from 'contexts/authentication';
+import DEflag from 'i18n/DE.svg';
+import FRflag from 'i18n/FR.svg';
+import GBflag from 'i18n/GB.svg';
+import ITflag from 'i18n/IT.svg';
+import NLflag from 'i18n/NL.svg';
+import NOflag from 'i18n/NO.svg';
+import PLflag from 'i18n/PL.svg';
+import SKflag from 'i18n/SK.svg';
+import SVflag from 'i18n/SV.svg';
+import TRflag from 'i18n/TR.svg';
+
+import { I18nContext } from 'i18n/i18n-react';
+import { loadLocaleAsync } from 'i18n/i18n-util.async';
+
+const ItemTypography = styled(Typography)<TypographyProps>({
+  maxWidth: '250px',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis'
+});
+
+const LayoutAuthMenu: FC = () => {
+  const { me, signOut } = useContext(AuthenticatedContext);
+
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const { locale, LL, setLocale } = useContext(I18nContext);
+
+  const onLocaleSelected: ChangeEventHandler<HTMLInputElement> = async ({ target }) => {
+    const loc = target.value as Locales;
+    localStorage.setItem('lang', loc);
+    await loadLocaleAsync(loc);
+    setLocale(loc);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const open = Boolean(anchorEl);
+  const id = anchorEl ? 'app-menu-popover' : undefined;
+
+  return (
+    <>
+      <TextField
+        name="locale"
+        InputProps={{ style: { fontSize: 10 } }}
+        variant="outlined"
+        value={locale}
+        onChange={onLocaleSelected}
+        size="small"
+        select
+      >
+        <MenuItem key="de" value="de">
+          <img src={DEflag} style={{ width: 16, verticalAlign: 'middle' }} />
+          &nbsp;DE
+        </MenuItem>
+        <MenuItem key="en" value="en">
+          <img src={GBflag} style={{ width: 16, verticalAlign: 'middle' }} />
+          &nbsp;EN
+        </MenuItem>
+        <MenuItem key="fr" value="fr">
+          <img src={FRflag} style={{ width: 16, verticalAlign: 'middle' }} />
+          &nbsp;FR
+        </MenuItem>
+        <MenuItem key="it" value="it">
+          <img src={ITflag} style={{ width: 16, verticalAlign: 'middle' }} />
+          &nbsp;IT
+        </MenuItem>
+        <MenuItem key="nl" value="nl">
+          <img src={NLflag} style={{ width: 16, verticalAlign: 'middle' }} />
+          &nbsp;NL
+        </MenuItem>
+        <MenuItem key="no" value="no">
+          <img src={NOflag} style={{ width: 16, verticalAlign: 'middle' }} />
+          &nbsp;NO
+        </MenuItem>
+        <MenuItem key="pl" value="pl">
+          <img src={PLflag} style={{ width: 16, verticalAlign: 'middle' }} />
+          &nbsp;PL
+        </MenuItem>
+        <MenuItem key="sk" value="sk">
+          <img src={SKflag} style={{ width: 16, verticalAlign: 'middle' }} />
+          &nbsp;SK
+        </MenuItem>
+        <MenuItem key="sv" value="sv">
+          <img src={SVflag} style={{ width: 16, verticalAlign: 'middle' }} />
+          &nbsp;SV
+        </MenuItem>
+        <MenuItem key="tr" value="tr">
+          <img src={TRflag} style={{ width: 16, verticalAlign: 'middle' }} />
+          &nbsp;TR
+        </MenuItem>
+      </TextField>
+
+      <IconButton
+        id="open-auth-menu"
+        sx={{ ml: 1, padding: 0 }}
+        aria-describedby={id}
+        color="inherit"
+        onClick={handleClick}
+      >
+        <AccountCircleIcon />
+      </IconButton>
+      <Popover
+        id="app-menu-popover"
+        sx={{ mt: 1 }}
+        open={open}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'center'
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'center'
+        }}
+      >
+        <Box display="flex" flexDirection="row" alignItems="center" p={2}>
+          <Avatar sx={{ width: 80, height: 80 }}>
+            <PersonIcon fontSize="large" />
+          </Avatar>
+          <Box pl={2}>
+            <ItemTypography variant="h6">{me.username}</ItemTypography>
+            <ItemTypography variant="body1">
+              {me.admin ? LL.ADMIN() : LL.GUEST()}&nbsp;{LL.USER(2)}
+            </ItemTypography>
+          </Box>
+        </Box>
+        <Divider />
+        <Box p={1.5}>
+          <Button variant="outlined" fullWidth color="primary" onClick={() => signOut(true)}>
+            {LL.SIGN_OUT()}
+          </Button>
+        </Box>
+      </Popover>
+    </>
+  );
+};
+
+export default LayoutAuthMenu;

interface/src/components/layout/LayoutDrawer.tsx

@@ -1,9 +1,9 @@
 import { Box, Divider, Drawer, Toolbar, Typography, styled } from '@mui/material';
-
-import { PROJECT_NAME } from 'env';
-
 import { DRAWER_WIDTH } from './Layout';
 import LayoutMenu from './LayoutMenu';
+import type { FC } from 'react';
+
+import { PROJECT_NAME } from 'api/env';
 
 const LayoutDrawerLogo = styled('img')(({ theme }) => ({
   [theme.breakpoints.down('sm')]: {
@@ -21,7 +21,7 @@ interface LayoutDrawerProps {
   onClose: () => void;
 }
 
-const LayoutDrawerProps = ({ mobileOpen, onClose }: LayoutDrawerProps) => {
+const LayoutDrawer: FC<LayoutDrawerProps> = ({ mobileOpen, onClose }) => {
   const drawer = (
     <>
       <Toolbar disableGutters>
@@ -66,4 +66,4 @@ const LayoutDrawerProps = ({ mobileOpen, onClose }: LayoutDrawerProps) => {
   );
 };
 
-export default LayoutDrawerProps;
+export default LayoutDrawer;

interface/src/components/layout/LayoutMenu.tsx

@@ -1,210 +1,53 @@
-import { useContext, useState } from 'react';
+import AccessTimeIcon from '@mui/icons-material/AccessTime';
 
-import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+import DashboardIcon from '@mui/icons-material/Dashboard';
-import AssessmentIcon from '@mui/icons-material/Assessment';
+import DeviceHubIcon from '@mui/icons-material/DeviceHub';
-import CategoryIcon from '@mui/icons-material/Category';
+import InfoIcon from '@mui/icons-material/Info';
-import ConstructionIcon from '@mui/icons-material/Construction';
+import LockIcon from '@mui/icons-material/Lock';
-import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';
-import LiveHelpIcon from '@mui/icons-material/LiveHelp';
-import MoreTimeIcon from '@mui/icons-material/MoreTime';
-import PersonIcon from '@mui/icons-material/Person';
-import PlaylistAddIcon from '@mui/icons-material/PlaylistAdd';
-import SensorsIcon from '@mui/icons-material/Sensors';
 import SettingsIcon from '@mui/icons-material/Settings';
-import StarIcon from '@mui/icons-material/Star';
+import SettingsEthernetIcon from '@mui/icons-material/SettingsEthernet';
-import {
+import SettingsInputAntennaIcon from '@mui/icons-material/SettingsInputAntenna';
-  Avatar,
+import TuneIcon from '@mui/icons-material/Tune';
-  Box,
+import { Divider, List } from '@mui/material';
-  Button,
+import { useContext } from 'react';
-  Divider,
+import type { FC } from 'react';
-  List,
-  ListItem,
-  ListItemButton,
-  ListItemIcon,
-  ListItemText,
-  Popover
-} from '@mui/material';
 
-import { LanguageSelector } from 'components/inputs';
 import LayoutMenuItem from 'components/layout/LayoutMenuItem';
+
 import { AuthenticatedContext } from 'contexts/authentication';
+
 import { useI18nContext } from 'i18n/i18n-react';
 
-const LayoutMenu = () => {
+const LayoutMenu: FC = () => {
-  const { me, signOut } = useContext(AuthenticatedContext);
+  const authenticatedContext = useContext(AuthenticatedContext);
   const { LL } = useI18nContext();
 
-  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
-
-  const open = Boolean(anchorEl);
-  const id = anchorEl ? 'app-menu-popover' : undefined;
-
-  const [menuOpen, setMenuOpen] = useState(true);
-
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
   return (
     <>
-      <List component="nav">
+      <List disablePadding component="nav">
-        <LayoutMenuItem icon={StarIcon} label="Dashboard" to={`/dashboard`} />
+        <LayoutMenuItem icon={DashboardIcon} label={LL.DASHBOARD()} to={`/dashboard`} />
-        <LayoutMenuItem icon={CategoryIcon} label={LL.DEVICES()} to={`/devices`} />
+        <LayoutMenuItem
+          icon={TuneIcon}
+          label={LL.SETTINGS_OF('')}
+          to={`/settings`}
+          disabled={!authenticatedContext.me.admin}
+        />
+        <LayoutMenuItem icon={InfoIcon} label={LL.HELP_OF('')} to={`/help`} />
         <Divider />
-
-        <Box
-          sx={{
-            bgcolor: menuOpen ? 'rgba(71, 98, 130, 0.2)' : null,
-            pb: menuOpen ? 2 : 0
-          }}
-        >
-          <ListItemButton
-            alignItems="flex-start"
-            onClick={() => setMenuOpen(!menuOpen)}
-            sx={{
-              pt: 2.5,
-              pb: menuOpen ? 0 : 2.5,
-              '&:hover, &:focus': { '& svg': { opacity: 1 } }
-            }}
-          >
-            <ListItemText
-              primary={LL.MODULES()}
-              primaryTypographyProps={{
-                fontWeight: '600',
-                mb: '2px',
-                color: 'lightblue'
-              }}
-              // secondary={
-              //   LL.CUSTOMIZATIONS() +
-              //   ', ' +
-              //   LL.SCHEDULER() +
-              //   ', ' +
-              //   LL.CUSTOM_ENTITIES(0) +
-              //   '...'
-              // }
-              // secondaryTypographyProps={{
-              //   noWrap: true,
-              //   fontSize: 12,
-              //   color: menuOpen ? 'rgba(0,0,0,0)' : 'rgba(255,255,255,0.5)'
-              // }}
-              sx={{ my: 0 }}
-            />
-            <KeyboardArrowDown
-              sx={{
-                mr: -1,
-                opacity: 0,
-                transform: menuOpen ? 'rotate(-180deg)' : 'rotate(0)',
-                transition: '0.2s'
-              }}
-            />
-          </ListItemButton>
-          {menuOpen && (
-            <>
-              <LayoutMenuItem
-                icon={SensorsIcon}
-                label={LL.SENSORS()}
-                to={`/sensors`}
-              />
-
-              <LayoutMenuItem
-                icon={ConstructionIcon}
-                label={LL.CUSTOMIZATIONS()}
-                disabled={!me.admin}
-                to={`/customizations`}
-              />
-              <LayoutMenuItem
-                icon={MoreTimeIcon}
-                label={LL.SCHEDULER()}
-                disabled={!me.admin}
-                to={`/scheduler`}
-              />
-              <LayoutMenuItem
-                icon={PlaylistAddIcon}
-                label={LL.CUSTOM_ENTITIES(0)}
-                disabled={!me.admin}
-                to={`/customentities`}
-              />
-            </>
-          )}
-        </Box>
       </List>
-
+      <List disablePadding component="nav">
-      <List style={{ marginTop: `auto` }}>
+        <LayoutMenuItem icon={SettingsEthernetIcon} label={LL.NETWORK(0)} to="/network" />
+        <LayoutMenuItem icon={SettingsInputAntennaIcon} label={LL.ACCESS_POINT(0)} to="/ap" />
+        <LayoutMenuItem icon={AccessTimeIcon} label="NTP" to="/ntp" />
+        <LayoutMenuItem icon={DeviceHubIcon} label="MQTT" to="/mqtt" />
         <LayoutMenuItem
-          icon={AssessmentIcon}
+          icon={LockIcon}
-          label={LL.STATUS_OF('')}
+          label={LL.SECURITY(0)}
-          to="/status"
+          to="/security"
+          disabled={!authenticatedContext.me.admin}
         />
-        <LayoutMenuItem
+        <LayoutMenuItem icon={SettingsIcon} label={LL.SYSTEM(0)} to="/system" />
-          icon={SettingsIcon}
-          label={LL.SETTINGS(0)}
-          disabled={!me.admin}
-          to="/settings"
-        />
-        <LayoutMenuItem icon={LiveHelpIcon} label={LL.HELP()} to={`/help`} />
       </List>
-      <Divider />
-      <List>
-        <ListItem disablePadding>
-          <ListItemButton component="button" onClick={handleClick}>
-            <ListItemIcon sx={{ color: '#9e9e9e' }}>
-              <AccountCircleIcon />
-            </ListItemIcon>
-            <ListItemText sx={{ color: '#2196f3' }}>{me.username}</ListItemText>
-          </ListItemButton>
-        </ListItem>
-      </List>
-
-      <Popover
-        id={id}
-        open={open}
-        anchorEl={anchorEl}
-        onClose={handleClose}
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'center'
-        }}
-        transformOrigin={{
-          vertical: 'top',
-          horizontal: 'center'
-        }}
-      >
-        <Box
-          padding={2}
-          justifyContent="center"
-          flexDirection="column"
-          sx={{
-            borderRadius: 3,
-            border: '3px solid grey'
-          }}
-        >
-          <Button
-            variant="outlined"
-            fullWidth
-            color="primary"
-            onClick={() => signOut(true)}
-          >
-            {LL.SIGN_OUT()}
-          </Button>
-          <List>
-            <ListItem disablePadding>
-              <Avatar sx={{ bgcolor: '#9e9e9e', color: 'white' }}>
-                <PersonIcon />
-              </Avatar>
-              <ListItemText
-                sx={{ pl: 2, color: '#2196f3' }}
-                primary={me.username}
-                secondary={'(' + (me.admin ? LL.ADMINISTRATOR() : LL.GUEST()) + ')'}
-              />
-            </ListItem>
-          </List>
-          <LanguageSelector />
-        </Box>
-      </Popover>
     </>
   );
 };

interface/src/components/layout/LayoutMenuItem.tsx

@@ -1,7 +1,7 @@
+import { ListItem, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
 import { Link, useLocation } from 'react-router-dom';
-
-import { ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
 import type { SvgIconProps } from '@mui/material';
+import type { FC } from 'react';
 
 import { routeMatches } from 'utils';
 
@@ -12,25 +12,20 @@ interface LayoutMenuItemProps {
   disabled?: boolean;
 }
 
-const LayoutMenuItem = ({
+const LayoutMenuItem: FC<LayoutMenuItemProps> = ({ icon: Icon, label, to, disabled }) => {
-  icon: Icon,
-  label,
-  to,
-  disabled
-}: LayoutMenuItemProps) => {
   const { pathname } = useLocation();
 
   const selected = routeMatches(to, pathname);
 
   return (
+    <ListItem disablePadding>
       <ListItemButton component={Link} to={to} disabled={disabled} selected={selected}>
         <ListItemIcon sx={{ color: selected ? '#90caf9' : '#9e9e9e' }}>
           <Icon />
         </ListItemIcon>
-      <ListItemText sx={{ color: selected ? '#90caf9' : '#f5f5f5' }}>
+        <ListItemText sx={{ color: selected ? '#90caf9' : '#f5f5f5' }}>{label}</ListItemText>
-        {label}
-      </ListItemText>
       </ListItemButton>
+    </ListItem>
   );
 };
 

interface/src/components/layout/ListMenuItem.tsx

@@ -1,72 +0,0 @@
-import { Link } from 'react-router-dom';
-
-import NavigateNextIcon from '@mui/icons-material/NavigateNext';
-import {
-  Avatar,
-  ListItem,
-  ListItemAvatar,
-  ListItemButton,
-  ListItemIcon,
-  ListItemText
-} from '@mui/material';
-import type { SvgIconProps } from '@mui/material';
-
-interface ListMenuItemProps {
-  icon: React.ComponentType<SvgIconProps>;
-  bgcolor?: string;
-  label: string;
-  text: string;
-  to?: string;
-  disabled?: boolean;
-}
-
-function RenderIcon({ icon: Icon, bgcolor, label, text }: ListMenuItemProps) {
-  return (
-    <>
-      <ListItemAvatar>
-        <Avatar sx={{ bgcolor, color: 'white' }}>
-          <Icon />
-        </Avatar>
-      </ListItemAvatar>
-      <ListItemText primary={label} secondary={text} />
-    </>
-  );
-}
-
-const LayoutMenuItem = ({
-  icon,
-  bgcolor,
-  label,
-  text,
-  to,
-  disabled
-}: ListMenuItemProps) => (
-  <>
-    {to && !disabled ? (
-      <ListItem
-        disablePadding
-        secondaryAction={
-          <ListItemIcon
-            style={{
-              justifyContent: 'right',
-              color: 'lightblue',
-              verticalAlign: 'middle'
-            }}
-          >
-            <NavigateNextIcon />
-          </ListItemIcon>
-        }
-      >
-        <ListItemButton component={Link} to={to}>
-          <RenderIcon icon={icon} bgcolor={bgcolor} label={label} text={text} />
-        </ListItemButton>
-      </ListItem>
-    ) : (
-      <ListItem>
-        <RenderIcon icon={icon} bgcolor={bgcolor} label={label} text={text} />
-      </ListItem>
-    )}
-  </>
-);
-
-export default LayoutMenuItem;

interface/src/components/layout/context.ts

@@ -1,4 +1,4 @@
-import { createContext, useContext, useEffect, useRef } from 'react';
+import { useRef, useEffect, createContext, useContext } from 'react';
 
 export interface LayoutContextValue {
   title: string;

interface/src/components/loading/ApplicationError.tsx

@@ -0,0 +1,42 @@
+import WarningIcon from '@mui/icons-material/Warning';
+import { Box, Paper, Typography } from '@mui/material';
+import type { FC } from 'react';
+
+interface ApplicationErrorProps {
+  message?: string;
+}
+
+const ApplicationError: FC<ApplicationErrorProps> = ({ message }) => (
+  <Box display="flex" height="100vh" justifyContent="center" flexDirection="column">
+    <Paper
+      elevation={10}
+      sx={{
+        textAlign: 'center',
+        padding: '280px 0 40px 0',
+        backgroundImage: 'url("/app/icon.png")',
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: '50% 40px',
+        backgroundSize: '200px auto',
+        width: '100%',
+        borderRadius: 0
+      }}
+    >
+      <Box display="flex" flexDirection="row" justifyContent="center" alignItems="center" mb={2}>
+        <WarningIcon fontSize="large" color="error" />
+        <Box ml={2}>
+          <Typography variant="h4">Application Error</Typography>
+        </Box>
+      </Box>
+      <Typography variant="subtitle1" gutterBottom>
+        Failed to configure the application, please refresh to try again.
+      </Typography>
+      {message && (
+        <Typography variant="subtitle2" gutterBottom>
+          {message}
+        </Typography>
+      )}
+    </Paper>
+  </Box>
+);
+
+export default ApplicationError;

interface/src/components/loading/FormLoader.tsx

@@ -1,7 +1,9 @@
 import RefreshIcon from '@mui/icons-material/Refresh';
 import { Box, Button, CircularProgress, Typography } from '@mui/material';
+import type { FC } from 'react';
 
 import { MessageBox } from 'components';
+
 import { useI18nContext } from 'i18n/i18n-react';
 
 interface FormLoaderProps {
@@ -10,23 +12,14 @@ interface FormLoaderProps {
   onRetry?: () => void;
 }
 
-const FormLoader = ({
+const FormLoader: FC<FormLoaderProps> = ({ errorMessage, onRetry, message = 'Loading…' }) => {
-  errorMessage,
-  onRetry,
-  message = 'Loading…'
-}: FormLoaderProps) => {
   const { LL } = useI18nContext();
 
   if (errorMessage) {
     return (
       <MessageBox my={2} level="error" message={errorMessage}>
         {onRetry && (
-          <Button
+          <Button startIcon={<RefreshIcon />} variant="contained" color="error" onClick={onRetry}>
-            startIcon={<RefreshIcon />}
-            variant="contained"
-            color="error"
-            onClick={onRetry}
-          >
             {LL.RETRY()}
           </Button>
         )}

interface/src/components/loading/LoadingSpinner.tsx

@@ -1,5 +1,6 @@
-import { Box, CircularProgress, Typography } from '@mui/material';
+import { CircularProgress, Box, Typography } from '@mui/material';
 import type { Theme } from '@mui/material';
+import type { FC } from 'react';
 
 import { useI18nContext } from 'i18n/i18n-react';
 
@@ -7,18 +8,11 @@ interface LoadingSpinnerProps {
   height?: number | string;
 }
 
-const LoadingSpinner = ({ height = '100%' }: LoadingSpinnerProps) => {
+const LoadingSpinner: FC<LoadingSpinnerProps> = ({ height = '100%' }) => {
   const { LL } = useI18nContext();
 
   return (
-    <Box
+    <Box display="flex" alignItems="center" justifyContent="center" flexDirection="column" padding={2} height={height}>
-      display="flex"
-      alignItems="center"
-      justifyContent="center"
-      flexDirection="column"
-      padding={2}
-      height={height}
-    >
       <CircularProgress
         sx={(theme: Theme) => ({
           margin: theme.spacing(4),

interface/src/components/loading/index.ts

@@ -1,2 +1,3 @@
+export { default as ApplicationError } from './ApplicationError';
 export { default as LoadingSpinner } from './LoadingSpinner';
 export { default as FormLoader } from './FormLoader';

interface/src/components/routing/BlockNavigation.tsx

@@ -1,17 +1,16 @@
-import type { Blocker } from 'react-router-dom';
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material';
+import type { FC } from 'react';
 
-import {
+import type { unstable_Blocker as Blocker } from 'react-router-dom';
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle
-} from '@mui/material';
 
 import { dialogStyle } from 'CustomTheme';
 import { useI18nContext } from 'i18n/i18n-react';
 
-const BlockNavigation = ({ blocker }: { blocker: Blocker }) => {
+interface BlockNavigationProps {
+  blocker: Blocker;
+}
+
+const BlockNavigation: FC<BlockNavigationProps> = ({ blocker }) => {
   const { LL } = useI18nContext();
 
   return (
@@ -19,18 +18,10 @@ const BlockNavigation = ({ blocker }: { blocker: Blocker }) => {
       <DialogTitle>{LL.BLOCK_NAVIGATE_1()}</DialogTitle>
       <DialogContent dividers>{LL.BLOCK_NAVIGATE_2()}</DialogContent>
       <DialogActions>
-        <Button
+        <Button variant="outlined" onClick={() => blocker.reset?.()} color="secondary">
-          variant="outlined"
-          onClick={() => blocker.reset?.()}
-          color="secondary"
-        >
           {LL.STAY()}
         </Button>
-        <Button
+        <Button variant="contained" onClick={() => blocker.proceed?.()} color="primary">
-          variant="contained"
-          onClick={() => blocker.proceed?.()}
-          color="primary"
-        >
           {LL.LEAVE()}
         </Button>
       </DialogActions>