@c8y/tutorial 1019.0.3

package/src/list/lists.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { hookNavigator, NavigatorNode } from '@c8y/ngx-components';
+
+@NgModule({
+  declarations: [],
+  imports: [],
+  providers: [
+    hookNavigator(
+      new NavigatorNode({
+        label: 'Lists',
+        icon: 'c8y-device',
+        priority: 97
+      })
+    )
+  ]
+})
+export class ListsModule {}

package/src/main.ts

@@ -0,0 +1,23 @@
+import './i18n';
+import { applyOptions, loadOptions, loginOptions } from '@c8y/bootstrap';
+
+/** Verify that custom webpack config is working */
+declare const HELLO_WORLD: string;
+console.log(`${HELLO_WORLD} from custom webpack config`);
+
+const barHolder: HTMLElement = document.querySelector('body > .init-load');
+export const removeProgress = () => barHolder && barHolder.parentNode.removeChild(barHolder);
+
+applicationSetup();
+
+async function applicationSetup() {
+  const options = await applyOptions({
+    ...(await loadOptions()),
+    ...((await loginOptions()) as object)
+  });
+
+  const mod = await import('./bootstrap');
+  const bootstrapApp = mod.bootstrap || (window as any).bootstrap || (() => null);
+
+  return Promise.resolve(bootstrapApp(options)).then(removeProgress);
+}

package/src/maps/cluster-map/cluster-map-example.component.html

@@ -0,0 +1,60 @@
+<c8y-title>Cluster map example</c8y-title>
+<div class="d-flex p-16">
+  <div class="d-flex d-col j-c-center p-16">
+    <button
+      class="btn btn-default btn-block"
+      (click)="setRandomZoomLevel()"
+    >
+      Set random zoom level
+    </button>
+    <button
+      class="btn btn-default btn-block"
+      (click)="setCenter()"
+    >
+      Set map to Düsseldorf
+    </button>
+    <button
+      class="btn btn-default btn-block"
+      (click)="changeIcon()"
+    >
+      Change icon
+    </button>
+    <button
+      class="btn btn-default btn-block"
+      (click)="changeColor()"
+    >
+      Change color
+    </button>
+    <button
+      class="btn btn-default btn-block"
+      (click)="toggleAutorefresh()"
+    >
+      Toggle auto refresh every 5s
+    </button>
+    <button
+      class="btn btn-default btn-block"
+      (click)="showClusterColor = !showClusterColor"
+    >
+      Show cluster color
+    </button>
+  </div>
+  <!-- important -->
+  <div style="height: 350px; width: 100%; position: relative;">    
+    <c8y-map-status
+      [clusterMap]="map"
+      [(config)]="config"
+    ></c8y-map-status>
+    <c8y-cluster-map
+      #map
+      [config]="config"
+      [showClusterColor]="showClusterColor"
+    ></c8y-cluster-map>
+  </div>
+  <!-- /important -->
+  <code
+    class="a-s-stretch p-16"
+    style="width: 200px"
+  >
+    <pre>{{ config | json }}  </pre>
+  </code>
+</div>

package/src/maps/cluster-map/cluster-map-example.component.ts

@@ -0,0 +1,39 @@
+import { Component } from '@angular/core';
+import { ClusterMapConfig, defaultMapConfig, MapModule } from '@c8y/ngx-components/map';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@c8y/ngx-components';
+import { AssetSelectorModule } from '@c8y/ngx-components/assets-navigator';
+
+@Component({
+  selector: 'tut-cluster-map-example',
+  templateUrl: './cluster-map-example.component.html',
+  standalone: true,
+  imports: [CommonModule, MapModule, CoreModule, AssetSelectorModule]
+})
+export class ClusterMapExampleComponent {
+  config: ClusterMapConfig = { center: defaultMapConfig.center, zoomLevel: 4 };
+  showClusterColor = false;
+
+  setRandomZoomLevel() {
+    this.config = { ...this.config, zoomLevel: Math.floor(1 + Math.random() * 11) };
+  }
+
+  setCenter() {
+    this.config = { ...this.config, center: defaultMapConfig.center };
+  }
+
+  changeIcon() {
+    this.config = { ...this.config, icon: this.config.icon ? undefined : 'map' };
+  }
+
+  changeColor() {
+    this.config = { ...this.config, color: this.config.color ? undefined : '#0f0' };
+  }
+
+  toggleAutorefresh() {
+    this.config = {
+      ...this.config,
+      refreshInterval: this.config.refreshInterval ? undefined : 5000
+    };
+  }
+}

