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

package/src/settings/kpi-settings.ts

@@ -0,0 +1,106 @@
+import {css, html, TemplateResult } from "lit";
+import { customElement } from "lit/decorators.js";
+import {AssetWidgetSettings} from "../util/or-asset-widget";
+import {i18next} from "@openremote/or-translate";
+import {KpiWidgetConfig} from "../widgets/kpi-widget";
+import {AttributesSelectEvent} from "../panels/attributes-panel";
+import {Attribute, AttributeRef} from "@openremote/model";
+import { InputType, OrInputChangedEvent } from "@openremote/or-mwc-components/or-mwc-input";
+
+const styling = css`
+  .switchMwcInputContainer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+`;
+
+@customElement("kpi-settings")
+export class KpiSettings extends AssetWidgetSettings {
+
+    protected widgetConfig!: KpiWidgetConfig;
+
+    static get styles() {
+        return [...super.styles, styling];
+    }
+
+    protected render(): TemplateResult {
+        const attributeFilter: (attr: Attribute<any>) => boolean = (attr): boolean => {
+            return ["positiveInteger", "positiveNumber", "number", "long", "integer", "bigInteger", "negativeInteger", "negativeNumber", "bigNumber", "integerByte", "direction"].includes(attr.type!)
+        };
+        return html`
+            <div>
+                <!-- Attribute selector -->
+                <settings-panel displayName="attributes" expanded="${true}">
+                    <attributes-panel .attributeRefs="${this.widgetConfig.attributeRefs}" onlyDataAttrs="${false}" .attributeFilter="${attributeFilter}" style="padding-bottom: 12px;"
+                                      @attribute-select="${(ev: AttributesSelectEvent) => this.onAttributesSelect(ev)}"
+                    ></attributes-panel>
+                </settings-panel>
+
+                <!-- Display settings -->
+                <settings-panel displayName="display" expanded="${true}">
+                    <div style="display: flex; flex-direction: column; gap: 8px;">
+                        <or-mwc-input .type="${InputType.SELECT}" style="width: 100%;"
+                                      .options="${['year', 'month', 'week', 'day', 'hour']}"
+                                      .value="${this.widgetConfig.period}" label="${i18next.t('timeframe')}"
+                                      @or-mwc-input-changed="${(ev: OrInputChangedEvent) => this.onTimeframeSelect(ev)}"
+                        ></or-mwc-input>
+                        <div class="switchMwcInputContainer">
+                            <span><or-translate value="dashboard.allowTimerangeSelect"></or-translate></span>
+                            <or-mwc-input .type="${InputType.SWITCH}" style="margin: 0 -10px;" .value="${this.widgetConfig.showTimestampControls}"
+                                          @or-mwc-input-changed="${(ev: OrInputChangedEvent) => this.onTimeframeToggle(ev)}"
+                            ></or-mwc-input>
+                        </div>
+                    </div>
+                </settings-panel>
+
+                <settings-panel displayName="values" expanded="${true}">
+                    <div style="display: flex; flex-direction: column; gap: 8px;">
+                        <or-mwc-input .type="${InputType.SELECT}" style="width: 100%;" .options="${['absolute', 'percentage']}" .value="${this.widgetConfig.deltaFormat}"
+                                      label="${i18next.t('dashboard.showValueAs')}"
+                                      @or-mwc-input-changed="${(ev: OrInputChangedEvent) => this.onDeltaFormatSelect(ev)}"
+                        ></or-mwc-input>
+                        <or-mwc-input .type="${InputType.NUMBER}" style="width: 100%;" .value="${this.widgetConfig.decimals}" label="${i18next.t('decimals')}"
+                                      @or-mwc-input-changed="${(ev: OrInputChangedEvent) => this.onDecimalsChange(ev)}"
+                        ></or-mwc-input>
+                    </div>
+                </settings-panel>
+
+                <!-- -->
+            </div>
+        `;
+    }
+
+    // When new attributes get selected
+    // Update the displayName to the new asset and attribute name.
+    protected onAttributesSelect(ev: AttributesSelectEvent) {
+        this.widgetConfig.attributeRefs = ev.detail.attributeRefs;
+        if(ev.detail.attributeRefs.length === 1) {
+            const attributeRef = ev.detail.attributeRefs[0];
+            const asset = ev.detail.assets.find((asset) => asset.id === attributeRef.id);
+            this.setDisplayName!(asset ? `${asset.name} - ${attributeRef.name}` : `${attributeRef.name}`);
+        }
+        this.notifyConfigUpdate();
+    }
+
+    protected onTimeframeSelect(ev: OrInputChangedEvent) {
+        this.widgetConfig.period = ev.detail.value;
+        this.notifyConfigUpdate();
+    }
+
+    protected onTimeframeToggle(ev: OrInputChangedEvent) {
+        this.widgetConfig.showTimestampControls = ev.detail.value;
+        this.notifyConfigUpdate();
+    }
+
+    protected onDeltaFormatSelect(ev: OrInputChangedEvent) {
+        this.widgetConfig.deltaFormat = ev.detail.value;
+        this.notifyConfigUpdate();
+    }
+
+    protected onDecimalsChange(ev: OrInputChangedEvent) {
+        this.widgetConfig.decimals = ev.detail.value;
+        this.notifyConfigUpdate();
+    }
+
+}

