@openremote/or-dashboard-builder 1.2.0-snapshot.20240512154942

package/src/panels/thresholds-panel.ts

@@ -0,0 +1,285 @@
+import {InputType, OrInputChangedEvent} from "@openremote/or-mwc-components/or-mwc-input";
+import {css, CSSResult, html, LitElement, PropertyValues, TemplateResult, unsafeCSS} from "lit";
+import {customElement, property} from "lit/decorators.js";
+import {ifDefined} from "lit/directives/if-defined.js";
+import {DefaultColor5} from "@openremote/core";
+import {style} from "../style";
+
+export class ThresholdChangeEvent extends CustomEvent<[number, string][]> {
+
+    public static readonly NAME = "threshold-change";
+
+    constructor(thresholds: [number, string][]) {
+        super(ThresholdChangeEvent.NAME, {
+            bubbles: true,
+            composed: true,
+            detail: thresholds
+        });
+    }
+}
+
+export class TextColorsChangeEvent extends CustomEvent<[string, string][]> {
+
+    public static readonly NAME = "text-colors-change";
+
+    constructor(textColors: [string, string][]) {
+        super(TextColorsChangeEvent.NAME, {
+            bubbles: true,
+            composed: true,
+            detail: textColors
+        });
+    }
+}
+
+export class BoolColorsChangeEvent extends CustomEvent<{ type: string, false: string, true: string }> {
+
+    public static readonly NAME = "bool-colors-change";
+
+    constructor(boolColors: { type: string, false: string, true: string }) {
+        super(BoolColorsChangeEvent.NAME, {
+            bubbles: true,
+            composed: true,
+            detail: boolColors
+        });
+    }
+}
+
+const styling = css`
+
+  #thresholds-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .threshold-list-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .threshold-list-item-colour {
+    height: 100%;
+    padding: 0 4px 0 0;
+  }
+
+  .threshold-list-item:hover .button-clear {
+    visibility: visible;
+  }
+
+  .button-clear {
+    background: none;
+    visibility: hidden;
+    color: var(--or-app-color5, ${unsafeCSS(DefaultColor5)});
+    --or-icon-fill: var(--or-app-color5, ${unsafeCSS(DefaultColor5)});
+    display: inline-block;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+  }
+
+  .button-clear:hover {
+    --or-icon-fill: var(--or-app-color4);
+  }
+
+`;
+
+@customElement("thresholds-panel")
+export class ThresholdsPanel extends LitElement {
+
+    @property()
+    protected thresholds: [number, string][] = [];
+
+    @property()
+    protected textColors: [string, string][] = [];
+
+    @property()
+    protected boolColors!: { type: string, false: string, true: string };
+
+    @property()
+    protected readonly min?: number;
+
+    @property()
+    protected readonly max?: number;
+
+    @property()
+    protected readonly valueType!: string;
+
+    static get styles(): CSSResult[] {
+        return [styling, style];
+    }
+
+    protected updated(changedProps: PropertyValues) {
+        if (changedProps.has('thresholds') && this.thresholds) {
+            this.dispatchEvent(new ThresholdChangeEvent(this.thresholds));
+        }
+        if (changedProps.has('textColors') && this.textColors) {
+            this.dispatchEvent(new TextColorsChangeEvent(this.textColors));
+        }
+        if (changedProps.has('boolColors') && this.boolColors) {
+            this.dispatchEvent(new BoolColorsChangeEvent(this.boolColors));
+        }
+    }
+
+    protected render(): TemplateResult {
+        return html`
+            <div id="thresholds-list" class="expanded-panel">
+
+                <!-- Thresholds by number -->
+                ${(this.valueType === 'number' || this.valueType === 'positiveInteger'
+                        || this.valueType === 'positiveNumber' || this.valueType === 'negativeInteger'
+                        || this.valueType === 'negativeNumber') ? html`
+                    ${(this.thresholds as [number, string][]).sort((x, y) => (x[0] < y[0]) ? -1 : 1).map((threshold, index) => {
+                        return html`
+                            <div class="threshold-list-item">
+                                <div class="threshold-list-item-colour">
+                                    <or-mwc-input type="${InputType.COLOUR}" value="${threshold[1]}"
+                                                  @or-mwc-input-changed="${(event: OrInputChangedEvent) => {
+                                                      this.thresholds[index][1] = event.detail.value;
+                                                      this.requestUpdate('thresholds');
+                                                  }}"
+                                    ></or-mwc-input>
+                                </div>
+                                <or-mwc-input type="${InputType.NUMBER}" comfortable .value="${threshold[0]}"
+                                              ?disabled="${index === 0 && this.max}"
+                                              .min="${ifDefined(this.min)}" .max="${ifDefined(this.max)}"
+                                              @or-mwc-input-changed="${(event: OrInputChangedEvent) => {
+                                                  if ((!this.min || event.detail.value >= this.min) && (!this.max || event.detail.value <= this.max)) {
+                                                      this.thresholds[index][0] = event.detail.value;
+                                                      this.requestUpdate('thresholds');
+                                                  }
+                                              }}"
+                                ></or-mwc-input>
+                                ${index === 0 ? html`
+                                    <button class="button-clear"
+                                            style="margin-left: 8px;">
+                                        <or-icon icon="lock" style="--or-icon-fill: var(--or-app-color5, ${unsafeCSS(DefaultColor5)});"></or-icon>
+                                    </button>
+                                ` : html`
+                                    <button class="button-clear"
+                                            style="margin-left: 8px;"
+                                            @click="${() => {
+                                                this.removeThreshold(threshold);
+                                            }}">
+                                        <or-icon icon="close-circle"></or-icon>
+                                    </button>
+                                `}
+                            </div>
+                        `
+                    })}
+                    <or-mwc-input .type="${InputType.BUTTON}" label="threshold" icon="plus"
+                                  @or-mwc-input-changed="${() => this.addNewThreshold()}">
+                    </or-mwc-input>
+                ` : null}
+
+                <!-- Thresholds by boolean -->
+                ${(this.valueType === 'boolean') ? html`
+                    <div class="threshold-list-item">
+                        <div class="threshold-list-item-colour">
+                            <or-mwc-input type="${InputType.COLOUR}" value="${this.boolColors.true}"
+                                          @or-mwc-input-changed="${(event: OrInputChangedEvent) => {
+                                              this.boolColors.true = event.detail.value;
+                                              this.requestUpdate('boolColors');
+                                          }}"
+                            ></or-mwc-input>
+                        </div>
+                        <or-mwc-input type="${InputType.TEXT}" comfortable .value="${'True'}" .readonly="${true}"
+                        ></or-mwc-input>
+                    </div>
+                    <div class="threshold-list-item">
+                        <div class="threshold-list-item-colour">
+                            <or-mwc-input type="${InputType.COLOUR}" value="${this.boolColors.false}"
+                                          @or-mwc-input-changed="${(event: OrInputChangedEvent) => {
+                                              this.boolColors.false = event.detail.value;
+                                              this.requestUpdate('boolColors');
+                                          }}"
+                            ></or-mwc-input>
+                        </div>
+                        <or-mwc-input type="${InputType.TEXT}" comfortable .value="${'False'}" .readonly="${true}"
+                        ></or-mwc-input>
+                    </div>
+                ` : null}
+
+                <!-- Thresholds by string -->
+                ${(this.valueType === 'text' && this.textColors) ? html`
+                    ${(this.textColors as [string, string][]).map((threshold, index) => {
+                        return html`
+                            <div class="threshold-list-item">
+                                <div class="threshold-list-item-colour">
+                                    <or-mwc-input type="${InputType.COLOUR}" value="${threshold[1]}"
+                                                  @or-mwc-input-changed="${(event: OrInputChangedEvent) => {
+                                                      this.textColors[index][1] = event.detail.value;
+                                                      this.requestUpdate('textColors');
+                                                  }}"
+                                    ></or-mwc-input>
+                                </div>
+                                <or-mwc-input type="${InputType.TEXT}" comfortable .value="${threshold[0]}"
+                                              @or-mwc-input-changed="${(event: OrInputChangedEvent) => {
+                                                  this.textColors[index][0] = event.detail.value;
+                                                  this.requestUpdate('textColors');
+                                              }}"
+
+                                ></or-mwc-input>
+                                ${index === 0 ? html`
+                                    <button class="button-clear"
+                                            style="margin-left: 8px;">
+                                        <or-icon icon="lock" style="--or-icon-fill: var(--or-app-color5, ${unsafeCSS(DefaultColor5)});"></or-icon>
+                                    </button>
+                                ` : html`
+                                    <button class="button-clear"
+                                            style="margin-left: 8px;"
+                                            @click="${() => {
+                                                this.removeThreshold(threshold);
+                                            }}">
+                                        <or-icon icon="close-circle"></or-icon>
+                                    </button>
+                                `}
+                            </div>
+                        `
+                    })}
+                    <or-mwc-input .type="${InputType.BUTTON}" label="threshold" icon="plus"
+                                  @or-mwc-input-changed="${() => this.addNewThreshold()}">
+                    </or-mwc-input>
+                ` : null}
+            </div>
+        `
+    }
+
+    protected removeThreshold(threshold: [any, string]) {
+        switch (typeof threshold[0]) {
+            case "number":
+                this.thresholds = (this.thresholds as [number, string][]).filter((x) => x !== threshold);
+                break;
+            default:
+                this.textColors = (this.textColors as [string, string][]).filter((x) => x !== threshold);
+                break;
+        }
+    }
+
+    protected addThreshold(threshold: [any, string]) {
+        switch (typeof threshold[0]) {
+            case "number":
+                (this.thresholds as [number, string][]).push(threshold as [number, string]);
+                this.requestUpdate('thresholds');
+                break;
+            default:
+                (this.textColors as [string, string][]).push(threshold as [string, string]);
+                this.requestUpdate('textColors');
+                break;
+        }
+    }
+
+    protected addNewThreshold() {
+        if (this.valueType === 'text') {
+            this.addThreshold(["new", "#000000"]);
+        } else {
+            const suggestedValue = (this.thresholds[this.thresholds.length - 1][0] + 10);
+            this.addThreshold([(!this.max || suggestedValue <= this.max ? suggestedValue : this.max), "#000000"]);
+        }
+        this.updateComplete.then(() => {
+            const elem = this.shadowRoot?.getElementById('thresholds-list') as HTMLElement;
+            const inputField = Array.from(elem.children)[elem.children.length - 2] as HTMLElement;
+            (inputField.children[1] as HTMLElement).setAttribute('focused', 'true');
+        })
+    }
+}

