@c8y/tutorial 1019.0.3

package/src/widget/demo-widget.module.ts

@@ -0,0 +1,47 @@
+import { NgModule } from '@angular/core';
+import { CommonModule as C8yCommonModule, FormsModule, hookComponent } from '@c8y/ngx-components';
+import { AssetSelectorModule } from '@c8y/ngx-components/assets-navigator';
+import { ContextWidgetConfig } from '@c8y/ngx-components/context-dashboard';
+import { WidgetConfigDemo } from './demo-widget-config.component';
+import { WidgetDemo } from './demo-widget.component';
+
+/**
+ * This demo widget provides an example on how
+ * to use the hookComponent. The component itself
+ * is implemented in the dashboard on the
+ * ../hello/hello.component.html by using the
+ * dynamic-component tag.
+ */
+@NgModule({
+  declarations: [WidgetDemo, WidgetConfigDemo],
+  imports: [FormsModule, AssetSelectorModule, C8yCommonModule],
+  exports: [],
+  providers: [
+    hookComponent({
+      id: 'angular.widget.demo',
+      label: 'My angular widget',
+      description: 'This is a description from  angular',
+      component: WidgetDemo,
+      configComponent: WidgetConfigDemo,
+
+      /** new Angular-Dashboard definition */
+      data: {
+        // The settings object can be used to configure the configComponent
+        settings: {
+          noNewWidgets: false, // Set this to true, to don't allow adding new widgets.
+          ng1: {
+            options: {
+              noDeviceTarget: false, // Set this to true to hide the AngularJS device selector.
+              groupsSelectable: false // Set this, if not only devices should be selectable.
+            }
+          }
+        },
+        // Settings that are attached to the display component (in this case: WidgetDemo)
+        displaySettings: {
+          globalTimeContext: true // Set this to true, to add a global time context binding
+        }
+      } as ContextWidgetConfig
+    })
+  ]
+})
+export class DashboardWidgetDemoModule {}

package/src/widget/index.ts

@@ -0,0 +1 @@
+export * from './demo-widget.module';

package/src/widget-resolvers/alternative-event.resolver.ts

@@ -0,0 +1,21 @@
+import { Injectable } from '@angular/core';
+import { EventService } from '@c8y/client';
+import { IEvent } from '@c8y/client';
+import { DynamicBulkIIdentifiedResolver, DynamicResolverService } from '@c8y/ngx-components';
+
+/**
+ * An short alternative to the DynamicEventResolver class using the abstract class DynamicBulkIIdentifiedResolver.
+ */
+@Injectable({ providedIn: 'root' })
+export class SimpleDynamicEventResolver extends DynamicBulkIIdentifiedResolver<
+  IEvent & { id: string | number }
+> {
+  protected typeForErrorMessage = 'event';
+
+  constructor(
+    protected dynamicResolver: DynamicResolverService,
+    protected events: EventService
+  ) {
+    super(dynamicResolver, events as any);
+  }
+}

package/src/widget-resolvers/event-property.resolver.ts

@@ -0,0 +1,52 @@
+import { Injectable } from '@angular/core';
+import { IManagedObject } from '@c8y/client';
+import {
+  DynamicComponentAlert,
+  DynamicDetailsResolver,
+  DynamicManagedObjectResolver
+} from '@c8y/ngx-components';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+/**
+ * A DynamicDetailsResolver responsible to resolve configured datapoints for dynamic components.
+ * This service implements bulk resolving and uses the DynamicManagedObjectResolver in the background.
+ * It will retrieve the latest version of a properties library entry.
+ */
+@Injectable({ providedIn: 'root' })
+export class PropertiesLibraryResolver implements DynamicDetailsResolver<IManagedObject> {
+  constructor(protected moResolver: DynamicManagedObjectResolver) {}
+
+  resolve(
+    config: any,
+    attribute: string,
+    bulkRequestId: number
+  ):
+    | IManagedObject
+    | Promise<IManagedObject>
+    | Observable<IManagedObject | DynamicComponentAlert<IManagedObject>> {
+    const storedProperty: IManagedObject = config[attribute];
+    if (!storedProperty) {
+      return;
+    }
+
+    this.moResolver.addIdsToBeLoaded(bulkRequestId, storedProperty.id);
+    return this.moResolver
+      .getResult$(bulkRequestId)
+      .pipe(
+        map(
+          ({ result: updatedMos, errors }) =>
+            updatedMos.find(updatedMo => updatedMo.id === storedProperty.id) ||
+            this.moResolver.buildRetrievalAlert(storedProperty, errors)
+        )
+      );
+  }
+
+  serialize(config: any, attribute: string) {
+    if (!config[attribute]) {
+      return;
+    }
+    const { name, id } = config[attribute];
+    return { name, id };
+  }
+}

