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

package/src/or-dashboard-tree.ts

@@ -0,0 +1,304 @@
+import {css, html, LitElement, PropertyValues} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {InputType} from '@openremote/or-mwc-components/or-mwc-input';
+import '@openremote/or-icon';
+import {style} from './style';
+import {Dashboard} from '@openremote/model';
+import manager from '@openremote/core';
+import {ListItem} from '@openremote/or-mwc-components/or-mwc-list';
+import '@openremote/or-mwc-components/or-mwc-menu';
+import {showOkCancelDialog} from '@openremote/or-mwc-components/or-mwc-dialog';
+import {i18next} from '@openremote/or-translate';
+import {showSnackbar} from '@openremote/or-mwc-components/or-mwc-snackbar';
+import {style as OrAssetTreeStyle} from '@openremote/or-asset-tree';
+import {DashboardService, DashboardSizeOption} from './service/dashboard-service';
+import {isAxiosError} from '@openremote/rest';
+
+// language=css
+const treeStyling = css`
+    #header-btns {
+        display: flex;
+        flex-direction: row;
+        padding-right: 5px;
+    }
+
+    .node-container {
+        align-items: center;
+        padding-left: 10px;
+    }
+`;
+
+@customElement('or-dashboard-tree')
+export class OrDashboardTree extends LitElement {
+
+    static get styles() {
+        return [style, treeStyling, OrAssetTreeStyle];
+    }
+
+    @property()
+    protected dashboards?: Dashboard[];
+
+    @property()
+    protected selected?: Dashboard;
+
+    @property()
+    protected readonly realm: string = manager.displayRealm;
+
+    @property() // REQUIRED
+    protected readonly userId!: string;
+
+    @property()
+    protected readonly readonly = true;
+
+    @property() // Whether the selected dashboard has been changed or not.
+    protected readonly hasChanged = false;
+
+    @property()
+    protected showControls = true;
+
+
+    /* --------------- */
+
+    shouldUpdate(changedProperties: PropertyValues) {
+        if (changedProperties.size === 1) {
+
+            // Prevent any update since it is not necessary in its current state.
+            // However, do update when dashboard is saved (aka when hasChanged is set back to false)
+            if (changedProperties.has('hasChanged') && this.hasChanged) {
+                return false;
+            }
+        }
+        return super.shouldUpdate(changedProperties);
+    }
+
+    updated(changedProperties: PropertyValues) {
+        if (!this.dashboards) {
+            this.getAllDashboards();
+        }
+        if (changedProperties.has('dashboards') && changedProperties.get('dashboards') != null) {
+            this.dispatchEvent(new CustomEvent('updated', {detail: this.dashboards}));
+        }
+        if (changedProperties.has('selected')) {
+            this.dispatchEvent(new CustomEvent('select', {detail: this.selected}));
+        }
+    }
+
+
+    /* ---------------------- */
+
+
+    // Gets ALL dashboards the user has access to.
+    // TODO: Optimize this by querying the database, or limit the JSON that is fetched.
+    private async getAllDashboards() {
+        return manager.rest.api.DashboardResource.getAllRealmDashboards(this.realm)
+            .then(result => {
+                this.dashboards = result.data;
+            }).catch(reason => {
+                console.error(reason);
+                showSnackbar(undefined, 'errorOccurred');
+            });
+    }
+
+    // Selects the dashboard (id).
+    // Will emit a "select" event during the lifecycle
+    private selectDashboard(id: string | Dashboard | undefined) {
+        if (typeof id === 'string') {
+            this.selected = this.dashboards?.find(dashboard => dashboard.id === id);
+        } else {
+            this.selected = id;
+        }
+    }
+
+    // Creates a dashboard, and adds it onto the list.
+    // Dispatch a "created" event, to let parent elements know a new dashboard has been created.
+    // It will automatically select the newly created dashboard.
+    private createDashboard(size: DashboardSizeOption) {
+        DashboardService.create(undefined, size, this.realm).then(d => {
+            if (!this.dashboards) {
+                this.dashboards = [d] as Dashboard[];
+            } else {
+                this.dashboards.push(d);
+                this.requestUpdate('dashboards');
+            }
+            this.dispatchEvent(new CustomEvent('created', {detail: {d}}));
+            this.selectDashboard(d);
+
+        }).catch(e => {
+            console.error(e);
+            if (isAxiosError(e) && e.response?.status === 404) {
+                showSnackbar(undefined, 'noDashboardFound');
+            } else {
+                showSnackbar(undefined, 'errorOccurred');
+            }
+        });
+    }
+
+    protected duplicateDashboard(dashboard: Dashboard) {
+        if (dashboard?.id !== null) {
+            if(this.hasChanged) {
+                this.showDiscardChangesModal().then(ok => {
+                    if(ok) {
+                        this._doDuplicateDashboard(dashboard);
+                    }
+                })
+            } else {
+                this._doDuplicateDashboard(dashboard);
+            }
+        } else {
+            console.warn("Tried duplicating a NULL dashboard!");
+        }
+    }
+
+    protected _doDuplicateDashboard(dashboard: Dashboard) {
+        const newDashboard = JSON.parse(JSON.stringify(dashboard)) as Dashboard;
+        newDashboard.displayName = (newDashboard.displayName + ' copy');
+        DashboardService.create(newDashboard, undefined, this.realm).then(d => {
+            if (!this.dashboards) {
+                this.dashboards = [d] as Dashboard[];
+            } else {
+                this.dashboards.push(d);
+                this.requestUpdate('dashboards');
+            }
+            this.dispatchEvent(new CustomEvent('created', {detail: {d}}));
+            this.selectDashboard(d.id);
+        }).catch(e => {
+            console.error(e);
+            if (isAxiosError(e) && e.response?.status === 404) {
+                showSnackbar(undefined, 'noDashboardFound');
+            } else {
+                showSnackbar(undefined, 'errorOccurred');
+            }
+        });
+    }
+
+    private deleteDashboard(dashboard: Dashboard) {
+        if (dashboard.id != null) {
+            DashboardService.delete(dashboard.id, this.realm).then(() => {
+                this.getAllDashboards();
+            }).catch(reason => {
+                console.error(reason);
+                showSnackbar(undefined, 'errorOccurred');
+            });
+        }
+    }
+
+    /* ---------------------- */
+
+
+    // When a user clicks on a dashboard within the list...
+    protected onDashboardClick(dashboardId: string) {
+        if (dashboardId !== this.selected?.id) {
+            if (this.hasChanged) {
+                this.showDiscardChangesModal().then(ok => {
+                    if(ok) this.selectDashboard(dashboardId);
+                })
+            } else {
+                this.selectDashboard(dashboardId);
+            }
+        }
+    }
+
+    protected showDiscardChangesModal(): Promise<boolean> {
+        return showOkCancelDialog(i18next.t('areYouSure'), i18next.t('confirmContinueDashboardModified'), i18next.t('discard'));
+    }
+
+    // Element render method
+    // TODO: Move dashboard filtering to separate method.
+    protected render() {
+        const dashboardItems: ListItem[][] = [];
+        if (this.dashboards && this.dashboards.length > 0) {
+            if (this.userId) {
+                const myDashboards: Dashboard[] = [];
+                const otherDashboards: Dashboard[] = [];
+                this.dashboards?.forEach(d => {
+                    (d.ownerId === this.userId) ? myDashboards.push(d) : otherDashboards.push(d);
+                });
+                if (myDashboards.length > 0) {
+                    const items: ListItem[] = [];
+                    myDashboards.sort((a, b) => a.displayName ? a.displayName.localeCompare(b.displayName) : 0).forEach(d => {
+                        items.push({icon: 'view-dashboard', text: d.displayName, value: d.id});
+                    });
+                    dashboardItems.push(items);
+                }
+                if (otherDashboards.length > 0) {
+                    const items: ListItem[] = [];
+                    otherDashboards.sort((a, b) => a.displayName ? a.displayName.localeCompare(b.displayName) : 0).forEach(d => {
+                        items.push({icon: 'view-dashboard', text: d.displayName, value: d.id});
+                    });
+                    dashboardItems.push(items);
+                }
+            }
+        }
+        return html`
+            <div id="menu-header">
+                <div id="title-container">
+                    <span id="title"><or-translate value="insights"></or-translate></span>
+                </div>
+                
+                <!-- Controls header -->
+                ${this.showControls ? html`
+                    <div id="header-btns">
+                        ${this.selected != null ? html`
+                            <or-mwc-input type="${InputType.BUTTON}" icon="close" @or-mwc-input-changed="${() => {
+                                this.selectDashboard(undefined);
+                            }}"></or-mwc-input>
+                            ${!this.readonly ? html`
+                                <or-mwc-input type="${InputType.BUTTON}" class="hideMobile" icon="content-copy"
+                                              @or-mwc-input-changed="${() => {
+                                                  this.duplicateDashboard(this.selected!);
+                                              }}"
+                                ></or-mwc-input>
+                                <or-mwc-input type="${InputType.BUTTON}" icon="delete" @or-mwc-input-changed="${() => {
+                                    if (this.selected != null) {
+                                        showOkCancelDialog(i18next.t('areYouSure'), i18next.t('dashboard.deletePermanentWarning', {dashboard: this.selected.displayName}), i18next.t('delete')).then((ok: boolean) => {
+                                            if (ok) {
+                                                this.deleteDashboard(this.selected!);
+                                            }
+                                        });
+                                    }
+                                }}"></or-mwc-input>
+                            ` : undefined}
+                        ` : undefined}
+                        ${!this.readonly ? html`
+                            <or-mwc-input type="${InputType.BUTTON}" class="hideMobile" icon="plus"
+                                          @or-mwc-input-changed="${() => {
+                                              this.createDashboard(DashboardSizeOption.DESKTOP);
+                                          }}"
+                            ></or-mwc-input>
+                        ` : undefined}
+                    </div>
+                ` : undefined}
+            </div>
+            
+            <!-- List of dashboards -->
+            <div id="content">
+                <div style="padding-top: 8px;">
+                    ${dashboardItems.map((items, index) => {
+                        return (items != null && items.length > 0) ? html`
+                            <div style="padding: 8px 0;">
+                                <span style="font-weight: 500; padding-left: 14px; color: #000000;">
+                                    <or-translate value="${(index === 0 ? 'dashboard.myDashboards' : 'dashboard.createdByOthers')}"></or-translate>
+                                 </span>
+                                <div id="list-container" style="overflow: hidden;">
+                                    <ol id="list">
+                                        ${items.map((listItem: ListItem) => {
+                                            return html`
+                                                <li ?data-selected="${listItem.value === this.selected?.id}" @click="${(_evt: MouseEvent) => {
+                                                    this.onDashboardClick(listItem.value);
+                                                }}">
+                                                    <div class="node-container">
+                                                        <span class="node-name">${listItem.text} </span>
+                                                    </div>
+                                                </li>
+                                            `;
+                                        })}
+                                    </ol>
+                                </div>
+                            </div>
+                        ` : undefined;
+                    })}
+                </div>
+            </div>
+        `;
+    }
+}

