@iobroker/adapter-react-v5 6.1.3 → 6.1.5

package/src/Components/Image.tsx

@@ -0,0 +1,176 @@
+import React, { Component } from 'react';
+
+import IconNoIcon from '../icons/IconNoIcon';
+
+function getElementFromSource(src: string): HTMLElement | null {
+    const svgContainer = document.createElement('div');
+    svgContainer.innerHTML = src;
+    const svg: HTMLElement = svgContainer.firstElementChild as HTMLElement;
+    if (svg?.remove) {
+        svg.remove();
+    } else if (svg) {
+        svgContainer.removeChild(svg);
+    }
+
+    svgContainer.remove();
+    return svg;
+}
+
+function serializeAttrs(map?: NamedNodeMap): Record<string, string> {
+    const ret: Record<string, string> = {};
+    if (!map) {
+        return ret;
+    }
+    for (let prop, i = 0; i < map.length; i++) {
+        const key = map[i].name;
+        if (key === 'class') {
+            prop = 'className';
+        } else if (!key.startsWith('data-')) {
+            prop = key.replace(/[-|:]([a-z])/g, g => g[1].toUpperCase());
+        } else {
+            prop = key;
+        }
+
+        ret[prop] = map[i].value;
+    }
+    return ret;
+}
+
+interface ImageProps {
+    /* The color */
+    color?: string;
+    /* The source of the image */
+    src?: string;
+    /* The image prefix (default: './files/') */
+    imagePrefix?: string;
+    /* The CSS class name */
+    className?: string;
+    /* Show image errors (or just show no image)? */
+    showError?: boolean;
+}
+
+interface ImageState {
+    svg?: boolean;
+    created?: boolean;
+    color?: string;
+    src?: string;
+    imgError?: boolean;
+    showError?: boolean;
+}
+
+class Image extends Component<ImageProps, ImageState> {
+    private svg: React.JSX.Element | null;
+
+    static REMOTE_SERVER: boolean = window.location.hostname.includes('iobroker.in');
+
+    static REMOTE_PREFIX: string = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/') + 1);
+
+    constructor(props: ImageProps) {
+        super(props);
+        this.state = {
+            svg: !!this.props.src?.startsWith('data:'),
+            created: true,
+            color: this.props.color || '',
+            src: this.props.src || '',
+            imgError: false,
+            showError: !!this.props.showError,
+        };
+
+        this.svg = this.state.svg && this.state.src ? this.getSvgFromData(this.state.src) : null;
+    }
+
+    static getDerivedStateFromProps(props: ImageProps, state: ImageState) {
+        const newState: ImageState = {};
+        let changed = false;
+
+        if (props && state && props.src !== state.src) {
+            newState.src = props.src;
+            newState.svg = props.src?.startsWith('data:');
+            newState.created = false;
+            changed = true;
+        }
+
+        if (props && state && props.color !== state.color) {
+            newState.color = props.color;
+            newState.created = false;
+            changed = true;
+        }
+
+        if (props && state && props.showError !== state.showError) {
+            newState.showError = props.showError;
+            changed = true;
+        }
+
+        return changed ? newState : null;
+    }
+
+    getSvgFromData(src: string): React.JSX.Element | null {
+        const len = 'data:image/svg+xml;base64,';
+        if (!src.startsWith(len)) {
+            return null;
+        }
+        src = src.substring(len.length);
+        try {
+            src = atob(src);
+            const svg = getElementFromSource(src) as HTMLElement;
+            const inner = svg.innerHTML;
+            const svgProps = serializeAttrs(svg.attributes);
+
+            svg.remove();
+
+            return <svg
+                className={this.props.className}
+                style={this.state.color ? { color: this.state.color } : {}}
+                {...svgProps}
+                // eslint-disable-next-line react/no-danger
+                dangerouslySetInnerHTML={{ __html: inner }}
+            />;
+        } catch (e) {
+            // ignore
+        }
+        return null;
+    }
+
+    render() {
+        if (this.state.svg) {
+            if (!this.state.created) {
+                setTimeout(() => {
+                    this.svg = this.state.src ? this.getSvgFromData(this.state.src) : null;
+                    this.setState({ created: true });
+                }, 50);
+            }
+
+            return this.svg;
+        }
+        if (this.state.src) {
+            if (this.state.imgError || !this.state.src) {
+                return <IconNoIcon className={this.props.className} />;
+            }
+            if (Image.REMOTE_SERVER && !this.state.src.startsWith('http://') && !this.state.src.startsWith('https://')) {
+                let src = (this.props.imagePrefix || '') + this.state.src;
+                if (src.startsWith('./')) {
+                    src = Image.REMOTE_PREFIX + src.substring(2);
+                } else if (!src.startsWith('/')) {
+                    src = Image.REMOTE_PREFIX + src;
+                }
+                return <img
+                    className={this.props.className}
+                    src={`https://remote-files.iobroker.in${src}`}
+                    alt=""
+                    onError={() => (this.props.showError ? this.setState({ imgError: true }) : this.setState({ src: '' }))}
+                />;
+            }
+
+            return <img
+                className={this.props.className}
+                src={(this.props.imagePrefix || '') + this.state.src}
+                alt=""
+                onError={() => (this.props.showError ? this.setState({ imgError: true }) : this.setState({ src: '' }))}
+            />;
+        }
+
+        return null;
+    }
+}
+
+export default Image;

