@c8y/tutorial 1019.6.10 → 1019.7.10

package/src/breadcrumbs/content-projection/breadcrumbs-content-projection-example.module.ts

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  imports: [CommonModule],
+  providers: [
+    hookRoute({
+      path: 'breadcrumbs-content-projection',
+      loadComponent: () =>
+        import('./breadcrumbs-content-projection-example.component').then(
+          m => m.BreadcrumbsContentProjectionExampleComponents
+        )
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        path: 'breadcrumbs-content-projection',
+        icon: 'notification',
+        label: 'Breadcrumbs content projection',
+        parent: 'Breadcrumbs'
+      })
+    )
+  ]
+})
+export class BreadcrumbsContentProjectionExampleModule {}

package/src/breadcrumbs/expand-example/breadcrumbs-expand-example.component.html

@@ -0,0 +1,30 @@
+<c8y-title>Breadcrumb</c8y-title>
+
+<div class="card">
+  <!-- important -->
+
+  <c8y-breadcrumb>
+    <c8y-breadcrumb-item
+      [icon]="'cog'"
+      [label]="'Group A'"
+    ></c8y-breadcrumb-item>
+  </c8y-breadcrumb>
+
+  <c8y-breadcrumb>
+    <c8y-breadcrumb-item
+      [icon]="'cog'"
+      [label]="'Group B'"
+    ></c8y-breadcrumb-item>
+  </c8y-breadcrumb>
+  <!-- /important -->
+
+  <div
+    class="card-block"
+    style="height: 70px"
+  >
+    <c8y-breadcrumb-outlet
+      class="app-breadcrumbs"
+      [breadcrumbs]="breadcrumbService.items$ | async"
+    ></c8y-breadcrumb-outlet>
+  </div>
+</div>

package/src/breadcrumbs/expand-example/breadcrumbs-expand-example.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BreadcrumbService, CoreModule } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'tut-breadcrumbs-expand-example',
+  templateUrl: './breadcrumbs-expand-example.component.html',
+  standalone: true,
+  imports: [CommonModule, CoreModule]
+})
+export class BreadcrumbsExpandExampleComponents {
+  constructor(public breadcrumbService: BreadcrumbService) {}
+}

package/src/breadcrumbs/expand-example/breadcrumbs-expand-example.module.ts

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  imports: [CommonModule],
+  providers: [
+    hookRoute({
+      path: 'breadcrumbs-expand',
+      loadComponent: () =>
+        import('./breadcrumbs-expand-example.component').then(
+          m => m.BreadcrumbsExpandExampleComponents
+        )
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        path: 'breadcrumbs-expand',
+        icon: 'notification',
+        label: 'Breadcrumbs expand',
+        parent: 'Breadcrumbs'
+      })
+    )
+  ]
+})
+export class BreadcrumbsExpandExampleModule {}

package/src/breadcrumbs/index.ts

@@ -0,0 +1,5 @@
+export * from './basic-example/breadcrumbs-example.module';
+export * from './expand-example/breadcrumbs-expand-example.module';
+export * from './outlet/breadcrumbs-outlet-example.module';
+export * from './content-projection/breadcrumbs-content-projection-example.module';
+export * from './breadcrumbs.module';

package/src/breadcrumbs/outlet/breadcrumbs-outlet-example.component.html

@@ -0,0 +1,21 @@
+<c8y-title>Breadcrumb outlet</c8y-title>
+
+<div class="card">
+  <c8y-breadcrumb>
+    <c8y-breadcrumb-item
+      [icon]="'cog'"
+      [label]="'Group A'"
+    ></c8y-breadcrumb-item>
+  </c8y-breadcrumb>
+
+
+  <div class="card-block">
+  <!-- important -->
+
+    <c8y-breadcrumb-outlet
+      class="app-breadcrumbs"
+      [breadcrumbs]="breadcrumbService.items$ | async"
+    ></c8y-breadcrumb-outlet>
+  <!-- /important -->
+  </div>
+</div>

package/src/breadcrumbs/outlet/breadcrumbs-outlet-example.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BreadcrumbService, CoreModule } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'tut-breadcrumbs-outlet-example',
+  templateUrl: './breadcrumbs-outlet-example.component.html',
+  standalone: true,
+  imports: [CommonModule, CoreModule]
+})
+export class BreadcrumbsOutletExampleComponent {
+  constructor(public breadcrumbService: BreadcrumbService) {}
+}