package/src/maps/cluster-map/cluster-map-example.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  imports: [CommonModule],
+  providers: [
+    hookRoute({
+      path: 'maps/cluster',
+      loadComponent: () =>
+        import('./cluster-map-example.component').then(m => m.ClusterMapExampleComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        priority: 10,
+        path: 'maps/cluster',
+        icon: 'address',
+        label: 'Cluster map',
+        parent: 'Map examples'
+      })
+    )
+  ]
+})
+export class ClusterMapExampleModule {}

package/src/maps/cluster-map-root-node/cluster-map-root-node-example.component.html

@@ -0,0 +1,54 @@
+<c8y-title>Cluster map with root node</c8y-title>
+
+<div class="d-flex p-16">
+  <div class="d-flex d-col j-c-center p-16" style="min-width: 150px;">
+    <c8y-asset-selector
+      [(ngModel)]="rootNode"
+      [config]="{
+        groupsSelectable: true,
+        groupsOnly: false
+      }"
+      (change)="resetConfig()"
+    ></c8y-asset-selector>
+  </div>
+  <!-- important -->
+  <div style="height: 350px; width: 100%; position: relative;">
+    <c8y-map-status
+      [clusterMap]="map"
+      [(config)]="followConfig"
+    ></c8y-map-status>
+    <c8y-cluster-map
+      #map
+      [rootNode]="rootNode"
+      [config]="followConfig"
+    >
+      <div *c8yMapPopup="let context">
+        Hello World from:
+        <br />
+        {{ context.name }}
+        <button
+          class="btn btn-primary btn-small"
+          (click)="startFollow(context)"
+        >
+          Follow
+        </button>
+      </div>
+    </c8y-cluster-map>
+  </div>
+  <!-- /important -->
+  <code
+    class="a-s-stretch p-16"
+    style="width: 200px"
+  >
+    RootNode:
+    <code>
+      <pre style="max-height: 120px">{{ rootNode | json }}  </pre>
+    </code>
+    <br />
+    <br />
+    Config:
+    <code>
+      <pre style="max-height: 120px">{{ followConfig | json }}  </pre>
+    </code>
+  </code>
+</div>

package/src/maps/cluster-map-root-node/cluster-map-root-node-example.component.ts

@@ -0,0 +1,54 @@
+import { Component } from '@angular/core';
+import { ClusterMapConfig, defaultMapConfig, MapModule } from '@c8y/ngx-components/map';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@c8y/ngx-components';
+import { AssetSelectorModule } from '@c8y/ngx-components/assets-navigator';
+
+@Component({
+  selector: 'tut-cluster-map-root-node-example',
+  templateUrl: './cluster-map-root-node-example.component.html',
+  standalone: true,
+  imports: [CommonModule, MapModule, CoreModule, AssetSelectorModule]
+})
+export class ClusterMapRootNodeExampleComponent {
+  config: ClusterMapConfig = { center: defaultMapConfig.center, zoomLevel: 4 };
+  followConfig: ClusterMapConfig = { center: defaultMapConfig.center, zoomLevel: 4 };
+
+  rootNode: unknown;
+  oldRootNode: unknown;
+
+  toggleAutorefresh() {
+    this.config = {
+      ...this.config,
+      refreshInterval: this.config.refreshInterval ? undefined : 5000
+    };
+  }
+
+  startFollow(device) {
+    this.oldRootNode = this.rootNode;
+    this.rootNode = device;
+    this.followConfig = {
+      ...this.followConfig,
+      follow: true,
+      disablePan: true,
+      disableZoom: true,
+      realtime: true,
+      zoomLevel: 14
+    };
+  }
+
+  stopFollow() {
+    this.rootNode = this.oldRootNode;
+    this.resetConfig();
+  }
+
+  resetConfig() {
+    this.followConfig = {
+      ...this.followConfig,
+      follow: false,
+      disablePan: false,
+      disableZoom: false,
+      realtime: false
+    };
+  }
+}

