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

package/src/or-dashboard-boardsettings.ts

@@ -0,0 +1,249 @@
+import {Dashboard, DashboardAccess, DashboardRefreshInterval, DashboardScalingPreset, DashboardScreenPreset} from "@openremote/model";
+import {css, html, LitElement} from "lit";
+import {customElement, property} from "lit/decorators.js";
+import {InputType, OrInputChangedEvent} from "@openremote/or-mwc-components/or-mwc-input";
+import {style} from './style';
+import {i18next} from "@openremote/or-translate";
+import {unsafeHTML} from 'lit/directives/unsafe-html.js';
+import {when} from "lit/directives/when.js";
+import {dashboardAccessToString, scalingPresetToString, sortScreenPresets} from ".";
+
+//language=css
+const boardSettingsStyling = css`
+    .label {
+        margin-bottom: 4px;
+    }
+`
+
+@customElement("or-dashboard-boardsettings")
+export class OrDashboardBoardsettings extends LitElement {
+
+    @property()
+    protected readonly dashboard!: Dashboard;
+
+    @property()
+    protected readonly showPerms?: boolean;
+
+    /* ------------------------- */
+
+    static get styles() {
+        return [boardSettingsStyling, style]
+    }
+
+    forceParentUpdate(force: boolean = false) {
+        this.dispatchEvent(new CustomEvent('update', {detail: {force: force}}));
+    }
+
+    /* -------------------------------- */
+
+    private setViewAccess(access: DashboardAccess) {
+        this.dashboard.viewAccess = access;
+        if (access === DashboardAccess.PRIVATE) {
+            this.dashboard.editAccess = DashboardAccess.PRIVATE; // if viewAccess changed to PRIVATE, make editAccess private as well.
+        }
+        this.requestUpdate();
+        this.forceParentUpdate(false);
+    }
+
+    private setEditAccess(access: DashboardAccess) {
+        this.dashboard.editAccess = access;
+        this.requestUpdate();
+        this.forceParentUpdate(false);
+    }
+
+    private setBreakpoint(presetIndex: number, value: number) {
+        this.dashboard.template!.screenPresets![presetIndex].breakpoint = value;
+        this.requestUpdate();
+        this.forceParentUpdate(true);
+    }
+
+    private setRefreshInterval(interval: DashboardRefreshInterval) {
+        this.dashboard.template!.refreshInterval = interval;
+        this.requestUpdate();
+        this.forceParentUpdate(false);
+    }
+
+    protected render() {
+        if (this.dashboard.template?.screenPresets != null) {
+            const screenPresets = sortScreenPresets(this.dashboard.template.screenPresets, true);
+            const viewAccessOptions = [DashboardAccess.PRIVATE, DashboardAccess.SHARED, DashboardAccess.PUBLIC].map((access) => ({key: access, value: dashboardAccessToString(access)}));
+            const editAccessOptions = [DashboardAccess.PRIVATE, DashboardAccess.SHARED].map((access) => ({key: access, value: dashboardAccessToString(access)}));
+            const refreshIntervalOptions = [DashboardRefreshInterval.OFF, DashboardRefreshInterval.ONE_MIN, DashboardRefreshInterval.FIVE_MIN, DashboardRefreshInterval.QUARTER, DashboardRefreshInterval.ONE_HOUR].map(interval => ({key: interval, value: `dashboard.interval.${interval.toLowerCase()}`}))
+            const scalingPresets: { key: DashboardScalingPreset, value: string }[] = [];
+            [DashboardScalingPreset.KEEP_LAYOUT, DashboardScalingPreset.WRAP_TO_SINGLE_COLUMN, /*DashboardScalingPreset.REDIRECT,*/ DashboardScalingPreset.BLOCK_DEVICE].forEach((preset: DashboardScalingPreset) => {
+                scalingPresets.push({key: preset, value: scalingPresetToString(preset)});
+            });
+            return html`
+
+                <!-- Permissions panel, to set who can view/edit the selected dashboard -->
+                ${when(this.showPerms, () => html`
+                    <settings-panel displayName="permissions" expanded="${true}">
+                        <div>
+                            <div style="margin-bottom: 24px;">
+                                <div class="label">
+                                    ${html`<span>${unsafeHTML(i18next.t('dashboard.whoCanView').toString())}</span>`}
+                                </div>
+                                <or-mwc-input class="permissionInput" comfortable type="${InputType.SELECT}" style="width: 100%;"
+                                              .options="${viewAccessOptions.map((access) => access.value)}"
+                                              .value="${dashboardAccessToString(this.dashboard.viewAccess!)}"
+                                              @or-mwc-input-changed="${(event: OrInputChangedEvent) => {
+                                                  this.setViewAccess(viewAccessOptions.find((access) => access.value == event.detail.value)?.key!);
+                                              }}"
+                                ></or-mwc-input>
+                            </div>
+                            <div style="margin-bottom: 24px;">
+                                <div class="label">
+                                    ${html`<span>${unsafeHTML(i18next.t('dashboard.whoCanEdit').toString())}</span>`}
+                                </div>
+                                <or-mwc-input class="permissionInput" comfortable type="${InputType.SELECT}" style="width: 100%;"
+                                              .disabled="${(this.dashboard.viewAccess == DashboardAccess.PRIVATE)}"
+                                              .options="${editAccessOptions.map((access) => access.value)}"
+                                              .value="${dashboardAccessToString(this.dashboard.editAccess!)}"
+                                              @or-mwc-input-changed="${(event: OrInputChangedEvent) => {
+                                                  this.setEditAccess(editAccessOptions.find((access) => access.value == event.detail.value)?.key!);
+                                              }}"
+                                ></or-mwc-input>
+                            </div>
+                        </div>
+                    </settings-panel>
+                `)}
+
+                <!-- Layout panel, with options such as 'amount of columns' -->
+                <settings-panel displayName="layout" expanded="${true}">
+                    <div>
+                        
+                        <!-- Number of Columns control -->
+                        <div style="margin-bottom: 24px; display: flex; align-items: center;">
+                            <span style="min-width: 180px;"><or-translate value="dashboard.numberOfColumns"></or-translate></span>
+                            <or-mwc-input type="${InputType.NUMBER}" comfortable .value="${this.dashboard.template.columns}" min="1" max="24" @or-mwc-input-changed="${(event: OrInputChangedEvent) => {
+                                if (this.dashboard.template != null && event.detail.value as number <= 24 && event.detail.value as number >= 1) {
+                                    this.dashboard.template.columns = event.detail.value as number;
+                                    this.forceParentUpdate(true);
+                                }
+                            }}"></or-mwc-input>
+                        </div>
+                        
+                        <!-- Scaling preset -->
+                        ${screenPresets.length === 1 ? html`
+                            ${this.scalingPresetTemplate(screenPresets, scalingPresets)}
+                        ` : undefined}
+                        
+                        <!-- Screen preset -->
+                        ${screenPresets.length === 1 ? html`
+                            ${this.screenPresetTemplate(screenPresets, ['Mobile breakpoint'])}
+                        ` : undefined}
+                        
+                        <!-- Max Screen Width control-->
+                        <div style="margin-bottom: 24px; display: flex; align-items: center; justify-content: space-between;">
+                            <span style="min-width: 150px;"><or-translate value="dashboard.maxScreenWidth"></or-translate></span>
+                            <div>
+                                <or-mwc-input type="${InputType.NUMBER}" comfortable .value="${this.dashboard.template.maxScreenWidth}" style="width: 70px;"
+                                              @or-mwc-input-changed="${(event: OrInputChangedEvent) => {
+                                                  if (this.dashboard.template != null) {
+                                                      this.dashboard.template.maxScreenWidth = event.detail.value as number;
+                                                      this.forceParentUpdate(true);
+                                                  }
+                                              }}">
+                                </or-mwc-input>
+                                <span style="margin-left: 2px;">px</span>
+                            </div>
+                        </div>
+                        
+                        <!-- "Set to mobile" preset button, for ease of use -->
+                        <div>
+                            <or-mwc-input type="${InputType.BUTTON}" comfortable label="dashboard.setToMobilePreset"
+                                          @or-mwc-input-changed="${() => {
+                                              this.setToMobilePreset();
+                                          }}">
+                            </or-mwc-input>
+                        </div>
+                    </div>
+                </settings-panel>
+
+                <!-- Data management options -->
+                <settings-panel displayName="dashboard.dataManagement" expanded="${true}">
+                    <div>
+                        <div class="label">
+                            <span><or-translate value="dashboard.defaultRefreshInterval"></or-translate></span>
+                        </div>
+                        <or-mwc-input type="${InputType.SELECT}" comfortable .options="${refreshIntervalOptions.map(o => o.value)}" style="width: 100%;"
+                                      .value="${`dashboard.interval.${this.dashboard.template.refreshInterval?.toLowerCase() || `off`}`}"
+                                      @or-mwc-input-changed="${(ev: OrInputChangedEvent) => {
+                                          const intervalEntry = refreshIntervalOptions.find(o => o.value === ev.detail.value);
+                                          if(intervalEntry) {
+                                              this.setRefreshInterval(intervalEntry.key)
+                                          }
+                                      }}">
+                        </or-mwc-input>
+                    </div>
+                </settings-panel>
+                
+            `;
+        } else {
+            return html`
+                <div style="padding: 24px;">
+                    <span><or-translate value="errorOccurred"></or-translate></span><br/>
+                    <span><or-translate value="noDashboardFound"></or-translate></span>
+                </div>
+            `
+        }
+    }
+
+    // Button to switch to a mobile preset of layout settings.
+    // TODO: Make these values not hardcoded anymore, and depend on the getDefault functions in or-dashboard-tree (that probably should move to somewhere else)
+    setToMobilePreset() {
+        this.dashboard.template!.columns = 4;
+        this.dashboard.template!.screenPresets![0].scalingPreset = DashboardScalingPreset.KEEP_LAYOUT;
+        this.dashboard.template!.maxScreenWidth = 700;
+        this.requestUpdate();
+        this.forceParentUpdate(true);
+    }
+
+
+    /* ======================== */
+
+    scalingPresetTemplate(screenPresets: DashboardScreenPreset[], scalingPresets: { key: DashboardScalingPreset, value: string }[]) {
+        return html`
+            ${screenPresets.map((preset) => {
+                return html`
+                    <div style="margin-bottom: ${screenPresets.length > 1 ? '24px' : '16px'}">
+                        <div class="label">
+                            ${html`<span>${unsafeHTML(i18next.t("dashboard.onScreenMyBoardShould").replace("{{size}}", ("<b>" + i18next.t(preset.displayName!) + "</b>")))}</span>`}
+                        </div>
+                        <or-mwc-input class="displayInput" type="${InputType.SELECT}" comfortable style="width: 100%;"
+                                      .options="${scalingPresets.map((x) => x.value)}"
+                                      .value="${scalingPresets.find((p) => p.key == preset.scalingPreset)?.value}"
+                                      @or-mwc-input-changed="${(event: OrInputChangedEvent) => {
+                                          preset.scalingPreset = scalingPresets.find((p) => p.value == event.detail.value)?.key;
+                                          this.forceParentUpdate(true);
+                                          this.requestUpdate();
+                                      }}"
+                        ></or-mwc-input>
+                    </div>
+                `
+            })}
+        `
+    }
+
+    screenPresetTemplate(screenPresets: DashboardScreenPreset[], customLabels?: string[]) {
+        return html`
+            ${screenPresets.map((preset, index) => {
+                return html`
+                    <div style="margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between;">
+                        <span style="min-width: 140px;">${customLabels ? customLabels[index] : (preset.displayName + " " + i18next.t('screen'))}</span>
+                        <div>
+                            <span style="margin-right: 4px;">${(screenPresets.indexOf(preset) == 0) ? '>' : '<'}</span>
+                            <or-mwc-input type="${InputType.NUMBER}" comfortable .disabled="${(screenPresets.length > 1 && screenPresets.indexOf(preset) == 0)}" style="width: 70px;"
+                                          .value="${(screenPresets.length > 1 && screenPresets.indexOf(preset) == 0 ? screenPresets[1].breakpoint : preset.breakpoint)}"
+                                          @or-mwc-input-changed="${(event: OrInputChangedEvent) => {
+                                              this.setBreakpoint(screenPresets.indexOf(preset), event.detail.value)
+                                          }}"
+                            ></or-mwc-input>
+                            <span style="margin-left: 2px;">px</span>
+                        </div>
+                    </div>
+                `
+            })}
+        `
+    }
+}