package/src/breadcrumbs/outlet/breadcrumbs-outlet-example.module.ts

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  imports: [CommonModule],
+  providers: [
+    hookRoute({
+      path: 'breadcrumbs-outlet',
+      loadComponent: () =>
+        import('./breadcrumbs-outlet-example.component').then(
+          m => m.BreadcrumbsOutletExampleComponent
+        )
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        path: 'breadcrumbs-outlet',
+        icon: 'notification',
+        label: 'Breadcrumbs outlet',
+        parent: 'Breadcrumbs'
+      })
+    )
+  ]
+})
+export class BreadcrumbsOutletExampleModule {}

package/src/device-connection-status/device-connection-status-example.component.html

@@ -0,0 +1,145 @@
+<c8y-title>Device connection status</c8y-title>
+<div class="container-fluid p-t-16">
+  <c8y-list-group class="no-border-last">
+    <c8y-li>
+      <div class="content-flex-50">
+        <div class="col-4 text-medium">Connection status</div>
+        <div class="col-3 text-medium">
+          Size
+          <code>20</code>
+          <small class="text-muted"><em>(default)</em></small>
+        </div>
+        <div class="col-3 text-medium">
+          Size
+          <code>32</code>
+        </div>
+        <div class="col-2 text-medium">
+          Size
+          <code>64</code>
+        </div>
+      </div>
+    </c8y-li>
+    <c8y-li>
+      <div class="content-flex-50">
+        <div class="col-4">
+          <span>Send connection: available</span>
+          <br />
+          <span>Push connection: active</span>
+        </div>
+        <div class="col-3 a-s-center">
+          <!-- important -->
+          <c8y-device-status [mo]="connectedAndAvailableDeviceExample"></c8y-device-status>
+          <!-- /important -->
+        </div>
+        <div class="col-3">
+          <!-- important -->
+          <c8y-device-status
+            [size]="32"
+            [mo]="connectedAndAvailableDeviceExample"
+          ></c8y-device-status>
+          <!-- /important -->
+        </div>
+        <div class="col-2">
+          <!-- important -->
+          <c8y-device-status
+            [size]="64"
+            [mo]="connectedAndAvailableDeviceExample"
+          ></c8y-device-status>
+          <!-- /important -->
+        </div>
+      </div>
+    </c8y-li>
+    <c8y-li>
+      <div class="content-flex-50">
+        <div class="col-4">
+          <span>Send connection: available</span>
+          <br />
+          <span>Push connection: inactive</span>
+        </div>
+        <div class="col-3 a-s-center">
+          <c8y-device-status [mo]="disconnectedAndAvailableExample"></c8y-device-status>
+        </div>
+        <div class="col-3">
+          <c8y-device-status
+            [size]="32"
+            [mo]="disconnectedAndAvailableExample"
+          ></c8y-device-status>
+        </div>
+        <div class="col-2">
+          <c8y-device-status
+            [size]="64"
+            [mo]="disconnectedAndAvailableExample"
+          ></c8y-device-status>
+        </div>
+      </div>
+    </c8y-li>
+    <c8y-li>
+      <div class="content-flex-50">
+        <div class="col-4">
+          <span>Send connection: unavailable</span>
+          <br />
+          <span>Push connection: inactive</span>
+        </div>
+        <div class="col-3 a-s-center">
+          <c8y-device-status [mo]="disconnectedAndUnavailableDeviceExample"></c8y-device-status>
+        </div>
+        <div class="col-3">
+          <c8y-device-status
+            [size]="32"
+            [mo]="disconnectedAndUnavailableDeviceExample"
+          ></c8y-device-status>
+        </div>
+        <div class="col-2">
+          <c8y-device-status
+            [size]="64"
+            [mo]="disconnectedAndUnavailableDeviceExample"
+          ></c8y-device-status>
+        </div>
+      </div>
+    </c8y-li>
+    <c8y-li>
+      <div class="content-flex-50">
+        <div class="col-4">
+          <span>Send connection: not monitored</span>
+          <br />
+          <span>Push connection: inactive</span>
+        </div>
+        <div class="col-3 a-s-center">
+          <c8y-device-status [mo]="notMonitoredDeviceExample"></c8y-device-status>
+        </div>
+        <div class="col-3">
+          <c8y-device-status
+            [size]="32"
+            [mo]="notMonitoredDeviceExample"
+          ></c8y-device-status>
+        </div>
+        <div class="col-2">
+          <c8y-device-status
+            [size]="64"
+            [mo]="notMonitoredDeviceExample"
+          ></c8y-device-status>
+        </div>
+      </div>
+    </c8y-li>
+    <c8y-li>
+      <div class="content-flex-50">
+        <div class="col-4">Maintenance</div>
+        <div class="col-3 a-s-center">
+          <c8y-device-status [mo]="inMaintenanceDeviceExample"></c8y-device-status>
+        </div>
+        <div class="col-3">
+          <c8y-device-status
+            [size]="32"
+            [mo]="inMaintenanceDeviceExample"
+          ></c8y-device-status>
+        </div>
+        <div class="col-2">
+          <c8y-device-status
+            [size]="64"
+            [mo]="inMaintenanceDeviceExample"
+          ></c8y-device-status>
+        </div>
+      </div>
+    </c8y-li>
+  </c8y-list-group>
+</div>

