@iobroker/json-config 6.17.6 → 6.17.12

package/src/JsonConfigComponent/ConfigCustom.tsx

@@ -0,0 +1,246 @@
+import React, { Component } from 'react';
+import { Grid, LinearProgress } from '@mui/material';
+
+import { I18n } from '@iobroker/adapter-react-v5';
+import type { ConfigItemCustom } from '#JC/types';
+import type { ConfigGenericProps } from '#JC/JsonConfigComponent/ConfigGeneric';
+
+const getOrLoadRemote = (
+    remote: string,
+    shareScope: string,
+    remoteFallbackUrl?: string,
+): Promise<{get: (module: string) => () => Promise<{ default: Record<string, React.Component> }>}> =>
+    new Promise((resolve, reject) => {
+    // check if remote exists on the global `window`object
+        if (!(window as any)[remote]) {
+            // search dom to see if remote tag exists, but might still be loading (async)
+            const existingRemote: HTMLScriptElement = document.querySelector(`script[data-webpack="${remote}"]`);
+            // when remote is loaded.
+            const onload = async () => {
+                // check if it was initialized
+                if ((window as any)[remote]) {
+                    if (!(window as any)[remote].__initialized) {
+                        // if share scope doesn't exist (like in webpack 4) then expect shareScope to be a manual object
+                        // eslint-disable-next-line camelcase
+                        // @ts-expect-error it is a trick and must be so
+                        if (typeof __webpack_share_scopes__ === 'undefined') {
+                            // use a default share scope object passed in manually
+                            await (window as any)[remote].init(shareScope);
+                        } else {
+                            // otherwise, init share scope as usual
+                            // eslint-disable-next-line
+                            // @ts-expect-error it is a trick and must be so
+                            await (window as any)[remote].init((__webpack_share_scopes__ as any)[shareScope]);
+                        }
+                        // mark remote as initialized
+                        (window as any)[remote].__initialized = true;
+                    }
+                } else {
+                    console.error(`Cannot load ${remote}`);
+                    reject(new Error(`Cannot load ${remote}`));
+                    return;
+                }
+                // resolve promise so marking remote as loaded
+                resolve((window as any)[remote]);
+            };
+
+            if (existingRemote) {
+                // if existing remote but not loaded, hook into its onload and wait for it to be ready
+                existingRemote.onload = onload;
+                existingRemote.onerror = reject;
+                // check if remote fallback exists as param passed to function
+                // TODO: should scan public config for a matching key if no override exists
+            } else if (remoteFallbackUrl) {
+                // inject remote if a fallback exists and call the same onload function
+                const d = document;
+                const script = d.createElement('script');
+                script.type = 'text/javascript';
+                // mark as data-webpack so runtime can track it internally
+                script.setAttribute('data-webpack', `${remote}`);
+                script.async = true;
+                script.onerror = reject;
+                script.onload = onload;
+                script.src = remoteFallbackUrl;
+                d.getElementsByTagName('head')[0].appendChild(script);
+            } else {
+                // no remote and no fallback exist, reject
+                reject(new Error(`Cannot Find Remote ${remote} to inject`));
+            }
+        } else {
+            // remote already instantiated, resolve
+            resolve((window as any)[remote]);
+        }
+    });
+
+function loadComponent(
+    remote: string,
+    sharedScope: string,
+    module: string,
+    url: string,
+): () => Promise<{ default: Record<string, React.Component> }> {
+    return async (): Promise<{ default: Record<string, React.Component> }> => {
+        const container = await getOrLoadRemote(remote, sharedScope, url);
+        const factory = await container.get(module);
+        return factory();
+    };
+}
+
+interface ConfigCustomProps extends ConfigGenericProps {
+    schema: ConfigItemCustom;
+}
+
+interface ConfigCustomState {
+    Component: Component | null;
+    error: string;
+}
+
+export default class ConfigCustom extends Component<ConfigCustomProps, ConfigCustomState> {
+    static runningLoads: Record<string, Promise<{ default: Record<string, React.Component> }>> = {};
+
+    constructor(props: ConfigCustomProps) {
+        super(props);
+        // schema.url - location of Widget
+        // schema.name - Component name
+        // schema.i18n - i18n
+
+        this.state = {
+            Component: null,
+            error: '',
+        };
+    }
+
+    // load component dynamically
+    async componentDidMount() {
+        if (!this.props.schema.url) {
+            console.error('URL is empty. Cannot load custom component!');
+            this.setState({ error: 'URL is empty. Cannot load custom component!' });
+            return;
+        }
+
+        let url;
+        /*
+        if (this.props.schema.url.startsWith('http:') || this.props.schema.url.startsWith('https:')) {
+            url = this.props.schema.url;
+        } else
+        */
+        if (this.props.schema.url.startsWith('./')) {
+            url = `${window.location.protocol}//${window.location.host}${this.props.schema.url.replace(/^\./, '')}`;
+        } else {
+            url = `${window.location.protocol}//${window.location.host}/adapter/${this.props.adapterName}/${this.props.schema.url}`;
+        }
+        const [uniqueName, fileToLoad, ...componentNameParts] = this.props.schema.name.split('/');
+        const componentName = componentNameParts.join('/');
+        if (!url) {
+            console.error('Cannot find URL for custom component! Please define "url" as "custom/customComponents.js" in the schema');
+            return;
+        }
+        if (!uniqueName || !fileToLoad || !componentName) {
+            console.error('Invalid format of "name"! Please define "name" as "ConfigCustomBackItUpSet/Components/AdapterExist" in the schema');
+            return;
+        }
+        let setPromise = ConfigCustom.runningLoads[`${url}!${fileToLoad}`];
+
+        if (!setPromise) {
+            let i18nPromise;
+            if (this.props.schema.i18n === true) {
+                // load i18n from files
+                const pos = url.lastIndexOf('/');
+                let i18nURL;
+                if (pos !== -1) {
+                    i18nURL = url.substring(0, pos);
+                } else {
+                    i18nURL = url;
+                }
+                const lang = I18n.getLanguage();
+                const file = `${i18nURL}/i18n/${lang}.json`;
+
+                i18nPromise = fetch(file)
+                    .then(data => data.json())
+                    .then(json => I18n.extendTranslations(json, lang))
+                    .catch(error => {
+                        if (lang !== 'en') {
+                            // try to load English
+                            fetch(`${i18nURL}/i18n/en.json`)
+                                .then(data => data.json())
+                                .then(json => I18n.extendTranslations(json, lang))
+                                .catch(err => console.log(`Cannot load i18n "${file}": ${err}`));
+                            return;
+                        }
+                        console.log(`Cannot load i18n "${file}": ${error}`);
+                    });
+            } else if (this.props.schema.i18n && typeof this.props.schema.i18n === 'object') {
+                try {
+                    I18n.extendTranslations(this.props.schema.i18n);
+                } catch (error) {
+                    console.error(`Cannot import i18n: ${error}`);
+                }
+            }
+            try {
+                console.log(uniqueName, fileToLoad, componentName);
+                setPromise = loadComponent(uniqueName, 'default', `./${fileToLoad}`, url)();
+                if (i18nPromise) {
+                    setPromise = Promise.all([setPromise, i18nPromise])
+                        .then(result => result[0]);
+                }
+                // remember promise
+                ConfigCustom.runningLoads[`${url}!${fileToLoad}`] = setPromise;
+            } catch (error) {
+                this.setState({ error: `Cannot import from ${this.props.schema.url}: ${error}` });
+            }
+        }
+
+        try {
+            const component = (await setPromise).default;
+
+            if (!component?.[componentName]) {
+                const keys = Object.keys(component || {});
+                console.error('URL is empty. Cannot load custom component!');
+                this.setState({ error: `Component ${this.props.schema.name} not found in ${this.props.schema.url}. Found: ${keys.join(', ')}` });
+            } else {
+                this.setState({ Component: component[componentName] });
+            }
+        } catch (error) {
+            this.setState({ error: `Cannot import from ${this.props.schema.url}: ${error}` });
+        }
+    }
+
+    render() {
+        const CustomComponent: Component = this.state.Component;
+
+        // render temporary placeholder
+        if (!CustomComponent) {
+            if (this.state.error) {
+                return null;
+            }
+            const schema = this.props.schema || {} as ConfigItemCustom;
+
+            const item = <Grid
+                item
+                xs={schema.xs || undefined}
+                lg={schema.lg || undefined}
+                md={schema.md || undefined}
+                sm={schema.sm || undefined}
+                style={({
+                    marginBottom: 0,
+                    // marginRight: 8,
+                    textAlign: 'left',
+                    ...schema.style,
+                    ...(this.props.themeType === 'dark' ? schema.darkStyle : {}),
+                })}
+            >
+                {this.state.error ? <div>{this.state.error}</div> : <LinearProgress />}
+            </Grid>;
+
+            if (schema.newLine) {
+                return <>
+                    <div style={{ flexBasis: '100%', height: 0 }} />
+                    {item}
+                </>;
+            }
+            return item;
+        }
+
+        // @ts-expect-error No idea how to solve it
+        return <CustomComponent {...this.props} />;
+    }
+}

