Working on device manager

ioBroker · Nov 18, 2024 · f11e6a5 · f11e6a5
1 parent 284cb94
commit f11e6a5
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 36 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/admin/src-admin/package.json b/packages/admin/src-admin/package.json
@@ -35,7 +35,7 @@
         "@foxriver76/iob-component-lib": "^0.1.6",
         "@honkhonk/vite-plugin-svgr": "^1.1.0",
         "@iobroker/admin-component-easy-access": "^1.0.8",
-        "@iobroker/dm-utils": "^0.5.0",
+        "@iobroker/dm-utils": "^0.6.5",
         "@iobroker/socket-client": "^3.1.2",
         "@originjs/vite-plugin-commonjs": "^1.0.3",
         "@react-leaflet/core": "^2.1.0",
@@ -100,4 +100,4 @@
         ]
     ],
     "version": "7.3.2"
-}
+}
diff --git a/packages/dm-gui-components/package.json b/packages/dm-gui-components/package.json
@@ -53,6 +53,6 @@
     },
     "devDependencies": {
         "@craco/craco": "^7.1.0",
-        "@iobroker/dm-utils": "^0.5.0"
+        "@iobroker/dm-utils": "^0.6.5"
     }
 }
diff --git a/packages/dm-gui-components/src/Communication.tsx b/packages/dm-gui-components/src/Communication.tsx
@@ -36,15 +36,17 @@ import {
     type ThemeType,
     type IobTheme,
     I18n,
+    Icon,
 } from '@iobroker/adapter-react-v5';
-import { type ConfigItemPanel } from '@iobroker/json-config';
 import type {
     ActionBase,
     ControlBase,
     ControlState,
     DeviceInfo,
     DeviceRefresh,
     InstanceDetails,
+    JsonFormSchema,
+    ActionButton,
 } from '@iobroker/dm-utils';
 
 import { getTranslation } from './Utils';
@@ -70,12 +72,12 @@ export type CommunicationProps = {
 };
 
 interface CommunicationForm {
-    title?: string | null | undefined;
-    label?: string | null | undefined; // same as title
+    title?: ioBroker.StringOrTranslated | null | undefined;
+    label?: ioBroker.StringOrTranslated | null | undefined; // same as title
     noTranslation?: boolean; // Do not translate title/label
-    schema?: ConfigItemPanel;
+    schema?: JsonFormSchema;
     data?: Record<string, any>;
-    handleClose?: (data?: Record<string, any>) => void;
+    buttons?: (ActionButton | 'apply' | 'cancel')[];
 }
 
 interface InputAction extends ActionBase {
@@ -96,7 +98,7 @@ export type CommunicationState = {
         message: string;
         handleClose: (confirmation?: boolean) => void;
     } | null;
-    form: CommunicationForm | null;
+    form: (CommunicationForm & { handleClose?: (data?: Record<string, any>) => void }) | null;
     progress: {
         open: boolean;
         progress: number;
@@ -144,7 +146,7 @@ interface DmActionResponse extends DmResponse {
     };
     message?: string;
     confirm?: string;
-    form?: any;
+    form?: CommunicationForm;
     progress?: {
         open: boolean;
         progress: number;
@@ -497,10 +499,57 @@ class Communication<P extends CommunicationProps, S extends CommunicationState>
         );
     }
 
+    getOkButton(button?: ActionButton | 'apply' | 'cancel'): React.JSX.Element {
+        if (typeof button === 'string') {
+            button = undefined;
+        }
+        return (
+            <Button
+                key="apply"
+                variant={button?.variant || 'contained'}
+                color={button?.color || 'primary'}
+                onClick={() => this.state.form?.handleClose && this.state.form.handleClose(this.state.form?.data)}
+                startIcon={button?.icon ? <Icon src={button?.icon} /> : undefined}
+            >
+                {getTranslation(button?.label || 'okButtonText', button?.noTranslation)}
+            </Button>
+        );
+    }
+
+    getCancelButton(button?: ActionButton | 'apply' | 'cancel'): React.JSX.Element {
+        if (typeof button === 'string') {
+            button = undefined;
+        }
+        return (
+            <Button
+                key="cancel"
+                variant={button?.variant || 'contained'}
+                color={button?.color || 'grey'}
+                onClick={() => this.state.form?.handleClose && this.state.form.handleClose()}
+                startIcon={button?.icon ? <Icon src={button?.icon} /> : undefined}
+            >
+                {getTranslation(button?.label || 'cancelButtonText', button?.noTranslation)}
+            </Button>
+        );
+    }
+
     renderFormDialog(): React.JSX.Element | null {
         if (!this.state.form || !this.state.form.schema) {
             return null;
         }
+        let buttons: React.JSX.Element[];
+        if (this.state.form.buttons) {
+            buttons = [];
+            this.state.form.buttons.forEach((button: ActionButton | 'apply' | 'cancel'): void => {
+                if (button === 'apply' || (button as ActionButton).type === 'apply') {
+                    buttons.push(this.getOkButton(button));
+                } else {
+                    buttons.push(this.getCancelButton(button));
+                }
+            });
+        } else {
+            buttons = [this.getOkButton(), this.getCancelButton()];
+        }
         return (
             <Dialog
                 open={!0}
@@ -523,7 +572,9 @@ class Communication<P extends CommunicationProps, S extends CommunicationState>
                         socket={this.props.socket as AdminConnection}
                         onChange={(data: Record<string, any>) => {
                             console.log('handleFormChange', { data });
-                            const form: CommunicationForm | null | undefined = { ...this.state.form };
+                            const form: CommunicationForm & { handleClose?: (data?: Record<string, any>) => void } = {
+                                ...this.state.form,
+                            };
                             if (form) {
                                 form.data = data;
                                 this.setState({ form });
@@ -536,25 +587,7 @@ class Communication<P extends CommunicationProps, S extends CommunicationState>
                         dateFormat={this.props.dateFormat}
                     />
                 </DialogContent>
-                <DialogActions>
-                    <Button
-                        variant="contained"
-                        color="primary"
-                        onClick={() =>
-                            this.state.form?.handleClose && this.state.form.handleClose(this.state.form?.data)
-                        }
-                        autoFocus
-                    >
-                        {getTranslation('okButtonText')}
-                    </Button>
-                    <Button
-                        variant="contained"
-                        color="grey"
-                        onClick={() => this.state.form?.handleClose && this.state.form.handleClose()}
-                    >
-                        {getTranslation('cancelButtonText')}
-                    </Button>
-                </DialogActions>
+                <DialogActions>{buttons}</DialogActions>
             </Dialog>
         );
     }

diff --git a/packages/dm-gui-components/src/DeviceStatus.tsx b/packages/dm-gui-components/src/DeviceStatus.tsx
@@ -147,6 +147,7 @@ export default function DeviceStatus(params: DeviceStatusProps): React.JSX.Eleme
                         <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                             {status.battery === 'charging' ? <BatteryCharging50Icon /> : <BatteryFullIcon />}
                             {status.battery !== 'charging' ? (
+                                // @ts-expect-error fixed in dm-utils
                                 status.battery.includes('V') || status.battery.includes('mV') ? (
                                     <p style={{ fontSize: 'small', margin: 0 }}>{status.battery}</p>
                                 ) : (