From 2688ed00841b30dba7412b6b320ba78b0a24f3b5 Mon Sep 17 00:00:00 2001
From: proddy <paul@derbyshire.nl>
Date: Mon, 1 Jul 2024 13:43:37 +0200
Subject: [PATCH] rename Device

---
 interface/package.json                  |   2 +-
 interface/src/i18n/de/index.ts          |   3 +-
 interface/src/i18n/en/index.ts          |   3 +-
 interface/src/i18n/fr/index.ts          |   3 +-
 interface/src/i18n/it/index.ts          |   3 +-
 interface/src/i18n/nl/index.ts          |   3 +-
 interface/src/i18n/no/index.ts          |   3 +-
 interface/src/i18n/pl/index.ts          |   3 +-
 interface/src/i18n/sk/index.ts          |   4 +-
 interface/src/i18n/sv/index.ts          |   3 +-
 interface/src/i18n/tr/index.ts          |   3 +-
 interface/src/project/Customization.tsx | 117 +++++++++++++++++++-----
 interface/src/project/api.ts            |   2 +
 interface/yarn.lock                     |  10 +-
 mock-api/rest_server.ts                 |   7 ++
 15 files changed, 127 insertions(+), 42 deletions(-)

diff --git a/interface/package.json b/interface/package.json
index 62c205e82..92cae1662 100644
--- a/interface/package.json
+++ b/interface/package.json
@@ -59,7 +59,7 @@
     "concurrently": "^8.2.2",
     "eslint": "^9.6.0",
     "eslint-config-prettier": "^9.1.0",
-    "preact": "^10.22.0",
+    "preact": "^10.22.1",
     "prettier": "^3.3.2",
     "rollup-plugin-visualizer": "^5.12.0",
     "terser": "^5.31.1",
diff --git a/interface/src/i18n/de/index.ts b/interface/src/i18n/de/index.ts
index b04338932..9627a017d 100644
--- a/interface/src/i18n/de/index.ts
+++ b/interface/src/i18n/de/index.ts
@@ -331,7 +331,8 @@ const de: Translation = {
   MODULES: 'Module', // TODO translate
   MODULES_UPDATED: 'Modules updated', // TODO translate
   MODULES_DESCRIPTION: 'Click on the Module to activate or de-activate EMS-ESP library modules', // TODO translate
-  MODULES_NONE: 'No external modules detected' // TODO translate
+  MODULES_NONE: 'No external modules detected', // TODO translate
+  RENAME: 'Rename' // TODO translate
 };
 
 export default de;
diff --git a/interface/src/i18n/en/index.ts b/interface/src/i18n/en/index.ts
index d996e5c06..3846441bf 100644
--- a/interface/src/i18n/en/index.ts
+++ b/interface/src/i18n/en/index.ts
@@ -331,7 +331,8 @@ const en: Translation = {
   MODULES: 'Modules',
   MODULES_UPDATED: 'Modules updated',
   MODULES_DESCRIPTION: 'Click on the Module to activate or de-activate EMS-ESP library modules',
-  MODULES_NONE: 'No external modules detected'
+  MODULES_NONE: 'No external modules detected',
+  RENAME: 'Rename'
 };
 
 export default en;
diff --git a/interface/src/i18n/fr/index.ts b/interface/src/i18n/fr/index.ts
index 0e1d46f37..fb4e0de39 100644
--- a/interface/src/i18n/fr/index.ts
+++ b/interface/src/i18n/fr/index.ts
@@ -331,7 +331,8 @@ const fr: Translation = {
   MODULES: 'Module', // TODO translate
   MODULES_UPDATED: 'Modules updated', // TODO translate
   MODULES_DESCRIPTION: 'Click on the Module to activate or de-activate EMS-ESP library modules', // TODO translate
-  MODULES_NONE: 'No external modules detected' // TODO translate
+  MODULES_NONE: 'No external modules detected', // TODO translate
+  RENAME: 'Rename' // TODO translate
 };
 
 export default fr;
