@node-projects/web-component-designer-visualization-addons 0.1.0

package/dist/components/BindingsEditor.js

@@ -0,0 +1,298 @@
+import { BaseCustomWebComponentConstructorAppend, html, css } from '@node-projects/base-custom-webcomponent';
+import { BindingMode, BindingTarget } from '@node-projects/web-component-designer';
+import { BindableObjectsBrowser } from "@node-projects/web-component-designer-widgets-wunderbaum";
+import { BindingsEditorHistoric } from './BindingsEditorHistoric.js';
+export class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
+    static template = html `
+        <div id="root">
+            <div class="vertical-grid">
+                <div style="grid-column: 1/3">
+                    <div style="display: flex; flex-direction: column;">
+                        <div class="row">
+                            <span style="cursor: pointer;" title="to use multiple objects, seprate them with semicolon (;). access iobroker objects in properties via ?propertyName, access the propertyValue via ??propertyName. Bind to ioBroker object via $objectId. You could also use ioBroker signals inside of a Signal Name via {name}">objects</span>
+                        </div>
+                        <div style="display:flex;align-items: flex-end;">
+                            <input class="row" value="{{?this.objectNames::change}}" style="flex-grow: 1;">
+                            <button @click="_clear" style="height: 22px">X</button>
+                            <button @click="_select" style="height: 22px">...</button>
+                        </div>
+                        <div class="row">
+                            <label style="white-space: nowrap; margin-right: 4px;" title="if set, the value is converted to the type before binding is applied">type :</label>
+                            <select class="row" value="{{?this.objectValueType}}">
+                                <option selected value="">ignore</option>
+                                <option value="number">number</option>
+                                <option value="boolean">boolean</option>
+                                <option value="string">string</string>
+                            </select>
+                        </div>
+                        <div class="row">
+                            <input type="checkbox" disabled="[[!this.twoWayPossible]]" checked="{{this.twoWay::change}}" @change="_refresh">
+                            <span>two way binding</span>
+                            <span css:display="[[this.twoWay ? 'inline' : 'none']]" style="margin-left: 15px">events:&nbsp;</span>
+                            <input css:display="[[this.twoWay ? 'inline-block' : 'none']]" title="to use multiple events, seprate them with semicolon (;)" class="row" value="{{?this.events::change}}" style="flex-grow: 1;">
+                        </div>
+                        <div class="row" style="position: relative">
+                            <input type="checkbox" checked="{{this.invert::change}}">
+                            <span>invert logic</span>
+                            <button css:border="[[this.historic ? 'solid lime 5px' : 'none']]" style="position: absolute; right: 1px; top: 5px; padding: 10px;" @click="showHistoric">historic</button>
+                        </div>
+                        <div class="row">
+                            <span style="cursor: pointer;" title="javascript expression. access objects with __0, __1, ...">formula</span>
+                        </div>
+                        <div class="row">
+                            <node-projects-code-view-monaco id="expression" single-row language="javascript" style="width: 100%; min-height: 17px; height: 17px; position: relative; overflow: hidden; resize: vertical;" .value="{{?this.expression}}"></iobroker-webui-monaco-editor>
+                        </div>
+                        <div class="row">
+                            <span style="cursor: pointer;" title="javascript expression. access property with 'value'">formula write back (two way)</span>
+                        </div>
+                        <div class="row">
+                            <node-projects-code-view-monaco id="expression2way" read-only="[[!this.twoWay]]" $readonly="[[!this.twoWay]]" single-row language="javascript" style="width: 100%; min-height: 17px; height: 17px; position: relative; overflow: hidden; resize: vertical;" .value="{{?this.expressionTwoWay}}"></iobroker-webui-monaco-editor>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="vertical-grid" style="margin-top: 10px;">
+                <div>
+                    <div class="input-headline">
+                        <span>converter</span>:
+                    </div>
+                </div>
+            </div>
+            <div class="vertical-grid" style="border: solid 1px black; padding: 10px; overflow-y: auto;">
+                <div class="bottomleft">
+                    <div id="converterGrid" style="height: 100%;">
+                        <div style="width: 100%; height: 20px; display: flex;">
+                            <div style="width: 39%">condition</div>
+                            <div style="width: 59%">value</div>
+                        </div>
+                        <template repeat:item="[[this.converters]]">
+                            <div css:background-color="[[item.activeRow ? 'gray' : '']]" style="width: 100%; display: flex; height: 26px; justify-content: center; align-items: center; gap: 5px;">
+                                <input type="text" value="{{item.key}}" @focus="[[this._focusRow(index)]]" style="width: 39%">
+                                <input type="[[this._property.type == 'color' ? 'color' : 'text']]" value="{{item.value}}" @focus="[[this._focusRow(index)]]" style="width: 59%">
+                            </div>
+                        </template>
+                    </div>
+                </div>
+                <div class="controlbox" id="grid-controls">
+                    <button type="button" id="add-row-button" value="add" @click="addConverter">
+                        <span>add</span>
+                    </button>
+                    <button id="remove-row-button" value="remove" style="margin-top: 6px;" @click="removeConverter">
+                        <span>remove</span>
+                    </button>
+                </div>
+            </div>
+        </div>`;
+    static style = css `
+        :host {
+            box-sizing: border-box;
+        }
+        
+        #converterGrid {
+            display: flex;
+            gap: 2px;
+            flex-direction: column;
+        }
+        #converterGrid input {
+            height: 20px;
+            box-sizing: border-box;
+        }
+
+        .padding_top {
+            padding-top: 30px;
+        }
+
+        .row{
+            margin-top: 3px;
+            display: flex;
+            align-items: center;
+        }
+
+        .controlbox {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .input-headline {
+            height: 30px;
+        }
+
+        input[type="checkbox"] {
+            margin-right: 15px;
+            width: 15px;
+            height: 15px;
+        }
+
+        select {
+            width: 100%;
+        }
+
+        #root {
+            padding: 2px 10px;
+            display: grid;
+            grid-template-rows: min-content min-content;
+            overflow: auto;
+            height: calc(100% - 4px)
+        }
+
+        .vertical-grid {
+            display: grid;
+            grid-template-columns: calc((100% - 150px) - 30px) 150px;
+            gap: 30px;
+        }
+
+        #grid input, #list input { 
+            border:0px;
+        }
+
+        #tagdata_type {
+            height: 24px;
+            font-size: inherit;
+        }
+        
+        iobroker-webui-monaco-editor:not([readonly]) {
+            border: 1px black solid;
+        }
+        
+        iobroker-webui-monaco-editor[readonly] {
+            border: 1px lightgray solid;
+        }`;
+    static is = 'iobroker-webui-dynamics-editor';
+    static properties = {
+        twoWayPossible: Boolean,
+        twoWay: Boolean,
+        expression: String,
+        objectNames: String,
+        events: String,
+        invert: Boolean,
+        converters: Array,
+        historic: Object
+    };
+    twoWayPossible = false;
+    twoWay = false;
+    expression = '';
+    expressionTwoWay = '';
+    historic;
+    objectNames = '';
+    events = '';
+    invert = false;
+    converters = [];
+    objectValueType;
+    _property;
+    _binding;
+    _bindingTarget;
+    _serviceContainer;
+    _shell;
+    _activeRow = -1;
+    constructor(property, binding, bindingTarget, servieContainer, shell) {
+        super();
+        super._restoreCachedInititalValues();
+        this._property = property;
+        this._binding = binding;
+        this._bindingTarget = bindingTarget;
+        this._serviceContainer = servieContainer;
+        this._shell = shell;
+    }
+    ready() {
+        this._parseAttributesToProperties();
+        this._assignEvents();
+        this.twoWayPossible = false;
+        if (this._bindingTarget == BindingTarget.property)
+            this.twoWayPossible = true;
+        if (this._binding) {
+            this.twoWay = this._binding.mode == BindingMode.twoWay;
+            this.expression = this._binding.expression;
+            this.expressionTwoWay = this._binding.expressionTwoWay;
+            this.historic = this._binding.historic;
+            this.invert = this._binding.invert;
+            this.objectValueType = this._binding.type;
+            if (this._binding.bindableObjectNames)
+                this.objectNames = this._binding.bindableObjectNames.join(';');
+            if (this._binding.converter) {
+                for (let c in this._binding.converter) {
+                    this.converters.push({ key: c, value: this._binding.converter[c] });
+                }
+            }
+            if (this._binding.changedEvents && this._binding.changedEvents.length)
+                this.events = this._binding.changedEvents.join(';');
+        }
+        if (this.expression) {
+            let edt = this._getDomElement('expression');
+            if (this.expression.indexOf('\n') >= 0) {
+                edt.style.height = (3 * 17) + 'px';
+            }
+        }
+        if (this.expressionTwoWay) {
+            let edt = this._getDomElement('expression2way');
+            if (this.expressionTwoWay.indexOf('\n') >= 0) {
+                edt.style.height = (3 * 17) + 'px';
+            }
+        }
+        this._bindingsParse();
+    }
+    _focusRow(index) {
+        this._activeRow = index;
+        this._updatefocusedRow();
+    }
+    _updatefocusedRow() {
+        let g = this._getDomElement('converterGrid');
+        g.querySelectorAll('div').forEach(x => x.style.background = '');
+        if (this._activeRow >= 0)
+            g.children[this._activeRow + 1].style.background = 'gray';
+    }
+    _clear() {
+        this.objectNames = '';
+        this._bindingsRefresh();
+    }
+    _refresh() {
+        requestAnimationFrame(() => {
+            this._bindingsRefresh();
+        });
+    }
+    async _select() {
+        let b = new BindableObjectsBrowser();
+        b.initialize(this._serviceContainer);
+        b.title = 'select signal...';
+        const abortController = new AbortController();
+        b.objectDoubleclicked.on(() => {
+            abortController.abort();
+            if (this.objectNames != '')
+                this.objectNames += ';';
+            this.objectNames += b.selectedObject.fullName;
+            this._bindingsRefresh();
+        });
+        let res = await this._shell.openConfirmation(b, { x: 100, y: 100, width: 400, height: 300, parent: this, abortSignal: abortController.signal });
+        if (res) {
+            if (this.objectNames != '')
+                this.objectNames += ';';
+            this.objectNames += b.selectedObject.fullName;
+            this._bindingsRefresh();
+        }
+    }
+    async showHistoric() {
+        let h = new BindingsEditorHistoric(this.historic);
+        const abortController = new AbortController();
+        h.title = "Edit historic binding to: " + this._property.name;
+        let res = await this._shell.openConfirmation(h, { x: 100, y: 100, width: 420, height: 510, parent: this, abortSignal: abortController.signal, disableResize: true, cancelText: 'Remove' });
+        if (!res) {
+            this.historic = null;
+        }
+        else {
+            this.historic = h.historic;
+        }
+        this._bindingsRefresh();
+    }
+    addConverter() {
+        this.converters.push({ key: '', value: '' });
+        this._activeRow = this.converters.length - 1;
+        this._bindingsRefresh();
+        this._updatefocusedRow();
+    }
+    removeConverter() {
+        this.converters.splice(this._activeRow, 1);
+        this._activeRow = -1;
+        this._bindingsRefresh();
+        this._updatefocusedRow();
+    }
+}
+customElements.define(BindingsEditor.is, BindingsEditor);

