@iobroker/adapter-react-v5 6.1.3 → 6.1.6

package/src/Components/ComplexCron.tsx

@@ -0,0 +1,507 @@
+import React, { Component } from 'react';
+
+import {
+    Checkbox,
+    Button,
+    MenuItem,
+    Select,
+    FormControlLabel,
+    AppBar,
+    Tabs,
+    Tab,
+    TextField, Box,
+} from '@mui/material';
+
+import I18n from '../i18n';
+import convertCronToText from './SimpleCron/cronText';
+
+const styles: Record<string, React.CSSProperties> = {
+    mainDiv: {
+        width: '100%',
+        height: '100%',
+    },
+    periodSelect: {
+        // margin: '0 10px 60px 10px',
+        display: 'block',
+        width: 200,
+    },
+    slider: {
+        marginTop: 20,
+        display: 'block',
+        width: '100%',
+    },
+    tabContent: {
+        padding: 20,
+        height: 'calc(100% - 240px)',
+        overflow: 'auto',
+    },
+    numberButton: {
+        padding: 4,
+        minWidth: 40,
+        margin: 5,
+    },
+    numberButtonBreak: {
+        display: 'block',
+    },
+    appBar: {
+        color: 'white',
+    },
+};
+
+const WEEKDAYS = [
+    'Sunday',
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday',
+    'Sunday',
+];
+const MONTHS = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+];
+
+// 5-7,9-11 => [5,6,7,9,10,11]
+function convertMinusIntoArray(value: string | false | undefined, max: number): number[] {
+    const result: number[] = [];
+
+    if (value === '*') {
+        if (max === 24 || max === 60 || max === 7) {
+            for (let i = 0; i < max; i++) {
+                result.push(i);
+            }
+        } else {
+            for (let i = 1; i <= max; i++) {
+                result.push(i);
+            }
+        }
+        return result; // array with entries max
+    }
+
+    const parts = (value || '').toString().split(',');
+
+    for (let p = 0; p < parts.length; p++) {
+        if (!parts[p].trim().length) {
+            continue;
+        }
+        const items = parts[p].trim().split('-');
+        if (items.length > 1) {
+            const iMax = parseInt(items[1], 10);
+            for (let i = parseInt(items[0], 10); i <= iMax; i++) {
+                result.push(i);
+            }
+        } else {
+            result.push(parseInt(parts[p], 10));
+        }
+    }
+
+    result.sort();
+
+    // remove double entries
+    for (let p = result.length - 1; p >= 0; p--) {
+        if (result[p] === result[p + 1]) {
+            result.splice(p + 1, 1);
+        }
+    }
+
+    return result;
+}
+
+// [5,6,7,9,10,11] => 5-7,9-11
+function convertArrayIntoMinus(value: number | number [], max: number): string {
+    if (typeof value !== 'object') {
+        value = [value];
+    }
+    if (value.length === max) {
+        return '*';
+    }
+    const newParts = [];
+    if (!value.length) {
+        return '-';
+    }
+    value = value.map(a => parseInt(a as any as string, 10));
+
+    value.sort((a, b) => a - b);
+
+    let start = value[0];
+    let end = value[0];
+    for (let p = 1; p < value.length; p++) {
+        if (value[p] - 1 !== parseInt(value[p - 1] as any as string, 10)) {
+            if (start === end) {
+                newParts.push(start);
+            } else if (end - 1 === start) {
+                newParts.push(`${start},${end}`);
+            } else {
+                newParts.push(`${start}-${end}`);
+            }
+            start = value[p];
+        }
+        end = value[p];
+    }
+
+    if (start === end) {
+        newParts.push(start);
+    } else if (end - 1 === start) {
+        newParts.push(`${start},${end}`);
+    } else {
+        newParts.push(`${start}-${end}`);
+    }
+
+    return newParts.join(',');
+}
+
+type CronNames = 'seconds' | 'minutes' | 'hours' | 'dates' | 'months' | 'dow';
+
+interface CronProps {
+    seconds: string | false | null;
+    minutes: string | null;
+    hours: string | null;
+    dates: string | null;
+    months: string | null;
+    dow: string | null;
+}
+
+interface ComplexCronProps {
+    cronExpression: string;
+    onChange: (cron: string) => void;
+    language: ioBroker.Languages;
+}
+
+// type CronModes = 'every' | 'everyN' | 'specific';
+
+interface ComplexCronState {
+    extended: boolean;
+    tab: number;
+    cron: string;
+    seconds?: string | false;
+    minutes?: string;
+    hours?: string;
+    dates?: string;
+    months?: string;
+    dow?: string;
+    modes: CronProps;
+}
+
+class ComplexCron extends Component<ComplexCronProps, ComplexCronState> {
+    constructor(props: ComplexCronProps) {
+        super(props);
+        let cron = typeof this.props.cronExpression === 'string' ?
+            this.props.cronExpression.replace(/^["']/, '').replace(/["']\n?$/, '') : '';
+        if (cron[0] === '{') {
+            cron = '';
+        }
+        const state = ComplexCron.cron2state(cron || '* * * * *');
+
+        this.state = {
+            extended: false,
+            tab: state.seconds !== false ? 1 : 0,
+            cron: ComplexCron.state2cron(state),
+            modes: {
+                seconds: null,
+                minutes: null,
+                hours: null,
+                dates: null,
+                months: null,
+                dow: null,
+            },
+        };
+        Object.assign(this.state, state);
+        if (this.state.cron !== this.props.cronExpression) {
+            setTimeout(() => this.props.onChange && this.props.onChange(this.state.cron), 100);
+        }
+    }
+
+    static cron2state(cron: string): CronProps {
+        cron = cron.replace(/['"]/g, '').trim();
+        const cronParts = cron.split(' ').map(p => p.trim());
+        let options: CronProps;
+
+        if (cronParts.length === 6) {
+            options = {
+                seconds: cronParts[0] || '*',
+                minutes: cronParts[1] || '*',
+                hours: cronParts[2] || '*',
+                dates: cronParts[3] || '*',
+                months: cronParts[4] || '*',
+                dow: cronParts[5] || '*',
+            };
+        } else {
+            options = {
+                seconds: false,
+                minutes: cronParts[0] || '*',
+                hours: cronParts[1] || '*',
+                dates: cronParts[2] || '*',
+                months: cronParts[3] || '*',
+                dow: cronParts[4] || '*',
+            };
+        }
+        return options;
+    }
+
+    static state2cron(state: ComplexCronState | CronProps): string {
+        let text = `${state.minutes} ${state.hours} ${state.dates} ${state.months} ${state.dow}`;
+        if (state.seconds !== false) {
+            text = `${state.seconds} ${text}`;
+        }
+        return text;
+    }
+
+    recalcCron() {
+        const cron = ComplexCron.state2cron(this.state);
+        if (cron !== this.state.cron) {
+            this.setState({ cron }, () =>
+                this.props.onChange && this.props.onChange(this.state.cron));
+        }
+    }
+
+    onToggle(i: boolean | number, type: CronNames, max: number) {
+        if (i === true) {
+            this.setCronAttr(type, '*');
+        } else if (i === false) {
+            if (max === 60 || max === 24) {
+                this.setCronAttr(type, '0');
+            } else {
+                this.setCronAttr(type, '1');
+            }
+        } else {
+            const nums = convertMinusIntoArray(this.state[type], max);
+            const pos = nums.indexOf(i);
+            if (pos !== -1) {
+                nums.splice(pos, 1);
+            } else {
+                nums.push(i);
+                nums.sort();
+            }
+            this.setCronAttr(type, convertArrayIntoMinus(nums, max));
+        }
+    }
+
+    getDigitsSelector(type: CronNames, max: number) {
+        let values = [];
+        if (max === 7) {
+            values = [1, 2, 3, 4, 5, 6, 0];
+        } else if (max === 60 || max === 24) {
+            for (let i = 0; i < max; i++) {
+                values.push(i);
+            }
+        } else {
+            for (let i = 1; i <= max; i++) {
+                values.push(i);
+            }
+        }
+
+        const parts = convertMinusIntoArray(this.state[type], max);
+
+        return [
+            <Button
+                key="removeall"
+                variant="outlined"
+                style={styles.numberButton}
+                // style={{paddingBottom: 20}}
+                color="primary"
+                onClick={() => this.onToggle(false, type, max)}
+            >
+                {I18n.t('ra_Deselect all')}
+            </Button>,
+            <Button
+                key="addall"
+                variant="contained"
+                // style={{paddingBottom: 20}}
+                style={styles.numberButton}
+                color="secondary"
+                onClick={() => this.onToggle(true, type, max)}
+            >
+                {I18n.t('ra_Select all')}
+            </Button>,
+            <div key="all">
+                {values.map(i =>
+                    [((max === 7 && i === 4) ||
+                    (max === 12 && i === 7) ||
+                    (max === 31 && !((i - 1) % 10)) ||
+                    (max === 60 && i && !(i % 10)) ||
+                    (max === 24 && i && !(i % 6))) ?
+                        <div key={`allInner${i}`} style={{ width: '100%' }} /> : null,
+                    <Button
+                        key={`_${i}`}
+                        variant={parts.indexOf(i) !== -1 ? 'contained' : 'outlined'}
+                        style={styles.numberButton}
+                        color={parts.indexOf(i) !== -1 ? 'secondary' : 'primary'}
+                        onClick={() => this.onToggle(i, type, max)}
+                    >
+                        {max === 7 ? I18n.t(WEEKDAYS[i]) : (max === 12 ? MONTHS[i - 1] : i)}
+                    </Button>,
+                    ])}
+            </div>,
+        ];
+    }
+
+    getPeriodsTab(type: CronNames, max: number): React.JSX.Element | null {
+        const value = this.state[type];
+        let every = value === '*';
+        let everyN = value === undefined || value === null ? false : value.toString().includes('/');
+        let select;
+        if (this.state.modes[type] === null) {
+            select = every ? 'every' : (everyN ? 'everyN' : 'specific');
+            const modes = JSON.parse(JSON.stringify(this.state.modes));
+            modes[type] = select;
+            setTimeout(() => this.setState({ modes }, () => this.recalcCron()), 100);
+            return null;
+        }
+
+        every = this.state.modes[type] === 'every';
+        everyN = this.state.modes[type] === 'everyN';
+        select = this.state.modes[type];
+
+        let valueNumber = 1;
+        if (everyN && value) {
+            valueNumber = parseInt(value.replace('*/', ''), 10) || 1;
+        }
+
+        return <div>
+            <Select
+                variant="standard"
+                style={{ ...styles.periodSelect, verticalAlign: 'bottom' }}
+                value={select}
+                onChange={e => {
+                    const modes = JSON.parse(JSON.stringify(this.state.modes));
+                    modes[type] = e.target.value;
+                    if (e.target.value === 'every') {
+                        this.setCronAttr(type, '*', modes);
+                    } else if (e.target.value === 'everyN') {
+                        const num = parseInt((this.state[type] || '').toString().replace('*/', ''), 10) || 1;
+                        this.setCronAttr(type, `*/${num}`, modes);
+                    } else if (e.target.value === 'specific') {
+                        let num = parseInt((this.state[type] || '').toString().split(',')[0], 10) || 0;
+                        if (!num && (type === 'months' || type === 'dates')) {
+                            num = 1;
+                        }
+                        this.setCronAttr(type, convertArrayIntoMinus(num, max), modes);
+                    }
+                }}
+            >
+                <MenuItem key="every" value="every">{I18n.t(`sc_every_${type}`)}</MenuItem>
+                <MenuItem key="everyN" value="everyN">{I18n.t(`sc_everyN_${type}`)}</MenuItem>
+                <MenuItem key="specific" value="specific">{I18n.t(`sc_specific_${type}`)}</MenuItem>
+            </Select>
+            {everyN && false && <span>{value}</span>}
+            {everyN && <TextField
+                variant="standard"
+                key="interval"
+                label={I18n.t(`sc_${type}`)}
+                value={valueNumber}
+                inputProps={{ min: 1, max }}
+                onChange={e => {
+                    // @ts-expect-error is allowed
+                    this.setState({ [type]: `*/${e.target.value}` }, () => this.recalcCron());
+                }}
+                InputLabelProps={{ shrink: true }}
+                type="number"
+                margin="normal"
+            />}
+            {!every && !everyN && this.getDigitsSelector(type, max)}
+        </div>;
+    }
+
+    static convertCronToText(cron: string, lang: ioBroker.Languages): string {
+        if (cron.split(' ').includes('-')) {
+            return I18n.t('ra_Invalid CRON');
+        }
+        return convertCronToText(cron, lang);
+    }
+
+    setCronAttr(attr: CronNames, value: string, modes?: CronProps) {
+        if (modes) {
+            if (attr === 'seconds') {
+                this.setState({ seconds: value, modes }, () =>
+                    this.recalcCron());
+            } else if (attr === 'minutes') {
+                this.setState({ minutes: value, modes }, () =>
+                    this.recalcCron());
+            } else if (attr === 'hours') {
+                this.setState({ hours: value, modes }, () =>
+                    this.recalcCron());
+            } else if (attr === 'dates') {
+                this.setState({ dates: value, modes }, () =>
+                    this.recalcCron());
+            } else if (attr === 'months') {
+                this.setState({ months: value, modes }, () =>
+                    this.recalcCron());
+            } else if (attr === 'dow') {
+                this.setState({ dow: value, modes }, () =>
+                    this.recalcCron());
+            } else {
+                this.setState({ modes }, () =>
+                    this.recalcCron());
+            }
+        } else if (attr === 'seconds') {
+            this.setState({ seconds: value }, () =>
+                this.recalcCron());
+        } else if (attr === 'minutes') {
+            this.setState({ minutes: value }, () =>
+                this.recalcCron());
+        } else if (attr === 'hours') {
+            this.setState({ hours: value }, () =>
+                this.recalcCron());
+        } else if (attr === 'dates') {
+            this.setState({ dates: value }, () =>
+                this.recalcCron());
+        } else if (attr === 'months') {
+            this.setState({ months: value }, () =>
+                this.recalcCron());
+        } else if (attr === 'dow') {
+            this.setState({ dow: value }, () =>
+                this.recalcCron());
+        }
+    }
+
+    render() {
+        const tab = this.state.seconds !== false ? this.state.tab : this.state.tab + 1;
+        return <div style={styles.mainDiv}>
+            <div style={{ paddingLeft: 8, width: '100%' }}><TextField variant="standard" style={{ width: '100%' }} value={this.state.cron} disabled /></div>
+            <div style={{ paddingLeft: 8, width: '100%', height: 60 }}>{ComplexCron.convertCronToText(this.state.cron, this.props.language || 'en')}</div>
+            <FormControlLabel
+                control={<Checkbox
+                    checked={!!this.state.seconds}
+                    onChange={e => this.setState({ seconds: e.target.checked ? '*' : false }, () => this.recalcCron())}
+                />}
+                label={I18n.t('ra_use seconds')}
+            />
+            <AppBar position="static" sx={{ '&.MuiAppBar-root': styles.appBar }} color="secondary">
+                <Tabs
+                    value={this.state.tab}
+                    style={styles.appBar}
+                    color="secondary"
+                    onChange={(active, _tab) =>
+                        this.setState({ tab: _tab })}
+                >
+                    {this.state.seconds !== false && <Tab id="sc_seconds" label={I18n.t('sc_seconds')} />}
+                    <Tab id="minutes" label={I18n.t('sc_minutes')} />
+                    <Tab id="hours" label={I18n.t('sc_hours')} />
+                    <Tab id="dates" label={I18n.t('sc_dates')} />
+                    <Tab id="months" label={I18n.t('sc_months')} />
+                    <Tab id="dow" label={I18n.t('sc_dows')} />
+                </Tabs>
+            </AppBar>
+            {tab === 0 && <div style={styles.tabContent}>{this.getPeriodsTab('seconds', 60)}</div>}
+            {tab === 1 && <div style={styles.tabContent}>{this.getPeriodsTab('minutes', 60)}</div>}
+            {tab === 2 && <div style={styles.tabContent}>{this.getPeriodsTab('hours', 24)}</div>}
+            {tab === 3 && <div style={styles.tabContent}>{this.getPeriodsTab('dates', 31)}</div>}
+            {tab === 4 && <div style={styles.tabContent}>{this.getPeriodsTab('months', 12)}</div>}
+            {tab === 5 && <div style={styles.tabContent}>{this.getPeriodsTab('dow', 7)}</div>}
+        </div>;
+    }
+}
+
+export default ComplexCron;

package/src/Components/CopyToClipboard.tsx

@@ -0,0 +1,165 @@
+/*
+MIT License
+
+Copyright (c) 2017 sudodoki <smd.deluzion@gmail.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+ */
+// https://github.com/sudodoki/toggle-selection/blob/gh-pages/index.js
+function deselectCurrent() {
+    const selection = document.getSelection();
+    if (!selection?.rangeCount) {
+        return () => {};
+    }
+    let active = document.activeElement as HTMLElement | null;
+
+    const ranges: Range[] = [];
+    for (let i = 0; i < selection.rangeCount; i++) {
+        ranges.push(selection.getRangeAt(i));
+    }
+
+    switch (active?.tagName.toUpperCase()) { // .toUpperCase handles XHTML
+        case 'INPUT':
+        case 'TEXTAREA':
+            active.blur();
+            break;
+
+        default:
+            active = null;
+            break;
+    }
+
+    selection.removeAllRanges();
+    return () => {
+        selection.type === 'Caret' &&
+        selection.removeAllRanges();
+
+        if (!selection.rangeCount) {
+            ranges.forEach(range => selection.addRange(range));
+        }
+
+        active && active.focus();
+    };
+}
+
+// https://github.com/sudodoki/copy-to-clipboard/blob/master/index.js
+
+const clipboardToIE11Formatting = {
+    'text/plain': 'Text',
+    'text/html': 'Url',
+    default: 'Text',
+};
+
+const defaultMessage = 'Copy to clipboard: #{key}, Enter';
+
+function format(message: string): string {
+    const copyKey = `${/mac os x/i.test(navigator.userAgent) ? '⌘' : 'Ctrl'}+C`;
+    return message.replace(/#{\s*key\s*}/g, copyKey);
+}
+
+function copy(text: string, options?: { debug?: boolean; format?: string; message?: string }) {
+    let reselectPrevious;
+    let range;
+    let selection;
+    let mark;
+    let success = false;
+    options = options || {};
+    const debug = options.debug || false;
+    try {
+        reselectPrevious = deselectCurrent();
+
+        range = document.createRange();
+        selection = document.getSelection();
+
+        mark = document.createElement('span');
+        mark.textContent = text;
+        // avoid screen readers from reading out loud the text
+        mark.ariaHidden = 'true';
+        // reset user styles for span element
+        mark.style.all = 'unset';
+        // prevents scrolling to the end of the page
+        mark.style.position = 'fixed';
+        mark.style.top = '0px';
+        mark.style.clip = 'rect(0, 0, 0, 0)';
+        // used to preserve spaces and line breaks
+        mark.style.whiteSpace = 'pre';
+        // do not inherit user-select (it may be `none`)
+        mark.style.webkitUserSelect = 'text';
+        mark.style.MozUserSelect = 'text';
+        mark.style.msUserSelect = 'text';
+        mark.style.userSelect = 'text';
+        mark.addEventListener('copy', e => {
+            e.stopPropagation();
+            if (options?.format) {
+                e.preventDefault();
+                if (typeof e.clipboardData === 'undefined') { // IE 11
+                    debug && console.warn('unable to use e.clipboardData');
+                    debug && console.warn('trying IE specific stuff');
+                    (window as any).clipboardData?.clearData();
+                    const _format = clipboardToIE11Formatting[options.format] || clipboardToIE11Formatting.default;
+                    (window as any).clipboardData?.setData(_format, text);
+                } else { // all other browsers
+                    e.clipboardData?.clearData();
+                    e.clipboardData?.setData(options.format, text);
+                }
+            }
+        });
+
+        document.body.appendChild(mark);
+
+        range.selectNodeContents(mark);
+        selection?.addRange(range);
+
+        const successful = document.execCommand('copy');
+        if (!successful) {
+            throw new Error('copy command was unsuccessful');
+        }
+        success = true;
+    } catch (err) {
+        debug && console.error('unable to copy using execCommand: ', err);
+        debug && console.warn('trying IE specific stuff');
+        try {
+            (window as any).clipboardData.setData(options.format || 'text', text);
+            // options.onCopy && options.onCopy((window as any).clipboardData);
+            success = true;
+        } catch (error) {
+            debug && console.error('unable to copy using clipboardData: ', error);
+            debug && console.error('falling back to prompt');
+            const message = format('message' in options ? options.message || '' : defaultMessage);
+            window.prompt(message, text);
+        }
+    } finally {
+        if (selection) {
+            if (range && typeof selection.removeRange === 'function') {
+                selection.removeRange(range);
+            } else {
+                selection.removeAllRanges();
+            }
+        }
+
+        if (mark) {
+            document.body.removeChild(mark);
+        }
+        reselectPrevious && reselectPrevious();
+    }
+
+    return success;
+}
+
+export default copy;