package/src/service/dashboard-service.ts

@@ -0,0 +1,89 @@
+import {Dashboard, DashboardRefreshInterval, DashboardScalingPreset, DashboardScreenPreset} from "@openremote/model";
+import manager from "@openremote/core";
+import {i18next} from "@openremote/or-translate";
+
+export enum DashboardSizeOption {
+    DESKTOP, MOBILE
+}
+
+export class DashboardService {
+
+    public static async create(dashboard?: Dashboard, size: DashboardSizeOption = DashboardSizeOption.DESKTOP, realm: string = manager.displayRealm, post = true): Promise<Dashboard> {
+        const randomId = () => (Math.random() + 1).toString(36).substring(2);
+        if(!dashboard) {
+            dashboard = {
+                realm: realm,
+                displayName: this.getDefaultDisplayName(size),
+                template: {
+                    id: randomId(),
+                    columns: this.getDefaultColumns(size),
+                    maxScreenWidth: this.getDefaultMaxScreenWidth(size),
+                    refreshInterval: DashboardRefreshInterval.OFF,
+                    screenPresets: this.getDefaultScreenPresets(size),
+                }
+            } as Dashboard;
+        } else {
+            dashboard.id = randomId();
+            if(dashboard.template) {
+                dashboard.template.id = randomId();
+                dashboard.template.widgets?.forEach(w => w.id = randomId());
+            }
+        }
+
+        if(post) {
+            return (await manager.rest.api.DashboardResource.create(dashboard)).data;
+        } else {
+            return dashboard;
+        }
+    }
+
+    public static async delete(id: string, realm: string = manager.displayRealm) {
+        return (await manager.rest.api.DashboardResource.delete(realm, id)).data;
+    }
+
+
+    /* -------------------------------------------------------- */
+
+    private static getDefaultColumns(preset: DashboardSizeOption): number {
+        switch (preset) {
+            case DashboardSizeOption.MOBILE: { return 4; }
+            case DashboardSizeOption.DESKTOP: { return 12; }
+            default: { return 12; }
+        }
+    }
+
+    private static getDefaultDisplayName(preset: DashboardSizeOption): string {
+        switch (preset) {
+            case DashboardSizeOption.DESKTOP: { return i18next.t('dashboard.initialName'); }
+            case DashboardSizeOption.MOBILE: { return i18next.t('dashboard.initialName') + " (" + i18next.t('dashboard.size.mobile') + ")"; }
+        }
+    }
+
+    private static getDefaultScreenPresets(preset: DashboardSizeOption): DashboardScreenPreset[] {
+        switch (preset) {
+            case DashboardSizeOption.MOBILE: {
+                return [{
+                    id: "mobile",
+                    displayName: 'dashboard.size.mobile',
+                    breakpoint: 640,
+                    scalingPreset: DashboardScalingPreset.KEEP_LAYOUT
+                }];
+            }
+            default: { // DashboardSizeOption.DESKTOP since that is the default
+                return [{
+                    id: "mobile",
+                    displayName: 'dashboard.size.mobile',
+                    breakpoint: 640,
+                    scalingPreset: DashboardScalingPreset.WRAP_TO_SINGLE_COLUMN
+                }];
+            }
+        }
+    }
+
+    private static getDefaultMaxScreenWidth(preset: DashboardSizeOption): number {
+        switch (preset) {
+            case DashboardSizeOption.DESKTOP: return 4000;
+            case DashboardSizeOption.MOBILE: return 640;
+        }
+    }
+}

