Skip to content

Commit

Permalink
Corrected build of DM
Browse files Browse the repository at this point in the history
  • Loading branch information
@GermanBluefox
GermanBluefox committed Jan 15, 2025
1 parent 15a2530 commit 5c083db
Show file tree
Hide file tree
Showing 4 changed files with 94 additions and 57 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ The icons may not be reused in other projects without the proper flaticon licens
<!--
### **WORK IN PROGRESS**
-->
### 7.4.13 (2025-01-15)
### **WORK IN PROGRESS**

- (@GermanBluefox) Extended DM with device type
- (@GermanBluefox) Corrected Save&Close button for the instance configs
Expand Down
13 changes: 0 additions & 13 deletions packages/admin/io-package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion packages/dm-gui-components/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}"
Expand Down
134 changes: 92 additions & 42 deletions packages/dm-gui-components/src/DeviceStatus.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, { type CSSProperties, type MouseEvent } from 'react';
import { IconButton, Tooltip } from '@mui/material';

import {
Expand All @@ -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';
Expand All @@ -44,6 +40,86 @@ const styles: Record<string, React.CSSProperties> = {
},
};

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 (
<svg
xmlns="http://www.w3.org/2000/svg"
onClick={e => 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}
>
<path
fill="currentColor"
d="M82.498,0C37.008,0,0,37.008,0,82.496c0,45.181,36.51,81.977,81.573,82.476V82.569l-27.002-0.002 c-8.023,0-14.554,6.53-14.554,14.561c0,8.023,6.531,14.551,14.554,14.551v17.98c-17.939,0-32.534-14.595-32.534-32.531 c0-17.944,14.595-32.543,32.534-32.543l27.002,0.004v-9.096c0-14.932,12.146-27.08,27.075-27.08 c14.932,0,27.082,12.148,27.082,27.08c0,14.931-12.15,27.08-27.082,27.08l-9.097-0.001v80.641 C136.889,155.333,165,122.14,165,82.496C165,37.008,127.99,0,82.498,0z"
/>
<path
fill="currentColor"
d="M117.748,55.493c0-5.016-4.082-9.098-9.1-9.098c-5.015,0-9.097,4.082-9.097,9.098v9.097l9.097,0.001 C113.666,64.591,117.748,60.51,117.748,55.493z"
/>
</svg>
);
}

function ZWaveIcon(props: IconProps): React.JSX.Element {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
onClick={e => 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}
>
<path
fill="currentColor"
d="M716 1.1C632.9 5.3 549.8 23.7 472 55c-66.4 26.7-132.6 65.5-188.5 110.4-43.8 35.1-85.2 76.7-120.1 120.6C72.4 400.4 16.7 539.8 3.5 686 1.8 705.1-.1 754.7.7 758c.5 2 1 2 49.7 1.8l49.1-.3.7-20c2.4-64.6 13.4-126 33.2-186 80.8-243.9 297-419.9 552.1-449.4 20.2-2.4 44.2-4.1 56.6-4.1h8.9V50 0l-9.7.1c-5.4.1-16.8.6-25.3 1zm-.8 208c-78.5 4.7-158 27.4-226.5 64.5-68.7 37.3-126.4 86.3-175.2 148.9-11 14-33.2 47.3-42.3 63.5-44 77.8-68.6 164.9-70.9 251.2l-.6 22.8h49.5 49.4l1.2-19c6.3-98.7 40-185.8 102.2-263.3 12.7-15.9 41.2-45.2 57-58.7 66.1-56.3 142.1-91.8 226-105.5 18.9-3 44.1-5.5 56.7-5.5h9.3v-50-50l-11.2.1c-6.2.1-17.3.6-24.6 1zm17.8 251c-104.5 9.2-195.2 69.7-243.6 162.4-43.9 84-45.5 184.2-4.5 270 60.3 125.9 198.1 194.2 334.9 166 46.6-9.7 89.5-29.7 127.2-59.6 13.5-10.7 37.3-34.5 48-47.9 34.2-43.1 55.2-92 63.7-148.6 2.2-15.1 2.5-62.7.5-77.4-3.6-25.2-10.1-51.4-17.8-71.2-10.1-26.2-29.4-59.7-47-81.8-9.7-12.1-35-37.2-47.4-47-47.8-37.9-104.5-60.1-165.4-65-14.7-1.1-34.7-1.1-48.6.1zm174.7 138.6c-.3.5-30.9 49.2-68.1 108.3L772 814.5l67.9.5 68 .5-30.1 48.8-30 48.7h-131c-104.4 0-130.9-.3-130.5-1.3.2-.6 32.7-51.1 72.1-112.1L730 687.9c0-.5-29.5-1-66.5-1.1l-66.6-.3 27.7-44.3 27.6-44.2h128l127.5.7z"
/>
</svg>
);
}