package/src/settings/map-settings.ts

@@ -0,0 +1,185 @@
+import {css, html, TemplateResult} from "lit";
+import {customElement} from "lit/decorators.js";
+import {AssetWidgetSettings} from "../util/or-asset-widget";
+import {i18next} from "@openremote/or-translate";
+import {InputType, OrInputChangedEvent} from "@openremote/or-mwc-components/or-mwc-input";
+import {MapWidgetConfig} from "../widgets/map-widget";
+import {LngLatLike} from "@openremote/or-map";
+import "../panels/assettypes-panel";
+import "../panels/thresholds-panel";
+import {LngLat} from "maplibre-gl"; // TODO: Replace this import
+import {when} from "lit/directives/when.js";
+import {AssetTypeSelectEvent, AssetTypesFilterConfig, AttributeNamesSelectEvent} from "../panels/assettypes-panel";
+import manager from "@openremote/core";
+import {showSnackbar} from "@openremote/or-mwc-components/or-mwc-snackbar";
+import {ThresholdChangeEvent} from "../panels/thresholds-panel";
+
+const styling = css`
+  .switchMwcInputContainer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+`;
+
+@customElement("map-settings")
+export class MapSettings extends AssetWidgetSettings {
+
+    protected widgetConfig!: MapWidgetConfig;
+
+    static get styles() {
+        return [...super.styles, styling];
+    }
+
+    protected render(): TemplateResult {
+        const allowedValueTypes = ["boolean", "number", "positiveInteger", "positiveNumber", "negativeInteger", "negativeNumber", "text"];
+        const config = {
+            attributes: {
+                enabled: true,
+                valueTypes: allowedValueTypes
+            }
+        } as AssetTypesFilterConfig;
+        return html`
+            <div>
+
+                <!-- Map settings -->
+                <settings-panel displayName="configuration.mapSettings" expanded="${true}">
+                    <div style="display: flex; flex-direction: column; gap: 8px;">
+                        <div>
+                            <or-mwc-input .type="${InputType.NUMBER}" style="width: 100%;"
+                                          .value="${this.widgetConfig.zoom}" label="${i18next.t('dashboard.zoom')}"
+                                          @or-mwc-input-changed="${(ev: OrInputChangedEvent) => this.onZoomUpdate(ev)}"
+                            ></or-mwc-input>
+                        </div>
+                        <div style="display: flex; gap: 8px;">
+                            <or-mwc-input .type="${InputType.TEXT}" style="width: 100%;"
+                                          .value="${this.widgetConfig.center ? (Object.values(this.widgetConfig.center))[0] + ', ' + (Object.values(this.widgetConfig.center))[1] : undefined}"
+                                          label="${i18next.t('dashboard.center')}"
+                                          @or-mwc-input-changed="${(ev: OrInputChangedEvent) => this.onCenterUpdate(ev)}"
+                            ></or-mwc-input>
+                        </div>
+                        <div style="display: flex; justify-content: space-between; align-items: center;">
+                            <span><or-translate value="dashboard.showGeoJson"></or-translate></span>
+                            <or-mwc-input .type="${InputType.SWITCH}" style="width: 70px;"
+                                          .value="${this.widgetConfig.showGeoJson}"
+                                          @or-mwc-input-changed="${(ev: OrInputChangedEvent) => this.onGeoJsonToggle(ev)}"
+                            ></or-mwc-input>
+                        </div>
+                    </div>
+                </settings-panel>
+
+                <!-- Panel where Asset type and the selected attribute can be customized -->
+                <settings-panel displayName="attributes" expanded="${true}">
+                    <assettypes-panel .assetType="${this.widgetConfig.assetType}" .attributeNames="${this.widgetConfig.attributeName}" .config="${config}"
+                                      @assettype-select="${(ev: AssetTypeSelectEvent) => this.onAssetTypeSelect(ev)}"
+                                      @attributenames-select="${(ev: AttributeNamesSelectEvent) => this.onAttributeNameSelect(ev)}"
+                    ></assettypes-panel>
+
+                    <!-- Other settings like labels and units-->
+                    <div>
+                        <div class="switchMwcInputContainer">
+                            <span><or-translate value="dashboard.showLabels"></or-translate></span>
+                            <or-mwc-input .type="${InputType.SWITCH}" style="width: 70px;"
+                                          .value="${this.widgetConfig.showLabels}" .disabled="${!this.widgetConfig.assetType}"
+                                          @or-mwc-input-changed="${(ev: OrInputChangedEvent) => this.onShowLabelsToggle(ev)}"
+                            ></or-mwc-input>
+                        </div>
+                        <div class="switchMwcInputContainer">
+                            <span><or-translate value="dashboard.showUnits"></or-translate></span>
+                            <or-mwc-input .type="${InputType.SWITCH}" style="width: 70px;"
+                                          .value="${this.widgetConfig.showUnits}" .disabled="${!this.widgetConfig.showLabels || !this.widgetConfig.assetType}"
+                                          @or-mwc-input-changed="${(ev: OrInputChangedEvent) => this.onShowUnitsToggle(ev)}"
+                            ></or-mwc-input>
+                        </div>
+                    </div>
+                </settings-panel>
+
+                <!-- List of customizable thresholds -->
+                ${when(this.widgetConfig.assetIds.length > 0, () => html`
+                    <settings-panel displayName="thresholds" expanded="${true}">
+                        <thresholds-panel .thresholds="${this.widgetConfig.thresholds}" .valueType="${this.widgetConfig.valueType}" style="padding-bottom: 12px;"
+                                          .min="${this.widgetConfig.min}" .max="${this.widgetConfig.max}"
+                                          @threshold-change="${(ev: ThresholdChangeEvent) => this.onThresholdsChange(ev)}">
+                        </thresholds-panel>
+                    </settings-panel>
+                `)}
+            </div>
+        `;
+    }
+
+    protected onZoomUpdate(ev: OrInputChangedEvent) {
+        this.widgetConfig.zoom = ev.detail.value;
+        this.notifyConfigUpdate();
+    }
+
+    protected onCenterUpdate(ev: OrInputChangedEvent) {
+        if (ev.detail.value) {
+            const lngLatArr = (ev.detail.value as string).split(/[, ]/).filter(v => !!v);
+            if (lngLatArr.length === 2) {
+                const value = new LngLat(
+                    Number.parseFloat(lngLatArr[0]),
+                    Number.parseFloat(lngLatArr[1])
+                );
+                this.widgetConfig.center = value as LngLatLike;
+                this.notifyConfigUpdate();
+            }
+        }
+    }
+
+    protected onGeoJsonToggle(ev: OrInputChangedEvent) {
+        this.widgetConfig.showGeoJson = ev.detail.value;
+        this.notifyConfigUpdate();
+    }
+
+    protected onAssetTypeSelect(ev: AssetTypeSelectEvent) {
+        if (this.widgetConfig.assetType !== ev.detail) {
+            this.widgetConfig.attributeName = undefined;
+            this.widgetConfig.assetIds = [];
+            this.widgetConfig.showLabels = false;
+            this.widgetConfig.showUnits = false;
+            this.widgetConfig.boolColors = {type: 'boolean', 'false': '#ef5350', 'true': '#4caf50'};
+            this.widgetConfig.textColors = [['example', "#4caf50"], ['example2', "#ff9800"]];
+            this.widgetConfig.thresholds = [[0, "#4caf50"], [75, "#ff9800"], [90, "#ef5350"]];
+            this.widgetConfig.assetType = ev.detail;
+            this.notifyConfigUpdate();
+        }
+    }
+
+    protected async onAttributeNameSelect(ev: AttributeNamesSelectEvent) {
+        const attrName = ev.detail as string;
+        this.widgetConfig.attributeName = attrName;
+        await manager.rest.api.AssetResource.queryAssets({
+            realm: {
+                name: manager.displayRealm
+            },
+            select: {
+                attributes: [attrName, 'location']
+            },
+            types: [this.widgetConfig.assetType!],
+        }).then(response => {
+            this.widgetConfig.assetIds = response.data.map((a) => a.id!);
+            this.widgetConfig.valueType = (response.data.length > 0) ? response.data[0].attributes![attrName].type : "text"; // sometimes no asset exists of that assetType, so using 'text' as fallback.
+        }).catch((reason) => {
+            console.error(reason);
+            showSnackbar(undefined, "errorOccurred");
+        });
+
+        this.notifyConfigUpdate()
+    }
+
+    protected onShowLabelsToggle(ev: OrInputChangedEvent) {
+        this.widgetConfig.showLabels = ev.detail.value;
+        this.notifyConfigUpdate();
+    }
+
+    protected onShowUnitsToggle(ev: OrInputChangedEvent) {
+        this.widgetConfig.showUnits = ev.detail.value;
+        this.notifyConfigUpdate();
+    }
+
+    protected onThresholdsChange(ev: ThresholdChangeEvent) {
+        this.widgetConfig.thresholds = ev.detail;
+        this.notifyConfigUpdate();
+    }
+
+}

