@openremote/or-dashboard-builder 1.2.0-snapshot.20241015145246 → 1.2.0-snapshot.20241218144812

package/lib/widgets/gauge-widget.js.map

@@ -1 +1 @@
-{"version":3,"file":"gauge-widget.js","sourceRoot":"","sources":["../../src/widgets/gauge-widget.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"gauge-widget.js","sourceRoot":"","sources":["../../src/widgets/gauge-widget.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,EAAC,IAAI,EAAE,GAAG,EAAiB,MAAM,KAAK,CAAC;AAC9C,OAAO,EAAC,aAAa,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAC,aAAa,EAAC,MAAM,yBAAyB,CAAC;AAKtD,OAAO,EAAC,aAAa,EAAC,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAC,IAAI,EAAC,MAAM,wBAAwB,CAAC;AAC5C,OAAO,sBAAsB,CAAC;AAW9B,SAAS,sBAAsB;IAC3B,OAAO;QACH,aAAa,EAAE,EAAE;QACjB,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,SAAS,CAAC,CAAC,EAAE,sHAAsH;QACtL,QAAQ,EAAE,CAAC;QACX,GAAG,EAAE,CAAC;QACN,GAAG,EAAE,GAAG;QACR,SAAS,EAAE,QAAQ;KACtB,CAAC;AACN,CAAC;AAED,MAAM,OAAO,GAAG,GAAG,CAAA;;;;;;;;CAQlB,CAAC;AAGK,IAAM,WAAW,mBAAjB,MAAM,WAAY,SAAQ,aAAa;IAAvC;;QAMO,aAAQ,GAAG,KAAK,CAAC;IA8F/B,CAAC;IA5FG,MAAM,CAAC,WAAW;QACd,OAAO;YACH,WAAW,EAAE,OAAO;YACpB,WAAW,EAAE,OAAO;YACpB,cAAc,EAAE,CAAC;YACjB,eAAe,EAAE,CAAC;YAClB,cAAc,CAAC,MAAyB;gBACpC,OAAO,IAAI,aAAW,CAAC,MAAM,CAAC,CAAC;YACnC,CAAC;YACD,eAAe,CAAC,MAAyB;gBACrC,OAAO,IAAI,aAAa,CAAC,MAAM,CAAC,CAAC;YACrC,CAAC;YACD,gBAAgB;gBACZ,OAAO,sBAAsB,EAAE,CAAC;YACpC,CAAC;SACJ,CAAC;IACN,CAAC;IAEM,cAAc,CAAC,KAAc;QAChC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;IACrD,CAAC;IAED,MAAM,KAAK,MAAM;QACb,OAAO,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACtC,CAAC;IAED,uEAAuE;IAC7D,UAAU,CAAC,YAA8B;QAE/C,iEAAiE;QACjE,IAAG,YAAY,CAAC,GAAG,CAAC,cAAc,CAAC,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACvD,MAAM,aAAa,GAAG,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC;YAEtD,sEAAsE;YACtE,MAAM,UAAU,GAAmB,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,MAAM,CAAC,CAAC,OAAqB,EAAE,EAAE,CAAC,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAC,CAAC;YACxH,IAAI,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,MAAM,MAAK,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;gBAEpE,+BAA+B;gBAC/B,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;YAEnC,CAAC;QACL,CAAC;QACD,OAAO,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IAC1C,CAAC;IAES,UAAU,CAAC,aAA6B;QAC9C,IAAG,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC5B,IAAI,CAAC,MAAM,GAAG,uBAAuB,CAAC;YACtC,OAAO;QACX,CAAC;QACD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC;QACxB,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE;YAC5C,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC;YAC3B,IAAI,CAAC,eAAe,GAAG,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,GAAG,CAAC,CAAC,OAAqB,EAAE,EAAE;gBAChE,MAAM,UAAU,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,OAAO,CAAC,EAAE,CAAC,CAAC;gBACxE,MAAM,UAAU,GAAG,UAAU,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;gBACpE,OAAO,UAAU,IAAI,UAAU,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,UAAU,EAAE,UAAU,CAAC,UAAU,CAAC,OAAO,CAAC,IAAK,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;YAChH,CAAC,EAAE,MAAM,CAAC,CAAC,YAAiB,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAA+B,CAAC;QACnF,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;YACT,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,OAAO,CAAC;QAC5B,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,EAAE;YACZ,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QAC1B,CAAC,CAAC,CAAC;IACP,CAAC;IAGS,MAAM;QACZ,OAAO,IAAI,CAAA;cACL,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE;YACtC,IAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACf,OAAO,IAAI,CAAA,+CAA+C,CAAC;YAC/D,CAAC;iBAAM,CAAC;gBACJ,OAAO,IAAI,CAAA,wCAAwC,IAAI,CAAC,MAAM,mBAAmB,CAAC;YACtF,CAAC;QACL,CAAC,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,EAAE,GAAG,EAAE;YAC7H,OAAO,IAAI,CAAA;wCACa,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,sBAAsB,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,kBAAkB,IAAI,CAAC,YAAY,CAAC,UAAU;2CAC5G,IAAI,CAAC,YAAY,CAAC,QAAQ,WAAW,IAAI,CAAC,YAAY,CAAC,GAAG,WAAW,IAAI,CAAC,YAAY,CAAC,GAAG;;;iBAGpH,CAAC;QACN,CAAC,EAAE,GAAG,EAAE;YACJ,OAAO,IAAI,CAAA;;;;iBAIV,CAAC;QACN,CAAC,CAAC,CAAC;SACN,CAAC;IACN,CAAC;CAEJ,CAAA;AA9Fa;IADT,KAAK,EAAE;6CACmB;AANlB,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAoGvB"}

package/lib/widgets/kpi-widget.js

@@ -1,13 +1,17 @@
-var KpiWidget_1,__decorate=this&&this.__decorate||function(t,e,i,s){var o,r=arguments.length,d=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)d=Reflect.decorate(t,e,i,s);else for(var n=t.length-1;n>=0;n--)(o=t[n])&&(d=(r<3?o(d):r>3?o(e,i,d):o(e,i))||d);return r>3&&d&&Object.defineProperty(e,i,d),d};import{customElement,state}from"lit/decorators.js";import{when}from"lit/directives/when.js";import{OrAssetWidget}from"../util/or-asset-widget";import{html}from"lit";import{KpiSettings}from"../settings/kpi-settings";import"@openremote/or-attribute-card";function getDefaultWidgetConfig(){return{attributeRefs:[],period:"day",decimals:0,deltaFormat:"absolute",showTimestampControls:!1}}let KpiWidget=KpiWidget_1=class extends OrAssetWidget{constructor(){super(...arguments),this._loading=!1}static getManifest(){return{displayName:"KPI",displayIcon:"label",minColumnWidth:1,minColumnHeight:1,getContentHtml:t=>new KpiWidget_1(t),getSettingsHtml:t=>new KpiSettings(t),getDefaultConfig:()=>getDefaultWidgetConfig()}}refreshContent(t){this.loadAssets(this.widgetConfig.attributeRefs)}willUpdate(t){if(t.has("widgetConfig")&&this.widgetConfig){const t=this.widgetConfig.attributeRefs,e=null==t?void 0:t.filter((t=>this.isAttributeRefLoaded(t)));(null==e?void 0:e.length)!==(t?t.length:0)&&this.loadAssets(t)}return super.willUpdate(t)}loadAssets(t){this._loading=!0,this.fetchAssets(t).then((e=>{this.loadedAssets=e,this.assetAttributes=null==t?void 0:t.map((t=>{const i=e.findIndex((e=>e.id===t.id)),s=i>=0?e[i]:void 0;return s&&s.attributes?[i,s.attributes[t.name]]:void 0})).filter((t=>!!t))})).finally((()=>{this._loading=!1}))}render(){var t;return html`
+var KpiWidget_1,__decorate=this&&this.__decorate||function(t,e,i,s){var o,r=arguments.length,n=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,i,s);else for(var d=t.length-1;d>=0;d--)(o=t[d])&&(n=(r<3?o(n):r>3?o(e,i,n):o(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};import{customElement,state}from"lit/decorators.js";import{when}from"lit/directives/when.js";import{OrAssetWidget}from"../util/or-asset-widget";import{html}from"lit";import{KpiSettings}from"../settings/kpi-settings";import"@openremote/or-attribute-card";function getDefaultWidgetConfig(){return{attributeRefs:[],period:"day",decimals:0,deltaFormat:"absolute",showTimestampControls:!1}}let KpiWidget=KpiWidget_1=class extends OrAssetWidget{constructor(){super(...arguments),this._loading=!1}static getManifest(){return{displayName:"KPI",displayIcon:"label",minColumnWidth:1,minColumnHeight:1,getContentHtml:t=>new KpiWidget_1(t),getSettingsHtml:t=>new KpiSettings(t),getDefaultConfig:()=>getDefaultWidgetConfig()}}refreshContent(t){this.loadAssets(this.widgetConfig.attributeRefs)}willUpdate(t){if(t.has("widgetConfig")&&this.widgetConfig){const t=this.widgetConfig.attributeRefs,e=null==t?void 0:t.filter((t=>this.isAttributeRefLoaded(t)));(null==e?void 0:e.length)!==(t?t.length:0)&&this.loadAssets(t)}return super.willUpdate(t)}loadAssets(t){0!==t.length?(this._loading=!0,this._error=void 0,this.fetchAssets(t).then((e=>{this.loadedAssets=e,this.assetAttributes=null==t?void 0:t.map((t=>{const i=e.findIndex((e=>e.id===t.id)),s=i>=0?e[i]:void 0;return s&&s.attributes?[i,s.attributes[t.name]]:void 0})).filter((t=>!!t))})).catch((t=>{this._error=t.message})).finally((()=>{this._loading=!1}))):this._error="noAttributesConnected"}render(){var t;return html`
             <div style="position: relative; height: 100%; overflow: hidden;">
-                ${when(this._loading,(()=>html`
-                        <div style="position: absolute; top: -5%; width: 100%; height: 105%; background: white; z-index: 1;">
-                            <or-loading-indicator></or-loading-indicator>
+                ${when(this._loading||this._error,(()=>html`
+                        <div style="position: absolute; top: -5%; width: 100%; height: 105%; background: white; z-index: 1; display: flex; justify-content: center; align-items: center; text-align: center;">
+                            ${when(this._loading,(()=>html`
+                                <or-loading-indicator></or-loading-indicator>
+                            `),(()=>html`
+                                <or-translate .value="${this._error}"></or-translate>
+                            `))}
                         </div>
                     `))}
                 <or-attribute-card .assets="${this.loadedAssets}" .assetAttributes="${this.assetAttributes}" .period="${this.widgetConfig.period}"
                                    .deltaFormat="${this.widgetConfig.deltaFormat}" .mainValueDecimals="${this.widgetConfig.decimals}"
-                                   showControls="${null===(t=this.widgetConfig)||void 0===t?void 0:t.showTimestampControls}" showTitle="${!1}" style="height: 100%;">
+                                   showControls="${null===(t=this.widgetConfig)||void 0===t?void 0:t.showTimestampControls}" showTitle="${!1}" hideAttributePicker="${!0}" style="height: 100%;">
                 </or-attribute-card>
             </div>
         `}};__decorate([state()],KpiWidget.prototype,"_loading",void 0),KpiWidget=KpiWidget_1=__decorate([customElement("kpi-widget")],KpiWidget);export{KpiWidget};

package/lib/widgets/kpi-widget.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openremote/or-dashboard-builder",
-  "version": "1.2.0-snapshot.20241015145246",
+  "version": "1.2.0-snapshot.20241218144812",
   "description": "OpenRemote Dashboard Builder",
   "main": "dist/umd/index.bundle.js",
   "module": "lib/index.js",
@@ -16,15 +16,15 @@
   "author": "OpenRemote",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@openremote/core": "1.2.0-snapshot.20241015145246",
-    "@openremote/model": "1.2.0-snapshot.20241015145246",
-    "@openremote/or-chart": "1.2.0-snapshot.20241015145246",
-    "@openremote/rest": "1.2.0-snapshot.20241015145246",
+    "@openremote/core": "1.2.0-snapshot.20241218144812",
+    "@openremote/model": "1.2.0-snapshot.20241218144812",
+    "@openremote/or-chart": "1.2.0-snapshot.20241218144812",
+    "@openremote/rest": "1.2.0-snapshot.20241218144812",
     "gridstack": "^7.2.0",
     "lit": "^2.0.2"
   },
   "devDependencies": {
-    "@openremote/util": "1.2.0-snapshot.20241015145246"
+    "@openremote/util": "1.2.0-snapshot.20241218144812"
   },
   "publishConfig": {
     "access": "public"

package/src/panels/thresholds-panel.ts

@@ -121,6 +121,13 @@ export class ThresholdsPanel extends LitElement {
         }
     }
 
+    private get colorValue() {
+        return (color?: string) => {
+            if (!color) return "#000000";
+            return color.startsWith('#') ? color : '#' + color;
+        }
+    }
+
     protected render(): TemplateResult {
         return html`
             <div id="thresholds-list" class="expanded-panel">
@@ -173,14 +180,12 @@ export class ThresholdsPanel extends LitElement {
                 ` : null}
 
                 <!-- Thresholds by boolean -->
-                ${(this.valueType === 'boolean') ? html`
+                ${(this.valueType === 'boolean' && this.boolColors) ? html`
                     <div class="threshold-list-item">
                         <div class="threshold-list-item-colour">
-                            <or-mwc-input type="${InputType.COLOUR}" value="${this.boolColors.true}"
-                                          @or-mwc-input-changed="${(event: OrInputChangedEvent) => {
-                                              this.boolColors.true = event.detail.value;
-                                              this.requestUpdate('boolColors');
-                                          }}"
+                            <or-mwc-input type="${InputType.COLOUR}" value="${this.colorValue(this.boolColors?.true)}"
+                                          @or-mwc-input-changed="${(event: OrInputChangedEvent) => {   
+                                          this.onBoolColorChange(true, event.detail.value)}}"
                             ></or-mwc-input>
                         </div>
                         <or-mwc-input type="${InputType.TEXT}" comfortable .value="${'True'}" .readonly="${true}"
