@iobroker/json-config 6.17.6 → 6.17.13

package/src/JsonConfigComponent/ConfigTabs.tsx

@@ -0,0 +1,150 @@
+import React from 'react';
+import { withStyles } from '@mui/styles';
+
+import { Tabs, Tab } from '@mui/material';
+
+import type { ConfigItemTabs } from '#JC/types';
+import ConfigGeneric, { type ConfigGenericProps, type ConfigGenericState } from './ConfigGeneric';
+import ConfigPanel from './ConfigPanel';
+import {bool} from "prop-types";
+
+const styles: Record<string, any> = {
+    tabs: {
+        height: '100%',
+        width: '100%',
+    },
+    panel: {
+        height: 'calc(100% - 48px)',
+        width: '100%',
+        display: 'block',
+    },
+};
+
+interface ConfigTabsProps extends ConfigGenericProps {
+    schema: ConfigItemTabs;
+    dialogName?: string;
+}
+
+interface ConfigTabsState extends ConfigGenericState {
+    tab?: string;
+}
+
+class ConfigTabs extends ConfigGeneric<ConfigTabsProps, ConfigTabsState> {
+    constructor(props: ConfigTabsProps) {
+        super(props);
+
+        let tab = ((window as any)._localStorage as Storage || window.localStorage).getItem(`${this.props.dialogName || 'App'}.${this.props.adapterName}`) || Object.keys(this.props.schema.items)[0];
+        if (!Object.keys(this.props.schema.items).includes(tab)) {
+            tab = Object.keys(this.props.schema.items)[0];
+        }
+        Object.assign(this.state, { tab });
+    }
+
+    render() {
+        const items = this.props.schema.items;
+
+        return <div className={this.props.classes.tabs}>
+            <Tabs
+                variant="scrollable"
+                scrollButtons="auto"
+                style={this.props.schema.tabsStyle}
+                value={this.state.tab}
+                onChange={(e, tab) => {
+                    ((window as any)._localStorage as Storage || window.localStorage).setItem(`${this.props.dialogName || 'App'}.${this.props.adapterName}`, tab);
+                    this.setState({ tab });
+                }}
+            >
+                {Object.keys(items).map(name => {
+                    let disabled: boolean;
+                    if (this.props.custom) {
+                        const hidden = this.executeCustom(
+                            items[name].hidden,
+                            this.props.data,
+                            this.props.customObj,
+                            this.props.instanceObj,
+                            this.props.index,
+                            this.props.globalData,
+                        );
+                        if (hidden) {
+                            return null;
+                        }
+                        disabled = this.executeCustom(
+                            items[name].disabled,
+                            this.props.data,
+                            this.props.customObj,
+                            this.props.instanceObj,
+                            this.props.index,
+                            this.props.globalData,
+                        ) as boolean;
+                    } else {
+                        const hidden: boolean = this.execute(
+                            items[name].hidden,
+                            false,
+                            this.props.data,
+                            this.props.index,
+                            this.props.globalData,
+                        ) as boolean;
+                        if (hidden) {
+                            return null;
+                        }
+                        disabled = this.execute(
+                            items[name].disabled,
+                            false,
+                            this.props.data,
+                            this.props.index,
+                            this.props.globalData,
+                        ) as boolean;
+                    }
+                    return <Tab
+                        wrapped
+                        disabled={disabled}
+                        key={name}
+                        value={name}
+                        iconPosition={this.props.schema.iconPosition || 'start'}
+                        icon={this.getIcon(items[name].icon)}
+                        label={this.getText(items[name].label)}
+                    />;
+                })}
+            </Tabs>
+            <ConfigPanel
+                isParentTab
+                changed={this.props.changed}
+                key={this.state.tab}
+                index={1001}
+                arrayIndex={this.props.arrayIndex}
+                globalData={this.props.globalData}
+                onCommandRunning={this.props.onCommandRunning}
+                commandRunning={this.props.commandRunning}
+                className={this.props.classes.panel}
+                socket={this.props.socket}
+                adapterName={this.props.adapterName}
+                instance={this.props.instance}
+                common={this.props.common}
+                customs={this.props.customs}
+                alive={this.props.alive}
+                themeType={this.props.themeType}
+                themeName={this.props.themeName}
+                data={this.props.data}
+                originalData={this.props.originalData}
+                systemConfig={this.props.systemConfig}
+                onError={this.props.onError}
+                onChange={this.props.onChange}
+                multiEdit={this.props.multiEdit}
+                dateFormat={this.props.dateFormat}
+                isFloatComma={this.props.isFloatComma}
+                // disabled={disabled}
+                imagePrefix={this.props.imagePrefix}
+                changeLanguage={this.props.changeLanguage}
+                forceUpdate={this.props.forceUpdate}
+                registerOnForceUpdate={this.props.registerOnForceUpdate}
+                customObj={this.props.customObj}
+                instanceObj={this.props.instanceObj}
+                custom={this.props.custom}
+                schema={items[this.state.tab]}
+                table={this.props.table}
+            />
+        </div>;
+    }
+}
+
+export default withStyles(styles)(ConfigTabs);

