@iobroker/adapter-react-v5
Version:
React components to develop ioBroker interfaces with react.
109 lines • 4.84 kB
JavaScript
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';
export class Logo extends React.Component {
static generateFile(fileName, obj) {
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) => {
const target = evt.target;
const files = target?.files;
if (!files || !files.length) {
console.error('No files found. Please report to developers');
return;
}
const f = files[0];
if (f) {
const reader = new window.FileReader();
reader.onload = () => {
// eslint-disable-next-line @typescript-eslint/no-base-to-string
const contents = reader.result?.toString() || '';
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) {
this.props.onError && this.props.onError(err?.toString());
}
};
reader.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 (React.createElement("div", { className: this.props.className, style: this.props.style },
this.props.common.icon ? (React.createElement(Icon, { src: this.props.common.icon, style: {
padding: 8,
width: 64,
}, alt: "logo" })) : null,
this.props.common.readme ? (React.createElement(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();
} },
React.createElement(IconHelp, null))) : null,
React.createElement(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() },
React.createElement(IconUpload, null)),
React.createElement(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() },
React.createElement(IconDownload, null))));
}
}
//# sourceMappingURL=Logo.js.map