package/dist/components/BindingsEditorHistoric.d.ts

@@ -0,0 +1,14 @@
+import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
+export declare class BindingsEditorHistoric extends BaseCustomWebComponentConstructorAppend {
+    #private;
+    static readonly template: HTMLTemplateElement;
+    static readonly style: CSSStyleSheet;
+    static readonly is = "node-projects-bindings-editor-historic";
+    historic: any;
+    static readonly properties: {
+        historic: ObjectConstructor;
+    };
+    constructor(historic: any);
+    ready(): void;
+    refresh(): void;
+}

package/dist/components/BindingsEditorHistoric.js

@@ -0,0 +1,97 @@
+import { BaseCustomWebComponentConstructorAppend, html, css } from '@node-projects/base-custom-webcomponent';
+export class BindingsEditorHistoric extends BaseCustomWebComponentConstructorAppend {
+    static template = html `
+        <span style="position:absolute;left:30px;top:26px;">from</span>
+        <span style="position:absolute;left:30px;top:77px;">count</span>
+        <span style="position:absolute;left:30px;top:123px;">limit</span>
+        <span style="position:absolute;left:30px;top:150px;">round</span>
+        <span style="position:absolute;left:55px;top:181px;">return newest entries</span>
+        <span style="position:absolute;left:55px;top:201px;">remove border values</span>
+        <span style="position:absolute;left:30px;top:301px;">step</span>
+        <span style="position:absolute;left:30px;top:270px;">aggregate</span>
+        <span style="position:absolute;left:30px;top:227px;">ignore null</span>
+        <input type="datetime-local" value="{{this.historic.from}}" style="position:absolute;left:75.9219px;top:26px;width:184px;">
+        <span style="position:absolute;left:31px;top:52px;">to</span>
+        <input type="datetime-local" value="{{this.historic.to}}" style="position:absolute;left:76px;top:51.4375px;width:184px;">
+        <input type="number" value="{{this.historic.count}}" style="position:absolute;left:76px;top:78.4415px;width:184px;">
+        <input type="number" value="{{this.historic.limit}}" style="position:absolute;left:76px;top:125.5px;width:184px;">
+        <input type="number" value="{{this.historic.round}}" style="position:absolute;left:76px;top:152px;width:184px;">
+        <input type="number" value="{{this.historic.step}}" style="position:absolute;left:75.921875px;top:301px;width:184px;">
+        <select value="{{?this.historic.aggregate}}" @change="[[this.refresh()]]" style="position:absolute;left:142px;top:273px;width:118px;height:21px;">
+            <option>none</option>
+            <option>minmax</option>
+            <option>max</option>
+            <option>min</option>
+            <option>average</option>
+            <option>total</option>
+            <option>count</option>
+            <option>percentile</option>
+            <option>quantile</option>
+            <option>integral</option>
+        </select>
+        <select value="{{this.historic.ignoreNull}}" style="position:absolute;left:142px;top:230px;width:119px;height:21px;">
+            <option>false</option>
+            <option>true</option>
+            <option>0</option>
+        </select>
+        <input type="checkbox" checked="{{this.historic.returnNewestEntries}}" style="position:absolute;left:35px;top:184px;">
+        <input type="checkbox" checked="{{this.historic.removeBorderValues}}" style="position:absolute;left:35px;top:204px;">
+        <div style="position:absolute;left:266px;top:26px;width:135px;height:201px;border:1px solid black;">
+            <div style="position:absolute;left:25px;top:36px;width:117px;height:154px;grid-template-columns:20px 1fr;display:grid;">
+                <input type="checkbox" checked="{{this.historic.from}}" style="grid-column:1;grid-row:1;">
+                <span>from</span>
+                <input type="checkbox" checked="{{this.historic.ack}}">
+                <span>ack</span>
+                <input type="checkbox" checked="{{this.historic.q}}">
+                <span>q</span>
+                <input type="checkbox" checked="{{this.historic.user}}">
+                <span>user</span>
+                <input type="checkbox" checked="{{this.historic.comment}}">
+                <span>comment</span>
+                <input type="checkbox" checked="{{this.historic.id}}">
+                <span>id</span>
+            </div>
+            <span style="position:absolute;left:8px;top:6px;">include fields</span>
+        </div>
+        <span style="position:absolute;left:31.8203px;top:390px;">update all (ms)</span>
+        <input value="{{this.historic.reloadInterval}}" type="number" style="position:absolute;left:142px;top:390px;width:119px;">
+        <span css:visibility="[[this.historic.aggregate == 'percentile' ? 'visible' : 'collapse']]" id="lblPercentile" style="position:absolute;left:30px;top:325px;">percentile</span>
+        <input css:visibility="[[this.historic.aggregate == 'percentile' ? 'visible' : 'collapse']]" value="{{this.historic.percentile}}" type="number" id="percentile" style="position:absolute;left:109px;top:325px;width:151px;">
+        <span css:visibility="[[this.historic.aggregate == 'integral' ? 'visible' : 'collapse']]" id="lblIntegral" style="position:absolute;left:30px;top:325px;">integral unit</span>
+        <input css:visibility="[[this.historic.aggregate == 'integral' ? 'visible' : 'collapse']]" value="{{this.historic.integralUnit}}" type="number" id="integralUnit" style="position:absolute;left:126px;top:325px;width:134px;">
+        <select css:visibility="[[this.historic.aggregate == 'integral' ? 'visible' : 'collapse']]" value="{{this.historic.integralInterpolation}}" style="position:absolute;left:178.93px;top:349px;width:81px;height:21px;">
+            <option>none</option>
+            <option>linear</option>
+        </select>
+        <span css:visibility="[[this.historic.aggregate == 'integral' ? 'visible' : 'collapse']]" style="position:absolute;left:29.9219px;top:346px;">integral interpolation</span>
+        <input css:visibility="[[this.historic.aggregate == 'quantile' ? 'visible' : 'collapse']]" value="{{this.historic.quantile}}" type="number" id="quantile" style="position:absolute;left:107px;top:325px;width:153px;">
+        <span css:visibility="[[this.historic.aggregate == 'quantile' ? 'visible' : 'collapse']]" id="lblQuantile" style="position:absolute;left:30px;top:325px;">quantile</span>
+        <span style="position:absolute;left:34px;top:417px;">instance</span>
+        <input type="text" value="{{?this.historic.instance}}" style="position:absolute;left:104px;top:419px;width:155px;">`;
+    static style = css `
+        :host {
+            box-sizing: border-box;
+        }`;
+    static is = 'node-projects-bindings-editor-historic';
+    historic;
+    static properties = {
+        historic: Object
+    };
+    constructor(historic) {
+        super();
+        this._restoreCachedInititalValues();
+        this.historic = historic ?? { reloadInterval: 2000 };
+    }
+    ready() {
+        this._bindingsParse();
+    }
+    #refreshing = false;
+    refresh() {
+        if (!this.#refreshing) {
+            this.#refreshing = true;
+            this._bindingsRefresh(null, true);
+            this.#refreshing = false;
+        }
+    }
+}
+customElements.define(BindingsEditorHistoric.is, BindingsEditorHistoric);