package/src/or-dashboard-widgetcontainer.ts

@@ -0,0 +1,155 @@
+import {i18next} from "@openremote/or-translate";
+import {html, LitElement, PropertyValues} from "lit";
+import {customElement, property, query, state} from "lit/decorators.js";
+import {when} from "lit/directives/when.js";
+import {throttle} from "lodash";
+import {style} from "./style";
+import {DashboardWidget} from "@openremote/model";
+import {OrWidget, WidgetManifest} from "./util/or-widget";
+import {WidgetService} from "./service/widget-service";
+import {WidgetConfig} from "./util/widget-config";
+
+/* ------------------------------------ */
+
+const elemTagName = "or-dashboard-widget-container"
+
+@customElement(elemTagName)
+export class OrDashboardWidgetContainer extends LitElement {
+
+    static tagName = elemTagName;
+
+    @property()
+    protected readonly widget!: DashboardWidget;
+
+    @property()
+    protected readonly editMode!: boolean;
+
+    @property()
+    protected loading: boolean = false;
+
+    @state()
+    protected orWidget?: OrWidget
+
+    @state()
+    protected error?: string; // untranslated error messages
+
+    @query("#widget-container")
+    protected containerElem?: Element;
+
+    protected resizeObserver?: ResizeObserver;
+    protected manifest?: WidgetManifest;
+
+
+    static get styles() {
+        return [style];
+    }
+
+    disconnectedCallback() {
+        super.disconnectedCallback()
+        this.resizeObserver?.disconnect();
+    }
+
+    shouldUpdate(changedProps: Map<PropertyKey, unknown>): boolean {
+        const changed = changedProps;
+
+        // Update config if some values in the spec are not set.
+        // Useful for when migrations have taken place.
+        if (this.widget) {
+            const manifest = WidgetService.getManifest(this.widget.widgetTypeId!);
+            if (manifest) {
+                this.widget.widgetConfig = WidgetService.correctToConfigSpec(manifest, this.widget.widgetConfig);
+            }
+        }
+
+        // Only update widget if certain properties of widget has changed.
+        // For example, when the 'gridItem' field changes, no update is needed since it doesn't apply here.
+        if (changedProps.has('widget') && this.widget) {
+            const oldVal = changedProps.get('widget') as DashboardWidget | undefined;
+            const idChanged = oldVal?.id !== this.widget?.id;
+            const nameChanged = oldVal?.displayName !== this.widget?.displayName;
+            const configChanged = JSON.stringify(oldVal?.widgetConfig) !== JSON.stringify(this.widget?.widgetConfig);
+            if (!(idChanged || nameChanged || configChanged)) {
+                changed.delete('widget');
+            }
+        }
+
+        return (changed.size === 0 ? false : super.shouldUpdate(changedProps));
+    }
+
+    willUpdate(changedProps: Map<string, any>) {
+        super.willUpdate(changedProps);
+
+        if (!this.manifest && this.widget) {
+            this.manifest = WidgetService.getManifest(this.widget.widgetTypeId!);
+        }
+
+        // Create widget
+        if (changedProps.has("widget") && this.widget) {
+            this.initializeWidgetElem(this.manifest!, this.widget.widgetConfig);
+        }
+    }
+
+    firstUpdated(changedProps: PropertyValues) {
+        super.firstUpdated(changedProps);
+
+        if (this.orWidget) {
+            const containerElem = this.containerElem;
+            if (containerElem) {
+                this.resizeObserver?.disconnect();
+                this.resizeObserver = new ResizeObserver(throttle(() => {
+                    const minWidth = this.manifest!.minPixelWidth || 0;
+                    const minHeight = this.manifest!.minPixelHeight || 0;
+                    const isMinimumSize: boolean = (minWidth < containerElem.clientWidth) && (minHeight < containerElem.clientHeight);
+                    this.error = (isMinimumSize ? undefined : "dashboard.widgetTooSmall");
+                }, 200));
+                this.resizeObserver.observe(containerElem);
+            } else {
+                console.error("gridItemElement could not be found!");
+            }
+        }
+    }
+
+    protected initializeWidgetElem(manifest: WidgetManifest, config: WidgetConfig) {
+        console.debug(`Initialising ${manifest.displayName} widget..`);
+        if (this.orWidget) {
+            this.orWidget.remove();
+        }
+        this.orWidget = manifest.getContentHtml(config);
+        this.orWidget.getDisplayName = () => this.widget.displayName;
+        this.orWidget.getEditMode = () => this.editMode
+        this.orWidget.getWidgetLocation = () => ({
+            x: this.widget.gridItem?.x,
+            y: this.widget.gridItem?.y,
+            w: this.widget.gridItem?.w,
+            h: this.widget.gridItem?.h
+        });
+    }
+
+    protected render() {
+        const showHeader = !!this.widget.displayName;
+        return html`
+            <div id="widget-container" style="height: calc(100% - 16px); padding: 8px 16px 8px 16px; display: flex; flex-direction: column;">
+
+                <!-- Container title -->
+                ${when(showHeader, () => html`
+                    <div style="flex: 0 0 36px; display: flex; justify-content: space-between; align-items: center;">
+                        <span class="panel-title" style="width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
+                            ${this.widget.displayName?.toUpperCase()}
+                        </span>
+                    </div>
+                `)}
+
+                <!-- Content -->
+                <div style="flex: 1; max-height: ${showHeader ? 'calc(100% - 36px)' : '100%'};">
+                    ${when((!this.error && !this.loading), () => html`
+                        ${this.orWidget}
+                    `, () => html`<or-translate value="${this.error ? this.error : "loading"}"></or-translate>`)}
+                </div>
+            </div>
+        `
+    }
+
+    public refreshContent(force: boolean) {
+        this.orWidget?.refreshContent(force);
+    }
+}

