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

package/README.md

@@ -0,0 +1,156 @@
+# or-dashboard-builder
+### All-in-one bundle for creating dashboards with OpenRemote data.
+
+This component is the core of the Insights page on our OpenRemote manager,<br />
+where users can build dashboards with widgets, for monitoring their assets in their preferred way.<br />
+It is quite an extensive piece of code, so some apps using this (such as or standalone Insights app)<br />
+might not need the full package.<br />
+<br />
+It is structured to support the additions of custom widgets, whereof a short tutorial is shown below.
+
+
+---
+
+## Install
+```bash
+npm i @openremote/or-dashboard-builder
+yarn add @openremote/or-dashboard-builder
+```
+
+
+
+## Terminology:
+
+To be clear about what all functionalities are meant for, we created a list of terms used within `or-dashboard-builder`.
+Here it is:
+
+| Term          | Definition                                                                                                                                       |
+|---------------|--------------------------------------------------------------------------------------------------------------------------------------------------|
+| **Dashboard** | The board / area that contains widgets. (stored in database)                                                                                     | 
+| **Widget**    | The object on the dashboard that contains information like content (stored in database)                                                          |
+| *WidgetContainer* | Wrapper that displays widget content, header, and its actions                                                                                    |
+| *WidgetSettings* | The available settings to customise WidgetConfig, 
+| **Insights**  | 'The showcase term' we use for the page in our Manager App. We also have an "Insights app" that is a standalone app for viewing your dashboards. |
+
+<br/>
+
+Here is an overview of all elements used:
+
+| HTML Tag                   | Description                                                                      |
+|----------------------------|----------------------------------------------------------------------------------|
+| or-dashboard-builder       | Contains the layout of the full dashboard builder. Keeps track of state as well. |
+| or-dashboard-preview       | Manages grid, and the widgets loaded onto it.                                    |
+| or-dashboard-browser       | Lists widget(s) in cards that can be dragged onto `or-dashboard-preview`         |
+| or-dashboard-tree          | Lists dashboards                                                                 |
+| or-dashboard-boardsettings | Managing dashboard settings                                                      |
+| or-dashboard-widgetsettings | Wrapper that displays settings of the selected widget (`or-widget-settings`)     
+| or-widget-container        | Manages the loaded widget in that container                                      |
+| or-widget-settings         | Loads and saves widget settings based on the selected widget.                    |
+
+*or-dashboard-engine is a logic class to inject in Gridstack for overriding grid behavior.*<br />
+*or-dashboard-keyhandler is used to handle keystrokes from the user*
+<br />
+<br />
+
+## Creating your own Widget
+
+Add your widget manifest to the `registerWidgetTypes()` function in `index.ts`.<br />
+This will register the widget, and handle all functions automatically.
+```typescript
+export function registerWidgetTypes() {
+    widgetTypes.set("linechart", ChartWidget.getManifest());
+    widgetTypes.set("gauge", GaugeWidget.getManifest());
+    ...
+    // add here
+}
+```
+
+From there, you can add your custom class to the `/widgets` folder and build your HTMLElements.<br />
+It is **required** to inherit from `or-widget`, *(or an extended class of it such as or-asset-widget)*<br />
+and your custom config should extend on `WidgetConfig`<br />
+<br />
+
+
+### Example of a custom Widget
+
+Here is a code example of how to create custom widgets.<br />
+Feel free to copy, put it in seperate files, and adjust it to your needs.<br />
+Looking into our existing widgets also helps understanding the codebase.
+
+```typescript
+import {CustomWidgetConfig} from "./custom-widget";
+
+export interface CustomWidgetConfig extends WidgetConfig {
+    attributeRefs: AttributeRef[];
+    customFieldOne: string;
+    customFieldTwo: number;
+}
+
+function getDefaultWidgetConfig(): CustomWidgetConfig {
+    return {
+        attributeRefs: [],
+        customFieldOne: "default text",
+        customFieldTwo: 0
+    };
+}
+
+@customElement("custom-widget")
+export class CustomWidget extends OrWidget {
+
+    // Override of widgetConfig with extended type
+    protected readonly widgetConfig!: CustomWidgetConfig;
+
+    static getManifest(): WidgetManifest {
+        return {
+            displayName: "Custom widget", // name to display in widget browser
+            displayIcon: "gauge", // icon to display in widget browser. Uses <or-icon> and https://materialdesignicons.com
+            minColumnWidth: 1,
+            minColumnHeight: 1,
+            getContentHtml(config: CustomWidgetConfig): OrWidget {
+                return new CustomWidget(config);
+            },
+            getSettingsHtml(config: CustomWidgetConfig): WidgetSettings {
+                return new CustomSettings(config);
+            },
+            getDefaultConfig(): CustomWidgetConfig {
+                return getDefaultWidgetConfig();
+            }
+        }
+    }
+
+    public refreshContent(force: boolean) {
+        // function that executes on refresh of the widget.
+        // It's normally a 'silent' function that, for example, fetches the data of assets again.
+    }
+
+    protected render(): TemplateResult {
+        return html`
+            <span>Custom field one: </span>
+            <span>${this.widgetConfig.customFieldOne}</span>
+        `;
+    }
+
+}
+
+// Settings element
+// This can be placed in a seperate file if preferred.
+@customElement("custom-settings")
+export class CustomSettings extends WidgetSettings {
+
+    // Override of widgetConfig with extended type
+    protected readonly widgetConfig!: CustomWidgetConfig;
+
+    protected render(): TemplateResult {
+        return html`
+            <span>Custom settings</span>
+            <button @click="${() => this.onButtonClick()}">Click to customize text</button>
+        `;
+    }
+
+    protected onButtonClick() {
+        this.widgetConfig.customFieldOne = "custom text";
+        this.notifyConfigUpdate();
+    }
+}
+
+```

