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

package/src/panels/assettypes-panel.ts

@@ -0,0 +1,311 @@
+import {css, html, LitElement, PropertyValues, TemplateResult} from "lit";
+import {customElement, property, state} from "lit/decorators.js";
+import {Asset, AssetDescriptor, AssetModelUtil, AssetQuery, AssetTypeInfo} from "@openremote/model";
+import {getContentWithMenuTemplate} from "@openremote/or-mwc-components/or-mwc-menu";
+import {i18next} from "@openremote/or-translate";
+import {ListItem} from "@openremote/or-mwc-components/or-mwc-list";
+import {InputType, OrInputChangedEvent} from "@openremote/or-mwc-components/or-mwc-input";
+import manager, {Util} from "@openremote/core";
+import {when} from "lit/directives/when.js";
+import {createRef, Ref, ref} from 'lit/directives/ref.js';
+import {AssetTreeConfig, OrAssetTree} from "@openremote/or-asset-tree";
+import {OrMwcDialog, showDialog} from "@openremote/or-mwc-components/or-mwc-dialog";
+
+export class AssetTypeSelectEvent extends CustomEvent<string> {
+
+    public static readonly NAME = "assettype-select";
+
+    constructor(assetTypeName: string) {
+        super(AssetTypeSelectEvent.NAME, {
+            bubbles: true,
+            composed: true,
+            detail: assetTypeName
+        });
+    }
+}
+
+export class AssetIdsSelectEvent extends CustomEvent<string | string[]> {
+
+    public static readonly NAME = "assetids-select"
+
+    constructor(assetIds: string | string[]) {
+        super(AssetIdsSelectEvent.NAME, {
+            bubbles: true,
+            composed: true,
+            detail: assetIds
+        });
+    }
+}
+
+export class AttributeNamesSelectEvent extends CustomEvent<string | string[]> {
+
+    public static readonly NAME = "attributenames-select";
+
+    constructor(attributeNames: string | string[]) {
+        super(AttributeNamesSelectEvent.NAME, {
+            bubbles: true,
+            composed: true,
+            detail: attributeNames
+        });
+    }
+}
+
+export interface AssetTypesFilterConfig {
+    assets?: {
+        enabled?: boolean,
+        multi?: boolean
+    },
+    attributes?: {
+        enabled?: boolean,
+        multi?: boolean,
+        valueTypes?: string[]
+    }
+}
+
+const styling = css`
+  .switchMwcInputContainer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+`
+
+@customElement("assettypes-panel")
+export class AssettypesPanel extends LitElement {
+
+    @property() // selected asset type
+    protected assetType?: string;
+
+    @property()
+    protected config: AssetTypesFilterConfig = {
+        attributes: {
+            enabled: true
+        }
+    }
+
+    @property() // IDs of assets; either undefined, a single entry, or multi select
+    protected assetIds: undefined | string | string[];
+
+    @property() // names of selected attributes; either undefined, a single entry, or multi select
+    protected attributeNames: undefined | string | string[];
+
+    /* ----------- */
+
+    @state()
+    protected _attributeSelectList: string[][] = [];
+
+    @state()
+    protected _loadedAssetTypes: AssetDescriptor[] = AssetModelUtil.getAssetDescriptors().filter((t) => t.descriptorType === "asset");
+
+
+    static get styles() {
+        return [styling];
+    }
+
+    protected willUpdate(changedProps: PropertyValues) {
+        super.willUpdate(changedProps);
+        if (changedProps.has("assetType") && this.assetType) {
+            this._attributeSelectList = this.getAttributesByType(this.assetType)!;
+            this.dispatchEvent(new AssetTypeSelectEvent(this.assetType));
+        }
+        if (changedProps.has("assetIds") && this.assetIds) {
+            this.dispatchEvent(new AssetIdsSelectEvent(this.assetIds));
+        }
+        if (changedProps.has("attributeNames") && this.attributeNames) {
+            this.dispatchEvent(new AttributeNamesSelectEvent(this.attributeNames));
+        }
+    }
+
+    protected render(): TemplateResult {
+        return html`
+            <div style="display: flex; flex-direction: column; gap: 8px;">
+
+                <!-- Select asset type -->
+                <div>
+                    ${this._loadedAssetTypes.length > 0 ? getContentWithMenuTemplate(
+                            this.getAssetTypeTemplate(),
+                            this.mapDescriptors(this._loadedAssetTypes, {
+                                text: i18next.t("filter.assetTypeMenuNone"),
+                                value: "",
+                                icon: "selection-ellipse"
+                            }) as ListItem[],
+                            undefined,
+                            (v: string[] | string) => {
+                                this.assetType = v as string;
+                            },
+                            undefined,
+                            false,
+                            true,
+                            true,
+                            true) : html``
+                    }
+                </div>
+
+                <!-- Select one or more assets -->
+                ${when(this.config.assets?.enabled, () => {
+                    const assetIds = (typeof this.assetIds === 'string') ? [this.assetIds] : this.assetIds;
+                    return html`
+                        <div>
+                            <or-mwc-input .type="${InputType.BUTTON}" .label="${(this.assetIds?.length || 0) + ' ' + i18next.t('assets')}" .disabled="${!this.assetType}" fullWidth outlined comfortable style="width: 100%;"
+                                          @or-mwc-input-changed="${(ev: OrInputChangedEvent) => this._openAssetSelector(this.assetType!, assetIds, this.config.assets?.multi)}"
+                            ></or-mwc-input>
+                        </div>
+                    `;
+                })}
+
+                <!-- Select one or more attributes -->
+                ${when(this.config.attributes?.enabled, () => {
+                    const options: [string, string][] = this._attributeSelectList.map(al => [al[0], al[1]]);
+                    const searchProvider: (search?: string) => Promise<[any, string][]> = async (search) => {
+                        return search ? options.filter(o => o[1].toLowerCase().includes(search.toLowerCase())) : options;
+                    };
+                    return html`
+                        <div>
+                            <or-mwc-input .type="${InputType.SELECT}" label="${i18next.t("filter.attributeLabel")}" .disabled="${!this.assetType}" style="width: 100%;"
+                                          .options="${options}" .searchProvider="${searchProvider}" .multiple="${this.config.attributes?.multi}" .value="${this.attributeNames as string}"
+                                          @or-mwc-input-changed="${(ev: OrInputChangedEvent) => {
+                                              this.attributeNames = ev.detail.value;
+                                          }}"
+                            ></or-mwc-input>
+                        </div>
+                    `
+
+                })}
+            </div>
+        `;
+    }
+
+
+    /* ----------- */
+
+    protected getAssetTypeTemplate(): TemplateResult {
+        if (this.assetType) {
+            const descriptor: AssetDescriptor | undefined = this._loadedAssetTypes.find((at: AssetDescriptor) => at.name === this.assetType);
+            if (descriptor) {
+                return this.getSelectedHeader(descriptor);
+            } else {
+                return this.getSelectHeader();
+            }
+        } else {
+            return this.getSelectHeader();
+        }
+    }
+
+    protected getSelectHeader(): TemplateResult {
+        return html`
+            <or-mwc-input style="width:100%;" type="${InputType.TEXT}" readonly .label="${i18next.t("filter.assetTypeLabel")}"
+                          iconTrailing="menu-down" iconColor="rgba(0, 0, 0, 0.87)" icon="selection-ellipse"
+                          value="${i18next.t("filter.assetTypeNone")}">
+            </or-mwc-input>
+        `;
+    }
+
+    protected getSelectedHeader(descriptor: AssetDescriptor): TemplateResult {
+        return html`
+            <or-mwc-input style="width:100%;" type="${InputType.TEXT}" readonly .label="${i18next.t("filter.assetTypeLabel")}"
+                          .iconColor="${descriptor.colour}" iconTrailing="menu-down" icon="${descriptor.icon}"
+                          value="${Util.getAssetTypeLabel(descriptor)}">
+            </or-mwc-input>
+        `;
+    }
+
+    protected mapDescriptors(descriptors: AssetDescriptor[], withNoneValue?: ListItem): ListItem[] {
+        const items: ListItem[] = descriptors.map((descriptor) => {
+            return {
+                styleMap: {
+                    "--or-icon-fill": descriptor.colour ? "#" + descriptor.colour : "unset"
+                },
+                icon: descriptor.icon,
+                text: Util.getAssetTypeLabel(descriptor),
+                value: descriptor.name!,
+                data: descriptor
+            }
+        }).sort(Util.sortByString((listItem) => listItem.text));
+
+        if (withNoneValue) {
+            items.splice(0, 0, withNoneValue);
+        }
+        return items;
+    }
+
+    protected getAttributesByType(type: string) {
+        const descriptor: AssetDescriptor = (AssetModelUtil.getAssetDescriptor(type) as AssetDescriptor);
+        if (descriptor) {
+            const typeInfo: AssetTypeInfo = (AssetModelUtil.getAssetTypeInfo(descriptor) as AssetTypeInfo);
+            if (typeInfo?.attributeDescriptors) {
+                const valueTypes = this.config.attributes?.valueTypes;
+                const filtered = valueTypes ? typeInfo.attributeDescriptors.filter(ad => valueTypes.indexOf(ad.type!) > -1) : typeInfo.attributeDescriptors;
+                return filtered
+                    .map((ad) => {
+                        const label = Util.getAttributeLabel(ad, undefined, type, false);
+                        return [ad.name!, label];
+                    })
+                    .sort(Util.sortByString((attr) => attr[1]));
+            }
+        }
+    }
+
+    protected _openAssetSelector(assetType: string, assetIds?: string[], multi = false) {
+        const assetTreeRef: Ref<OrAssetTree> = createRef();
+        const config = {
+            select: {
+                types: [assetType],
+                multiSelect: multi
+            }
+        } as AssetTreeConfig
+        const dialog = showDialog(new OrMwcDialog()
+            .setHeading(i18next.t("linkedAssets"))
+            .setContent(html`
+                <div style="width: 400px;">
+                    <or-asset-tree ${ref(assetTreeRef)} .dataProvider="${this.assetTreeDataProvider}" expandAllNodes
+                                   id="chart-asset-tree" readonly .config="${config}" .selectedIds="${assetIds}"
+                                   .showSortBtn="${false}" .showFilter="${false}" .checkboxes="${multi}"
+                    ></or-asset-tree>
+                </div>
+            `)
+            .setActions([
+                {
+                    default: true,
+                    actionName: "cancel",
+                    content: "cancel",
+                },
+                {
+                    actionName: "ok",
+                    content: "ok",
+                    action: () => {
+                        const tree = assetTreeRef.value;
+                        if(tree?.selectedIds) {
+                            if(multi) {
+                                this.assetIds = tree.selectedIds;
+                            } else {
+                                this.assetIds = tree.selectedIds[0];
+                            }
+                        }
+                    }
+                }
+            ])
+            .setDismissAction({
+                actionName: "cancel",
+            }));
+    }
+
+    protected assetTreeDataProvider = async (): Promise<Asset[]> => {
+        const assetQuery: AssetQuery = {
+            realm: {
+                name: manager.displayRealm
+            },
+            select: { // Just need the basic asset info
+                attributes: []
+            }
+        };
+        // At first, just fetch all accessible assets without attribute info...
+        const assets = (await manager.rest.api.AssetResource.queryAssets(assetQuery)).data;
+
+        // After fetching, narrow down the list to assets with the same assetType.
+        // Since it is a tree, we also include the parents of those assets, based on the 'asset.path' variable.
+        const pathsOfAssetType = assets.filter(a => a.type === this.assetType).map(a => a.path!);
+        const filteredAssetIds = [...new Set([].concat(...pathsOfAssetType as any[]))] as string[];
+        return assets.filter(a => filteredAssetIds.includes(a.id!));
+    }
+
+}

