Improved model. Added password handling (which does not work).

layered-map-widget-plugin/draw-line-creator/draw-line-creator-modal.component.html

@@ -1,21 +1,15 @@
 <c8y-modal
   title="{{ title | translate }}"
-  (onClose)="onClose($event)"
-  (onDismiss)="onDismiss($event)"
+  (onClose)="onClose()"
+  (onDismiss)="onDismiss()"
   [labels]="labels"
   [disabled]="!trackName || !coordinates.length"
   style="width: 100%"
 >
   <!-- <div class="legend form-block">Draw track by LocationUpdate events</div> -->
   <div class="form-group">
     <label for="trackName">Track name</label>
-    <input
-      id="trackName"
-      class="form-control"
-      type="string"
-      [(ngModel)]="trackName"
-      required
-    />
+    <input id="trackName" class="form-control" type="string" [(ngModel)]="trackName" required />
   </div>
   <div class="form-inline"></div>
   <div class="form-group">
@@ -49,7 +43,7 @@
     </button>
   </div>
 
-  <div class="form-group">
+  <!-- <div class="form-group">
     <div class="input-group input-group-search">
       <input
         type="text"
@@ -68,7 +62,7 @@
         </button>
       </span>
     </div>
-  </div>
+  </div> -->
 
   <div class="form-group" (resized)="onResized()" style="height: 400px">
     <div
@@ -77,7 +71,7 @@
       [leafletOptions]="options"
       (leafletMouseDown)="onMouseDown($event)"
       (leafletMouseMove)="onMouseMove($event)"
-      (leafletMouseOut)="onMouseOut($event)"
+      (leafletMouseOut)="onMouseOut()"
       (leafletMapReady)="onMapReady($event)"
       leaflet
     ></div>

layered-map-widget-plugin/layer-config/layer-list.component.ts