package/src/JsonConfigComponent/ConfigDatePicker.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import { DatePicker } from '@mui/x-date-pickers';
+
+import type { ConfigItemDatePicker } from '#JC/types';
+import ConfigGeneric, { type ConfigGenericProps } from './ConfigGeneric';
+
+interface ConfigDatePickerProps extends ConfigGenericProps {
+    schema: ConfigItemDatePicker;
+}
+
+export default class ConfigDatePicker extends ConfigGeneric<ConfigDatePickerProps> {
+    componentDidMount() {
+        super.componentDidMount();
+        const value = ConfigGeneric.getValue(this.props.data, this.props.attr);
+        this.setState({ value });
+    }
+
+    renderItem(_error: unknown, disabled: boolean /* , defaultValue */): React.JSX.Element {
+        return <DatePicker
+            sx={theme => ({
+                width: '100%',
+                borderBottom: `1px solid ${theme.palette.text.primary}`,
+                '& fieldset': {
+                    display: 'none',
+                },
+                '& input': {
+                    padding: `${theme.spacing(1.5)} 0 4px 0`,
+                },
+                '& .MuiInputAdornment-root': {
+                    marginLeft: 0,
+                    marginTop: 1, // it is already in spaces
+                },
+                '& label': {
+                    transform: 'translate(0px, -9px) scale(0.75)',
+                },
+            })}
+            format={this.props.systemConfig.dateFormat.toLowerCase().replace('mm', 'MM')}
+            disabled={!!disabled}
+            value={this.state.value as never}
+            onChange={value => {
+                this.setState({ value }, () =>
+                    this.onChange(this.props.attr, this.state.value));
+            }}
+            label={this.getText(this.props.schema.label)}
+        />;
+    }
+}

