Working on layout

ioBroker · Apr 24, 2024 · c4c2c68 · c4c2c68
1 parent 6362b35
commit c4c2c68
Show file tree

Hide file tree

Showing 53 changed files with 700 additions and 419 deletions.
diff --git a/packages/admin/src/src/App.jsx b/packages/admin/src/src/App.jsx
@@ -383,10 +383,16 @@ class App extends Router {
         this.expireText = I18n.t('Session expire in %s', '%s');
         this.adminGuiConfig = {
             admin: {
-                menu: {}, settings: {}, adapters: {}, login: {},
+                menu: {},
+                settings: {},
+                adapters: {},
+                login: {},
             },
         };
 
+        const vendorPrefix = window.vendorPrefix;
+        this.toggleThemePossible = !vendorPrefix || vendorPrefix === '@@vendorPrefix@@' || vendorPrefix === 'MV';
+
         if (!query.login) {
             let drawerState = (window._localStorage || window.localStorage).getItem('App.drawerState');
             if (drawerState) {
@@ -2454,14 +2460,14 @@ class App extends Router {
                                             </IconButton>
                                         </Tooltip>
                                     </IsVisible>
-                                    <IsVisible name="admin.appBar.toggleTheme" config={this.adminGuiConfig}>
+                                    {this.toggleThemePossible ? <IsVisible name="admin.appBar.toggleTheme" config={this.adminGuiConfig}>
                                         <ToggleThemeMenu
                                             size="large"
                                             toggleTheme={this.toggleTheme}
                                             themeName={this.state.themeName}
                                             t={I18n.t}
                                         />
-                                    </IsVisible>
+                                    </IsVisible> : null}
                                     <IsVisible name="admin.appBar.expertMode" config={this.adminGuiConfig}>
                                         <Tooltip
                                             title={`${I18n.t('Toggle expert mode')} ${

diff --git a/packages/admin/src/src/Utils.tsx b/packages/admin/src/src/Utils.tsx
@@ -653,6 +653,14 @@ class Utils {
             return false;
         }
     }
+
+    static getText(word: ioBroker.StringOrTranslated, lang: ioBroker.Languages): string {
+        if (word && typeof word === 'object') {
+            return (word[lang] || word.en || '').toString();
+        }
+
+        return (word || '').toString();
+    }
 }
 
 export default Utils;
diff --git a/.../admin/src/src/components/CustomModal.jsx → .../admin/src/src/components/CustomModal.tsx b/.../admin/src/src/components/CustomModal.jsx → .../admin/src/src/components/CustomModal.tsx
@@ -1,10 +1,9 @@
-import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
+import React, { Component, useEffect, useState } from 'react';
 import { withStyles } from '@mui/styles';
 
 import {
     Dialog, DialogActions, DialogContent,
-    DialogTitle, IconButton, TextField, Button, InputAdornment,
+    DialogTitle, IconButton, TextField, Button, InputAdornment, type Theme, type Breakpoint,
 } from '@mui/material';
 
 import {
@@ -15,7 +14,7 @@ import {
 
 import { Utils, I18n } from '@iobroker/adapter-react-v5';
 
-const styles = theme => ({
+const styles: Record<string, any> = (theme: Theme) => ({
     modalDialog: {
         minWidth: 400,
         maxWidth: 800,
@@ -40,12 +39,34 @@ const styles = theme => ({
     },
 });
 
+interface CustomModalProps {
+    icon?: Component;
+    onClose: () => void;
+    children: React.JSX.Element | React.JSX.Element [];
+    title?: string;
+    titleButtonClose?: string;
+    titleButtonApply?: string;
+    onApply: (value: string | number) => void;
+    fullWidth?: boolean;
+    maxWidth?: Breakpoint;
+    applyButton?: boolean;
+    applyDisabled?: boolean;
+    overflowHidden?: boolean;
+    help?: string;
+    noTranslation?: boolean;
+    toggleTranslation?: () => void;
+    classes: Record<string, string>;
+    textInput?: boolean;
+    defaultValue?: string | number;
+    progress?: boolean;
+}
+
 const CustomModal = ({
     toggleTranslation, noTranslation, title, fullWidth,
     help, maxWidth, progress, icon, applyDisabled, applyButton,
     classes, onClose, children, titleButtonApply, titleButtonClose,
     onApply, textInput, defaultValue, overflowHidden,
-}) => {
+}: CustomModalProps) => {
     const [value, setValue] = useState(defaultValue);
     useEffect(() => {
         setValue(defaultValue);
@@ -66,7 +87,10 @@ const CustomModal = ({
         classes={{ paper: classes.modalDialog /* paper: classes.background */ }}
     >
         {title && <DialogTitle>
-            {icon ? <Icon className={classes.titleIcon} /> : null}
+            {icon ?
+                // @ts-expect-error How to solve it?
+                <Icon className={classes.titleIcon} />
+                : null}
             {title}
             {I18n.getLanguage() !== 'en' && toggleTranslation ? <IconButton
                 size="large"
@@ -77,13 +101,16 @@ const CustomModal = ({
                 <LanguageIcon />
             </IconButton> : null}
         </DialogTitle>}
-        <DialogContent className={Utils.clsx(overflowHidden ? classes.overflowHidden : null, classes.content)} style={{ paddingTop: 8 }}>
+        <DialogContent
+            className={Utils.clsx(overflowHidden ? classes.overflowHidden : null, classes.content)}
+            style={{ paddingTop: 8 }}
+        >
             {textInput && <TextField
                 // className={className}
                 autoComplete="off"
                 fullWidth
                 autoFocus
-                variant="outlined"
+                variant="standard"
                 size="medium"
                 // rows={10}
                 multiline
@@ -105,54 +132,27 @@ const CustomModal = ({
             {help ? <div>{help}</div> : null}
         </DialogContent>
         <DialogActions>
-            {applyButton && <Button
+            {(applyButton === undefined || applyButton) && <Button
                 startIcon={<CheckIcon />}
                 disabled={progress || (applyDisabled && defaultValue === value)}
-                onClick={() => onApply(textInput ? value : '')}
+                onClick={() => onApply && onApply(textInput ? value : '')}
                 variant="contained"
                 color="primary"
             >
-                {I18n.t(titleButtonApply)}
+                {I18n.t(titleButtonApply || 'Ok')}
             </Button>}
             <Button
+                // @ts-expect-error grey is valid color
                 color="grey"
                 onClick={onClose}
                 disabled={progress}
                 variant="contained"
                 startIcon={<CloseIcon />}
             >
-                {I18n.t(titleButtonClose)}
+                {I18n.t(titleButtonClose || 'Cancel')}
             </Button>
         </DialogActions>
     </Dialog>;
 };
 
-CustomModal.defaultProps = {
-    onApply: () => undefined,
-    onClose: () => undefined,
-    applyButton: true,
-    applyDisabled: false,
-    titleButtonClose: 'Cancel',
-    titleButtonApply: 'Ok',
-    overflowHidden: false,
-    help: '',
-};
-
-CustomModal.propTypes = {
-    icon: PropTypes.object,
-    onClose: PropTypes.func,
-    children: PropTypes.any,
-    titleButtonClose: PropTypes.string,
-    titleButtonApply: PropTypes.string,
-    onApply: PropTypes.func,
-    fullWidth: PropTypes.bool,
-    maxWidth: PropTypes.string,
-    applyButton: PropTypes.bool,
-    applyDisabled: PropTypes.bool,
-    overflowHidden: PropTypes.bool,
-    help: PropTypes.string,
-    noTranslation: PropTypes.bool,
-    toggleTranslation: PropTypes.func,
-};
-
 export default withStyles(styles)(CustomModal);
diff --git a/packages/admin/src/src/components/Enums/EnumBlock.tsx b/packages/admin/src/src/components/Enums/EnumBlock.tsx
@@ -84,6 +84,7 @@ const styles: Record<string, any> = (theme: Theme) => ({
     enumGroupTitle: {
         display: 'inline-flex',
         alignItems: 'center',
+        cursor: 'pointer',
     },
     icon: {
         height: 32,
@@ -388,6 +389,7 @@ class EnumBlock extends Component<EnumBlockProps, EnumBlockState> {
                         gutterBottom={!props.collapsed}
                         component="div"
                         className={classes.enumGroupTitle}
+                        onClick={() => props.onCollapse(props.id)}
                     >
                         {icon}
                         <div className={classes.enumGroupName}>
@@ -527,36 +529,36 @@ const EnumBlockDrag = (props: EnumBlockDragProps) => {
 
     const widthRef = useRef();
 
-    const [{ isDragging }, dragRef, preview] = useDrag(
-        {
-            type: 'enum',
-            item: () => ({
-                enumId: props.id,
-                preview: <div
-                    style={{
-                        // @ts-expect-error I do not understand, why this error here
-                        width: widthRef.current === undefined ? 50 : widthRef.current.offsetWidth,
-                    }}
-                >
-                    <StyledEnumBlock {...props} />
-                </div>,
-            }),
-            end: (draggeditem: { enumId: string; preview: React.JSX.Element }, monitor: DragSourceMonitor<DragItem, { enumId: string }>) => {
-                const dropResult = monitor.getDropResult();
-                if (!dropResult) {
-                    // root
-                    const parts = draggeditem.enumId.split('.');
-                    props.moveEnum(draggeditem.enumId, `${parts[0]}.${parts[1]}`);
-                } else {
-                    props.moveEnum(draggeditem.enumId, dropResult.enumId);
-                }
-            },
-            collect: monitor => ({
-                isDragging: monitor.isDragging(),
-                handlerId: monitor.getHandlerId(),
-            }),
+    const [{ isDragging }, dragRef, preview] = useDrag({
+        type: 'enum',
+        item: () => ({
+            enumId: props.id,
+            preview: <div
+                style={{
+                    // @ts-expect-error I do not understand, why this error here
+                    width: widthRef.current === undefined ? 50 : widthRef.current.offsetWidth,
+                }}
+            >
+                <StyledEnumBlock {...props} />
+            </div>,
+        }),
+
+        end: (draggeditem: { enumId: string; preview: React.JSX.Element }, monitor: DragSourceMonitor<DragItem, { enumId: string }>) => {
+            const dropResult = monitor.getDropResult();
+            if (!dropResult) {
+                // root
+                const parts = draggeditem.enumId.split('.');
+                props.moveEnum(draggeditem.enumId, `${parts[0]}.${parts[1]}`);
+            } else {
+                props.moveEnum(draggeditem.enumId, dropResult.enumId);
+            }
         },
-    );
+
+        collect: monitor => ({
+            isDragging: monitor.isDragging(),
+            handlerId: monitor.getHandlerId(),
+        }),
+    });
 
     useEffect(() => {
         preview(getEmptyImage(), { captureDraggingState: true });

diff --git a/packages/admin/src/src/components/Enums/EnumTemplateDialog.tsx b/packages/admin/src/src/components/Enums/EnumTemplateDialog.tsx
@@ -24,6 +24,7 @@ import devices from '../../assets/devices/list.json';
 import rooms from '../../assets/rooms/list.json';
 
 import Utils from '../Utils';
+import BasicUtils from '../../Utils';
 
 interface EnumIcon {
     _id: string;
@@ -126,13 +127,6 @@ class EnumTemplateDialog extends Component<EnumTemplateDialogProps, EnumTemplate
         });
     }
 
-    getName(item: EnumIcon): string {
-        if (item.name && typeof item.name === 'object') {
-            return item.name[this.props.lang] || item.name.en || item._id || '';
-        }
-        return (item.name as string) || item._id || '';
-    }
-
     render() {
         const templates = this.props.prefix.startsWith('enum.functions') ? devices : rooms;
 
@@ -166,7 +160,7 @@ class EnumTemplateDialog extends Component<EnumTemplateDialogProps, EnumTemplate
                 {this.state.loading && <LinearProgress />}
                 <div className={this.props.classes.content}>
                     {templates.map((template, i) => {
-                        const name = this.getName(template);
+                        const name = BasicUtils.getText(template.name, this.props.lang) || template._id;
 
                         if (this.props.enums[`${this.props.prefix}.${template._id}`]) {
                             return null;
@@ -192,7 +186,7 @@ class EnumTemplateDialog extends Component<EnumTemplateDialogProps, EnumTemplate
                                 className={this.props.classes.enumTemplateButton}
                                 startIcon={<Icon src={this.state.icons[i]} className={this.props.classes.icon} />}
                             >
-                                <span className={this.props.classes.enumTemplateLabel}>{this.getName(template)}</span>
+                                <span className={this.props.classes.enumTemplateLabel}>{BasicUtils.getText(template.name, this.props.lang) || template._id}</span>
                             </Button>;
                         }
                         return null;

diff --git a/packages/admin/src/src/components/Enums/EnumsMain.tsx b/packages/admin/src/src/components/Enums/EnumsMain.tsx
@@ -35,6 +35,7 @@ import EnumEditDialog from './EnumEditDialog';
 import EnumTemplateDialog from './EnumTemplateDialog';
 import EnumDeleteDialog from './EnumDeleteDialog';
 import DragObjectBrowser from './DragObjectBrowser';
+import BasicUtils from '../../Utils';
 
 const styles: Record<string, any> = (theme: Theme) => ({
     mainGridCont: {
@@ -714,8 +715,7 @@ class EnumsList extends Component<EnumsListProps, EnumsListState> {
         this.setState({ enumEditDialog });
     };
 
-    getName = (name: ioBroker.StringOrTranslated): string =>
-        ((name && typeof name === 'object') ? (name[this.props.lang] || name.en || '') : (name as string || ''));
+    getName = (name: ioBroker.StringOrTranslated): string => BasicUtils.getText(name, this.props.lang);
 
     static _isUniqueName(prefix: string, list: ioBroker.EnumObject[], word: string, i: number) {
         return !list.find(item =>

diff --git a/packages/admin/src/src/components/Hosts/HostCard.tsx b/packages/admin/src/src/components/Hosts/HostCard.tsx
@@ -607,7 +607,6 @@ const HostCard = ({
 
     const customModal = showModal ? <CustomModal
         title={titleModal}
-        open={!0}
         onApply={() => {
             if (openDialogLogLevel) {
                 socket.setState(`${_id}.logLevel`, logLevelValueSelect);

diff --git a/packages/admin/src/src/components/Hosts/HostEdit.jsx b/packages/admin/src/src/components/Hosts/HostEdit.jsx
@@ -294,8 +294,24 @@ class HostEdit extends Component {
                 {this.renderCommonEdit()}
             </DialogContent>
             <DialogActions>
-                <Button variant="contained" disabled={this.state.error || !this.state.changed} onClick={() => this.onUpdate()} color="primary" startIcon={<IconCheck />}>{this.props.t('Write')}</Button>
-                <Button variant="contained" onClick={() => this.props.onClose()} color="grey" startIcon={<IconClose />}>{this.props.t('Cancel')}</Button>
+                <Button
+                    variant="contained"
+                    disabled={this.state.error || !this.state.changed}
+                    onClick={() => this.onUpdate()}
+                    color="primary"
+                    startIcon={<IconCheck />}
+                >
+                    {this.props.t('Write')}
+                </Button>
+                <Button
+                    variant="contained"
+                    onClick={() => this.props.onClose()}
+                    // @ts-expect-error grey is valid color
+                    color="grey"
+                    startIcon={<IconClose />}
+                >
+                    {this.props.t('Cancel')}
+                </Button>
             </DialogActions>
         </Dialog>;
     }

diff --git a/packages/admin/src/src/components/Hosts/HostRow.tsx b/packages/admin/src/src/components/Hosts/HostRow.tsx
@@ -606,7 +606,6 @@ const HostRow = ({
 
     const customModal = showModal ? <CustomModal
         title={titleModal}
-        open={!0}
         onApply={() => {
             if (openDialogLogLevel) {
                 socket.setState(`${_id}.logLevel`, logLevelValueSelect);