package/src/JsonConfigComponent/ConfigText.tsx

@@ -0,0 +1,188 @@
+import React from 'react';
+import { withStyles } from '@mui/styles';
+
+import {
+    Autocomplete,
+    TextField,
+    TextareaAutosize, InputAdornment, IconButton,
+} from '@mui/material';
+
+import {
+    Close as CloseIcon,
+} from '@mui/icons-material';
+
+import { I18n } from '@iobroker/adapter-react-v5';
+
+import type { ConfigItemText } from '#JC/types';
+import ConfigGeneric, { type ConfigGenericProps, type ConfigGenericState } from './ConfigGeneric';
+
+const styles: Record<string, any> = {
+    indeterminate: {
+        opacity: 0.5,
+    },
+    label: {
+        width: '100%',
+        fontSize: 16,
+    },
+    helper: {
+        width: '100%',
+        fontSize: 12,
+    },
+    error: {
+        width: '100%',
+        fontSize: 12,
+        color: '#FF0000',
+    },
+};
+
+interface ConfigTextProps extends ConfigGenericProps {
+    schema: ConfigItemText;
+}
+
+interface ConfigTextState extends ConfigGenericState {
+    oldValue?: string;
+}
+
+class ConfigText extends ConfigGeneric<ConfigTextProps, ConfigTextState> {
+    private updateTimeout: ReturnType<typeof setTimeout> | null = null;
+
+    componentDidMount() {
+        super.componentDidMount();
+        let value = ConfigGeneric.getValue(this.props.data, this.props.attr);
+
+        if (Array.isArray(value) && this.props.multiEdit) {
+            value = ConfigGeneric.DIFFERENT_VALUE;
+            this.setState({ value, oldValue: value });
+            return;
+        }
+
+        this.setState({ value, oldValue: value });
+    }
+
+    static getDerivedStateFromProps(props: ConfigTextProps, state: ConfigTextState) {
+        if (props.multiEdit && state.value === ConfigGeneric.DIFFERENT_VALUE) {
+            return ConfigGeneric.DIFFERENT_VALUE;
+        }
+
+        let value = ConfigGeneric.getValue(props.data, props.attr);
+
+        if (value !== null && value !== undefined) {
+            value = value.toString();
+        }
+
+        if (value === null || value === undefined || (value !== state.value && value !== state.oldValue)) {
+            return { value };
+        }
+        return null;
+    }
+
+    renderItem(error?: boolean, disabled?: boolean) {
+        const isIndeterminate = Array.isArray(this.state.value) || this.state.value === ConfigGeneric.DIFFERENT_VALUE;
+
+        if (this.state.oldValue !== null && this.state.oldValue !== undefined) {
+            this.updateTimeout && clearTimeout(this.updateTimeout);
+            this.updateTimeout = setTimeout(() => {
+                this.updateTimeout = null;
+                this.setState({ oldValue: null });
+            }, 30);
+        } else if (this.updateTimeout) {
+            clearTimeout(this.updateTimeout);
+            this.updateTimeout = null;
+        }
+
+        if (isIndeterminate) {
+            const autoCompleteOptions = ConfigGeneric.getValue(this.props.data, this.props.attr);
+            const arr = [...autoCompleteOptions].map(item => ({ label: item.toString(), value: item }));
+            arr.unshift({ label: I18n.t(ConfigGeneric.DIFFERENT_LABEL), value: ConfigGeneric.DIFFERENT_VALUE });
+
+            return <Autocomplete
+                className={this.props.classes.indeterminate}
+                fullWidth
+                value={arr[0]}
+                // getOptionSelected={(option, value) => option.label === value.label}
+                onChange={(_, value) =>  {
+                    const val = value ? value.value : '';
+                    this.onChange(this.props.attr, val, () => {
+                        this.setState({ value: val, oldValue: val });
+                    });
+                }}
+                options={arr}
+                getOptionLabel={option => option.label}
+                renderInput={params => <TextField
+                    variant="standard"
+                    {...params}
+                    error={!!error}
+                    placeholder={this.getText(this.props.schema.placeholder)}
+                    inputProps={{
+                        ...params.inputProps,
+                        maxLength: this.props.schema.maxLength || this.props.schema.max || undefined,
+                        readOnly: this.props.schema.readOnly || false,
+                    }}
+                    label={this.getText(this.props.schema.label)}
+                    helperText={this.renderHelp(this.props.schema.help, this.props.schema.helpLink, this.props.schema.noTranslation)}
+                    disabled={!!disabled}
+                />}
+            />;
+        }
+        if (this.props.schema.minRows > 1) {
+            const helper = this.renderHelp(this.props.schema.help, this.props.schema.helpLink, this.props.schema.noTranslation);
+            return <div style={{ width: '100%' }}>
+                {this.props.schema.label ? <div className={this.props.classes.label}>{this.getText(this.props.schema.label)}</div> : null}
+                <TextareaAutosize
+                    // variant="standard"
+                    style={{
+                        width: '100%',
+                        resize: 'vertical',
+                        backgroundColor: this.props.themeType === 'dark' ? '#363636' : '#cccccc',
+                        color: this.props.themeType === 'dark' ? '#fff' : '#111',
+                    }}
+                    minRows={this.props.schema.minRows}
+                    maxRows={this.props.schema.maxRows}
+                    value={this.state.value === null || this.state.value === undefined ? '' : this.state.value}
+                    disabled={!!disabled}
+                    readOnly={this.props.schema.readOnly || false}
+                    onChange={e => {
+                        const value = e.target.value;
+                        this.setState({ value, oldValue: this.state.value }, () =>
+                            this.onChange(this.props.attr, value || ''));
+                    }}
+                    placeholder={this.getText(this.props.schema.placeholder)}
+                />
+                {helper || error ? <div className={error ? this.props.classes.error : this.props.classes.helper}>{error || helper}</div> : null}
+            </div>;
+        }
+        return <TextField
+            variant="standard"
+            fullWidth
+            value={this.state.value === null || this.state.value === undefined ? '' : this.state.value}
+            error={!!error}
+            disabled={!!disabled}
+            inputProps={{
+                maxLength: this.props.schema.maxLength || this.props.schema.max || undefined,
+                readOnly: this.props.schema.readOnly || false,
+            }}
+            // eslint-disable-next-line react/jsx-no-duplicate-props
+            InputProps={{
+                endAdornment: this.state.value && !this.props.schema.noClearButton ? <InputAdornment position="end">
+                    <IconButton
+                        size="small"
+                        onClick={() => this.setState({ value: '', oldValue: this.state.value }, () =>
+                            this.onChange(this.props.attr, ''))}
+                    >
+                        <CloseIcon />
+                    </IconButton>
+                </InputAdornment> : null,
+            }}
+            onChange={e => {
+                const value = e.target.value;
+                this.setState({ value, oldValue: this.state.value }, () =>
+                    this.onChange(this.props.attr, value));
+            }}
+            placeholder={this.getText(this.props.schema.placeholder)}
+            label={this.getText(this.props.schema.label)}
+            helperText={this.renderHelp(this.props.schema.help, this.props.schema.helpLink, this.props.schema.noTranslation)}
+        />;
+    }
+}
+
+export default withStyles(styles)(ConfigText);