package/src/device-connection-status/device-connection-status-example.component.ts

@@ -0,0 +1,61 @@
+import { Component } from '@angular/core';
+import { CoreModule, DeviceStatusModule } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'tut-device-connection-status-example',
+  templateUrl: `./device-connection-status-example.component.html`,
+  standalone: true,
+  imports: [CoreModule, DeviceStatusModule]
+})
+export class DeviceConnectionStatusExampleComponent {
+  private readonly CONNECTED_AND_AVAILABLE_DEVICE_EXAMPLE = {
+    c8y_RequiredAvailability: {},
+    c8y_Availability: {
+      lastMessage: '2024-01-01T00:00:00.000Z',
+      status: 'AVAILABLE'
+    },
+    c8y_Connection: {
+      status: 'CONNECTED'
+    }
+  };
+
+  private readonly DISCONNECTED_AND_AVAILABLE_DEVICE_EXAMPLE = {
+    c8y_RequiredAvailability: {},
+    c8y_Availability: {
+      lastMessage: '2024-01-01T00:00:00.000Z',
+      status: 'AVAILABLE'
+    },
+    c8y_Connection: {
+      status: 'DISCONNECTED'
+    }
+  };
+
+  private readonly DISCONNECTED_AND_UNAVAILABLE_DEVICE_EXAMPLE = {
+    c8y_RequiredAvailability: {},
+    c8y_Availability: {
+      lastMessage: '2024-01-01T00:00:00.000Z',
+      status: 'UNAVAILABLE'
+    },
+    c8y_Connection: {
+      status: 'DISCONNECTED'
+    }
+  };
+
+  private readonly NOT_MONITORED_DEVICE_EXAMPLE = {
+    c8y_RequiredAvailability: {}
+  };
+
+  private readonly IN_MAINTENANCE_DEVICE_EXAMPLE = {
+    c8y_RequiredAvailability: {},
+    c8y_Availability: {
+      status: 'MAINTENANCE'
+    },
+    c8y_Connection: {}
+  };
+
+  connectedAndAvailableDeviceExample = this.CONNECTED_AND_AVAILABLE_DEVICE_EXAMPLE;
+  disconnectedAndAvailableExample = this.DISCONNECTED_AND_AVAILABLE_DEVICE_EXAMPLE;
+  disconnectedAndUnavailableDeviceExample = this.DISCONNECTED_AND_UNAVAILABLE_DEVICE_EXAMPLE;
+  notMonitoredDeviceExample = this.NOT_MONITORED_DEVICE_EXAMPLE;
+  inMaintenanceDeviceExample = this.IN_MAINTENANCE_DEVICE_EXAMPLE;
+}

package/src/device-connection-status/device-connection-status-example.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  providers: [
+    hookRoute({
+      path: 'device-connection-status',
+      loadComponent: () =>
+        import('./device-connection-status-example.component').then(
+          m => m.DeviceConnectionStatusExampleComponent
+        )
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        path: '/device-connection-status',
+        label: 'Device connection status',
+        icon: 'realtime',
+        priority: 15
+      })
+    )
+  ]
+})
+export class DeviceConnectionStatusExampleModule {}

