@iobroker/json-config 6.17.12 → 6.17.14

package/src/JsonConfigComponent/ConfigFileSelector.jsx

@@ -1,520 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@mui/styles';
-import Dropzone from 'react-dropzone';
-
-import {
-    InputLabel,
-    MenuItem,
-    FormHelperText,
-    FormControl,
-    Select,
-    IconButton,
-    ListItemText,
-    ListItemIcon,
-} from '@mui/material';
-
-import {
-    Refresh as IconRefresh,
-    UploadFile as IconUpload,
-    Delete as IconDelete,
-    PlayArrow as IconPlay,
-    MusicNote as IconAudio,
-    Videocam as IconVideo,
-    Article as IconText,
-    Code as IconCode,
-} from '@mui/icons-material';
-import { FaFileUpload as UploadIcon } from 'react-icons/fa';
-
-import { Confirm as ConfirmDialog, Utils, I18n } from '@iobroker/adapter-react-v5';
-
-import ConfigGeneric from './ConfigGeneric';
-
-const styles = () => ({
-    fullWidth: {
-        width: '100%',
-    },
-    fullWidthOneButton: {
-        width: 'calc(100% - 42px)',
-    },
-    fullWidthTwoButtons: {
-        width: 'calc(100% - 84px)',
-    },
-    fullWidthThreeButtons: {
-        width: 'calc(100% - 126x)',
-    },
-    dropZone: {
-        width: '100%',
-        height: '100%',
-        position: 'absolute',
-    },
-    dropZoneEmpty: {
-
-    },
-    image: {
-        objectFit: 'contain',
-        margin: 'auto',
-        display: 'flex',
-        width: '100%',
-        height: '100%',
-    },
-    uploadDiv: {
-        position: 'relative',
-        width: '100%',
-    },
-    uploadDivDragging: {
-        opacity: 1,
-        background: 'rgba(128,255,128,0.1)',
-    },
-    uploadCenterDiv: {
-        margin: 5,
-        border: '3px dashed grey',
-        borderRadius: 5,
-        width: '100%',
-        height: '100%',
-        position: 'absolute',
-        display: 'flex',
-    },
-    uploadCenterIcon: {
-        paddingTop: 10,
-        width: 48,
-        height: 48,
-    },
-    uploadCenterText: {
-        fontSize: 16,
-    },
-    uploadCenterTextAndIcon: {
-        textAlign: 'center',
-        position: 'absolute',
-        top: 0,
-        bottom: 0,
-        left: 0,
-        right: 0,
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    disabledOpacity: {
-        opacity: 0.3,
-        cursor: 'default',
-    },
-    error: {
-        border: '2px solid red',
-    },
-    deleteButton: {
-
-    },
-    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 ConfigFileSelector extends ConfigGeneric {
-    constructor(props) {
-        super(props);
-        this.dropzoneRef = React.createRef();
-        this.imagePrefix = this.props.imagePrefix === undefined ? './files' : this.props.imagePrefix;
-    }
-
-    componentDidMount() {
-        super.componentDidMount();
-
-        this.objectID = (this.props.schema.objectID || '0_userdata.0').replace('%INSTANCE%', this.props.instance);
-        this.path = this.props.schema.upload;
-        if (this.path) {
-            if (this.path === '/') {
-                this.path = '';
-            } else if (!this.path.endsWith('/')) {
-                this.path = `${this.path}/`;
-            }
-        }
-
-        // read files
-        this.updateFiles()
-            .then(() => {
-                const value = ConfigGeneric.getValue(this.props.data, this.props.attr);
-                this.setState({ value });
-            });
-    }
-
-    updateFiles() {
-        return this.readFiles(this.props.schema.pattern)
-            .then(files => this.setState({ files }));
-    }
-
-    async readFolder(folderName, files, filter) {
-        try {
-            const dirFiles = await this.props.socket.readDir(this.objectID, folderName.replace(/^\//, '') || null);
-            for (let f = 0; f < dirFiles.length; f++) {
-                const file = dirFiles[f];
-                if (file.isDir) {
-                    // read it
-                    await this.readFolder(`${folderName + file.file}/`, files, filter);
-                } else {
-                    let ok = false;
-                    if (filter === '*.*' && file.file.includes('.')) {
-                        ok = true;
-                    } else if (!filter || filter === '*') {
-                        ok = true;
-                    } else if (filter === '.*' && file.file.startsWith('.')) {
-                        ok = true;
-                    } else {
-                        const regExp = new RegExp(`^${filter.replace(/\./g, '\\.').replace(/\*/g, '.*')}$`);
-                        ok = regExp.test(file.file);
-                    }
-
-                    ok && files.push({ name: folderName + file.file, size: file.stats ? Utils.formatBytes(file.stats.size) : '--' });
-                }
-            }
-        } catch (e) {
-            console.error(`Cannot read "${folderName}": ${e}`);
-        }
-
-        return files;
-    }
-
-    async readFiles(pattern) {
-        const files = [];
-        pattern = pattern || this.props.schema.pattern;
-        if (!pattern) {
-            pattern = '**/*.*';
-        }
-        let filter;
-        const pos = pattern.lastIndexOf('/');
-        if (pos === -1) {
-            filter = pattern;
-        } else {
-            filter = pattern.substring(pos + 1);
-        }
-
-        if (pattern.startsWith('**')) {
-            // read all folders
-            await this.readFolder('/', files, filter);
-        } else {
-            const pos_ = pattern.lastIndexOf('/');
-            if (pos_ === -1) {
-                await this.readFolder('/', files, filter);
-            } else {
-                const folder = pattern.substring(0, pos_ + 1);
-                await this.readFolder(folder, files, filter);
-            }
-        }
-
-        return files;
-    }
-
-    onDrop(acceptedFiles) {
-        const file = acceptedFiles[0];
-        const reader = new FileReader();
-        const maxSize = this.props.schema.maxSize || (2 * 1024 * 1024);
-
-        reader.onabort = () => console.log('file reading was aborted');
-        reader.onerror = () => console.log('file reading has failed');
-        reader.onload = () => {
-            let ext = `image/${file.name.split('.').pop().toLowerCase()}`;
-            if (ext === 'image/jpg') {
-                ext = 'image/jpeg';
-            } else if (ext.includes('svg')) {
-                ext = 'image/svg+xml';
-            }
-            if (file.size > maxSize) {
-                window.alert(I18n.t('File is too big. Max %sk allowed. Try use SVG.', Math.round(maxSize / 1024)));
-                return;
-            }
-            const base64 = `data:${ext};base64,${btoa(
-                new Uint8Array(reader.result)
-                    .reduce((data, byte) => data + String.fromCharCode(byte), ''),
-            )}`;
-
-            this.props.socket.writeFile64(this.objectID, this.path + file.name, base64)
-                .then(() => this.updateFiles())
-                .catch(e => window.alert(`Cannot upload file: ${e}`));
-        };
-        reader.readAsArrayBuffer(file);
-    }
-
-    renderDeleteDialog() {
-        if (!this.state.deleteFile) {
-            return null;
-        }
-        return <ConfirmDialog
-            title={I18n.t('ra_Are you sure?')}
-            text={I18n.t('ra_File will be deleted')}
-            ok={I18n.t('ra_Delete')}
-            cancel={I18n.t('ra_Cancel')}
-            onClose={isOk => {
-                const deleteFile = this.state.deleteFile;
-                this.setState({ deleteFile: false }, () => {
-                    if (isOk) {
-                        this.props.socket.deleteFile(this.objectID, deleteFile)
-                            .then(() => this.updateFiles())
-                            .catch(e => window.alert(`Cannot delete file: ${e}`));
-                    }
-                });
-            }}
-        />;
-    }
-
-    static base64ToArrayBuffer(base64) {
-        const binaryString = window.atob(base64);
-        const len = binaryString.length;
-        const bytes = new Uint8Array(len);
-        for (let i = 0; i < len; i++) {
-            bytes[i] = binaryString.charCodeAt(i);
-        }
-        return bytes.buffer;
-    }
-
-    loadFile() {
-        return this.props.socket.readFile(this.objectID, this.state.value, true);
-    }
-
-    play() {
-        this.loadFile()
-            .then(data => {
-                if (typeof AudioContext !== 'undefined') {
-                    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 sound 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(item) {
-        if (!item || !item.extension) {
-            return null;
-        }
-        if (IMAGE_EXT.includes(item.extension)) {
-            return <div
-                className={this.props.classes.selectedImage}
-                style={{
-                    backgroundImage: `url(${this.imagePrefix}/${this.objectID}/${item.value})`,
-                    backgroundSize: 'contain',
-                    backgroundRepeat: 'no-repeat',
-                }}
-            />;
-        } if (AUDIO_EXT.includes(item.extension)) {
-            return <IconAudio />;
-        } if (DOC_EXT.includes(item.extension)) {
-            return <IconText />;
-        } if (VIDEO_EXT.includes(item.extension)) {
-            return <IconVideo />;
-        } if (JS_EXT.includes(item.extension)) {
-            return <IconCode />;
-        }
-        return null;
-    }
-
-    renderItem(error, disabled) {
-        if (!this.state.files) {
-            return null;
-        }
-        const folders = [];
-        if (!this.props.schema.withFolder) {
-            this.state.files.forEach(file => {
-                const pos = file.name.lastIndexOf('/');
-                if (pos === -1) {
-                    if (!folders.includes('/')) {
-                        folders.push('/');
-                    }
-                } else {
-                    const folder = file.name.substring(0, pos + 1);
-                    if (!folders.includes(folder)) {
-                        folders.push(folder);
-                    }
-                }
-            });
-        }
-
-        /** @typedef {{ value: string, label: string, extension?: string }} Item */
-        /** @type {Item[]} */
-        const selectOptions = this.state.files
-            .map(file => ({
-                value: file.name,
-                label: !this.props.schema.withFolder && folders.length === 1 ? `${file.name.substring(folders[0].length)}` : `${file.name}${this.props.schema.noSize ? '' : `(${file.size})`}`,
-                extension: file.name.toLowerCase().split('.').pop(),
-            }));
-
-        if (!this.props.schema.noNone) {
-            selectOptions.unshift({ label: I18n.t('ra_none'), value: '' });
-        }
-
-        /** @type {Item | undefined } */
-        const item = selectOptions.find(_item => _item.value === this.state.value);
-
-        let buttons = 0;
-
-        if (this.props.schema.upload) {
-            buttons++;
-        }
-        if (this.props.schema.refresh) {
-            buttons++;
-        }
-        const play = this.state.value && (this.state.value.endsWith('.mp3') || this.state.value.endsWith('.ogg') || this.state.value.endsWith('.wav'));
-        // show play button
-        if (play) {
-            buttons++;
-        }
-
-        const element = <div className={this.props.classes.fullWidth}>
-            <FormControl variant="standard" style={{ width: `calc(100% - ${buttons * 42}px)` }}>
-                {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.getIcon(item)}
-                        <span>{item?.label || ''}</span>
-                    </>}
-                    onChange={e => {
-                        this.setState({ value: e.target.value === '_' ? '' : e.target.value }, () =>
-                            this.onChange(this.props.attr, this.state.value));
-                    }}
-                >
-                    {selectOptions.map(it => <MenuItem key={it.value} value={it.value}>
-                        <ListItemIcon>{this.getIcon(it)}</ListItemIcon>
-                        <ListItemText>{it.label}</ListItemText>
-                        {this.props.schema.delete && item.value ?
-                            <IconButton
-                                className={this.props.classes.deleteButton}
-                                size="small"
-                                onClick={() => this.setState({ deleteFile: item.value })}
-                            >
-                                <IconDelete />
-                            </IconButton> : null}
-                    </MenuItem>)}
-                </Select>
-                {this.props.schema.help ? <FormHelperText>{this.renderHelp(this.props.schema.help, this.props.schema.helpLink, this.props.schema.noTranslation)}</FormHelperText> : null}
-            </FormControl>
-            { this.props.schema.refresh && <IconButton onClick={() => this.updateFiles()}><IconRefresh /></IconButton> }
-            { this.props.schema.upload && <IconButton onClick={() => this.dropzoneRef.current?.open()}><IconUpload /></IconButton> }
-            { play && <IconButton style={{ color: '#00FF00' }} onClick={() => this.play()}><IconPlay /></IconButton> }
-        </div>;
-
-        if (!this.props.schema.upload) {
-            return <>
-                {element}
-                {this.renderDeleteDialog()}
-            </>;
-        }
-        let accept = { '*/*': [] };
-        if (this.props.schema.fileTypes === 'image') {
-            accept = {
-                'image/*': ['.png', '.jpg', '.svg', '.gif', '.apng', '.avif', '.webp'],
-            };
-        } else if (this.props.schema.fileTypes === 'audio') {
-            accept = {
-                'audio/*': ['.mp3', '.ogg', '.wav', '.mp4'],
-            };
-        } else if (this.props.schema.fileTypes === 'text') {
-            accept = {
-                'text/plain': ['.txt'],
-            };
-        }
-        if (this.props.schema.pattern) {
-            const last = this.props.schema.pattern.split('/').pop().toLowerCase().replace(/.*\./, '');
-            if (last === 'png' || last === 'jpg' || last === 'svg' || last === 'gif' || last === 'apng' || last === 'avif' || last === 'webp') {
-                accept = {
-                    'image/*': ['.png', '.jpg', '.svg', '.gif', '.apng', '.avif', '.webp'],
-                };
-            } else if (last === 'mp3' || last === 'ogg' || last === 'wav') {
-                accept = {
-                    'audio/*': ['.mp3', '.ogg', '.wav', '.mp4'],
-                };
-            } else if (last === 'ics') {
-                accept = {
-                    'text/calendar': ['.ics'],
-                };
-            } else if (last === 'txt') {
-                accept = {
-                    'text/plain': ['.txt'],
-                };
-            } else if (last === 'pem') {
-                accept = {
-                    'text/plain': ['.pem'],
-                };
-            } else {
-                accept = {
-                    '*/*': [`.${last}`],
-                };
-            }
-        }
-
-        return <Dropzone
-            ref={this.dropzoneRef}
-            multiple={false}
-            accept={accept}
-            noKeyboard
-            noClick
-            maxSize={this.props.schema.maxSize || 2 * 1024 * 1024}
-            onDragEnter={() => {
-                this.setState({ uploadFile: 'dragging' });
-            }}
-            onDragLeave={() => this.setState({ uploadFile: true })}
-            onDrop={(acceptedFiles, errors) => {
-                this.setState({ uploadFile: false });
-                if (!acceptedFiles.length) {
-                    window.alert((errors && errors[0] && errors[0].errors && errors[0].errors[0] && errors[0].errors[0].message) || I18n.t('Cannot upload'));
-                } else {
-                    this.onDrop(acceptedFiles);
-                }
-            }}
-        >
-            {({ getRootProps, getInputProps }) => <div
-                className={Utils.clsx(
-                    this.props.classes.uploadDiv,
-                    this.state.uploadFile === 'dragging' && this.props.classes.uploadDivDragging,
-                    disabled && this.props.classes.disabledOpacity,
-                )}
-                {...getRootProps()}
-            >
-                <input {...getInputProps()} />
-                {this.state.uploadFile === 'dragging' ? <div className={Utils.clsx(this.props.classes.uploadCenterDiv, this.state.uploadError && this.props.classes.error)}>
-                    <div className={this.props.classes.uploadCenterTextAndIcon}>
-                        <UploadIcon className={this.props.classes.uploadCenterIcon} />
-                        <div className={this.props.classes.uploadCenterText}>
-                            {
-                                this.state.uploadFile === 'dragging' ? I18n.t('ra_Drop file here') :
-                                    I18n.t('ra_Place your files here or click here to open the browse dialog')
-                            }
-                        </div>
-                    </div>
-                </div> : null}
-                {element}
-                {this.renderDeleteDialog()}
-            </div>}
-        </Dropzone>;
-    }
-}
-
-ConfigFileSelector.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)(ConfigFileSelector);

package/src/JsonConfigComponent/ConfigFunc.jsx

@@ -1,90 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@mui/styles';
-
-import {
-    InputLabel,
-    MenuItem,
-    FormHelperText,
-    FormControl,
-    Select,
-} from '@mui/material';
-
-import { TextWithIcon, I18n } from '@iobroker/adapter-react-v5';
-
-import ConfigGeneric from './ConfigGeneric';
-
-const styles = () => ({
-    fullWidth: {
-        width: '100%',
-    },
-});
-
-class ConfigFunc extends ConfigGeneric {
-    componentDidMount() {
-        super.componentDidMount();
-        const value = ConfigGeneric.getValue(this.props.data, this.props.attr);
-
-        this.props.socket.getEnums('functions')
-            .then(enums => {
-                const selectOptions = Object.keys(enums)
-                    .map(id => ({
-                        value: this.props.schema.short ? id.replace('enum.functions.', '') : id,
-                        label: this.getText(enums[id].common.name),
-                        obj: enums[id],
-                    }));
-
-                if (this.props.schema.allowDeactivate !== false) {
-                    selectOptions.unshift({ label: I18n.t(ConfigGeneric.NONE_LABEL), value: ConfigGeneric.NONE_VALUE });
-                }
-
-                this.setState({ value, selectOptions });
-            });
-    }
-
-    renderItem(error, disabled /* , defaultValue */) {
-        if (!this.state.selectOptions) {
-            return null;
-        }
-
-        const item = this.state.selectOptions.find(it => it.value === this.state.value);
-
-        return <FormControl
-            variant="standard"
-            className={this.props.classes.fullWidth}
-        >
-            {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={() => (item ? (item.obj ? <TextWithIcon value={item.obj} themeType={this.props.themeType} lang={I18n.getLanguage()} /> : item.label) : '')}
-                onChange={e => {
-                    this.setState({ value: e.target.value === '_' ? '' : e.target.value }, () =>
-                        this.onChange(this.props.attr, this.state.value));
-                }}
-            >
-                {this.state.selectOptions.map(it =>
-                    <MenuItem key={it.value} value={it.value} style={it.value === ConfigGeneric.DIFFERENT_VALUE ? { opacity: 0.5 } : {}}>
-                        {it.obj ? <TextWithIcon value={it.obj} themeType={this.props.themeType} lang={I18n.getLanguage()} /> : 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>;
-    }
-}
-
-ConfigFunc.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)(ConfigFunc);