package/src/widget-resolvers/event.resolver.ts

@@ -0,0 +1,100 @@
+import { Injectable } from '@angular/core';
+import { EventService } from '@c8y/client';
+import { IEvent } from '@c8y/client';
+import {
+  DynamicComponentAlert,
+  DynamicDetailsResolver,
+  DynamicResolverService
+} from '@c8y/ngx-components';
+import { uniq } from 'lodash';
+import { Observable } from 'rxjs';
+import { filter, map, mergeMap, share, take, tap } from 'rxjs/operators';
+
+/**
+ * A DynamicDetailsResolver responsible to resolve a configured event for dynamic components.
+ * This service implements bulk resolving. We are sadly not able to query multiple events by
+ * id at the same time, so we have to perform a request per id.
+ * Still we are able to reduce the number of requests, since events with the same id in one
+ * bulk will only be loaded once.
+ * The SimpleDynamicEventResolver could be used as an alternative.
+ */
+@Injectable({ providedIn: 'root' })
+export class DynamicEventResolver implements DynamicDetailsResolver<IEvent> {
+  protected eventIds = new Map<number, string[]>();
+  protected bulkResolve: Observable<{ result: IEvent[]; bulkRequestId: number }>;
+
+  constructor(
+    protected dynamicResolver: DynamicResolverService,
+    protected events: EventService
+  ) {
+    this.bulkResolve = this.dynamicResolver.bulkResolvingTrigger$.pipe(
+      map(bulkRequestId => ({
+        uniqIds: uniq(this.eventIds.get(bulkRequestId) || []),
+        bulkRequestId
+      })),
+      tap(({ bulkRequestId }) => this.eventIds.delete(bulkRequestId)),
+      mergeMap(({ uniqIds, bulkRequestId }) => this.loadEvents(uniqIds, bulkRequestId)),
+      share()
+    );
+  }
+
+  resolve(
+    config: any,
+    attribute: string,
+    bulkRequestId: number
+  ): IEvent | Promise<IEvent> | Observable<IEvent | DynamicComponentAlert<IEvent>> {
+    const storedEvent: IEvent = config[attribute];
+    if (!storedEvent) {
+      return;
+    }
+
+    this.addEventId(bulkRequestId, `${storedEvent.id}`);
+
+    return this.bulkResolve.pipe(
+      filter(({ bulkRequestId: requestId }) => bulkRequestId === requestId),
+      take(1),
+      map(
+        ({ result: updatedEvents }) =>
+          updatedEvents.find(updatedEvent => updatedEvent.id === storedEvent.id) ||
+          new DynamicComponentAlert({
+            text: `Unable to retrieve Event "${storedEvent.text}" (${storedEvent.id})`,
+            type: 'danger',
+            unresolvedData: storedEvent
+          })
+      )
+    );
+  }
+
+  serialize(config: any, attribute: string) {
+    if (!config[attribute]) {
+      return;
+    }
+    const { text, id } = config[attribute];
+    return { text, id };
+  }
+
+  protected addEventId(bulkRequestId: number, eventId: string) {
+    let eventIdsOfRequest = this.eventIds.get(bulkRequestId);
+    if (!eventIdsOfRequest) {
+      eventIdsOfRequest = [];
+      this.eventIds.set(bulkRequestId, eventIdsOfRequest);
+    }
+    eventIdsOfRequest.push(eventId);
+  }
+
+  protected async loadEvents(eventIds: string[], bulkRequestId: number) {
+    const promises = eventIds.map(eventId => this.loadSingleEvent(eventId));
+    const result = await Promise.all(promises);
+    const filteredResult = result.filter(event => !!event);
+    return { result: filteredResult, bulkRequestId };
+  }
+
+  protected async loadSingleEvent(eventId: string) {
+    try {
+      const { data: event } = await this.events.detail(eventId);
+      return event;
+    } catch {
+      return;
+    }
+  }
+}