package/src/or-dashboard-widgetsettings.ts

@@ -0,0 +1,91 @@
+import {Asset, DashboardWidget } from "@openremote/model";
+import {html, LitElement, TemplateResult, unsafeCSS } from "lit";
+import { customElement, property, state } 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 { until } from "lit/directives/until.js";
+import {WidgetService} from "./service/widget-service";
+import {WidgetSettings, WidgetSettingsChangedEvent} from "./util/widget-settings";
+import {WidgetManifest} from "./util/or-widget";
+import { guard } from "lit/directives/guard.js";
+
+const tableStyle = require("@material/data-table/dist/mdc.data-table.css");
+
+/* ------------------------------------ */
+
+@customElement("or-dashboard-widgetsettings")
+export class OrDashboardWidgetsettings extends LitElement {
+
+    static get styles() {
+        return [unsafeCSS(tableStyle), style]
+    }
+
+    @property({type: Object})
+    protected selectedWidget!: DashboardWidget;
+
+    @state()
+    protected settingsElem?: WidgetSettings;
+
+    /* ------------------------------------ */
+
+
+    // Method to update the Grid. For example after changing a setting.
+    forceParentUpdate(changes: Map<string, any>, force: boolean = false) {
+        this.requestUpdate();
+        this.dispatchEvent(new CustomEvent('update', { detail: { changes: changes, force: force }}));
+    }
+
+    protected render() {
+        return html`
+            <div style="padding: 12px;">
+                <div>
+                    <or-mwc-input .type="${InputType.TEXT}" style="width: 100%;" .value="${this.selectedWidget?.displayName}" label="${i18next.t('name')}"
+                                  @or-mwc-input-changed="${(event: OrInputChangedEvent) => this.setDisplayName(event.detail.value)}"
+                    ></or-mwc-input>
+                </div>
+            </div>
+            <div>
+                ${guard([this.selectedWidget], () => html`
+                    ${until(this.generateContent(this.selectedWidget!.widgetTypeId!), html`Loading...`)}
+                `)}
+            </div>
+        `;
+    }
+
+    protected setDisplayName(name?: string) {
+        this.selectedWidget!.displayName = name;
+        this.forceParentUpdate(new Map<string, any>([['widget', this.selectedWidget]]));
+    }
+
+    protected async generateContent(widgetTypeId: string): Promise<TemplateResult> {
+        if(!this.settingsElem || this.settingsElem.id !== this.selectedWidget.id) {
+            const manifest = WidgetService.getManifest(widgetTypeId);
+            this.settingsElem = this.initSettings(manifest);
+        }
+        return html`
+            ${this.settingsElem}
+        `;
+    }
+
+    protected initSettings(manifest: WidgetManifest): WidgetSettings {
+        const settingsElem =  manifest.getSettingsHtml(this.selectedWidget!.widgetConfig);
+        settingsElem.id = this.selectedWidget.id!;
+        settingsElem.getDisplayName = () => this.selectedWidget.displayName;
+        settingsElem.setDisplayName = (name?: string) => this.setDisplayName(name);
+        settingsElem.getEditMode = () => true;
+        settingsElem.getWidgetLocation = () => ({
+            x: this.selectedWidget.gridItem?.x,
+            y: this.selectedWidget.gridItem?.y,
+            w: this.selectedWidget.gridItem?.w,
+            h: this.selectedWidget.gridItem?.h
+        });
+        settingsElem.addEventListener(WidgetSettingsChangedEvent.NAME, (ev: any) => this.onWidgetConfigChange(ev));
+        return settingsElem;
+    }
+
+    protected onWidgetConfigChange(ev: WidgetSettingsChangedEvent) {
+        this.selectedWidget!.widgetConfig = ev.detail;
+        this.forceParentUpdate(new Map<string, any>([['widget', this.selectedWidget]]));
+    }
+}