@iobroker/json-config 6.17.6 → 6.17.12

package/src/JsonConfigComponent/ConfigPort.tsx

@@ -0,0 +1,232 @@
+import React from 'react';
+import { withStyles } from '@mui/styles';
+
+import { TextField } from '@mui/material';
+
+import { I18n } from '@iobroker/adapter-react-v5';
+
+import type { ConfigItemPort } from '#JC/types';
+import ConfigGeneric, { type ConfigGenericProps, type ConfigGenericState } from './ConfigGeneric';
+
+const styles: Record<string, any> = {
+    indeterminate: {
+        opacity: 0.5,
+    },
+    control: {
+        flexDirection: 'row',
+        width: '100%',
+    },
+    warning: {
+        '& .Mui-error': {
+            color: 'orange',
+        },
+    },
+};
+
+interface Port {
+    name: string;
+    port: number;
+    bind: string;
+    v6bind: string;
+    enabled: boolean;
+}
+
+interface ConfigPortProps extends ConfigGenericProps {
+    schema: ConfigItemPort;
+}
+
+interface ConfigPortState extends ConfigGenericState {
+    _value: string;
+    oldValue: string | null;
+    ports: Port[];
+}
+
+class ConfigPort extends ConfigGeneric<ConfigPortProps, ConfigPortState> {
+    private updateTimeout?: ReturnType<typeof setTimeout>;
+
+    async componentDidMount(): Promise<void> {
+        super.componentDidMount();
+        let _value = ConfigGeneric.getValue(this.props.data, this.props.attr);
+        if (_value === null || _value === undefined) {
+            _value = '';
+        }
+        this.setState({ _value: _value.toString(), oldValue: _value.toString() });
+
+        // read all instances
+        const instances: ioBroker.InstanceObject[] = await this.props.socket.getAdapterInstances();
+
+        const ownId = `system.adapter.${this.props.adapterName}.${this.props.instance}`;
+        const instanceObj: ioBroker.InstanceObject = await this.props.socket.getObject(ownId) as ioBroker.InstanceObject;
+        const ownHostname = instanceObj?.common.host;
+
+        const ports: Port[] = [];
+        instances
+            .forEach(instance => {
+                // ignore own instance and instances on another host
+                if (!instance || instance._id === ownId || instance.common.host !== ownHostname) {
+                    return;
+                }
+                // check port only if bind attribute is present too
+                if (!instance.native?.bind) {
+                    return;
+                }
+
+                // if let's encrypt is enabled and update is enabled, then add port to check
+                if (instance?.native &&
+                    instance.native.secure &&
+                    instance.native.leEnabled &&
+                    instance.native.leUpdate
+                ) {
+                    const port = parseInt(instance.native.leCheckPort || instance.native.lePort, 10);
+                    port && ports.push({
+                        name: `${instance._id.replace('system.adapter.', '')} (LE)`,
+                        port,
+                        v6bind: instance.native.bind.includes(':') ? instance.native.bind : instance.native.v6bind,
+                        bind: instance.native.bind,
+                        enabled: !!instance.common?.enabled,
+                    });
+                }
+
+                const port = parseInt(instance?.native?.port, 10);
+                if (port) {
+                    ports.push({
+                        name: instance._id.replace('system.adapter.', ''),
+                        bind: instance.native.bind,
+                        v6bind: instance.native.bind.includes(':') ? instance.native.bind : instance.native.v6bind,
+                        port,
+                        enabled: !!instance.common?.enabled,
+                    });
+                }
+            });
+        this.setState({ ports });
+    }
+
+    static getDerivedStateFromProps(props: ConfigPortProps, state: ConfigPortState) {
+        const _value = ConfigGeneric.getValue(props.data, props.attr);
+        if (_value === null || _value === undefined ||
+            state.oldValue === null || state.oldValue === undefined ||
+            (_value.toString() !== parseInt(state._value, 10).toString() &&
+             _value.toString() !== state.oldValue.toString())
+        ) {
+            return { _value };
+        }
+
+        return null;
+    }
+
+    checkValue(value: string): string | null {
+        if (value === null || value === undefined) {
+            return null;
+        }
+
+        const min = this.props.schema.min === undefined ? 20 : this.props.schema.min;
+        const max = this.props.schema.max || 0xFFFF;
+
+        value = value.toString().trim();
+        const f = value === '' ? 0 : parseInt(value, 10);
+
+        if (value !== '' && Number.isNaN(f)) {
+            return 'ra_Not a number';
+        }
+
+        // eslint-disable-next-line no-restricted-properties
+        if (value !== '' && window.isFinite(Number(value))) {
+            if (f < min) {
+                return 'ra_Too small';
+            }
+            if (f > max) {
+                return 'ra_Too big';
+            }
+            if (value === '' || value === '-' || Number.isNaN(f)) {
+                return 'ra_Not a number';
+            }
+
+            return null;
+        }
+
+        return 'ra_Not a number';
+    }
+
+    renderItem(error: unknown, disabled: boolean): React.JSX.Element {
+        if (this.state.oldValue !== null && this.state.oldValue !== undefined) {
+            this.updateTimeout && clearTimeout(this.updateTimeout);
+            this.updateTimeout = setTimeout(() => {
+                this.updateTimeout = undefined;
+                this.setState({ oldValue: null });
+            }, 30);
+        } else if (this.updateTimeout) {
+            clearTimeout(this.updateTimeout);
+            this.updateTimeout = undefined;
+        }
+
+        const min = this.props.schema.min === undefined ? 20 : this.props.schema.min;
+        const max = this.props.schema.max || 0xFFFF;
+
+        let warning;
+        if (this.state.ports) {
+            const num = parseInt(this.state._value, 10);
+
+            if (num) {
+                // filter ports only with the same bind address
+                // todo: IPv6 (v6bind or '::/0')
+                const ports = this.state.ports.filter(item => !this.props.data.bind ||
+                    this.props.data.bind === item.bind ||
+                    this.props.data.bind === '0.0.0.0' ||
+                    item.bind === '0.0.0.0');
+
+                let idx = ports.findIndex(item => item.port === num && item.enabled);
+                if (idx !== -1) {
+                    error = I18n.t('ra_Port is already used by %s', this.state.ports[idx].name);
+                } else {
+                    idx = ports.findIndex(item => item.port === num && !item.enabled);
+                    if (idx !== -1) {
+                        warning = true;
+                        error = I18n.t('ra_Port could be used by %s', this.state.ports[idx].name);
+                    }
+                }
+            }
+        }
+
+        if (!error && this.state._value !== null && this.state._value !== undefined) {
+            error = this.checkValue(this.state._value);
+            if (typeof error === 'string') {
+                error = I18n.t(error);
+            }
+        }
+
+        return <TextField
+            variant="standard"
+            type="number"
+            fullWidth
+            inputProps={{
+                min,
+                max,
+                readOnly: this.props.schema.readOnly || false,
+            }}
+            value={this.state._value === null || this.state._value === undefined ? '' : this.state._value}
+            error={!!error}
+            disabled={!!disabled}
+            className={warning ? this.props.classes.warning : ''}
+            onChange={e => {
+                const _value = Number(e.target.value.toString().replace(/[^0-9]/g, '')).toString();
+                const _error = this.checkValue(_value);
+                if (_error) {
+                    this.onError(this.props.attr, I18n.t(_error));
+                } else {
+                    this.onError(this.props.attr); // clear error
+                }
+
+                this.setState({ _value, oldValue: this.state._value }, () => {
+                    if (_value.trim() === parseInt(_value, 10).toString()) {
+                        this.onChange(this.props.attr, parseInt(_value, 10) || 0);
+                    }
+                });
+            }}
+            placeholder={this.getText(this.props.schema.placeholder)}
+            label={this.getText(this.props.schema.label)}
+            helperText={error && typeof error === 'string' ? error : this.renderHelp(this.props.schema.help, this.props.schema.helpLink, this.props.schema.noTranslation)}
+        />;
+    }
+}
+
+export default withStyles(styles)(ConfigPort);

