From 6afaf55bf1e495437f012685042c0259b5609113 Mon Sep 17 00:00:00 2001 From: GermanBluefox Date: Fri, 25 Nov 2022 17:25:10 +0100 Subject: [PATCH] Fixing loading of materialdesign widgets https://github.com/ioBroker/ioBroker.vis/issues/544 --- src/README.md | 3 +- src/src/App.jsx | 22 ++++++- src/src/Attributes/Widget/WidgetField.jsx | 14 ++-- src/src/Components/CodeDialog.jsx | 78 +++++++++++++++++++++++ src/src/Vis/visEngine.jsx | 11 +++- 5 files changed, 116 insertions(+), 12 deletions(-) create mode 100644 src/src/Components/CodeDialog.jsx diff --git a/src/README.md b/src/README.md index fef4cc6dc..4da244df6 100644 --- a/src/README.md +++ b/src/README.md @@ -1,4 +1,5 @@ ## Todo +- Reload all vis instances by file subscribe (could be disabled by config) ### Palette - ✅ Show widgets in palette by group @@ -26,11 +27,11 @@ - ✅ Ctrl+A / Esc(Deselect all) / ... - ✅ If dimension is in % so after resize and move it should stay in % - ✅ Ask about not saved file (because of 1 sec delay) +- Allow selection of background image and x-offset, y-offset, opacity, repeat, size ## groups edit - ✅ Check - ### Widget - ✅By edit widget, if someone enters URL that starts with the same `http(s)://hostname:port/(vis/)data.html` ask to short to `(vis/)data.html` diff --git a/src/src/App.jsx b/src/src/App.jsx index 6998963b4..697c169bb 100644 --- a/src/src/App.jsx +++ b/src/src/App.jsx @@ -30,6 +30,7 @@ import { import Attributes from './Attributes'; import Palette from './Palette'; import Toolbar from './Toolbar'; +import CodeDialog from './Components/CodeDialog'; import CreateFirstProjectDialog from './CreateFirstProjectDialog'; import VisEngine from './Vis/visEngine'; import { registerWidgetsLoadIndicator } from './Vis/visUtils'; @@ -259,6 +260,8 @@ class App extends GenericApp { hidePalette: window.localStorage.getItem('Vis.hidePalette') === 'true', hideAttributes: window.localStorage.getItem('Vis.hideAttributes') === 'true', loadingProgress: { step: 0, total: 0 }, + showCodeDialog: null, + confirmDialog: null, }); window.addEventListener('hashchange', this.onHashChange, false); @@ -1642,6 +1645,20 @@ class App extends GenericApp { return null; } + renderShowCodeDialog() { + if (this.state.showCodeDialog !== null) { + return this.setState({ showCodeDialog: null })} + title={this.state.showCodeDialog.title} + code={this.state.showCodeDialog.code} + mode={this.state.showCodeDialog.mode} + />; + } + + return null; + } + render() { if (!this.state.loaded || !this.state.project || !this.state.groups) { return @@ -1702,6 +1719,7 @@ class App extends GenericApp { }, }); }} + onShowCode={(code, title, mode) => this.setState({ showCodeDialog: { code, title, mode } })} />; if (this.state.runtime) { @@ -1714,7 +1732,6 @@ class App extends GenericApp { {!simulatePreload ? : null} - {this.renderConfirmDialog()} : null} {this.renderAlertDialog()} + {this.renderConfirmDialog()} + {this.renderShowCodeDialog()} {/* { if (field.type?.startsWith('custom,')) { const options = field.type.split(','); - options.shift(); // remove custom + options.shift(); const funcs = options[0].split('.'); - options.shift(); // remove function name if (funcs[0] === 'vis') funcs.shift(); if (funcs[0] === 'binds') funcs.shift(); + + window._ = window.vis._; // for old widgets, else lodash overwrites it + window.vis.activeWidgets = [...props.selectedWidgets]; + window.vis.activeView = props.selectedView; + if (funcs.length === 1) { if (typeof window.vis.binds[funcs[0]] === 'function') { try { - window._ = window.vis._; // for old widgets, else lodash overwrites it - window.vis.activeWidgets = [...props.selectedWidgets]; customLegacyComponent = window.vis.binds[funcs[0]](field.name, options); } catch (e) { console.error(`vis.binds.${funcs.join('.')}: ${e}`); @@ -221,8 +223,6 @@ const WidgetField = props => { } else if (funcs.length === 2) { if (window.vis.binds[funcs[0]] && typeof window.vis.binds[funcs[0]][funcs[1]] === 'function') { try { - window._ = window.vis._; // for old widgets, else lodash overwrites it - window.vis.activeWidgets = [...props.selectedWidgets]; customLegacyComponent = window.vis.binds[funcs[0]][funcs[1]](field.name, options); } catch (e) { console.error(`vis.binds.${funcs.join('.')}: ${e}`); @@ -233,8 +233,6 @@ const WidgetField = props => { } else if (funcs.length === 3) { if (window.vis.binds[funcs[0]] && window.vis.binds[funcs[0]][funcs[1]] && typeof window.vis.binds[funcs[0]][funcs[1]][funcs[2]] === 'function') { try { - window._ = window.vis._; // for old widgets, else lodash overwrites it - window.vis.activeWidgets = [...props.selectedWidgets]; customLegacyComponent = window.vis.binds[funcs[0]][funcs[1]][funcs[2]](field.name, options); } catch (e) { console.error(`vis.binds.${funcs.join('.')}: ${e}`); diff --git a/src/src/Components/CodeDialog.jsx b/src/src/Components/CodeDialog.jsx new file mode 100644 index 000000000..cf2319f23 --- /dev/null +++ b/src/src/Components/CodeDialog.jsx @@ -0,0 +1,78 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import copy from 'copy-to-clipboard'; +import AceEditor from 'react-ace'; + +import 'ace-builds/src-min-noconflict/mode-html'; +import 'ace-builds/src-min-noconflict/worker-html'; +import 'ace-builds/src-min-noconflict/ext-searchbox'; +import 'ace-builds/src-min-noconflict/ext-language_tools'; +import 'ace-builds/src-min-noconflict/theme-clouds_midnight'; +import 'ace-builds/src-min-noconflict/theme-chrome'; + +import { + Dialog, Button, DialogActions, DialogContent, DialogTitle, +} from '@mui/material'; + +import IconCopy from '@mui/icons-material/ContentCopy'; +import CloseIcon from '@mui/icons-material/Close'; + +import { I18n } from '@iobroker/adapter-react-v5'; + +class CodeDialog extends Component { + render() { + return this.props.onClose()} + maxWidth="xl" + fullWidth + > + {this.props.title || I18n.t('Code')} + + + + + + + + ; + } +} + +CodeDialog.propTypes = { + onClose: PropTypes.func.isRequired, + title: PropTypes.string, + themeType: PropTypes.string, + code: PropTypes.string.isRequired, + mode: PropTypes.string, +}; + +export default CodeDialog; diff --git a/src/src/Vis/visEngine.jsx b/src/src/Vis/visEngine.jsx index 1491a9b71..39098789e 100644 --- a/src/src/Vis/visEngine.jsx +++ b/src/src/Vis/visEngine.jsx @@ -286,9 +286,10 @@ class VisEngine extends React.Component { editMode: !!this.props.editMode, binds: {}, views: this.props.views, - activeView: this.props.activeView, + activeView: this.props.selectedView, language: this.props.lang, user: '', + projectPrefix: this.props.projectName, _: translate, dateFormat: '', instance: window.localStorage.getItem('visInstance'), @@ -528,7 +529,11 @@ class VisEngine extends React.Component { }, confirmMessage: (message, title, icon, width, callback) => this.props.onConfirmDialog(message, title, icon, width, callback), - config: {}, // storage of dialog positions and size + config: {}, // storage of dialog positions and size (Deprecated) + showCode: (code, title, mode) => this.props.onShowCode(code, title, mode), + findCommonAttributes: (view, widgets) => { + + } }; } @@ -1617,6 +1622,8 @@ VisEngine.propTypes = { themeType: PropTypes.string, themeName: PropTypes.string, theme: PropTypes.object, + onConfirmDialog: PropTypes.func, + onShowCode: PropTypes.func, adapterName: PropTypes.string.isRequired, instance: PropTypes.number.isRequired,