@iobroker/json-config 6.17.6 → 6.17.12

package/src/JsonConfigComponent/ConfigCheckbox.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { withStyles } from '@mui/styles';
+
+import {
+    FormControlLabel,
+    Checkbox,
+    FormHelperText,
+    FormControl,
+} from '@mui/material';
+
+import  { type AdminConnection, I18n } from '@iobroker/adapter-react-v5';
+import type { ThemeName, ThemeType } from '@iobroker/adapter-react-v5/types';
+
+import ConfigGeneric, { type ConfigGenericProps, type ConfigGenericState } from './ConfigGeneric';
+import type {ConfigItemCheckbox} from "#JC/types";
+
+const styles: Record<string, any> = {
+    error: {
+        color: 'red',
+    },
+};
+
+interface ConfigCheckboxProps extends ConfigGenericProps {
+    schema: ConfigItemCheckbox;
+}
+
+class ConfigCheckbox extends ConfigGeneric<ConfigCheckboxProps, ConfigGenericState> {
+    renderItem(error: unknown, disabled: boolean): React.JSX.Element {
+        const value = ConfigGeneric.getValue(this.props.data, this.props.attr);
+        const isIndeterminate = Array.isArray(value);
+
+        return <FormControl className={this.props.classes.fullWidth} variant="standard">
+            <FormControlLabel
+                onClick={e => {
+                    e.preventDefault();
+                    e.stopPropagation();
+
+                    if (!disabled) {
+                        this.onChange(this.props.attr, !value);
+                    }
+                }}
+                control={<Checkbox
+                    indeterminate={isIndeterminate}
+                    checked={!!value}
+                    onChange={e => {
+                        if (isIndeterminate) {
+                            this.onChange(this.props.attr, true);
+                        } else {
+                            this.onChange(this.props.attr, e.target.checked);
+                        }
+                    }}
+                    disabled={disabled}
+                />}
+                label={this.getText(this.props.schema.label)}
+            />
+            <FormHelperText className={this.props.classes.error}>
+                {
+                    error ? (this.props.schema.validatorErrorText ? I18n.t(this.props.schema.validatorErrorText) : I18n.t('ra_Error')) :
+                        null
+                }
+            </FormHelperText>
+            {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)(ConfigCheckbox);

package/src/JsonConfigComponent/ConfigChip.jsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@mui/styles';
+
+import {
+    FormHelperText,
+    FormControl,
+} from '@mui/material';
+
+import ConfigGeneric from './ConfigGeneric';
+import ChipInput from './ChipInput';
+
+const styles = () => ({
+    fullWidth: {
+        width: '100%',
+    },
+});
+
+class ConfigLanguage extends ConfigGeneric {
+    componentDidMount() {
+        super.componentDidMount();
+        const { data, attr } = this.props;
+        const value = ConfigGeneric.getValue(data, attr);
+        if (this.props.schema.delimiter && typeof value === 'string') {
+            const parts = value.split(this.props.schema.delimiter).map(a => a.trim()).filter(a => a);
+            this.setState({ value: parts });
+        } else {
+            this.setState({ value: value || [] });
+        }
+    }
+
+    renderItem(error, disabled /* , defaultValue */) {
+        const { attr, schema } = this.props;
+        const { value } = this.state;
+        return <FormControl className={this.props.classes.fullWidth} variant="standard">
+            <ChipInput
+                value={value}
+                disabled={!!disabled}
+                label={this.getText(schema.label)}
+                error={!!error}
+                onAdd={chip => {
+                    const newValue = JSON.parse(JSON.stringify(value));
+                    newValue.push(chip);
+                    this.setState({ value: newValue, prevValue: '' }, () => {
+                        if (this.props.schema.delimiter) {
+                            this.onChange(attr, newValue.join(`${this.props.schema.delimiter} `));
+                        } else {
+                            this.onChange(attr, newValue);
+                        }
+                    });
+                }}
+                onDelete={(chip, index) => {
+                    const newValue = JSON.parse(JSON.stringify(value));
+                    newValue.splice(index, 1);
+                    this.setState({ value: newValue, prevValue: '' }, () => {
+                        if (this.props.schema.delimiter) {
+                            this.onChange(attr, newValue.join(`${this.props.schema.delimiter} `));
+                        } else {
+                            this.onChange(attr, newValue);
+                        }
+                    });
+                }}
+            />
+            {this.props.schema.help ? <FormHelperText>{this.renderHelp(this.props.schema.help, this.props.schema.helpLink, this.props.schema.noTranslation)}</FormHelperText> : null}
+        </FormControl>;
+    }
+}
+
+ConfigLanguage.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)(ConfigLanguage);

package/src/JsonConfigComponent/ConfigColor.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { ChromePicker, type ColorResult, type RGBColor } from 'react-color';
+
+import {
+    IconButton,
+    TextField,
+    Dialog,
+} from '@mui/material';
+
+import { Close as ClearIcon } from '@mui/icons-material';
+
+import { Utils } from '@iobroker/adapter-react-v5';
+
+import type { ConfigItemText } from '#JC/types';
+import ConfigGeneric, { type ConfigGenericProps, type ConfigGenericState } from './ConfigGeneric';
+
+interface ConfigColorProps extends ConfigGenericProps {
+    schema: ConfigItemText;
+}
+
+interface ConfigColorState extends ConfigGenericState {
+    showColorDialog?: boolean;
+    colorDialogValue?: string;
+}
+
+class ConfigColor extends ConfigGeneric<ConfigColorProps, ConfigColorState> {
+    renderColorDialog() {
+        return !!this.state.showColorDialog && <Dialog
+            onClose={() => this.setState({ showColorDialog: false })}
+            open={this.state.showColorDialog}
+        >
+            <ChromePicker
+                color={this.state.colorDialogValue}
+                onChange={(color: ColorResult) =>
+                    this.setState({ colorDialogValue: color.hex }, () =>
+                        this.onChange(this.props.attr, this.state.colorDialogValue))}
+            />
+        </Dialog>;
+    }
+
+    renderItem(_error: unknown, disabled: boolean /* , defaultValue */) {
+        const value = ConfigGeneric.getValue(this.props.data, this.props.attr);
+        let textColor = Utils.isUseBright(value, null);
+        if (textColor === null) {
+            textColor = undefined;
+        }
+        return <>
+            {this.renderColorDialog()}
+            <TextField
+                variant="standard"
+                disabled={!!disabled}
+                style={{ minWidth: 100, width: 'calc(100% - 8px)' }}
+                label={this.getText(this.props.schema.label)}
+                value={value || ''}
+                onClick={() => !this.props.schema.readOnly && this.setState({ showColorDialog: true, colorDialogValue: value || '' })}
+                onChange={e => {
+                    const color = e.target.value;
+                    this.onChange(this.props.attr, color);
+                }}
+                inputProps={{
+                    style: {
+                        // paddingLeft: noPadding ? 0 : 8,
+                        backgroundColor: value,
+                        color: textColor ? '#FFF' : '#000',
+                    },
+                    readOnly: this.props.schema.readOnly || false,
+                }}
+                // eslint-disable-next-line react/jsx-no-duplicate-props
+                InputProps={{
+                    endAdornment: value && !this.props.schema.noClearButton ? <IconButton
+                        size="small"
+                        onClick={e => {
+                            e.stopPropagation();
+                            this.onChange(this.props.attr, '');
+                        }}
+                    >
+                        <ClearIcon />
+                    </IconButton> : undefined,
+                }}
+                InputLabelProps={{ shrink: true }}
+            />
+        </>;
+    }
+}
+
+export default ConfigColor;

package/src/JsonConfigComponent/ConfigCoordinates.tsx

@@ -0,0 +1,234 @@
+import React from 'react';
+import { withStyles } from '@mui/styles';
+
+import {
+    TextField,
+    Fab,
+    FormControlLabel,
+    Checkbox,
+} from '@mui/material';
+
+import {
+    GpsFixed as IconGpsFixed,
+    LocationOn as IconLocationOn,
+} from '@mui/icons-material';
+
+import { I18n } from '@iobroker/adapter-react-v5';
+
+import ConfigGeneric, { type ConfigGenericProps, type ConfigGenericState } from './ConfigGeneric';
+import type { ConfigItemCoordinates } from '#JC/types';
+
+const styles: Record<string, any> = {
+    width: {
+        width: 'calc(100% - 85px)',
+    },
+    width50: {
+        width: 120,
+        marginRight: 5,
+    },
+};
+
+interface ConfigCoordinatesProps extends ConfigGenericProps {
+    classes: Record<string, string>;
+    schema: ConfigItemCoordinates;
+}
+
+interface ConfigCoordinatesState extends ConfigGenericState {
+    useSystem?: boolean;
+    longitude?: string | number;
+    latitude?: string | number;
+}
+
+class ConfigCoordinates extends ConfigGeneric<ConfigCoordinatesProps, ConfigCoordinatesState> {
+    componentDidMount() {
+        super.componentDidMount();
+
+        const value = ConfigGeneric.getValue(this.props.data, this.props.attr);
+        this.setState({ value });
+
+        const newState: Partial<ConfigCoordinatesState> = {};
+        if (this.props.schema.useSystemName) {
+            newState.useSystem = !!ConfigGeneric.getValue(this.props.data, this.props.schema.useSystemName);
+        }
+        if (this.props.schema.longitudeName && this.props.schema.latitudeName) {
+            newState.longitude = ConfigGeneric.getValue(this.props.data, this.props.schema.longitudeName);
+            newState.latitude = ConfigGeneric.getValue(this.props.data, this.props.schema.latitudeName);
+            if (!newState.longitude && !newState.latitude && this.props.schema.autoInit) {
+                setTimeout(() => this.getCoordinates(), 300);
+            }
+        } else {
+            const value_ = ConfigGeneric.getValue(this.props.data, this.props.attr);
+            if (!value_ && this.props.schema.autoInit) {
+                setTimeout(() => this.getCoordinates(), 300);
+            }
+        }
+        Object.keys(newState).length && setTimeout(() => this.setState(newState as ConfigCoordinatesState), 50);
+    }
+
+    async getSystemCoordinates() {
+        const obj = await this.props.socket.getCompactSystemConfig();
+        if (obj?.common && (obj.common.longitude || obj.common.latitude)) {
+            window.alert(I18n.t('ra_Used system settings'));
+            if (this.props.schema.longitudeName && this.props.schema.latitudeName) {
+                this.setState(
+                    {
+                        longitude: obj.common.longitude,
+                        latitude: obj.common.latitude,
+                    },
+                    async () => {
+                        await this.onChange(this.props.schema.longitudeName, (obj.common.longitude || '').trim());
+                        await this.onChange(this.props.schema.latitudeName, (obj.common.latitude || '').trim());
+                    },
+                );
+            } else {
+                const value = obj.common.latitude + (this.props.schema.divider || ',') + obj.common.longitude;
+                this.setState(
+                    {
+                        value,
+                    },
+                    () => {
+                        this.onChange(this.props.attr, value);
+                    },
+                );
+            }
+        } else {
+            window.alert(
+                I18n.t(
+                    'ra_Cannot determine position: System settings are empty and GPS detection is disabled in browser',
+                ),
+            );
+        }
+    }
+
+    getCoordinates() {
+        if (navigator.geolocation) {
+            navigator.geolocation.getCurrentPosition(
+                position => {
+                    if (position?.coords) {
+                        if (this.props.schema.longitudeName && this.props.schema.latitudeName) {
+                            this.setState(
+                                {
+                                    longitude: position.coords.longitude,
+                                    latitude: position.coords.latitude,
+                                },
+                                async () => {
+                                    await this.onChange(
+                                        this.props.schema.longitudeName,
+                                        position.coords.longitude || '',
+                                    );
+                                    await this.onChange(this.props.schema.latitudeName, position.coords.latitude || '');
+                                },
+                            );
+                        } else {
+                            const value =
+                                position.coords.latitude +
+                                (this.props.schema.divider || ',') +
+                                position.coords.longitude;
+                            this.setState({ value }, () => {
+                                this.onChange(this.props.attr, value);
+                            });
+                        }
+                    } else {
+                        this.getSystemCoordinates();
+                    }
+                },
+                error => {
+                    console.error(`Cannot determine coordinates from browser: ${error}`);
+                    this.getSystemCoordinates();
+                },
+            );
+        } else {
+            this.getSystemCoordinates();
+        }
+    }
+
+    renderItem(error: string, disabled: boolean /* , defaultValue */) {
+        return <>
+            {this.props.schema.useSystemName ? <FormControlLabel
+                control={
+                    <Checkbox
+                        checked={!!this.state.useSystem}
+                        onChange={e => {
+                            const useSystem = e.target.checked;
+                            if (useSystem) {
+                                this.getSystemCoordinates();
+                            }
+                            this.setState({ useSystem }, () =>
+                                this.onChange(this.props.schema.useSystemName, useSystem));
+                        }}
+                    />
+                }
+                label={I18n.t('ra_Use system settings for position')}
+            /> : null}
+            {this.props.schema.longitudeName && this.props.schema.latitudeName ?
+                <TextField
+                    variant="standard"
+                    className={this.props.classes.width50}
+                    value={this.state.longitude ?? ''}
+                    error={!!error}
+                    disabled={this.state.useSystem || !!disabled}
+                    onChange={e => {
+                        const longitude = e.target.value;
+                        this.setState({ longitude }, () => {
+                            this.onChange(this.props.schema.longitudeName, (longitude || '').trim());
+                        });
+                    }}
+                    label={I18n.t('ra_Longitude')}
+                /> : null}
+            {this.props.schema.longitudeName && this.props.schema.latitudeName ?
+                <TextField
+                    variant="standard"
+                    className={this.props.classes.width50}
+                    value={this.state.latitude ?? ''}
+                    error={!!error}
+                    disabled={this.state.useSystem || !!disabled}
+                    onChange={e => {
+                        const latitude = e.target.value;
+                        this.setState({ latitude }, () =>
+                            this.onChange(this.props.schema.latitudeName, (latitude || '').trim()));
+                    }}
+                    label={I18n.t('ra_Latitude')}
+                /> : null}
+            {!this.props.schema.longitudeName || !this.props.schema.latitudeName ?
+                <TextField
+                    variant="standard"
+                    className={this.props.classes.width}
+                    value={this.state.value === null || this.state.value === undefined ? '' : this.state.value}
+                    error={!!error}
+                    disabled={!!disabled}
+                    inputProps={{
+                        maxLength: this.props.schema.maxLength || this.props.schema.max || undefined,
+                        readOnly: this.state.useSystem,
+                    }}
+                    onChange={e => {
+                        const value = e.target.value;
+                        this.setState({ value }, () => this.onChange(this.props.attr, (value || '').trim()));
+                    }}
+                    placeholder={this.getText(this.props.schema.placeholder)}
+                    label={this.getText(this.props.schema.label)}
+                    helperText={this.renderHelp(
+                        this.props.schema.help,
+                        this.props.schema.helpLink,
+                        this.props.schema.noTranslation,
+                    )}
+                /> : null}
+            {!this.state.useSystem ? <Fab
+                size="small"
+                onClick={() => this.getCoordinates()}
+                title={I18n.t('ra_Take browser position')}
+                style={{ marginRight: 4 }}
+            >
+                <IconLocationOn />
+            </Fab> : null}
+            {!this.state.useSystem ? <Fab
+                size="small"
+                onClick={() => this.getSystemCoordinates()}
+                title={I18n.t('ra_Take position from system settings')}
+            >
+                <IconGpsFixed />
+            </Fab> : null}
+        </>;
+    }
+}
+
+export default withStyles(styles)(ConfigCoordinates);