diff --git a/interface/src/i18n/it/index.ts b/interface/src/i18n/it/index.ts
index eae77f1a2..124e76a04 100644
--- a/interface/src/i18n/it/index.ts
+++ b/interface/src/i18n/it/index.ts
@@ -331,7 +331,8 @@ const it: Translation = {
   MODULES: 'Module', // TODO translate
   MODULES_UPDATED: 'Modules updated', // TODO translate
   MODULES_DESCRIPTION: 'Click on the Module to activate or de-activate EMS-ESP library modules', // TODO translate
-  MODULES_NONE: 'No external modules detected' // TODO translate
+  MODULES_NONE: 'No external modules detected', // TODO translate
+  RENAME: 'Rename' // TODO translate  
 };
 
 export default it;
diff --git a/interface/src/i18n/nl/index.ts b/interface/src/i18n/nl/index.ts
index 6b2c1a00d..02d2e5ea5 100644
--- a/interface/src/i18n/nl/index.ts
+++ b/interface/src/i18n/nl/index.ts
@@ -331,7 +331,8 @@ const nl: Translation = {
   MODULES: 'Module',
   MODULES_UPDATED: 'Modules geüpdatet', 
   MODULES_DESCRIPTION: 'Klik op de module om EMS-ESP library modules te activeren of te deactiveren',
-  MODULES_NONE: 'Geen externe modules gedetecteerd'
+  MODULES_NONE: 'Geen externe modules gedetecteerd',
+  RENAME: 'Hernoemen'
 };
 
 export default nl;
diff --git a/interface/src/i18n/no/index.ts b/interface/src/i18n/no/index.ts
index 025cb91a8..2d053ebe7 100644
--- a/interface/src/i18n/no/index.ts
+++ b/interface/src/i18n/no/index.ts
@@ -331,7 +331,8 @@ const no: Translation = {
   MODULES: 'Module', // TODO translate
   MODULES_UPDATED: 'Modules updated', // TODO translate
   MODULES_DESCRIPTION: 'Click on the Module to activate or de-activate EMS-ESP library modules', // TODO translate
-  MODULES_NONE: 'No external modules detected' // TODO translate
+  MODULES_NONE: 'No external modules detected', // TODO translate
+  RENAME: 'Rename' // TODO translate 
 };
 
 export default no;
diff --git a/interface/src/i18n/pl/index.ts b/interface/src/i18n/pl/index.ts
index 6896051fe..b367ebce9 100644
--- a/interface/src/i18n/pl/index.ts
+++ b/interface/src/i18n/pl/index.ts
@@ -331,7 +331,8 @@ const pl: BaseTranslation = {
   MODULES: 'Module', // TODO translate
   MODULES_UPDATED: 'Modules updated', // TODO translate
   MODULES_DESCRIPTION: 'Click on the Module to activate or de-activate EMS-ESP library modules', // TODO translate
-  MODULES_NONE: 'No external modules detected' // TODO translate
+  MODULES_NONE: 'No external modules detected', // TODO translate
+  RENAME: 'Rename' // TODO translate 
 };
 
 export default pl;
diff --git a/interface/src/i18n/sk/index.ts b/interface/src/i18n/sk/index.ts
index 43ae4ac38..cd83f5893 100644
--- a/interface/src/i18n/sk/index.ts
+++ b/interface/src/i18n/sk/index.ts
@@ -331,7 +331,7 @@ const sk: Translation = {
   MODULES: 'Module', // TODO translate
   MODULES_UPDATED: 'Modules updated', // TODO translate
   MODULES_DESCRIPTION: 'Click on the Module to activate or de-activate EMS-ESP library modules', // TODO translate
-  MODULES_NONE: 'No external modules detected' // TODO translate
+  MODULES_NONE: 'No external modules detected', // TODO translate
+  RENAME: 'Rename' // TODO translate 
 };
-
 export default sk;
