@iobroker/json-config 6.17.6 → 6.17.12

package/src/JsonConfigComponent/ConfigIP.jsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@mui/styles';
+
+import {
+    InputLabel,
+    TextField,
+    FormHelperText,
+    MenuItem,
+    FormControl,
+    Select,
+} from '@mui/material';
+
+import { I18n } from '@iobroker/adapter-react-v5';
+
+import ConfigGeneric from './ConfigGeneric';
+
+const styles = () => ({
+    fullWidth: {
+        width: '100%',
+    },
+});
+
+class ConfigIP extends ConfigGeneric {
+    componentDidMount() {
+        super.componentDidMount();
+        this.props.socket.getHostByIp(this.props.common.host)
+            .then(ips => {
+                // [{name, address, family}]
+                if (!this.props.schema.listenOnAllPorts) {
+                    ips = ips.filter(item => item.address !== '0.0.0.0' && item.address !== '::');
+                }
+                if (this.props.schema.onlyIp4) {
+                    ips = ips.filter(item => item.family === 'ipv4');
+                } else if (this.props.schema.onlyIp6) {
+                    ips = ips.filter(item => item.family === 'ipv6');
+                }
+                if (this.props.schema.noInternal) {
+                    ips = ips.filter(item => !item.internal);
+                }
+                ips.forEach(item => {
+                    if (item.address === '0.0.0.0') {
+                        item.name = `[IPv4] 0.0.0.0 - ${I18n.t('ra_Listen on all IPs')}`;
+                    } else if (item.address === '::') {
+                        item.name = `[IPv6] :: - ${I18n.t('ra_Listen on all IPs')}`;
+                    }
+                });
+                this.setState({ ips });
+            });
+    }
+
+    renderItem(error, disabled /* , defaultValue */) {
+        const value = ConfigGeneric.getValue(this.props.data, this.props.attr);
+        const item = this.state.ips?.find(it => it.address === value);
+
+        return <FormControl className={this.props.classes.fullWidth} variant="standard">
+            {this.state.ips && this.props.schema.label ? <InputLabel>{this.getText(this.props.schema.label)}</InputLabel> : null}
+            {!this.state.ips ?
+                <TextField
+                    fullWidth
+                    variant="standard"
+                    error={!!error}
+                    disabled={!!disabled}
+                    value={value}
+                    onChange={e => this.onChange(this.props.attr, e.target.value)}
+                    label={this.getText(this.props.schema.label)}
+                /> :
+                <Select
+                    variant="standard"
+                    error={!!error}
+                    disabled={!!disabled}
+                    value={value}
+                    renderValue={val => item?.name || val}
+                    onChange={e => this.onChange(this.props.attr, e.target.value)}
+                >
+                    {this.state.ips?.map((it, i) =>
+                        <MenuItem key={i} value={it.address}>{it.name}</MenuItem>)}
+                </Select>}
+            {this.props.schema.help ? <FormHelperText>{this.renderHelp(this.props.schema.help, this.props.schema.helpLink, this.props.schema.noTranslation)}</FormHelperText> : null}
+        </FormControl>;
+    }
+}
+
+ConfigIP.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)(ConfigIP);

package/src/JsonConfigComponent/ConfigImageSendTo.jsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@mui/styles';
+
+import ConfigGeneric from './ConfigGeneric';
+
+const styles = () => ({
+    fullWidth: {
+        width: '100%',
+    },
+});
+
+class ConfigImageSendTo extends ConfigGeneric {
+    componentDidMount() {
+        super.componentDidMount();
+
+        this.askInstance();
+    }
+
+    askInstance() {
+        if (this.props.alive) {
+            let data = this.props.schema.data;
+            if (data === undefined && this.props.schema.jsonData) {
+                data = this.getPattern(this.props.schema.jsonData);
+                try {
+                    data = JSON.parse(data);
+                } catch (e) {
+                    console.error(`Cannot parse json data: ${data}`);
+                }
+            }
+
+            if (data === undefined) {
+                data = null;
+            }
+
+            this.props.socket.sendTo(`${this.props.adapterName}.${this.props.instance}`, this.props.schema.command || 'send', data)
+                .then(image => this.setState({ image: image || '', context: this.getContext() }));
+        }
+    }
+
+    getContext() {
+        const context = {};
+        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.image === undefined) {
+            return null;
+        }
+
+        if (this.props.alive) {
+            const context = this.getContext();
+            if (context !== this.state.context) {
+                setTimeout(() => this.askInstance(), 300);
+            }
+        }
+
+        return <img
+            className={this.props.classes.fullWidth}
+            alt="dynamic content"
+            src={this.state.image}
+            style={{ width: this.props.schema.width, height: this.props.schema.height }}
+        />;
+    }
+}
+
+ConfigImageSendTo.propTypes = {
+    socket: PropTypes.object.isRequired,
+    data: PropTypes.object.isRequired,
+    schema: PropTypes.object,
+    adapterName: PropTypes.string,
+    instance: PropTypes.number,
+};
+
+export default withStyles(styles)(ConfigImageSendTo);