package/src/maps/cluster-map-root-node/cluster-map-root-node-example.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  imports: [CommonModule],
+  providers: [
+    hookRoute({
+      path: 'maps/cluster-root-node',
+      loadComponent: () =>
+        import('./cluster-map-root-node-example.component').then(
+          m => m.ClusterMapRootNodeExampleComponent
+        )
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        priority: 10,
+        path: 'maps/cluster-root-node',
+        icon: 'c8y-find-map',
+        label: 'Cluster map with different root node',
+        parent: 'Map examples'
+      })
+    )
+  ]
+})
+export class ClusterMapRootNodeExampleModule {}

package/src/maps/map-examples.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { hookNavigator, NavigatorNode } from '@c8y/ngx-components';
+
+@NgModule({
+  declarations: [],
+  imports: [],
+  exports: [],
+  providers: [
+    hookNavigator(
+      new NavigatorNode({
+        priority: 20,
+        icon: 'map',
+        label: 'Map examples'
+      })
+    )
+  ]
+})
+export class MapExamplesModule {}

package/src/maps/map-popup/map-popup-example.component.html

@@ -0,0 +1,34 @@
+<c8y-title>Map with popup example</c8y-title>
+
+<div class="d-flex p-16">
+  <div class="d-flex d-col j-c-center p-16">
+    <button
+      class="btn btn-primary btn-block"
+      (click)="showFirstPopup()"
+    >
+      Show first popup
+    </button>
+    <button
+      class="btn btn-default btn-block"
+      (click)="changeDevices()"
+    >
+      Toogle device amount
+    </button>
+  </div>
+  <!-- important -->
+  <div style="height: 350px; width: 100%">
+    <c8y-map
+      [assets]="exampleDevices"
+      [config]="config"
+    >
+      <div *c8yMapPopup="let context">
+        Hello World from:
+        <br />
+        name: {{ context.name }}
+        <br />
+        id: {{ context.id }}
+      </div>
+    </c8y-map>
+  </div>
+  <!-- /important -->
+</div>

package/src/maps/map-popup/map-popup-example.component.ts

@@ -0,0 +1,43 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { MapComponent, MapModule, MapService } from '@c8y/ngx-components/map';
+import { MapConfig, PositionManagedObject } from '@c8y/ngx-components/map';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@c8y/ngx-components';
+import { AssetSelectorModule } from '@c8y/ngx-components/assets-navigator';
+
+@Component({
+  selector: 'tut-map-popup-examples',
+  templateUrl: './map-popup-example.component.html',
+  standalone: true,
+  imports: [CommonModule, MapModule, CoreModule, AssetSelectorModule]
+})
+export class MapPopupExampleComponent implements OnInit {
+  exampleDevices: PositionManagedObject | PositionManagedObject[];
+  config: MapConfig = {};
+  private oneDevice: PositionManagedObject;
+  private allDevices: PositionManagedObject[];
+
+  @ViewChild(MapComponent)
+  map: MapComponent;
+
+  constructor(private mapService: MapService) {}
+
+  async ngOnInit() {
+    const devices = await this.mapService.getPositionDevices();
+    this.oneDevice = devices[0];
+    this.allDevices = devices as PositionManagedObject[];
+    this.exampleDevices = this.oneDevice;
+  }
+
+  changeDevices() {
+    if (Array.isArray(this.exampleDevices)) {
+      this.exampleDevices = this.oneDevice;
+    } else {
+      this.exampleDevices = this.allDevices;
+    }
+  }
+
+  showFirstPopup() {
+    this.map.markers[0].fireEvent('click');
+  }
+}