package/src/JsonConfigComponent/ConfigDeviceManager.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import DeviceManager from '@iobroker/dm-gui-components';
+
+import type { ConfigItemDeviceManager } from '#JC/types';
+import ConfigGeneric, { type ConfigGenericProps, type ConfigGenericState } from './ConfigGeneric';
+
+interface ConfigDeviceManagerProps extends ConfigGenericProps {
+    schema: ConfigItemDeviceManager;
+}
+
+class ConfigDeviceManager extends ConfigGeneric<ConfigDeviceManagerProps, ConfigGenericState> {
+    renderItem(): React.JSX.Element | null {
+        const schema = this.props.schema;
+
+        if (!schema) {
+            return null;
+        }
+
+        return <DeviceManager
+            uploadImagesToInstance={`${this.props.adapterName}.${this.props.instance}`}
+            title={this.getText(this.props.schema.label)}
+            socket={this.props.socket}
+            selectedInstance={`${this.props.adapterName}.${this.props.instance}`}
+            themeName={this.props.themeName}
+            themeType={this.props.themeType}
+            isFloatComma={this.props.isFloatComma}
+            dateFormat={this.props.dateFormat}
+        />;
+    }
+}
+
+export default ConfigDeviceManager;

package/src/JsonConfigComponent/ConfigFile.jsx

