@openremote/or-dashboard-builder 1.2.0-snapshot.20240616202404 → 1.2.0-snapshot.20240819101332

package/lib/widgets/gateway-widget.d.ts

@@ -0,0 +1,84 @@
+import { OrWidget, WidgetManifest } from "../util/or-widget";
+import { PropertyValues, TemplateResult } from "lit";
+import { WidgetConfig } from "../util/widget-config";
+import { OrInputChangedEvent } from "@openremote/or-mwc-components/or-mwc-input";
+import { GatewayTunnelInfo, GatewayTunnelInfoType } from "@openremote/model";
+export interface GatewayWidgetConfig extends WidgetConfig {
+    gatewayId?: string;
+    type: GatewayTunnelInfoType;
+    target: string;
+    targetPort: number;
+}
+export declare class GatewayWidget extends OrWidget {
+    protected widgetConfig: GatewayWidgetConfig;
+    protected _loading: boolean;
+    protected _activeTunnel?: GatewayTunnelInfo;
+    protected _startedByUser: boolean;
+    static getManifest(): WidgetManifest;
+    refreshContent(force: boolean): void;
+    static get styles(): import("lit").CSSResult[];
+    disconnectedCallback(): void;
+    protected firstUpdated(_changedProps: PropertyValues): void;
+    protected render(): TemplateResult;
+    /**
+     * HTML callback function when 'copy address' button is pressed for a TCP tunnel.
+     */
+    protected _onCopyTunnelAddressClick(ev: OrInputChangedEvent): void;
+    /**
+     * HTML callback function when 'start' button is pressed, meant to create / start a new tunnel.
+     */
+    protected _onStartTunnelClick(ev: OrInputChangedEvent): void;
+    /**
+     * HTML callback function when 'stop' button is pressed, meant to destroy the active tunnel.
+     */
+    protected _onStopTunnelClick(ev: OrInputChangedEvent): void;
+    /**
+     * HTML callback function when 'open' button is pressed, meant to start using the tunnel.
+     */
+    protected _onTunnelNavigateClick(ev: OrInputChangedEvent): void;
+    /**
+     * Internal function to set the active tunnel.
+     * Navigates the user to the tunnel after updating. This can be disabled using the {@link silent} parameter.
+     */
+    protected _setActiveTunnel(tunnelInfo?: GatewayTunnelInfo, silent?: boolean): void;
+    /**
+     * Function that tries to start the tunnel. It checks the configuration beforehand,
+     * and acts as a controller to call the correct functions throughout the starting process.
+     */
+    protected _tryStartTunnel(widgetConfig: GatewayWidgetConfig): void;
+    /**
+     * Internal function that starts the tunnel by communicating with the Manager API.
+     */
+    protected _startTunnel(info: GatewayTunnelInfo): Promise<GatewayTunnelInfo | undefined>;
+    /**
+     * Internal function that requests the Manager API for the active tunnel based on the {@link GatewayTunnelInfo} parameter.
+     * Returns `undefined` if no tunnel could be found on the Manager instance.
+     */
+    protected _getActiveTunnel(info: GatewayTunnelInfo): Promise<GatewayTunnelInfo | undefined>;
+    /**
+     * Function that tries to destroy the currently active tunnel.
+     */
+    protected _tryStopTunnel(config: GatewayWidgetConfig): void;
+    /**
+     * Internal function that requests the Manager API to destroy a tunnel that is in line with the {@link GatewayTunnelInfo} parameter.
+     */
+    protected _stopTunnel(info: GatewayTunnelInfo): Promise<void>;
+    /**
+     * Function that navigates the user to an HTTP web page that interacts with a service through the tunnel.
+     * It will open in a new browser tab automatically.
+     */
+    protected _navigateToTunnel(info: GatewayTunnelInfo): void;
+    /**
+     * Internal function to get the tunnel address based on {@link GatewayTunnelInfo}
+     */
+    protected _getTunnelAddress(info: GatewayTunnelInfo): string | undefined;
+    /**
+     * Internal function to check whether the {@link GatewayWidgetConfig} includes the necessary information to control the tunnel.
+     * Uses several `undefined` or empty checks. Useful for checking the object before interacting with Manager APIs.
+     */
+    protected _isConfigComplete(widgetConfig: GatewayWidgetConfig): boolean;
+    /**
+     * Internal function that parses a {@link GatewayWidgetConfig} into a new {@link GatewayTunnelInfo}.
+     */
+    protected _getTunnelInfoByConfig(config: GatewayWidgetConfig): GatewayTunnelInfo;
+}

