@openremote/manager 1.8.0-snapshot.20250725120000 → 1.8.0-snapshot.20250725123024

package/lib/pages/page-gateway-tunnel.js

@@ -37,60 +37,60 @@ export function pageGatewayTunnelProvider(store) {
         }
     };
 }
-const styling = css `
-    #wrapper {
-        height: 100%;
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-    }
-
-    #title {
-        padding: 0 20px;
-        font-size: 18px;
-        font-weight: bold;
-        width: calc(100% - 40px);
-        max-width: 1360px;
-        margin: 20px auto;
-        align-items: center;
-        display: flex;
-        color: var(--or-app-color3, ${unsafeCSS(DefaultColor3)});
-    }
-
-    #title > or-icon {
-        margin-right: 10px;
-        margin-left: 14px;
-    }
-
-    .panel {
-        flex: 0;
-        width: 100%;
-        box-sizing: border-box;
-        max-width: 1360px;
-        background-color: white;
-        border: 1px solid #e5e5e5;
-        border-radius: 5px;
-        position: relative;
-        margin: 0 auto 10px;
-        padding: 12px 24px 24px;
-        display: flex;
-        flex-direction: column;
-    }
-
-    .panel-title {
-        display: flex;
-        text-transform: uppercase;
-        font-weight: bolder;
-        color: var(--or-app-color3, ${unsafeCSS(DefaultColor3)});
-        line-height: 1em;
-        margin-bottom: 10px;
-        margin-top: 0;
-        flex: 0 0 auto;
-        letter-spacing: 0.025em;
-        align-items: center;
-        min-height: 36px;
-    }
-
+const styling = css `
+    #wrapper {
+        height: 100%;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+
+    #title {
+        padding: 0 20px;
+        font-size: 18px;
+        font-weight: bold;
+        width: calc(100% - 40px);
+        max-width: 1360px;
+        margin: 20px auto;
+        align-items: center;
+        display: flex;
+        color: var(--or-app-color3, ${unsafeCSS(DefaultColor3)});
+    }
+
+    #title > or-icon {
+        margin-right: 10px;
+        margin-left: 14px;
+    }
+
+    .panel {
+        flex: 0;
+        width: 100%;
+        box-sizing: border-box;
+        max-width: 1360px;
+        background-color: white;
+        border: 1px solid #e5e5e5;
+        border-radius: 5px;
+        position: relative;
+        margin: 0 auto 10px;
+        padding: 12px 24px 24px;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .panel-title {
+        display: flex;
+        text-transform: uppercase;
+        font-weight: bolder;
+        color: var(--or-app-color3, ${unsafeCSS(DefaultColor3)});
+        line-height: 1em;
+        margin-bottom: 10px;
+        margin-top: 0;
+        flex: 0 0 auto;
+        letter-spacing: 0.025em;
+        align-items: center;
+        min-height: 36px;
+    }
+
 `;
 let PageGatewayTunnel = class PageGatewayTunnel extends Page {
     constructor() {
@@ -130,27 +130,27 @@ let PageGatewayTunnel = class PageGatewayTunnel extends Page {
         this._realm = state.app.realm || manager.displayRealm;
     }
     render() {
-        return html `
-            <div id="wrapper">
-                <div id="title">
-                    <or-icon icon="lan-connect"></or-icon>
-                    ${i18next.t("gatewayTunnel")}
-                </div>
-                <div class="panel">
-                    <div class="panel-title" style="justify-content: space-between;">
-                        <or-translate value="tunnels"></or-translate>
-                        <or-mwc-input style="margin: 0;" type="${InputType.BUTTON}" icon="plus"
-                                      label="${i18next.t('add')} ${i18next.t("tunnel")}"
-                                      @or-mwc-input-changed="${(ev) => this._onAddTunnelClick(ev)}"
-                        ></or-mwc-input>
-                    </div>
+        return html `
+            <div id="wrapper">
+                <div id="title">
+                    <or-icon icon="lan-connect"></or-icon>
+                    ${i18next.t("gatewayTunnel")}
+                </div>
+                <div class="panel">
+                    <div class="panel-title" style="justify-content: space-between;">
+                        <or-translate value="tunnels"></or-translate>
+                        <or-mwc-input style="margin: 0;" type="${InputType.BUTTON}" icon="plus"
+                                      label="${i18next.t('add')} ${i18next.t("tunnel")}"
+                                      @or-mwc-input-changed="${(ev) => this._onAddTunnelClick(ev)}"
+                        ></or-mwc-input>
+                    </div>
                     ${this._fetchTunnelsTask.render({
             pending: () => html `${i18next.t('loading')}`,
             complete: (tunnels) => until(this.getTunnelsTable(tunnels), html `${i18next.t('loading')}`),
             error: () => html `${i18next.t('errorOccurred')}`
-        })}
-                </div>
-            </div>
+        })}
+                </div>
+            </div>
         `;
     }
     /**
@@ -183,10 +183,10 @@ let PageGatewayTunnel = class PageGatewayTunnel extends Page {
                 ],
                 clickable: false,
             }))) || [];
-            return html `
-            <or-mwc-table .columns="${columns}" .rows="${rows}">
-
-            </or-mwc-table>
+            return html `
+            <or-mwc-table .columns="${columns}" .rows="${rows}">
+
+            </or-mwc-table>
         `;
         });
     }
@@ -198,10 +198,10 @@ let PageGatewayTunnel = class PageGatewayTunnel extends Page {
             const onClick = () => {
                 router.navigate(getAssetsRoute(false, tunnel.gatewayId));
             };
-            return html `
-            <div style="height: 100%; display: flex; align-items: center;">
-                <span style="cursor: pointer;" @click="${() => onClick()}">${tunnel.gatewayId}</span>
-            </div>
+            return html `
+            <div style="height: 100%; display: flex; align-items: center;">
+                <span style="cursor: pointer;" @click="${() => onClick()}">${tunnel.gatewayId}</span>
+            </div>
         `;
         });
     }
@@ -210,15 +210,15 @@ let PageGatewayTunnel = class PageGatewayTunnel extends Page {
      */
     _getTunnelActionsTemplate(tunnel) {
         return __awaiter(this, void 0, void 0, function* () {
-            return html `
-            <div style="display: flex; justify-content: end; align-items: center; gap: 12px;">
-                <or-mwc-input .type="${InputType.BUTTON}" icon="stop" @or-mwc-input-changed="${(ev) => this._onStopTunnelClick(ev, tunnel)}"></or-mwc-input>
-                ${when(tunnel.type === "TCP" /* GatewayTunnelInfoType.TCP */, () => html `
-                    <or-mwc-input .type="${InputType.BUTTON}" outlined label="${i18next.t('gatewayTunnels.copyAddress')}" @or-mwc-input-changed="${(ev) => this._onCopyTunnelAddressClick(ev, tunnel)}"></or-mwc-input>
-                `, () => html `
-                    <or-mwc-input .type="${InputType.BUTTON}" outlined label="${i18next.t('gatewayTunnels.open')}" @or-mwc-input-changed="${(ev) => this._onOpenTunnelClick(ev, tunnel)}"></or-mwc-input>
-                `)}
-            </div>
+            return html `
+            <div style="display: flex; justify-content: end; align-items: center; gap: 12px;">
+                <or-mwc-input .type="${InputType.BUTTON}" icon="stop" @or-mwc-input-changed="${(ev) => this._onStopTunnelClick(ev, tunnel)}"></or-mwc-input>
+                ${when(tunnel.type === "TCP" /* GatewayTunnelInfoType.TCP */, () => html `
+                    <or-mwc-input .type="${InputType.BUTTON}" outlined label="${i18next.t('gatewayTunnels.copyAddress')}" @or-mwc-input-changed="${(ev) => this._onCopyTunnelAddressClick(ev, tunnel)}"></or-mwc-input>
+                `, () => html `
+                    <or-mwc-input .type="${InputType.BUTTON}" outlined label="${i18next.t('gatewayTunnels.open')}" @or-mwc-input-changed="${(ev) => this._onOpenTunnelClick(ev, tunnel)}"></or-mwc-input>
+                `)}
+            </div>
         `;
         });
     }
@@ -296,40 +296,40 @@ let PageGatewayTunnel = class PageGatewayTunnel extends Page {
         const gatewayListTemplate = () => __awaiter(this, void 0, void 0, function* () {
             const gatewayAssets = yield this._fetchGatewayAssets();
             const items = gatewayAssets.map((g) => [g.id, g.name]);
-            return html `
-                <div style="display: flex; flex-direction: column; gap: 20px; width: 360px;">
-                    <or-mwc-input .type="${InputType.SELECT}" .options="${items}" .value="${tunnel.gatewayId}" label="${i18next.t('gatewayTunnels.selectAsset')}" style="width: 100%;"
+            return html `
+                <div style="display: flex; flex-direction: column; gap: 20px; width: 360px;">
+                    <or-mwc-input .type="${InputType.SELECT}" .options="${items}" .value="${tunnel.gatewayId}" label="${i18next.t('gatewayTunnels.selectAsset')}" style="width: 100%;"
                                   @or-mwc-input-changed="${(ev) => {
                 tunnel.gatewayId = ev.detail.value;
                 updateActions();
-            }}"
-                    ></or-mwc-input>
-                    <or-mwc-input .type="${InputType.SELECT}" label="${i18next.t('gatewayTunnels.protocol')}" .value="${tunnel.type}" .options="${this.GATEWAY_TUNNEL_PROTOCOL_TYPES}"
-                                  style="width: 100%"
+            }}"
+                    ></or-mwc-input>
+                    <or-mwc-input .type="${InputType.SELECT}" label="${i18next.t('gatewayTunnels.protocol')}" .value="${tunnel.type}" .options="${this.GATEWAY_TUNNEL_PROTOCOL_TYPES}"
+                                  style="width: 100%"
                                   @or-mwc-input-changed="${(ev) => {
                 tunnel.type = ev.detail.value;
                 updateActions();
-            }}"
-                    ></or-mwc-input>
-                    <or-mwc-input .type="${InputType.TEXT}" label="${i18next.t('host')}" .value="${tunnel.target}" style="width: 100%;"
+            }}"
+                    ></or-mwc-input>
+                    <or-mwc-input .type="${InputType.TEXT}" label="${i18next.t('host')}" .value="${tunnel.target}" style="width: 100%;"
                                   @or-mwc-input-changed="${(ev) => {
                 tunnel.target = ev.detail.value;
                 updateActions();
-            }}"
-                    ></or-mwc-input>
-                    <or-mwc-input .type="${InputType.NUMBER}" label="${i18next.t('port')}" .value="${tunnel.targetPort}" style="width: 100%"
+            }}"
+                    ></or-mwc-input>
+                    <or-mwc-input .type="${InputType.NUMBER}" label="${i18next.t('port')}" .value="${tunnel.targetPort}" style="width: 100%"
                                   @or-mwc-input-changed="${(ev) => {
                 tunnel.targetPort = ev.detail.value;
                 updateActions();
-            }}"
-                    ></or-mwc-input>
-                </div>
+            }}"
+                    ></or-mwc-input>
+                </div>
             `;
         });
         dialog = new OrMwcDialog()
             .setHeading(`${i18next.t("add")} ${i18next.t("tunnel")}`)
-            .setContent(html `
-                ${until(gatewayListTemplate(), html `${i18next.t("loading")}`)}
+            .setContent(html `
+                ${until(gatewayListTemplate(), html `${i18next.t("loading")}`)}
             `);
         updateActions();
         showDialog(dialog);