function ZigBeeIcon(props: IconProps): React.JSX.Element {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
onClick={e => 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}
>
<path
fill="currentColor"
d="M32.042,9.792c4.595,1.238,4.88,3.165,5.524,5.048C34.841,17.664,17.35,35.7,17.35,35.7 s10.901,1.177,23.487-1.003c-0.001,0.029-0.002,0.048-0.003,0.076C42.829,31.661,44,27.97,44,24c0-11.046-8.954-20-20-20 c-5.634,0-10.715,2.338-14.35,6.087C15.489,9.124,26.89,8.403,32.042,9.792z"
/>
<path
fill="currentColor"
d="M14.724,37.285c-1.982-0.347-4.212-2.131-4.707-5.302c1.437-1.239,19.994-20.507,19.994-20.507 c-7.008-0.424-14.569-0.465-22.237,0.864C5.408,15.625,4,19.644,4,24c0,11.046,8.954,20,20,20c6.173,0,11.689-2.8,15.358-7.195 C35.486,37.33,23.257,38.769,14.724,37.285z"
/>
</svg>
);
}

interface DeviceStatusProps {
status: DeviceStatus | null;
deviceId: string;
Expand All @@ -55,6 +131,7 @@ interface DeviceStatusProps {
refresh: () => void;
theme: IobTheme;
}

/**
* Device Status component
*
Expand Down Expand Up @@ -168,56 +245,29 @@ export default function DeviceStatus(props: DeviceStatusProps): React.JSX.Elemen
} else if (props.connectionType === 'thread') {
connectionSymbol =
status.connection === 'connected' ? (
<Icon
src={ThreadIcon}
style={iconStyleOK}
/>
<ThreadIcon style={iconStyleOK} />
) : status.connection === 'disconnected' ? (
<Icon
src={ThreadIcon}
style={iconStyleNotOK}
/>
<ThreadIcon style={iconStyleNotOK} />
) : (
<Icon
src={ThreadIcon}
style={iconStyleUnknown}
/>
<ThreadIcon style={iconStyleUnknown} />
);
} else if (props.connectionType === 'z-wave') {
connectionSymbol =
status.connection === 'connected' ? (
<Icon
src={ZWaveIcon}
style={iconStyleOK}
/>
<ZWaveIcon style={iconStyleOK} />
) : status.connection === 'disconnected' ? (
<Icon
src={ZWaveIcon}
style={iconStyleNotOK}
/>
<ZWaveIcon style={iconStyleNotOK} />
) : (
<Icon
src={ZWaveIcon}
style={iconStyleUnknown}
/>
<ZWaveIcon style={iconStyleUnknown} />
);
} else if (props.connectionType === 'zigbee') {
connectionSymbol =
status.connection === 'connected' ? (
<Icon
src={ZigBeeIcon}
style={iconStyleOK}
/>
<ZigBeeIcon style={iconStyleOK} />
) : status.connection === 'disconnected' ? (
<Icon
src={ZigBeeIcon}
style={iconStyleNotOK}
/>
<ZigBeeIcon style={iconStyleNotOK} />
) : (
<Icon
src={ZigBeeIcon}
style={iconStyleUnknown}
/>
<ZigBeeIcon style={iconStyleUnknown} />
);
} else {
connectionSymbol =
Expand Down

0 comments on commit 5c083db

Please sign in to comment.