package/lib/widgets/gateway-widget.js

@@ -0,0 +1,47 @@
+var GatewayWidget_1,__decorate=this&&this.__decorate||function(t,e,n,o){var i,a=arguments.length,r=a<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,n):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,n,o);else for(var s=t.length-1;s>=0;s--)(i=t[s])&&(r=(a<3?i(r):a>3?i(e,n,r):i(e,n))||r);return a>3&&r&&Object.defineProperty(e,n,r),r},__awaiter=this&&this.__awaiter||function(t,e,n,o){return new(n||(n=Promise))((function(i,a){function r(t){try{l(o.next(t))}catch(t){a(t)}}function s(t){try{l(o.throw(t))}catch(t){a(t)}}function l(t){var e;t.done?i(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(r,s)}l((o=o.apply(t,e||[])).next())}))};import{customElement,state}from"lit/decorators.js";import{OrWidget}from"../util/or-widget";import{css,html}from"lit";import{GatewaySettings}from"../settings/gateway-settings";import{InputType}from"@openremote/or-mwc-components/or-mwc-input";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";const styling=css`
+    #gateway-widget-wrapper {
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+    }
+
+    #gateway-widget-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        max-height: 48px;
+        flex-wrap: wrap;
+        position: relative;
+    }
+`;function getDefaultWidgetConfig(){return{type:"HTTPS",target:"localhost",targetPort:443}}let GatewayWidget=GatewayWidget_1=class extends OrWidget{constructor(){super(...arguments),this._loading=!0,this._startedByUser=!1}static getManifest(){return{displayName:"Gateway",displayIcon:"lan-connect",minColumnWidth:1,minColumnHeight:1,getContentHtml:t=>new GatewayWidget_1(t),getSettingsHtml:t=>new GatewaySettings(t),getDefaultConfig:()=>getDefaultWidgetConfig()}}refreshContent(t){this.widgetConfig=JSON.parse(JSON.stringify(this.widgetConfig))}static get styles(){return[...super.styles,styling]}disconnectedCallback(){this._activeTunnel&&(this._startedByUser?this._stopTunnel(this._activeTunnel).then((()=>{console.warn("Stopped the active tunnel, as it was created through the widget.")})):console.warn("Keeping the active tunnel open, as it is not started through the widget.")),super.disconnectedCallback()}firstUpdated(t){this.widgetConfig&&setTimeout((()=>{const t=this._getTunnelInfoByConfig(this.widgetConfig);this._getActiveTunnel(t).then((t=>{t&&(console.log("Existing tunnel found!",t),this._setActiveTunnel(t,!0))})).catch((t=>{console.error(t)})).finally((()=>{this._loading=!1}))}),500)}render(){var t;const e=(null===(t=this.getEditMode)||void 0===t?void 0:t.call(this))||!this._isConfigComplete(this.widgetConfig);return html`
+            <div id="gateway-widget-wrapper">
+                <div id="gateway-widget-container">
+                    ${when(this._loading,(()=>html`
+                        <or-loading-indicator></or-loading-indicator>
+                    `),(()=>this._activeTunnel?html`
+
+                                <or-mwc-input .type="${InputType.BUTTON}" icon="stop" label="${i18next.t("gatewayTunnels.stop")}" .disabled="${e}"
+                                              @or-mwc-input-changed="${t=>this._onStopTunnelClick(t)}"
+                                ></or-mwc-input>
+                                
+                                ${when("TCP"===this.widgetConfig.type,(()=>html`
+                                    <or-mwc-input .type="${InputType.BUTTON}" icon="content-copy" label="${i18next.t("gatewayTunnels.copyAddress")}" outlined .disabled="${e}"
+                                                  @or-mwc-input-changed="${t=>this._onCopyTunnelAddressClick(t)}"
+                                    ></or-mwc-input>
+                                `),(()=>html`
+                                    <or-mwc-input .type="${InputType.BUTTON}" icon="open-in-new" label="${i18next.t("gatewayTunnels.open")}" outlined .disabled="${e}"
+                                                  @or-mwc-input-changed="${t=>this._onTunnelNavigateClick(t)}"
+                                    ></or-mwc-input>
+                                `))}
+                                
+                            `:html`
+                                <or-mwc-input .type="${InputType.BUTTON}" label="${i18next.t("gatewayTunnels.start")}" outlined .disabled="${e}"
+                                              @or-mwc-input-changed="${t=>this._onStartTunnelClick(t)}"
+                                ></or-mwc-input>
+                            `))}
+                </div>
+            </div>
+        `}_onCopyTunnelAddressClick(t){if(this._isConfigComplete(this.widgetConfig)){const t=this._getTunnelInfoByConfig(this.widgetConfig),e=this._getTunnelAddress(t);e?navigator.clipboard.writeText(e).finally((()=>{showSnackbar(void 0,i18next.t("gatewayTunnels.copySuccess"))})):(console.warn("Could not copy tunnel address as it could not be found."),showSnackbar(void 0,i18next.t("errorOccurred")))}else console.warn("Could not copy tunnel address as configuration is not complete."),showSnackbar(void 0,i18next.t("errorOccurred"))}_onStartTunnelClick(t){this._tryStartTunnel(this.widgetConfig)}_onStopTunnelClick(t){this._tryStopTunnel(this.widgetConfig)}_onTunnelNavigateClick(t){this._isConfigComplete(this.widgetConfig)?this._navigateToTunnel(this._getTunnelInfoByConfig(this.widgetConfig)):console.warn("Could not navigate to tunnel as configuration is not complete.")}_setActiveTunnel(t,e=!1){this._activeTunnel=t,t&&!e&&this._navigateToTunnel(t)}_tryStartTunnel(t){if(this._isConfigComplete(t)){const e=this._getTunnelInfoByConfig(t);this._loading=!0,this._getActiveTunnel(e).then((t=>{t?(console.log("Found an active tunnel!",t),this._setActiveTunnel(t),this._loading=!1):this._startTunnel(e).then((t=>{t?(console.log("Started a new tunnel!",t),this._setActiveTunnel(t),this._startedByUser=!0):console.warn("No new tunnel!")})).catch((t=>{console.error(t),showSnackbar(void 0,i18next.t("errorOccurred"))})).finally((()=>{this._loading=!1}))})).catch((t=>{console.error(t),showSnackbar(void 0,i18next.t("errorOccurred")),this._loading=!1}))}}_startTunnel(t){return __awaiter(this,void 0,void 0,(function*(){if(!(t.realm&&t.gatewayId&&t.target&&t.targetPort))throw new Error("Could not start tunnel, as some provided information was not set.");return(yield manager.rest.api.GatewayServiceResource.startTunnel(t)).data}))}_getActiveTunnel(t){return __awaiter(this,void 0,void 0,(function*(){if(!(t.realm&&t.gatewayId&&t.target&&t.targetPort))throw new Error("Could not get active tunnel, as some provided information was not set.");const e=yield manager.rest.api.GatewayServiceResource.getActiveTunnelInfo(t.realm,t.gatewayId,t.target,t.targetPort);return 204===e.status?void 0:e.data}))}_tryStopTunnel(t){const e=this._getTunnelInfoByConfig(t);this._loading=!0,this._stopTunnel(e).then((()=>{this._setActiveTunnel(void 0),this._startedByUser=!1})).catch((t=>{console.warn(t)})).finally((()=>{this._loading=!1}))}_stopTunnel(t){return __awaiter(this,void 0,void 0,(function*(){return(yield manager.rest.api.GatewayServiceResource.stopTunnel(t)).data}))}_navigateToTunnel(t){var e;t.realm&&t.gatewayId&&t.target&&t.targetPort||console.warn("Could not navigate to tunnel, as some provided information was not set.");const n=this._getTunnelAddress(t);switch(t.type){case"HTTPS":case"HTTP":null===(e=window.open(n))||void 0===e||e.focus();break;default:console.error("Unknown error when navigating to tunnel.")}}_getTunnelAddress(t){switch(t.type){case"HTTPS":case"HTTP":return"//"+t.id+"."+window.location.host;case"TCP":return t.id+"."+window.location.hostname+":"+t.assignedPort}}_isConfigComplete(t){return t.gatewayId?t.type?t.target?!!t.targetPort||(console.error("Could not start tunnel, since no gateway target port was configured."),!1):(console.error("Could not start tunnel, since no gateway target was configured."),!1):(console.error("Could not start tunnel, since no gateway type / protocol was configured."),!1):(console.error("Could not start tunnel, since no gateway asset was configured."),!1)}_getTunnelInfoByConfig(t){return{realm:manager.displayRealm,gatewayId:t.gatewayId,type:t.type,target:t.target,targetPort:t.targetPort}}};__decorate([state()],GatewayWidget.prototype,"_loading",void 0),__decorate([state()],GatewayWidget.prototype,"_activeTunnel",void 0),GatewayWidget=GatewayWidget_1=__decorate([customElement("gateway-widget")],GatewayWidget);export{GatewayWidget};

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

@@ -0,0 +1 @@
+{"version":3,"file":"gateway-widget.js","sourceRoot":"","sources":["../../src/widgets/gateway-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.20240616202404",
+  "version": "1.2.0-snapshot.20240819101332",
   "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.20240616202404",
-    "@openremote/model": "1.2.0-snapshot.20240616202404",
-    "@openremote/or-chart": "1.2.0-snapshot.20240616202404",
-    "@openremote/rest": "1.2.0-snapshot.20240616202404",
+    "@openremote/core": "1.2.0-snapshot.20240819101332",
+    "@openremote/model": "1.2.0-snapshot.20240819101332",
+    "@openremote/or-chart": "1.2.0-snapshot.20240819101332",
+    "@openremote/rest": "1.2.0-snapshot.20240819101332",
     "gridstack": "^7.2.0",
     "lit": "^2.0.2"
   },
   "devDependencies": {
-    "@openremote/util": "1.2.0-snapshot.20240616202404"
+    "@openremote/util": "1.2.0-snapshot.20240819101332"
   },
   "publishConfig": {
     "access": "public"

package/src/index.ts

@@ -30,6 +30,7 @@ import {KpiWidget} from "./widgets/kpi-widget";
 import {MapWidget} from "./widgets/map-widget";
 import {AttributeInputWidget} from "./widgets/attribute-input-widget";
 import {TableWidget} from "./widgets/table-widget";
+import {GatewayWidget} from "./widgets/gateway-widget";
 
 // language=CSS
 const styling = css`