package/src/hooks/action/logout-action/logout-action.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+// eslint-disable-next-line
 import { CoreModule, LoginService } from '@c8y/ngx-components';
 
 @Component({
@@ -10,9 +11,12 @@ import { CoreModule, LoginService } from '@c8y/ngx-components';
   imports: [CoreModule]
 })
 export class LogoutActionComponent {
-  constructor(private loginService: LoginService) {}
+  // Uncomment to see the effect.
+  // constructor(private loginService: LoginService) {}
 
   logout() {
-    this.loginService.logout();
+    console.log('Logout action triggered!');
+    // Uncomment to see the effect.
+    // this.loginService.logout();
   }
 }

package/src/hooks/breadcrumbs/basic-view/basic-view.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { CoreModule } from '@c8y/ngx-components';
+import { BreadcrumbService, CoreModule } from '@c8y/ngx-components';
 
 /**
  * This is a standard angular component.
@@ -15,4 +15,6 @@ export class BasicViewComponent {
   /**
    * Your content of the Basic View goes in here!
    */
+
+  constructor(public breadcrumbService: BreadcrumbService) {}
 }

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

@@ -1,69 +1,58 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component } from '@angular/core';
 import {
-  ConfirmModalComponent,
   CoreModule,
   FormsModule,
-  ModalLabels,
+  gettext,
   ModalModule,
-  Status,
-  StatusType
+  ModalService,
+  Status
 } from '@c8y/ngx-components';
-import { DeleteModalCheckboxes } from '@c8y/ngx-components/sub-assets';
-import { Subject } from 'rxjs';
+import { BsModalService } from 'ngx-bootstrap/modal';
+import { DeleteModalExampleComponent } from './delete-modal-example.component';
 
 @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>`,
+  selector: 'tut-confirm-modal',
+  template: `<div class="p-t-24">
+    <c8y-title>Confirm modal example</c8y-title>
+    <div class="p-b-24 text-center">
+      <button class="btn btn-default" (click)="deleteConfigurationSnapshot()">
+        Confirm modal using <code>ModalService.confirm</code>
+      </button>
+    </div>
+    <div class="p-b-24 text-center">
+      <button class="btn btn-default" (click)="deleteDevice()">
+        Confirm modal using <code>c8y-confirm-modal</code> component
+      </button>
+    </div>
+  </div>`,
   standalone: true,
-  imports: [ModalModule, FormsModule, CoreModule]
+  imports: [ModalModule, FormsModule, CoreModule, DeleteModalExampleComponent]
 })
 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
-  };
+  constructor(
+    private bsModalService: BsModalService,
+    private modalService: ModalService
+  ) {}
 
-  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();
+  deleteDevice() {
+    this.bsModalService.show(DeleteModalExampleComponent);
   }
 
-  onDismiss() {
-    console.log('You have clicked "Cancel" button the modal!');
-    this.closeSubject.complete();
+  async deleteConfigurationSnapshot() {
+    try {
+      await this.modalService.confirm(
+        'Delete configuration snapshot',
+        'You are about to delete the configuration snapshot DeviceA.',
+        Status.DANGER,
+        {
+          ok: gettext('Delete')
+        }
+      );
+      // eslint-disable-next-line no-console
+      console.log('Delete clicked');
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.log('Cancel clicked');
+    }
   }
 }

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

@@ -0,0 +1,73 @@
+import { AfterViewInit, Component, EventEmitter, Output, 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: 'tut-delete-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 DeleteModalExampleComponent implements AfterViewInit {
+  @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
+  };
+
+  @Output() hideModal = new EventEmitter();
+
+  async ngAfterViewInit() {
+    try {
+      await this.modalRef.result;
+      this.onClose();
+    } catch (error) {
+      this.onDismiss();
+    }
+  }
+
+  onClose() {
+    // eslint-disable-next-line no-console
+    console.log('You have clicked the "Delete" button!');
+    // eslint-disable-next-line no-console
+    console.log('Config value:', this.config);
+    this.hideModal.emit();
+  }
+
+  onDismiss() {
+    // eslint-disable-next-line no-console
+    console.log('You have clicked "Cancel" button the modal!');
+    this.hideModal.emit();
+  }
+}