@iobroker/json-config 6.17.6 → 6.17.13

package/src/JsonConfigComponent/ConfigSendto.tsx

@@ -0,0 +1,340 @@
+import React from 'react';
+import { withStyles } from '@mui/styles';
+
+import { Button, CircularProgress } from '@mui/material';
+
+import {
+    Warning as IconWarning,
+    Error as IconError,
+    Info as IconInfo,
+} from '@mui/icons-material';
+
+import {
+    Confirm as DialogConfirm, Error  as DialogError, Message  as DialogMessage, I18n,
+} 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%',
+    },
+    icon: {
+        width: 24,
+        height: 24,
+        marginRight: 4,
+    },
+};
+
+function ip2int(ip: string) {
+    // eslint-disable-next-line no-bitwise
+    return ip.split('.').reduce((ipInt, octet) => (ipInt << 8) + parseInt(octet, 10), 0) >>> 0;
+}
+
+// copied from iobroker.admin/src-rx/src/Utils.js
+function findNetworkAddressOfHost(obj: Record<string, any>, localIp: string) {
+    const networkInterfaces = obj?.native?.hardware?.networkInterfaces;
+    if (!networkInterfaces) {
+        return null;
+    }
+
+    let hostIp: string | undefined;
+
+    // check ipv4 addresses
+    Object.keys(networkInterfaces).forEach(inter =>
+        networkInterfaces[inter].forEach((ip: Record<string, any>) => {
+            if (ip.internal) {
+                return;
+            }
+            if (localIp.includes(':') && ip.family !== 'IPv6') {
+                return;
+            }
+            if (localIp.includes('.') && !localIp.match(/[^.\d]/) && ip.family !== 'IPv4') {
+                return;
+            }
+            // if ip4 and not docker or wsl
+            if (ip.family === 'IPv4' && !ip.address.startsWith('172') && (localIp === '127.0.0.0' || localIp === 'localhost' || localIp.match(/[^.\d]/))) { // if DNS name
+                hostIp = ip.address;
+            } else if (!hostIp) {
+                if (ip.family === 'IPv4' && localIp.includes('.') &&
+                    // eslint-disable-next-line no-bitwise
+                    (ip2int(localIp) & ip2int(ip.netmask)) === (ip2int(ip.address) & ip2int(ip.netmask))) {
+                    hostIp = ip.address;
+                } else {
+                    hostIp = ip.address;
+                }
+            }
+        }));
+
+    // check ipv6 addresses
+    if (!hostIp) {
+        Object.keys(networkInterfaces).forEach(inter =>
+            networkInterfaces[inter].forEach((ip: Record<string, any>) => {
+                if (ip.internal) {
+                    return;
+                } if (localIp.includes(':') && ip.family !== 'IPv6') {
+                    return;
+                } if (localIp.includes('.') && !localIp.match(/[^.\d]/) && ip.family !== 'IPv4') {
+                    return;
+                }
+                if (ip.family === 'IPv6' && (localIp === '127.0.0.0' || localIp === 'localhost' || localIp.match(/[^.\d]/))) { // if DNS name
+                    hostIp = ip.address;
+                } else if (!hostIp) {
+                    if (ip.family === 'IPv4' && localIp.includes('.') &&
+                        // eslint-disable-next-line no-bitwise
+                        (ip2int(localIp) & ip2int(ip.netmask)) === (ip2int(ip.address) & ip2int(ip.netmask))) {
+                        hostIp = ip.address;
+                    } else {
+                        hostIp = ip.address;
+                    }
+                }
+            }));
+    }
+
+    if (!hostIp) {
+        Object.keys(networkInterfaces).forEach(inter => {
+            networkInterfaces[inter].forEach((ip: Record<string, any>) => {
+                if (ip.internal) {
+                    return;
+                } if (localIp.includes(':') && ip.family !== 'IPv6') {
+                    return;
+                } if (localIp.includes('.') && !localIp.match(/[^.\d]/) && ip.family !== 'IPv4') {
+                    return;
+                }
+                if (localIp === '127.0.0.0' || localIp === 'localhost' || localIp.match(/[^.\d]/)) { // if DNS name
+                    hostIp = ip.address;
+                } else {
+                    hostIp = ip.address;
+                }
+            });
+        });
+    }
+
+    if (!hostIp) {
+        Object.keys(networkInterfaces).forEach(inter => {
+            networkInterfaces[inter].forEach((ip: Record<string, any>) => {
+                if (ip.internal) {
+                    return;
+                }
+                hostIp = ip.address;
+            });
+        });
+    }
+
+    return hostIp;
+}
+
+interface ConfigSendToProps extends ConfigGenericProps {
+    schema: ConfigItemSendTo;
+}
+
+interface ConfigSendToState extends ConfigGenericState {
+    _error: string;
+    _message: string;
+    hostname: string;
+    running?: boolean;
+}
+
+class ConfigSendto extends ConfigGeneric<ConfigSendToProps, ConfigSendToState> {
+    async componentDidMount() {
+        super.componentDidMount();
+
+        let hostname = window.location.hostname;
+        if (this.props.schema.openUrl) {
+            // read admin host
+            const adminInstance = await this.props.socket.getCurrentInstance();
+            const instanceObj = await this.props.socket.getObject(`system.adapter.${adminInstance}` as ioBroker.ObjectIDs.Instance);
+
+            if (instanceObj) {
+                const hostObj = await this.props.socket.getObject(`system.host.${instanceObj?.common?.host}`);
+                if (hostObj) {
+                    const ip = findNetworkAddressOfHost(hostObj, window.location.hostname);
+                    if (ip) {
+                        hostname = `${ip}:${window.location.port}`;
+                    } else {
+                        console.warn(`Cannot find suitable IP in host ${instanceObj.common.host} for ${instanceObj._id}`);
+                        return;
+                    }
+                }
+            }
+        }
+
+        await new Promise<void>(resolve => { this.setState({ _error: '', _message: '', hostname }, resolve); });
+
+        if (this.props.schema.onLoaded) {
+            this._onClick();
+        }
+    }
+
+    renderErrorDialog() {
+        if (this.state._error) {
+            return <DialogError text={this.state._error} onClose={() => this.setState({ _error: '' })} />;
+        }
+        return null;
+    }
+
+    renderMessageDialog() {
+        if (this.state._message) {
+            return <DialogMessage text={this.state._message} onClose={() => this.setState({ _message: '' })} />;
+        }
+        return null;
+    }
+
+    _onClick() {
+        this.props.onCommandRunning(true);
+        this.setState({ running: true });
+
+        const _origin = `${window.location.protocol}//${window.location.host}${window.location.pathname.replace(/\/index\.html$/, '')}`;
+        const _originIp = `${window.location.protocol}//${this.state.hostname.split(':').length > 3 ? `[${this.state.hostname}]` : this.state.hostname}${window.location.pathname.replace(/\/index\.html$/, '')}`;
+
+        let data: Record<string, any> = this.props.schema.data;
+        if (data === undefined && this.props.schema.jsonData) {
+            const dataStr = this.getPattern(this.props.schema.jsonData, {
+                _origin,
+                _originIp,
+                ...this.props.data,
+            });
+
+            try {
+                data = JSON.parse(dataStr);
+            } catch (e) {
+                console.error(`Cannot parse json data: ${dataStr}`);
+            }
+        }
+        if (data === undefined) {
+            data = null;
+        }
+        if (this.props.schema.openUrl && !data) {
+            data = {
+                _origin,
+                _originIp,
+            };
+        }
+        let timeout: ReturnType<typeof setTimeout> | undefined;
+        if (this.props.schema.timeout) {
+            timeout = setTimeout(() => {
+                this.props.onCommandRunning(false);
+                this.setState({ _error: I18n.t('ra_Request timed out'), running: false });
+            }, parseInt(this.props.schema.timeout as any as string, 10) || 10000);
+        }
+
+        this.props.socket.sendTo(
+            `${this.props.adapterName}.${this.props.instance}`,
+            this.props.schema.command || 'send',
+            data,
+        )
+            .then(async (response: Record<string, any>) => {
+                if (timeout) {
+                    clearTimeout(timeout);
+                    timeout = undefined;
+                }
+                if (response?.error) {
+                    if (this.props.schema.error && this.props.schema.error[response.error]) {
+                        let error = this.getText(this.props.schema.error[response.error]);
+                        if (response.args) {
+                            response.args.forEach((arg: string) => error = error.replace('%s', arg));
+                        }
+                        this.setState({ _error: error });
+                    } else {
+                        this.setState({ _error: response.error ? I18n.t(response.error) : I18n.t('ra_Error') });
+                    }
+                } else {
+                    if (response?.reloadBrowser && this.props.schema.reloadBrowser) {
+                        window.location.reload();
+                    } else if (response?.openUrl && this.props.schema.openUrl) {
+                        window.open(response.openUrl, response.window || this.props.schema.window || '_blank');
+                    } else if (response?.result && this.props.schema.result && this.props.schema.result[response.result]) {
+                        let text = this.getText(this.props.schema.result[response.result]);
+                        if (response.args) {
+                            response.args.forEach((arg: string) => text = text.replace('%s', arg));
+                        }
+                        window.alert(text);
+                    }
+
+                    if (response?.native && this.props.schema.useNative) {
+                        for (const [attr, val] of Object.entries(response.native)) {
+                            await this.onChangeAsync(attr, val);
+                        }
+
+                        setTimeout(() => this.props.forceUpdate(Object.keys(response.native), this.props.data), 300);
+                    } else if (response?.result) {
+                        window.alert(typeof response.result === 'object' ? JSON.stringify(response.result) : response.result);
+                    } else {
+                        window.alert(I18n.t('ra_Ok'));
+                    }
+
+                    if (response?.saveConfig) {
+                        this.props.onChange(null, null, null, true);
+                    }
+                }
+            })
+            .catch((e: any) => {
+                if (this.props.schema.error && this.props.schema.error[e.toString()]) {
+                    this.setState({ _error: this.getText(this.props.schema.error[e.toString()]) });
+                } else {
+                    this.setState({ _error: I18n.t(e.toString()) || I18n.t('ra_Error') });
+                }
+            })
+            .then(() => {
+                this.props.onCommandRunning(false);
+                this.setState({ running: false });
+            });
+    }
+
+    renderConfirmDialog() {
+        if (!this.state.confirmDialog) {
+            return null;
+        }
+        const confirm = this.state.confirmData || this.props.schema.confirm;
+        let icon = null;
+        if (confirm.type === 'warning') {
+            icon = <IconWarning />;
+        } else if (confirm.type === 'error') {
+            icon = <IconError />;
+        } else if (confirm.type === 'info') {
+            icon = <IconInfo />;
+        }
+
+        return <DialogConfirm
+            title={this.getText(confirm.title) || I18n.t('ra_Please confirm')}
+            text={this.getText(confirm.text)}
+            ok={this.getText(confirm.ok) || I18n.t('ra_Ok')}
+            cancel={this.getText(confirm.cancel) || I18n.t('ra_Cancel')}
+            icon={icon || undefined}
+            onClose={isOk =>
+                this.setState({ confirmDialog: false }, () =>
+                    isOk && this._onClick())}
+        />;
+    }
+
+    renderItem(error: Error | undefined, disabled: boolean) {
+        const icon = this.getIcon();
+
+        return <div className={this.props.classes.fullWidth}>
+            <Button
+                variant={this.props.schema.variant || undefined}
+                // @ts-expect-error grey is valid color
+                color={this.props.schema.color || 'grey'}
+                className={this.props.classes.fullWidth}
+                disabled={disabled || !this.props.alive}
+                startIcon={icon}
+                title={this.props.alive ? this.getText(this.props.schema.title) || '' : I18n.t('ra_Instance is not alive')}
+                onClick={() => {
+                    if (this.props.schema.confirm) {
+                        this.setState({ confirmDialog: true });
+                    } else {
+                        this._onClick();
+                    }
+                }}
+            >
+                {this.props.schema.showProcess && this.state.running ? <CircularProgress size={20} style={{ marginRight: 8 }} /> : null}
+                {this.getText(this.props.schema.label, this.props.schema.noTranslation)}
+            </Button>
+            {this.renderErrorDialog()}
+            {this.renderMessageDialog()}
+        </div>;
+    }
+}
+
+export default withStyles(styles)(ConfigSendto);