package/src/JsonConfigComponent/ConfigRoom.jsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@mui/styles';
+
+import {
+    InputLabel,
+    MenuItem,
+    FormHelperText,
+    FormControl,
+    Select,
+} from '@mui/material';
+
+import { TextWithIcon, I18n } from '@iobroker/adapter-react-v5';
+
+import ConfigGeneric from './ConfigGeneric';
+
+const styles = () => ({
+    fullWidth: {
+        width: '100%',
+    },
+});
+
+class ConfigFunc extends ConfigGeneric {
+    componentDidMount() {
+        super.componentDidMount();
+        const value = ConfigGeneric.getValue(this.props.data, this.props.attr);
+
+        this.props.socket.getEnums('rooms')
+            .then(enums => {
+                const selectOptions = Object.keys(enums)
+                    .map(id => ({
+                        value: this.props.schema.short ? id.replace('enum.rooms.', '') : id,
+                        label: this.getText(enums[id].common.name),
+                        obj: enums[id],
+                    }));
+
+                if (this.props.schema.allowDeactivate !== false) {
+                    selectOptions.unshift({ label: I18n.t(ConfigGeneric.NONE_LABEL), value: ConfigGeneric.NONE_VALUE });
+                }
+
+                this.setState({ value, selectOptions });
+            });
+    }
+
+    renderItem(error, disabled /* , defaultValue */) {
+        if (!this.state.selectOptions) {
+            return null;
+        }
+
+        const item = this.state.selectOptions.find(it => it.value === this.state.value);
+
+        return <FormControl
+            variant="standard"
+            className={this.props.classes.fullWidth}
+        >
+            {this.props.schema.label ? <InputLabel>{this.getText(this.props.schema.label)}</InputLabel> : null}
+            <Select
+                variant="standard"
+                error={!!error}
+                disabled={!!disabled}
+                value={this.state.value || '_'}
+                renderValue={() => (item ? (item.obj ? <TextWithIcon value={item.obj} themeType={this.props.themeType} lang={I18n.getLanguage()} /> : item.label) : '')}
+                onChange={e => {
+                    this.setState({ value: e.target.value === '_' ? '' : e.target.value }, () =>
+                        this.onChange(this.props.attr, this.state.value));
+                }}
+            >
+                {this.state.selectOptions.map(it =>
+                    <MenuItem key={it.value} value={it.value} style={it.value === ConfigGeneric.DIFFERENT_VALUE ? { opacity: 0.5 } : {}}>
+                        {it.obj ? <TextWithIcon value={it.obj} themeType={this.props.themeType} lang={I18n.getLanguage()} /> : it.label}
+                    </MenuItem>)}
+            </Select>
+            {this.props.schema.help ? <FormHelperText>{this.renderHelp(this.props.schema.help, this.props.schema.helpLink, this.props.schema.noTranslation)}</FormHelperText> : null}
+        </FormControl>;
+    }
+}
+
+ConfigFunc.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,
+};
+
+export default withStyles(styles)(ConfigFunc);