package/src/settings/table-settings.ts

@@ -0,0 +1,92 @@
+import {css, html, TemplateResult } from "lit";
+import { customElement } from "lit/decorators.js";
+import {AssetWidgetSettings} from "../util/or-asset-widget";
+import {TableWidgetConfig} from "../widgets/table-widget";
+import { InputType, OrInputChangedEvent } from "@openremote/or-mwc-components/or-mwc-input";
+import {AssetIdsSelectEvent, AssetTypeSelectEvent, AssetTypesFilterConfig, AttributeNamesSelectEvent} from "../panels/assettypes-panel";
+
+const styling = css`
+  .customMwcInputContainer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+`;
+
+@customElement("table-settings")
+export class TableSettings extends AssetWidgetSettings {
+
+    protected widgetConfig!: TableWidgetConfig;
+
+    static get styles() {
+        return [...super.styles, styling];
+    }
+
+    protected render(): TemplateResult {
+        const config = {
+            assets: {
+                enabled: true,
+                multi: true
+            },
+            attributes: {
+                enabled: true,
+                multi: true
+            }
+        } as AssetTypesFilterConfig
+        return html`
+            <div>
+                <!-- Asset type, assets, and attribute picker -->
+                <settings-panel displayName="attributes" expanded="${true}">
+                    <div style="padding-bottom: 12px;">
+                        <assettypes-panel .assetType="${this.widgetConfig.assetType}" .config="${config}"
+                                          .assetIds="${this.widgetConfig.assetIds}" .attributeNames="${this.widgetConfig.attributeNames}"
+                                          @assettype-select="${(ev: AssetTypeSelectEvent) => this.onAssetTypeSelect(ev)}"
+                                          @assetids-select="${(ev: AssetIdsSelectEvent) => this.onAssetIdsSelect(ev)}"
+                                          @attributenames-select="${(ev: AttributeNamesSelectEvent) => this.onAttributesSelect(ev)}"
+                        ></assettypes-panel>
+                    </div>
+                </settings-panel>
+                
+                <!-- Table settings like amount of rows -->
+                <settings-panel displayName="dashboard.tableSettings" expanded="${true}">
+                    <div style="padding-bottom: 12px;">
+                        <div class="customMwcInputContainer">
+                            <span style="min-width: 180px"><or-translate value="dashboard.numberOfRows"></or-translate></span>
+                            <or-mwc-input type="${InputType.SELECT}" .options="${[10, 25, 100]}" .value="${this.widgetConfig.tableSize}"
+                                          @or-mwc-input-changed="${(ev: OrInputChangedEvent) => this.onTableSizeSelect(ev)}"
+                            ></or-mwc-input>
+                        </div>
+                    </div>
+                </settings-panel>
+            </div>
+        `
+    }
+
+    protected onAssetTypeSelect(ev: AssetTypeSelectEvent) {
+        this.widgetConfig.assetType = ev.detail;
+        this.widgetConfig.assetIds = [];
+        this.widgetConfig.attributeNames = [];
+        this.notifyConfigUpdate();
+    }
+
+    protected onAssetIdsSelect(ev: AssetIdsSelectEvent) {
+        this.widgetConfig.assetIds = ev.detail as string[];
+        this.notifyConfigUpdate();
+    }
+
+    protected onAttributesSelect(ev: AttributeNamesSelectEvent) {
+        this.widgetConfig.attributeNames = ev.detail as string[];
+        this.notifyConfigUpdate();
+    }
+
+    protected onTableSizeSelect(ev: OrInputChangedEvent) {
+        const value = ev.detail.value || 10;
+        this.widgetConfig.tableSize = value;
+        if(value !== 10) {
+            this.widgetConfig.tableOptions = [value];
+        } else {
+            this.widgetConfig.tableOptions = [10, 25, 100]
+        }
+        this.notifyConfigUpdate();
+    }
+}