package/src/maps/map-popup/map-popup-example.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  imports: [CommonModule],
+  providers: [
+    hookRoute({
+      path: 'maps/popup',
+      loadComponent: () =>
+        import('./map-popup-example.component').then(m => m.MapPopupExampleComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        priority: 20,
+        path: 'maps/popup',
+        icon: 'map-marker',
+        label: 'Map with popup',
+        parent: 'Map examples'
+      })
+    )
+  ]
+})
+export class MapPopupExampleModule {}

package/src/maps/simple-map/simple-map-example.component.html

@@ -0,0 +1,59 @@
+<c8y-title>Simple map example</c8y-title>
+
+<div class="d-flex p-16">
+  <div class="d-flex d-col j-c-center p-16">
+    <button
+      class="btn btn-default btn-block"
+      (click)="changeDevices()"
+    >
+      Toggle device amount
+    </button>
+    <button
+      class="btn btn-default btn-block"
+      (click)="setRandomZoomLevel()"
+    >
+      Set random zoom level
+    </button>
+    <button
+      class="btn btn-default btn-block"
+      (click)="setCenter()"
+    >
+      Set map to Düsseldorf
+    </button>
+    <button
+      class="btn btn-default btn-block"
+      (click)="changeIcon()"
+    >
+      Change icon
+    </button>
+    <button
+      class="btn btn-default btn-block"
+      (click)="changeColor()"
+    >
+      Change color
+    </button>
+    <button
+      class="btn btn-default btn-block"
+      (click)="toggleRealtime()"
+    >
+      {{ config.realtime ? 'Disable realtime' : 'Enable realtime' }}
+    </button>
+    <button
+      class="btn btn-default btn-block"
+      (click)="toggleFollow()"
+    >
+      {{ config.follow ? 'Unfollow' : 'Follow' }}
+    </button>
+  </div>
+  <!-- important -->
+  <div style="height: 350px; width: 100%;">
+    <c8y-map
+      [assets]="exampleDevices"
+      [config]="config"
+    ></c8y-map>
+  </div>
+  <!-- /important -->
+  <code style="width: 200px;" class="a-s-stretch p-16">
+    <pre>{{ config | json }}  </pre>
+  </code>
+</div>

package/src/maps/simple-map/simple-map-example.component.ts

@@ -0,0 +1,70 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { CoreModule } from '@c8y/ngx-components';
+import { AssetSelectorModule } from '@c8y/ngx-components/assets-navigator';
+import {
+  MapConfig,
+  MapModule,
+  MapService,
+  PositionManagedObject,
+  defaultMapConfig
+} from '@c8y/ngx-components/map';
+
+@Component({
+  selector: 'c8y-simple-map-examples',
+  templateUrl: './simple-map-example.component.html',
+  standalone: true,
+  imports: [CommonModule, MapModule, CoreModule, AssetSelectorModule]
+})
+export class SimpleMapExampleComponent implements OnInit {
+  exampleDevices: PositionManagedObject | PositionManagedObject[];
+  config: MapConfig = {};
+  private oneDevice: PositionManagedObject;
+  private allDevices: PositionManagedObject[];
+
+  constructor(private mapService: MapService) {}
+
+  async ngOnInit() {
+    const devices = await this.mapService.getPositionDevices();
+    this.oneDevice = devices[0];
+    this.allDevices = devices as PositionManagedObject[];
+    this.exampleDevices = this.oneDevice;
+  }
+
+  changeDevices() {
+    if (Array.isArray(this.exampleDevices)) {
+      this.exampleDevices = this.oneDevice;
+    } else {
+      this.exampleDevices = this.allDevices;
+    }
+  }
+
+  setRandomZoomLevel() {
+    this.config = { ...this.config, zoomLevel: Math.floor(1 + Math.random() * 11) };
+  }
+
+  setCenter() {
+    this.config = { ...this.config, center: defaultMapConfig.center };
+  }
+
+  changeIcon() {
+    this.config = { ...this.config, icon: this.config.icon ? undefined : 'map' };
+  }
+
+  changeColor() {
+    this.config = { ...this.config, color: this.config.color ? undefined : '#0f0' };
+  }
+
+  toggleRealtime() {
+    this.config = { ...this.config, realtime: !this.config.realtime };
+  }
+
+  toggleFollow() {
+    this.config = {
+      ...this.config,
+      follow: !this.config.follow,
+      disablePan: !this.config.follow,
+      disableZoom: !this.config.follow
+    };
+  }
+}