@@ -216,6 +217,7 @@ export function registerWidgetTypes() {
     widgetTypes.set("map", MapWidget.getManifest());
     widgetTypes.set("attributeinput", AttributeInputWidget.getManifest());
     widgetTypes.set("table", TableWidget.getManifest());
+    widgetTypes.set("gateway", GatewayWidget.getManifest());
 }
 
 @customElement("or-dashboard-builder")
@@ -327,9 +329,28 @@ export class OrDashboardBuilder extends LitElement {
 
         // On any update (except widget selection), check whether hasChanged should be updated.
         if(!(changedProps.size === 1 && changedProps.has('selectedWidget'))) {
-            const dashboardEqual = Util.objectsEqual(this.selectedDashboard, this.initialDashboardJSON ? JSON.parse(this.initialDashboardJSON) : undefined);
-            const templateEqual = Util.objectsEqual(this.currentTemplate, this.initialTemplateJSON ? JSON.parse(this.initialTemplateJSON) : undefined);
-            this.hasChanged = (!dashboardEqual || !templateEqual);
+
+            // Check for dashboard changes
+            const initialDashboard = this.initialDashboardJSON ? JSON.parse(this.initialDashboardJSON) : undefined;
+            const dashboardDiff = Util.difference(this.selectedDashboard, initialDashboard);
+            if(Object.keys(dashboardDiff).length > 0) {
+                this.hasChanged = true;
+                console.debug("Dashboard has detected changes! Diff:", dashboardDiff);
+            }
+
+            // Check for template changes
+            else {
+                const initialTemplate = this.initialTemplateJSON ? JSON.parse(this.initialTemplateJSON) : undefined;
+                const templateDiff = Util.difference(this.currentTemplate, initialTemplate);
+                if(Object.keys(templateDiff).length > 0) {
+                    this.hasChanged = true;
+                    console.debug("Template has detected changes! Diff:", templateDiff);
+                } else {
+
+                    // If no changes detected between dashboard nor template
+                    this.hasChanged = false;
+                }
+            }
         }
 
         // Support for realm switching
@@ -455,12 +476,16 @@ export class OrDashboardBuilder extends LitElement {
 
     selectDashboard(dashboard: Dashboard | undefined) {
         if(this.dashboards != null) {
+
+            // If switching between dashboards, check if there were changes, and reset to 'initialDashboardJSON' if needed.
             if(this.selectedDashboard && this.initialDashboardJSON) {
-                const indexOf = this.dashboards.indexOf(this.selectedDashboard);
-                if(indexOf) {
-                    this.dashboards[indexOf] = JSON.parse(this.initialDashboardJSON) as Dashboard;
+                const index = this.dashboards.indexOf(this.selectedDashboard);
+                if(index && JSON.stringify(this.selectedDashboard) !== this.initialDashboardJSON) {
+                    this.dashboards[index] = JSON.parse(this.initialDashboardJSON) as Dashboard;
                 }
             }
+
+            // Update selected dashboard
             this.selectedDashboard = (dashboard ? this.dashboards.find((x) => { return x.id == dashboard.id; }) : undefined);
             this.initialDashboardJSON = JSON.stringify(this.selectedDashboard);
             this.initialTemplateJSON = JSON.stringify(this.selectedDashboard?.template);
@@ -606,8 +631,8 @@ export class OrDashboardBuilder extends LitElement {
                         <div id="fullscreen-header">
                             <div id="fullscreen-header-wrapper">
                                 <div id="fullscreen-header-title" style="display: flex; align-items: center;">
-                                    <or-icon class="showMobile" style="margin-right: 10px;" icon="chevron-left" @click="${() => { this.selectedDashboard = undefined; }}"></or-icon>
-                                    <or-icon class="hideMobile" style="margin-right: 10px;" icon="menu" @click="${() => { this.showDashboardTree = !this.showDashboardTree; }}"></or-icon>
+                                    <or-icon class="showMobile" style="margin-right: 10px; cursor: pointer;" icon="chevron-left" @click="${() => { this.selectedDashboard = undefined; }}"></or-icon>
+                                    <or-icon class="hideMobile" style="margin-right: 10px; cursor: pointer;" icon="menu" @click="${() => { this.showDashboardTree = !this.showDashboardTree; }}"></or-icon>
                                     <span>${this.selectedDashboard?.displayName}</span>
                                 </div>
                                 <div id="fullscreen-header-actions">

package/src/or-dashboard-tree.ts

@@ -21,6 +21,11 @@ const treeStyling = css`
         flex-direction: row;
         padding-right: 5px;
     }
+    
+    #content {
+        flex: 1;
+        overflow: hidden auto;
+    }
 
     .node-container {
         align-items: center;

package/src/or-dashboard-widgetcontainer.ts

@@ -1,4 +1,3 @@
-import {i18next} from "@openremote/or-translate";
 import {html, LitElement, PropertyValues} from "lit";
 import {customElement, property, query, state} from "lit/decorators.js";
 import {when} from "lit/directives/when.js";
@@ -8,6 +7,7 @@ import {DashboardWidget} from "@openremote/model";
 import {OrWidget, WidgetManifest} from "./util/or-widget";
 import {WidgetService} from "./service/widget-service";
 import {WidgetConfig} from "./util/widget-config";
+import {Util} from "@openremote/core";
 
 /* ------------------------------------ */
 
@@ -21,6 +21,9 @@ export class OrDashboardWidgetContainer extends LitElement {
     @property()
     protected readonly widget!: DashboardWidget;
 
+    @property() // Optional property, that overrides widget.widgetConfig. Useful for view-only mode.
+    protected widgetConfig?: WidgetConfig;
+
     @property()
     protected readonly editMode!: boolean;
 
@@ -49,7 +52,7 @@ export class OrDashboardWidgetContainer extends LitElement {
         this.resizeObserver?.disconnect();
     }
 
-    shouldUpdate(changedProps: Map<PropertyKey, unknown>): boolean {
+    shouldUpdate(changedProps: PropertyValues): boolean {
         const changed = changedProps;
 
         // Update config if some values in the spec are not set.
@@ -57,7 +60,11 @@ export class OrDashboardWidgetContainer extends LitElement {
         if (this.widget) {
             const manifest = WidgetService.getManifest(this.widget.widgetTypeId!);
             if (manifest) {
-                this.widget.widgetConfig = WidgetService.correctToConfigSpec(manifest, this.widget.widgetConfig);
+                if(this.editMode) {
+                    this.widget.widgetConfig = WidgetService.correctToConfigSpec(manifest, this.widget.widgetConfig);
+                } else {
+                    this.widgetConfig = WidgetService.correctToConfigSpec(manifest, this.widget.widgetConfig);
+                }
             }
         }
 
@@ -67,7 +74,7 @@ export class OrDashboardWidgetContainer extends LitElement {
             const oldVal = changedProps.get('widget') as DashboardWidget | undefined;
             const idChanged = oldVal?.id !== this.widget?.id;
             const nameChanged = oldVal?.displayName !== this.widget?.displayName;
-            const configChanged = JSON.stringify(oldVal?.widgetConfig) !== JSON.stringify(this.widget?.widgetConfig);
+            const configChanged = !Util.objectsEqual(oldVal?.widgetConfig, this.getWidgetConfig());
             if (!(idChanged || nameChanged || configChanged)) {
                 changed.delete('widget');
             }
@@ -76,7 +83,7 @@ export class OrDashboardWidgetContainer extends LitElement {
         return (changed.size === 0 ? false : super.shouldUpdate(changedProps));
     }
 
-    willUpdate(changedProps: Map<string, any>) {
+    willUpdate(changedProps: PropertyValues) {
         super.willUpdate(changedProps);
 
         if (!this.manifest && this.widget) {
@@ -85,7 +92,7 @@ export class OrDashboardWidgetContainer extends LitElement {
 
         // Create widget
         if (changedProps.has("widget") && this.widget) {
-            this.initializeWidgetElem(this.manifest!, this.widget.widgetConfig);
+            this.initializeWidgetElem(this.manifest!, this.getWidgetConfig()!);
         }
     }
 
@@ -152,4 +159,8 @@ export class OrDashboardWidgetContainer extends LitElement {
     public refreshContent(force: boolean) {
         this.orWidget?.refreshContent(force);
     }
+
+    public getWidgetConfig(): WidgetConfig | undefined {
+        return this.widgetConfig || this.widget?.widgetConfig;
+    }
 }

package/src/service/widget-service.ts

@@ -42,7 +42,13 @@ export class WidgetService {
 
     // Method used to correct the OrWidgetConfig specification
     // So, if certain fields are removed or invalid, it will be corrected by merging the object with the default OrWidgetConfig.
+    // Will only return a different object if it actually changes. This prevents child objects being returned in a different order.
     public static correctToConfigSpec(manifest: WidgetManifest, widgetConfig: WidgetConfig) {
-        return Util.mergeObjects(manifest.getDefaultConfig(), widgetConfig, false) as WidgetConfig;
+        const newConfig = Util.mergeObjects(manifest.getDefaultConfig(), widgetConfig, false) as WidgetConfig;
+        if(Util.objectsEqual(newConfig, widgetConfig)) {
+            return widgetConfig;
+        } else {
+            return newConfig;
+        }
     }
 }

package/src/settings/gateway-settings.ts

@@ -0,0 +1,144 @@
+import { customElement } from "lit/decorators.js";
+import {WidgetSettings} from "../util/widget-settings";
+import {TemplateResult, html} from "lit";
+import { InputType, OrInputChangedEvent } from "@openremote/or-mwc-components/or-mwc-input";
+import {i18next} from "@openremote/or-translate";
+import {Asset, AssetQuery, GatewayTunnelInfoType} from "@openremote/model";
+import {GatewayWidgetConfig} from "../widgets/gateway-widget";
+import {Task} from "@lit/task";
+import manager from "@openremote/core";
+
+@customElement("gateway-settings")
+export class GatewaySettings extends WidgetSettings {
+
+    protected GATEWAY_ASSET_TYPES: string[] = ["GatewayAsset"];
+    protected GATEWAY_TUNNEL_TYPES: GatewayTunnelInfoType[] = [GatewayTunnelInfoType.HTTPS, GatewayTunnelInfoType.HTTP, GatewayTunnelInfoType.TCP];
+
+    // Override of widgetConfig with extended type
+    protected readonly widgetConfig!: GatewayWidgetConfig;
+
+    connectedCallback() {
+        super.connectedCallback();
+    }
+
+    protected render(): TemplateResult {
+        const disabled = !this.widgetConfig.gatewayId;
+        return html`
+            <div>
+                <settings-panel displayName="gatewayTunnels.settings" expanded="${true}">
+                    <div style="display: flex; flex-direction: column; gap: 8px;">
+                        <div>
+                            ${this._fetchAssetsTask.render({
+                                pending: () => html`
+                                    <or-mwc-input .type="${InputType.SELECT}" compact style="width: 100%;" disabled
+                                                  label="${i18next.t('gatewayTunnels.selectAsset')}"
+                                    ></or-mwc-input>
+                                `,
+                                complete: (gatewayAssets) => {
+                                    const options: [string, string][] = gatewayAssets.map(a => [a.id, a.name]);
+                                    const selected = gatewayAssets.find(a => a.id === this.widgetConfig.gatewayId);
+                                    const value = selected ? [selected.id, selected.name] as [string, string] : undefined;
+                                    return html`
+                                        <or-mwc-input .type="${InputType.SELECT}" compact style="width: 100%;"
+                                                      .options="${options}" .value="${value}"
+                                                      label="${i18next.t('gatewayTunnels.selectAsset')}"
+                                                      @or-mwc-input-changed="${(ev: OrInputChangedEvent) => this._onAssetSelect(ev)}"
+                                        ></or-mwc-input>
+                                    `;
+                                },
+                                error: () => html`
+                                    <or-mwc-input .type="${InputType.TEXT}" compact style="width: 100%;" disabled
+                                                  label="${i18next.t('gatewayTunnels.selectAsset')}" .value="${i18next.t('errorOccurred')}"
+                                    ></or-mwc-input>
+                                `
+                            })}
+                        </div>
+                        <div>
+                            <or-mwc-input .type="${InputType.SELECT}" compact style="width: 100%;"
+                                          .disabled="${disabled}" .options="${this.GATEWAY_TUNNEL_TYPES}" .value="${this.widgetConfig.type}"
+                                          label="${i18next.t('gatewayTunnels.protocol')}"
+                                          @or-mwc-input-changed="${(ev: OrInputChangedEvent) => this._onTunnelTypeSelect(ev)}"
+                            ></or-mwc-input>
+                        </div>
+                        <div>
+                            <or-mwc-input .type="${InputType.TEXT}" style="width: 100%;"
+                                          .disabled="${disabled}" .value="${this.widgetConfig.target}"
+                                          label="${i18next.t('gatewayTunnels.target')}"
+                                          @or-mwc-input-changed="${(ev: OrInputChangedEvent) => this._onTunnelTargetSelect(ev)}"
+                            ></or-mwc-input>
+                        </div>
+                        <div>
+                            <or-mwc-input .type="${InputType.NUMBER}" style="width: 100%;"
+                                          .disabled="${disabled}" .value="${this.widgetConfig.targetPort}"
+                                          label="${i18next.t('gatewayTunnels.targetPort')}"
+                                          @or-mwc-input-changed="${(ev: OrInputChangedEvent) => this._onTunnelTargetPortSelect(ev)}"
+                            ></or-mwc-input>
+                        </div>
+                    </div>
+                </settings-panel>
+            </div>
+        `;
+    }
+
+    protected _onAssetSelect(ev: OrInputChangedEvent): void {
+        this.widgetConfig.gatewayId = ev.detail.value;
+        this.notifyConfigUpdate();
+    }
+
+    protected _onTunnelTypeSelect(ev: OrInputChangedEvent) {
+        this.widgetConfig.type = ev.detail.value;
+        this.notifyConfigUpdate();
+    }
+
+    protected _onTunnelTargetSelect(ev: OrInputChangedEvent) {
+        this.widgetConfig.target = ev.detail.value;
+        this.notifyConfigUpdate();
+    }
+
+    protected _onTunnelTargetPortSelect(ev: OrInputChangedEvent) {
+        this.widgetConfig.targetPort = ev.detail.value;
+        this.notifyConfigUpdate();
+    }
+
+
+    protected _fetchAssetsTask = new Task(this, {
+        task: async ([], {signal}) => {
+            return await this._fetchAssets(true, signal);
+        },
+        args: () => []
+    });
+
+    protected async _fetchAssets(requireTunnelSupport = true, signal?: AbortSignal): Promise<Asset[]> {
+        const query = {
+            realm: {name: manager.displayRealm},
+            select: {attributes: ["tunnelingSupported"]},
+            types: this.GATEWAY_ASSET_TYPES,
+            attributes: requireTunnelSupport ? {
+                items: [
+                    {
+                        name: {
+                            predicateType: "string",
+                            value: "tunnelingSupported"
+                        },
+                        value: {
+                            predicateType: "boolean",
+                            value: true
+                        },
+                    },
+                    {
+                        name: {
+                            predicateType: "string",
+                            value: "gatewayStatus"
+                        },
+                        value: {
+                            predicateType: "string",
+                            value: "CONNECTED"
+                        },
+                    }
+                ]
+            } : undefined
+        } as AssetQuery;
+        return (await manager.rest.api.AssetResource.queryAssets(query)).data;
+    }
+
+}

package/src/settings/gauge-settings.ts

@@ -7,7 +7,6 @@ import {AttributesSelectEvent} from "../panels/attributes-panel";
 import {Attribute} from "@openremote/model";
 import { InputType, OrInputChangedEvent } from "@openremote/or-mwc-components/or-mwc-input";
 import {ThresholdChangeEvent} from "../panels/thresholds-panel";
-import "../panels/thresholds-panel";
 
 @customElement("gauge-settings")
 export class GaugeSettings extends WidgetSettings {
@@ -72,10 +71,27 @@ export class GaugeSettings extends WidgetSettings {
 
     protected onMinMaxValueChange(type: 'min' | 'max', ev: OrInputChangedEvent) {
         switch (type) {
-            case "max":
-                this.widgetConfig.max = ev.detail.value; break;
-            case "min":
-                this.widgetConfig.min = ev.detail.value; break;
+            case "max": {
+                this.widgetConfig.max = ev.detail.value;
+
+                // Make sure every threshold value is not higher than what is allowed.
+                const sortedThresholds = this.widgetConfig.thresholds.sort((x, y) => y[0] - x[0]);
+                sortedThresholds.forEach((t, index) => {
+                    t[0] = Math.max(Math.min(t[0], (ev.detail.value - index - 1)), this.widgetConfig.min);
+                });
+                break;
+            }
+            case "min": {
+                this.widgetConfig.min = ev.detail.value;
+
+                // Update the lowest (locked) threshold value to minimum value, and make sure every threshold value is not lower than what is allowed.
+                const sortedThresholds = this.widgetConfig.thresholds.sort((x, y) => (x[0] < y[0]) ? -1 : 1);
+                sortedThresholds[0][0] = ev.detail.value;
+                sortedThresholds.forEach((t, index) => {
+                    t[0] = Math.min(Math.max(t[0], (ev.detail.value + index)), this.widgetConfig.max);
+                })
+                break;
+            }
         }
         this.notifyConfigUpdate();
     }

package/src/settings/image-settings.ts

@@ -53,7 +53,7 @@ export class ImageSettings extends AssetWidgetSettings {
         return html`
             <div>
                 <!-- Attributes selector -->
-                <settings-panel displayName="'attributes" expanded="${true}">
+                <settings-panel displayName="attributes" expanded="${true}">
                     <attributes-panel .attributeRefs="${this.widgetConfig.attributeRefs}" onlyDataAttrs="${false}" multi="${true}"
                                       @attribute-select="${(ev: AttributesSelectEvent) => this.onAttributesSelect(ev)}"
                     ></attributes-panel>