package/src/JsonConfigComponent/ConfigSetState.jsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@mui/styles';
+
+import { Button } from '@mui/material';
+
+import {
+    Warning as IconWarning,
+    Error as IconError,
+    Info as IconInfo,
+} from '@mui/icons-material';
+
+import { Confirm as ConfirmDialog, Icon, I18n } from '@iobroker/adapter-react-v5';
+import ConfigGeneric from './ConfigGeneric';
+
+const styles = () => ({
+    fullWidth: {
+        width: '100%',
+    },
+    icon: {
+        width: 24,
+        height: 24,
+        marginRight: 4,
+    },
+});
+
+class ConfigSetState extends ConfigGeneric {
+    async _onClick() {
+        let val = this.props.schema.val;
+        if (typeof val === 'string' && val.includes('${')) {
+            val = this.getPattern(val);
+            const obj = await this.props.socket.getObject(this.props.schema.id);
+            if (obj?.common?.type === 'number') {
+                val = parseFloat(val);
+            } else if (obj?.common?.type === 'boolean') {
+                val = val === 'true' || val === true || val === '1' || val === 1;
+            }
+        }
+
+        const id = (this.props.schema.id || '').replace(/%INSTANCE%/g, this.props.instance);
+
+        try {
+            await this.props.socket.setState(id, { val, ack: !!this.props.schema.ack });
+            this.props.schema.okText && window.alert(this.getText(this.props.schema.okText));
+        } catch (e) {
+            if (this.props.schema.error && this.props.schema.error[e.toString()]) {
+                window.alert(this.getText(this.props.schema.error[e.toString()]));
+            } else {
+                window.alert(I18n.t(e.toString()) || I18n.t('ra_Error'));
+            }
+        }
+    }
+
+    renderConfirmDialog() {
+        if (!this.state.confirmDialog) {
+            return null;
+        }
+        const confirm = this.state.confirmData || this.props.schema.confirm;
+        let icon = null;
+        if (confirm.type === 'warning') {
+            icon = <IconWarning />;
+        } else if (confirm.type === 'error') {
+            icon = <IconError />;
+        } else if (confirm.type === 'info') {
+            icon = <IconInfo />;
+        }
+
+        return <ConfirmDialog
+            title={this.getText(confirm.title) || I18n.t('ra_Please confirm')}
+            text={this.getText(confirm.text)}
+            ok={this.getText(confirm.ok) || I18n.t('ra_Ok')}
+            cancel={this.getText(confirm.cancel) || I18n.t('ra_Cancel')}
+            icon={icon}
+            onClose={isOk =>
+                this.setState({ confirmDialog: false }, () =>
+                    isOk && this._onClick())}
+        />;
+    }
+
+    renderItem(error, disabled /* , defaultValue */) {
+        return <Button
+            variant={this.props.schema.variant || undefined}
+            color={this.props.schema.color || 'grey'}
+            className={this.props.classes.fullWidth}
+            disabled={disabled}
+            onClick={async () => {
+                if (this.props.schema.confirm) {
+                    this.setState({ confirmDialog: true });
+                } else {
+                    await this._onClick();
+                }
+            }}
+        >
+            {this.props.schema.icon ? <Icon src={this.props.schema.icon} className={this.props.classes.icon} /> : null}
+            {this.getText(this.props.schema.label, this.props.schema.noTranslation)}
+        </Button>;
+    }
+}
+
+ConfigSetState.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,
+    commandRunning: PropTypes.bool,
+    onCommandRunning: PropTypes.func,
+};
+
+export default withStyles(styles)(ConfigSetState);

