@c8y/tutorial 1019.0.3

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

@@ -0,0 +1,34 @@
+import { Component, TemplateRef } from '@angular/core';
+import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
+
+@Component({
+  selector: 'ngx-modal-example',
+  template: `<button class="btn btn-primary" type="button" (click)="openModal(template)">
+      Create template modal
+    </button>
+
+    <ng-template #template>
+      <div class="modal-header">
+        <h4 class="modal-title pull-left">Modal</h4>
+        <button
+          class="btn-close close pull-right"
+          aria-label="Close"
+          type="button"
+          (click)="modalRef?.hide()"
+        >
+          <span class="visually-hidden" aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">This is a modal.</div>
+    </ng-template>`,
+  standalone: true,
+  imports: []
+})
+export class NgxModalExampleComponent {
+  modalRef?: BsModalRef;
+  constructor(private modalService: BsModalService) {}
+
+  openModal(template: TemplateRef<any>) {
+    this.modalRef = this.modalService.show(template);
+  }
+}

package/src/modal/ngx-modal/ngx-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/ngx-modal',
+      loadComponent: () =>
+        import('./ngx-modal-example.component').then(m => m.NgxModalExampleComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        label: 'Ngx modal',
+        path: '/modal/ngx-modal',
+        icon: 'list-alt',
+        priority: 10,
+        parent: 'Modal'
+      })
+    )
+  ]
+})
+export class NgxModalExampleModule {}

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

@@ -0,0 +1,34 @@
+import { Component } from '@angular/core';
+import { ModalLabels, ModalModule } from '@c8y/ngx-components';
+import { Subject } from 'rxjs';
+
+@Component({
+  selector: 'modal-example',
+  template: `
+    <c8y-modal
+      title="CustomTitle"
+      (onClose)="onClose($event)"
+      (onDismiss)="onDismiss($event)"
+      [labels]="labels"
+      [disabled]="true"
+    >
+      <!--! will disable ok button -->
+      <span>I am body of modal</span>
+      <span>For simple string use body="string"</span>
+    </c8y-modal>
+  `,
+  standalone: true,
+  imports: [ModalModule]
+})
+export class ModalExampleComponent {
+  closeSubject: Subject<boolean> = new Subject();
+  labels: ModalLabels = { ok: 'customOK', cancel: 'customCancel' };
+
+  onDismiss(event) {
+    this.closeSubject.next(!event);
+  }
+
+  onClose(event) {
+    this.closeSubject.next(event);
+  }
+}

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

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

package/src/polyfills.ts

@@ -0,0 +1,33 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ */
+
+(window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+// (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+(window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove', 'message'];
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js/dist/zone'; // Included with Angular CLI.

package/src/popconfirm/pop-confirm-example.component.ts

@@ -0,0 +1,61 @@
+import { Component } from '@angular/core';
+import {
+  CommonModule,
+  gettext,
+  HeaderModule,
+  ModalModule,
+  PopoverConfirmButtons,
+  PopoverConfirmComponent
+} from '@c8y/ngx-components';
+
+@Component({
+  selector: 'pop-confirm-example',
+  template: `<c8y-title>Popover confirm</c8y-title>
+    <div class="p-24">
+      <button
+        class="btn btn-dot btn-dot--danger m-l-auto"
+        title="{{ 'Delete' | translate }}"
+        type="button"
+        (click)="triggerPopover(poConfirm)"
+      >
+        <c8y-popover-confirm
+          [title]="'Delete item' | translate"
+          [placement]="'right'"
+          [outsideClick]="true"
+          #poConfirm
+        ></c8y-popover-confirm>
+        <i c8yIcon="minus-circle"></i>
+      </button>
+    </div>`,
+  standalone: true,
+  imports: [ModalModule, CommonModule, HeaderModule]
+})
+export class PopConfirmExampleComponent {
+  // you can provide custom buttons
+  confirmRemoveColumnButtons: PopoverConfirmButtons[] = [
+    {
+      label: gettext('Cancel'),
+      action: () => Promise.resolve(false)
+    },
+    {
+      label: gettext('Delete'),
+      status: 'danger',
+      action: () => Promise.resolve(true)
+    }
+  ];
+
+  async triggerPopover(poConfirm: PopoverConfirmComponent): Promise<void> {
+    // to set the message
+    poConfirm.message = gettext('This action is irreversible.');
+    try {
+      const remove = await poConfirm.show(this.confirmRemoveColumnButtons);
+      if (!remove) {
+        console.log('You clicked "Cancel"!');
+        return;
+      }
+      console.log('You successfully deleted the item!');
+    } catch (e) {
+      // do nothing or display "deletion failed" message
+    }
+  }
+}

package/src/popconfirm/pop-confirm-example.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  imports: [CommonModule],
+  providers: [
+    hookRoute({
+      path: 'popconfirm',
+      loadComponent: () =>
+        import('./pop-confirm-example.component').then(m => m.PopConfirmExampleComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        path: '/popconfirm',
+        label: 'Pop confirm',
+        icon: 'hand-o-right',
+        priority: 80
+      })
+    )
+  ]
+})
+export class PopConfirmExampleModule {}