package/src/JsonConfigComponent/ConfigImageUpload.jsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@mui/styles';
+
+import {
+    InputLabel,
+    FormHelperText,
+    FormControl,
+} from '@mui/material';
+
+import { UploadImage, I18n } from '@iobroker/adapter-react-v5';
+
+import ConfigGeneric from './ConfigGeneric';
+
+const styles = () => ({
+    fullWidth: {
+        width: '100%',
+    },
+    image: {
+        width: 100,
+    },
+});
+
+class ConfigImageUpload extends ConfigGeneric {
+    constructor(props) {
+        super(props);
+        this.index = Date.now();
+    }
+
+    async componentDidMount() {
+        super.componentDidMount();
+
+        if (this.props.schema.base64) {
+            const value = ConfigGeneric.getValue(this.props.data, this.props.attr);
+            this.setState({ value });
+        } else {
+            this.props.socket.fileExists(`${this.props.adapterName}.${this.props.instance}`, this.props.attr)
+                .then(exist => exist && this.loadImage());
+        }
+    }
+
+    _getUrl(update) {
+        if (update) {
+            this.index = Date.now();
+        }
+        let url = `files/${this.props.adapterName}.${this.props.instance}/${this.props.attr}?t=${this.index}`;
+        if (window.location.port === '3000') {
+            url = `${window.location.protocol}//${window.location.hostname}:8081/${url}`;
+        }
+
+        return url;
+    }
+
+    loadImage() {
+        fetch(this._getUrl())
+            .then(res => res.blob())
+            .then(blob => {
+                const reader = new FileReader();
+                reader.onload = () => {
+                    this.setState({ value: reader.result });
+                };
+                reader.readAsDataURL(blob);
+            })
+            .catch(e => console.error(e));
+    }
+
+    renderItem(error, disabled /* , defaultValue */) {
+        // eslint-disable-next-line
+        return <FormControl className={this.props.classes.fullWidth} variant="standard">
+            {this.props.schema.label ? <InputLabel shrink>{this.getText(this.props.schema.label)}</InputLabel> : null}
+            <UploadImage
+                error={!!error}
+                disabled={disabled}
+                accept={this.props.schema.accept}
+                crop={this.props.schema.crop}
+                maxSize={this.props.schema.maxSize || 256 * 1024}
+                icon={this.state.value || undefined}
+                removeIconFunc={() => this.setState({ value: null }, () => {
+                    if (this.props.schema.base64) {
+                        this.onChange(this.props.attr, this.state.value);
+                    } else {
+                        // delete file to /instance/attr
+                        this.props.socket.deleteFile(`${this.props.adapterName}.${this.props.instance}`, this.props.attr);
+                    }
+                })}
+                onChange={base64 => this.setState({ value: base64 }, () => {
+                    if (this.props.schema.base64) {
+                        this.onChange(this.props.attr, this.state.value);
+                    } else if (base64.startsWith('data')) {
+                        base64 = base64.split(',')[1];
+                    }
+                    // upload file to /instance/attr
+                    this.props.socket.writeFile64(`${this.props.adapterName}.${this.props.instance}`, this.props.attr, base64);
+                })}
+                t={I18n.t}
+            />
+            {this.props.schema.help ? <FormHelperText>{this.renderHelp(this.props.schema.help, this.props.schema.helpLink, this.props.schema.noTranslation)}</FormHelperText> : null}
+        </FormControl>;
+    }
+}
+
+ConfigImageUpload.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)(ConfigImageUpload);