package/src/JsonConfigComponent/ConfigSlider.jsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@mui/styles';
+
+import { Box, Typography, Slider } from '@mui/material';
+
+import ConfigGeneric from './ConfigGeneric';
+
+const styles = () => ({
+    fullWidth: {
+        width: '100%',
+    },
+    slider: {
+        marginLeft: 10,
+        marginRight: 10,
+        width: 'calc(100% - 20px)',
+    },
+});
+
+class ConfigSlider extends ConfigGeneric {
+    componentDidMount() {
+        super.componentDidMount();
+        const _value = ConfigGeneric.getValue(this.props.data, this.props.attr);
+        this.setState({ _value });
+    }
+
+    static getDerivedStateFromProps(props, state) {
+        if (
+            (props.schema.min !== undefined && props.schema.min < 0) ||
+            (props.schema.max !== undefined && props.schema.max < 0)
+        ) {
+            return null;
+        }
+        const _value = ConfigGeneric.getValue(props.data, props.attr);
+        if (_value === null || _value === undefined || _value.toString() !== parseFloat(state._value).toString()) {
+            return { _value };
+        }
+
+        return null;
+    }
+
+    renderItem(error, disabled /* , defaultValue */) {
+        const min = this.props.schema.min || 0;
+        const max = this.props.schema.max || 100;
+        const unit = this.props.schema.unit || '';
+
+        const marks = [
+            { value: min, label: min + unit },
+            { value: max, label: max + unit },
+        ];
+
+        return (
+            <Box className={this.props.classes.fullWidth}>
+                {this.props.schema.label ? (
+                    <Typography gutterBottom>{this.getText(this.props.schema.label)}</Typography>
+                ) : null}
+                <Slider
+                    className={this.props.classes.slider}
+                    value={this.state._value}
+                    getAriaValueText={value => value + unit}
+                    step={this.props.schema.step || (max - min) / 100}
+                    valueLabelDisplay="auto"
+                    marks={marks}
+                    min={min}
+                    max={max}
+                    disabled={!!disabled}
+                    error={error || ''}
+                    onChange={e => {
+                        const _value = e.target.value;
+                        this.setState({ _value }, () => this.onChange(this.props.attr, _value));
+                    }}
+                />
+                {this.props.schema.help ? <Typography>
+                    {this.renderHelp(
+                        this.props.schema.help,
+                        this.props.schema.helpLink,
+                        this.props.schema.noTranslation,
+                    )}
+                </Typography> : null}
+            </Box>
+        );
+    }
+}
+
+ConfigSlider.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)(ConfigSlider);

