Changed indication about changing item

src-admin/src/Tabs/Bridges.tsx

@@ -748,11 +748,13 @@ export class Bridges extends BridgesAndDevices<BridgesProps, BridgesState> {
             >
                 <DialogTitle>{I18n.t('Delete')}</DialogTitle>
                 <DialogContent>
-                    {`${
-                        this.state.deleteDialog.type === 'bridge'
-                            ? I18n.t('Do you want to delete bridge')
-                            : I18n.t('Do you want to delete device')
-                    } ${this.state.deleteDialog.name}?`}
+                    <div>
+                        {`${
+                            this.state.deleteDialog.type === 'bridge'
+                                ? I18n.t('Do you want to delete bridge')
+                                : I18n.t('Do you want to delete device')
+                        } ${this.state.deleteDialog.name}?`}
+                    </div>
                     <FormControlLabel
                         control={
                             <Checkbox
@@ -1346,10 +1348,6 @@ export class Bridges extends BridgesAndDevices<BridgesProps, BridgesState> {
     }
 
     renderBridge(bridge: BridgeDescription, bridgeIndex: number): React.JSX.Element | null {
-        if (bridge.deleted) {
-            return null;
-        }
-
         const enabledDevices = bridge.list.filter(d => d.enabled).length;
         let countText: string | null;
         if (!bridge.list.length) {
@@ -1368,7 +1366,6 @@ export class Bridges extends BridgesAndDevices<BridgesProps, BridgesState> {
                     style={{ opacity: bridge.enabled ? 1 : 0.4, position: 'relative' }}
                     sx={styles.bridgeButtonsAndTitle}
                 >
-                    {this.renderProcessOverlay(bridge.uuid)}
                     <TableCell
                         style={{
                             width: 0,
@@ -1377,6 +1374,7 @@ export class Bridges extends BridgesAndDevices<BridgesProps, BridgesState> {
                         }}
                         sx={styles.bridgeButtonsAndTitle}
                     >
+                        {this.renderProcessOverlay(bridge.uuid, bridge.deleted)}
                         <IconButton
                             size="small"
                             sx={styles.bridgeButtonsAndTitleColor}

src-admin/src/Tabs/BridgesAndDevices.tsx

@@ -527,21 +527,27 @@ class BridgesAndDevices<TProps extends BridgesAndDevicesProps, TState extends Br
     }
 
     // eslint-disable-next-line react/no-unused-class-component-methods
-    renderProcessOverlay(uuid: string): React.JSX.Element | null {
+    renderProcessOverlay(uuid: string, deleted?: boolean): React.JSX.Element | null {
         const processing = this.getInProcessing(uuid);
-        if (!processing) {
+        if (!processing && !deleted) {
             return null;
         }
         return (
             <div
+                title={I18n.t('This entry is being modified actually')}
                 style={{
                     zIndex: 1,
                     position: 'absolute',
                     top: 0,
                     bottom: 0,
                     left: 0,
                     right: 0,
-                    backgroundImage: `repeating-linear-gradient(325deg, ${this.props.themeType === 'dark' ? '#00000080' : '#FFFFFF80'}, ${this.props.themeType === 'dark' ? '#00000080' : '#FFFFFF80'} 20px, #00000000 20px, #00000000 40px)`,
+                    backgroundImage:
+                        'repeating-linear-gradient(325deg, ' +
+                        `${this.props.themeType === 'dark' ? '#00000090' : '#FFFFFF90'}, ` +
+                        `${this.props.themeType === 'dark' ? '#00000090' : '#FFFFFF90'} 20px, ` +
+                        `${this.props.themeType === 'dark' ? '#00000050' : '#FFFFFF50'} 20px, ` +
+                        `${this.props.themeType === 'dark' ? '#00000050' : '#FFFFFF50'} 40px)`,
                 }}
             >
                 {processing === 'processing' ? <LinearProgress /> : null}

src-admin/src/Tabs/Devices.tsx

@@ -155,7 +155,7 @@ class Devices extends BridgesAndDevices<DevicesProps, DevicesState> {
             >
                 <DialogTitle>{I18n.t('Delete')}</DialogTitle>
                 <DialogContent>
-                    {`${I18n.t('Do you want to delete device')} ${this.state.deleteDialog.name}?`}
+                    <div>{`${I18n.t('Do you want to delete device')} ${this.state.deleteDialog.name}?`}</div>
                     <FormControlLabel
                         control={
                             <Checkbox
@@ -679,17 +679,13 @@ class Devices extends BridgesAndDevices<DevicesProps, DevicesState> {
      * @param index table index
      */
     renderDevice(device: DeviceDescription, index: number): React.JSX.Element | null {
-        if (device.deleted) {
-            return null;
-        }
-
         return (
             <TableRow
                 key={index}
                 style={{ opacity: device.enabled ? 1 : 0.4, position: 'relative' }}
             >
-                {this.renderProcessOverlay(device.uuid)}
                 <TableCell>
+                    {this.renderProcessOverlay(device.uuid, device.deleted)}
                     <div style={{ display: 'flex', alignItems: 'center' }}>
                         <span
                             style={{ marginRight: 8 }}

src-admin/src/components/ConfigHandler.tsx

@@ -99,44 +99,51 @@ class ConfigHandler {
                         changed = true;
                         this.config.devices.splice(this.config.devices.indexOf(device), 1);
                     } else {
+                        const native: DeviceDescription = obj.native as DeviceDescription;
                         // detect changes
-                        if (device.enabled !== obj.native.enabled) {
+                        if (device.enabled !== native.enabled) {
                             changed = true;
-                            device.enabled = obj.native.enabled;
+                            device.enabled = native.enabled;
                         }
 
                         if (device.name !== obj.common.name) {
                             changed = true;
                             device.name = obj.common.name;
                         }
-                        if (device.oid !== obj.native.oid) {
+                        if (device.oid !== native.oid) {
                             changed = true;
-                            device.oid = obj.native.oid;
+                            device.oid = native.oid;
                         }
-                        if (device.type !== obj.native.type) {
+                        if (device.type !== native.type) {
                             changed = true;
-                            device.type = obj.native.type;
+                            device.type = native.type;
                         }
-                        if (device.productID !== obj.native.productID) {
+                        if (device.productID !== native.productID) {
                             changed = true;
-                            device.productID = obj.native.productID;
+                            device.productID = native.productID;
                         }
-                        if (device.vendorID !== obj.native.vendorID) {
+                        if (device.vendorID !== native.vendorID) {
                             changed = true;
-                            device.vendorID = obj.native.vendorID;
+                            device.vendorID = native.vendorID;
+                        }
+                        if (device.deleted !== native.deleted) {
+                            changed = true;
+                            device.deleted = native.deleted;
                         }
                     }
                 } else if (obj && uuid) {
+                    const native: DeviceDescription = obj.native as DeviceDescription;
                     console.log(`Detected new device: ${uuid}`);
                     changed = true;
                     this.config.devices.push({
                         uuid,
                         name: obj.common.name,
-                        oid: obj.native.oid,
-                        type: obj.native.type,
-                        productID: obj.native.productID,
-                        vendorID: obj.native.vendorID,
-                        enabled: obj.native.enabled,
+                        oid: native.oid,
+                        type: native.type,
+                        productID: native.productID,
+                        vendorID: native.vendorID,
+                        enabled: native.enabled,
+                        deleted: native.deleted,
                     });
                 }
                 if (changed) {
@@ -155,28 +162,34 @@ class ConfigHandler {
                         changed = true;
                         this.config.bridges.splice(this.config.bridges.indexOf(bridge), 1);
                     } else {
-                        if (bridge.enabled !== obj.native.enabled) {
+                        const native: BridgeDescription = obj.native as BridgeDescription;
+                        if (bridge.enabled !== native.enabled) {
                             changed = true;
-                            bridge.enabled = obj.native.enabled;
+                            bridge.enabled = native.enabled;
                         }
                         if (typeof obj.common.name === 'string' && bridge.name !== obj.common.name) {
                             changed = true;
                             bridge.name = obj.common.name;
                         }
-                        if (JSON.stringify(bridge.list) !== JSON.stringify(obj.native.list)) {
+                        if (JSON.stringify(bridge.list) !== JSON.stringify(native.list)) {
+                            changed = true;
+                            bridge.list = native.list;
+                        }
+                        if (bridge.productID !== native.productID) {
                             changed = true;
-                            bridge.list = obj.native.list;
+                            bridge.productID = native.productID;
                         }
-                        if (bridge.productID !== obj.native.productID) {
+                        if (bridge.vendorID !== native.vendorID) {
                             changed = true;
-                            bridge.productID = obj.native.productID;
+                            bridge.vendorID = native.vendorID;
                         }
-                        if (bridge.vendorID !== obj.native.vendorID) {
+                        if (bridge.deleted !== native.deleted) {
                             changed = true;
-                            bridge.vendorID = obj.native.vendorID;
+                            bridge.deleted = native.deleted;
                         }
                     }
                 } else if (obj && uuid) {
+                    const native: BridgeDescription = obj.native as BridgeDescription;
                     console.log(`Detected new bridge: ${uuid}`);
                     changed = true;
 
@@ -189,10 +202,11 @@ class ConfigHandler {
                     this.config.bridges.push({
                         uuid,
                         name: obj.common.name,
-                        list: obj.native.list,
-                        productID: obj.native.productID,
-                        vendorID: obj.native.vendorID,
-                        enabled: obj.native.enabled,
+                        list: native.list,
+                        productID: native.productID,
+                        vendorID: native.vendorID,
+                        enabled: native.enabled,
+                        deleted: native.deleted,
                     });
                 }
                 if (changed) {
@@ -270,25 +284,29 @@ class ConfigHandler {
         // List devices
         Object.keys(devicesAndBridges).forEach(id => {
             if (id.substring(len).startsWith('devices.')) {
+                const native: DeviceDescription = devicesAndBridges[id].native as DeviceDescription;
                 const obj: DeviceDescription = {
                     uuid: id.substring(len + 8),
                     name: this.getText(devicesAndBridges[id].common.name),
-                    oid: devicesAndBridges[id].native.oid,
-                    type: devicesAndBridges[id].native.type,
-                    productID: devicesAndBridges[id].native.productID,
-                    vendorID: devicesAndBridges[id].native.vendorID,
-                    enabled: devicesAndBridges[id].native.enabled,
+                    oid: native.oid,
+                    type: native.type,
+                    productID: native.productID,
+                    vendorID: native.vendorID,
+                    enabled: native.enabled,
+                    deleted: native.deleted,
                 };
 
                 devices.push(obj);
             } else if (id.substring(len).startsWith('bridges.')) {
+                const native: BridgeDescription = devicesAndBridges[id].native as BridgeDescription;
                 const obj: BridgeDescription = {
                     uuid: id.substring(len + 8),
                     name: this.getText(devicesAndBridges[id].common.name),
-                    list: devicesAndBridges[id].native.list,
-                    productID: devicesAndBridges[id].native.productID,
-                    vendorID: devicesAndBridges[id].native.vendorID,
-                    enabled: devicesAndBridges[id].native.enabled,
+                    list: native.list,
+                    productID: native.productID,
+                    vendorID: native.vendorID,
+                    enabled: native.enabled,
+                    deleted: native.deleted,
                 };
                 bridges.push(obj);
             }

src-admin/src/i18n/de.json

@@ -159,6 +159,7 @@
     "The label set here is used as Label when ioBroker connects to a device as controller and might be shown by other Controllers in their overviews about other connected ecosystems.": "Das hier festgelegte Label wird als Label verwendet, wenn ioBroker als Controller eine Verbindung zu einem Gerät herstellt und kann von anderen Controllern in ihren Übersichten über andere verbundene Ökosysteme angezeigt werden.",
     "This cannot be undone!": "Das kann nicht rückgängig gemacht werden!",
     "This device/bridge is linked to some ecosystem. If it is deleted here, you must manually remove it from your ecosystem!": "Dieses Gerät/diese Bridge ist mit einem Ökosystem verknüpft. Wenn es/sie hier gelöscht wird, müssen Sie es/sie manuell aus Ihrem Ökosystem entfernen!",
+    "This entry is being modified actually": "Dieser Eintrag wird gerade geändert",
     "This object ID is already added": "Diese Objekt-ID wurde bereits hinzugefügt",
     "Thread credentials": "Thread-Anmeldeinformationen",
     "Thread network name": "Thread-Network-Name",

src-admin/src/i18n/en.json

@@ -159,6 +159,7 @@
     "The label set here is used as Label when ioBroker connects to a device as controller and might be shown by other Controllers in their overviews about other connected ecosystems.": "The label set here is used as label when ioBroker connects to a device as controller and might be shown by other Controllers in their overviews about other connected ecosystems.",
     "This cannot be undone!": "This cannot be undone!",
     "This device/bridge is linked to some ecosystem. If it is deleted here, you must manually remove it from your ecosystem!": "This device/bridge is linked to some ecosystem. If it is deleted here, you must manually remove it from your ecosystem!",
+    "This entry is being modified actually": "This entry is being modified actually",
     "This object ID is already added": "This object ID is already added",
     "Thread credentials": "Thread credentials",
     "Thread network name": "Thread network name",

src-admin/src/i18n/es.json

@@ -159,6 +159,7 @@
     "The label set here is used as Label when ioBroker connects to a device as controller and might be shown by other Controllers in their overviews about other connected ecosystems.": "El conjunto de etiquetas aquí se utiliza como etiqueta cuando ioBroker se conecta a un dispositivo como controlador y otros controladores pueden mostrarlo en sus descripciones generales sobre otros ecosistemas conectados.",
     "This cannot be undone!": "¡Esto no se puede deshacer!",
     "This device/bridge is linked to some ecosystem. If it is deleted here, you must manually remove it from your ecosystem!": "Este dispositivo/puente está vinculado a algún ecosistema. Si se elimina aquí, deberás eliminarlo manualmente de tu ecosistema.",
+    "This entry is being modified actually": "Esta entrada está siendo modificada actualmente",
     "This object ID is already added": "Este ID de objeto ya está agregado",
     "Thread credentials": "Credenciales del hilo",
     "Thread network name": "Thread network name",

src-admin/src/i18n/fr.json

@@ -159,6 +159,7 @@
     "The label set here is used as Label when ioBroker connects to a device as controller and might be shown by other Controllers in their overviews about other connected ecosystems.": "L'étiquette définie ici est utilisée comme étiquette lorsque ioBroker se connecte à un appareil en tant que contrôleur et peut être affichée par d'autres contrôleurs dans leurs aperçus sur d'autres écosystèmes connectés.",
     "This cannot be undone!": "Ça ne peut pas être annulé!",
     "This device/bridge is linked to some ecosystem. If it is deleted here, you must manually remove it from your ecosystem!": "Cet appareil/pont est lié à un écosystème. S'il est supprimé ici, vous devez le supprimer manuellement de votre écosystème !",
+    "This entry is being modified actually": "Cette entrée est en cours de modification actuellement",
     "This object ID is already added": "Cet ID d'objet est déjà ajouté",
     "Thread credentials": "Informations d'identification du fil de discussion",
     "Thread network name": "Thread network name",

src-admin/src/i18n/it.json

@@ -159,6 +159,7 @@
     "The label set here is used as Label when ioBroker connects to a device as controller and might be shown by other Controllers in their overviews about other connected ecosystems.": "L'etichetta impostata qui viene utilizzata come etichetta quando ioBroker si connette a un dispositivo come controller e potrebbe essere mostrata da altri controller nelle loro panoramiche su altri ecosistemi connessi.",
     "This cannot be undone!": "Questa operazione non può essere annullata!",
     "This device/bridge is linked to some ecosystem. If it is deleted here, you must manually remove it from your ecosystem!": "Questo dispositivo/bridge è collegato a un ecosistema. Se viene eliminato qui, devi rimuoverlo manualmente dal tuo ecosistema!",
+    "This entry is being modified actually": "Questa voce è in fase di modifica in realtà",
     "This object ID is already added": "Questo ID oggetto è già stato aggiunto",
     "Thread credentials": "Credenziali del thread",
     "Thread network name": "Thread network name",

src-admin/src/i18n/nl.json

@@ -159,6 +159,7 @@
     "The label set here is used as Label when ioBroker connects to a device as controller and might be shown by other Controllers in their overviews about other connected ecosystems.": "Het hier ingestelde label wordt gebruikt als label wanneer ioBroker verbinding maakt met een apparaat als controller en kan door andere controllers worden weergegeven in hun overzichten van andere verbonden ecosystemen.",
     "This cannot be undone!": "Dit kan niet ongedaan gemaakt worden!",
     "This device/bridge is linked to some ecosystem. If it is deleted here, you must manually remove it from your ecosystem!": "Dit apparaat/deze brug is gekoppeld aan een ecosysteem. Als het hier wordt verwijderd, moet u het handmatig uit uw ecosysteem verwijderen!",
+    "This entry is being modified actually": "Dit item wordt momenteel gewijzigd",
     "This object ID is already added": "Deze object-ID is al toegevoegd",
     "Thread credentials": "Thread-referenties",
     "Thread network name": "Thread network name",