package/dist/components/PropertyGridExt.js

@@ -0,0 +1 @@
+"use strict";

package/dist/components/ScriptEditor.d.ts

@@ -0,0 +1,28 @@
+import { BaseCustomWebComponentConstructorAppend } from "@node-projects/base-custom-webcomponent";
+import { Script } from "../scripting/Script.js";
+import { ServiceContainer } from "@node-projects/web-component-designer";
+import { VisualizationHandler } from "../interfaces/VisualizationHandler";
+import { VisualizationShell } from "../interfaces/VisualizationShell";
+import '@node-projects/splitview.webcomponent';
+export declare class SimpleScriptEditor extends BaseCustomWebComponentConstructorAppend {
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    static readonly is = "node-projects-simple-script-editor";
+    serviceContainer: ServiceContainer;
+    visualizationHandler: VisualizationHandler;
+    visualizationShell: VisualizationShell;
+    scriptCommandsTypeInfo: any;
+    propertiesTypeInfo: any;
+    private _script;
+    private _commandListDiv;
+    private _commandListFancyTree;
+    private _possibleCommands;
+    private _propertygrid;
+    constructor();
+    ready(): Promise<void>;
+    private addPossibleCommands;
+    loadScript(script: Script): void;
+    private createTreeItem;
+    addItem(): void;
+    getScriptCommands(): any[];
+}