package/src/or-dashboard-browser.ts

@@ -0,0 +1,160 @@
+import {GridStack, GridStackNode } from "gridstack";
+import {css, html, LitElement, unsafeCSS } from "lit";
+import { customElement, state} from "lit/decorators.js";
+import {style} from "./style";
+import {widgetTypes} from "./index";
+
+// TODO: Add webpack/rollup to build so consumers aren't forced to use the same tooling
+const gridcss = require('gridstack/dist/gridstack.min.css');
+const extracss = require('gridstack/dist/gridstack-extra.css');
+
+//language=css
+const browserStyling = css`
+    #sidebar {
+        display: grid;
+        padding: 16px;
+    }
+    #sidebarElement, #sidebarBgElement {
+        grid-column: 1;
+        grid-row: 1;
+    }
+    .grid-stack-item {
+        cursor: grab;
+    }
+    .sidebarItem {
+        height: 100%;
+        background: white;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        border: 1px solid #E0E0E0;
+        border-radius: 8px;
+        box-sizing: border-box;
+        flex-direction: column;
+        font-size: 14px;
+        --or-icon-width: 36px;
+    }
+    .itemText {
+        margin-top: 10px;
+    }
+`
+
+@customElement("or-dashboard-browser")
+export class OrDashboardBrowser extends LitElement {
+
+    @state()
+    private sidebarGrid?: GridStack;
+
+    @state()
+    private backgroundGrid?: GridStack;
+
+
+    static get styles() {
+        return [unsafeCSS(gridcss), unsafeCSS(extracss), browserStyling, style];
+    }
+
+    constructor() {
+        super();
+        this.updateComplete.then(() => {
+            this.renderGrid();
+        })
+    }
+
+    /* --------------------------------- */
+
+    protected renderGrid() {
+        const sidebarElement = this.shadowRoot?.getElementById("sidebarElement");
+        const coords: Array<[number, number]> = new Array<[number, number]>([0,0],[2,0], [0,2], [2,2], [0,4], [2,4], [0,6], [2,6], [0,8], [2,8]) // TODO: make this unlimited possibilities with a formula
+        const sidebarItems: any[] = Array.from(widgetTypes)
+            .sort((a, b) => a[1].displayName.localeCompare(b[1].displayName))
+            .map((typeArr, index) => {
+                return {x: coords[index][0], y: coords[index][1], w: 2, h: 2, widgetTypeId: typeArr[0], locked: true, content: `<div class="sidebarItem"><or-icon icon="${typeArr[1].displayIcon}"></or-icon><span class="itemText">${typeArr[1].displayName}</span>`}
+        });
+
+        // Setting Sidebar height depending on sidebarItems
+        let sidebarHeight = 0;
+        sidebarItems.forEach((item) => {
+            if((item.y + item.h) > sidebarHeight) {
+                sidebarHeight = (item.y + item.h);
+            }
+        });
+
+        let newSidebarHeight = 0;
+        if (sidebarItems.length % 2 !== 0) {
+            // If sidebarHeight is based on nr of widgets in array & is not even add 1
+            newSidebarHeight = sidebarItems.length + 1
+        } else {
+            newSidebarHeight = sidebarItems.length
+        }
+        // Creation of the sidebarGrid. Only loads items if already existing
+        if(this.sidebarGrid !== undefined) {
+            this.sidebarGrid.removeAll();
+            this.sidebarGrid.load(sidebarItems);
+        } else {
+            this.sidebarGrid = GridStack.init({
+                acceptWidgets: false,
+                column: 4,
+                cellHeight: 67,
+                disableOneColumnMode: true,
+                disableResize: true,
+                draggable: {
+                    appendTo: 'parent'
+                },
+                margin: 8,
+                row: newSidebarHeight
+
+                // @ts-ignore typechecking, because we can only provide an HTMLElement (which GridHTMLElement inherits)
+            }, sidebarElement);
+            
+            this.sidebarGrid.load(sidebarItems);
+
+            // If an item gets dropped on the main grid, the dragged item needs to be reset to the sidebar.
+            // This is done by just loading the initial/original widget back in the sidebar.
+            // @ts-ignore typechecking since we assume they are not undefined
+            this.sidebarGrid.on('removed', (_event: Event, items: GridStackNode[]) => {
+                if(items.length === 1) {
+                    const filteredItems = sidebarItems.filter(widget => {
+                        return (widget.content === items[0].content);
+                    });
+                    this.sidebarGrid?.load([filteredItems[0]]);
+                }
+            });
+
+            // On any change, recreate the grid to prevent users moving Sidebar items around.
+            // @ts-ignore typechecking since we assume they are not undefined
+            this.sidebarGrid.on('change', (_event: Event, _items: GridStackNode[]) => {
+                this.renderGrid();
+            });
+        }
+
+
+        // Seperate Static Background grid (to make it look like the items duplicate)
+        const sidebarBgElement = this.shadowRoot?.getElementById("sidebarBgElement");
+        if(this.backgroundGrid != undefined) {
+            this.backgroundGrid.removeAll();
+            this.backgroundGrid.load(sidebarItems);
+
+        } else {
+            this.backgroundGrid = GridStack.init({
+                staticGrid: true,
+                column: 4,
+                cellHeight: 67,
+                disableOneColumnMode: true,
+                margin: 8
+
+                // @ts-ignore typechecking, because we can only provide an HTMLElement (which GridHTMLElement inherits)
+            }, sidebarBgElement);
+            this.backgroundGrid.load(sidebarItems);
+        }
+    }
+
+    protected render() {
+        return html`
+            <div id="sidebar">
+                <div id="sidebarElement" class="grid-stack" style="width: 100%; z-index: 3;"></div>
+                <div id="sidebarBgElement" class="grid-stack" style="width: 100%; z-index: 2"></div>
+            </div>
+        `
+    }
+}