package/build.gradle

@@ -0,0 +1,15 @@
+buildDir = "dist"
+
+task clean() {
+    doLast {
+        delete "dist"
+    }
+}
+
+task prepareUi() {
+    dependsOn clean, npmPrepare
+}
+
+task publishUi() {
+    dependsOn clean, npmPublish
+}

package/lib/controls/dashboard-refresh-controls.d.ts

@@ -0,0 +1,17 @@
+import { LitElement, PropertyValues, TemplateResult } from "lit";
+import { DashboardRefreshInterval } from "@openremote/model";
+export declare function intervalToMillis(interval: DashboardRefreshInterval): number | undefined;
+export declare class IntervalSelectEvent extends CustomEvent<DashboardRefreshInterval> {
+    static readonly NAME = "interval-select";
+    constructor(interval: DashboardRefreshInterval);
+}
+export declare class DashboardRefreshControls extends LitElement {
+    protected interval: DashboardRefreshInterval;
+    protected readonly: boolean;
+    protected intervalOptions: DashboardRefreshInterval[];
+    protected willUpdate(changedProps: PropertyValues): void;
+    protected render(): TemplateResult;
+    protected onIntervalSelect(stringOptions: string[], value: string): void;
+    protected getIntervalString(interval: DashboardRefreshInterval): string;
+    protected getRefreshOptions(): string[];
+}

package/lib/controls/dashboard-refresh-controls.js

@@ -0,0 +1,17 @@
+var __decorate=this&&this.__decorate||function(e,t,r,n){var o,i=arguments.length,s=i<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,r):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,r,n);else for(var l=e.length-1;l>=0;l--)(o=e[l])&&(s=(i<3?o(s):i>3?o(t,r,s):o(t,r))||s);return i>3&&s&&Object.defineProperty(t,r,s),s};import{InputType}from"@openremote/or-mwc-components/or-mwc-input";import{getContentWithMenuTemplate}from"@openremote/or-mwc-components/or-mwc-menu";import{html,LitElement}from"lit";import{customElement,property}from"lit/decorators.js";import{when}from"lit/directives/when.js";export function intervalToMillis(e){switch(e){case"OFF":default:return;case"ONE_MIN":return 6e4;case"FIVE_MIN":return 3e5;case"QUARTER":return 9e5;case"ONE_HOUR":return 36e5}}export class IntervalSelectEvent extends CustomEvent{constructor(e){super(IntervalSelectEvent.NAME,{bubbles:!0,composed:!0,detail:e})}}IntervalSelectEvent.NAME="interval-select";let DashboardRefreshControls=class extends LitElement{constructor(){super(...arguments),this.interval="OFF",this.readonly=!0,this.intervalOptions=["OFF","ONE_MIN","FIVE_MIN","QUARTER","ONE_HOUR"]}willUpdate(e){super.willUpdate(e),e.has("interval")&&void 0!==this.interval&&this.dispatchEvent(new IntervalSelectEvent(this.interval))}render(){const e=this.getRefreshOptions(),t=this.getIntervalString(this.interval);return html`
+            <div style="height: 100%; display: flex; align-items: center;">
+                ${when(this.readonly,(()=>html`
+                    ${when("OFF"===this.interval,(()=>html`
+                        <or-mwc-input .type="${InputType.BUTTON}" icon="pause" disabled="true" style="height: 36px; margin-top: -12px;"></or-mwc-input>
+                    `),(()=>html`
+                        <or-mwc-input .type="${InputType.BUTTON}" label="${t}" disabled="true"></or-mwc-input>
+                    `))}
+                `),(()=>html`
+                    ${getContentWithMenuTemplate("OFF"===this.interval?html`
+                                <or-mwc-input .type="${InputType.BUTTON}" icon="pause" style="height: 36px; margin-top: -12px;"></or-mwc-input>
+                            `:html`
+                                <or-mwc-input .type="${InputType.BUTTON}" label="${t}"></or-mwc-input>
+                            `,e.map((e=>({value:e}))),t,(t=>this.onIntervalSelect(e,t)),void 0,!1,!0,!0)}
+                `))}
+            </div>
+        `}onIntervalSelect(e,t){this.interval=this.intervalOptions[e.indexOf(t)]}getIntervalString(e){return`dashboard.interval.${e.toLowerCase()}`}getRefreshOptions(){return this.intervalOptions.map((e=>this.getIntervalString(e)))}};__decorate([property()],DashboardRefreshControls.prototype,"interval",void 0),__decorate([property()],DashboardRefreshControls.prototype,"readonly",void 0),DashboardRefreshControls=__decorate([customElement("dashboard-refresh-controls")],DashboardRefreshControls);export{DashboardRefreshControls};

package/lib/controls/dashboard-refresh-controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard-refresh-controls.js","sourceRoot":"","sources":["../../src/controls/dashboard-refresh-controls.ts"],"names":[],"mappings":"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"}

package/lib/index.d.ts