package/src/properties-list/properties-list-example.component.ts

@@ -0,0 +1,49 @@
+import { Component } from '@angular/core';
+import { CoreModule, gettext, PropertiesListItem } from '@c8y/ngx-components';
+import { IManifest } from '@c8y/client';
+// import { packageProperties } from '@c8y/ngx-components/ecosystem/shared';
+
+@Component({
+  selector: 'properties-list-example',
+  template: `
+    <c8y-properties-list
+      [title]="'Application properties'"
+      [data]="archiveManifest"
+      [emptyLabel]="'--'"
+      [properties]="packageVersionProperties"
+    >
+    </c8y-properties-list>
+  `,
+  standalone: true,
+  imports: [CoreModule]
+})
+export class PropertiesListExampleComponent {
+  archiveManifest: Partial<IManifest> = {
+    author: 'Cumulocity IoT',
+    version: '10.20.0.0',
+    requiredPlatformVersion: '10.18.0.0',
+    homepage: 'https://cumulocity.com/guides/web/overview/'
+  };
+  // Optionally you can use predefined package properties.
+  // readonly packageVersionProperties: PropertiesListItem[] = packageProperties;
+  readonly packageVersionProperties: PropertiesListItem[] = [
+    {
+      label: gettext('Version'),
+      key: 'version'
+    },
+    {
+      label: gettext('Author'),
+      key: 'author'
+    },
+    {
+      label: gettext('Required platform version'),
+      key: 'requiredPlatformVersion'
+    },
+    {
+      label: gettext('Homepage'),
+      key: 'homepage',
+      type: 'link',
+      action: (e, link: string) => window.open(link, '_blank', 'noopener,noreferrer')
+    }
+  ];
+}

package/src/properties-list/properties-list-example.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  providers: [
+    hookRoute({
+      path: 'properties-list',
+      loadComponent: () =>
+        import('./properties-list-example.component').then(m => m.PropertiesListExampleComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        label: 'Properties list',
+        path: '/properties-list',
+        icon: 'th-list',
+        priority: 0
+      })
+    )
+  ]
+})
+export class PropertiesListExampleModule {}

package/src/provider-configuration/index.ts

@@ -0,0 +1,3 @@
+export * from './provider-configuration-example/demo-provider.guard';
+export * from './introduction-example/introduction.component';
+export * from './introduction-example/introduction.module';

package/src/provider-configuration/introduction-example/introduction.component.ts