package/src/panels/attributes-panel.ts

@@ -0,0 +1,304 @@
+import {css, CSSResult, html, LitElement, PropertyValues, TemplateResult, unsafeCSS} from "lit";
+import {customElement, property, state} from "lit/decorators.js";
+import {Asset, AssetModelUtil, Attribute, AttributeRef} from "@openremote/model";
+import {style} from "../style";
+import {when} from "lit/directives/when.js";
+import {map} from "lit/directives/map.js";
+import {guard} from "lit/directives/guard.js";
+import {i18next} from "@openremote/or-translate";
+import "@openremote/or-translate";
+import {InputType} from "@openremote/or-mwc-components/or-mwc-input";
+import manager, {DefaultColor5, Util} from "@openremote/core";
+import {getAssetDescriptorIconTemplate} from "@openremote/or-icon";
+import {OrAttributePicker, OrAttributePickerPickedEvent} from "@openremote/or-attribute-picker";
+import {showDialog} from "@openremote/or-mwc-components/or-mwc-dialog";
+import {showSnackbar} from "@openremote/or-mwc-components/or-mwc-snackbar";
+
+export interface AttributeAction {
+    icon: string,
+    tooltip: string,
+    disabled: boolean
+}
+
+export class AttributeActionEvent extends CustomEvent<{ asset: Asset, attributeRef: AttributeRef, action: AttributeAction }> {
+
+    public static readonly NAME = "attribute-action"
+
+    constructor(asset: Asset, attributeRef: AttributeRef, action: AttributeAction) {
+        super(AttributeActionEvent.NAME, {
+            bubbles: true,
+            composed: true,
+            detail: {
+                asset: asset,
+                attributeRef: attributeRef,
+                action: action
+            }
+        });
+    }
+}
+
+export class AttributesSelectEvent extends CustomEvent<{ assets: Asset[], attributeRefs: AttributeRef[] }> {
+
+    public static readonly NAME = "attribute-select";
+
+    constructor(assets: Asset[], attributeRefs: AttributeRef[]) {
+        super(AttributesSelectEvent.NAME, {
+            bubbles: true,
+            composed: true,
+            detail: {
+                assets: assets,
+                attributeRefs: attributeRefs
+            }
+        });
+    }
+}
+
+const styling = css`
+  #attribute-list {
+    overflow: auto;
+    flex: 1 1 0;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .attribute-list-item {
+    position: relative;
+    cursor: pointer;
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    gap: 10px;
+    padding: 0;
+    min-height: 50px;
+  }
+  
+  .attribute-list-item-icon {
+    display: flex;
+    align-items: center;
+    --or-icon-width: 20px;
+  }
+
+  .attribute-list-item-label {
+    display: flex;
+    justify-content: center;
+    flex: 1 1 0;
+    line-height: 16px;
+    flex-direction: column;
+  }
+  
+  .attribute-list-item-actions {
+    flex: 1;
+    justify-content: end;
+    align-items: center;
+    display: flex;
+    gap: 8px;
+  }
+
+  .attribute-list-item-bullet {
+    width: 14px;
+    height: 14px;
+    border-radius: 7px;
+    margin-right: 10px;
+  }
+
+  .attribute-list-item .button.delete {
+    display: none;
+  }
+
+  .attribute-list-item:hover .button.delete {
+    display: block;
+  }
+
+  .button-action {
+    background: none;
+    visibility: hidden;
+    color: var(--or-app-color5, ${unsafeCSS(DefaultColor5)});
+    --or-icon-fill: var(--or-app-color5, ${unsafeCSS(DefaultColor5)});
+    display: inline-block;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+  }
+
+  .attribute-list-item:hover .attribute-list-item-actions {
+    background: white;
+    z-index: 1;
+  }
+  
+  .attribute-list-item:hover .button-action {
+    visibility: visible;
+  }
+
+  .button-action:hover {
+    --or-icon-fill: var(--or-app-color4);
+  }
+`
+
+@customElement('attributes-panel')
+export class AttributesPanel extends LitElement {
+
+    @property()
+    protected attributeRefs: AttributeRef[] = [];
+
+    @property()
+    protected multi: boolean = false;
+
+    @property()
+    protected onlyDataAttrs: boolean = false;
+
+    @property()
+    protected attributeFilter?: (attribute: Attribute<any>) => boolean;
+
+    @property()
+    protected attributeLabelCallback?: (asset: Asset, attribute: Attribute<any>, attributeLabel: string) => TemplateResult;
+
+    @property()
+    protected attributeActionCallback?: (attribute: AttributeRef) => AttributeAction[]
+
+    @state()
+    protected loadedAssets: Asset[] = [];
+
+    static get styles(): CSSResult[] {
+        return [styling, style];
+    }
+
+    // Lit lifecycle method to compute values during update
+    protected willUpdate(changedProps: PropertyValues) {
+        super.willUpdate(changedProps);
+
+        if (!this.attributeRefs) {
+            this.attributeRefs = [];
+        }
+        if (changedProps.has("attributeRefs") && this.attributeRefs) {
+            this.loadAssets().then((assets) => {
+
+                // Only dispatch event when it CHANGED, so not from 'undefined' to [];
+                if(changedProps.get("attributeRefs")) {
+                    this.dispatchEvent(new AttributesSelectEvent(assets, this.attributeRefs))
+                }
+
+            })
+        }
+    }
+
+    protected getLoadedAsset(attrRef: AttributeRef): Asset | undefined {
+        return this.loadedAssets?.find((asset) => asset.id === attrRef.id)
+    }
+
+    protected removeWidgetAttribute(attributeRef: AttributeRef) {
+        if (this.attributeRefs != null) {
+            this.attributeRefs = this.attributeRefs.filter(ar => ar !== attributeRef);
+        }
+    }
+
+    protected async loadAssets(): Promise<Asset[]> {
+        if(this.attributeRefs.filter(ar => !this.getLoadedAsset(ar)).length > 0) {
+            const assets = await this.fetchAssets(this.attributeRefs);
+            this.loadedAssets = assets;
+            return assets;
+        } else {
+            return this.loadedAssets;
+        }
+    }
+
+    // Fetching the assets according to the AttributeRef[] input in DashboardWidget if required.
+    // TODO: Move this to more generic spot?
+    async fetchAssets(attributeRefs: AttributeRef[] = []): Promise<Asset[]> {
+        let assets: Asset[] = [];
+        await manager.rest.api.AssetResource.queryAssets({
+            ids: attributeRefs.map((x: AttributeRef) => x.id) as string[],
+            realm: { name: manager.displayRealm },
+            select: {
+                attributes: attributeRefs.map((x: AttributeRef) => x.name) as string[]
+            }
+        }).then(response => {
+            assets = response.data;
+        }).catch((reason) => {
+            console.error(reason);
+            showSnackbar(undefined, "errorOccurred");
+        });
+        return assets;
+    }
+
+    protected onAttributeActionClick(asset: Asset, attributeRef: AttributeRef, action: AttributeAction) {
+        this.dispatchEvent(new AttributeActionEvent(asset, attributeRef, action));
+    }
+
+    protected openAttributeSelector(attributeRefs: AttributeRef[], multi: boolean, onlyDataAttrs = true, attributeFilter?: (attribute: Attribute<any>) => boolean) {
+        let dialog: OrAttributePicker;
+        if (attributeRefs != null) {
+            dialog = showDialog(new OrAttributePicker().setMultiSelect(multi).setSelectedAttributes(attributeRefs).setShowOnlyDatapointAttrs(onlyDataAttrs).setAttributeFilter(attributeFilter));
+        } else {
+            dialog = showDialog(new OrAttributePicker().setMultiSelect(multi).setShowOnlyDatapointAttrs(onlyDataAttrs))
+        }
+        dialog.addEventListener(OrAttributePickerPickedEvent.NAME, (event: CustomEvent) => {
+            this.attributeRefs = event.detail;
+        })
+    }
+
+    protected render(): TemplateResult {
+        return html`
+            <div>
+                ${when(this.attributeRefs.length > 0, () => html`
+
+                    <div id="attribute-list">
+                        ${guard([this.attributeRefs, this.loadedAssets, this.attributeActionCallback, this.attributeLabelCallback], () => html`
+                            ${map(this.attributeRefs, (attributeRef: AttributeRef) => {
+                                const asset = this.getLoadedAsset(attributeRef);
+                                if (asset) {
+                                    const attribute = asset.attributes![attributeRef.name!];
+                                    const descriptors = AssetModelUtil.getAttributeAndValueDescriptors(asset.type, attributeRef.name, attribute);
+                                    const label = Util.getAttributeLabel(attribute, descriptors[0], asset.type, true);
+                                    return html`
+                                        <div class="attribute-list-item">
+                                            <div class="attribute-list-item-icon">
+                                                <span>${getAssetDescriptorIconTemplate(AssetModelUtil.getAssetDescriptor(asset.type))}</span>
+                                            </div>
+                                            <div class="attribute-list-item-label">
+                                                ${when(!!this.attributeLabelCallback,
+                                                        () => this.attributeLabelCallback!(asset, attribute, label), 
+                                                        () => html`
+                                                            <span>${asset.name}</span>
+                                                            <span style="font-size:14px; color:grey;">${label}</span>
+                                                        `
+                                                )}
+                                            </div>
+                                            <div class="attribute-list-item-actions">
+                                                
+                                                <!-- Custom actions defined by callback -->
+                                                ${when(!!this.attributeActionCallback, () => {
+                                                    return this.attributeActionCallback!(attributeRef).map((action) => html`
+                                                        <button class="button-action" .disabled="${action.disabled}" title="${action.tooltip}" @click="${() => this.onAttributeActionClick(asset, attributeRef, action)}">
+                                                            <or-icon icon="${action.icon}"></or-icon>
+                                                        </button>
+                                                    `);
+                                                })}
+                                                <!-- Remove attribute button -->
+                                                <button class="button-action" title="${i18next.t('delete')}" @click="${() => this.removeWidgetAttribute(attributeRef)}">
+                                                    <or-icon icon="close-circle"></or-icon>
+                                                </button>
+                                            </div>
+                                        </div>
+                                    `;
+                                } else {
+                                    return undefined;
+                                }
+                            })}
+                        `)}
+                    </div>
+
+                `, () => html`
+                    <span style="padding: 14px 0; display: block;"><or-translate value="noAttributesConnected"></or-translate></span>
+                `)}
+
+                <!-- Button that opens attribute selection -->
+                <or-mwc-input .type="${InputType.BUTTON}" label="attribute" icon="${(this.multi || this.attributeRefs.length === 0) ? "plus" : "swap-horizontal"}"
+                              style="margin-top: 8px;"
+                              @or-mwc-input-changed="${() => this.openAttributeSelector(this.attributeRefs, this.multi, this.onlyDataAttrs, this.attributeFilter)}">
+                </or-mwc-input>
+            </div>
+        `;
+    }
+
+}