Changed DM component

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2014-2024 bluefox <[email protected]>
+Copyright (c) 2014-2025 bluefox <[email protected]>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -124,4 +124,4 @@ The icons may not be reused in other projects without the proper flaticon licens
 
 The MIT License (MIT)
 
-Copyright (c) 2014-2024 bluefox <[email protected]>
+Copyright (c) 2014-2025 bluefox <[email protected]>

packages/dm-gui-components/package.json

@@ -53,6 +53,6 @@
     },
     "devDependencies": {
         "@craco/craco": "^7.1.0",
-        "@iobroker/dm-utils": "^1.0.3"
+        "@iobroker/dm-utils": "^1.0.5"
     }
 }

packages/dm-gui-components/src/DeviceCard.tsx

@@ -321,7 +321,7 @@ class DeviceCard extends Component<DeviceCardProps, DeviceCardState> {
 
     renderActions(): JSX.Element[] | null {
         const actions = this.props.device.actions?.filter(
-            a => a.id !== ACTIONS.STATUS && a.id !== ACTIONS.DISABLE && a.id !== ACTIONS.ENABLE,
+            a => a.id !== ACTIONS.STATUS && a.id !== ACTIONS.ENABLE_DISABLE,
         );
 
         return actions?.length
@@ -432,10 +432,11 @@ class DeviceCard extends Component<DeviceCardProps, DeviceCardState> {
                                 <DeviceStatusComponent
                                     key={i}
                                     status={s}
+                                    enabled={this.props.device.enabled}
                                     deviceId={this.props.device.id}
                                     statusAction={this.props.device.actions?.find(a => a.id === ACTIONS.STATUS)}
                                     disableEnableAction={this.props.device.actions?.find(
-                                        a => a.id === ACTIONS.DISABLE || a.id === ACTIONS.ENABLE,
+                                        a => a.id === ACTIONS.ENABLE_DISABLE,
                                     )}
                                     deviceHandler={this.props.deviceHandler}
                                     refresh={this.refresh}
@@ -606,10 +607,9 @@ class DeviceCard extends Component<DeviceCardProps, DeviceCardState> {
                             key={i}
                             deviceId={this.props.device.id}
                             status={s}
+                            enabled={this.props.device.enabled}
                             statusAction={this.props.device.actions?.find(a => a.id === ACTIONS.STATUS)}
-                            disableEnableAction={this.props.device.actions?.find(
-                                a => a.id === ACTIONS.DISABLE || a.id === ACTIONS.ENABLE,
-                            )}
+                            disableEnableAction={this.props.device.actions?.find(a => a.id === ACTIONS.ENABLE_DISABLE)}
                             deviceHandler={this.props.deviceHandler}
                             refresh={this.refresh}
                             theme={this.props.theme}

packages/dm-gui-components/src/DeviceStatus.tsx

@@ -39,6 +39,7 @@ interface DeviceStatusProps {
     status: DeviceStatus | null;
     deviceId: string;
     statusAction?: DeviceAction;
+    enabled?: boolean;
     disableEnableAction?: DeviceAction;
     deviceHandler: (deviceId: string, action: ActionBase, refresh: () => void) => () => void;
     refresh: () => void;
@@ -96,48 +97,51 @@ export default function DeviceStatus(props: DeviceStatusProps): React.JSX.Elemen
         }
     }
 
-    const disability = props.disableEnableAction ? (
-        <>
-            <div style={{ flexGrow: 1 }} />
-            {
-                <Tooltip
-                    title={
-                        props.disableEnableAction.id === ACTIONS.DISABLE
-                            ? getTranslation('disableIconTooltip')
-                            : getTranslation('enableIconTooltip')
-                    }
-                    slotProps={{ popper: { sx: styles.tooltip } }}
-                >
-                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-                        <Switch
-                            size="small"
-                            checked={props.disableEnableAction.id === ACTIONS.DISABLE}
-                            onChange={() =>
-                                props.disableEnableAction &&
-                                props.deviceHandler(props.deviceId, props.disableEnableAction, props.refresh)()
-                            }
-                            theme={props.theme}
-                        />
-                    </div>
-                </Tooltip>
-            }
-        </>
-    ) : null;
+    const disability =
+        typeof props.enabled === 'boolean' ? (
+            <>
+                <div style={{ flexGrow: 1 }} />
+                {
+                    <Tooltip
+                        title={
+                            props.enabled ? getTranslation('disableIconTooltip') : getTranslation('enableIconTooltip')
+                        }
+                        slotProps={{ popper: { sx: styles.tooltip } }}
+                    >
+                        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+                            <Switch
+                                size="small"
+                                checked={props.enabled}
+                                disabled={!props.disableEnableAction}
+                                onChange={() =>
+                                    props.disableEnableAction &&
+                                    props.deviceHandler(props.deviceId, props.disableEnableAction, props.refresh)()
+                                }
+                                theme={props.theme}
+                            />
+                        </div>
+                    </Tooltip>
+                }
+            </>
+        ) : null;
 
     const connectionIcon =
         status.connection === 'connected' || status.connection === 'disconnected' ? (
             <Tooltip
                 title={
-                    status.connection === 'connected'
+                    (status.connection === 'connected'
                         ? getTranslation('connectedIconTooltip')
-                        : getTranslation('disconnectedIconTooltip')
+                        : getTranslation('disconnectedIconTooltip')) +
+                    (props.statusAction
+                        ? `. ${getTranslation(props.statusAction.description || 'moreInformation')}`
+                        : '')
                 }
                 slotProps={{ popper: { sx: styles.tooltip } }}
             >
-                {props.statusAction && props.deviceHandler ? (
+                {props.statusAction ? (
                     <IconButton
                         onClick={e => {
-                            if (props.statusAction && props.deviceHandler) {
+                            if (props.statusAction) {
                                 e.stopPropagation();
                                 props.deviceHandler(props.deviceId, props.statusAction, props.refresh)();
                             }
@@ -148,6 +152,7 @@ export default function DeviceStatus(props: DeviceStatusProps): React.JSX.Elemen
                         ) : (
                             <LinkOffIcon style={iconStyleNotOK} />
                         )}
+                        <div style={{ position: 'absolute', top: 0, left: 0, color: 'grey' }}>*</div>
                     </IconButton>
                 ) : (
                     <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
@@ -233,20 +238,22 @@ export default function DeviceStatus(props: DeviceStatusProps): React.JSX.Elemen
                 </Tooltip>
             )}
 
-            {status.warning && (typeof status.warning === 'string' || typeof status.warning === 'object') ? (
-                <Tooltip
-                    title={getTranslation(status.warning)}
-                    slotProps={{ popper: { sx: styles.tooltip } }}
-                >
+            {status.warning ? (
+                typeof status.warning === 'string' || typeof status.warning === 'object' ? (
+                    <Tooltip
+                        title={getTranslation(status.warning)}
+                        slotProps={{ popper: { sx: styles.tooltip } }}
+                    >
+                        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+                            <WarningIcon style={iconStyleWarning} />
+                        </div>
+                    </Tooltip>
+                ) : (
                     <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                         <WarningIcon style={iconStyleWarning} />
                     </div>
-                </Tooltip>
-            ) : (
-                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-                    <WarningIcon style={iconStyleWarning} />
-                </div>
-            )}
+                )
+            ) : null}
 
             {disability}
         </div>

packages/dm-gui-components/src/Utils.tsx

@@ -31,7 +31,6 @@ import {
     Visibility,
     WbIncandescent,
     Wifi,
-    WifiFind,
     WifiOff,
 } from '@mui/icons-material';
 
@@ -224,9 +223,6 @@ function getIconByName(name: string, altName?: string, color?: string): React.JS
     if (name === 'qrcode' || altName === 'qrcode') {
         return <QrCode style={{ color }} />;
     }
-    if (name === 'identify' || altName === 'identify') {
-        return <WifiFind style={{ color }} />;
-    }
     if (name === 'info' || altName === 'info') {
         return <Info style={{ color }} />;
     }

packages/dm-gui-components/src/i18n/de.json

@@ -13,6 +13,7 @@
     "instanceNotAlive": "Instanz ist nicht aktiv",
     "manufacturer": "Hersteller",
     "model": "Modell",
+    "moreInformation": "Klicken, um weitere Informationen zu erhalten",
     "noButtonText": "Nein",
     "noDevicesFoundText": "Keine Geräte gefunden",
     "noInstanceSelectedText": "Bitte Instanz auswählen",

packages/dm-gui-components/src/i18n/en.json

@@ -13,6 +13,7 @@
     "instanceNotAlive": "Instance is not alive",
     "manufacturer": "Manufacturer",
     "model": "Model",
+    "moreInformation": "Click to get more information",
     "noButtonText": "No",
     "noDevicesFoundText": "No devices found",
     "noInstanceSelectedText": "Please select instance",

packages/dm-gui-components/src/i18n/es.json

@@ -13,6 +13,7 @@
     "instanceNotAlive": "La instancia no está viva.",
     "manufacturer": "Fabricante",
     "model": "Modelo",
+    "moreInformation": "Haga clic para obtener más información",
     "noButtonText": "No",
     "noDevicesFoundText": "No se encontraron dispositivos",
     "noInstanceSelectedText": "Por favor seleccione instancia",

packages/dm-gui-components/src/i18n/fr.json

@@ -13,6 +13,7 @@
     "instanceNotAlive": "L'instance n'est pas vivante",
     "manufacturer": "Fabricant",
     "model": "Modèle",
+    "moreInformation": "Cliquez pour obtenir plus d'informations",
     "noButtonText": "Non",
     "noDevicesFoundText": "Aucun périphérique trouvé",
     "noInstanceSelectedText": "Veuillez sélectionner une instance",

packages/dm-gui-components/src/i18n/it.json

@@ -13,6 +13,7 @@
     "instanceNotAlive": "L'istanza non è viva",
     "manufacturer": "Produttore",
     "model": "Modello",
+    "moreInformation": "Clicca per avere maggiori informazioni",
     "noButtonText": "NO",
     "noDevicesFoundText": "Nessun dispositivo trovato",
     "noInstanceSelectedText": "Seleziona l'istanza",

packages/dm-gui-components/src/i18n/nl.json

@@ -13,6 +13,7 @@
     "instanceNotAlive": "Instantie leeft niet",
     "manufacturer": "Fabrikant",
     "model": "Model",
+    "moreInformation": "Klik voor meer informatie",
     "noButtonText": "Nee",
     "noDevicesFoundText": "Geen apparaten gevonden",
     "noInstanceSelectedText": "Selecteer een exemplaar",

packages/dm-gui-components/src/i18n/pl.json

@@ -13,6 +13,7 @@
     "instanceNotAlive": "Instancja nie żyje",
     "manufacturer": "Producent",
     "model": "Model",
+    "moreInformation": "Kliknij, aby uzyskać więcej informacji",
     "noButtonText": "NIE",
     "noDevicesFoundText": "Nie znaleziono urządzeń",
     "noInstanceSelectedText": "Wybierz instancję",

packages/dm-gui-components/src/i18n/pt.json

@@ -13,6 +13,7 @@
     "instanceNotAlive": "A instância não está ativa",
     "manufacturer": "Fabricante",
     "model": "Modelo",
+    "moreInformation": "Clique para obter mais informações",
     "noButtonText": "Não",
     "noDevicesFoundText": "Nenhum dispositivo encontrado",
     "noInstanceSelectedText": "Selecione a instância",

packages/dm-gui-components/src/i18n/ru.json

@@ -13,6 +13,7 @@
     "instanceNotAlive": "Экземпляр не жив",
     "manufacturer": "Производитель",
     "model": "Модель",
+    "moreInformation": "Нажмите, чтобы получить больше информации",
     "noButtonText": "Нет",
     "noDevicesFoundText": "Устройства не найдены",
     "noInstanceSelectedText": "Пожалуйста, выберите экземпляр",

packages/dm-gui-components/src/i18n/uk.json

@@ -13,6 +13,7 @@
     "instanceNotAlive": "Примірник не живий",
     "manufacturer": "Виробник",
     "model": "Модель",
+    "moreInformation": "Натисніть, щоб отримати більше інформації",
     "noButtonText": "Немає",
     "noDevicesFoundText": "Пристроїв не знайдено",
     "noInstanceSelectedText": "Виберіть екземпляр",

packages/dm-gui-components/src/i18n/zh-cn.json

@@ -13,6 +13,7 @@
     "instanceNotAlive": "实例不存在",
     "manufacturer": "制造商",
     "model": "型号",
+    "moreInformation": "点击获取更多信息",
     "noButtonText": "不",
     "noDevicesFoundText": "未找到设备",
     "noInstanceSelectedText": "请选择实例",