Added device manager to JsonConfig

ioBroker · Dec 14, 2023 · d74eef8 · d74eef8
1 parent d1eccde
commit d74eef8
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 16 deletions.
diff --git a/package.json b/package.json
@@ -42,7 +42,7 @@
     "passport": "^0.7.0",
     "passport-local": "^1.0.0",
     "semver": "^7.5.4",
-    "ws": "^8.15.0"
+    "ws": "^8.15.1"
   },
   "devDependencies": {
     "@alcalzone/release-script": "^3.7.0",
@@ -67,7 +67,7 @@
     "gulp-sourcemaps": "^3.0.0",
     "mocha": "^10.2.0",
     "prettier": "^3.1.1",
-    "puppeteer": "^21.6.0",
+    "puppeteer": "^21.6.1",
     "typescript": "^5.3.3"
   },
   "bugs": {

diff --git a/src/package.json b/src/package.json
@@ -12,18 +12,19 @@
         "@fnando/sparkline": "^0.3.10",
         "@honkhonk/vite-plugin-svgr": "^1.1.0",
         "@iobroker/adapter-react-v5": "^4.7.15",
+        "@iobroker/dm-gui-components": "^0.0.6",
         "@iobroker/admin-component-easy-access": "^0.3.2",
         "@iobroker/socket-client": "^2.3.12",
-        "@mui/icons-material": "^5.14.19",
-        "@mui/lab": "^5.0.0-alpha.155",
-        "@mui/material": "^5.14.20",
+        "@mui/icons-material": "^5.15.0",
+        "@mui/lab": "^5.0.0-alpha.156",
+        "@mui/material": "^5.15.0",
         "@mui/styles": "5.14.14",
         "@mui/x-data-grid": "^6.18.4",
         "@mui/x-date-pickers": "^6.18.4",
         "@originjs/vite-plugin-commonjs": "^1.0.3",
         "@react-leaflet/core": "^2.1.0",
-        "@sentry/browser": "^7.86.0",
-        "@sentry/integrations": "^7.86.0",
+        "@sentry/browser": "^7.87.0",
+        "@sentry/integrations": "^7.87.0",
         "@testing-library/jest-dom": "^6.1.5",
         "@testing-library/react": "^14.1.2",
         "@testing-library/user-event": "^14.5.1",
@@ -112,4 +113,4 @@
         "i": "^0.3.7",
         "npm": "^10.2.5"
     }
-}
+}
diff --git a/src/src/components/JsonConfigComponent/ConfigDeviceManager.tsx b/src/src/components/JsonConfigComponent/ConfigDeviceManager.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+import ConfigGeneric, { ConfigGenericProps, ConfigGenericState } from './ConfigGeneric';
+import DeviceManager from "@iobroker/dm-gui-components";
+
+class ConfigDeviceManager extends ConfigGeneric<ConfigGenericProps, ConfigGenericState> {
+    renderItem(): React.JSX.Element | null {
+        const schema = this.props.schema;
+
+        if (!schema) {
+            return null;
+        }
+
+        return <DeviceManager
+            uploadImagesToInstance={`${this.props.adapterName}.${this.props.instance}`}
+            title={this.props.schema.label}
+            socket={this.props.socket}
+            selectedInstance={`${this.props.adapterName}.${this.props.instance}`}
+        />;
+    }
+}
+
+export default ConfigDeviceManager;
diff --git a/src/src/components/JsonConfigComponent/ConfigGeneric.tsx b/src/src/components/JsonConfigComponent/ConfigGeneric.tsx
@@ -936,10 +936,9 @@ export default class ConfigGeneric<Props extends ConfigGenericProps = ConfigGene
                 marginBottom: 0,
                 // marginRight: 8,
                 textAlign: 'left',
-                width:
-                            schema.type === 'divider' || schema.type === 'header'
-                                ? schema.width || '100%'
-                                : undefined,
+                width: schema.type === 'divider' || schema.type === 'header'
+                    ? schema.width || '100%'
+                    : undefined,
                 ...schema.style,
                 ...(this.props.themeType === 'dark' ? schema.darkStyle : {}),
             })}