@@ -0,0 +1,181 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@mui/styles';
+
+import {
+    Button,
+    TextField,
+    IconButton,
+} from '@mui/material';
+
+import {
+    Article as IconText,
+    Code as IconCode,
+    PlayArrow as IconPlay,
+    Videocam as IconVideo,
+} from '@mui/icons-material';
+
+import { SelectFile as SelectFileDialog } from '@iobroker/adapter-react-v5';
+
+import ConfigGeneric from './ConfigGeneric';
+import ConfigFileSelector from './ConfigFileSelector';
+
+const styles = () => ({
+    fullWidth: {
+        width: '100%',
+    },
+    fullWidthOneButton: {
+        width: 'calc(100% - 69px)',
+        marginRight: 4,
+    },
+    fullWidthIcon: {
+        width: 'calc(100% - 119px)',
+        marginRight: 4,
+    },
+    selectedImage: {
+        height: 40,
+        width: 40,
+        display: 'inline-block',
+        marginRight: 8,
+    },
+});
+
+const IMAGE_EXT = ['jpg', 'jpeg', 'svg', 'png', 'webp', 'gif', 'apng', 'avif', 'webp'];
+const AUDIO_EXT = ['mp3', 'ogg', 'wav', 'aac'];
+const VIDEO_EXT = ['avi', 'mp4', 'mov'];
+const DOC_EXT = ['txt', 'log', 'html', 'htm'];
+const JS_EXT = ['json', 'js', 'ts'];
+
+class ConfigFile extends ConfigGeneric {
+    componentDidMount() {
+        super.componentDidMount();
+        const value = ConfigGeneric.getValue(this.props.data, this.props.attr);
+        this.imagePrefix = this.props.imagePrefix === undefined ? './files' : this.props.imagePrefix;
+        this.setState({ value: value ?? '' });
+    }
+
+    static getDerivedStateFromProps(props, state) {
+        const value = ConfigGeneric.getValue(props.data, props.attr);
+        if (value === null || value === undefined || value.toString().trim() !== (state.value ||  '').toString().trim()) {
+            return { value: value ?? '' };
+        }
+        return null;
+    }
+
+    loadFile() {
+        const pos = this.state.value.indexOf('/');
+        if (pos !== -1) {
+            const adapter = this.state.value.substring(0, pos);
+            const path = this.state.value.substring(pos + 1);
+            return this.props.socket.readFile(adapter, path, true);
+        }
+
+        return Promise.resolve(null);
+    }
+
+    play() {
+        this.loadFile()
+            .then(data => {
+                if (typeof AudioContext !== 'undefined' && data?.file) {
+                    const context = new AudioContext();
+                    const buf = ConfigFileSelector.base64ToArrayBuffer(data.file);
+                    context.decodeAudioData(buf, buffer => {
+                        const source = context.createBufferSource(); // creates a sound source
+                        source.buffer = buffer;                      // tell the source which sounds to play
+                        source.connect(context.destination);         // connect the source to the context's destination (the speakers)
+                        source.start(0);
+                    }, err => window.alert(`Cannot play: ${err}`));
+                }
+            });
+    }
+
+    getIcon() {
+        const extension = this.state.value.split('.').pop().toLowerCase();
+        if (IMAGE_EXT.includes(extension)) {
+            return <div
+                className={this.props.classes.selectedImage}
+                style={{
+                    backgroundImage: `url(${this.imagePrefix}/${this.state.value})`,
+                    backgroundSize: 'contain',
+                    backgroundRepeat: 'no-repeat',
+                }}
+            />;
+        } if (AUDIO_EXT.includes(extension)) {
+            return <IconButton style={{ color: '#00FF00' }} onClick={() => this.play()}><IconPlay /></IconButton>;
+        } if (DOC_EXT.includes(extension)) {
+            return <IconText />;
+        } if (VIDEO_EXT.includes(extension)) {
+            return <IconVideo />;
+        } if (JS_EXT.includes(extension)) {
+            return <IconCode />;
+        }
+        return null;
+    }
+
+    renderFileBrowser() {
+        if (!this.state.showFileBrowser) {
+            return null;
+        }
+        return <SelectFileDialog
+            imagePrefix={this.props.imagePrefix}
+            socket={this.props.socket}
+            selected={this.state.value}
+            onClose={() => this.setState({ showFileBrowser: false })}
+            onOk={value => {
+                this.setState({ value }, () =>
+                    this.onChange(this.props.attr, this.props.schema.trim === false ? value : (value || '').trim()));
+            }}
+            selectOnlyFolders={this.props.schema.selectOnlyFolders}
+            allowUpload={this.props.schema.allowUpload}
+            allowDownload={this.props.schema.allowDownload}
+            allowCreateFolder={this.props.schema.allowCreateFolder}
+            allowView={this.props.schema.allowView}
+            showToolbar={this.props.schema.showToolbar}
+            limitPath={this.props.schema.limitPath}
+        />;
+    }
+
+    renderItem(error, disabled /* , defaultValue */) {
+        const icon = this.getIcon();
+
+        return <div className={this.props.classes.fullWidth}>
+            {icon}
+            <TextField
+                variant="standard"
+                className={icon ? this.props.classes.fullWidthIcon : this.props.classes.fullWidthOneButton}
+                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.props.schema.disableEdit,
+                }}
+                onChange={e => {
+                    const value = e.target.value;
+                    this.setState({ value }, () =>
+                        this.onChange(this.props.attr, this.props.schema.trim === false ? value : (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)}
+            />
+            <Button variant="outlined" onClick={() => this.setState({ showFileBrowser: true })}>...</Button>
+            {this.renderFileBrowser()}
+        </div>;
+    }
+}
+
+ConfigFile.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,
+    imagePrefix: PropTypes.func,
+};
+
+export default withStyles(styles)(ConfigFile);