@openremote/or-map 1.8.0-snapshot.20250725074716 → 1.8.0-snapshot.20250725120001

package/lib/or-map-asset-card.js

@@ -1,18 +1,167 @@
-var __decorate=this&&this.__decorate||function(t,e,s,r){var a,o=arguments.length,i=o<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,s):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(t,e,s,r);else for(var n=t.length-1;n>=0;n--)(a=t[n])&&(i=(o<3?a(i):o>3?a(e,s,i):a(e,s))||i);return o>3&&i&&Object.defineProperty(e,s,i),i};import{html as t,LitElement as e}from"lit";import{customElement as s,property as r}from"lit/decorators.js";import{classMap as a}from"lit-html/directives/class-map.js";import{AssetModelUtil as o}from"@openremote/model";import i,{subscribe as n,Util as d}from"@openremote/core";import"@openremote/or-icon";import{mapAssetCardStyle as p}from"./style";import{InputType as c}from"@openremote/or-mwc-components/or-mwc-input";import{getMarkerIconAndColorFromAssetType as l}from"./util";import{getMarkerConfigAttributeName as u}from"./markers/or-map-marker-asset";export class OrMapAssetCardLoadAssetEvent extends CustomEvent{constructor(t){super(OrMapAssetCardLoadAssetEvent.NAME,{bubbles:!0,composed:!0,detail:t})}}OrMapAssetCardLoadAssetEvent.NAME="or-map-asset-card-load-asset";export const DefaultConfig={default:{exclude:["notes"]},assetTypes:{}};let OrMapAssetCard=class extends n(i)(e){constructor(){super(...arguments),this.useAssetColor=!0}static get styles(){return p}shouldUpdate(t){return(!t.has("assetId")||(this.title="",this.assetIds=this.assetId&&this.assetId.length>0?[this.assetId]:void 0,1!==t.size))&&super.shouldUpdate(t)}_onEvent(t){if("asset"===t.eventType)switch(t.cause){case"READ":case"CREATE":case"UPDATE":this.asset=t.asset;break;case"DELETE":this.asset=void 0}"attribute"===t.eventType&&this.asset&&(this.asset=d.updateAsset(this.asset,t),this.requestUpdate())}getCardConfig(){let t=this.config||DefaultConfig;return this.asset&&t.assetTypes&&t.assetTypes.hasOwnProperty(this.asset.type)?t.assetTypes[this.asset.type]:t.default}render(){if(!this.asset)return t``;let e=this.getIcon(),s=this.getColor(),r=this.getCardConfig(),i=Object.values(this.asset.attributes).filter(t=>"location"!==t.name),n=r&&r.include?r.include:void 0,p=r&&r.exclude?r.exclude:[],l=i.filter(t=>(!n||n.indexOf(t.name)>=0)&&(!p||0>p.indexOf(t.name))&&(!t.meta||!t.meta.hasOwnProperty("showOnDashboard")||!!d.getMetaValue("showOnDashboard",t))).sort(d.sortByString(t=>t.name)),h=u(this.markerconfig,this.asset.type);return t`
-            <div id="card-container" style="${s?"--internal-or-map-asset-card-header-color: #"+s+";":""}">
-                <div id="header">
-                    ${e?t`<or-icon icon="${e}"></or-icon>`:""}
-                    <span id="title">${this.asset.name}</span>
-                </div>
-                <div id="attribute-list">
-                    <ul>
-                        ${l.map(e=>{if(!this.asset||!this.asset.type)return;let s=o.getAttributeAndValueDescriptors(this.asset.type,e.name,e);if(s&&s.length){let r=d.getAttributeLabel(e,s[0],this.asset.type,!0),o=d.getAttributeValueAsString(e,s[0],this.asset.type,!1,"-"),i={highlighted:h===e.name};return t`<li class="${a(i)}"><span class="attribute-name">${r}</span><span class="attribute-value">${o}</span></li>`}})}
-                    </ul>
-                </div>
-                ${r&&r.hideViewAsset?t``:t`
-                    <div id="footer">
-                        <or-mwc-input .type="${c.BUTTON}" label="viewAsset" @or-mwc-input-changed="${t=>{t.preventDefault(),this._loadAsset(this.asset.id)}}"></or-mwc-input>
-                    </div>
-                `}
-            </div>
-        `}_loadAsset(t){this.dispatchEvent(new OrMapAssetCardLoadAssetEvent(t))}getIcon(){var t;if(this.asset)return(null==(t=l(o.getAssetDescriptor(this.asset.type)))?void 0:t.icon)||void 0}getColor(){var t;if(this.asset){let e=null==(t=l(o.getAssetDescriptor(this.asset.type)))?void 0:t.color;if(e)return"string"==typeof e?e:e[0].colour}}};__decorate([r({type:String,reflect:!0,attribute:!0})],OrMapAssetCard.prototype,"assetId",void 0),__decorate([r({type:Object,attribute:!0})],OrMapAssetCard.prototype,"asset",void 0),__decorate([r({type:Object})],OrMapAssetCard.prototype,"config",void 0),__decorate([r({type:Object})],OrMapAssetCard.prototype,"markerconfig",void 0),__decorate([r({type:Boolean,attribute:!0})],OrMapAssetCard.prototype,"useAssetColor",void 0),OrMapAssetCard=__decorate([s("or-map-asset-card")],OrMapAssetCard);export{OrMapAssetCard};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { classMap } from 'lit-html/directives/class-map.js';
+import { AssetModelUtil } from "@openremote/model";
+import manager, { subscribe, Util } from "@openremote/core";
+import "@openremote/or-icon";
+import { mapAssetCardStyle } from "./style";
+import { InputType } from "@openremote/or-mwc-components/or-mwc-input";
+import { getMarkerIconAndColorFromAssetType } from "./util";
+import { getMarkerConfigAttributeName } from "./markers/or-map-marker-asset";
+export class OrMapAssetCardLoadAssetEvent extends CustomEvent {
+    constructor(assetId) {
+        super(OrMapAssetCardLoadAssetEvent.NAME, {
+            bubbles: true,
+            composed: true,
+            detail: assetId
+        });
+    }
+}
+OrMapAssetCardLoadAssetEvent.NAME = "or-map-asset-card-load-asset";
+export const DefaultConfig = {
+    default: {
+        exclude: ["notes"]
+    },
+    assetTypes: {}
+};
+let OrMapAssetCard = class OrMapAssetCard extends subscribe(manager)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.useAssetColor = true;
+    }
+    static get styles() {
+        return mapAssetCardStyle;
+    }
+    shouldUpdate(_changedProperties) {
+        if (_changedProperties.has("assetId")) {
+            this.title = "";
+            this.assetIds = this.assetId && this.assetId.length > 0 ? [this.assetId] : undefined;
+            if (_changedProperties.size === 1) {
+                return false;
+            }
+        }
+        return super.shouldUpdate(_changedProperties);
+    }
+    _onEvent(event) {
+        if (event.eventType === "asset") {
+            const assetEvent = event;
+            switch (assetEvent.cause) {
+                case "READ" /* AssetEventCause.READ */:
+                case "CREATE" /* AssetEventCause.CREATE */:
+                case "UPDATE" /* AssetEventCause.UPDATE */:
+                    this.asset = assetEvent.asset;
+                    break;
+                case "DELETE" /* AssetEventCause.DELETE */:
+                    this.asset = undefined;
+                    break;
+            }
+        }
+        if (event.eventType === "attribute") {
+            if (this.asset) {
+                this.asset = Util.updateAsset(this.asset, event);
+                this.requestUpdate();
+            }
+        }
+    }
+    getCardConfig() {
+        let cardConfig = this.config || DefaultConfig;
+        if (!this.asset) {
+            return cardConfig.default;
+        }
+        return cardConfig.assetTypes && cardConfig.assetTypes.hasOwnProperty(this.asset.type) ? cardConfig.assetTypes[this.asset.type] : cardConfig.default;
+    }
+    render() {
+        if (!this.asset) {
+            return html ``;
+        }
+        const icon = this.getIcon();
+        const color = this.getColor();
+        const styleStr = color ? "--internal-or-map-asset-card-header-color: #" + color + ";" : "";
+        const cardConfig = this.getCardConfig();
+        const attributes = Object.values(this.asset.attributes).filter((attr) => attr.name !== "location" /* WellknownAttributes.LOCATION */);
+        const includedAttributes = cardConfig && cardConfig.include ? cardConfig.include : undefined;
+        const excludedAttributes = cardConfig && cardConfig.exclude ? cardConfig.exclude : [];
+        const attrs = attributes.filter((attr) => (!includedAttributes || includedAttributes.indexOf(attr.name) >= 0)
+            && (!excludedAttributes || excludedAttributes.indexOf(attr.name) < 0)
+            && (!attr.meta || !attr.meta.hasOwnProperty("showOnDashboard" /* WellknownMetaItems.SHOWONDASHBOARD */) || !!Util.getMetaValue("showOnDashboard" /* WellknownMetaItems.SHOWONDASHBOARD */, attr)))
+            .sort(Util.sortByString((listItem) => listItem.name));
+        const highlightedAttr = getMarkerConfigAttributeName(this.markerconfig, this.asset.type);
+        return html `
+            <div id="card-container" style="${styleStr}">
+                <div id="header">
+                    ${icon ? html `<or-icon icon="${icon}"></or-icon>` : ``}
+                    <span id="title">${this.asset.name}</span>
+                </div>
+                <div id="attribute-list">
+                    <ul>
+                        ${attrs.map((attr) => {
+            if (!this.asset || !this.asset.type) {
+                return;
+            }
+            const descriptors = AssetModelUtil.getAttributeAndValueDescriptors(this.asset.type, attr.name, attr);
+            if (descriptors && descriptors.length) {
+                const label = Util.getAttributeLabel(attr, descriptors[0], this.asset.type, true);
+                const value = Util.getAttributeValueAsString(attr, descriptors[0], this.asset.type, false, "-");
+                const classes = { highlighted: highlightedAttr === attr.name };
+                return html `<li class="${classMap(classes)}"><span class="attribute-name">${label}</span><span class="attribute-value">${value}</span></li>`;
+            }
+        })}
+                    </ul>
+                </div>
+                ${cardConfig && cardConfig.hideViewAsset ? html `` : html `
+                    <div id="footer">
+                        <or-mwc-input .type="${InputType.BUTTON}" label="viewAsset" @or-mwc-input-changed="${(e) => { e.preventDefault(); this._loadAsset(this.asset.id); }}"></or-mwc-input>
+                    </div>
+                `}
+            </div>
+        `;
+    }
+    _loadAsset(assetId) {
+        this.dispatchEvent(new OrMapAssetCardLoadAssetEvent(assetId));
+    }
+    getIcon() {
+        var _a;
+        if (this.asset) {
+            const descriptor = AssetModelUtil.getAssetDescriptor(this.asset.type);
+            const icon = (_a = getMarkerIconAndColorFromAssetType(descriptor)) === null || _a === void 0 ? void 0 : _a.icon;
+            return icon ? icon : undefined;
+        }
+    }
+    getColor() {
+        var _a;
+        if (this.asset) {
+            const descriptor = AssetModelUtil.getAssetDescriptor(this.asset.type);
+            const color = (_a = getMarkerIconAndColorFromAssetType(descriptor)) === null || _a === void 0 ? void 0 : _a.color;
+            if (color) {
+                // check if range
+                return (typeof color === 'string') ? color : color[0].colour;
+            }
+        }
+    }
+};
+__decorate([
+    property({ type: String, reflect: true, attribute: true })
+], OrMapAssetCard.prototype, "assetId", void 0);
+__decorate([
+    property({ type: Object, attribute: true })
+], OrMapAssetCard.prototype, "asset", void 0);
+__decorate([
+    property({ type: Object })
+], OrMapAssetCard.prototype, "config", void 0);
+__decorate([
+    property({ type: Object })
+], OrMapAssetCard.prototype, "markerconfig", void 0);
+__decorate([
+    property({ type: Boolean, attribute: true })
+], OrMapAssetCard.prototype, "useAssetColor", void 0);
+OrMapAssetCard = __decorate([
+    customElement("or-map-asset-card")
+], OrMapAssetCard);
+export { OrMapAssetCard };
+//# sourceMappingURL=or-map-asset-card.js.map