package/src/widget-resolvers/index.ts

@@ -0,0 +1 @@
+export * from './widget-resolvers.module';

package/src/widget-resolvers/widget-resolvers-config/widget-resolvers-config.component.html

@@ -0,0 +1,31 @@
+<div class="form-group">
+  <c8y-form-group>
+    <label>Event</label>
+    <div class="c8y-select-wrapper">
+      <select
+        class="form-control"
+        [ngModel]="config.event?.id"
+        (ngModelChange)="onEventSelect($event)"
+        [required]="true"
+        name="event"
+      >
+        <option [value]="event.id" *ngFor="let event of events">{{ event.text }}</option>
+      </select>
+    </div>
+  </c8y-form-group>
+</div>
+
+<div class="form-group">
+  <label>Property</label>
+  <div class="c8y-select-wrapper">
+    <select
+      class="form-control"
+      [ngModel]="config.property?.id"
+      (ngModelChange)="onPropertySelect($event)"
+      [required]="true"
+      name="property"
+    >
+      <option [value]="property.id" *ngFor="let property of properties">{{ property.name }}</option>
+    </select>
+  </div>
+</div>

package/src/widget-resolvers/widget-resolvers-config/widget-resolvers-config.component.ts

@@ -0,0 +1,67 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { ControlContainer, NgForm } from '@angular/forms';
+import { EventService, IEvent, IManagedObject, InventoryService } from '@c8y/client';
+import {
+  DynamicComponent,
+  DynamicComponentAlert,
+  DynamicComponentAlertAggregator
+} from '@c8y/ngx-components';
+
+@Component({
+  selector: 'app-widget-resolvers-config',
+  templateUrl: './widget-resolvers-config.component.html',
+  viewProviders: [{ provide: ControlContainer, useExisting: NgForm }]
+})
+export class WidgetResolversConfigComponent implements OnInit, DynamicComponent {
+  events: IEvent[];
+  properties: IManagedObject[];
+
+  @Input() config: any;
+  alerts: DynamicComponentAlertAggregator;
+
+  constructor(
+    private eventsService: EventService,
+    private inventory: InventoryService
+  ) {}
+
+  ngOnInit() {
+    if (!this.config.event) {
+      this.config.event = {};
+    }
+    this.loadData();
+  }
+
+  async loadData() {
+    const [events, properties] = await Promise.all([
+      this.eventsService.list({ pageSize: 20 }),
+      this.inventory.list({ type: 'c8y_JsonSchema', pageSize: 100 })
+    ]);
+    this.events = events.data;
+    if (this.config?.event && !(this.config?.event instanceof DynamicComponentAlert)) {
+      const configuredEventPresent = this.events.find(event => event.id === this.config?.event.id);
+      if (!configuredEventPresent) {
+        this.events.push(this.config?.event);
+      }
+    }
+    this.properties = properties.data;
+    if (this.config?.property && !(this.config?.property instanceof DynamicComponentAlert)) {
+      const configuredPropertyPresent = this.properties.find(
+        property => property.id === this.config?.property.id
+      );
+      if (!configuredPropertyPresent) {
+        this.properties.push(this.config?.property);
+      }
+    }
+  }
+
+  onEventSelect(eventId: string) {
+    const event = this.events.find(tmp => tmp.id === eventId);
+    this.config.event = event;
+    this.config.source = { id: event.source.id, name: event.source.name };
+  }
+
+  onPropertySelect(propertyId: string) {
+    const property = this.properties.find(tmp => tmp.id === propertyId);
+    this.config.property = property;
+  }
+}

package/src/widget-resolvers/widget-resolvers.component.html

