rename Device

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",

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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
+      <Box display="flex" flexWrap="wrap" alignItems="center" gap={2}>
-        name="device"
+        {rename ? (
-        label={LL.EMS_DEVICE()}
+          <TextField
-        variant="outlined"
+            name="device"
-        fullWidth
+            label={LL.EMS_DEVICE()}
-        value={selectedDevice}
+            fullWidth
-        disabled={numChanges !== 0}
+            variant="outlined"
-        onChange={(e) => setSelectedDevice(parseInt(e.target.value))}
+            value={selectedDeviceName}
-        margin="normal"
+            onChange={(e) => setSelectedDeviceName(e.target.value)}
-        select
+            margin="normal"
-      >
+          />
-        <MenuItem disabled key={-1} value={-1}>
+        ) : (
-          {LL.SELECT_DEVICE()}...
+          <TextField
-        </MenuItem>
+            name="device"
-        {devices.devices.map((device: DeviceShort) => (
+            label={LL.EMS_DEVICE()}
-          <MenuItem key={device.i} value={device.i}>
+            variant="outlined"
-            {device.s}
+            value={selectedDevice}
-          </MenuItem>
+            disabled={numChanges !== 0}
-        ))}
+            onChange={(e) => setSelectedDevice(parseInt(e.target.value))}
-      </TextField>
+            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

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 = () =>

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":
+"preact@npm:^10.22.1":
-  version: 10.22.0
+  version: 10.22.1
-  resolution: "preact@npm:10.22.0"
+  resolution: "preact@npm:10.22.1"
-  checksum: 10c0/dc5466c5968c56997e917580c00983cec2f6486a89ea9ba29f1bb88dcfd2f9ff67c8d561a69a1b3acdab17f2bb36b311fef0c348b62e89c332d00c674f7871f0
+  checksum: 10c0/9163b97d6fc0ce6b945ed77695d00c4fa07e317d0723e7b9d10c748153d30596abab8b26861ae45591e47bff25515da91406ce7f1c9e66cd9cac7e7f6c927930
   languageName: node
   linkType: hard
 

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) => {