package/src/Components/Loader.tsx

@@ -0,0 +1,304 @@
+/**
+ * Copyright 2018-2024 Denis Haev (bluefox) <dogafox@gmail.com>
+ *
+ * MIT License
+ *
+ * */
+import React, { useEffect } from 'react';
+import { ThemeName, ThemeType } from '../types';
+// import './loader.css'
+
+declare global {
+    interface Window {
+        loadingBackgroundImage: undefined | string;
+        loadingBackgroundColor: undefined | string;
+        loadingHideLogo: undefined | 'true';
+    }
+}
+
+const loaderStyles = `
+/**
+ * Copyright 2018-2024 Denis Haev (bluefox) <dogafox@gmail.com>
+ *
+ * MIT License
+ *
+ **/
+
+.logo-background-light, .logo-background-colored {
+    background: white;
+}
+.logo-background-dark, .logo-background-blue {
+    background: black;
+}
+.logo-div {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    -ms-transform: translateX(-50%) translateY(-50%);
+    -webkit-transform: translate(-50%,-50%);
+    transform: translate(-50%,-50%);
+    overflow: hidden;
+    border-radius: 50%;
+    z-index: 2;
+}
+.logo-border {
+    /*border-color: #164477;*/
+    border-top-color: #3399CC;
+    border-left-color: #164477;
+    border-bottom-color: #164477;
+    border-right-color: #164477;
+    border-radius: 50%;
+    border-style: solid;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+}
+.logo-top {
+    position: absolute;
+    width: 4.5%;
+    height: 16%;
+    top: 0;
+    z-index: 2;
+}
+.logo-i {
+    position: absolute;
+    width: 14.5%;
+    height: 60%;
+    top: 20%;
+    left: 42%;
+    background: #3399CC;
+}
+.logo-i-top {
+    position: absolute;
+    width: 14.5%;
+    height: 4%;
+    left: 42%;
+    background: #3399CC;
+    border-radius: 100%;
+}
+.logo-back {
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    overflow: hidden;
+}
+@keyframes logo-grow {
+    0% {
+        width: 230px;
+        height: 230px;
+        transform: translate(-50%,-50%) scale(1);
+        opacity: 1
+    }
+    99% {
+        width: 230px;
+        height: 230px;
+        transform: translate(-50%,-50%) scale(10);
+        opacity: 0;
+    }
+    100% {
+        width: 0;
+        height: 0;
+        opacity: 0;
+    }
+}
+@keyframes logo-spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
+@keyframes logo-color-inside-light {
+    0% {
+        background: #FEFEFE;
+    }
+    100% {
+        background: #3399CC;
+    }
+}
+@keyframes logo-color-inside-dark {
+    0% {
+        background: #030303;
+    }
+    100% {
+        background: #3399CC;
+    }
+}
+@keyframes logo-color-inside-colored {
+    0% {
+        background: #FEFEFE;
+    }
+    100% {
+        background: #3399CC;
+    }
+}
+@keyframes logo-color-inside-blue {
+    0% {
+        background: #030303;
+    }
+    100% {
+        background: #3399CC;
+    }
+}
+
+@keyframes logo-color-outside-light {
+    0% {
+        border-color: #FEFEFE;
+    }
+    100% {
+        border-top-color: #3399CC;
+        border-left-color: #164477;
+        border-bottom-color: #164477;
+        border-right-color: #164477;
+    }
+}
+@keyframes logo-color-outside-dark  {
+    0% {
+        border-color: #040404;
+    }
+    100% {
+        border-top-color: #3399CC;
+        border-left-color: #164477;
+        border-bottom-color: #164477;
+        border-right-color: #164477;
+    }
+}
+@keyframes logo-color-outside-colored {
+    0% {
+        border-color: #FEFEFE;
+    }
+    100% {
+        border-top-color: #3399CC;
+        border-left-color: #164477;
+        border-bottom-color: #164477;
+        border-right-color: #164477;
+    }
+}
+@keyframes logo-color-outside-blue  {
+    0% {
+        border-color: #040404;
+    }
+    100% {
+        border-top-color: #3399CC;
+        border-left-color: #164477;
+        border-bottom-color: #164477;
+        border-right-color: #164477;
+    }
+}
+
+.logo-animate-wait {
+    animation: logo-color-outside 1.5s, logo-spin 1.5s linear infinite;
+}
+
+.logo-animate-grow-light {
+    background: #DDD;
+}
+.logo-animate-grow-dark {
+    background: #1d1d1d;
+}
+.logo-animate-grow-colored {
+    background: #DDD;
+}
+.logo-animate-grow-blue {
+    background: #1d1d1d;
+}
+
+.logo-animate-grow {
+    display: inline-block;
+    text-align: center;
+    z-index: 1;
+    top: 50%;
+    left: 50%;
+    -ms-transform: translateX(-50%) translateY(-50%);
+    -webkit-transform: translate(-50%,-50%);
+    transform: translate(-50%,-50%);
+    width: 245px;
+    height: 245px;
+    border-radius: 50%;
+    position: absolute;
+    animation: logo-grow 1s 1 ease forwards;
+}
+
+.logo-animate-color-inside-light {
+    animation: logo-color-inside-light 2.5s;
+}
+.logo-animate-color-inside-dark {
+    animation: logo-color-inside-dark 2.5s;
+}
+.logo-animate-color-inside-colored {
+    animation: logo-color-inside-colored 2.5s;
+}
+.logo-animate-color-inside-blue {
+    animation: logo-color-inside-blue 2.5s;
+}
+
+.logo-animate-color-outside-light {
+    animation: logo-color-outside-light 1.5s;
+}
+.logo-animate-color-outside-dark {
+    animation: logo-color-outside-dark 1.5s;
+}
+.logo-animate-color-outside-colored {
+    animation: logo-color-outside-colored 1.5s;
+}
+.logo-animate-color-outside-blue {
+    animation: logo-color-outside-blue 1.5s;
+}
+`;
+
+interface LoaderProps {
+    /** The size in pixels of this loader. */
+    size?: number;
+    /** The chosen theme type. */
+    themeType?: ThemeType;
+    /** Theme name */
+    themeName?: ThemeName;
+    /** @deprecated Theme name. use themeName instead */
+    theme?: ThemeName;
+    /** Background color */
+    backgroundColor?: string;
+    /** Background image URL */
+    backgroundImage?: string;
+}
+
+function Loader(props: LoaderProps) {
+    useEffect(() => {
+        if (!window.document.getElementById('loader-iobroker-component')) {
+            const style = window.document.createElement('style');
+            style.setAttribute('id', 'loader-iobroker-component');
+            style.innerHTML = loaderStyles;
+            window.document.head.appendChild(style);
+        }
+    }, []);
+
+    const size = props.size || 234;
+    const theme = props.themeName || props.theme || props.themeType || 'light';
+    return <div
+        className={`logo-back logo-background-${theme}`}
+        style={{
+            backgroundImage: (props.backgroundImage && props.backgroundImage !== '@@loginBackgroundImage@@') ? props.backgroundImage :
+                (window.loadingBackgroundImage && window.loadingBackgroundImage !== '@@loginBackgroundImage@@' ? `url(${window.loadingBackgroundImage})` : undefined),
+            backgroundColor: (props.backgroundColor && props.backgroundColor !== '@@loginBackgroundColor@@') ? props.backgroundColor :
+                (window.loadingBackgroundColor && window.loadingBackgroundColor !== '@@loginBackgroundColor@@' ? window.loadingBackgroundColor : undefined),
+            backgroundSize: 'cover',
+        }}
+    >
+        {window.loadingHideLogo === 'true' ?
+            null
+            :
+            <>
+                <div className="logo-div" style={{ width: size, height: size }}>
+                    <div className={`logo-top logo-background-${theme}`} style={{ left: '37%' }} />
+                    <div className={`logo-top logo-background-${theme}`} style={{ left: '57%' }} />
+                    <div
+                        className={`logo-border logo-background-${theme} logo-animate-wait`}
+                        style={{ borderWidth: size * 0.132 }}
+                    />
+                    <div className={`logo-i logo-animate-color-inside-${theme}`} />
+                    <div className={`logo-i-top logo-animate-color-inside-${theme}`} style={{ top: '18%' }} />
+                    <div className={`logo-i-top logo-animate-color-inside-${theme}`} style={{ bottom: '18%' }} />
+                </div>
+                <div
+                    className={`logo-animate-grow logo-animate-grow-${theme}`}
+                    style={{ width: size + 11, height: size + 11 }}
+                />
+            </>}
+    </div>;
+}
+
+export default Loader;