package/src/JsonConfigComponent/ConfigSelect.jsx

@@ -0,0 +1,124 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@mui/styles';
+
+import  {
+    InputLabel,
+    FormHelperText,
+    FormControl,
+    Select,
+    MenuItem,
+    ListSubheader,
+} from '@mui/material';
+
+import { Utils, I18n } from '@iobroker/adapter-react-v5';
+
+import ConfigGeneric from './ConfigGeneric';
+
+const styles = () => ({
+    fullWidth: {
+        width: '100%',
+    },
+    noMargin: {
+        '&>div': {
+            marginTop: 0,
+        },
+    },
+});
+
+class ConfigSelect extends ConfigGeneric {
+    componentDidMount() {
+        super.componentDidMount();
+        const value = ConfigGeneric.getValue(this.props.data, this.props.attr);
+
+        const selectOptions = [];
+
+        (this.props.schema.options || []).forEach(item => {
+            // if optgroup
+            if (Array.isArray(item.items)) {
+                selectOptions.push({ label: item.label, value: item.value, group: true });
+                item.items = item.items.forEach(it => selectOptions.push(it));
+                return;
+            }
+
+            selectOptions.push(item);
+        });
+
+        // if __different
+        if (Array.isArray(value)) {
+            this.initialValue = [...value];
+            selectOptions.unshift({ label: I18n.t(ConfigGeneric.DIFFERENT_LABEL), value: ConfigGeneric.DIFFERENT_VALUE });
+            this.setState({ value: ConfigGeneric.DIFFERENT_VALUE, selectOptions });
+        } else {
+            this.setState({ value, selectOptions });
+        }
+    }
+
+    renderItem(error, disabled /* , defaultValue */) {
+        if (!this.state.selectOptions) {
+            return null;
+        }
+
+        const selectOptions = (this.state.selectOptions || []).filter(item => {
+            // if optgroup or no hidden function
+            if (!item.hidden) {
+                return true;
+            }
+            if (this.props.custom) {
+                return !this.executeCustom(item.hidden, this.props.data, this.props.customObj, this.props.instanceObj, this.props.arrayIndex, this.props.globalData);
+            }
+            return !this.execute(item.hidden, this.props.schema.default, this.props.data, this.props.arrayIndex, this.props.globalData);
+        });
+
+        // eslint-disable-next-line
+        const item = selectOptions.find(it => it.value == this.state.value); // let "==" be and not ===
+
+        return <FormControl
+            variant="standard"
+            className={Utils.clsx(this.props.classes.fullWidth, this.props.table !== undefined && this.props.classes.noMargin)}
+            id={`jsonSelect_${this.props.schema.attr}_${this.props.index || this.props.index === 0 ? this.props.index : ''}`}
+        >
+            {this.props.schema.label ? <InputLabel>{this.getText(this.props.schema.label)}</InputLabel> : null}
+            <Select
+                variant="standard"
+                error={!!error}
+                disabled={!!disabled}
+                value={this.state.value || '_'}
+                renderValue={() => this.getText(item?.label, this.props.schema.noTranslation)}
+                onChange={e => {
+                    this.setState({ value: e.target.value === '_' ? '' : e.target.value }, () => {
+                        if (this.state.value === ConfigGeneric.DIFFERENT_VALUE) {
+                            this.onChange(this.props.attr, this.initialValue);
+                        } else {
+                            this.onChange(this.props.attr, this.state.value);
+                        }
+                    });
+                }}
+            >
+                {selectOptions.map((it, i) => {
+                    if (it.group) {
+                        return <ListSubheader key={i}>{this.getText(it.label, this.props.schema.noTranslation)}</ListSubheader>;
+                    }
+                    return <MenuItem key={i} value={it.value} style={it.value === ConfigGeneric.DIFFERENT_VALUE ? { opacity: 0.5 } : {}}>
+                        {this.getText(it.label, this.props.schema.noTranslation)}
+                    </MenuItem>;
+                })}
+            </Select>
+            {this.props.schema.help ? <FormHelperText>{this.renderHelp(this.props.schema.help, this.props.schema.helpLink, this.props.schema.noTranslation)}</FormHelperText> : null}
+        </FormControl>;
+    }
+}
+
+ConfigSelect.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,
+};
+
+export default withStyles(styles)(ConfigSelect);