package/src/JsonConfigComponent/ConfigTextSendTo.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { withStyles } from '@mui/styles';
+
+import {
+    TextField,
+    IconButton,
+} from '@mui/material';
+
+import { IconCopy, Utils } from '@iobroker/adapter-react-v5';
+
+import type { ConfigItemSendTo } from '#JC/types';
+import ConfigGeneric, {type ConfigGenericProps, type ConfigGenericState} from './ConfigGeneric';
+
+const styles: Record<string, any> = {
+    fullWidth: {
+        width: '100%',
+    },
+};
+
+interface ConfigTextSendToProps extends ConfigGenericProps {
+    schema: ConfigItemSendTo;
+}
+
+interface ConfigTextSendToState extends ConfigGenericState {
+    text?: string;
+    context?: string;
+}
+
+class ConfigTextSendTo extends ConfigGeneric<ConfigTextSendToProps, ConfigTextSendToState> {
+    componentDidMount() {
+        super.componentDidMount();
+
+        this.askInstance();
+    }
+
+    askInstance() {
+        if (this.props.alive) {
+            let data: Record<string, any> | undefined = this.props.schema.data;
+            if (data === undefined && this.props.schema.jsonData) {
+                const dataStr: string = this.getPattern(this.props.schema.jsonData);
+                try {
+                    data = JSON.parse(dataStr);
+                } catch (e) {
+                    console.error(`Cannot parse json data: ${dataStr}`);
+                }
+            }
+
+            if (data === undefined) {
+                data = null;
+            }
+
+            this.props.socket.sendTo(`${this.props.adapterName}.${this.props.instance}`, this.props.schema.command || 'send', data)
+                .then(text => this.setState({ text: text || '', context: this.getContext() }));
+        }
+    }
+
+    getContext() {
+        const context: Record<string, any> = {};
+        if (Array.isArray(this.props.schema.alsoDependsOn)) {
+            this.props.schema.alsoDependsOn.forEach(attr =>
+                context[attr] = ConfigGeneric.getValue(this.props.data, attr));
+        }
+        return JSON.stringify(context);
+    }
+
+    renderItem(/* error, disabled, defaultValue */) {
+        if (this.state.text === undefined) {
+            return null;
+        }
+
+        if (this.props.alive) {
+            const context = this.getContext();
+            if (context !== this.state.context) {
+                setTimeout(() => this.askInstance(), 300);
+            }
+        }
+
+        if (this.props.schema.container === 'text') {
+            return <TextField
+                variant="standard"
+                fullWidth
+                InputProps={{
+                    endAdornment: this.props.schema.copyToClipboard ? <IconButton
+                        size="small"
+                        onClick={() => {
+                            Utils.copyToClipboard(this.state.text);
+                            window.alert('Copied');
+                        }}
+                    >
+                        <IconCopy />
+                    </IconButton> : undefined,
+                }}
+                value={this.state.text}
+                label={this.getText(this.props.schema.label)}
+                helperText={this.renderHelp(this.props.schema.help, this.props.schema.helpLink, this.props.schema.noTranslation)}
+            />;
+        }
+        return <div className={this.props.classes.fullWidth}>{this.state.text}</div>;
+    }
+}
+
+export default withStyles(styles)(ConfigTextSendTo);