@@ -0,0 +1,69 @@
+import { Component } from '@angular/core';
+import { CoreModule } from '@c8y/ngx-components';
+import { PopoverModule } from 'ngx-bootstrap/popover';
+
+@Component({
+  selector: 'c8y-introduction',
+  template: `<c8y-title>Provider configuration</c8y-title>
+    <div class="card">
+      <div class="card-header separator">
+        <h4 class="card-title">Introduction</h4>
+      </div>
+      <div class="card-block">
+        <p>
+          This sample demonstrates how you can utilize the
+          <code>ProviderConfigurationModule</code> to compose your own configuration UI.
+        </p>
+        <p>
+          To configure the
+          <strong
+            ><a href="#provider-configuration/provider-configuration-example"
+              >Demo provider</a
+            ></strong
+          >
+          in the next section you first need to define the URLs for your
+          <code>definitions</code> and <code>configuration</code> endpoints. To do this you need to
+          provide the URLs in the configuration object passed to the <code>config</code> method of
+          the <code>ProviderConfigurationModule</code> in the <code>imports</code> array of
+          <code>provider-configuration/provider-configuration.module.ts</code>:
+        </p>
+        <br />
+        <pre><code [innerHTML]="sampleConfig"></code></pre>
+        <p>
+          Once you have configured the endpoints you can proceed to the
+          <strong
+            ><a href="#provider-configuration/provider-configuration-example"
+              >Demo provider</a
+            ></strong
+          >
+          section. In the <strong>Demo provider</strong> (you can additionally configure custom
+          labels and messages for your UI) dropdown you will see the list of providers returned by
+          your <code>definitions</code> endpoint. After you select a provider a form will be shown
+          displaying the fields configured in the JSON Schema for the provider. If there is an
+          existing configuration for the selected provider, it will be displayed. The form provides
+          options to create, update and delete provider configurations. Currently only one active
+          configuration is supported.
+        </p>
+      </div>
+    </div>`,
+  standalone: true,
+  imports: [PopoverModule, CoreModule]
+})
+export class IntroductionComponent {
+  sampleConfig = `ProviderConfigurationModule.config([
+  {
+    navigation: { ... },
+    layout: { ... },
+    endpoint: {
+      definitionsEndpoint: {
+        baseUrl: 'service/demo/providers', // replace with your provider definitions base URL part
+        listUrl: 'definitions' // replace with your provider definitions list URL part
+      },
+      configurationEndpoint: {
+        baseUrl: 'service/demo/providers', // replace with your provider configuration base URL part
+        listUrl: 'configuration' // replace with your provider configuration list URL part
+      }
+    }
+  }
+])`;
+}

package/src/provider-configuration/introduction-example/introduction.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  providers: [
+    hookRoute({
+      path: 'provider-configuration/introduction-example',
+      loadComponent: () => import('./introduction.component').then(m => m.IntroductionComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        label: 'Introduction',
+        path: '/provider-configuration/introduction-example',
+        icon: 'list-alt',
+        priority: 3,
+        parent: 'Provider configuration'
+      })
+    )
+  ]
+})
+export class IntroductionModule {}

package/src/provider-configuration/provider-configuration-example/demo-provider.guard.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot } from '@angular/router';
+
+@Injectable({ providedIn: 'root' })
+export class DemoProviderGuard implements CanActivate {
+  canActivate(_route: ActivatedRouteSnapshot, _state: RouterStateSnapshot): Promise<boolean> {
+    return Promise.resolve(true);
+  }
+}

package/src/provider-configuration/provider-configuration-example/provider-configuration.module.ts

