@iobroker/json-config 6.17.6 → 6.17.13

package/src/JsonConfigComponent/ConfigLanguage.tsx

@@ -0,0 +1,153 @@
+import React from 'react';
+import { withStyles } from '@mui/styles';
+
+import {
+    InputLabel,
+    MenuItem,
+    FormHelperText,
+    FormControl,
+    Select,
+} from '@mui/material';
+
+import { I18n } from '@iobroker/adapter-react-v5';
+
+import type { ConfigItemLanguage } from '#JC/types';
+import ConfigGeneric, { type ConfigGenericProps, type ConfigGenericState } from './ConfigGeneric';
+
+const styles: Record<string, any> = {
+    fullWidth: {
+        width: '100%',
+    },
+};
+
+const LANGUAGES = [
+    {
+        value: 'en',
+        label: 'English',
+    },
+    {
+        value: 'de',
+        label: 'Deutsch',
+    },
+    {
+        value: 'ru',
+        label: 'русский',
+    },
+    {
+        value: 'pt',
+        label: 'Portugues',
+    },
+    {
+        value: 'nl',
+        label: 'Nederlands',
+    },
+    {
+        value: 'fr',
+        label: 'français',
+    },
+    {
+        value: 'it',
+        label: 'Italiano',
+    },
+    {
+        value: 'es',
+        label: 'Espanol',
+    },
+    {
+        value: 'pl',
+        label: 'Polski',
+    },
+    {
+        value: 'uk',
+        label: 'Український',
+    },
+    {
+        value: 'zh-ch',
+        label: '简体中文',
+    },
+] as const;
+
+interface LanguageSelectOption {
+    /** Value to save */
+    value: string;
+    /** Label to show */
+    label: string;
+}
+
+interface ConfigLanguageProps extends ConfigGenericProps {
+    schema: ConfigItemLanguage;
+}
+
+interface ConfigLanguageState extends ConfigGenericState {
+    selectOptions: LanguageSelectOption[];
+}
+
+class ConfigLanguage extends ConfigGeneric<ConfigLanguageProps, ConfigLanguageState> {
+    componentDidMount() {
+        super.componentDidMount();
+        const value = ConfigGeneric.getValue(this.props.data, this.props.attr);
+        const languages: LanguageSelectOption[] = [...LANGUAGES];
+        if (this.props.schema.system) {
+            languages.unshift({ value: '', label: I18n.t('ra_System language') });
+        } else {
+            languages.unshift({ value: '', label: I18n.t('ra_none') });
+        }
+
+        this.setState({ value: this.props.schema.system ? (value || '') : (value || I18n.getLanguage()), selectOptions: languages });
+    }
+
+    renderItem(error: unknown, disabled: boolean): React.JSX.Element | null {
+        if (!this.state.selectOptions) {
+            return null;
+        }
+
+        const item = this.state.selectOptions?.find(it => it.value === this.state.value || (!it.value && !this.state.value));
+
+        return <FormControl className={this.props.classes.fullWidth} variant="standard">
+            {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 => {
+                    let { value } = e.target;
+                    if (value === '_') {
+                        value = '';
+                    }
+
+                    this.setState({ value }, () => {
+                        this.onChange(this.props.attr, value);
+                        if (this.props.schema.changeGuiLanguage) {
+                            if (value) {
+                                if (value === I18n.getLanguage()) {
+                                    return;
+                                }
+                                I18n.setLanguage(value);
+                                this.props.changeLanguage && this.props.changeLanguage();
+                            } else {
+                                this.props.socket.getSystemConfig()
+                                    .then((systemConfig: ioBroker.SystemConfigObject) => {
+                                        if (systemConfig.common.language === I18n.getLanguage()) {
+                                            return;
+                                        }
+                                        if (systemConfig.common.language) {
+                                            I18n.setLanguage(systemConfig.common.language);
+                                            this.props.changeLanguage && this.props.changeLanguage();
+                                        }
+                                    });
+                            }
+                        }
+                    });
+                }}
+            >
+                {this.state.selectOptions?.map(it =>
+                    <MenuItem key={it.value} value={it.value}>{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)(ConfigLanguage);

package/src/JsonConfigComponent/ConfigLicense.jsx

@@ -0,0 +1,148 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    LinearProgress,
+    FormControlLabel,
+    Checkbox,
+} from '@mui/material';
+
+import { Check, Close } from '@mui/icons-material';
+
+import { I18n } from '@iobroker/adapter-react-v5';
+
+import ConfigGeneric from './ConfigGeneric';
+
+class ConfigLicense extends ConfigGeneric {
+    constructor(props) {
+        super(props);
+        this.scrollRef = React.createRef();
+        this.noPlaceRequired = true;
+    }
+
+    scrolledDown() {
+        if (!this.scrollRef.current) {
+            return false;
+        }
+        return this.scrollRef.current.offsetHeight + this.scrollRef.current.scrollTop >= this.scrollRef.current.scrollHeight;
+    }
+
+    componentDidMount() {
+        super.componentDidMount();
+        if (!ConfigGeneric.getValue(this.props.data, this.props.attr)) {
+            if (this.props.schema.licenseUrl) {
+                this.setState({ showLicenseDialog: true, loading: true, scrolledDown: false });
+                fetch(this.props.schema.licenseUrl)
+                    .then(res => res.text())
+                    .then(text => this.setState({ license: text, loading: false }))
+                    .catch(e => this.setState({
+                        license: e.toString(), loading: false, error: true, scrolledDown: false,
+                    }));
+            } else {
+                this.setState({ showLicenseDialog: true, scrolledDown: false });
+            }
+            setTimeout(() => {
+                // install scroll handler
+                if (this.scrollRef.current) {
+                    const scrolledDown = this.scrolledDown();
+                    if (!scrolledDown) {
+                        this.scrollRef.current.addEventListener('scroll', () => {
+                            if (!this.state.scrolledDown && this.scrolledDown()) {
+                                this.setState({ scrolledDown: true });
+                            }
+                        });
+                    } else {
+                        this.setState({ scrolledDown: true });
+                    }
+                }
+            }, 1000);
+        }
+    }
+
+    renderItem(/* error, disabled, defaultValue */) {
+        if (!this.state.showLicenseDialog) {
+            return null;
+        }
+
+        return <Dialog
+            maxWidth="lg"
+            open={!0}
+            onClose={(e, reason) => {
+                if (reason !== 'escapeKeyDown' && reason !== 'backdropClick') {
+                    this.setState({ showLicenseDialog: false });
+                }
+            }}
+        >
+            <DialogTitle>{this.props.schema.title ? I18n.t(this.props.schema.title) : I18n.t('ra_License agreement')}</DialogTitle>
+            <DialogContent>
+                {this.props.schema.licenseUrl ? <>
+                    {this.state.loading ? <LinearProgress /> : null}
+                    <pre
+                        ref={this.scrollRef}
+                        style={{
+                            width: '100%', height: '100%', overflowY: 'auto', fontSize: 14,
+                        }}
+                    >
+                        {this.state.license}
+                    </pre>
+                </> : null}
+                {!this.props.schema.licenseUrl && this.props.schema.texts ? <div
+                    ref={this.scrollRef}
+                    style={{
+                        width: '100%', height: '100%', overflowY: 'auto', fontSize: 14,
+                    }}
+                >
+                    {this.props.schema.texts.map(text => (this.props.schema.noTranslation ? <p>{text}</p> : <p>{I18n.t(text)}</p>))}
+                </div> : null}
+            </DialogContent>
+            <DialogActions>
+                {this.props.schema.checkBox ? <FormControlLabel
+                    control={<Checkbox checked={!!this.state.licenseChecked} onClick={() => this.setState({ licenseChecked: !this.state.licenseChecked })} />}
+                    label={I18n.t(this.props.schema.checkBox)}
+                /> : null}
+                <Button
+                    disabled={this.state.loading || this.state.error || (this.props.schema.checkBox && !this.state.licenseChecked) || !this.state.scrolledDown}
+                    onClick={() => {
+                        this.setState({ showLicenseDialog: null });
+                        this.onChange(this.props.attr, true);
+                    }}
+                    color="primary"
+                    variant="contained"
+                    startIcon={<Check />}
+                >
+                    {this.props.schema.agreeText ? I18n.t(this.props.schema.agreeText) : I18n.t('ra_Accept license')}
+                </Button>
+                <Button
+                    onClick={() => {
+                        this.setState({ showLicenseDialog: false });
+                        setTimeout(() => this.setState({ showLicenseDialog: true }), 2000);
+                    }}
+                    color="grey"
+                    variant="contained"
+                    startIcon={<Close />}
+                >
+                    {I18n.t('ra_Close')}
+                </Button>
+            </DialogActions>
+        </Dialog>;
+    }
+}
+
+ConfigLicense.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 ConfigLicense;

package/src/JsonConfigComponent/ConfigNumber.tsx

@@ -0,0 +1,207 @@
+import React from 'react';
+import { withStyles } from '@mui/styles';
+
+import { Autocomplete, TextField, FormControl } from '@mui/material';
+
+import { I18n } from '@iobroker/adapter-react-v5';
+
+import type { ConfigItemNumber } 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%',
+    },
+};
+
+interface ConfigNumberProps extends ConfigGenericProps {
+    schema: ConfigItemNumber;
+}
+
+interface ConfigNumberState extends ConfigGenericState {
+    _value: string;
+    oldValue: string | null;
+}
+
+class ConfigNumber extends ConfigGeneric<ConfigNumberProps, ConfigNumberState> {
+    private updateTimeout?: ReturnType<typeof setTimeout>;
+
+    componentDidMount() {
+        super.componentDidMount();
+        let _value = ConfigGeneric.getValue(this.props.data, this.props.attr);
+
+        if (_value === null || _value === undefined) {
+            _value = '';
+        }
+
+        if (Array.isArray(_value) && this.props.multiEdit) {
+            _value = ConfigGeneric.DIFFERENT_VALUE;
+            this.setState({ _value, oldValue: _value });
+            return;
+        }
+
+        this.setState({ _value: _value.toString(), oldValue: _value.toString() });
+    }
+
+    static getDerivedStateFromProps(props: ConfigNumberProps, state: ConfigNumberState) {
+        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 (props.multiEdit && state._value === ConfigGeneric.DIFFERENT_VALUE) {
+            return ConfigGeneric.DIFFERENT_VALUE;
+        }
+
+        if (
+            _value === null ||
+            _value === undefined ||
+            state.oldValue === null ||
+            state.oldValue === undefined ||
+            (_value.toString() !== parseFloat(state._value).toString() &&
+                _value.toString() !== state.oldValue.toString())
+        ) {
+            return { _value };
+        }
+
+        return null;
+    }
+
+    checkValue(value: string): string | null {
+        if (value === null || value === undefined) {
+            return null;
+        }
+        value = value.toString().trim();
+        const f = value === '' ? 0 : parseFloat(value);
+
+        if (value !== '' && Number.isNaN(f)) {
+            return 'ra_Not a number';
+        }
+
+        // eslint-disable-next-line no-restricted-properties
+        if (value !== '' && window.isFinite(f)) {
+            if (this.props.schema.min !== undefined && f < this.props.schema.min) {
+                return 'ra_Too small';
+            }
+            if (this.props.schema.max !== undefined && f > this.props.schema.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) {
+        const isIndeterminate = Array.isArray(this.state._value) || this.state._value === ConfigGeneric.DIFFERENT_VALUE;
+
+        if (this.state.oldValue !== null && this.state.oldValue !== undefined) {
+            this.updateTimeout && clearTimeout(this.updateTimeout);
+            this.updateTimeout = setTimeout(() => {
+                this.updateTimeout = undefined;
+                this.setState({ oldValue: null });
+            }, 30);
+        } else if (this.updateTimeout) {
+            clearTimeout(this.updateTimeout);
+            this.updateTimeout = undefined;
+        }
+
+        if (isIndeterminate) {
+            const autoCompleteOptions = ConfigGeneric.getValue(this.props.data, this.props.attr);
+            const arr = [...autoCompleteOptions].map(item => ({ label: item.toString(), value: item }));
+
+            arr.unshift({ label: I18n.t(ConfigGeneric.DIFFERENT_LABEL), value: ConfigGeneric.DIFFERENT_VALUE });
+
+            return <Autocomplete
+                className={this.props.classes.indeterminate}
+                fullWidth
+                freeSolo
+                value={arr[0]}
+                // @ts-expect-error needs investigation if this really has no effect
+                getOptionSelected={(option, value) => option.label === value.label}
+                onChange={(_, value: typeof arr[number]) => {
+                    this.onChange(this.props.attr, value?.value, () => {
+                        this.setState({ _value: value?.value, oldValue: this.state._value });
+                    });
+                }}
+                options={arr}
+                getOptionLabel={(option: typeof arr[number]) => option.label}
+                renderInput={params => (
+                    <TextField
+                        {...params}
+                        label={this.getText(this.props.schema.label)}
+                        variant="standard"
+                        inputProps={{ ...params.inputProps, readOnly: this.props.schema.readOnly || false }}
+                        error={!!error}
+                        placeholder={this.getText(this.props.schema.placeholder)}
+                        helperText={this.renderHelp(
+                            this.props.schema.help,
+                            this.props.schema.helpLink,
+                            this.props.schema.noTranslation,
+                        )}
+                        disabled={!!disabled}
+                    />
+                )}
+            />;
+        }
+        if (!error && this.state._value !== null && this.state._value !== undefined && this.state._value) {
+            error = this.checkValue(this.state._value);
+            if (error) {
+                error = I18n.t(error as string);
+            }
+        }
+
+        return <FormControl variant="standard" className={this.props.classes.control}>
+            <TextField
+                variant="standard"
+                type="number"
+                fullWidth
+                inputProps={{
+                    min: this.props.schema.min,
+                    max: this.props.schema.max,
+                    step: this.props.schema.step,
+                    readOnly: this.props.schema.readOnly || false,
+                }}
+                value={this.state._value === null || this.state._value === undefined ? '' : this.state._value}
+                error={!!error}
+                disabled={!!disabled}
+                onChange={e => {
+                    const _value = e.target.value; // value is always a string and it is validly formatted
+                    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 }, () =>
+                        this.onChange(this.props.attr, parseFloat(_value)));
+                }}
+                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,
+                        )
+                }
+            />
+        </FormControl>;
+    }
+}
+
+export default withStyles(styles)(ConfigNumber);