diff --git a/interface/src/i18n/sv/index.ts b/interface/src/i18n/sv/index.ts
index ca9952708..6977ee6c7 100644
--- a/interface/src/i18n/sv/index.ts
+++ b/interface/src/i18n/sv/index.ts
@@ -331,7 +331,8 @@ const sv: Translation = {
   MODULES: 'Module', // TODO translate
   MODULES_UPDATED: 'Modules updated', // TODO translate
   MODULES_DESCRIPTION: 'Click on the Module to activate or de-activate EMS-ESP library modules', // TODO translate
-  MODULES_NONE: 'No external modules detected' // TODO translate
+  MODULES_NONE: 'No external modules detected', // TODO translate
+  RENAME: 'Rename' // TODO translate 
 };
 
 export default sv;
diff --git a/interface/src/i18n/tr/index.ts b/interface/src/i18n/tr/index.ts
index 44ab06c5d..9b95cf8d8 100644
--- a/interface/src/i18n/tr/index.ts
+++ b/interface/src/i18n/tr/index.ts
@@ -331,7 +331,8 @@ const tr: Translation = {
   MODULES: 'Module', // TODO translate
   MODULES_UPDATED: 'Modules updated', // TODO translate
   MODULES_DESCRIPTION: 'Click on the Module to activate or de-activate EMS-ESP library modules', // TODO translate
-  MODULES_NONE: 'No external modules detected' // TODO translate
+  MODULES_NONE: 'No external modules detected', // TODO translate
+  RENAME: 'Rename' // TODO translate 
 };
 
 export default tr;
diff --git a/interface/src/project/Customization.tsx b/interface/src/project/Customization.tsx
index 9293cad7c..22f28bec6 100644
--- a/interface/src/project/Customization.tsx
+++ b/interface/src/project/Customization.tsx
@@ -4,7 +4,9 @@ import { useBlocker, useLocation } from 'react-router-dom';
 import { toast } from 'react-toastify';
 
 import CancelIcon from '@mui/icons-material/Cancel';
+import EditIcon from '@mui/icons-material/Edit';
 import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew';
+import SaveIcon from '@mui/icons-material/Save';
 import SearchIcon from '@mui/icons-material/Search';
 import SettingsBackupRestoreIcon from '@mui/icons-material/SettingsBackupRestore';
 import WarningIcon from '@mui/icons-material/Warning';
