diff --git a/README.md b/README.md index b46ab2804..e3d90d477 100644 --- a/README.md +++ b/README.md @@ -87,7 +87,7 @@ The icons may not be reused in other projects without the proper flaticon licens -### 7.4.13 (2025-01-15) +### **WORK IN PROGRESS** - (@GermanBluefox) Extended DM with device type - (@GermanBluefox) Corrected Save&Close button for the instance configs diff --git a/packages/admin/io-package.json b/packages/admin/io-package.json index f64ca7a2f..933fd91fb 100644 --- a/packages/admin/io-package.json +++ b/packages/admin/io-package.json @@ -19,19 +19,6 @@ "connectionType": "local", "dataSource": "push", "news": { - "7.4.13": { - "en": "Extended DM with device type\nCorrected Save&Close button for the instance configs\nChanged layout on intro page", - "de": "Erweiterte DM mit Gerätetyp\nBehobene Sparen und Schließen Taste für die Instanz configs\nÄnderung des Layouts auf der Einführungsseite", - "ru": "Расширенный DM с типом устройства\nИсправлено Сохранить Закрыть кнопку для настройки экземпляра\nИзменение макета на странице intro", - "pt": "DM estendido com tipo de dispositivo\nEconomização correta > Fechar botão para as configurações de instância\nLayout alterado na página intro", - "nl": "Uitgebreide DM met apparaattype\nGecorrigeerd opslaan& Knop sluiten voor de instantieconfiguraties\nGewijzigde indeling op intro pagina", - "fr": "DM étendu avec type de périphérique\nEnregistrement corrigé et Fermer le bouton pour les configurations d'instance\nMise en page modifiée sur la page d'introduction", - "it": "DM esteso con tipo di dispositivo\nCorretto Save& Chiudi pulsante per le configurazioni dell'istanza\nModificato il layout sulla pagina intro", - "es": "DM extendido con tipo de dispositivo\nCorreccionales Guardar Cierre botón para los configs de instancia\nDiseño cambiado en página intro", - "pl": "Rozszerzony DM z typem urządzenia\nSprostowanie Zapisz & Zamknij przycisk dla instancji configs\nZmieniony układ na stronie intro", - "uk": "Розширений DM з типом пристрою\nВиправлено Save& Закрита кнопка для налаштування екземпляра\nЗмінено макет на сторінці intro", - "zh-cn": "设备类型的扩展DM\n已更正保存( C) 关闭实例配置的按钮\n内部页面上更改的布局" - }, "7.4.12": { "en": "Analyze the new role and set read/write flags according to the role\nAdded min/max/role by alias creation\nImproved files browser in the tile mode", "de": "Analysieren Sie die neue Rolle und setzen Sie Lese- / Schreib-Flags nach der Rolle\nMin/max/rol durch Alias Kreation hinzugefügt\nVerbesserte Dateien Browser im Fliesenmodus", diff --git a/packages/dm-gui-components/package.json b/packages/dm-gui-components/package.json index aea1b044b..625bc928b 100644 --- a/packages/dm-gui-components/package.json +++ b/packages/dm-gui-components/package.json @@ -18,7 +18,7 @@ "scripts": { "prepublishOnly": "npm run build", "clean": "rimraf build", - "build": "tsc && tsc-alias", + "build": "tsc && tsc-alias && node tasks", "check-ts": "tsc --noEmit --checkJS false", "lint": "eslint -c eslint.config.mjs src", "prettier": "prettier --write src/**/*.{ts,tsx,js,jsx,json,css,scss,md,html}" diff --git a/packages/dm-gui-components/src/DeviceStatus.tsx b/packages/dm-gui-components/src/DeviceStatus.tsx index 2e171129d..02e25cd21 100644 --- a/packages/dm-gui-components/src/DeviceStatus.tsx +++ b/packages/dm-gui-components/src/DeviceStatus.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { type CSSProperties, type MouseEvent } from 'react'; import { IconButton, Tooltip } from '@mui/material'; import { @@ -23,11 +23,7 @@ import { } from '@mui/icons-material'; import type { DeviceStatus, DeviceAction, ActionBase, ConfigConnectionType } from '@iobroker/dm-utils'; -import { Icon, type IobTheme } from '@iobroker/adapter-react-v5'; - -import ZWaveIcon from './assets/z-wave.svg'; -import ZigBeeIcon from './assets/zigbee.svg'; -import ThreadIcon from './assets/thread.svg'; +import { type IobTheme } from '@iobroker/adapter-react-v5'; import { getTranslation } from './Utils'; import Switch from './Switch'; @@ -44,6 +40,86 @@ const styles: Record = { }, }; +export interface IconProps { + /** The width in pixels or percentage of the icon. */ + width?: number | string; + /** The height in pixels or percentage of the icon. */ + height?: number | string; + /** Click handler. */ + onClick?: (e: MouseEvent) => void; + /** The class name for the SVG element. */ + className?: string; + /** Styles for the SVG element. */ + style?: CSSProperties; + /** The font size of the icon. */ + fontSize?: 'small'; +} + +function ThreadIcon(props: IconProps): React.JSX.Element { + return ( + props.onClick && props.onClick(e)} + viewBox="0 0 165 165" + width={props.width || (props.fontSize === 'small' ? 16 : 20)} + height={props.height || props.width || (props.fontSize === 'small' ? 16 : 20)} + className={props.className} + style={props.style} + > + + + + ); +} + +function ZWaveIcon(props: IconProps): React.JSX.Element { + return ( + props.onClick && props.onClick(e)} + viewBox="0 0 1073 1068" + width={props.width || (props.fontSize === 'small' ? 16 : 20)} + height={props.height || props.width || (props.fontSize === 'small' ? 16 : 20)} + className={props.className} + style={props.style} + > + + + ); +} + +function ZigBeeIcon(props: IconProps): React.JSX.Element { + return ( + props.onClick && props.onClick(e)} + viewBox="0 0 48 48" + width={props.width || (props.fontSize === 'small' ? 16 : 20)} + height={props.height || props.width || (props.fontSize === 'small' ? 16 : 20)} + className={props.className} + style={props.style} + > + + + + ); +} + interface DeviceStatusProps { status: DeviceStatus | null; deviceId: string; @@ -55,6 +131,7 @@ interface DeviceStatusProps { refresh: () => void; theme: IobTheme; } + /** * Device Status component * @@ -168,56 +245,29 @@ export default function DeviceStatus(props: DeviceStatusProps): React.JSX.Elemen } else if (props.connectionType === 'thread') { connectionSymbol = status.connection === 'connected' ? ( - + ) : status.connection === 'disconnected' ? ( - + ) : ( - + ); } else if (props.connectionType === 'z-wave') { connectionSymbol = status.connection === 'connected' ? ( - + ) : status.connection === 'disconnected' ? ( - + ) : ( - + ); } else if (props.connectionType === 'zigbee') { connectionSymbol = status.connection === 'connected' ? ( - + ) : status.connection === 'disconnected' ? ( - + ) : ( - + ); } else { connectionSymbol =