package/src/JsonConfigComponent/ConfigObjectId.jsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@mui/styles';
+
+import {
+    InputLabel,
+    FormControl,
+    Button,
+    TextField,
+} from '@mui/material';
+
+import { SelectID as DialogSelectID } from '@iobroker/adapter-react-v5';
+
+import ConfigGeneric from './ConfigGeneric';
+
+const styles = () => ({
+    fullWidth: {
+        width: '100%',
+    },
+    flex: {
+        display: 'flex',
+    },
+    button: {
+        height: 48,
+        marginLeft: 4,
+        minWidth: 48,
+    },
+});
+
+class ConfigObjectId 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, socket, attr,
+        } = this.props;
+        const { value, showSelectId } = this.state;
+
+        return <FormControl className={classes.fullWidth} variant="standard">
+            {schema.label ? <InputLabel shrink>{this.getText(schema.label)}</InputLabel> : null}
+            <div className={classes.flex}>
+                <TextField
+                    variant="standard"
+                    fullWidth
+                    value={value}
+                    error={!!error}
+                    disabled={disabled}
+                    placeholder={this.getText(schema.placeholder)}
+                    label={this.getText(schema.label)}
+                    helperText={this.renderHelp(schema.help, schema.helpLink, schema.noTranslation)}
+                    onChange={e => {
+                        const value_ = e.target.value;
+                        this.setState({ value: value_ }, () =>
+                            this.onChange(attr, value_));
+                    }}
+                />
+                <Button
+                    color="grey"
+                    className={this.props.classes.button}
+                    size="small"
+                    variant="outlined"
+                    onClick={() => this.setState({ showSelectId: true })}
+                >
+...
+                </Button>
+            </div>
+            {showSelectId ? <DialogSelectID
+                imagePrefix={this.props.imagePrefix === undefined ? '../..' : this.props.imagePrefix}
+                dateFormat={this.props.dateFormat}
+                isFloatComma={this.props.isFloatComma}
+                dialogName={`admin.${this.props.adapterName}`}
+                filterFunc={schema.filterFunc}
+                themeType={this.props.themeType}
+                types={schema.types ? (Array.isArray(schema.types) ? schema.types : [schema.types]) : undefined}
+                customFilter={schema.customFilter}
+                filters={schema.filters}
+                socket={socket}
+                statesOnly={schema.all === undefined ? true : schema.all}
+                selected={value}
+                root={schema.root}
+                onClose={() => this.setState({ showSelectId: false })}
+                onOk={value_ =>
+                    this.setState({ showSelectId: false, value: value_ }, () =>
+                        this.onChange(attr, value_))}
+            /> : null}
+        </FormControl>;
+    }
+}
+
+ConfigObjectId.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,
+    dateFormat: PropTypes.string,
+    isFloatComma: PropTypes.bool,
+    imagePrefix: PropTypes.string,
+};
+
+export default withStyles(styles)(ConfigObjectId);