package/src/style.ts

@@ -0,0 +1,104 @@
+import { css, unsafeCSS } from "lit";
+import {DefaultColor1, DefaultColor2, DefaultColor4, DefaultColor5} from "@openremote/core";
+
+
+// language=CSS
+export const style = css`
+
+    :host {       
+        --internal-or-asset-tree-header-color: var(--or-asset-tree-header-color, var(--or-app-color4, ${unsafeCSS(DefaultColor4)}));     
+        --internal-or-asset-tree-header-text-color: var(--or-asset-tree-header-text-color, var(--or-app-color7, ${unsafeCSS(DefaultColor1)}));
+        --internal-or-asset-tree-header-menu-background-color: var(--or-asset-tree-header-menu-background-color, var(--internal-or-asset-tree-header-text-color));
+        --internal-or-asset-tree-header-menu-text-color: var(--or-asset-tree-header-menu-text-color, inherit);
+        --internal-or-asset-tree-header-height: var(--or-asset-tree-header-height, 48px);
+        --internal-or-asset-tree-background-color: var(--or-asset-tree-background-color, var(--or-app-color1, ${unsafeCSS(DefaultColor1)}));
+        --internal-or-asset-tree-text-color: var(--or-asset-tree-text-color, inherit);
+        --internal-or-asset-tree-item-height: var(--or-asset-tree-item-height, 24px);
+        --internal-or-asset-tree-item-padding: var(--or-asset-tree-item-padding, 10px);
+        --internal-or-asset-tree-selected-background-color: var(--or-asset-tree-selected-background-color, var(--or-app-color2, ${unsafeCSS(DefaultColor2)}));
+        --internal-or-asset-tree-selected-color: var(--or-asset-tree-selected-color, var(--or-app-color4, ${unsafeCSS(DefaultColor4)}));
+        --internal-or-asset-tree-button-color: var(--or-asset-tree-button-color, var(--or-app-color4, ${unsafeCSS(DefaultColor4)}));
+        --internal-or-asset-tree-line-color: var(--or-asset-tree-line-color, var(--or-app-color5, ${unsafeCSS(DefaultColor5)}));
+            
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        width: 100%;
+        background-color: var(--internal-or-asset-tree-background-color);
+    }
+
+    @media only screen and (max-width: 640px){
+        .hideMobile {
+            display: none !important;
+        }
+    }
+    @media only screen and (min-width: 641px){
+        .showMobile {
+            display: none !important;
+        }
+    }
+    
+    #container {
+        display: flex;
+        width: 100%;
+        height: 100%;
+    }
+        
+    #menu-header {
+        background-color: var(--internal-or-asset-tree-header-color);
+        display: flex;
+        align-items: center;
+        width: 100%;
+        height: var(--internal-or-asset-tree-header-height);
+        border-bottom: 1px solid var(--or-app-color5, ${unsafeCSS(DefaultColor5)});
+        z-index: 3;
+        line-height: var(--internal-or-asset-tree-header-height);
+        color: var(--internal-or-asset-tree-header-text-color);
+        --or-icon-fill: var(--internal-or-asset-tree-header-text-color);
+    }
+
+    #title-container {
+        flex: 1;
+        flex-direction: row;
+        text-transform: capitalize;
+        padding-left: 14px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    
+    #title {
+        font-weight: 500;
+        font-size: 16px;
+    }
+
+    .expandableHeader {
+        display: flex;
+        align-items: center;
+        padding: 12px;
+        background: none;
+        border-top: 1px solid var(--or-app-color5, ${unsafeCSS(DefaultColor5)});
+        border-right: none;
+        border-bottom: none;
+        border-left: none;
+        border-radius: 0;
+        width: 100%;
+        cursor: pointer;
+        font-weight: 700;
+        line-height: 1em;
+        color: var(--internal-or-asset-viewer-title-text-color);
+        flex: 0 0 auto;
+    }
+    .expandableHeader > or-icon {
+        --or-icon-height: 20px;
+        --or-icon-width: 20px;
+    }
+    .panel-title {
+        text-transform: uppercase;
+        font-weight: bolder;
+        line-height: 1em;
+        color: var(--internal-or-asset-viewer-title-text-color);
+        /*margin-bottom: 20px;*/
+        flex: 0 0 auto;
+    }
+`