package/src/JsonConfigComponent/ConfigTimePicker.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+
+import { TimePicker } from '@mui/x-date-pickers';
+
+import type { ConfigItemTimePicker } from '#JC/types';
+import ConfigGeneric, { type ConfigGenericProps } from './ConfigGeneric';
+
+interface ConfigTimePickerProps extends ConfigGenericProps {
+    schema: ConfigItemTimePicker;
+    dialogName?: string;
+}
+
+export default class ConfigTimePicker extends ConfigGeneric<ConfigTimePickerProps> {
+    componentDidMount() {
+        super.componentDidMount();
+        const value = ConfigGeneric.getValue(this.props.data, this.props.attr);
+        this.setState({ value });
+    }
+
+    renderItem(_error: unknown, disabled: boolean) {
+        // the format could be 'HH:mm:ss' or 'HH:mm'
+        const shortFormat = this.props.schema.returnFormat !== 'HH:mm:ss';
+
+        const value: never = new Date(Date.parse(`Thu, 01 Jan 1970 ${this.state.value || '00:00:00'}`)) as never;
+
+        return <TimePicker
+            sx={theme => ({
+                width: '100%',
+                borderBottom: `1px solid ${theme.palette.text.primary}`,
+                '& fieldset': {
+                    display: 'none',
+                },
+                '& input': {
+                    padding: `${theme.spacing(1.5)} 0 4px 0`,
+                },
+                '& .MuiInputAdornment-root': {
+                    marginLeft: 0,
+                    marginTop: 1, // it is already in spaces
+                },
+                '& label': {
+                    transform: 'translate(0px, -9px) scale(0.75)',
+                },
+            })}
+            ampm={this.props.systemConfig.dateFormat.includes('/')}
+            timeSteps={this.props.schema.timeSteps || this.props.schema.timesteps || { hours: 1, minutes: 5, seconds: 5 }}
+            format={this.props.schema.format || 'HH:mm:ss'}
+            disabled={!!disabled}
+            value={value}
+            onChange={(newValue: Date) => {
+                let strValue = newValue.toTimeString();
+                strValue = (newValue as any) instanceof Date ? (newValue as Date).toTimeString().split(' ')[0] : newValue.toTimeString();
+                if (shortFormat) {
+                    strValue = strValue.split(':').slice(0, 2).join(':');
+                }
+
+                this.setState({ value: strValue }, () =>
+                    this.onChange(this.props.attr, this.state.value));
+            }}
+            views={this.props.schema.views || ['hours', 'minutes', 'seconds']}
+            label={this.getText(this.props.schema.label)}
+        />;
+    }
+}

