#1174 - include translated device type name in dropdown

interface/src/project/Customization.tsx

@@ -83,7 +83,8 @@ const Customization: FC = () => {
   const [selectedDevice, setSelectedDevice] = useState<number>(
     Number(useLocation().state) || -1
   );
-  const [selectedDeviceTypeName, setSelectedDeviceTypeName] = useState<string>(''); // needed for API URL
+  const [selectedDeviceTypeNameURL, setSelectedDeviceTypeNameURL] =
+    useState<string>(''); // needed for API URL
   const [selectedDeviceName, setSelectedDeviceName] = useState<string>('');
 
   const { send: resetCustomizations } = useRequest(EMSESP.resetCustomizations(), {
@@ -234,9 +235,9 @@ const Customization: FC = () => {
       const id = devices.devices.findIndex((d) => d.i === selectedDevice);
       if (id === -1) {
         setSelectedDevice(-1);
-        setSelectedDeviceTypeName('');
+        setSelectedDeviceTypeNameURL('');
       } else {
-        setSelectedDeviceTypeName(devices.devices[id].tn || '');
+        setSelectedDeviceTypeNameURL(devices.devices[id].url || '');
         setSelectedDeviceName(devices.devices[id].s);
         setNumChanges(0);
         setRestartNeeded(false);
@@ -439,6 +440,7 @@ const Customization: FC = () => {
             disabled={numChanges !== 0}
             onChange={(e) => setSelectedDevice(parseInt(e.target.value))}
             margin="normal"
+            style={{ minWidth: '50%' }}
             select
           >
             <MenuItem disabled key={-1} value={-1}>
@@ -446,7 +448,7 @@ const Customization: FC = () => {
             </MenuItem>
             {devices.devices.map((device: DeviceShort) => (
               <MenuItem key={device.i} value={device.i}>
-                {device.s}
+                {device.s}&nbsp;({device.tn})
               </MenuItem>
             ))}
           </TextField>
@@ -612,7 +614,7 @@ const Customization: FC = () => {
                       {formatName(de, false)}&nbsp;(
                       <Link
                         target="_blank"
-                        href={APIURL + selectedDeviceTypeName + '/' + de.id}
+                        href={APIURL + selectedDeviceTypeNameURL + '/' + de.id}
                       >
                         {de.id}
                       </Link>

interface/src/project/Devices.tsx

@@ -646,8 +646,8 @@ const Devices: FC = () => {
       >
         <Box sx={{ border: '1px solid #177ac9' }}>
           <Typography noWrap variant="subtitle1" color="warning.main" sx={{ ml: 1 }}>
-            {coreData.devices[deviceIndex].tn}&nbsp;&#124;&nbsp;
-            {coreData.devices[deviceIndex].n}
+            {coreData.devices[deviceIndex].n}&nbsp;(
+            {coreData.devices[deviceIndex].tn})
           </Typography>
 
           <Grid container justifyContent="space-between">

interface/src/project/types.ts

@@ -113,7 +113,8 @@ export interface DeviceShort {
   p?: number; // productid
   s: string; // shortname
   t?: number; // device type id
-  tn?: string; // device type internal name
+  tn?: string; // device type internal name (translated)
+  url?: string; // lowercase type name used in API URL
 }
 
 export interface Devices {

mock-api/rest_server.ts

@@ -642,55 +642,64 @@ const emsesp_devices = {
       i: 2,
       s: 'RC20',
       t: 5,
-      tn: 'thermostat'
+      tn: 'Thermostat',
+      url: 'thermostat'
     },
     {
       i: 3,
       s: 'GB125',
       t: 5,
-      tn: 'boiler'
+      tn: 'Boiler',
+      url: 'boiler'
     },
     {
       i: 4,
       s: 'Moduline 1000',
       t: 5,
-      tn: 'thermostat'
+      tn: 'Thermostat',
+      url: 'thermostat'
     },
     {
       i: 5,
       s: 'MM10',
       t: 7,
-      tn: 'mixer'
+      tn: 'Mixer Module',
+      url: 'mixer'
     },
     {
       i: 6,
       s: 'SM10',
       t: 8,
-      tn: 'solar'
+      tn: 'Solar Module',
+      url: 'solar'
     },
     {
       i: 7,
       s: 'Trendline HRC30',
       t: 4,
-      tn: 'boiler'
+      tn: 'Boiler',
+      url: 'boiler'
     },
     {
       i: 8,
       s: 'Bosch Compress 7000i AW Heat Pump',
       t: 5,
-      tn: 'boiler'
+      tn: 'Boiler',
+      url: 'boiler'
     },
     {
       i: 9,
       s: 'RC100H',
       t: 6,
-      tn: 'thermostat'
+      tn: 'Thermostat',
+      url: 'thermostat'
     },
     {
       i: 10,
       s: 'RC310',
       t: 6,
-      tn: 'thermostat'
+      tn: 'Thermostat',
+      url: 'thermostat'
     },
   ]
 };

src/web/WebCustomizationService.cpp

@@ -171,10 +171,11 @@ void WebCustomizationService::devices(AsyncWebServerRequest * request) {
     for (const auto & emsdevice : EMSESP::emsdevices) {
         if (emsdevice->has_entities()) {
             JsonObject obj = devices.add<JsonObject>();
-            obj["i"]       = emsdevice->unique_id();        // its unique id
-            obj["s"]       = emsdevice->name();             // custom name
-            obj["tn"]      = emsdevice->device_type_name(); // non-translated, lower-case
-            obj["t"]       = emsdevice->device_type();      // internal device type ID
+            obj["i"]       = emsdevice->unique_id();                                         // its unique id
+            obj["s"]       = emsdevice->name();                                              // custom name
+            obj["t"]       = emsdevice->device_type();                                       // internal device type ID
+            obj["tn"]      = std::string(emsdevice->device_type_2_device_name_translated()); // translated device type name
+            obj["url"]     = emsdevice->device_type_name();                                  // non-translated, lower-case, used for API URL
         }
     }