package/src/Components/Logo.tsx

@@ -0,0 +1,166 @@
+import React from 'react';
+import { Fab } from '@mui/material';
+
+import {
+    Help as IconHelp,
+    VerticalAlignTop as IconUpload,
+    VerticalAlignBottom as IconDownload,
+} from '@mui/icons-material';
+
+import I18n from '../i18n';
+import Icon from './Icon';
+
+interface LogoProps {
+    /* Adapter common configuration from io-package.json */
+    common: any;
+    /* Adapter native data from io-package.json */
+    native: any;
+    /* Adapter instance number. */
+    instance: number;
+    /* on Load handler */
+    onLoad?: (contents: any) => void;
+    /* on Error handler */
+    onError?: (error: string) => void;
+    className?: string;
+    style?: Record<string, any>;
+}
+
+class Logo extends React.Component<LogoProps> {
+    static generateFile(fileName: string, obj: any) {
+        const el = window.document.createElement('a');
+        el.setAttribute('href', `data:application/json;charset=utf-8,${encodeURIComponent(JSON.stringify(obj, null, 2))}`);
+        el.setAttribute('download', fileName);
+
+        el.style.display = 'none';
+        window.document.body.appendChild(el);
+
+        el.click();
+
+        window.document.body.removeChild(el);
+    }
+
+    handleFileSelect = (evt: Event) => {
+        const target = evt.target as HTMLInputElement;
+        const files = target.files;
+        if (!files || !files.length) {
+            return;
+        }
+        const f = files[0];
+
+        if (f) {
+            const r = new window.FileReader();
+            r.onload = () => {
+                // @ts-expect-error I don't know how to fix this
+                const contents = target.result as string;
+                try {
+                    const json = JSON.parse(contents);
+                    if (json.native && json.common) {
+                        if (json.common.name !== this.props.common.name) {
+                            this.props.onError && this.props.onError(I18n.t('ra_otherConfig', json.common.name));
+                        } else {
+                            this.props.onLoad && this.props.onLoad(json.native);
+                        }
+                    } else {
+                        this.props.onError && this.props.onError(I18n.t('ra_invalidConfig'));
+                    }
+                } catch (err: any) {
+                    this.props.onError && this.props.onError(err?.toString());
+                }
+            };
+            r.readAsText(f);
+        } else {
+            alert('Failed to open JSON File');
+        }
+    };
+
+    download() {
+        const result = {
+            _id: `system.adapter.${this.props.common.name}.${this.props.instance}`,
+            common: JSON.parse(JSON.stringify(this.props.common)),
+            native: this.props.native,
+        };
+        // remove unimportant information
+        if (result.common.news) {
+            delete result.common.news;
+        }
+        if (result.common.titleLang) {
+            delete result.common.titleLang;
+        }
+        if (result.common.desc) {
+            delete result.common.desc;
+        }
+
+        // window.open('data:application/iobroker; content-disposition=attachment; filename=' + result._id + '.json,' + JSON.stringify(result, null, 2));
+        Logo.generateFile(`${result._id}.json`, result);
+    }
+
+    upload() {
+        const input = window.document.createElement('input');
+        input.setAttribute('type', 'file');
+        input.setAttribute('id', 'files');
+        input.setAttribute('opacity', '0');
+        input.addEventListener('change', this.handleFileSelect, false);
+        (input.click)();
+    }
+
+    render() {
+        return <div className={this.props.className} style={this.props.style}>
+            {this.props.common.icon ?
+                <Icon
+                    src={this.props.common.icon}
+                    style={{
+                        padding: 8,
+                        width: 64,
+                    }}
+                    alt="logo"
+                /> : null}
+            {this.props.common.readme ?
+                <Fab
+                    size="small"
+                    color="primary"
+                    aria-label="Help"
+                    style={{
+                        marginRight: 5,
+                        marginTop: 5,
+                        float: 'right',
+                    }}
+                    onClick={() => {
+                        const win = window.open(this.props.common.readme, '_blank');
+                        win?.focus();
+                    }}
+                >
+                    <IconHelp />
+                </Fab> : null}
+            <Fab
+                size="small"
+                color="primary"
+                aria-label="Load config"
+                style={{
+                    marginRight: 5,
+                    marginTop: 5,
+                    float: 'right',
+                }}
+                title={I18n.t('ra_Load configuration from file')}
+                onClick={() => this.upload()}
+            >
+                <IconUpload />
+            </Fab>
+            <Fab
+                size="small"
+                color="primary"
+                aria-label="Save config"
+                style={{
+                    marginRight: 5,
+                    marginTop: 5,
+                    float: 'right',
+                }}
+                title={I18n.t('ra_Save configuration to file')}
+                onClick={() => this.download()}
+            >
+                <IconDownload />
+            </Fab>
+        </div>;
+    }
+}
+
+export default Logo;