@iobroker/json-config 6.17.12 → 6.17.14

package/src/JsonConfigComponent/ConfigSendto.tsx

@@ -1,340 +0,0 @@
-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

@@ -1,116 +0,0 @@
-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

@@ -1,97 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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);