package/src/service/widget-service.ts

@@ -0,0 +1,48 @@
+import {DashboardWidget} from "@openremote/model";
+import {widgetTypes} from "../index";
+import {WidgetConfig} from "../util/widget-config";
+import {Util} from "@openremote/core";
+import {WidgetManifest} from "../util/or-widget";
+
+export class WidgetService {
+
+    public static getManifest(widgetTypeId: string) {
+        const manifest = widgetTypes.get(widgetTypeId);
+        if(!manifest) {
+            throw new Error("Widget manifest could not be found during widget creation.");
+        }
+        return manifest;
+    }
+
+    public static async placeNew(widgetTypeId: string, x: number, y: number): Promise<DashboardWidget> {
+        const randomId = (Math.random() + 1).toString(36).substring(2);
+        const manifest = this.getManifest(widgetTypeId);
+        const widget = {
+            id: randomId,
+            displayName: manifest.displayName,
+            gridItem: {
+                id: randomId,
+                x: x,
+                y: y,
+                w: 2,
+                h: 2,
+                minW: manifest.minColumnWidth,
+                minH: manifest.minColumnHeight,
+                minPixelW: manifest.minPixelWidth,
+                minPixelH: manifest.minPixelHeight,
+                noResize: false,
+                noMove: false,
+                locked: false,
+            }, // Left empty until it is generated by or-dashboard-preview
+            widgetConfig: manifest.getDefaultConfig(),
+            widgetTypeId: widgetTypeId
+        } as DashboardWidget;
+        return widget;
+    }
+
+    // Method used to correct the OrWidgetConfig specification
+    // So, if certain fields are removed or invalid, it will be corrected by merging the object with the default OrWidgetConfig.
+    public static correctToConfigSpec(manifest: WidgetManifest, widgetConfig: WidgetConfig) {
+        return Util.mergeObjects(manifest.getDefaultConfig(), widgetConfig, false) as WidgetConfig;
+    }
+}