@@ -0,0 +1,13 @@
+<div class="m-8">
+  <div class="form-group">
+    <label>Event text</label>
+    <input type="text" class="form-control" [ngModel]="config?.event?.text" readonly disabled>
+  </div>
+  <div class="form-group">
+    <label>{{ label }}</label>
+    <input type="text" class="form-control" [ngModel]="value" readonly disabled>
+  </div>
+
+  <label>Config</label>
+  <pre><code>{{ config | json }}</code></pre>
+</div>

package/src/widget-resolvers/widget-resolvers.component.ts

@@ -0,0 +1,37 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { IEvent, IManagedObject } from '@c8y/client';
+import { DynamicComponentAlertAggregator, DynamicComponent } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'app-widget-resolvers',
+  templateUrl: './widget-resolvers.component.html'
+})
+export class WidgetResolversComponent implements OnInit, DynamicComponent {
+  @Input() config: any;
+  label: string;
+  value: string;
+  alerts: DynamicComponentAlertAggregator;
+
+  ngOnInit() {
+    const event: IEvent = this.config.event;
+    const source: IManagedObject = this.config.source;
+    const property: IManagedObject = this.config.property;
+    const propertyKey = Object.keys(property.c8y_JsonSchema.properties)[0];
+    const propertyValue = property.c8y_JsonSchema.properties[propertyKey];
+    const propertyTitle = propertyValue.title;
+    this.label = propertyTitle;
+    if (property.appliesTo?.EVENTS) {
+      this.setValue(event[propertyKey]);
+    } else {
+      this.setValue(source[propertyKey]);
+    }
+  }
+
+  private setValue(value: any) {
+    if (typeof value === 'string') {
+      this.value = value;
+    } else {
+      this.value = JSON.stringify(value);
+    }
+  }
+}

package/src/widget-resolvers/widget-resolvers.module.ts

@@ -0,0 +1,50 @@
+import { NgModule } from '@angular/core';
+import { WidgetResolversComponent } from './widget-resolvers.component';
+import {
+  CommonModule,
+  DynamicComponentErrorStrategy,
+  DynamicManagedObjectResolver,
+  FormsModule,
+  hookComponent
+} from '@c8y/ngx-components';
+import { WidgetResolversConfigComponent } from './widget-resolvers-config/widget-resolvers-config.component';
+import { DynamicEventResolver } from './event.resolver';
+import { SimpleDynamicEventResolver } from './alternative-event.resolver';
+import { PropertiesLibraryResolver } from './event-property.resolver';
+import { ContextWidgetConfig } from '@c8y/ngx-components/context-dashboard';
+
+@NgModule({
+  imports: [CommonModule, FormsModule],
+  declarations: [WidgetResolversComponent, WidgetResolversConfigComponent],
+  providers: [
+    hookComponent({
+      component: WidgetResolversComponent,
+      configComponent: WidgetResolversConfigComponent,
+      id: 'widget-resolvers',
+      label: 'Demo Resolver Widget',
+      description: 'Widget demonstrating resolvers.',
+      resolve: {
+        source: DynamicManagedObjectResolver,
+        event: DynamicEventResolver || SimpleDynamicEventResolver,
+        property: PropertiesLibraryResolver
+      },
+      errorStrategy: DynamicComponentErrorStrategy.OVERLAY_ERROR,
+      data: {
+        settings: {
+          noNewWidgets: false,
+          widgetDefaults: {
+            _width: 2,
+            _height: 2
+          },
+          ng1: {
+            options: {
+              noDeviceTarget: true,
+              groupsSelectable: false
+            }
+          }
+        }
+      } as ContextWidgetConfig
+    })
+  ]
+})
+export class WidgetResolversModule {}

package/tsconfig.app.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "noImplicitOverride": false,
+    "skipLibCheck": true,
+    "strict": false,
+    "noPropertyAccessFromIndexSignature": false,
+    "noImplicitReturns": false,
+  },
+  "files": [
+    "src/main.ts"
+  ],
+  "include": [
+    "src/**/*.ts",
+    "../ngx-components/**/*.ts"
+  ]
+}