Skip to content

Commit

Permalink
Work on widgets
Browse files Browse the repository at this point in the history
  • Loading branch information
@GermanBluefox
GermanBluefox committed Dec 5, 2023
1 parent 05443cd commit a574c2c
Show file tree
Hide file tree
Showing 34 changed files with 272 additions and 109 deletions.
8 changes: 4 additions & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,12 @@
"@iobroker/adapter-core": "^3.0.4",
"axios": "^1.6.2",
"jsonwebtoken": "^9.0.2",
"mime": "^3.0.0"
"mime": "^4.0.0"
},
"devDependencies": {
"@alcalzone/release-script": "^3.6.0",
"@alcalzone/release-script-plugin-iobroker": "^3.6.0",
"@alcalzone/release-script-plugin-license": "^3.5.9",
"@alcalzone/release-script": "^3.7.0",
"@alcalzone/release-script-plugin-iobroker": "^3.7.0",
"@alcalzone/release-script-plugin-license": "^3.7.0",
"@iobroker/vis-2-widgets-testing": "^0.3.0",
"@tsconfig/node16": "^16.1.1",
"@types/mocha": "^10.0.6",
Expand Down
24 changes: 12 additions & 12 deletions src/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,23 +8,23 @@
"@devbookhq/splitter": "^1.4.2",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@iobroker/adapter-react-v5": "^4.7.8",
"@iobroker/adapter-react-v5": "^4.7.9",
"@iobroker/type-detector": "^3.0.5",
"@iobroker/vis-2-widgets-react-dev": "^1.0.2",
"@material-icons/svg": "^1.0.33",
"@mui/icons-material": "^5.14.18",
"@mui/material": "5.14.14",
"@mui/icons-material": "^5.14.19",
"@mui/material": "^5.14.19",
"@mui/styles": "5.14.14",
"@mui/x-date-pickers": "^6.18.2",
"@reduxjs/toolkit": "^1.9.7",
"@sentry/browser": "^7.83.0",
"@sentry/integrations": "^7.83.0",
"ace-builds": "^1.31.2",
"@mui/x-date-pickers": "^6.18.3",
"@reduxjs/toolkit": "^2.0.1",
"@sentry/browser": "^7.85.0",
"@sentry/integrations": "^7.85.0",
"ace-builds": "^1.32.0",
"craco-module-federation": "^1.1.0",
"dayjs": "^1.11.10",
"echarts": "^5.4.3",
"echarts-for-react": "^3.0.2",
"eslint": "^8.54.0",
"eslint": "^8.55.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-import-resolver-typescript": "^3.6.1",
"eslint-plugin-eqeqeq-fix": "^1.0.3",
Expand All @@ -35,7 +35,7 @@
"eslint-plugin-react-hooks": "^4.6.0",
"html-to-image": "^1.11.11",
"jquery-ui": "^1.13.2",
"mime": "^3.0.0",
"mime": "^4.0.0",
"moment": "^2.29.4",
"mui-nested-menu": "^3.2.2",
"prop-types": "^15.8.1",
Expand All @@ -49,7 +49,7 @@
"react-dropzone": "^14.2.3",
"react-icons": "^4.12.0",
"react-scripts": "^5.0.1",
"redux": "^4.2.1",
"redux": "^5.0.0",
"sass": "^1.69.5",
"uuid": "^9.0.1"
},
Expand All @@ -71,4 +71,4 @@
"not ie <= 11",
"not op_mini all"
]
}
}
2 changes: 1 addition & 1 deletion src/public/material-icons/baseline.json
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/public/material-icons/outline.json
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/public/material-icons/round.json
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/public/material-icons/sharp.json
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/public/material-icons/twotone.json
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions src/public/widgets/jqui.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1700,7 +1700,7 @@
</div>
</script-->

<script id="tplJquiToogle"
<!--script id="tplJquiToogle"
type="text/ejs"
class="vis-tpl"
data-vis-prev='<div id="prev_tplJquiToogle" style="position: relative; text-align: initial;padding: 4px "><div class="ui-widget ui-corner-all ui-state-default vis-widget_prev" style="width: 90px; height: 19px; padding: 10px;"> <div class="vis-widget-prev-body"><label>&nbsp;Toggle&nbsp;</label><img class="imgToggleFalse" src="./icon/add.png" style=" vertical-align:middle; height:100%"></div></div></div>'
Expand All @@ -1723,7 +1723,7 @@
<div <%= (el) -> vis.binds.jqueryui.itoggle(el) %>></div>
</div>
</div>
</script>
</script-->

<!--script id="tplJquiInputDate"
type="text/ejs"
Expand Down
18 changes: 12 additions & 6 deletions src/src/Attributes/Widget/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,9 @@ import {
Code as CodeIcon,
Info as InfoIcon,
Delete,
Add, LinkOff, Link as LinkIcon,
Add,
LinkOff,
Link as LinkIcon,
} from '@mui/icons-material';