package/src/JsonConfigComponent/ConfigSelectSendTo.tsx

@@ -0,0 +1,251 @@
+import React from 'react';
+import { withStyles } from '@mui/styles';
+
+import {
+    InputLabel,
+    MenuItem,
+    FormHelperText,
+    FormControl,
+    Select,
+    TextField,
+    CircularProgress,
+    ListItemText,
+    Checkbox,
+    Chip,
+    Box, InputAdornment, IconButton,
+} from '@mui/material';
+
+import {
+    Close as CloseIcon,
+} from '@mui/icons-material';
+
+import { I18n } from '@iobroker/adapter-react-v5';
+
+import type { ConfigItemSelectSendTo } from '#JC/types';
+import ConfigGeneric, { type ConfigGenericProps, type ConfigGenericState } from './ConfigGeneric';
+
+const styles: Record<string, any> = {
+    fullWidth: {
+        width: '100%',
+    },
+    menuPaper: {
+        maxHeight: 800,
+    },
+};
+
+/*
+to use this option, your adapter must implement listUart message
+
+adapter.on('message', obj => {
+   if (obj) {
+       switch (obj.command) {
+           case 'command':
+               if (obj.callback) {
+                   try {
+                       const serialport = require('serialport');
+                       if (serialport) {
+                           // read all found serial ports
+                           serialport.list()
+                               .then(ports => {
+                                   adapter.log.info('List of port: ' + JSON.stringify(ports));
+                                   adapter.sendTo(obj.from, obj.command, ports.map(item =>
+                                        ({label: item.path, value: item.path})), obj.callback);
+                               })
+                               .catch(e => {
+                                   adapter.sendTo(obj.from, obj.command, [], obj.callback);
+                                   adapter.log.error(e)
+                               });
+                       } else {
+                           adapter.log.warn('Module serialport is not available');
+                           adapter.sendTo(obj.from, obj.command, [{label: 'Not available', value: ''}], obj.callback);
+                       }
+                   } catch (e) {
+                       adapter.sendTo(obj.from, obj.command, [{label: 'Not available', value: ''}], obj.callback);
+                   }
+               }
+
+               break;
+       }
+   }
+});
+ */
+
+interface ConfigSelectSendToProps extends ConfigGenericProps {
+    schema: ConfigItemSelectSendTo;
+}
+
+interface ConfigSelectSendToState extends ConfigGenericState {
+    list?: { label: string; value: string, hidden?: boolean }[];
+    context?: string;
+}
+
+class ConfigSelectSendTo extends ConfigGeneric<ConfigSelectSendToProps, ConfigSelectSendToState> {
+    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(list =>
+                    this.setState({ list, context: this.getContext() }));
+        } else {
+            const value = ConfigGeneric.getValue(this.props.data, this.props.attr);
+
+            this.setState({ value });
+        }
+    }
+
+    getContext(): string {
+        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);
+    }
+
+    _getValue() {
+        let value = this.state.value === null || this.state.value === undefined ? ConfigGeneric.getValue(this.props.data, this.props.attr) : this.state.value;
+
+        if (this.props.schema.multiple) {
+            if (typeof value === 'string') {
+                value = [value];
+            } else if (value === null || value === undefined) {
+                value = [];
+            }
+        }
+
+        return value;
+    }
+
+    renderItem(error: unknown, disabled: boolean /* , defaultValue */) {
+        if (this.props.alive) {
+            const context = this.getContext();
+            if (context !== this.state.context) {
+                setTimeout(() => this.askInstance(), 300);
+            }
+        }
+
+        const value = this._getValue();
+
+        if (!this.props.alive) {
+            if (this.props.schema.multiple || this.props.schema.manual === false) {
+                return I18n.t('ra_Cannot retrieve options, as instance is offline');
+            }
+            return <TextField
+                variant="standard"
+                fullWidth
+                value={value}
+                error={!!error}
+                disabled={!!disabled}
+                onChange={e => {
+                    const value_ = e.target.value;
+                    this.setState({ value: value_ }, () =>
+                        this.onChange(this.props.attr, (value_ || '').trim()));
+                }}
+                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)}
+                InputProps={{
+                    endAdornment: this.state.value && !this.props.schema.noClearButton ? <InputAdornment position="end">
+                        <IconButton
+                            size="small"
+                            onClick={() => this.setState({ value: '' }, () =>
+                                this.onChange(this.props.attr, ''))}
+                        >
+                            <CloseIcon />
+                        </IconButton>
+                    </InputAdornment> : null,
+                }}
+            />;
+        }
+        if (!this.state.list) {
+            return <CircularProgress size="small" />;
+        }
+        const selectOptions = this.state.list
+            .filter(item => {
+                if (!item.hidden) {
+                    return true;
+                }
+                if (this.props.custom) {
+                    return !this.executeCustom(item.hidden, this.props.data, this.props.customObj, this.props.instanceObj, this.props.arrayIndex, this.props.globalData);
+                }
+                return !this.execute(item.hidden, this.props.schema.default, this.props.data, this.props.arrayIndex, this.props.globalData);
+            });
+
+        const item = selectOptions.find(it => it.value === value);
+
+        return <FormControl variant="standard" className={this.props.classes.fullWidth}>
+            {this.props.schema.label ? <InputLabel>{this.getText(this.props.schema.label)}</InputLabel> : null}
+            <Select
+                variant="standard"
+                error={!!error}
+                multiple={this.props.schema.multiple}
+                disabled={!!disabled}
+                value={value}
+                MenuProps={this.props.schema.multiple ? { classes: { paper: this.props.classes.menuPaper } } : undefined}
+                renderValue={val =>
+                    (this.props.schema.multiple ?
+                        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
+                            {val.map((v: string) => {
+                                const it = selectOptions.find(_item => _item.value === v);
+                                if (it || this.props.schema.showAllValues !== false) {
+                                    const label = it?.label || v;
+                                    return <Chip
+                                        key={v}
+                                        label={label}
+                                    />;
+                                }
+                                return null;
+                            })}
+                        </Box>
+                        :
+                        (item?.label || val))}
+                onChange={e => {
+                    this.onChange(this.props.attr, e.target.value);
+                }}
+            >
+                {selectOptions.map((it, i) =>
+                    <MenuItem key={i} value={it.value}>
+                        { this.props.schema.multiple ? <Checkbox
+                            checked={value.includes(it.value)}
+                            onClick={() => {
+                                const _value = JSON.parse(JSON.stringify(this._getValue()));
+                                const pos = value.indexOf(it.value);
+                                if (pos !== -1) {
+                                    _value.splice(pos, 1);
+                                } else {
+                                    _value.push(it.value);
+                                    _value.sort();
+                                }
+                                this.setState({ value: _value }, () => this.onChange(this.props.attr, _value));
+                            }}
+                        /> : null }
+                        <ListItemText primary={it.label} />
+                    </MenuItem>)}
+            </Select>
+            {this.props.schema.help ? <FormHelperText>{this.renderHelp(this.props.schema.help, this.props.schema.helpLink, this.props.schema.noTranslation)}</FormHelperText> : null}
+        </FormControl>;
+    }
+}
+
+export default withStyles(styles)(ConfigSelectSendTo);