@@ -0,0 +1,71 @@
+import { LitElement, PropertyValues } from "lit";
+import "./or-dashboard-tree";
+import "./or-dashboard-browser";
+import "./or-dashboard-preview";
+import "./or-dashboard-widgetsettings";
+import "./or-dashboard-boardsettings";
+import "./controls/dashboard-refresh-controls";
+import "@openremote/or-icon";
+import { Dashboard, DashboardAccess, DashboardRefreshInterval, DashboardScalingPreset, DashboardScreenPreset, DashboardTemplate, DashboardWidget } from "@openremote/model";
+import "@openremote/or-mwc-components/or-mwc-tabs";
+import { OrDashboardPreview } from "./or-dashboard-preview";
+import { WidgetManifest } from "./util/or-widget";
+import { IntervalSelectEvent } from "./controls/dashboard-refresh-controls";
+export interface DashboardBuilderConfig {
+}
+export declare const MAX_BREAKPOINT = 1000000;
+export declare function scalingPresetToString(scalingPreset: DashboardScalingPreset | undefined): string;
+export declare function dashboardAccessToString(access: DashboardAccess): string;
+export declare function sortScreenPresets(presets: DashboardScreenPreset[], largetosmall?: boolean): DashboardScreenPreset[];
+export declare function getActivePreset(gridWidth: number, presets: DashboardScreenPreset[]): DashboardScreenPreset | undefined;
+export declare const widgetTypes: Map<string, WidgetManifest>;
+export declare function registerWidgetTypes(): void;
+export declare class OrDashboardBuilder extends LitElement {
+    static get styles(): import("lit").CSSResult[];
+    protected readonly config: DashboardBuilderConfig | undefined;
+    protected readonly editMode: boolean;
+    protected readonly fullscreen: boolean;
+    protected readonly selectedId: string | undefined;
+    protected realm: string;
+    protected readonly userId: string;
+    protected readonly readonly: boolean;
+    protected dashboards: Dashboard[] | undefined;
+    protected currentTemplate: DashboardTemplate | undefined;
+    protected selectedDashboard: Dashboard | undefined;
+    protected selectedWidgetId: string | undefined;
+    protected initialDashboardJSON: string | undefined;
+    protected initialTemplateJSON: string | undefined;
+    protected refreshInterval: DashboardRefreshInterval;
+    protected isInitializing: boolean;
+    protected isLoading: boolean;
+    protected hasChanged: boolean;
+    protected dashboardPreview?: OrDashboardPreview;
+    protected refreshTimer?: ReturnType<typeof setInterval>;
+    private readonly keyEmitter;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(changedProps: PropertyValues): void;
+    protected setRefreshTimer(millis: number | undefined): void;
+    protected clearRefreshTimer(): void;
+    loadAllDashboards(realm: string): Promise<void>;
+    updated(changedProperties: Map<string, any>): void;
+    protected onWidgetCreation(widget: DashboardWidget): void;
+    deleteWidget(widget: DashboardWidget): void;
+    selectWidget(widget: DashboardWidget): void;
+    deselectWidget(): void;
+    selectDashboard(dashboard: Dashboard | undefined): void;
+    changeDashboardName(value: string): void;
+    openDashboardInInsights(): void;
+    shareUrl(method: string): void;
+    saveDashboard(): void;
+    protected _isReadonly(): boolean;
+    protected _hasEditAccess(): boolean;
+    protected _hasViewAccess(): boolean;
+    protected sidebarMenuIndex: number;
+    protected showDashboardTree: boolean;
+    private readonly menuItems;
+    private readonly tabItems;
+    render(): any;
+    protected onIntervalSelect(ev: IntervalSelectEvent): void;
+}

package/lib/index.js