import { I18n, Utils } from '@iobroker/adapter-react-v5';
Expand Down Expand Up @@ -1130,10 +1132,14 @@ class Widget extends Component {
}
}

this.props.changeProject(project);
store.dispatch(recalculateFields(true));
this.changeProject(project);
}

changeProject = (project, ignoreHistory) => {
this.props.changeProject(project, ignoreHistory);
store.dispatch(recalculateFields(true));
};

renderFieldRow(group, field, fieldIndex) {
if (!field) {
return null;
Expand Down Expand Up @@ -1274,7 +1280,7 @@ class Widget extends Component {
isDifferent={this.state.isDifferent[field.name]}
project={store.getState().visProject}
socket={this.props.socket}
changeProject={this.props.changeProject}
changeProject={this.changeProject}
/>
: <WidgetField
widgetType={this.state.widgetType}
Expand All @@ -1288,6 +1294,7 @@ class Widget extends Component {
index={group.index}
isDifferent={this.state.isDifferent[field.name]}
{...this.props}
changeProject={this.changeProject}
/>}
</div>
</td>
Expand Down Expand Up @@ -1340,8 +1347,7 @@ class Widget extends Component {
delete project[this.props.selectedView].widgets[wid].data[`g_${group.name}`];
});

this.props.changeProject(project);
store.dispatch(recalculateFields(true));
this.changeProject(project);
}

render() {
Expand Down
14 changes: 7 additions & 7 deletions src/src/Toolbar/ViewsManager/ViewDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,18 +21,18 @@ import IODialog from '@/Components/IODialog';
import { Project } from '@/types';

interface ViewDialogProps {
changeProject: (project: Project) => Promise<void>,
changeView: (viewName: string) => Promise<void>,
dialog: string,
changeProject: (project: Project) => Promise<void>;
changeView: (viewName: string) => Promise<void>;
dialog: string;
/** Name of view */
dialogName: string,
dialogName: string;
dialogView: string;
dialogCallback?: { cb: (dialogName: string) => void };
selectedView: string;
setDialog: (closeAction: null) => void;
setDialogName: (dialogName: string) => void,
setDialogView: (action: null) => void,
dialogParentId?: string,
setDialogName: (dialogName: string) => void;
setDialogView: (action: null) => void;
dialogParentId?: string;
noTranslation: boolean;
setDialogParentId: (action: null) => void;
}
Expand Down
2 changes: 1 addition & 1 deletion src/src/Vis/Widgets/Basic/BasicSvgShape.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import React from 'react';
import { GetRxDataFromWidget, RxRenderWidgetProps } from '@/types';
import VisRxWidget from '@/Vis/visRxWidget';

type RxData = GetRxDataFromWidget<typeof BasicSvgShape>
type RxData = GetRxDataFromWidget<typeof BasicSvgShape>;

export default class BasicSvgShape extends VisRxWidget<RxData> {
/**
Expand Down
11 changes: 8 additions & 3 deletions src/src/Vis/Widgets/JQui/BulkEditor.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -560,8 +560,13 @@ class BulkEditor extends React.Component {
}

let button;
let iconSrc = this.state.images[i] || this.state.icons[i] || '';
if (iconSrc.startsWith('_PRJ_NAME/')) {
iconSrc = iconSrc.replace('_PRJ_NAME/', `../${this.props.adapterName}.${this.props.instance}/${this.props.projectName}/`);
}

if (this.props.data.type === 'radio') {
const icon = <Icon src={this.state.images[i] || this.state.icons[i] || ''} style={{ width: 24, height: 24 }} />;
const icon = <Icon src={iconSrc} style={{ width: 24, height: 24 }} />;
const text = <div style={{ display: 'flex', gap: 4 }}>
{icon}
{this.state.texts[i]}
Expand All @@ -575,7 +580,7 @@ class BulkEditor extends React.Component {
label={text}
/>;
} else if (this.props.data.type === 'select') {
const icon = <Icon src={this.state.images[i] || this.state.icons[i] || ''} style={{ width: 24, height: 24 }} />;
const icon = <Icon src={iconSrc} style={{ width: 24, height: 24 }} />;
const text = <div style={{ display: 'flex', gap: 4 }}>
{icon}
{this.state.texts[i]}
Expand All @@ -592,7 +597,7 @@ class BulkEditor extends React.Component {
color={this.state.activeLine === i ? 'primary' : 'grey'}
variant={this.props.data.variant === undefined ? 'contained' : this.props.data.variant}
onClick={() => this.setState({ activeLine: i })}
startIcon={<Icon src={this.state.images[i] || this.state.icons[i] || ''} style={{ width: 24, height: 24 }} />}
startIcon={<Icon src={iconSrc} style={{ width: 24, height: 24 }} />}
>
{this.state.texts[i]}
</Button>;
Expand Down
76 changes: 46 additions & 30 deletions src/src/Vis/Widgets/JQui/JQuiBinaryState.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ class JQuiBinaryState extends VisRxWidget {
type: 'select',
noTranslation: true,
default: 'button',
options: ['button', 'html', 'radio', 'checkbox', 'image', 'switch'],
options: ['button', 'round-button', 'html', 'radio', 'checkbox', 'image', 'switch'],
},
{
name: 'oid',
Expand All @@ -78,16 +78,10 @@ class JQuiBinaryState extends VisRxWidget {
label: 'jqui_inverted',
type: 'checkbox',
},
{
name: 'widgetTitle',
label: 'jqui_name',
type: 'text',
},
{
name: 'test',
type: 'select',
label: 'jqui_test',
noTranslation: true,
options: [
{ value: '', label: 'none' },
{ value: true, label: 'jqui_true' },
Expand Down Expand Up @@ -370,17 +364,41 @@ class JQuiBinaryState extends VisRxWidget {
if (this.state.width < this.state.height) {
style.width = `calc(100% - ${(this.state.rxData.padding || 0) * 2}px)`;
style.height = 'auto';
style.maxHeight = '100%';
} else {
style.height = `calc(100% - ${(this.state.rxData.padding || 0) * 2}px)`;
style.width = 'auto';
style.maxWidth = '100%';
}
} else if (this.state.rxData.type === 'round-button') {
if (this.state.width < this.state.height) {
style.width = `calc(50% - ${(this.state.rxData.padding || 0) * 2}px)`;
style.height = 'auto';
style.maxHeight = '100%';
} else {
style.height = `calc(50% - ${(this.state.rxData.padding || 0) * 2}px)`;
style.width = 'auto';
style.maxWidth = '100%';
}
} else if (this.state.width < this.state.height) {
style.width = `calc(100% - ${(this.state.rxData.padding || 0) * 2}px)`;
style.height = 'auto';
style.maxHeight = '100%';
} else {
style.height = `calc(100% - ${(this.state.rxData.padding || 0) * 2}px)`;
style.width = 'auto';
style.maxWidth = '100%';
}

if (this.state.rxData.padding) {
style.padding = this.state.rxData.padding;
}

if (icon) {
if (icon.startsWith('_PRJ_NAME/')) {
icon = icon.replace('_PRJ_NAME/', `../${this.props.context.adapterName}.${this.props.context.instance}/${this.props.context.projectName}/`);
}

return <Icon
key="icon"
style={style}
Expand Down Expand Up @@ -412,32 +430,35 @@ class JQuiBinaryState extends VisRxWidget {
const icon = this.renderIcon(isOn);
const text = this.renderText(isOn);

if (!text.text) {
style.zIndex = this.props.editMode ? 0 : undefined;
// Fab
return <Fab
style={style}
color={isOn ? 'primary' : 'grey'}
onClick={() => this.onClick()}
>
{icon}
</Fab>;
}

style.color = text.color || undefined;

// Button
return <Button
startIcon={icon}
variant={this.state.rxData.variant === undefined ? 'contained' : this.state.rxData.variant}
color={isOn ? 'primary' : 'grey'}
onClick={() => this.onClick()}
style={style}
>
{icon}
{text.text}
</Button>;
}

renderFab(isOn, style) {
const icon = this.renderIcon(isOn);
const text = this.renderText(isOn);

style.zIndex = this.props.editMode ? 0 : undefined;
// Fab
return <Fab
style={style}
color={isOn ? 'primary' : 'grey'}
onClick={() => this.onClick()}
>
{icon || text.text}
</Fab>;
}

renderHtml(isOn) {
let html;
if (isOn) {
Expand Down Expand Up @@ -640,9 +661,7 @@ class JQuiBinaryState extends VisRxWidget {
buttonStyle.height = '100%';
let content;
const bodyStyle = { textAlign: 'center' };
if (this.state.rxData.type === 'button' && !this.state.rxData.jquery_style) {
content = this.renderButton(isOn, buttonStyle);
} else if (this.state.rxData.type === 'radio') {
if (this.state.rxData.type === 'radio') {
content = this.renderRadio(isOn, buttonStyle);
} else if (this.state.rxData.type === 'html' || (this.state.rxData.type === 'button' && this.state.rxData.jquery_style)) {
bodyStyle.display = 'flex';
Expand All @@ -659,13 +678,10 @@ class JQuiBinaryState extends VisRxWidget {
} else if (this.state.rxData.type === 'image') {
bodyStyle.cursor = !this.state.rxData.readOnly ? 'pointer' : undefined;
content = this.renderIcon(isOn, buttonStyle);
}

if (this.state.rxData.widgetTitle) {
content = <FormControl>
<FormLabel>{this.state.rxData.widgetTitle}</FormLabel>
{content}
</FormControl>;
} else if (this.state.rxData.type === 'round-button') {
content = this.renderFab(isOn, buttonStyle);
}else if (!this.state.rxData.jquery_style) {
content = this.renderButton(isOn, buttonStyle);
}

const result = <div
Expand Down
Loading

0 comments on commit a574c2c

Please sign in to comment.