package/src/JsonConfigComponent/ConfigStaticDivider.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@mui/styles';
+
+import { Utils } from '@iobroker/adapter-react-v5';
+
+import ConfigGeneric from './ConfigGeneric';
+
+const styles = theme => ({
+    fullWidth: {
+        width: '100%',
+        backgroundColor: theme.palette.mode === 'dark' ? '#FFF' : '#000',
+        borderStyle: 'hidden',
+    },
+    primary: {
+        backgroundColor: theme.palette.primary.main,
+    },
+    secondary: {
+        backgroundColor: theme.palette.secondary.main,
+    },
+});
+
+class ConfigStaticDivider extends ConfigGeneric {
+    renderItem() {
+        return <hr
+            className={Utils.clsx(
+                this.props.classes.fullWidth,
+                this.props.schema.color === 'primary' && this.props.classes.primary,
+                this.props.schema.color === 'secondary' && this.props.classes.secondary,
+            )}
+            style={{
+                height: this.props.schema.color ? this.props.schema.height || 2 : this.props.schema.height || 1,
+                backgroundColor: this.props.schema.color !== 'primary' && this.props.schema.color !== 'secondary' && this.props.schema.color ? this.props.schema.color : undefined,
+            }}
+        />;
+    }
+}
+
+ConfigStaticDivider.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)(ConfigStaticDivider);