package/src/JsonConfigComponent/ConfigTopic.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@mui/styles';
+
+import { TextField } from '@mui/material';
+
+import ConfigGeneric from './ConfigGeneric';
+
+const styles = () => ({
+    fullWidth: {
+        width: '100%',
+    },
+    icon: {
+        width: 16,
+        height: 16,
+        marginRight: 8,
+    },
+});
+
+function convertID2Topic(id, prefix, namespace) {
+    let topic;
+    if (namespace && id.substring(0, namespace.length) === namespace) {
+        topic = id.substring(namespace.length + 1);
+    } else {
+        topic = id;
+    }
+    topic = topic.replace(/\./g, '/').replace(/_/g, ' ');
+    return topic;
+}
+
+class ConfigTopic extends ConfigGeneric {
+    componentDidMount() {
+        super.componentDidMount();
+        const value = ConfigGeneric.getValue(this.props.data, this.props.attr);
+        if (!value && this.props.customObj && this.props.customObj._id) {
+            const topic = convertID2Topic(this.props.customObj._id, null, `${this.props.adapterName}.${this.props.instance}`);
+            this.setState({ value: topic });
+        } else {
+            this.setState({ value: value || '' });
+        }
+    }
+
+    renderItem(error, disabled /* , defaultValue */) {
+        return <TextField
+            variant="standard"
+            fullWidth
+            inputProps={{ maxLength: this.props.schema.maxLength || this.props.schema.max || undefined }}
+            value={this.state.value}
+            error={!!error}
+            disabled={disabled}
+            placeholder={this.getText(this.props.schema.placeholder)}
+            label={this.getText(this.props.schema.label)}
+            helperText={this.renderHelp(this.props.schema.help, this.props.schema.helpLink, this.props.schema.noTranslation)}
+            onChange={e => {
+                const value = e.target.value;
+                this.setState({ value }, () =>
+                    this.onChange(this.props.attr, value));
+            }}
+        />;
+    }
+}
+
+ConfigTopic.propTypes = {
+    socket: PropTypes.object.isRequired,
+    themeType: PropTypes.string,
+    themeName: PropTypes.string,
+    style: PropTypes.object,
+    className: PropTypes.string,
+    data: PropTypes.object.isRequired,
+    schema: PropTypes.object,
+    onError: PropTypes.func,
+    onChange: PropTypes.func,
+    adapterName: PropTypes.string,
+    instance: PropTypes.number,
+    customObj: PropTypes.object,
+};
+
+export default withStyles(styles)(ConfigTopic);

package/src/JsonConfigComponent/ConfigUUID.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import {
+    TextField,
+    IconButton,
+} from '@mui/material';
+
+import { ContentCopy as IconCopy } from '@mui/icons-material';
+
+import { Utils, I18n } from '@iobroker/adapter-react-v5';
+
+import type { ConfigItemUUID } from '#JC/types';
+import ConfigGeneric, {type ConfigGenericProps, type ConfigGenericState} from './ConfigGeneric';
+
+interface ConfigUUIDProps extends ConfigGenericProps {
+    schema: ConfigItemUUID;
+}
+
+interface ConfigUUIDState extends ConfigGenericState {
+    uuid?: string;
+}
+
+class ConfigUUID extends ConfigGeneric<ConfigUUIDProps, ConfigUUIDState> {
+    async componentDidMount() {
+        super.componentDidMount();
+
+        const uuidObj = await this.props.socket.getObject('system.meta.uuid');
+        this.setState({ uuid: uuidObj?.native?.uuid || 'unknown' });
+    }
+
+    renderItem(error: unknown, disabled: boolean) {
+        return <TextField
+            variant="standard"
+            fullWidth
+            error={!!error}
+            disabled={!!disabled}
+            inputProps={{ readOnly: true }}
+            // eslint-disable-next-line react/jsx-no-duplicate-props
+            InputProps={{
+                endAdornment: <IconButton onClick={() => {
+                    Utils.copyToClipboard(this.state.uuid);
+                    window.alert(I18n.t('ra_Copied %s', this.state.uuid));
+                }}
+                >
+                    <IconCopy />
+                </IconButton>,
+            }}
+            value={this.state.uuid || ''}
+            label={this.getText(this.props.schema.label) || I18n.t('ra_Serial number (UUID)')}
+            helperText={this.renderHelp(this.props.schema.help, this.props.schema.helpLink, this.props.schema.noTranslation)}
+        />;
+    }
+}
+
+export default ConfigUUID;