package/src/maps/simple-map/simple-map-example.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  imports: [CommonModule],
+  providers: [
+    hookRoute({
+      path: 'maps/simple',
+      loadComponent: () =>
+        import('./simple-map-example.component').then(m => m.SimpleMapExampleComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        priority: 30,
+        path: 'maps/simple',
+        icon: 'marker',
+        label: 'Simple map',
+        parent: 'Map examples'
+      })
+    )
+  ]
+})
+export class SimpleMapExampleModule {}

package/src/modal/confirm-modal/confirm-modal-example.component.ts

@@ -0,0 +1,69 @@
+import { Component, ViewChild } from '@angular/core';
+import {
+  ConfirmModalComponent,
+  CoreModule,
+  FormsModule,
+  ModalLabels,
+  ModalModule,
+  Status,
+  StatusType
+} from '@c8y/ngx-components';
+import { DeleteModalCheckboxes } from '@c8y/ngx-components/sub-assets';
+import { Subject } from 'rxjs';
+
+@Component({
+  selector: 'confirm-modal',
+  template: `<c8y-confirm-modal
+    [title]="'Delete device'"
+    [status]="status"
+    [labels]="labels"
+    #modalRef
+  >
+    <form>
+      <p class="text-wrap m-b-16">
+        {{ 'You are about to delete device. Do you want to proceed?' }}
+      </p>
+      <c8y-form-group class="m-b-0">
+        <label class="c8y-checkbox" title="{{ 'Delete devices' }}">
+          <input name="cascade" type="checkbox" [(ngModel)]="config.cascade" />
+          <span></span>
+          <span class="text-break-word">
+            {{ 'Also delete all devices inside asset and its subassets' }}
+          </span>
+        </label>
+      </c8y-form-group>
+    </form>
+  </c8y-confirm-modal>`,
+  standalone: true,
+  imports: [ModalModule, FormsModule, CoreModule]
+})
+export class ConfirmModalExampleComponent {
+  @ViewChild('modalRef', { static: false }) modalRef: ConfirmModalComponent;
+  labels: ModalLabels = { ok: 'Delete', cancel: 'Cancel' };
+  status: StatusType = Status.DANGER;
+  closeSubject: Subject<DeleteModalCheckboxes> = new Subject();
+  config: DeleteModalCheckboxes = {
+    cascade: false
+  };
+
+  async ngAfterViewInit() {
+    try {
+      await this.modalRef.result;
+      this.onClose();
+    } catch (error) {
+      this.onDismiss();
+    }
+  }
+
+  onClose() {
+    console.log('You have clicked "Delete" button the modal!');
+    this.closeSubject.next(this.config);
+    console.log('cascade is true -> you checked the checkbox', this.config);
+    this.closeSubject.complete();
+  }
+
+  onDismiss() {
+    console.log('You have clicked "Cancel" button the modal!');
+    this.closeSubject.complete();
+  }
+}

package/src/modal/confirm-modal/confirm-modal-example.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  providers: [
+    hookRoute({
+      path: 'modal/confirm-modal',
+      loadComponent: () =>
+        import('./confirm-modal-example.component').then(m => m.ConfirmModalExampleComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        label: 'Confirm Modal',
+        path: '/modal/confirm-modal',
+        icon: 'list-alt',
+        priority: 1,
+        parent: 'Modal'
+      })
+    )
+  ]
+})
+export class ConfirmModalExampleModule {}