@@ -188,11 +193,9 @@ export class ThresholdsPanel extends LitElement {
                     </div>
                     <div class="threshold-list-item">
                         <div class="threshold-list-item-colour">
-                            <or-mwc-input type="${InputType.COLOUR}" value="${this.boolColors.false}"
+                            <or-mwc-input type="${InputType.COLOUR}" value="${this.colorValue(this.boolColors?.false)}"
                                           @or-mwc-input-changed="${(event: OrInputChangedEvent) => {
-                                              this.boolColors.false = event.detail.value;
-                                              this.requestUpdate('boolColors');
-                                          }}"
+                                            this.onBoolColorChange(false, event.detail.value)}}"
                             ></or-mwc-input>
                         </div>
                         <or-mwc-input type="${InputType.TEXT}" comfortable .value="${'False'}" .readonly="${true}"
@@ -245,12 +248,30 @@ export class ThresholdsPanel extends LitElement {
         `
     }
 
+    protected onBoolColorChange(isTrue: boolean, newColor: string) {
+         // in case newColor already has '#' prefix
+        const color = newColor.startsWith('#') ? newColor.substring(1) : newColor;
+        
+        if (!this.boolColors) {
+            this.boolColors = {
+                type: 'boolean',
+                true: '4caf50',
+                false: 'ef5350'
+            };
+        }
+
+        this.boolColors = {
+            ...this.boolColors,
+            [isTrue ? 'true' : 'false']: color
+        };
+    }
+
     protected removeThreshold(threshold: [any, string]) {
         switch (typeof threshold[0]) {
             case "number":
                 this.thresholds = (this.thresholds as [number, string][]).filter((x) => x !== threshold);
                 break;
-            default:
+            default: 
                 this.textColors = (this.textColors as [string, string][]).filter((x) => x !== threshold);
                 break;
         }

package/src/settings/map-settings.ts

@@ -4,7 +4,7 @@ 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 {AttributeMarkerColours, LngLatLike, MapMarkerColours} from "@openremote/or-map";
 import "../panels/assettypes-panel";
 import "../panels/thresholds-panel";
 import {LngLat} from "maplibre-gl"; // TODO: Replace this import
@@ -12,7 +12,7 @@ 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";
+import {BoolColorsChangeEvent, ThresholdChangeEvent} from "../panels/thresholds-panel";
 
 const styling = css`
   .switchMwcInputContainer {
@@ -97,9 +97,12 @@ export class MapSettings extends AssetWidgetSettings {
                 <!-- 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;"
+                        <thresholds-panel .thresholds="${this.widgetConfig.thresholds}" 
+                                        .boolColors="${this.widgetConfig.boolColors}" 
+                                        .valueType="${this.widgetConfig.valueType}" style="padding-bottom: 12px;"
                                           .min="${this.widgetConfig.min}" .max="${this.widgetConfig.max}"
-                                          @threshold-change="${(ev: ThresholdChangeEvent) => this.onThresholdsChange(ev)}">
+                                          @threshold-change="${(ev: ThresholdChangeEvent) => this.onThresholdsChange(ev)}"
+                                          @bool-colors-change="${(ev: BoolColorsChangeEvent) => this.onBoolColorsChange(ev)}">
                         </thresholds-panel>
                     </settings-panel>
                 `)}
@@ -182,4 +185,9 @@ export class MapSettings extends AssetWidgetSettings {
         this.notifyConfigUpdate();
     }
 
+    protected onBoolColorsChange(ev: BoolColorsChangeEvent) {
+        this.widgetConfig.boolColors = ev.detail as MapMarkerColours;
+        this.notifyConfigUpdate();
+    }
+
 }

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

@@ -3,7 +3,7 @@ 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 {isAxiosError} from "@openremote/rest";
 import {WidgetSettings} from "./widget-settings";
 import { CSSResult } from "lit";
 
@@ -22,6 +22,9 @@ export abstract class OrAssetWidget extends OrWidget {
     @state() // cached attribute list; [asset index of the loadedAssets array, attribute]
     protected assetAttributes: [number, Attribute<any>][] = [];
 
+    @state()
+    protected _error?: string;
+
     static get styles(): CSSResult[] {
         return [...super.styles];
     }
@@ -83,8 +86,6 @@ export abstract class AssetWidgetSettings extends WidgetSettings {
 
 // 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: {
@@ -93,14 +94,26 @@ async function fetchAssetsByAttributeRef(attributeRefs: AttributeRef[] = []) {
     });
 }
 
+/**
+ * Function that will fetch an array of assets based on {@link assetQuery}.
+ * On failure, by default, it will only log to the web browser console.
+ * In some cases it will throw a custom error, that holds a custom message.
+ */
 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);
+    }).catch((e) => {
+        console.error(e);
         showSnackbar(undefined, "errorOccurred");
+        if(isAxiosError(e)) {
+            if(e.message === "Network Error") {
+                throw new Error("youAreOffline")
+            } else if(e.code === "ECONNABORTED") {
+                throw new Error("noAttributeDataTimeout")
+            }
+        }
     });
     return assets;
 }

package/src/widgets/attribute-input-widget.ts

@@ -33,6 +33,14 @@ const styling = css`
     align-items: center;
     overflow: hidden;
   }
+    
+  #error-txt {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+  }
 
   .attr-input {
     width: 100%;
@@ -93,7 +101,9 @@ export class AttributeInputWidget extends OrAssetWidget {
         // If widgetConfig, and the attributeRefs of them have changed...
         if(changedProps.has("widgetConfig") && this.widgetConfig) {
             const attributeRefs = this.widgetConfig.attributeRefs;
-            if(attributeRefs.length > 0 && !this.isAttributeRefLoaded(attributeRefs[0])) {
+            if(attributeRefs.length === 0) {
+                this._error = "noAttributesConnected";
+            } else if(attributeRefs.length > 0 && !this.isAttributeRefLoaded(attributeRefs[0])) {
                 this.loadAssets(attributeRefs);
             }
         }
@@ -113,9 +123,16 @@ export class AttributeInputWidget extends OrAssetWidget {
     }
 
     protected loadAssets(attributeRefs: AttributeRef[]) {
+        if(attributeRefs.length === 0) {
+            this._error = "noAttributesConnected";
+            return;
+        }
         this._loading = true;
+        this._error = undefined;
         this.fetchAssets(attributeRefs).then((assets) => {
             this.loadedAssets = assets;
+        }).catch(e => {
+            this._error = e.message;
         }).finally(() => {
             this._loading = false;
         });
@@ -126,10 +143,13 @@ export class AttributeInputWidget extends OrAssetWidget {
         const attribute = (config.attributeRefs.length > 0 && this.loadedAssets[0]?.attributes) ? this.loadedAssets[0].attributes[config.attributeRefs[0].name!] : undefined;
         const readOnlyMetaItem = Util.getMetaValue(WellknownMetaItems.READONLY, attribute);
         return html`
-            ${when(this._loading, () => {
-                return html`
-                    <or-loading-indicator></or-loading-indicator>
-                `;
+            
+            ${when(this._loading || this._error, () => {
+                if(this._loading) {
+                    return html`<or-loading-indicator></or-loading-indicator>`;
+                } else {
+                    return html`<or-translate id="error-txt" .value="${this._error}"></or-translate>`;
+                }
             }, () => when(config.attributeRefs.length > 0 && attribute && this.loadedAssets && this.loadedAssets.length > 0, () => {
                 return html`
                     <div id="widget-wrapper">
@@ -143,12 +163,6 @@ export class AttributeInputWidget extends OrAssetWidget {
                         ></or-attribute-input>
                     </div>
                 `;
-            }, () => {
-                return html`
-                    <div style="height: 100%; display: flex; justify-content: center; align-items: center;">
-                        <span><or-translate value="noAttributesConnected"></or-translate></span>
-                    </div>
-                `;
             }))}
         `;
     }

package/src/widgets/chart-widget.ts

@@ -146,17 +146,26 @@ export class ChartWidget extends OrAssetWidget {
             this.datapointQuery = this.widgetConfig.datapointQuery;
 
             const attributeRefs = this.widgetConfig.attributeRefs;
-            const missingAssets = attributeRefs?.filter((attrRef: AttributeRef) => !this.isAttributeRefLoaded(attrRef));
-            if (missingAssets.length > 0) {
-                this.loadAssets(attributeRefs);
+            if(attributeRefs.length === 0) {
+                this._error = "noAttributesConnected";
+            } else {
+                const missingAssets = attributeRefs?.filter((attrRef: AttributeRef) => !this.isAttributeRefLoaded(attrRef));
+                if (missingAssets.length > 0) {
+                    this.loadAssets(attributeRefs);
+                }
             }
         }
 
         return super.willUpdate(changedProps);
     }
 
-    protected loadAssets(attributeRefs: AttributeRef[]) {
+    protected loadAssets(attributeRefs: AttributeRef[]): void {
+        if(attributeRefs.length === 0) {
+            this._error = "noAttributesConnected";
+            return;
+        }
         this._loading = true;
+        this._error = undefined;
         this.fetchAssets(attributeRefs).then((assets) => {
             this.loadedAssets = assets;
             this.assetAttributes = attributeRefs?.map((attrRef: AttributeRef) => {
@@ -164,6 +173,8 @@ export class ChartWidget extends OrAssetWidget {
                 const foundAsset = assetIndex >= 0 ? assets[assetIndex] : undefined;
                 return foundAsset && foundAsset.attributes ? [assetIndex, foundAsset.attributes[attrRef.name!]] : undefined;
             }).filter((indexAndAttr: any) => !!indexAndAttr) as [number, Attribute<any>][];
+        }).catch(e => {
+            this._error = e.message;
         }).finally(() => {
             this._loading = false;
         });
@@ -173,7 +184,13 @@ export class ChartWidget extends OrAssetWidget {
         return html`
             ${when(this._loading, () => html`
                 <or-loading-indicator></or-loading-indicator>
-            `, () => when(this.loadedAssets && this.assetAttributes && this.loadedAssets.length > 0 && this.assetAttributes.length > 0, () => {
+                
+            `, () => when(this._error, () => html`
+                <div style="height: 100%; display: flex; justify-content: center; align-items: center; text-align: center;">
+                    <span><or-translate .value="${this._error}"></or-translate></span>
+                </div>
+                
+            `, () => {
                 return html`
                     <or-chart .assets="${this.loadedAssets}" .assetAttributes="${this.assetAttributes}" .rightAxisAttributes="${this.widgetConfig.rightAxisAttributes}"
                               .showLegend="${(this.widgetConfig?.showLegend != null) ? this.widgetConfig?.showLegend : true}"
@@ -183,12 +200,6 @@ export class ChartWidget extends OrAssetWidget {
                               style="height: 100%"
                     ></or-chart>
                 `;
-            }, () => {
-                return html`
-                    <div style="height: 100%; display: flex; justify-content: center; align-items: center;">
-                        <span><or-translate value="noAttributesConnected"></or-translate></span>
-                    </div>
-                `;
             }))}
         `;
     }

package/src/widgets/gateway-widget.ts

@@ -10,6 +10,7 @@ import manager from "@openremote/core";
 import {when} from "lit/directives/when.js";
 import {i18next} from "@openremote/or-translate";
 import {showSnackbar} from "@openremote/or-mwc-components/or-mwc-snackbar";
+import moment from "moment";
 
 const styling = css`
     #gateway-widget-wrapper {
@@ -59,6 +60,8 @@ export class GatewayWidget extends OrWidget {
 
     protected _startedByUser = false;
 
+    protected _refreshTimer?: number = undefined;
+
     static getManifest(): WidgetManifest {
         return {
             displayName: "Gateway",
@@ -95,6 +98,11 @@ export class GatewayWidget extends OrWidget {
                 console.warn("Keeping the active tunnel open, as it is not started through the widget.")
             }
         }
+
+        if (this._refreshTimer) {
+            clearTimeout(this._refreshTimer);
+        }
+
         super.disconnectedCallback();
     }
 
@@ -132,7 +140,7 @@ export class GatewayWidget extends OrWidget {
                     `, () => {
                         if (this._activeTunnel) {
                             return html`
-
+                                <div>
                                 <or-mwc-input .type="${InputType.BUTTON}" icon="stop" label="${i18next.t('gatewayTunnels.stop')}" .disabled="${disabled}"
                                               @or-mwc-input-changed="${(ev: OrInputChangedEvent) => this._onStopTunnelClick(ev)}"
                                 ></or-mwc-input>
@@ -146,7 +154,10 @@ export class GatewayWidget extends OrWidget {
                                                   @or-mwc-input-changed="${(ev: OrInputChangedEvent) => this._onTunnelNavigateClick(ev)}"
                                     ></or-mwc-input>
                                 `)}
-                                
+                                </div>
+                                ${when(this._activeTunnel?.autoCloseTime, () => html`
+                                    <div><or-translate value="gatewayTunnels.closesAt"></or-translate>: ${moment(this._activeTunnel?.autoCloseTime).format("lll")}</div>
+                                `)}
                             `;
                         } else {
                             return html`
@@ -213,6 +224,26 @@ export class GatewayWidget extends OrWidget {
      */
     protected _setActiveTunnel(tunnelInfo?: GatewayTunnelInfo, silent = false) {
         this._activeTunnel = tunnelInfo;
+
+        if (this._refreshTimer) {
+            clearTimeout(this._refreshTimer);
+        }
+
+        if (tunnelInfo?.autoCloseTime) {
+            const timeout = tunnelInfo?.autoCloseTime - Date.now();
+            if (timeout > 0) {
+                this._refreshTimer = window.setTimeout(() => {
+                    this._getActiveTunnel(this._getTunnelInfoByConfig(this.widgetConfig)).then(info => {
+                        if (info) {
+                            this._setActiveTunnel(info, true)
+                        } else {
+                            this._setActiveTunnel(undefined);
+                        }
+                    });
+                }, timeout);
+            }
+        }
+
         if(tunnelInfo && !silent) {
             this._navigateToTunnel(tunnelInfo);
         }

package/src/widgets/gauge-widget.ts

@@ -1,4 +1,4 @@
-import {html, TemplateResult} from "lit";
+import {html, css, TemplateResult} from "lit";
 import {customElement, state} from "lit/decorators.js";
 import {OrAssetWidget} from "../util/or-asset-widget";
 import {WidgetConfig} from "../util/widget-config";
@@ -29,6 +29,16 @@ function getDefaultWidgetConfig(): GaugeWidgetConfig {
     };
 }
 
+const styling = css`
+  #error-txt {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+  }
+`;
+
 @customElement("gauge-widget")
 export class GaugeWidget extends OrAssetWidget {
 
@@ -60,6 +70,10 @@ export class GaugeWidget extends OrAssetWidget {
         this.loadAssets(this.widgetConfig.attributeRefs);
     }
 
+    static get styles() {
+        return [...super.styles, styling];
+    }
+
     // WebComponent lifecycle method, that occurs DURING every state update
     protected willUpdate(changedProps: Map<string, any>) {
 
@@ -80,7 +94,12 @@ export class GaugeWidget extends OrAssetWidget {
     }
 
     protected loadAssets(attributeRefs: AttributeRef[]) {
+        if(attributeRefs.length === 0) {
+            this._error = "noAttributesConnected";
+            return;
+        }
         this._loading = true;
+        this._error = undefined;
         this.fetchAssets(attributeRefs).then((assets) => {
             this.loadedAssets = assets;
             this.assetAttributes = attributeRefs?.map((attrRef: AttributeRef) => {
@@ -88,6 +107,8 @@ export class GaugeWidget extends OrAssetWidget {
                 const foundAsset = assetIndex >= 0 ? assets[assetIndex] : undefined;
                 return foundAsset && foundAsset.attributes ? [assetIndex, foundAsset.attributes[attrRef.name!]] : undefined;
             }).filter((indexAndAttr: any) => !!indexAndAttr) as [number, Attribute<any>][];
+        }).catch(e => {
+            this._error = e.message;
         }).finally(() => {
             this._loading = false;
         });
@@ -96,10 +117,12 @@ export class GaugeWidget extends OrAssetWidget {
 
     protected render(): TemplateResult {
         return html`
-            ${when(this._loading, () => {
-                return html`
-                    <or-loading-indicator></or-loading-indicator>
-                `;
+            ${when(this._loading || this._error, () => {
+                if(this._loading) {
+                    return html`<or-loading-indicator></or-loading-indicator>`;
+                } else {
+                    return html`<or-translate id="error-txt" .value="${this._error}"></or-translate>`;
+                }
             }, () => when(this.loadedAssets && this.assetAttributes && this.loadedAssets.length > 0 && this.assetAttributes.length > 0, () => {
                 return html`
                     <or-gauge .asset="${this.loadedAssets[0]}" .assetAttribute="${this.assetAttributes[0]}" .thresholds="${this.widgetConfig.thresholds}"
@@ -109,7 +132,7 @@ export class GaugeWidget extends OrAssetWidget {
                 `;
             }, () => {
                 return html`
-                    <div style="height: 100%; display: flex; justify-content: center; align-items: center;">
+                    <div style="height: 100%; display: flex; justify-content: center; align-items: center; text-align: center;">
                         <span><or-translate value="noAttributeConnected"></or-translate></span>
                     </div>
                 `;

package/src/widgets/kpi-widget.ts

@@ -76,7 +76,12 @@ export class KpiWidget extends OrAssetWidget {
     }
 
     protected loadAssets(attributeRefs: AttributeRef[]) {
+        if(attributeRefs.length === 0) {
+            this._error = "noAttributesConnected";
+            return;
+        }
         this._loading = true;
+        this._error = undefined;
         this.fetchAssets(attributeRefs).then((assets) => {
             this.loadedAssets = assets;
             this.assetAttributes = attributeRefs?.map((attrRef: AttributeRef) => {
@@ -84,6 +89,8 @@ export class KpiWidget extends OrAssetWidget {
                 const foundAsset = assetIndex >= 0 ? assets[assetIndex] : undefined;
                 return foundAsset && foundAsset.attributes ? [assetIndex, foundAsset.attributes[attrRef.name!]] : undefined;
             }).filter((indexAndAttr: any) => !!indexAndAttr) as [number, Attribute<any>][];
+        }).catch(e => {
+            this._error = e.message;
         }).finally(() => {
             this._loading = false;
         });
@@ -92,17 +99,21 @@ export class KpiWidget extends OrAssetWidget {
     protected render(): TemplateResult {
         return html`
             <div style="position: relative; height: 100%; overflow: hidden;">
-                ${when(this._loading, () => {
+                ${when(this._loading || this._error, () => {
                     // Have to use `position: absolute` with white background due to rendering inconsistencies in or-attribute-card
                     return html`
-                        <div style="position: absolute; top: -5%; width: 100%; height: 105%; background: white; z-index: 1;">
-                            <or-loading-indicator></or-loading-indicator>
+                        <div style="position: absolute; top: -5%; width: 100%; height: 105%; background: white; z-index: 1; display: flex; justify-content: center; align-items: center; text-align: center;">
+                            ${when(this._loading, () => html`
+                                <or-loading-indicator></or-loading-indicator>
+                            `, () => html`
+                                <or-translate .value="${this._error}"></or-translate>
+                            `)}
                         </div>
                     `;
                 })}
                 <or-attribute-card .assets="${this.loadedAssets}" .assetAttributes="${this.assetAttributes}" .period="${this.widgetConfig.period}"
                                    .deltaFormat="${this.widgetConfig.deltaFormat}" .mainValueDecimals="${this.widgetConfig.decimals}"
-                                   showControls="${this.widgetConfig?.showTimestampControls}" showTitle="${false}" style="height: 100%;">
+                                   showControls="${this.widgetConfig?.showTimestampControls}" showTitle="${false}" hideAttributePicker="${true}" style="height: 100%;">
                 </or-attribute-card>
             </div>
         `;