@@ -1,5 +1,6 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import {
+  BasicLayerConfig,
   isDeviceFragmentLayerConfig,
   isQueryLayerConfig,
   LayerConfig,
@@ -9,18 +10,18 @@ import {
   selector: 'layer-list',
 })
 export class LayerListComponent {
-  @Output() deleteLayer = new EventEmitter<LayerConfig>();
-  @Output() editLayer = new EventEmitter<LayerConfig>();
-  @Output() editPopover = new EventEmitter<LayerConfig>();
+  @Output() deleteLayer = new EventEmitter<LayerConfig<BasicLayerConfig>>();
+  @Output() editLayer = new EventEmitter<LayerConfig<BasicLayerConfig>>();
+  @Output() editPopover = new EventEmitter<LayerConfig<BasicLayerConfig>>();
 
   @Output() activeLayerChange = new EventEmitter<{
     checked: boolean;
-    config: LayerConfig;
+    config: LayerConfig<BasicLayerConfig>;
   }>();
 
-  @Input() layers: LayerConfig[];
+  @Input() layers: LayerConfig<BasicLayerConfig>[];
 
-  onUserChangedSelection(event: Event, config: LayerConfig): void {
+  onUserChangedSelection(event: Event, config: LayerConfig<BasicLayerConfig>): void {
     const checked = (<HTMLInputElement>event.currentTarget).checked;
 
     // this.activeLayerChange.emit({
@@ -30,19 +31,19 @@ export class LayerListComponent {
     config.active = checked;
   }
 
-  onEditLayer(config: LayerConfig): void {
+  onEditLayer(config: LayerConfig<BasicLayerConfig>): void {
     this.editLayer.emit(config);
   }
 
-  onEditPopover(config: LayerConfig): void {
+  onEditPopover(config: LayerConfig<BasicLayerConfig>): void {
     this.editPopover.emit(config);
   }
 
-  onDeleteLayer(config: LayerConfig): void {
+  onDeleteLayer(config: LayerConfig<BasicLayerConfig>): void {
     this.deleteLayer.emit(config);
   }
 
-  getContent(layer: LayerConfig): string {
+  getContent(layer: LayerConfig<BasicLayerConfig>): string {
     const cfg = layer.config;
 
     if (isDeviceFragmentLayerConfig(cfg)) {

layered-map-widget-plugin/layer-config/layer-modal.component.html

@@ -46,28 +46,28 @@
       >
         <option value="" selected disabled>Select a type</option>
         <option value="DeviceFragmentLayerConfig" [selected]="type === 'DeviceFragmentLayerConfig'">
-          Device-Fragment
+          {{ 'Device-Fragment' | translate }}
         </option>
         <option
           value="InventoryQueryLayerConfig"
           [selected]="type === 'QueryLayerConfig' && queryType === 'Inventory'"
         >
-          Inventory Query
+          {{ 'Inventory Query' | translate }}
         </option>
         <option
           value="AlarmQueryLayerConfig"
           [selected]="type === 'QueryLayerConfig' && queryType === 'Alarm'"
         >
-          Alarm Query
+          {{ 'Alarm Query' | translate }}
         </option>
         <option
           value="EventQueryLayerConfig"
           [selected]="type === 'QueryLayerConfig' && queryType === 'Event'"
         >
-          Event Query
+          {{ 'Event Query' | translate }}
         </option>
         <option value="WebMapServiceLayer" [selected]="type === 'WebMapServiceLayer'">
-          WebMapServiceLayer
+          {{ 'Web Map Service (WMS)' | translate }}
         </option>
       </select>
     </div>
@@ -138,10 +138,12 @@
         class="form-control"
         placeholder="http://ows.mundialis.de/services/service?"
         [(ngModel)]="layer.url"
+        (ngModelChange)="onWmsURLChange($event)"
         required
       />
     </div>
     <ul class="list-unstyled">
+      <label translate>WMS Layers</label>
       <li class="m-b-8" *ngFor="let item of layer.wmsLayers; let i = index">
         <c8y-input-group-list
           [index]="i"
@@ -159,5 +161,29 @@
         /></c8y-input-group-list>
       </li>
     </ul>
+
+    <div class="form-group">
+      <label for="username" translate>Username</label>
+      <input
+        name="username"
+        id="username"
+        type="text"
+        class="form-control"
+        [(ngModel)]="wmsCredentials.username"
+      />
+    </div>
+    <div class="form-group">
+      <label for="password" translate>Password</label>
+      <input
+        name="password"
+        id="password"
+        type="password"
+        class="form-control"
+        [(ngModel)]="wmsCredentials.password"
+      />
+    </div>
+    <button *ngIf="layer.token" class="btn btn-danger" type="button" (click)="clearAllPasswords()">
+      {{ 'Clear all passwords' | translate }}
+    </button>
   </span>
 </c8y-modal>

layered-map-widget-plugin/layer-config/layer-modal.component.ts

@@ -1,16 +1,18 @@
 import { Component } from '@angular/core';
-import { ModalLabels } from '@c8y/ngx-components';
+import { ModalLabels, ModalService, Status } from '@c8y/ngx-components';
 import { IconSelectorService } from '@c8y/ngx-components/icon-selector';
 import { BsModalRef } from 'ngx-bootstrap/modal';
 import { Subject } from 'rxjs';
 import {
+  BasicLayerConfig,
   DeviceFragmentLayerConfig,
   isDeviceFragmentLayerConfig,
   isQueryLayerConfig,
   isWebMapServiceLayerConfig,
   QueryLayerConfig,
   WebMapServiceLayerConfig,
 } from '../layered-map-widget.model';
+import { TenantOptionCredentialsService } from '../../layered-map-widget-plugin/service/tenant-option-credentials.service';
 
 @Component({ templateUrl: './layer-modal.component.html' })
 export class LayerModalComponent {
@@ -27,9 +29,16 @@ export class LayerModalComponent {
   type: 'DeviceFragmentLayerConfig' | 'QueryLayerConfig' | 'Unset' | 'WebMapServiceLayer' = 'Unset';
   queryType: 'Alarm' | 'Inventory' | 'Event';
 
-  constructor(public bsModalRef: BsModalRef, private iconSelector: IconSelectorService) {}
+  protected wmsCredentials = { username: '', password: '' };
 
-  setLayer(layer: DeviceFragmentLayerConfig | QueryLayerConfig | WebMapServiceLayerConfig) {
+  constructor(
+    public bsModalRef: BsModalRef,
+    private iconSelector: IconSelectorService,
+    private modal: ModalService,
+    private tenantOptionCredentials: TenantOptionCredentialsService
+  ) {}
+
+  setLayer(layer: BasicLayerConfig) {
     this.layer = layer;
     this.title = 'Edit layer';
     this.labels = { ok: 'Update', cancel: 'Cancel' };
@@ -40,6 +49,11 @@ export class LayerModalComponent {
       this.queryType = layer.type;
     } else if (isWebMapServiceLayerConfig(layer)) {
       this.type = 'WebMapServiceLayer';
+      if (layer.token) {
+        this.tenantOptionCredentials.getCredentials(layer.token).then((creds) => {
+          this.wmsCredentials = creds;
+        });
+      }
     }
   }
 
@@ -98,6 +112,21 @@ export class LayerModalComponent {
     }
   }
 
+  onWmsURLChange(url?: string) {
+    if (url?.length > 0) {
+      const params = new URLSearchParams(decodeURI(url));
+      if (params.has('layers')) {
+        const layers = params.get('layers')?.split(',');
+        const existingLayers = (<WebMapServiceLayerConfig>this.layer).wmsLayers;
+        for (const layer of layers) {
+          if (!existingLayers.find((l) => l.name === layer)) {
+            existingLayers.push({ name: layer });
+          }
+        }
+      }
+    }
+  }
+
   addWMSLayer() {
     (<WebMapServiceLayerConfig>this.layer).wmsLayers.push({ name: '' });
   }
@@ -106,6 +135,20 @@ export class LayerModalComponent {
     (<WebMapServiceLayerConfig>this.layer).wmsLayers.splice(index, 1);
   }
 
+  clearAllPasswords() {
+    this.modal
+      .confirm('Clear passwords', 'Are you sure you want to clear all passwords?', Status.DANGER)
+      .then((result) => {
+        if (result) this.onClearPasswordsConfirmation();
+      });
+  }
+
+  private onClearPasswordsConfirmation() {
+    this.tenantOptionCredentials.clearAllCredentials();
+    this.wmsCredentials = { username: '', password: '' };
+    delete (<WebMapServiceLayerConfig>this.layer).token;
+  }
+
   // - MODAL section
 
   // called if cancel is pressed
@@ -115,6 +158,21 @@ export class LayerModalComponent {
 
   // called if save is pressed
   onClose(): void {
-    this.closeSubject.next(this.layer as any);
+    if (
+      this.type === 'WebMapServiceLayer' &&
+      this.wmsCredentials.username.length &&
+      this.wmsCredentials.password.length
+    ) {
+      const creds = {
+        username: this.wmsCredentials.username,
+        password: this.wmsCredentials.password,
+      };
+      this.tenantOptionCredentials.saveCredentials(creds).then((token) => {
+        (<WebMapServiceLayerConfig>this.layer).token = token;
+        this.closeSubject.next(this.layer as any);
+      });
+    } else {
+      this.closeSubject.next(this.layer as any);
+    }
   }
 }

layered-map-widget-plugin/layered-map-widget-config.component.html

@@ -7,22 +7,17 @@
     {{ 'General' | translate }}
   </div>
 
-  <div class="form-inline">
-    <div class="form-group">
+  <div class="form-group">
+    <label class="c8y-switch" title="{{ 'Toggle location update polling' | translate }}">
+      <input type="checkbox" [(ngModel)]="config.positionPolling.enabled" name="positionPolling" />
+      <span></span>
       <span>{{ 'Toggle location update polling' | translate }}</span>
-      <label class="c8y-switch" title="{{ 'Toggle location update polling' | translate }}">
-        <input
-          type="checkbox"
-          [(ngModel)]="config.positionPolling.enabled"
-          name="positionPolling"
-          (change)="togglePositionPolling()"
-        />
-        <span></span>
-      </label>
-    </div>
+    </label>
+  </div>
 
-    <div class="form-group">
-      <label for="intervalSlider">Interval in seconds</label>
+  <div class="form-group">
+    <label for="intervalSlider">Interval in seconds</label>
+    <div class="input-group">
       <input
         id="intervalSlider"
         type="range"
@@ -32,7 +27,9 @@
         [(ngModel)]="config.positionPolling.interval"
         [disabled]="!config.positionPolling.enabled"
       />
-      <span>{{ config.positionPolling.interval }} {{ 'seconds' | translate }}</span>
+      <span class="m-l-24 m-t-4" style="min-width: fit-content"
+        >{{ config.positionPolling.interval }} {{ 'seconds' | translate }}</span
+      >
     </div>
   </div>