package/src/or-dashboard-engine.ts

@@ -0,0 +1,17 @@
+import { GridStackEngine, GridStackNode, GridStackMoveOpts } from 'gridstack';
+
+export class OrDashboardEngine extends GridStackEngine {
+
+    // Cancelling move when it collides with the same widget.
+    // Apparently during some rerenders, the widget moved downwards after colliding with itself.
+    // Now cancelling the movement when the IDs are the same.
+    public moveNode(node: GridStackNode, o: GridStackMoveOpts): boolean {
+        if(o.skip && o.skip.id == node.id) {
+            o.x = o.skip.x;
+            o.y = o.skip.y;
+            o.w = o.skip.w;
+            o.h = o.skip.h;
+        }
+        return super.moveNode(node, o);
+    }
+}

package/src/or-dashboard-keyhandler.ts

@@ -0,0 +1,25 @@
+import { EventEmitter } from "events";
+
+// Inspired by or-rules flow editor Input class
+export class DashboardKeyEmitter extends EventEmitter {
+
+    constructor() {
+        super();
+        window.addEventListener("keydown", this.onkeydown);
+    }
+
+    /* ------------------------------------- */
+
+    private onkeydown = (e: KeyboardEvent) => {
+        if(e.key == 'Delete') {
+            e.preventDefault();
+            this.emit('delete', e);
+        } else if(e.key == 'Escape') {
+            e.preventDefault();
+            this.emit('deselect', e);
+        } else if(e.key == 's' && e.ctrlKey) {
+            e.preventDefault();
+            this.emit('save', e);
+        }
+    }
+}