typescript code

ioBroker · Jun 17, 2024 · d00909c · d00909c
1 parent eb810a0
commit d00909c
Show file tree

Hide file tree

Showing 10 changed files with 729 additions and 492 deletions.
diff --git a/packages/iobroker.vis-2/src/src/Editor.tsx b/packages/iobroker.vis-2/src/src/Editor.tsx
@@ -2076,7 +2076,7 @@ class Editor extends Runtime<EditorProps, EditorState> {
                             changeProject={this.changeProject}
                             openedViews={store.getState().visProject.___settings.openedViews}
                             toggleView={this.toggleView}
-                            socket={this.socket}
+                            socket={this.socket as unknown as LegacyConnection}
                             projects={this.state.projects}
                             loadProject={this.loadProject}
                             projectName={this.state.projectName}

diff --git a/packages/iobroker.vis-2/src/src/Toolbar/Projects.tsx b/packages/iobroker.vis-2/src/src/Toolbar/Projects.tsx
@@ -12,10 +12,11 @@ import {
     SelectID,
     I18n,
     SelectFile as SelectFileDialog,
-    Utils, type LegacyConnection, Connection,
+    Utils, type LegacyConnection, Connection, ThemeType,
 } from '@iobroker/adapter-react-v5';
 
-import ToolbarItems from './ToolbarItems';
+import { EditorClass } from '@/Editor';
+import ToolbarItems, { ToolbarItem } from './ToolbarItems';
 import Settings from './Settings';
 import ProjectsManager from './ProjectsManager';
 
@@ -30,18 +31,32 @@ const styles = () => ({
 interface ToolsProps {
     socket: LegacyConnection;
     projectsDialog: boolean;
-    setProjectsDialog: (open: boolean) => void;
+    setProjectsDialog: EditorClass['setProjectsDialog'];
     adapterName: string;
     instance: number;
     projectName: string;
+    changeProject: EditorClass['changeProject'];
+    selectedView: string;
+    setSelectedWidgets: EditorClass['setSelectedWidgets'];
+    themeType: ThemeType;
+    toolbarHeight: 'full' | 'narrow' | 'veryNarrow';
+    addProject: EditorClass['addProject'];
+    deleteProject: EditorClass['deleteProject'];
+    loadProject: EditorClass['loadProject'];
+    projects: string[];
+    refreshProjects: EditorClass['refreshProjects'];
+    renameProject: EditorClass['renameProject'];
 }
 
 const Tools = (props: ToolsProps) => {
     const [settingsDialog, setSettingsDialog] = useState(false);
     const [objectsDialog, setObjectsDialog] = useState(false);
     const [filesDialog, setFilesDialog] = useState(false);
 
-    const toolbar = {
+    const toolbar:{
+        name: string;
+        items: (ToolbarItem | ToolbarItem[] | ToolbarItem[][])[];
+    } = {
         name: 'Projects',
         items: [
             {
@@ -60,7 +75,16 @@ const Tools = (props: ToolsProps) => {
     };
 
     return <>
-        <ToolbarItems group={toolbar} last {...props} classes={{}} />
+        <ToolbarItems
+            group={toolbar}
+            last
+            classes={{}}
+            changeProject={props.changeProject}
+            selectedView={props.selectedView}
+            setSelectedWidgets={props.setSelectedWidgets}
+            themeType={props.themeType}
+            toolbarHeight={props.toolbarHeight}
+        />
         {settingsDialog ? <Settings
             onClose={() => setSettingsDialog(false)}
             {...props}
@@ -72,8 +96,20 @@ const Tools = (props: ToolsProps) => {
         {props.projectsDialog ? <ProjectsManager
             open={!0}
             onClose={() => props.setProjectsDialog(false)}
-            {...props}
             classes={{}}
+            adapterName={props.adapterName}
+            instance={props.instance}
+            addProject={props.addProject}
+            changeProject={props.changeProject}
+            deleteProject={props.deleteProject}
+            loadProject={props.loadProject}
+            projectName={props.projectName}
+            projects={props.projects}
+            refreshProjects={props.refreshProjects}
+            renameProject={props.renameProject}
+            selectedView={props.selectedView}
+            socket={props.socket}
+            themeType={props.themeType}
         /> : null}
         {
             objectsDialog ? <SelectID
@@ -131,4 +167,4 @@ const Tools = (props: ToolsProps) => {
     </>;
 };
 
-export default withStyles(styles)(Tools);
+export default withStyles(styles)(Tools) as React.FC<ToolsProps>;
diff --git a/packages/iobroker.vis-2/src/src/Toolbar/ProjectsManager/ImportProjectDialog.tsx b/packages/iobroker.vis-2/src/src/Toolbar/ProjectsManager/ImportProjectDialog.tsx
@@ -37,7 +37,7 @@ interface ImportProjectDialogProps {
     loadProject: EditorClass['loadProject'];
     adapterName: string;
     instance: number;
-    openNewProjectOnCreate: boolean;
+    openNewProjectOnCreate?: boolean;
     projects: string[];
 }
 

diff --git a/packages/iobroker.vis-2/src/src/Toolbar/ProjectsManager/index.tsx b/packages/iobroker.vis-2/src/src/Toolbar/ProjectsManager/index.tsx
@@ -71,13 +71,13 @@ const styles:Styles<IobTheme, any> = theme => ({
 });
 
 interface ProjectsManageProps {
-    addProject: (name: string) => void;
-    loadProject: (name: string) => void;
+    addProject: EditorClass['addProject'];
+    loadProject: EditorClass['loadProject'];
     onClose: () => void;
     open: boolean;
     projects: string[];
     projectName: string;
-    refreshProjects: () => void;
+    refreshProjects: EditorClass['refreshProjects'];
     socket: LegacyConnection;
     themeType: string;
     classes: Record<string, string>;
@@ -309,8 +309,9 @@ const ProjectsManage:React.FC<ProjectsManageProps> = props => {
             loadProject={props.loadProject}
             adapterName={props.adapterName}
             instance={props.instance}
+            openNewProjectOnCreate
         /> : null}
     </IODialog> : null;
 };
 
-export default withStyles(styles)(ProjectsManage);
+export default withStyles(styles)(ProjectsManage) as React.FC<ProjectsManageProps>;
diff --git a/...er.vis-2/src/src/Toolbar/ToolbarItems.jsx → ...er.vis-2/src/src/Toolbar/ToolbarItems.tsx b/...er.vis-2/src/src/Toolbar/ToolbarItems.jsx → ...er.vis-2/src/src/Toolbar/ToolbarItems.tsx
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { withStyles } from '@mui/styles';
+import { Styles, withStyles } from '@mui/styles';
 
 import {
     Button,
@@ -12,17 +12,21 @@ import {
     InputLabel,
     MenuItem,
     Select,
+    SelectChangeEvent,
     TextField,
     Tooltip,
 } from '@mui/material';
 
-import { I18n } from '@iobroker/adapter-react-v5';
-
-import MultiSelect from './MultiSelect';
+import { I18n, IobTheme, ThemeType } from '@iobroker/adapter-react-v5';
 
+import { deepClone } from '@/Utils/utils';
+import { ViewSettings } from '@iobroker/types-vis-2';
+import React from 'react';
+import { EditorClass } from '@/Editor';
 import { store } from '../Store';
+import MultiSelect from './MultiSelect';
 
-const styles = theme => ({
+const styles:Styles<IobTheme, any> = theme => ({
     toolbarBlock: {
         display: 'flex',
         flexDirection: 'column',
@@ -53,7 +57,74 @@ const styles = theme => ({
     },
 });
 
-const getItem = (item, key, props, full) => {
+export interface BaseToolbarItem {
+    name?: string;
+    field?: keyof ViewSettings;
+    hide?: boolean;
+    doNotTranslateName?: boolean;
+}
+
+export interface SelectToolbarItem extends BaseToolbarItem {
+    type: 'select';
+    items: { name: string; value: string }[];
+    width: number;
+    value?: string;
+    onChange?: (value: SelectChangeEvent) => void;
+}
+
+export interface MultiselectToolbarItem extends BaseToolbarItem {
+    type: 'multiselect';
+    items: { name: string | React.JSX.Element;
+        subName?: string;
+        value: string;
+        color?: string;
+        icon?: string;
+     }[];
+    width: number;
+    value?: string[];
+    onChange: (value: string[]) => void;
+}
+
+export interface CheckboxToolbarItem extends BaseToolbarItem {
+    type: 'checkbox';
+    value?: boolean;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export interface IconButtonToolbarItem extends BaseToolbarItem {
+    type: 'icon-button';
+    Icon: React.ComponentType;
+    onClick: () => void;
+    disabled?: boolean;
+    selected?: boolean;
+    size?: 'small' | 'inherit' | 'default' | 'large' | 'normal';
+    color?: string;
+    subName?: string;
+}
+
+export interface TextToolbarItem extends BaseToolbarItem {
+    type: 'text';
+    text: string;
+}
+
+export interface ButtonToolbarItem extends BaseToolbarItem {
+    type: 'button';
+    onClick: () => void;
+}
+
+export interface DividerToolbarItem extends BaseToolbarItem {
+    type: 'divider';
+}
+
+export interface TextFieldToolbarItem extends BaseToolbarItem {
+    type?: 'password' | 'number';
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+}
+
+export type ToolbarItem = SelectToolbarItem | MultiselectToolbarItem | CheckboxToolbarItem | IconButtonToolbarItem | TextToolbarItem | ButtonToolbarItem | DividerToolbarItem | TextFieldToolbarItem;
+
+const getItem = (item: ToolbarItem, key: number, props:ToolbarItemsProps, full?: boolean) => {
     const { visProject } = store.getState();
     const view = visProject[props.selectedView];
 
@@ -67,12 +138,12 @@ const getItem = (item, key, props, full) => {
         value = '';
     }
 
-    const change = changeValue => {
+    const change = (changeValue: any) => {
         if (!item.field) {
             return;
         }
-        const project = JSON.parse(JSON.stringify(visProject));
-        project[props.selectedView].settings[item.field] = changeValue;
+        const project = deepClone(visProject);
+        (project[props.selectedView].settings[item.field] as any) = changeValue;
 
         props.changeProject(project);
     };
@@ -102,10 +173,10 @@ const getItem = (item, key, props, full) => {
             // style={{ margin: '0px 10px' }}
             label={props.toolbarHeight !== 'veryNarrow' ? (item.doNotTranslateName ? item.name : I18n.t(item.name)) : null}
             width={item.width}
-            value={item.value ? item.value : value}
+            value={item.value ? item.value : value as string[]}
             onChange={_value => item.onChange(_value)}
             setSelectedWidgets={props.setSelectedWidgets}
-            options={item.items}
+            options={item.items.map(option => ({ name: option.name as string, subname: option.subName, value: option.value, color: option.color, icon: option.icon }))}
             themeType={props.themeType}
         />;
         /*
@@ -148,7 +219,7 @@ const getItem = (item, key, props, full) => {
         return <FormControlLabel
             key={key}
             control={<Checkbox
-                checked={value}
+                checked={value as boolean}
                 onChange={item.onChange ? item.onChange : e => change(e.target.checked)}
                 size="small"
             />}
@@ -172,7 +243,7 @@ const getItem = (item, key, props, full) => {
                         color: item.color || undefined,
                     }}
                 >
-                    <div><item.Icon fontSize={item.size && props.toolbarHeight !== 'veryNarrow' ? item.size : 'small'} /></div>
+                    <div><item.Icon fontSize={item.size ? item.size : 'small'} /></div>
                     <div>{I18n.t(item.name)}</div>
                     {item.subName ? <div style={{ fontSize: 10, opacity: 0.6 }}>{item.subName}</div> : null}
                 </ButtonBase>
@@ -226,14 +297,25 @@ const getItem = (item, key, props, full) => {
     />;
 };
 
-const ToolbarItems = props => {
+interface ToolbarItemsProps {
+    classes: Record<string, string>;
+    themeType: ThemeType;
+    group: { name: string | React.JSX.Element; doNotTranslateName?: boolean; items: (ToolbarItem[][] | ToolbarItem[] | ToolbarItem)[] };
+    last?: boolean;
+    toolbarHeight: 'full' | 'narrow' | 'veryNarrow';
+    changeProject: EditorClass['changeProject'];
+    selectedView: string;
+    setSelectedWidgets: EditorClass['setSelectedWidgets'];
+}
+
+const ToolbarItems:React.FC<ToolbarItemsProps> = props => {
     let items = props.group.items;
     const name = props.group.name;
     const doNotTranslateName = props.group.doNotTranslateName;
 
     // flatten buttons
     if (props.toolbarHeight === 'veryNarrow') {
-        const _items = [];
+        const _items:ToolbarItem[] = [];
         items.forEach(item => {
             if (Array.isArray(item)) {
                 item.forEach(_item => {
@@ -259,7 +341,7 @@ const ToolbarItems = props => {
                 items.map((item, key) => {
                     if (Array.isArray(item)) {
                         return <div key={key} className={props.classes.toolbarCol}>
-                            {item.map((subItem, subKey) => <div key={subKey} className={props.classes.toolbarRow}>
+                            {(item as ToolbarItem[][]).map((subItem, subKey) => <div key={subKey} className={props.classes.toolbarRow}>
                                 {subItem.map((subItem2, subKey2) => getItem(subItem2, subKey2, props))}
                             </div>)}
                         </div>;
@@ -274,13 +356,4 @@ const ToolbarItems = props => {
     </div>;
 };
 
-ToolbarItems.propTypes = {
-    classes: PropTypes.object,
-    // eslint-disable-next-line react/no-unused-prop-types
-    themeType: PropTypes.string,
-    group: PropTypes.object,
-    last: PropTypes.bool,
-    toolbarHeight: PropTypes.string,
-};
-
-export default withStyles(styles)(ToolbarItems);
+export default withStyles(styles)(ToolbarItems) as React.FC<ToolbarItemsProps>;