@@ -0,0 +1,48 @@
+import { NgModule } from '@angular/core';
+import { ProviderConfigurationModule } from '@c8y/ngx-components';
+import { DemoProviderGuard } from './demo-provider.guard';
+
+@NgModule({
+  // important
+  imports: [
+    ProviderConfigurationModule.config([
+      {
+        navigation: {
+          label: 'Demo provider',
+          path: 'provider-configuration/provider-configuration-example',
+          icon: 'bell-o',
+          parent: 'Provider configuration',
+          priority: 2,
+          canActivate: [DemoProviderGuard]
+        },
+        layout: {
+          pageTitle: 'Demo provider',
+          cardTitle: 'Credentials',
+          description:
+            'You can provide your own text here, e.g. to explain the user what this provider does. If the dropdown below contains no providers you may have not configured your endpoints properly. Check in the Introduction section for a more detailed explanation on how to configure the module properly.',
+          providerName: 'Demo provider',
+          providerNamePlaceholder: 'Select or type to filter providers',
+          providerNameNoMatchesHint: 'Select one of the existing providers.',
+          deleteBtnLabel: 'Delete',
+          saveBtnLabel: 'Save',
+          configurationUpdatedSuccessMsg: 'Credentials updated.',
+          deleteConfigurationModalTitle: 'Delete credentials',
+          deleteConfigurationModalBody: `You are about to delete provider credentials. Do you want to proceed?`,
+          deleteConfigurationModalOkBtnLabel: 'Delete',
+          configurationDeletedSuccessMsg: 'Credentials deleted.'
+        },
+        endpoint: {
+          definitionsEndpoint: {
+            baseUrl: 'service/demo/providers', // replace with your provider definitions base URL part
+            listUrl: 'definitions' // replace with your provider definitions list URL part
+          },
+          configurationEndpoint: {
+            baseUrl: 'service/demo/providers', // replace with your provider configuration base URL part
+            listUrl: 'configuration' // replace with your provider configuration list URL part
+          }
+        }
+      }
+    ])
+  ]
+})
+export class ProviderConfigurationTutorialModule {}

package/src/quick-link/quick-link-example.component.ts

@@ -0,0 +1,39 @@
+import { Component } from '@angular/core';
+import { CoreModule, DocLink, DocsService, gettext, QuickLinkModule } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'quick-link-example',
+  template: `<c8y-title>Quick link</c8y-title>
+    <button
+      class="btn-clean card text-pre-normal"
+      *ngFor="let link of quickLinks"
+      (click)="link.click ? link.click() : false"
+      c8yProductExperience
+      [actionName]="'welcomeWidgetClicked'"
+      [actionData]="{ link: link.label }"
+    >
+      <c8y-quick-link [icon]="link.icon" [label]="link.label"></c8y-quick-link>
+    </button>`,
+  standalone: true,
+  imports: [QuickLinkModule, CoreModule]
+})
+export class QuickLinkExampleComponent {
+  quickLinks = [];
+
+  constructor(private docs: DocsService) {
+    this.createQuicklinkUserGuide();
+  }
+
+  private createQuicklinkUserGuide() {
+    const userGuide: Partial<DocLink> = {
+      icon: 'c8y-user',
+      label: gettext('User documentation'),
+      url: '/docs/section/getting_started',
+      click: () => {
+        const userGuideURL = this.docs.getUserGuideLink(userGuide.url) as string;
+        window.open(userGuideURL);
+      }
+    };
+    this.quickLinks.push(userGuide);
+  }
+}

package/src/quick-link/quick-link-example.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  imports: [CommonModule],
+  providers: [
+    hookRoute({
+      path: 'quick-link',
+      loadComponent: () =>
+        import('./quick-link-example.component').then(m => m.QuickLinkExampleComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        path: '/quick-link',
+        label: 'Quick link',
+        icon: 'c8y-css',
+        priority: 85
+      })
+    )
+  ]
+})
+export class QuickLinkExampleModule {}

package/src/realtime/index.ts

@@ -0,0 +1 @@
+export * from './realtime-tutorial.module';

package/src/realtime/realtime-tutorial.component.html