package/src/JsonConfigComponent/ConfigStaticHeader.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@mui/styles';
+
+import ConfigGeneric from './ConfigGeneric';
+
+const styles = theme => ({
+    header: {
+        width: '100%',
+        background: theme.palette.primary.main,
+        color: theme.palette.primary.contrastText,
+        padding: '4px !important',
+        borderRadius: 3,
+        marginBlockEnd: 0,
+        marginBlockStart: 0,
+    },
+});
+
+class ConfigStaticHeader extends ConfigGeneric {
+    renderItem() {
+        switch ((this.props.schema.size || 5).toString()) {
+            case '1':
+                return <h1 className={this.props.classes.header}>
+                    {this.getText(this.props.schema.text, this.props.schema.noTranslation)}
+                </h1>;
+
+            case '2':
+                return <h2 className={this.props.classes.header}>
+                    {this.getText(this.props.schema.text, this.props.schema.noTranslation)}
+                </h2>;
+
+            case '3':
+                return <h3 className={this.props.classes.header}>
+                    {this.getText(this.props.schema.text, this.props.schema.noTranslation)}
+                </h3>;
+
+            case '4':
+                return <h4 className={this.props.classes.header}>
+                    {this.getText(this.props.schema.text, this.props.schema.noTranslation)}
+                </h4>;
+
+            case '5':
+            default:
+                return <h5 className={this.props.classes.header}>
+                    {this.getText(this.props.schema.text, this.props.schema.noTranslation)}
+                </h5>;
+        }
+    }
+}
+
+ConfigStaticHeader.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)(ConfigStaticHeader);