Optimize WebUI rendering when using Dialog Boxes emsesp#1116

proddy · Apr 28, 2023 · cfe8c41 · cfe8c41
1 parent b9402d3
commit cfe8c41
Show file tree

Hide file tree

Showing 59 changed files with 1,447 additions and 1,121 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -212,7 +212,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added pool data to telegrams 0x494 & 0x495 [#102](https://github.com/emsesp/EMS-ESP32/issues/102)
 - Add RC300 second summermode telegram [#108](https://github.com/emsesp/EMS-ESP32/issues/108)
 - Add support for the RC25 thermostat [#106](https://github.com/emsesp/EMS-ESP32/issues/106)
-- Add new command 'entities' for a device, e.g. http://ems-esp/api/boiler/entities to show the shortname, description and HA Entity name (if HA enabled) [#116](https://github.com/emsesp/EMS-ESP32/issues/116)
+- Add new command 'entities' for a device, e.g. <http://ems-esp/api/boiler/entities> to show the shortname, description and HA Entity name (if HA enabled) [#116](https://github.com/emsesp/EMS-ESP32/issues/116)
 - Support for Junkers program and remote (fb10/fb110) temperature
 - Home Assistant `state_class` attribute for Wh, kWh, W and KW [#129](https://github.com/emsesp/EMS-ESP32/issues/129)
 - Add current room influence for RC300 [#136](https://github.com/emsesp/EMS-ESP32/issues/136)
@@ -434,4 +434,4 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - some names of mqtt-tags like in v2.2.1
 - new ESP32 partition side to allow for smoother OTA and fallback
 - Network Gateway IP is optional (#682)emsesp/EMS-ESP
-- moved to a new GitHub repo https://github.com/emsesp/EMS-ESP32
+- moved to a new GitHub repo <https://github.com/emsesp/EMS-ESP32>
diff --git a/CHANGELOG_LATEST.md b/CHANGELOG_LATEST.md
@@ -4,6 +4,8 @@
 
 ## **IMPORTANT! BREAKING CHANGES**
 
+- dallassensor has been renamed to temperaturesensor in MQTT payloads
+
 ## Added
 
 - Workaround for better Domoticz MQTT intergration? [#904](https://github.com/emsesp/EMS-ESP32/issues/904)
@@ -29,3 +31,5 @@
 - Improved HA Discovery so previous configs no longer need to be removed when starting [#1077](https://github.com/emsesp/EMS-ESP32/pull/1077) (thanks @pswid!)
 - Enlarge UART-Stack to 2,5k
 - Retry timeout for Mqtt-QOS1/2 10seconds
+- Optimize WebUI rendering when using Dialog Boxes [#1116](https://github.com/emsesp/EMS-ESP32/issues/1116)
+- Optimize Web libraries to reduce bundle size (3.6.x) [#1112](https://github.com/emsesp/EMS-ESP32/issues/1112)
diff --git a/interface/.eslintrc.json b/interface/.eslintrc.json
@@ -52,7 +52,7 @@
     "@typescript-eslint/no-implied-eval": "off",
     "@typescript-eslint/no-misused-promises": "off",
     "arrow-body-style": ["error", "as-needed"],
-    "react-hooks/exhaustive-deps": "error",
+    "react-hooks/exhaustive-deps": "warn",
     "@typescript-eslint/consistent-type-imports": [
       "error",
       {

diff --git a/interface/package.json b/interface/package.json
@@ -20,20 +20,20 @@
     "lint-fixall": "eslint . --cache --fix"
   },
   "dependencies": {
-    "@emotion/react": "^11.10.6",
-    "@emotion/styled": "^11.10.6",
+    "@emotion/react": "^11.10.8",
+    "@emotion/styled": "^11.10.8",
     "@msgpack/msgpack": "^3.0.0-beta2",
     "@mui/icons-material": "^5.11.16",
-    "@mui/material": "^5.12.1",
+    "@mui/material": "^5.12.2",
     "@remix-run/router": "^1.5.0",
-    "@table-library/react-table-library": "4.1.0",
+    "@table-library/react-table-library": "4.1.2",
     "@types/lodash-es": "^4.17.7",
-    "@types/node": "^18.16.0",
-    "@types/react": "^18.0.38",
-    "@types/react-dom": "^18.0.11",
+    "@types/node": "^18.16.2",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.1",
     "@types/react-router-dom": "^5.3.3",
     "async-validator": "^4.2.5",
-    "axios": "^1.3.6",
+    "axios": "^1.4.0",
     "history": "^5.3.0",
     "jwt-decode": "^3.1.2",
     "lodash-es": "^4.17.21",
@@ -67,7 +67,7 @@
     "prettier": "^2.8.8",
     "rollup-plugin-visualizer": "^5.9.0",
     "terser": "^5.17.1",
-    "vite": "^4.3.1",
+    "vite": "^4.3.3",
     "vite-plugin-svgr": "^2.4.0",
     "vite-tsconfig-paths": "^4.2.0"
   },

diff --git a/interface/src/framework/mqtt/MqttSettingsForm.tsx b/interface/src/framework/mqtt/MqttSettingsForm.tsx
@@ -1,6 +1,6 @@
 import CancelIcon from '@mui/icons-material/Cancel';
 import WarningIcon from '@mui/icons-material/Warning';
-import { Button, Checkbox, MenuItem, Grid, Typography, InputAdornment } from '@mui/material';
+import { Button, Checkbox, MenuItem, Grid, Typography, InputAdornment, TextField } from '@mui/material';
 import { useState } from 'react';
 import type { ValidateFieldsError } from 'async-validator';
 import type { FC } from 'react';
@@ -94,7 +94,7 @@ const MqttSettingsForm: FC = () => {
             />
           </Grid>
           <Grid item xs={12} sm={6}>
-            <ValidatedTextField
+            <TextField
               name="client_id"
               label={LL.ID_OF(LL.CLIENT()) + ' (' + LL.OPTIONAL() + ')'}
               fullWidth
@@ -105,7 +105,7 @@ const MqttSettingsForm: FC = () => {
             />
           </Grid>
           <Grid item xs={12} sm={6}>
-            <ValidatedTextField
+            <TextField
               name="username"
               label={LL.USERNAME(0)}
               fullWidth
@@ -143,7 +143,7 @@ const MqttSettingsForm: FC = () => {
             />
           </Grid>
           <Grid item xs={12} sm={6}>
-            <ValidatedTextField
+            <TextField
               name="mqtt_qos"
               label="QoS"
               value={data.mqtt_qos}
@@ -156,7 +156,7 @@ const MqttSettingsForm: FC = () => {
               <MenuItem value={0}>0</MenuItem>
               <MenuItem value={1}>1</MenuItem>
               <MenuItem value={2}>2</MenuItem>
-            </ValidatedTextField>
+            </TextField>
           </Grid>
         </Grid>
         <BlockFormControlLabel
@@ -171,7 +171,7 @@ const MqttSettingsForm: FC = () => {
         <Typography sx={{ pt: 2 }} variant="h6" color="primary">
           {LL.FORMATTING()}
         </Typography>
-        <ValidatedTextField
+        <TextField
           name="nested_format"
           label={LL.MQTT_FORMAT()}
           value={data.nested_format}
@@ -183,7 +183,7 @@ const MqttSettingsForm: FC = () => {
         >
           <MenuItem value={1}>{LL.MQTT_NEST_1()}</MenuItem>
           <MenuItem value={2}>{LL.MQTT_NEST_2()}</MenuItem>
-        </ValidatedTextField>
+        </TextField>
         <BlockFormControlLabel
           control={<Checkbox name="send_response" checked={data.send_response} onChange={updateFormValue} />}
           label={LL.MQTT_RESPONSE()}
@@ -233,7 +233,7 @@ const MqttSettingsForm: FC = () => {
                 alignItems="flex-start"
               >
                 <Grid item xs={12} sm={6} md={4}>
-                  <ValidatedTextField
+                  <TextField
                     name="discovery_type"
                     label={LL.MQTT_PUBLISH_TEXT_5()}
                     value={data.discovery_type}
@@ -245,10 +245,10 @@ const MqttSettingsForm: FC = () => {
                   >
                     <MenuItem value={0}>Home Assistant</MenuItem>
                     <MenuItem value={1}>Domoticz</MenuItem>
-                  </ValidatedTextField>
+                  </TextField>
                 </Grid>
                 <Grid item xs={12} sm={6} md={4}>
-                  <ValidatedTextField
+                  <TextField
                     name="discovery_prefix"
                     label={LL.MQTT_PUBLISH_TEXT_4()}
                     fullWidth
@@ -259,7 +259,7 @@ const MqttSettingsForm: FC = () => {
                   />
                 </Grid>
                 <Grid item xs={12} sm={6} md={4}>
-                  <ValidatedTextField
+                  <TextField
                     name="entity_format"
                     label={LL.MQTT_ENTITY_FORMAT()}
                     value={data.entity_format}
@@ -272,7 +272,7 @@ const MqttSettingsForm: FC = () => {
                     <MenuItem value={0}>{LL.MQTT_ENTITY_FORMAT_0()}</MenuItem>
                     <MenuItem value={1}>{LL.MQTT_ENTITY_FORMAT_1()}</MenuItem>
                     <MenuItem value={2}>{LL.MQTT_ENTITY_FORMAT_2()}</MenuItem>
-                  </ValidatedTextField>
+                  </TextField>
                 </Grid>
               </Grid>
             )}
@@ -299,8 +299,7 @@ const MqttSettingsForm: FC = () => {
             />
           </Grid>
           <Grid item xs={12} sm={6} md={4}>
-            <ValidatedTextField
-              fieldErrors={fieldErrors}
+            <TextField
               name="publish_time_boiler"
               label={LL.MQTT_INT_BOILER()}
               InputProps={{
@@ -315,8 +314,7 @@ const MqttSettingsForm: FC = () => {
             />
           </Grid>
           <Grid item xs={12} sm={6} md={4}>
-            <ValidatedTextField
-              fieldErrors={fieldErrors}
+            <TextField
               name="publish_time_thermostat"
               label={LL.MQTT_INT_THERMOSTATS()}
               InputProps={{
@@ -331,8 +329,7 @@ const MqttSettingsForm: FC = () => {
             />
           </Grid>
           <Grid item xs={12} sm={6} md={4}>
-            <ValidatedTextField
-              fieldErrors={fieldErrors}
+            <TextField
               name="publish_time_solar"
               label={LL.MQTT_INT_SOLAR()}
               InputProps={{
@@ -347,8 +344,7 @@ const MqttSettingsForm: FC = () => {
             />
           </Grid>
           <Grid item xs={12} sm={6} md={4}>
-            <ValidatedTextField
-              fieldErrors={fieldErrors}
+            <TextField
               name="publish_time_mixer"
               label={LL.MQTT_INT_MIXER()}
               InputProps={{
@@ -363,8 +359,7 @@ const MqttSettingsForm: FC = () => {
             />
           </Grid>
           <Grid item xs={12} sm={6} md={4}>
-            <ValidatedTextField
-              fieldErrors={fieldErrors}
+            <TextField
               name="publish_time_sensor"
               label={LL.TEMP_SENSORS()}
               InputProps={{
@@ -379,8 +374,7 @@ const MqttSettingsForm: FC = () => {
             />
           </Grid>
           <Grid item xs={12} sm={6} md={4}>
-            <ValidatedTextField
-              fieldErrors={fieldErrors}
+            <TextField
               name="publish_time_other"
               InputProps={{
                 endAdornment: <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>

diff --git a/interface/src/framework/network/NetworkSettingsForm.tsx b/interface/src/framework/network/NetworkSettingsForm.tsx
@@ -15,7 +15,8 @@ import {
   ListItemSecondaryAction,
   ListItemText,
   Typography,
-  InputAdornment
+  InputAdornment,
+  TextField
 } from '@mui/material';
 import { useContext, useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
@@ -165,7 +166,6 @@ const WiFiSettingsForm: FC = () => {
             margin="normal"
           />
         )}
-
         <ValidatedTextField
           fieldErrors={fieldErrors}
           name="tx_power"
@@ -180,21 +180,17 @@ const WiFiSettingsForm: FC = () => {
           type="number"
           margin="normal"
         />
-
         <BlockFormControlLabel
           control={<Checkbox name="nosleep" checked={data.nosleep} onChange={updateFormValue} />}
           label={LL.NETWORK_DISABLE_SLEEP()}
         />
-
         <BlockFormControlLabel
           control={<Checkbox name="bandwidth20" checked={data.bandwidth20} onChange={updateFormValue} />}
           label={LL.NETWORK_LOW_BAND()}
         />
-
         <Typography sx={{ pt: 2 }} variant="h6" color="primary">
           {LL.GENERAL_OPTIONS()}
         </Typography>
-
         <ValidatedTextField
           fieldErrors={fieldErrors}
           name="hostname"
@@ -205,19 +201,16 @@ const WiFiSettingsForm: FC = () => {
           onChange={updateFormValue}
           margin="normal"
         />
-
         <BlockFormControlLabel
           control={<Checkbox name="enableMDNS" checked={data.enableMDNS} onChange={updateFormValue} />}
           label={LL.NETWORK_USE_DNS()}
         />
-
         <BlockFormControlLabel
           control={<Checkbox name="enableCORS" checked={data.enableCORS} onChange={updateFormValue} />}
           label={LL.NETWORK_ENABLE_CORS()}
         />
         {data.enableCORS && (
-          <ValidatedTextField
-            fieldErrors={fieldErrors}
+          <TextField
             name="CORSOrigin"
             label={LL.NETWORK_CORS_ORIGIN()}
             fullWidth
@@ -227,12 +220,10 @@ const WiFiSettingsForm: FC = () => {
             margin="normal"
           />
         )}
-
         <BlockFormControlLabel
           control={<Checkbox name="enableIPv6" checked={data.enableIPv6} onChange={updateFormValue} />}
           label={LL.NETWORK_ENABLE_IPV6()}
         />
-
         <BlockFormControlLabel
           control={<Checkbox name="static_ip_config" checked={data.static_ip_config} onChange={updateFormValue} />}
           label={LL.NETWORK_FIXED_IP()}

diff --git a/interface/src/framework/system/SystemLog.tsx b/interface/src/framework/system/SystemLog.tsx
@@ -1,6 +1,6 @@
 import DownloadIcon from '@mui/icons-material/GetApp';
 import WarningIcon from '@mui/icons-material/Warning';
-import { Box, styled, Button, Checkbox, MenuItem, Grid } from '@mui/material';
+import { Box, styled, Button, Checkbox, MenuItem, Grid, TextField } from '@mui/material';
 import { useState, useEffect, useCallback, useLayoutEffect } from 'react';
 import type { FC } from 'react';
 
@@ -138,7 +138,6 @@ const SystemLog: FC = () => {
     return () => {
       es.close();
     };
-    // eslint-disable-next-line
   }, []);
 
   const content = () => {
@@ -150,7 +149,7 @@ const SystemLog: FC = () => {
       <>
         <Grid container spacing={3} direction="row" justifyContent="flex-start" alignItems="center">
           <Grid item xs={2}>
-            <ValidatedTextField
+            <TextField
               name="level"
               label={LL.LOG_LEVEL()}
               value={data.level}
@@ -167,10 +166,10 @@ const SystemLog: FC = () => {
               <MenuItem value={6}>INFO</MenuItem>
               <MenuItem value={7}>DEBUG</MenuItem>
               <MenuItem value={9}>ALL</MenuItem>
-            </ValidatedTextField>
+            </TextField>
           </Grid>
           <Grid item xs={2}>
-            <ValidatedTextField
+            <TextField
               name="max_messages"
               label={LL.BUFFER_SIZE()}
               value={data.max_messages}
@@ -184,7 +183,7 @@ const SystemLog: FC = () => {
               <MenuItem value={50}>50</MenuItem>
               <MenuItem value={75}>75</MenuItem>
               <MenuItem value={100}>100</MenuItem>
-            </ValidatedTextField>
+            </TextField>
           </Grid>
           <Grid item>
             <BlockFormControlLabel

diff --git a/interface/src/i18n/de/index.ts b/interface/src/i18n/de/index.ts
@@ -38,9 +38,10 @@ const de: Translation = {
   ENTITY_NAME: 'Entitätsname',
   VALUE: '{{Wert|wert}}',
   SHOW_FAV: 'nur Favoriten anzeigen',
-  DEVICE_SENSOR_DATA: 'Geräte- und Sensordaten',
-  DEVICES_SENSORS: 'Geräte & Sensoren',
-  ATTACHED_SENSORS: 'Angeschlossene EMS-ESP Sensoren',
+  DEVICE_DATA: 'Gerätedaten',
+  SENSOR_DATA: 'Sensordaten',
+  DEVICES: 'Geräte',
+  SENSORS: 'Sensoren',
   RUN_COMMAND: 'Befehl ausführen',
   CHANGE_VALUE: 'Wert ändern',
   CANCEL: 'Abbrechen',

diff --git a/interface/src/i18n/en/index.ts b/interface/src/i18n/en/index.ts
@@ -38,9 +38,10 @@ const en: Translation = {
   ENTITY_NAME: 'Entity Name',
   VALUE: '{{Value|value}}',
   SHOW_FAV: 'only show favorites',
-  DEVICE_SENSOR_DATA: 'Device and Sensor Data',
-  DEVICES_SENSORS: 'Devices & Sensors',
-  ATTACHED_SENSORS: 'Attached EMS-ESP Sensors',
+  DEVICE_DATA: 'Device Data',
+  SENSOR_DATA: 'Sensor Data',
+  DEVICES: 'Devices',
+  SENSORS: 'Sensors',
   RUN_COMMAND: 'Call Command',
   CHANGE_VALUE: 'Change Value',
   CANCEL: 'Cancel',