Skip to content

Commit

Permalink
Fixing loading of materialdesign widgets
Browse files Browse the repository at this point in the history
  • Loading branch information
GermanBluefox committed Nov 25, 2022
1 parent c817bb3 commit 6afaf55
Show file tree
Hide file tree
Showing 5 changed files with 116 additions and 12 deletions.
3 changes: 2 additions & 1 deletion 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
Expand Down Expand Up @@ -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`

Expand Down
22 changes: 21 additions & 1 deletion src/src/App.jsx
Expand Up @@ -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';
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -1642,6 +1645,20 @@ class App extends GenericApp {
return null;
}

renderShowCodeDialog() {
if (this.state.showCodeDialog !== null) {
return <CodeDialog
themeType={this.state.themeType}
onClose={() => 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 <StylesProvider generateClassName={generateClassName}>
Expand Down Expand Up @@ -1702,6 +1719,7 @@ class App extends GenericApp {
},
});
}}
onShowCode={(code, title, mode) => this.setState({ showCodeDialog: { code, title, mode } })}
/>;

if (this.state.runtime) {
Expand All @@ -1714,7 +1732,6 @@ class App extends GenericApp {
<StyledEngineProvider injectFirst>
<ThemeProvider theme={this.state.theme}>
{!simulatePreload ? <VisRxWidget /> : null}
{this.renderConfirmDialog()}
<Popper
open={!!Object.keys(this.state.widgetsClipboard.widgets).length}
style={{ width: '100%', textAlign: 'center', pointerEvents: 'none' }}
Expand Down Expand Up @@ -1857,6 +1874,8 @@ class App extends GenericApp {
/>
: null}
{this.renderAlertDialog()}
{this.renderConfirmDialog()}
{this.renderShowCodeDialog()}
{/* <IODialog
title="Delete widgets"
open={this.state.deleteWidgetsDialog}
Expand All @@ -1873,4 +1892,5 @@ class App extends GenericApp {
}
}


export default withStyles(styles)(App);
14 changes: 6 additions & 8 deletions src/src/Attributes/Widget/WidgetField.jsx
Expand Up @@ -201,16 +201,18 @@ const WidgetField = props => {

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}`);
Expand All @@ -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}`);
Expand All @@ -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}`);
Expand Down
78 changes: 78 additions & 0 deletions 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 <Dialog
open={!0}
onClose={() => this.props.onClose()}
maxWidth="xl"
fullWidth
>
<DialogTitle>{this.props.title || I18n.t('Code')}</DialogTitle>
<DialogContent>
<AceEditor
mode={this.props.mode || 'html'}
theme={this.props.themeType === 'dark' ? 'clouds_midnight' : 'chrome'}
readOnly
value={this.props.code}
width="100%"
setOptions={{
enableBasicAutocompletion: true,
enableLiveAutocompletion: true,
enableSnippets: true,
}}
/>
</DialogContent>
<DialogActions>
<Button
variant="contained"
onClick={() => {
copy(this.props.code);
window.alert(I18n.t('Copied to clipboard'));
}}
startIcon={<IconCopy />}
color="primary"
>
{I18n.t('Copy to clipboard')}
</Button>
<Button
variant="contained"
color="grey"
startIcon={<CloseIcon />}
onClick={() => this.props.onClose()}
>
{I18n.t('Close')}
</Button>
</DialogActions>
</Dialog>;
}
}

CodeDialog.propTypes = {
onClose: PropTypes.func.isRequired,
title: PropTypes.string,
themeType: PropTypes.string,
code: PropTypes.string.isRequired,
mode: PropTypes.string,
};

export default CodeDialog;
11 changes: 9 additions & 2 deletions src/src/Vis/visEngine.jsx
Expand Up @@ -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'),
Expand Down Expand Up @@ -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) => {

}
};
}

Expand Down Expand Up @@ -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,
Expand Down

0 comments on commit 6afaf55

Please sign in to comment.