@@ -0,0 +1,52 @@
+<c8y-title>Realtime</c8y-title>
+
+<c8y-action-bar-item itemClass="navbar-form" placement="right">
+  <div class="form-group">
+    <label for="bufferSizeOptions" translate>Maximum buffer size of notifications</label>
+    <div class="c8y-select-wrapper">
+      <select
+        id="bufferSizeOptions"
+        class="form-control"
+        [(ngModel)]="bufferSize"
+      >
+        <option [ngValue]="option" *ngFor="let option of bufferSizeOptions">{{ option }} Items</option>
+      </select>
+    </div>
+  </div>
+</c8y-action-bar-item>
+
+<div class="card">
+  <div class="card-block">
+    <ul>
+      <li *ngFor="let service of services">
+        <c8y-realtime-btn [service]="service.instance" [title]="'Toggle ' + service.className" [label]="service.className"></c8y-realtime-btn>
+      </li>
+    </ul>
+    <p>
+      Below you can find the latest {{ bufferSize }} notifications received from your tenant.
+    </p>
+  </div>
+</div>
+
+<ng-container *ngIf="(allAPIsRealtime$ | async) as notificationBuffer; else waiting">
+  <ng-container *ngIf="notificationBuffer.length; else waiting">
+    <div class="card" *ngFor="let realtimeItem of notificationBuffer; let i = index">
+      <div class="card-header separator">
+        <h4 class="card-title">{{ i + 1 }}. RealtimeMessage in buffer</h4>
+      </div>
+      <div class="card-block">
+        <pre><code>{{ realtimeItem | json }}</code></pre>
+      </div>
+    </div>
+  </ng-container>
+</ng-container>
+
+<ng-template #waiting>
+  <div class="card">
+    <div class="card-header separator">
+      <h4 class="card-title"><i c8yIcon="spinner" class="icon-spin"></i> Waiting for the first notification to be received.</h4>
+    </div>
+  </div>
+</ng-template>
+
+

package/src/realtime/realtime-tutorial.component.ts

@@ -0,0 +1,91 @@
+import { CommonModule } from '@angular/common';
+import { Component, inject } from '@angular/core';
+import {
+  AlarmRealtimeService,
+  CoreModule,
+  EventRealtimeService,
+  ManagedObjectRealtimeService,
+  MeasurementRealtimeService,
+  OperationBulkRealtimeService,
+  OperationRealtimeService,
+  RealtimeMessage
+} from '@c8y/ngx-components';
+import { Observable, merge } from 'rxjs';
+import { map, scan } from 'rxjs/operators';
+
+@Component({
+  selector: 'cmp-realtime-tutorial',
+  templateUrl: './realtime-tutorial.component.html',
+  providers: [
+    ManagedObjectRealtimeService,
+    OperationRealtimeService,
+    OperationBulkRealtimeService,
+    MeasurementRealtimeService,
+    AlarmRealtimeService,
+    EventRealtimeService
+  ],
+  standalone: true,
+  imports: [CommonModule, CoreModule]
+})
+export class RealtimeTutorialComponent {
+  allAPIsRealtime$: ReturnType<RealtimeTutorialComponent['setupAllAPIsRealtime$']>;
+  services: ReturnType<RealtimeTutorialComponent['setupServices']>;
+  bufferSize = 10;
+  bufferSizeOptions = [1, 5, 10, 25, 50, 100];
+
+  constructor() {
+    this.services = this.setupServices();
+    this.allAPIsRealtime$ = this.setupAllAPIsRealtime$();
+
+    // disable every service except the first one
+    this.services.forEach((service, index) => {
+      if (index) {
+        service.instance.stop();
+      }
+    });
+  }
+
+  private setupAllAPIsRealtime$(): Observable<RealtimeMessage<any>[]> {
+    /**
+     * Always subscribing for all realtime notifications might generate a lot of traffic/load.
+     * For that reason try to provide your entityId where ever it is possible in your production code.
+     */
+    const observables = this.services.map(service => service.instance.onAll$());
+    return merge(...observables).pipe(
+      scan((acc, val) => {
+        acc.push(val);
+        return acc.slice(this.bufferSize * -1);
+      }, []),
+      map(messages => [...messages].reverse())
+    );
+  }
+
+  private setupServices() {
+    return [
+      {
+        className: 'ManagedObjectRealtimeService',
+        instance: inject(ManagedObjectRealtimeService)
+      },
+      {
+        className: 'OperationRealtimeService',
+        instance: inject(OperationRealtimeService)
+      },
+      {
+        className: 'OperationBulkRealtimeService',
+        instance: inject(OperationBulkRealtimeService)
+      },
+      {
+        className: 'MeasurementRealtimeService',
+        instance: inject(MeasurementRealtimeService)
+      },
+      {
+        className: 'AlarmRealtimeService',
+        instance: inject(AlarmRealtimeService)
+      },
+      {
+        className: 'EventRealtimeService',
+        instance: inject(EventRealtimeService)
+      }
+    ];
+  }
+}