package/src/util/or-asset-widget.ts

@@ -0,0 +1,110 @@
+import {OrWidget} from "./or-widget";
+import {Asset, AssetQuery, Attribute, AttributeRef} from "@openremote/model";
+import { state } from "lit/decorators.js";
+import manager from "@openremote/core";
+import { showSnackbar } from "@openremote/or-mwc-components/or-mwc-snackbar";
+import {WidgetConfig} from "./widget-config";
+import {WidgetSettings} from "./widget-settings";
+import { CSSResult } from "lit";
+
+/*
+* OrAssetWidget class
+*
+* It is an extension on base class OrWidget,
+* where some asset-specific methods such as fetching, are already defined for ease of use.
+* For example it is used in the chart-, gauge- and kpi widget
+* */
+export abstract class OrAssetWidget extends OrWidget {
+
+    @state() // cached assets
+    protected loadedAssets: Asset[] = [];
+
+    @state() // cached attribute list; [asset index of the loadedAssets array, attribute]
+    protected assetAttributes: [number, Attribute<any>][] = [];
+
+    static get styles(): CSSResult[] {
+        return [...super.styles];
+    }
+
+    // Fetching the assets according to the AttributeRef[] input in DashboardWidget if required.
+    protected async fetchAssets(attributeRefs: AttributeRef[] = []) {
+        return fetchAssetsByAttributeRef(attributeRefs);
+    }
+
+    protected async queryAssets(assetQuery: AssetQuery) {
+        return fetchAssets(assetQuery);
+    }
+
+    protected isAssetLoaded(assetId: string) {
+        return isAssetIdLoaded(this.loadedAssets, assetId);
+    }
+
+    protected isAttributeRefLoaded(attributeRef: AttributeRef) {
+        return isAssetIdLoaded(this.loadedAssets, attributeRef.id!);
+    }
+
+}
+
+/*
+* AssetWidgetSettings class
+*
+* It is an extension on base class WidgetSettings
+* where some asset-specific methods such as fetching, are already defined for ease of use.
+* For example it is used in the chart-, gauge- and kpi widget settings
+* */
+export abstract class AssetWidgetSettings extends WidgetSettings {
+
+    @state() // cached assets
+    protected loadedAssets: Asset[] = [];
+
+    protected async fetchAssets(attributeRefs: AttributeRef[] = []) {
+        return fetchAssetsByAttributeRef(attributeRefs);
+    }
+
+    protected async queryAssets(assetQuery: AssetQuery) {
+        return fetchAssets(assetQuery);
+    }
+
+    protected isAssetLoaded(assetId: string) {
+        return isAssetIdLoaded(this.loadedAssets, assetId)
+    }
+
+    protected isAttributeRefLoaded(attributeRef: AttributeRef) {
+        return isAssetIdLoaded(this.loadedAssets, attributeRef.id!);
+    }
+
+}
+
+
+
+/* ---------------------------------------------------------- */
+
+// GENERIC FUNCTIONS
+
+// Simple async function for fetching assets by attributeRefs
+async function fetchAssetsByAttributeRef(attributeRefs: AttributeRef[] = []) {
+    const assetIds = attributeRefs.map(ar => ar.id!);
+    const attributeNames = attributeRefs.map(ar => ar.name!);
+    return fetchAssets({
+        ids: attributeRefs?.map((x: AttributeRef) => x.id) as string[],
+        select: {
+            attributes: attributeRefs?.map((x: AttributeRef) => x.name) as string[]
+        }
+    });
+}
+
+async function fetchAssets(assetQuery: AssetQuery) {
+    let assets: Asset[] = [];
+    assetQuery.realm = { name: manager.displayRealm };
+    await manager.rest.api.AssetResource.queryAssets(assetQuery).then(response => {
+        assets = response.data;
+    }).catch((reason) => {
+        console.error(reason);
+        showSnackbar(undefined, "errorOccurred");
+    });
+    return assets;
+}
+
+function isAssetIdLoaded(loadedAssets: Asset[] | undefined, assetId: string) {
+    return loadedAssets?.find(asset => asset.id === assetId) !== undefined;
+}