@@ -0,0 +1,285 @@
+var __decorate=this&&this.__decorate||function(e,t,i,s){var r,d=arguments.length,a=d<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,s);else for(var o=e.length-1;o>=0;o--)(r=e[o])&&(a=(d<3?r(a):d>3?r(t,i,a):r(t,i))||a);return d>3&&a&&Object.defineProperty(t,i,a),a},__awaiter=this&&this.__awaiter||function(e,t,i,s){return new(i||(i=Promise))((function(r,d){function a(e){try{l(s.next(e))}catch(e){d(e)}}function o(e){try{l(s.throw(e))}catch(e){d(e)}}function l(e){var t;e.done?r(e.value):(t=e.value,t instanceof i?t:new i((function(e){e(t)}))).then(a,o)}l((s=s.apply(e,t||[])).next())}))};import{css,html,LitElement,unsafeCSS}from"lit";import{customElement,property,query,state}from"lit/decorators.js";import{when}from"lit/directives/when.js";import{styleMap}from"lit/directives/style-map.js";import"./or-dashboard-tree";import"./or-dashboard-browser";import"./or-dashboard-preview";import"./or-dashboard-widgetsettings";import"./or-dashboard-boardsettings";import"./controls/dashboard-refresh-controls";import{InputType}from"@openremote/or-mwc-components/or-mwc-input";import"@openremote/or-icon";import{style}from"./style";import manager,{DefaultColor1,DefaultColor3,DefaultColor5,Util}from"@openremote/core";import"@openremote/or-mwc-components/or-mwc-tabs";import{showSnackbar}from"@openremote/or-mwc-components/or-mwc-snackbar";import{i18next}from"@openremote/or-translate";import{showOkCancelDialog}from"@openremote/or-mwc-components/or-mwc-dialog";import{DashboardKeyEmitter}from"./or-dashboard-keyhandler";import{ChartWidget}from"./widgets/chart-widget";import{GaugeWidget}from"./widgets/gauge-widget";import{intervalToMillis}from"./controls/dashboard-refresh-controls";import{ImageWidget}from"./widgets/image-widget";import{KpiWidget}from"./widgets/kpi-widget";import{MapWidget}from"./widgets/map-widget";import{AttributeInputWidget}from"./widgets/attribute-input-widget";import{TableWidget}from"./widgets/table-widget";const styling=css`
+    
+    @media only screen and (min-width: 641px){
+        #tree {
+            min-width: 300px !important;
+        }
+    }
+    @media only screen and (max-width: 641px) {
+        #tree {
+            flex: 1 !important;
+        }
+        #builder {
+            max-height: inherit !important;
+        }
+    }
+    
+    #tree {
+        flex: 0;
+        align-items: stretch;
+        z-index: 1;
+        box-shadow: rgb(0 0 0 / 21%) 0px 1px 3px 0px;
+    }
+    
+    /* Header related styling */
+    #header {
+        background: var(--or-app-color1, ${unsafeCSS(DefaultColor1)});
+    }
+    #header-wrapper {
+        padding: 14px 30px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        border-bottom: 1px solid ${unsafeCSS(DefaultColor5)};
+    }
+    #header-title {
+        font-size: 18px;
+    }
+    #header-title > or-icon {
+        margin-right: 10px;
+    }
+    #header-actions {
+        flex: 1 1 auto;
+        text-align: right;
+    }
+    #header-actions-content {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        float: right;
+    }
+
+    /* Header related styling */
+    @media screen and (max-width: 700px) {
+        #fullscreen-header-wrapper {
+            padding: 11px !important;
+        }
+    }
+    #fullscreen-header-wrapper {
+        min-height: 36px;
+        padding: 20px 30px 15px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+    #fullscreen-header-title {
+        font-size: 18px;
+        font-weight: bold;
+        color: var(--or-app-color3, ${unsafeCSS(DefaultColor3)});
+    }
+    #fullscreen-header-title > or-mwc-input {
+        margin-right: 4px;
+        --or-icon-fill: ${unsafeCSS(DefaultColor3)};
+    }
+    #fullscreen-header-actions {
+        flex: 1 1 auto;
+        text-align: right;
+    }
+    #fullscreen-header-actions-content {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        float: right;
+    }
+    
+    /* ----------------------------- */
+    /* Editor/builder related styling */
+    #builder {
+        flex: 1 0 auto;
+        height: 100%;
+    }
+    
+    /* ----------------------------- */
+    /* Sidebar related styling (drag and drop widgets / configuration) */
+    #sidebar {
+        vertical-align: top;
+        position: relative;
+        width: 300px;
+        background: white;
+        border-left: 1px solid ${unsafeCSS(DefaultColor5)};
+    }
+    #sidebar-widget-headeractions {
+        flex: 0;
+        display: flex;
+        flex-direction: row;
+        padding-right: 5px;
+    }
+    .settings-container {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+    }
+    #browser {
+        flex-grow: 1;
+        align-items: stretch;
+        z-index: 1;
+        max-width: 300px;
+    }
+    
+    #save-btn { margin-left: 15px; }
+    #view-btn { margin-left: 18px; }
+    
+    .small-btn {
+        height: 36px;
+        margin-top: -12px;
+    }
+    
+    .hidescroll {
+        -ms-overflow-style: none; /* for Internet Explorer, Edge */
+        scrollbar-width: none; /* for Firefox */
+    }
+    .hidescroll::-webkit-scrollbar {
+        display: none; /* for Chrome, Safari, and Opera */
+    }
+`;export const MAX_BREAKPOINT=1e6;export function scalingPresetToString(e){return null!=e?i18next.t("dashboard.presets."+e.toLowerCase()):"undefined"}export function dashboardAccessToString(e){return i18next.t("dashboard.access."+e.toLowerCase())}export function sortScreenPresets(e,t=!1){return e.sort(((e,i)=>{if(null!=e.breakpoint&&null!=i.breakpoint){if(e.breakpoint>i.breakpoint)return t?1:-1;if(e.breakpoint<i.breakpoint)return t?1:-1}return 0}))}export function getActivePreset(e,t){let i;return sortScreenPresets(t,!0).forEach((t=>{null!=t.breakpoint&&e<=t.breakpoint&&(i=t)})),i}export const widgetTypes=new Map;export function registerWidgetTypes(){widgetTypes.set("linechart",ChartWidget.getManifest()),widgetTypes.set("gauge",GaugeWidget.getManifest()),widgetTypes.set("image",ImageWidget.getManifest()),widgetTypes.set("kpi",KpiWidget.getManifest()),widgetTypes.set("map",MapWidget.getManifest()),widgetTypes.set("attributeinput",AttributeInputWidget.getManifest()),widgetTypes.set("table",TableWidget.getManifest())}let OrDashboardBuilder=class extends LitElement{static get styles(){return[styling,style]}constructor(){super(),this.editMode=!1,this.fullscreen=!0,this.realm=manager.displayRealm,this.readonly=!0,this.refreshInterval="OFF",this.keyEmitter=new DashboardKeyEmitter,this.sidebarMenuIndex=0,this.showDashboardTree=!0,this.menuItems=[{icon:"content-copy",text:i18next.t("copy")+" URL",value:"copy"},{icon:"open-in-new",text:i18next.t("dashboard.openInNewTab"),value:"tab"}],this.tabItems=[{name:i18next.t("dashboard.widgets")},{name:i18next.t("settings")}],this.isInitializing=!0,this.isLoading=!0,this.hasChanged=!1,registerWidgetTypes(),this.updateComplete.then((()=>{this.loadAllDashboards(this.realm)}))}connectedCallback(){super.connectedCallback(),this.keyEmitter.addListener("delete",(e=>{var t,i,s;if(this.selectedWidgetId){const e=null===(s=null===(i=null===(t=this.selectedDashboard)||void 0===t?void 0:t.template)||void 0===i?void 0:i.widgets)||void 0===s?void 0:s.find((e=>e.id==this.selectedWidgetId));e&&showOkCancelDialog(i18next.t("areYouSure"),i18next.t("dashboard.deleteWidgetWarning"),i18next.t("delete")).then((t=>{t&&this.deleteWidget(e)}))}})),this.keyEmitter.addListener("deselect",(e=>{this.deselectWidget()})),this.keyEmitter.addListener("save",(e=>{this.saveDashboard()}))}disconnectedCallback(){super.disconnectedCallback(),this.keyEmitter.removeAllListeners()}willUpdate(e){var t,i,s;if(super.willUpdate(e),this.isLoading=null==this.dashboards,this.isInitializing=null==this.dashboards,1!==e.size||!e.has("selectedWidget")){const e=Util.objectsEqual(this.selectedDashboard,this.initialDashboardJSON?JSON.parse(this.initialDashboardJSON):void 0),t=Util.objectsEqual(this.currentTemplate,this.initialTemplateJSON?JSON.parse(this.initialTemplateJSON):void 0);this.hasChanged=!e||!t}e.has("realm")&&void 0!==e.get("realm")&&this.realm&&this.loadAllDashboards(this.realm),e.has("selectedDashboard")&&(this.deselectWidget(),this.currentTemplate=null===(t=this.selectedDashboard)||void 0===t?void 0:t.template,this.editMode||(this.refreshInterval=(null===(i=this.currentTemplate)||void 0===i?void 0:i.refreshInterval)||"OFF",e.set("refreshInterval",this.refreshInterval)),this.dispatchEvent(new CustomEvent("selected",{detail:this.selectedDashboard}))),e.has("editMode")&&(this.deselectWidget(),this.refreshInterval="OFF",this.showDashboardTree=!0,this.editMode?this.refreshInterval="OFF":this.refreshInterval=(null===(s=this.currentTemplate)||void 0===s?void 0:s.refreshInterval)||"OFF",e.set("refreshInterval",this.refreshInterval)),e.has("refreshInterval")&&this.refreshInterval&&this.setRefreshTimer(intervalToMillis(this.refreshInterval))}setRefreshTimer(e){this.clearRefreshTimer(),void 0!==e&&(this.refreshTimer=setInterval((()=>{var e;this.deselectWidget(),null===(e=this.dashboardPreview)||void 0===e||e.refreshWidgets()}),e))}clearRefreshTimer(){this.refreshTimer&&(clearInterval(this.refreshTimer),this.refreshTimer=void 0)}loadAllDashboards(e){var t;return __awaiter(this,void 0,void 0,(function*(){yield manager.rest.api.DashboardResource.getAllRealmDashboards(e).then((e=>{this.dashboards=e.data})).catch((e=>{showSnackbar(void 0,"errorOccurred"),console.error(e)})),void 0!==this.selectedId&&(this.selectedDashboard=null===(t=this.dashboards)||void 0===t?void 0:t.find((e=>e.id==this.selectedId)))}))}updated(e){super.updated(e),e.has("currentTemplate")&&null!=this.selectedDashboard&&(this.selectedDashboard.template=this.currentTemplate)}onWidgetCreation(e){const t=JSON.parse(JSON.stringify(this.currentTemplate));t.widgets||(t.widgets=[]),t.widgets.push(e),this.currentTemplate=t}deleteWidget(e){var t;if(null!=this.currentTemplate&&null!=this.currentTemplate.widgets){const i=this.currentTemplate;i.widgets=null===(t=i.widgets)||void 0===t?void 0:t.filter((t=>t.id!=e.id)),this.currentTemplate=i}this.selectedWidgetId===e.id&&this.deselectWidget()}selectWidget(e){var t,i;const s=null===(i=null===(t=this.currentTemplate)||void 0===t?void 0:t.widgets)||void 0===i?void 0:i.find((t=>{var i,s;return(null===(i=t.gridItem)||void 0===i?void 0:i.id)==(null===(s=e.gridItem)||void 0===s?void 0:s.id)}));null!=s?this.selectedWidgetId=s.id:console.error("The selected widget does not exist!")}deselectWidget(){this.selectedWidgetId=void 0}selectDashboard(e){var t;if(null!=this.dashboards){if(this.selectedDashboard&&this.initialDashboardJSON){const e=this.dashboards.indexOf(this.selectedDashboard);e&&(this.dashboards[e]=JSON.parse(this.initialDashboardJSON))}this.selectedDashboard=e?this.dashboards.find((t=>t.id==e.id)):void 0,this.initialDashboardJSON=JSON.stringify(this.selectedDashboard),this.initialTemplateJSON=JSON.stringify(null===(t=this.selectedDashboard)||void 0===t?void 0:t.template)}}changeDashboardName(e){null!=this.selectedDashboard&&(this.selectedDashboard.displayName=e,this.requestUpdate("selectedDashboard"))}openDashboardInInsights(){var e;if(null!=this.selectedDashboard){const t=window.location.origin+"/insights/?realm="+manager.displayRealm+"#/view/"+this.selectedDashboard.id+"/true/";null===(e=window.open(t))||void 0===e||e.focus()}}shareUrl(e){var t;let i=window.location.href.replace("true","false");"copy"==e?navigator.clipboard.writeText(i):"tab"==e&&(null===(t=window.open(i,"_blank"))||void 0===t||t.focus())}saveDashboard(){null!=this.selectedDashboard&&!this._isReadonly()&&this._hasEditAccess()?(this.isLoading=!0,manager.rest.api.DashboardResource.update(this.selectedDashboard).then((()=>{var e;null!=this.dashboards&&null!=this.selectedDashboard&&(this.initialDashboardJSON=JSON.stringify(this.selectedDashboard),this.initialTemplateJSON=JSON.stringify(this.selectedDashboard.template),this.dashboards[null===(e=this.dashboards)||void 0===e?void 0:e.indexOf(this.selectedDashboard)]=this.selectedDashboard,this.currentTemplate=Object.assign({},this.selectedDashboard.template),showSnackbar(void 0,"dashboard.saveSuccessful"))})).catch((e=>{console.error(e),showSnackbar(void 0,"errorOccurred")})).finally((()=>{this.isLoading=!1}))):(console.error("The selected dashboard could not be found.."),showSnackbar(void 0,"errorOccurred"))}_isReadonly(){return this.readonly||!manager.hasRole("write:insights")}_hasEditAccess(){var e,t;return null!=this.userId&&("PRIVATE"!=(null===(e=this.selectedDashboard)||void 0===e?void 0:e.editAccess)||(null===(t=this.selectedDashboard)||void 0===t?void 0:t.ownerId)==this.userId)}_hasViewAccess(){var e,t;return null!=this.userId&&("PRIVATE"!=(null===(e=this.selectedDashboard)||void 0===e?void 0:e.viewAccess)||(null===(t=this.selectedDashboard)||void 0===t?void 0:t.ownerId)==this.userId)}render(){var e,t,i,s;window.matchMedia("(max-width: 600px)").matches&&this.editMode&&(this.dispatchEvent(new CustomEvent("editToggle",{detail:!1})),this.showDashboardTree=!0);const r={display:!this.editMode||!this._isReadonly()&&this._hasEditAccess()?void 0:"none",maxHeight:this.editMode?"calc(100vh - 77px - 50px)":"inherit"};return!this.isInitializing||null!=this.dashboards&&0==this.dashboards.length?html`
+            <div id="container">
+                ${this.showDashboardTree?html`
+                    <or-dashboard-tree id="tree" class="${this.selectedDashboard?"hideMobile":void 0}"
+                                       .realm="${this.realm}" .hasChanged="${this.hasChanged}" .selected="${this.selectedDashboard}" .dashboards="${this.dashboards}" .showControls="${!0}" .userId="${this.userId}" .readonly="${this._isReadonly()}"
+                                       @created="${e=>{this.dispatchEvent(new CustomEvent("editToggle",{detail:!0}))}}"
+                                       @updated="${e=>{this.dashboards=e.detail,this.selectedDashboard=void 0}}"
+                                       @select="${e=>{this.selectDashboard(e.detail)}}"
+                    ></or-dashboard-tree>
+                `:void 0}
+                <div class="${null==this.selectedDashboard?"hideMobile":void 0}" style="flex: 1; display: flex; flex-direction: column;">
+                    ${this.editMode?html`
+                        <div id="header" class="hideMobile">
+                            <div id="header-wrapper">
+                                <div id="header-title">
+                                    <or-icon icon="view-dashboard"></or-icon>
+                                    ${null!=this.selectedDashboard?html`
+                                        <or-mwc-input .type="${InputType.TEXT}" min="1" max="1023" comfortable required outlined .label="${i18next.t("name")+"* "}" 
+                                                      ?readonly="${this._isReadonly()}" .value="${this.selectedDashboard.displayName}" 
+                                                      .disabled="${this.isLoading}" style="width: 300px;" 
+                                                      @or-mwc-input-changed="${e=>{this.changeDashboardName(e.detail.value)}}"
+                                        ></or-mwc-input>
+                                    `:void 0}
+                                </div>
+                                <div id="header-actions">
+                                    <div id="header-actions-content">
+                                        ${when(this.selectedDashboard,(()=>html`
+                                            <or-mwc-input id="refresh-btn" class="small-btn" .disabled="${this.isLoading}" type="${InputType.BUTTON}" icon="refresh"
+                                                          @or-mwc-input-changed="${()=>{var e;this.deselectWidget(),null===(e=this.dashboardPreview)||void 0===e||e.refreshPreview()}}">
+                                            </or-mwc-input>
+                                            <or-mwc-input id="responsive-btn" class="small-btn" .disabled="${this.isLoading}" type="${InputType.BUTTON}" icon="responsive"
+                                                          @or-mwc-input-changed="${()=>{this.dispatchEvent(new CustomEvent("fullscreenToggle",{detail:!this.fullscreen}))}}">
+                                            </or-mwc-input>
+                                            <or-mwc-input id="share-btn" class="small-btn" .disabled="${this.isLoading}" type="${InputType.BUTTON}" icon="open-in-new"
+                                                          @or-mwc-input-changed="${()=>{this.openDashboardInInsights()}}">
+                                            </or-mwc-input>
+                                            <or-mwc-input id="save-btn" ?hidden="${this._isReadonly()||!this._hasEditAccess()}" .disabled="${this.isLoading||!this.hasChanged}" type="${InputType.BUTTON}" raised label="save"
+                                                          @or-mwc-input-changed="${()=>{this.saveDashboard()}}">
+                                            </or-mwc-input>
+                                            <or-mwc-input id="view-btn" ?hidden="${this._isReadonly()||!this._hasViewAccess()}" type="${InputType.BUTTON}" outlined icon="eye" label="viewAsset"
+                                                          @or-mwc-input-changed="${()=>{this.dispatchEvent(new CustomEvent("editToggle",{detail:!1}))}}">
+                                            </or-mwc-input>
+                                        `))}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    `:html`
+                        <div id="fullscreen-header">
+                            <div id="fullscreen-header-wrapper">
+                                <div id="fullscreen-header-title" style="display: flex; align-items: center;">
+                                    <or-icon class="showMobile" style="margin-right: 10px;" icon="chevron-left" @click="${()=>{this.selectedDashboard=void 0}}"></or-icon>
+                                    <or-icon class="hideMobile" style="margin-right: 10px;" icon="menu" @click="${()=>{this.showDashboardTree=!this.showDashboardTree}}"></or-icon>
+                                    <span>${null===(e=this.selectedDashboard)||void 0===e?void 0:e.displayName}</span>
+                                </div>
+                                <div id="fullscreen-header-actions">
+                                    <div id="fullscreen-header-actions-content">
+                                        ${when(this.selectedDashboard,(()=>html`
+                                            <or-mwc-input id="refresh-btn" class="small-btn" .disabled="${null==this.selectedDashboard}" type="${InputType.BUTTON}" icon="refresh"
+                                                      @or-mwc-input-changed="${()=>{var e;this.deselectWidget(),null===(e=this.dashboardPreview)||void 0===e||e.refreshPreview()}}"
+                                            ></or-mwc-input>
+                                            <dashboard-refresh-controls .interval="${this.refreshInterval}" .readonly="${!1}"
+                                                                        @interval-select="${e=>this.onIntervalSelect(e)}"
+                                            ></dashboard-refresh-controls>
+                                            <or-mwc-input id="share-btn" class="small-btn" .disabled="${null==this.selectedDashboard}" type="${InputType.BUTTON}" icon="open-in-new"
+                                                          @or-mwc-input-changed="${()=>{this.openDashboardInInsights()}}"
+                                            ></or-mwc-input>
+                                            <or-mwc-input id="view-btn" class="hideMobile" ?hidden="${null==this.selectedDashboard||this._isReadonly()||!this._hasEditAccess()}" type="${InputType.BUTTON}" outlined icon="pencil" label="editAsset"
+                                                          @or-mwc-input-changed="${()=>{this.dispatchEvent(new CustomEvent("editToggle",{detail:!0}))}}">
+                                            </or-mwc-input>
+                                        `))}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    `}
+                    <div id="content" style="flex: 1;">
+                        <div id="container">
+                            ${!this.editMode||!this._isReadonly()&&this._hasEditAccess()?void 0:html`
+                                <div style="display: flex; justify-content: center; align-items: center; height: 100%;">
+                                    <span>${this._hasEditAccess()?i18next.t("errorOccurred"):i18next.t("noDashboardWriteAccess")}.</span>
+                                </div>
+                            `}
+                            <div id="builder" style="${styleMap(r)}">
+                                ${null!=this.selectedDashboard?html`
+                                    <or-dashboard-preview class="editor" style="background: transparent;"
+                                                          .realm="${this.realm}" .template="${this.currentTemplate}"
+                                                          .selectedWidget="${null===(s=null===(i=null===(t=this.selectedDashboard)||void 0===t?void 0:t.template)||void 0===i?void 0:i.widgets)||void 0===s?void 0:s.find((e=>e.id==this.selectedWidgetId))}" .editMode="${this.editMode}"
+                                                          .fullscreen="${this.fullscreen}" .readonly="${this._isReadonly()}"
+                                                          @selected="${e=>{this.selectWidget(e.detail)}}"
+                                                          @deselected="${()=>{this.deselectWidget()}}"
+                                                          @created="${e=>{this.onWidgetCreation(e.detail)}}"
+                                                          @changed="${e=>{this.currentTemplate=e.detail.template}}"
+                                    ></or-dashboard-preview>
+                                `:html`
+                                    <div style="display: flex; justify-content: center; align-items: center; height: 100%;">
+                                        <span>${i18next.t("noDashboardSelected")}</span>
+                                    </div>
+                                `}
+                            </div>
+                            ${when(null!=this.selectedDashboard&&this.editMode&&!this._isReadonly()&&this._hasEditAccess(),(()=>{var e,t,i,s;const r=null===(i=null===(t=null===(e=this.selectedDashboard)||void 0===e?void 0:e.template)||void 0===t?void 0:t.widgets)||void 0===i?void 0:i.find((e=>e.id==this.selectedWidgetId));return html`
+                                    <div id="sidebar" class="hideMobile">
+                                        ${null!=this.selectedWidgetId?html`
+                                            <div class="settings-container">
+                                                <div id="menu-header">
+                                                    <div id="title-container">
+                                                        <span id="title" title="${null==r?void 0:r.displayName}">${null==r?void 0:r.displayName}</span>
+                                                    </div>
+                                                    <div id="sidebar-widget-headeractions">
+                                                        <or-mwc-input type="${InputType.BUTTON}" icon="delete" @or-mwc-input-changed="${()=>{showOkCancelDialog(i18next.t("areYouSure"),i18next.t("dashboard.deleteWidgetWarning"),i18next.t("delete")).then((e=>{e&&this.deleteWidget(r)}))}}"></or-mwc-input>
+                                                        <or-mwc-input type="${InputType.BUTTON}" icon="close" @or-mwc-input-changed="${()=>{this.deselectWidget()}}"></or-mwc-input>
+                                                    </div>
+                                                </div>
+                                                <div id="content" class="hidescroll" style="flex: 1; overflow: hidden auto;">
+                                                    <div style="position: relative;">
+                                                        <or-dashboard-widgetsettings style="position: absolute;" .selectedWidget="${r}" .realm="${this.realm}"
+                                                                                     @delete="${e=>{this.deleteWidget(e.detail)}}"
+                                                                                     @update="${e=>{var t,i;this.currentTemplate=Object.assign({},null===(t=this.selectedDashboard)||void 0===t?void 0:t.template),e.detail.force&&(this.deselectWidget(),null===(i=this.dashboardPreview)||void 0===i||i.refreshPreview())}}"
+                                                        ></or-dashboard-widgetsettings>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        `:void 0}
+                                        <div class="settings-container" style="${null!=this.selectedWidgetId?css`display: none`:null}">
+                                            <div style="border-bottom: 1px solid ${unsafeCSS(DefaultColor5)};">
+                                                <or-mwc-tabs .items="${this.tabItems}" noScroll @activated="${e=>{this.sidebarMenuIndex=e.detail.index}}" style="pointer-events: ${this.selectedDashboard?void 0:"none"}"></or-mwc-tabs>
+                                            </div>
+                                            <div id="content" class="hidescroll" style="flex: 1; overflow: hidden auto;">
+                                                <div style="position: relative;">
+                                                    <or-dashboard-browser id="browser" style="position: absolute; ${0!=this.sidebarMenuIndex?css`display: none`:null}"></or-dashboard-browser>
+                                                    <or-dashboard-boardsettings style="position: absolute; ${1!=this.sidebarMenuIndex?css`display: none`:null}" 
+                                                                                .dashboard="${this.selectedDashboard}" .showPerms="${(null===(s=this.selectedDashboard)||void 0===s?void 0:s.ownerId)==this.userId}" 
+                                                                                @update="${e=>{var t,i;this.currentTemplate=Object.assign({},null===(t=this.selectedDashboard)||void 0===t?void 0:t.template),e.detail.force&&(this.deselectWidget(),null===(i=this.dashboardPreview)||void 0===i||i.refreshPreview())}}"
+                                                    ></or-dashboard-boardsettings>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                `}))}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `:html`
+            <div id="container" style="justify-content: center; align-items: center;">
+                ${this.isInitializing?html`
+                    <span>${i18next.t("loading")}.</span>
+                `:html`
+                    <span>${i18next.t("errorOccurred")}.</span>
+                `}
+            </div>
+        `}onIntervalSelect(e){this.refreshInterval=e.detail}};__decorate([property()],OrDashboardBuilder.prototype,"config",void 0),__decorate([property()],OrDashboardBuilder.prototype,"editMode",void 0),__decorate([property()],OrDashboardBuilder.prototype,"fullscreen",void 0),__decorate([property()],OrDashboardBuilder.prototype,"selectedId",void 0),__decorate([property()],OrDashboardBuilder.prototype,"realm",void 0),__decorate([property()],OrDashboardBuilder.prototype,"userId",void 0),__decorate([property()],OrDashboardBuilder.prototype,"readonly",void 0),__decorate([state()],OrDashboardBuilder.prototype,"dashboards",void 0),__decorate([state()],OrDashboardBuilder.prototype,"currentTemplate",void 0),__decorate([state()],OrDashboardBuilder.prototype,"selectedDashboard",void 0),__decorate([state()],OrDashboardBuilder.prototype,"selectedWidgetId",void 0),__decorate([state()],OrDashboardBuilder.prototype,"initialDashboardJSON",void 0),__decorate([state()],OrDashboardBuilder.prototype,"initialTemplateJSON",void 0),__decorate([state()],OrDashboardBuilder.prototype,"refreshInterval",void 0),__decorate([state()],OrDashboardBuilder.prototype,"isInitializing",void 0),__decorate([state()],OrDashboardBuilder.prototype,"isLoading",void 0),__decorate([state()],OrDashboardBuilder.prototype,"hasChanged",void 0),__decorate([query("or-dashboard-preview")],OrDashboardBuilder.prototype,"dashboardPreview",void 0),__decorate([state()],OrDashboardBuilder.prototype,"sidebarMenuIndex",void 0),__decorate([state()],OrDashboardBuilder.prototype,"showDashboardTree",void 0),OrDashboardBuilder=__decorate([customElement("or-dashboard-builder")],OrDashboardBuilder);export{OrDashboardBuilder};