package/src/JsonConfigComponent/ConfigInstanceSelect.jsx

@@ -0,0 +1,172 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@mui/styles';
+
+import {
+    InputLabel,
+    MenuItem,
+    FormHelperText,
+    FormControl,
+    Select,
+} from '@mui/material';
+
+import { I18n } from '@iobroker/adapter-react-v5';
+import ConfigGeneric from './ConfigGeneric';
+
+const styles = () => ({
+    fullWidth: {
+        width: '100%',
+    },
+    icon: {
+        width: 20,
+        height: 20,
+        marginRight: 4,
+    },
+});
+
+class ConfigInstanceSelect extends ConfigGeneric {
+    async componentDidMount() {
+        super.componentDidMount();
+        const value = ConfigGeneric.getValue(this.props.data, this.props.attr);
+
+        let adapter = this.props.schema.adapter;
+        if (adapter === '_dataSources') {
+            adapter = undefined;
+        }
+
+        this.props.socket.getAdapterInstances(adapter, true)
+            .then(async instances => {
+                if (this.props.schema.adapter === '_dataSources') {
+                    // get only "data-sources", like history, sql, influx
+                    instances = instances.filter(instance => instance?.common?.getHistory);
+                } else if (this.props.schema.adapter) {
+                    instances = instances.filter(instance => instance?._id.startsWith(`system.adapter.${this.props.schema.adapter}.`));
+                } else if (this.props.schema.adapters && Array.isArray(this.props.schema.adapters)) {
+                    instances = instances.filter(instance => this.props.schema.adapters.includes(instance?.common?.name));
+                }
+
+                if (this.props.schema.onlyEnabled) {
+                    instances = instances.filter(instance => instance?.common?.enabled);
+                }
+
+                const selectOptions = instances.map(instance => ({
+                    value: this.props.schema.long ? instance._id :
+                        (this.props.schema.short ? instance._id.split('.').pop() : instance._id.replace(/^system\.adapter\./, '')),
+                    label: `${instance.common.name} [${instance._id.replace(/^system\.adapter\./, '')}]`,
+                    icon: `adapter/${instance.common.name}/${instance.common.icon}`,
+                }));
+
+                selectOptions.sort((a, b) => {
+                    if (a.value > b.value) {
+                        return 1;
+                    } if (a.value < b.value) {
+                        return -1;
+                    }
+                    return 0;
+                });
+
+                if (this.props.schema.allowDeactivate !== false) {
+                    selectOptions.unshift({ label: I18n.t(ConfigGeneric.NONE_LABEL), value: ConfigGeneric.NONE_VALUE });
+                }
+                if (this.props.schema.all) {
+                    selectOptions.unshift({ label: I18n.t('sch_all'), value: '*' });
+                }
+
+                this.setState({ value: value || '', selectOptions });
+
+                await this.props.socket.subscribeObject(`system.adapter.${adapter ? `${adapter}.` : ''}*`, this.onInstancesUpdate);
+            });
+    }
+
+    componentWillUnmount() {
+        this.props.socket.unsubscribeObject('system.adapter.*', this.onInstancesUpdate)
+            .then(() => {});
+        super.componentWillUnmount();
+    }
+
+    onInstancesUpdate = (id, obj) => {
+        if (!id.match(/^system\.adapter\.[-_a-z\d]+\.\d+$/)) {
+            return;
+        }
+        const _id = this.props.schema.long ? id : (this.props.schema.short ? id.split('.').pop() : id.replace(/^system\.adapter\./, ''));
+        const index = this.state.selectOptions.findIndex(item => item.value === _id);
+        if (!obj) {
+            // deleted
+            if (index !== -1) {
+                const selectOptions = JSON.parse(JSON.stringify(this.state.selectOptions));
+
+                const newState = {};
+                if (this.state.value === selectOptions[index].value) {
+                    newState.value = ConfigGeneric.NONE_VALUE;
+                }
+                selectOptions.splice(index, 1);
+                newState.selectOptions = selectOptions;
+
+                this.setState(newState);
+            }
+        } else {
+            if (this.props.schema.adapter === '_dataSources' && (!obj.common || !obj.common.getHistory)) {
+                return;
+            }
+
+            if (index === -1) {
+                const selectOptions = JSON.parse(JSON.stringify(this.state.selectOptions));
+                selectOptions.push({
+                    value: this.props.schema.long ? obj._id :
+                        (this.props.schema.short ? obj._id.split('.').pop() : obj._id.replace(/^system\.adapter\./, '')),
+                    label: `${obj.common.name} [${obj._id.replace(/^system\.adapter\./, '')}]`,
+                    icon: `adapter/${obj.common.name}/${obj.common.icon}`,
+                });
+                selectOptions.sort((a, b) => (a.label > b.label ? 1 : (a.label < b.label ? -1 : 0)));
+                this.setState({ 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 className={this.props.classes.fullWidth} key={this.props.attr} variant="standard">
+            {this.props.schema.label ? <InputLabel shrink>{this.getText(this.props.schema.label)}</InputLabel> : null }
+            <Select
+                variant="standard"
+                error={!!error}
+                displayEmpty
+                disabled={!!disabled}
+                value={this.state.value}
+                renderValue={() => <span style={{ display: 'flex' }}>
+                    {item?.icon ? <img src={`./${item.icon}`} alt={item.value} className={this.props.classes.icon} /> : null}
+                    {this.getText(item?.label, true)}
+                </span>}
+                onChange={e =>
+                    this.setState({ 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.NONE_VALUE ? { opacity: 0.5 } : {}}>
+                        {it.icon ? <img src={`./${it.icon}`} alt={it.value} className={this.props.classes.icon} /> : null}
+                        {this.getText(it.label, true)}
+                    </MenuItem>)}
+            </Select>
+            {this.props.schema.help ? <FormHelperText>{this.renderHelp(this.props.schema.help, this.props.schema.helpLink, this.props.schema.noTranslation)}</FormHelperText> : null}
+        </FormControl>;
+    }
+}
+
+ConfigInstanceSelect.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)(ConfigInstanceSelect);

package/src/JsonConfigComponent/ConfigInterface.jsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@mui/styles';
+
+import {
+    InputLabel,
+    TextField,
+    FormHelperText,
+    MenuItem,
+    FormControl,
+    Select,
+} from '@mui/material';
+
+import ConfigGeneric from './ConfigGeneric';
+
+const styles = () => ({
+    fullWidth: {
+        width: '100%',
+    },
+    address: {
+        fontSize: 'smaller',
+        opacity: 0.5,
+        marginLeft: 8,
+    },
+});
+
+class ConfigInterface extends ConfigGeneric {
+    componentDidMount() {
+        super.componentDidMount();
+        this.props.socket.getObject(`system.host.${this.props.common.host}`)
+            .then(obj => {
+                const interfaces = [];
+                if (obj?.native?.hardware?.networkInterfaces) {
+                    const list = obj.native.hardware.networkInterfaces;
+                    Object.keys(list).forEach(inter => {
+                        if (this.props.schema.ignoreInternal && !list[inter].find(_ip => !_ip.internal)) {
+                            return;
+                        }
+                        if (this.props.schema.ignoreLoopback && list[inter].find(_ip => _ip.address === '127.0.0.1' || _ip.address === '::1')) {
+                            return;
+                        }
+
+                        // find ipv4 address
+                        let ip = list[inter].find(_ip => _ip.family === 'IPv4');
+                        ip = ip || list[inter].find(_ip => _ip.family === 'IPv6');
+                        interfaces.push({ value: inter, address: ip.address });
+                    });
+                }
+
+                this.setState({ interfaces });
+            })
+            .catch(e => window.alert(`Cannot read interfaces: ${e}`));
+    }
+
+    renderItem(error, disabled /* , defaultValue */) {
+        const value = ConfigGeneric.getValue(this.props.data, this.props.attr);
+        const item = this.state.interfaces?.find(it => it.value === value);
+
+        return <FormControl className={this.props.classes.fullWidth} variant="standard">
+            {this.state.interfaces?.length && this.props.schema.label ? <InputLabel>{this.getText(this.props.schema.label)}</InputLabel> : null}
+            {!this.state.interfaces?.length ?
+                <TextField
+                    fullWidth
+                    variant="standard"
+                    error={!!error}
+                    disabled={!!disabled}
+                    value={value}
+                    onChange={e => this.onChange(this.props.attr, e.target.value)}
+                    label={this.getText(this.props.schema.label)}
+                /> :
+                <Select
+                    variant="standard"
+                    error={!!error}
+                    disabled={!!disabled}
+                    value={value}
+                    renderValue={val => {
+                        if (item) {
+                            return <span>
+                                {item.value}
+                                <span className={this.props.classes.address}>{item.address}</span>
+                            </span>;
+                        }
+                        return val;
+                    }}
+                    onChange={e => this.onChange(this.props.attr, e.target.value)}
+                >
+                    {this.state.interfaces.map((it, i) =>
+                        <MenuItem key={i} value={it.value}>
+                            <span>
+                                {it.value}
+                                <span className={this.props.classes.address}>{it.address}</span>
+                            </span>
+                        </MenuItem>)}
+                </Select>}
+            {this.props.schema.help ? <FormHelperText>{this.renderHelp(this.props.schema.help, this.props.schema.helpLink, this.props.schema.noTranslation)}</FormHelperText> : null}
+        </FormControl>;
+    }
+}
+
+ConfigInterface.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)(ConfigInterface);

package/src/JsonConfigComponent/ConfigJsonEditor.jsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@mui/styles';
+
+import {
+    FormHelperText,
+    FormControl,
+    Button,
+} from '@mui/material';
+
+import { I18n } from '@iobroker/adapter-react-v5';
+import ConfigGeneric from './ConfigGeneric';
+import CustomModal from './wrapper/Components/CustomModal';
+import Editor from './wrapper/Components/Editor';
+
+const styles = () => ({
+    fullWidth: {
+        width: '100%',
+    },
+    flex: {
+        display: 'flex',
+    },
+    button: {
+        height: 48,
+        // marginLeft: 4,
+        minWidth: 48,
+    },
+    wrapper: {
+        width: 'calc(100vw - 40px)',
+        height: 'calc(100vh - 188px)',
+    },
+});
+
+class ConfigJsonEditor extends ConfigGeneric {
+    async componentDidMount() {
+        super.componentDidMount();
+        const { data, attr } = this.props;
+        const value = ConfigGeneric.getValue(data, attr) || {};
+        this.setState({ value, initialized: true });
+    }
+
+    renderItem(/* error, disabled, defaultValue */) {
+        if (!this.state.initialized) {
+            return null;
+        }
+
+        const {
+            classes, schema, data, attr,
+        } = this.props;
+        const { value, showSelectId } = this.state;
+
+        return <FormControl className={classes.fullWidth} variant="standard">
+            <div className={classes.flex}>
+                <Button
+                    color="grey"
+                    className={classes.button}
+                    size="small"
+                    variant="outlined"
+                    onClick={() => this.setState({ showSelectId: true })}
+                >
+                    {I18n.t('ra_JSON editor')}
+                </Button>
+            </div>
+            {showSelectId ? <CustomModal
+                title={this.getText(schema.label)}
+                open={showSelectId}
+                overflowHidden
+                onClose={() =>
+                    this.setState({ showSelectId: false, value: ConfigGeneric.getValue(data, attr) || {} })}
+                onApply={() => this.setState({ showSelectId: false }, () => this.onChange(attr, value))}
+            >
+                <div className={classes.wrapper}>
+                    <Editor
+                        value={typeof value === 'object' ? JSON.stringify(value) : value}
+                        onChange={newValue => this.setState({ value: newValue })}
+                        name="ConfigJsonEditor"
+                        themeType={this.props.themeType}
+                    />
+                </div>
+            </CustomModal> : null}
+            {schema.help ? <FormHelperText>
+                {this.renderHelp(
+                    this.props.schema.help,
+                    this.props.schema.helpLink,
+                    this.props.schema.noTranslation,
+                )}
+            </FormHelperText> : null}
+        </FormControl>;
+    }
+}
+
+ConfigJsonEditor.propTypes = {
+    socket: PropTypes.object.isRequired,
+    themeType: 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)(ConfigJsonEditor);