diff --git a/src/src/components/JsonConfigComponent/ConfigPanel.jsx b/src/src/components/JsonConfigComponent/ConfigPanel.jsx
@@ -31,6 +31,7 @@ import ConfigColor from './ConfigColor';
 import ConfigCoordinates from './ConfigCoordinates';
 import ConfigCustom from './ConfigCustom';
 import ConfigDatePicker from './ConfigDatePicker';
+import ConfigDeviceManager from './ConfigDeviceManager';
 import ConfigFile from './ConfigFile';
 import ConfigFileSelector from './ConfigFileSelector';
 import ConfigFunc from './ConfigFunc';
@@ -83,6 +84,7 @@ const components = {
     cron: ConfigCRON,
     custom: ConfigCustom,
     datePicker: ConfigDatePicker,
+    deviceManager: ConfigDeviceManager,
     divider: ConfigStaticDivider,
     file: ConfigFile,
     fileSelector: ConfigFileSelector,
@@ -308,7 +310,12 @@ class ConfigPanel extends ConfigGeneric {
                 className={Utils.clsx(this.props.className, this.props.isParentTab && classes.paper, classes.fullWidth)}
                 style={style}
             >
-                <Grid container className={Utils.clsx(classes.fullWidth, this.props.isParentTab && classes.padding)} spacing={2}>
+                <Grid
+                    container
+                    className={Utils.clsx(classes.fullWidth, this.props.isParentTab && classes.padding)}
+                    spacing={2}
+                    style={this.props.isParentTab ? { width: '100%', height: '100%', overflow: 'hidden' } : null}
+                >
                     {this.renderItems(items, disabled)}
                 </Grid>
             </div>;

diff --git a/src/src/components/JsonConfigComponent/SCHEMA.md b/src/src/components/JsonConfigComponent/SCHEMA.md
@@ -447,7 +447,7 @@ All types could have:
   - `buttonTooltipNoTranslation` - Do not translate button tooltip
 - `placeholder` - placeholder (for text control)
 - `noTranslation` - do not translate selects or other options (not for help, label or placeholder)
-- `onChange` - Structure in form `{"alsoDependsOn": ["attr1", "attr2], "calculateFunc": "attr1 + attr2", "ignoreOwnChanges": true}`
+- `onChange` - Structure in form `{"alsoDependsOn": ["attr1", "attr2"], "calculateFunc": "data.attr1 + data.attr2", "ignoreOwnChanges": true}`
 - `doNotSave` - Do not save this attribute as used only for internal calculations
 - `noMultiEdit` - if this flag set to true, this field will not be shown if user selected more than one object for edit.
 - `confirm`

diff --git a/src/src/components/JsonConfigComponent/index.jsx b/src/src/components/JsonConfigComponent/index.jsx
@@ -312,7 +312,7 @@ class JsonConfigComponent extends Component {
         if (item.type === 'panel' || !item.type) {
             return <ConfigPanel
                 index={1000}
-                isParentTab
+                isParentTab={!this.props.embedded}
                 changed={this.state.changed}
                 onCommandRunning={this.onCommandRunning}
                 commandRunning={this.state.commandRunning}
@@ -372,7 +372,7 @@ class JsonConfigComponent extends Component {
             return <LinearProgress />;
         }
 
-        return <div className={this.props.classes.root}>
+        return <div className={!this.props.embedded && this.props.classes.root} style={this.state.schema.style}>
             {this.renderItem(this.state.schema)}
         </div>;
     }
@@ -402,6 +402,7 @@ JsonConfigComponent.propTypes = {
     onError: PropTypes.func,
     onChange: PropTypes.func,
     onValueChange: PropTypes.func,
+    embedded: PropTypes.bool, // Config is embedded in other component, like dialog or what else
 };
 
 export default withStyles(styles)(JsonConfigComponent);