package/src/util/or-widget.ts

@@ -0,0 +1,60 @@
+import {CSSResult, LitElement, TemplateResult } from "lit";
+import { property } from "lit/decorators.js";
+import {WidgetConfig} from "./widget-config";
+import {WidgetSettings} from "./widget-settings";
+
+export interface WidgetManifest {
+    displayName: string,
+    displayIcon: string,
+    minColumnWidth?: number,
+    minColumnHeight?: number,
+    minPixelWidth?: number,
+    minPixelHeight?: number
+    getContentHtml(config: WidgetConfig): OrWidget,
+    getSettingsHtml(config: WidgetConfig): WidgetSettings,
+    getDefaultConfig(): WidgetConfig
+}
+
+// Main OrWidget class where all widgets extend their functionality on.
+// It contains several methods used for rendering by the parent component; OrDashboardWidget
+export abstract class OrWidget extends LitElement {
+
+    protected static manifest: WidgetManifest;
+
+    @property({type: Object})
+    protected readonly widgetConfig!: WidgetConfig;
+
+    constructor(config: WidgetConfig) {
+        super();
+        this.widgetConfig = config;
+    }
+
+    static get styles(): CSSResult[] {
+        return [];
+    }
+
+    /* --------------------------- */
+
+    static getManifest(): WidgetManifest {
+        if (!this.manifest) {
+            throw new Error(`No manifest present on ${this.name}`);
+        }
+        return this.manifest;
+    }
+
+    // Method used for refreshing the content in a widget.
+    // This can be customized to lower the performance- and/or visual impact of a refresh.
+    public abstract refreshContent(force: boolean): void;
+
+    // WebComponent lifecycle method to render HTML content
+    protected abstract render(): TemplateResult;
+
+
+    /* ------------------------------------- */
+
+    public getDisplayName?: () => string | undefined;
+
+    public getEditMode?: () => boolean;
+
+    public getWidgetLocation?: () => { x?: number, y?: number, h?: number, w?: number }
+}