package/src/settings/attribute-input-settings.ts

@@ -0,0 +1,79 @@
+import {css, html, TemplateResult } from "lit";
+import { customElement } from "lit/decorators.js";
+import {AttributeInputWidgetConfig} from "../widgets/attribute-input-widget";
+import {AttributesSelectEvent} from "../panels/attributes-panel";
+import { InputType, OrInputChangedEvent } from "@openremote/or-mwc-components/or-mwc-input";
+import {AssetWidgetSettings} from "../util/or-asset-widget";
+
+const styling = css`
+  .switch-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+`;
+
+@customElement("attribute-input-settings")
+export class AttributeInputSettings extends AssetWidgetSettings {
+
+    protected readonly widgetConfig!: AttributeInputWidgetConfig;
+
+    static get styles() {
+        return [...super.styles, styling];
+    }
+
+    protected render(): TemplateResult {
+        return html`
+            <div>
+                <!-- Attribute selection -->
+                <settings-panel displayName="attributes" expanded="${true}">
+                    <attributes-panel .attributeRefs="${this.widgetConfig.attributeRefs}" style="padding-bottom: 12px;"
+                                      @attribute-select="${(ev: AttributesSelectEvent) => this.onAttributesSelect(ev)}"
+                    ></attributes-panel>
+                </settings-panel>
+
+                <!-- Other settings -->
+                <settings-panel displayName="settings" expanded="${true}">
+                    <div>
+                        <!-- Toggle readonly -->
+                        <div class="switch-container">
+                            <span><or-translate value="dashboard.userCanEdit"></or-translate></span>
+                            <or-mwc-input .type="${InputType.SWITCH}" style="margin: 0 -10px;" .value="${!this.widgetConfig.readonly}"
+                                          @or-mwc-input-changed="${(ev: OrInputChangedEvent) => this.onReadonlyToggle(ev)}"
+                            ></or-mwc-input>
+                        </div>
+                        <!-- Toggle helper text -->
+                        <div class="switch-container">
+                            <span><or-translate value="dashboard.showHelperText"></or-translate></span>
+                            <or-mwc-input .type="${InputType.SWITCH}" style="margin: 0 -10px;" .value="${this.widgetConfig.showHelperText}"
+                                          @or-mwc-input-changed="${(ev: OrInputChangedEvent) => this.onHelperTextToggle(ev)}"
+                            ></or-mwc-input>
+                        </div>
+                    </div>
+                </settings-panel>
+            </div>
+        `;
+    }
+
+    protected onAttributesSelect(ev: AttributesSelectEvent) {
+        this.widgetConfig.attributeRefs = ev.detail.attributeRefs;
+        if(ev.detail.attributeRefs.length === 1) {
+            const asset = ev.detail.assets.find((asset) => asset.id === ev.detail.attributeRefs[0].id);
+            if(asset) {
+                this.setDisplayName!(asset.name);
+            }
+        }
+        this.notifyConfigUpdate();
+    }
+
+    protected onReadonlyToggle(ev: OrInputChangedEvent) {
+        this.widgetConfig.readonly = !ev.detail.value;
+        this.notifyConfigUpdate();
+    }
+
+    protected onHelperTextToggle(ev: OrInputChangedEvent) {
+        this.widgetConfig.showHelperText = ev.detail.value;
+        this.notifyConfigUpdate();
+    }
+
+}