@@ -71,21 +73,30 @@ const Customization: FC = () => {
   const [search, setSearch] = useState('');
   const [selectedDeviceEntity, setSelectedDeviceEntity] = useState<DeviceEntity>();
   const [dialogOpen, setDialogOpen] = useState<boolean>(false);
+  const [rename, setRename] = useState<boolean>(false);
 
   useLayoutTitle(LL.CUSTOMIZATIONS());
 
   // fetch devices first
-  const { data: devices } = useRequest(EMSESP.readDevices);
+  const { data: devices, send: fetchDevices } = useRequest(EMSESP.readDevices);
 
   const [selectedDevice, setSelectedDevice] = useState<number>(
     Number(useLocation().state) || -1
   );
+  const [selectedDeviceTypeName, setSelectedDeviceTypeName] = useState<string>('');
   const [selectedDeviceName, setSelectedDeviceName] = useState<string>('');
 
   const { send: resetCustomizations } = useRequest(EMSESP.resetCustomizations(), {
     immediate: false
   });
 
+  const { send: writeDeviceName } = useRequest(
+    (data: { id: number; name: string }) => EMSESP.writeDeviceName(data),
+    {
+      immediate: false
+    }
+  );
+
   const { send: writeCustomizationEntities } = useRequest(
     (data: { id: number; entity_ids: string[] }) =>
       EMSESP.writeCustomizationEntities(data),
@@ -223,9 +234,10 @@ const Customization: FC = () => {
       const id = devices.devices.findIndex((d) => d.i === selectedDevice);
       if (id === -1) {
         setSelectedDevice(-1);
-        setSelectedDeviceName('');
+        setSelectedDeviceTypeName('');
       } else {
-        setSelectedDeviceName(devices.devices[id].tn || '');
+        setSelectedDeviceTypeName(devices.devices[id].tn || '');
+        setSelectedDeviceName(devices.devices[id].s);
         setNumChanges(0);
         setRestartNeeded(false);
       }
@@ -388,31 +400,86 @@ const Customization: FC = () => {
     }
   };
 
+  const renameDevice = async () => {
+    await writeDeviceName({ id: selectedDevice, name: selectedDeviceName })
+      .then(() => {
+        toast.success(LL.UPDATED_OF(LL.NAME(1)));
+      })
+      .catch(() => {
+        toast.error(LL.UPDATE_OF(LL.NAME(1)) + ' ' + LL.FAILED(1));
+      })
+      .finally(async () => {
+        setRename(false);
+        await fetchDevices();
+      });
+  };
+
   const renderDeviceList = () => (
     <>
       <Box mb={1} color="warning.main">
         <Typography variant="body2">{LL.CUSTOMIZATIONS_HELP_1()}.</Typography>
       </Box>
-      <TextField
-        name="device"
-        label={LL.EMS_DEVICE()}
-        variant="outlined"
-        fullWidth
-        value={selectedDevice}
-        disabled={numChanges !== 0}
-        onChange={(e) => setSelectedDevice(parseInt(e.target.value))}
-        margin="normal"
-        select
-      >
-        <MenuItem disabled key={-1} value={-1}>
-          {LL.SELECT_DEVICE()}...
-        </MenuItem>
-        {devices.devices.map((device: DeviceShort) => (
-          <MenuItem key={device.i} value={device.i}>
-            {device.s}
-          </MenuItem>
-        ))}
-      </TextField>
+      <Box display="flex" flexWrap="wrap" alignItems="center" gap={2}>
+        {rename ? (
+          <TextField
+            name="device"
+            label={LL.EMS_DEVICE()}
+            fullWidth
+            variant="outlined"
+            value={selectedDeviceName}
+            onChange={(e) => setSelectedDeviceName(e.target.value)}
+            margin="normal"
+          />
+        ) : (
+          <TextField
+            name="device"
+            label={LL.EMS_DEVICE()}
+            variant="outlined"
+            value={selectedDevice}
+            disabled={numChanges !== 0}
+            onChange={(e) => setSelectedDevice(parseInt(e.target.value))}
+            margin="normal"
+            select
+          >
+            <MenuItem disabled key={-1} value={-1}>
+              {LL.SELECT_DEVICE()}...
+            </MenuItem>
+            {devices.devices.map((device: DeviceShort) => (
+              <MenuItem key={device.i} value={device.i}>
+                {device.s}
+              </MenuItem>
+            ))}
+          </TextField>
+        )}
+        {selectedDevice !== -1 &&
+          (rename ? (
+            <ButtonRow>
+              <Button
+                startIcon={<SaveIcon />}
+                variant="contained"
+                onClick={() => renameDevice()}
+              >
+                {LL.UPDATE()}
+              </Button>
+              <Button
+                startIcon={<CancelIcon />}
+                variant="outlined"
+                color="secondary"
+                onClick={() => setRename(false)}
+              >
+                {LL.CANCEL()}
+              </Button>
+            </ButtonRow>
+          ) : (
+            <Button
+              startIcon={<EditIcon />}
+              variant="outlined"
+              onClick={() => setRename(true)}
+            >
+              {LL.RENAME()}
+            </Button>
+          ))}
+      </Box>
     </>
   );
 
@@ -545,7 +612,7 @@ const Customization: FC = () => {
                       {formatName(de, false)}&nbsp;(
                       <Link
                         target="_blank"
-                        href={APIURL + selectedDeviceName + '/' + de.id}
+                        href={APIURL + selectedDeviceTypeName + '/' + de.id}
                       >
                         {de.id}
                       </Link>
@@ -600,7 +667,7 @@ const Customization: FC = () => {
   const renderContent = () => (
     <>
       {devices && renderDeviceList()}
-      {selectedDevice !== -1 && renderDeviceData()}
+      {selectedDevice !== -1 && !rename && renderDeviceData()}
       {restartNeeded && (
         <MessageBox my={2} level="warning" message={LL.RESTART_TEXT(0)}>
           <Button
diff --git a/interface/src/project/api.ts b/interface/src/project/api.ts
index 70438d854..a8c78fab3 100644
--- a/interface/src/project/api.ts
+++ b/interface/src/project/api.ts
@@ -85,6 +85,8 @@ 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 = () =>
diff --git a/interface/yarn.lock b/interface/yarn.lock
index f07968f2b..c8dd96653 100644
--- a/interface/yarn.lock
+++ b/interface/yarn.lock
@@ -2010,7 +2010,7 @@ __metadata:
     jwt-decode: "npm:^4.0.0"
     lodash-es: "npm:^4.17.21"
     mime-types: "npm:^2.1.35"
-    preact: "npm:^10.22.0"
+    preact: "npm:^10.22.1"
     prettier: "npm:^3.3.2"
     react: "npm:latest"
     react-dom: "npm:latest"
@@ -5947,10 +5947,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"preact@npm:^10.22.0":
-  version: 10.22.0
-  resolution: "preact@npm:10.22.0"
-  checksum: 10c0/dc5466c5968c56997e917580c00983cec2f6486a89ea9ba29f1bb88dcfd2f9ff67c8d561a69a1b3acdab17f2bb36b311fef0c348b62e89c332d00c674f7871f0
+"preact@npm:^10.22.1":
+  version: 10.22.1
+  resolution: "preact@npm:10.22.1"
+  checksum: 10c0/9163b97d6fc0ce6b945ed77695d00c4fa07e317d0723e7b9d10c748153d30596abab8b26861ae45591e47bff25515da91406ce7f1c9e66cd9cac7e7f6c927930
   languageName: node
   linkType: hard
 
diff --git a/mock-api/rest_server.ts b/mock-api/rest_server.ts
index 1cbb623b6..7fe2e6d2d 100644
--- a/mock-api/rest_server.ts
+++ b/mock-api/rest_server.ts
@@ -428,6 +428,7 @@ const EMSESP_DEVICEENTITIES_ENDPOINT2 = REST_ENDPOINT_ROOT + 'deviceEntities/:id
 
 const EMSESP_BOARDPROFILE_ENDPOINT = REST_ENDPOINT_ROOT + 'boardProfile';
 const EMSESP_WRITE_DEVICEVALUE_ENDPOINT = REST_ENDPOINT_ROOT + 'writeDeviceValue';
+const EMSESP_WRITE_DEVICENAME_ENDPOINT = REST_ENDPOINT_ROOT + 'writeDeviceName';
 const EMSESP_WRITE_TEMPSENSOR_ENDPOINT = REST_ENDPOINT_ROOT + 'writeTemperatureSensor';
 const EMSESP_WRITE_ANALOGSENSOR_ENDPOINT = REST_ENDPOINT_ROOT + 'writeAnalogSensor';
 const EMSESP_CUSTOMIZATION_ENTITIES_ENDPOINT = REST_ENDPOINT_ROOT + 'customizationEntities';
@@ -2551,6 +2552,12 @@ router
   .post(EMSESP_RESET_CUSTOMIZATIONS_ENDPOINT, async (request: any) => {
     return status(200);
   })
+  .post(EMSESP_WRITE_DEVICENAME_ENDPOINT, async (request: any) => {
+    const content = await request.json();
+    const id = content.id;
+    console.log("Renaming device ID " + id + " to " + content.name);
+    return status(200);
+  })
 
   // Scheduler
   .post(EMSESP_SCHEDULE_ENDPOINT, async (request: any) => {