@c8y/tutorial 1019.0.3

package/src/__mocks/utils/generators/operations.ts

@@ -0,0 +1,67 @@
+import {
+  IOperation,
+  IOperationBulk,
+  IOperationBulkProgress,
+  OperationBulkGeneralStatus,
+  OperationBulkStatus,
+  OperationStatus
+} from '@c8y/client';
+import { generateId } from '../common';
+
+// Operation
+export function getFakeOperation(): IOperation {
+  return {
+    id: generateId(),
+    deviceId: generateId(),
+    status: getRandomOperationStatus(),
+    customFragment: 'customData'
+  };
+}
+
+function getRandomOperationStatus(): OperationStatus {
+  const statuses = Object.values(OperationStatus) as OperationStatus[];
+  return statuses[Math.floor(Math.random() * statuses.length)];
+}
+
+// OperationBulk
+export function getFakeOperationBulk(): IOperationBulk {
+  return {
+    id: generateId(),
+    groupId: generateId(),
+    startDate: new Date().toISOString(),
+    creationRamp: Math.floor(Math.random() * 10),
+    operationPrototype: getFakeOperation(),
+    status: getRandomOperationBulkStatus(),
+    generalStatus: getRandomOperationBulkGeneralStatus(),
+    progress: getFakeOperationBulkProgress(),
+    failedParentId: generateId(),
+    note: `This is a note ${Math.floor(Math.random() * 1000000000).toString()}`,
+    self: 'http://example.com/self/...'
+  };
+}
+
+function getRandomOperationBulkStatus(): OperationBulkStatus {
+  const statuses = Object.values(OperationBulkStatus) as OperationBulkStatus[];
+  return statuses[Math.floor(Math.random() * statuses.length)];
+}
+
+function getRandomOperationBulkGeneralStatus(): OperationBulkGeneralStatus {
+  const statuses = Object.values(OperationBulkGeneralStatus) as OperationBulkGeneralStatus[];
+  return statuses[Math.floor(Math.random() * statuses.length)];
+}
+
+function getFakeOperationBulkProgress(): IOperationBulkProgress {
+  const all = Math.floor(Math.random() * 100);
+  const successful = Math.floor(Math.random() * all);
+  const failed = Math.floor(Math.random() * (all - successful));
+  const executing = Math.floor(Math.random() * (all - successful - failed));
+  const pending = all - successful - failed - executing;
+
+  return {
+    all,
+    successful,
+    failed,
+    executing,
+    pending
+  };
+}

package/src/__mocks/utils/grid.ts

@@ -0,0 +1,87 @@
+import { IManagedObject } from '@c8y/client';
+
+/** Defines possible filter types extracted from the query */
+interface QueryFilters {
+  name?: string;
+  id?: string;
+  hasEntries: string[];
+  typesEntries: string[];
+}
+
+/**
+ * Parse query and returns filters
+ */
+function parseQuery(query: string): QueryFilters {
+  return {
+    name: extractFromQuery(query, /name eq '\*([^*]+)\*'/),
+    id: extractFromQuery(query, /id eq '\*([^*]+)\*'/),
+    hasEntries: extractMultipleFromQuery(query, /has\(([^)]+)\)/g),
+    typesEntries: extractMultipleFromQuery(query, /type eq '([^']+)'/g)
+  };
+}
+
+/**
+ * Extracts a single match from query using provided regex pattern
+ */
+function extractFromQuery(query: string, pattern: RegExp): string | undefined {
+  const match = pattern.exec(query);
+  return match ? match[1] : undefined;
+}
+
+/**
+ * Extracts all matches from query using provided regex pattern
+ */
+function extractMultipleFromQuery(query: string, pattern: RegExp): string[] {
+  let match;
+  const results = [];
+  while ((match = pattern.exec(query)) !== null) {
+    results.push(match[1]);
+  }
+  return results;
+}
+
+/**
+ * Filters objects based on provided filters
+ */
+export function filterObjects(objects: IManagedObject[], query: string): IManagedObject[] {
+  const isEmptyQuery = /"query":"\s*"/.test(query);
+  if (isEmptyQuery) {
+    return objects;
+  }
+  const filters = parseQuery(query);
+  return objects.filter(
+    object =>
+      filterByName(object, filters.name) &&
+      filterById(object, filters.id) &&
+      filterByProperties(object, filters.hasEntries) &&
+      filterByType(object, filters.typesEntries)
+  );
+}
+
+/**
+ * Filters object by name
+ */
+function filterByName(object: IManagedObject, name?: string): boolean {
+  return name ? object.name.includes(name) : true;
+}
+
+/**
+ * Filters object by id
+ */
+function filterById(object: IManagedObject, id?: string): boolean {
+  return id ? object.id.includes(id) : true;
+}
+
+/**
+ * Filters object by existence of certain properties
+ */
+function filterByProperties(object: IManagedObject, properties: string[]): boolean {
+  return properties.length > 0 ? properties.some(prop => object.hasOwnProperty(prop)) : true;
+}
+
+/**
+ * Filters object by type
+ */
+function filterByType(object: IManagedObject, types: string[]): boolean {
+  return types.length > 0 ? types.some(type => object.type.includes(type.replace('*', ''))) : true;
+}

package/src/__mocks/utils/realtime.ts

@@ -0,0 +1,59 @@
+import { RealtimeAction, RealtimeMessage } from '@c8y/ngx-components';
+import { Channels, IAnyData } from '../mock.model';
+import { getFakeAlarm } from './generators/alarms';
+import { getFakeEvent } from './generators/events';
+import { generateRealtimeDeviceMO } from './generators/managedObjects';
+import { getFakeMeasurement } from './generators/measurement';
+import { getFakeOperation, getFakeOperationBulk } from './generators/operations';
+
+/**
+ * Map of generators for various channels. Each generator function generates a mock data of specific type.
+ */
+const generators = {
+  [Channels.ManagedObjects]: generateRealtimeDeviceMO,
+  [Channels.MangedObjectsMap]: generateRealtimeDeviceMO,
+  [Channels.Operations]: getFakeOperation,
+  [Channels.BulkOperations]: getFakeOperationBulk,
+  [Channels.Measurements]: getFakeMeasurement,
+  [Channels.Alarms]: getFakeAlarm,
+  [Channels.Events]: getFakeEvent
+};
+
+/**
+ * Function to generate fake data for a given channel.
+ *
+ * @param  channel - The channel for which the fake data is to be generated.
+ * @returns - The generated fake data wrapped in a RealtimeMessage object.
+ * @throws - Throws an error if there's no generator available for the given channel.
+ */
+export function getFakeData<T>(channel: string): RealtimeMessage<T> {
+  const generator = generators[channel];
+  if (!generator) {
+    throw new Error(
+      `No fake data generator for channel ${channel}, either stay with the supported mocked channels (${Object.keys(
+        generators
+      )}), provide a generator for your channel or remove the "noLogin" query parameter and login.`
+    );
+  }
+  const data: IAnyData = generator();
+  const message: RealtimeMessage<T> = {
+    id: (data?.id).toString(),
+    channel: data?.id ? channel.replace('*', (data?.id).toString()) : channel,
+    realtimeAction: getRandomRealtimeAction(),
+    data: data as unknown as T
+  };
+  return message;
+}
+
+/**
+ * Function to generate a random RealtimeAction.
+ * It returns 'UPDATE' in 80% of the cases, otherwise, it returns either 'CREATE' or 'DELETE' randomly.
+ *
+ * @returns The randomly generated RealtimeAction.
+ */
+function getRandomRealtimeAction(): RealtimeAction {
+  if (Math.random() <= 0.8) {
+    return 'UPDATE';
+  }
+  return Math.random() < 0.5 ? 'CREATE' : 'DELETE';
+}

package/src/alert/alert-example.components.html

@@ -0,0 +1,110 @@
+<c8y-title>Alert</c8y-title>
+<!-- important -->
+<p class="text-medium m-b-8 m-t-24">Basic toast</p>
+<div
+  class="d-flex gap-16"
+  role="group"
+>
+  <button
+    class="btn btn-default"
+    type="button"
+    (click)="successAlert()"
+  >
+    Success
+  </button>
+
+  <button
+    class="btn btn-default"
+    type="button"
+    (click)="warningAlert()"
+  >
+    Warning
+  </button>
+
+  <button
+    class="btn btn-default"
+    type="button"
+    (click)="dangerAlert()"
+  >
+    Danger
+  </button>
+
+  <button
+    class="btn btn-default"
+    type="button"
+    (click)="infoAlert()"
+  >
+    Info
+  </button>
+
+  <button
+    class="btn btn-default"
+    type="button"
+    (click)="systemAlert()"
+  >
+    System
+  </button>
+</div>
+
+<p class="text-medium m-b-8 m-t-24">Advanced toasts</p>
+<div
+  class="btn-group gap-16 flex-wrap"
+  role="group"
+>
+  <button
+    class="btn btn-default"
+    type="button"
+    (click)="dangerWithDetails()"
+  >
+    Error toast with details
+  </button>
+
+  <button
+    class="btn btn-default"
+    type="button"
+    (click)="dangerAlertByText()"
+  >
+    Warning toast by text
+  </button>
+
+  <button
+    class="btn btn-default"
+    type="button"
+    (click)="addAlertByAlertObject()"
+  >
+    System toast by Alert object
+  </button>
+
+  <button
+    class="btn btn-default"
+    type="button"
+    (click)="addAlertWithHtml()"
+  >
+    Success toast with html
+  </button>
+
+  <button
+    class="btn btn-default"
+    type="button"
+    (click)="alertWithTemplateRef()"
+  >
+    Info toast with template reference
+  </button>
+
+  <button
+    class="btn btn-default"
+    type="button"
+    (click)="addAlertWithCallbacks()"
+  >
+    Warning toast with callbacks
+  </button>
+</div>
+
+<ng-template #templateRef>
+  <h4>This is a template ref</h4>
+  <p class="m-b-8 m-t-8">Add your own content to an alert, you can even include</p>
+  <button class="btn btn-default btn-sm">Buttons</button>
+  <p class="m-t-8">and other interactive elements.</p>
+</ng-template>
+
+<!-- /important -->

package/src/alert/alert-example.components.ts

@@ -0,0 +1,77 @@
+import { Component, TemplateRef, ViewChild } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AlertService, CoreModule } from '@c8y/ngx-components';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'c8y-alert-example',
+  templateUrl: './alert-example.components.html',
+  standalone: true,
+  imports: [CommonModule, FormsModule, CoreModule]
+})
+export class AlertExampleComponents {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  @ViewChild('templateRef', { read: TemplateRef }) templateRef: TemplateRef<any>;
+
+  constructor(private alertService: AlertService) {}
+
+  successAlert() {
+    this.alertService.success('Success toast');
+  }
+  dangerAlert() {
+    this.alertService.danger('Danger toast');
+  }
+
+  infoAlert() {
+    this.alertService.info('Info toast');
+  }
+
+  warningAlert() {
+    this.alertService.warning('Warning toast');
+  }
+
+  systemAlert() {
+    this.alertService.addByText('system', 'This is a system toast');
+  }
+
+  dangerWithDetails() {
+    this.alertService.danger('Error toast', ' Error toast details');
+  }
+
+  dangerAlertByText() {
+    this.alertService.addByText('warning', 'This is a warning toast', ' with details');
+  }
+
+  addAlertByAlertObject() {
+    this.alertService.add({
+      type: 'system',
+      text: 'System toast',
+      timeout: 5000,
+      detailedData: ' Alert details'
+    });
+  }
+
+  addAlertWithHtml() {
+    this.alertService.add({
+      text: '<p>This is a <b>toast</b> with <code>HTML</code> content</p>',
+      allowHtml: true,
+      type: 'success'
+    });
+  }
+
+  alertWithTemplateRef() {
+    this.alertService.add({ type: 'info', text: this.templateRef });
+  }
+
+  addAlertWithCallbacks() {
+    this.alertService.add({
+      type: 'warning',
+      text: 'Console log on close or show details.',
+      detailedData: ' Alert details',
+      // eslint-disable-next-line no-console
+      onClose: () => console.log('Alert closed'),
+      // eslint-disable-next-line no-console
+      onDetail: () => console.log('Details opened.')
+    });
+  }
+}

package/src/alert/alert-example.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  imports: [CommonModule],
+  providers: [
+    hookRoute({
+      path: 'alert',
+      loadComponent: () => import('./alert-example.components').then(m => m.AlertExampleComponents)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        path: 'alert',
+        icon: 'notification',
+        label: 'Alert'
+      })
+    )
+  ]
+})
+export class AlertExampleModule {}

package/src/app/app.module.ts

@@ -0,0 +1,72 @@
+import { NgModule } from '@angular/core';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { BootstrapComponent, CoreModule, RouterModule, VersionModule } from '@c8y/ngx-components';
+import { BulkOperationSchedulerModule } from '@c8y/ngx-components/operations/bulk-operation-scheduler';
+import { WidgetsModule } from '@c8y/ngx-components/widgets';
+import { cockpitDefaultWidgets } from '@c8y/ngx-components/widgets/cockpit';
+import { deviceManagementDefaultWidgets } from '@c8y/ngx-components/widgets/device-management';
+import { BsModalRef } from 'ngx-bootstrap/modal';
+import { ClientInterceptorModule } from '../client-interceptor';
+import { DynamicFormsTutorialModule } from '../dynamic-forms';
+import { GridsModule } from '../grids';
+import { HelloModule } from '../hello';
+import { HooksModule } from '../hooks';
+import { NavigatorModule } from '../hooks/navigator';
+import { RouteModule } from '../hooks/route';
+import { LazyRoutingModule } from '../lazy';
+import { LazyWidgetModule } from '../lazy-widget';
+import { ListsModule } from '../list';
+import { MapExamplesModule } from '../maps/map-examples.module';
+import { RedirectToLastRouteModule } from '../redirect-to-last-route';
+import { UserMenuModule } from '../user-menu';
+import { DashboardWidgetDemoModule } from '../widget';
+import { WidgetResolversModule } from '../widget-resolvers';
+import { MockModule } from '../__mocks';
+import { IntroductionModule } from '../provider-configuration';
+import { TranslationsModule } from '../translations';
+
+@NgModule({
+  declarations: [],
+  imports: [
+    BrowserAnimationsModule,
+    RouterModule.forRoot([]),
+    // Import the CoreModule to add c8y functionality
+    CoreModule.forRoot(),
+
+    // The following modules show examples of how to
+    HelloModule,
+    RouteModule,
+    DashboardWidgetDemoModule,
+    HooksModule,
+    NavigatorModule,
+    ListsModule,
+    GridsModule,
+    LazyRoutingModule,
+    BulkOperationSchedulerModule,
+    IntroductionModule,
+    DynamicFormsTutorialModule,
+    WidgetResolversModule,
+    UserMenuModule,
+    ClientInterceptorModule,
+    MapExamplesModule,
+    TranslationsModule,
+    // Get rid of a default version factory
+    VersionModule.config({ disableWebSDKPluginVersionFactory: true }),
+    LazyWidgetModule,
+    WidgetsModule.config({
+      widgets: [...cockpitDefaultWidgets, ...deviceManagementDefaultWidgets]
+    }),
+    RedirectToLastRouteModule,
+    MockModule
+  ],
+
+  providers: [BsModalRef],
+
+  /**
+   * Bootstrap your application with the BootstrapComponent which will use the `<c8y-bootstrap>`
+   * component to initialize the root application. Alternatively you can bootstrap
+   * a component of your choice and include that tag into its template or only reuse the given components
+   */
+  bootstrap: [BootstrapComponent]
+})
+export class AppModule {}

package/src/bootstrap.ts

@@ -0,0 +1,19 @@
+import './polyfills';
+
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+
+import './translations/locales/pt_BR.po';
+import './translations/locales/it.po';
+
+declare const __MODE__: string;
+if (__MODE__ === 'production') {
+  enableProdMode();
+}
+
+export function bootstrap() {
+  return platformBrowserDynamic()
+    .bootstrapModule(AppModule)
+    .catch(err => console.log(err));
+}

package/src/branding/branding.less

@@ -0,0 +1,78 @@
+@import '~@c8y/style/extend.less';
+
+// // to hide the Cumulocity IoT logo on top of navigator
+// // set @extending to true
+@extending: false;
+
+// Replace and uncomment each variable as you need them
+
+/* COLORS */
+// @brand-color: #53cd61; // main color
+// @brand-primary: @brand-color;
+// @brand-complementary: #a8b3b5;
+// @brand-primary-light: lighten(@brand-primary, 20%);
+// // status colors
+// @status-success: #5cb85c;
+// @status-info: @brand-color;
+// @status-warning: #f0ad4e;
+// @status-danger: #d9534f;
+// @danger: #d90000;
+// @warning: #fdc000;
+// @status-warning-dark: #ff8000;
+// @success: #5cb85c;
+// grays
+// @text-color: #444;
+// @gray-30: #3b4748;
+// @gray-40: #49595b;
+// @gray-40: #6d7a7c;
+// // @gray: #8a9596;
+// @gray-80: #cacece;
+// @gray-90: #f8f8f8;
+// @gray-100: #fcfcfc;
+// @text-muted: @gray-50;
+
+// @body-background-color: #f8f8f8; // page background color - always use a light background
+
+/* HEADER */
+// @headerColor: white;
+// @header-text-color: @gray-40;
+// @header-text-color-hover: @brand-primary;
+// @header-color-active: darken(@gray-40, 15%);
+
+/* NAVIGATOR */
+// @navColor: @gray-10;
+// @navColorHeader: @gray-10;
+// @navigator-header-color: white;
+// @navigator-text-color: @gray-100;
+// @navigator-separator-color: fade(white, 5%);
+// @navigator-font-family: @headings-font-family;
+// @navigator-font-size: 13px;
+// @navigator-color-active: white;
+// @navigator-active-bg: @brand-primary;
+// when set adds a vertical gradient in the navigator background
+// @grad-top:                    "";
+// @grad-bottom:                 "";
+
+/* TYPOGRAPHY */
+// @font-family-sans-serif:      "Lato",Arial, Verdana, sans-serif;
+// @font-family-base:            @font-family-sans-serif;
+// @headings-font-family:        "Roboto",Arial, Verdana, sans-serif;
+
+/* BUTTONS */
+// @component-border-radius-base-base:      2px;
+// @component-border-radius-base-large:     @component-border-radius-base-base;
+// @component-border-radius-base-small:     @component-border-radius-base-base;
+// @btn-shadow:                  none;
+
+/* COMPONENTS */
+// @spinner-color:               lighten(@brand-primary, 30%);
+// @link-color:                  #337ab7;
+// @link-color-hover:            darken(@link-color, 15%);
+// @form-control-border-color-focus:           #66afe9;
+
+// @body-background-pattern:     "";
+// @darker-header:               @gray-30;
+// @appswitcher-background:      none;
+// @component-background-hover:              fade(black, 1.5%);
+// @header-app-name:             @header-text-color;
+// @image-path:                  'img/';

package/src/client-interceptor/client-interceptor.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { ApiService, DataModule } from '@c8y/ngx-components/api';
+import { ClientInterceptorService } from './client-interceptor.service';
+
+@NgModule({
+  imports: [DataModule]
+})
+export class ClientInterceptorModule {
+  constructor(apiService: ApiService, interceptor: ClientInterceptorService) {
+    apiService.addInterceptor(interceptor, 'tutorialAppDemoInterceptor');
+  }
+}

package/src/client-interceptor/client-interceptor.service.ts

@@ -0,0 +1,61 @@
+import { Injectable } from '@angular/core';
+import { IFetchOptions, IFetchResponse, IManagedObject } from '@c8y/client';
+import { ApiCall, HttpHandler, HttpInterceptor } from '@c8y/ngx-components/api';
+import { Observable } from 'rxjs';
+import { get, set } from 'lodash-es';
+import { switchMap } from 'rxjs/operators';
+
+@Injectable({ providedIn: 'root' })
+export class ClientInterceptorService implements HttpInterceptor {
+  private headerPath = 'options.headers';
+
+  intercept(req: ApiCall, next: HttpHandler): Observable<IFetchResponse> {
+    this.addACustomHeaderToAllRequests(req);
+    this.adjustAllNewManagedObjects(req);
+    return next
+      .handle(req)
+      .pipe(switchMap(response => this.modifyResponseBodyForManagedObjects(response)));
+  }
+
+  private async modifyResponseBodyForManagedObjects(
+    response: IFetchResponse
+  ): Promise<IFetchResponse> {
+    if (
+      !response ||
+      !response.ok ||
+      (!response.url.endsWith('inventory/managedObjects') &&
+        !response.url.includes('inventory/managedObjects?'))
+    ) {
+      return response;
+    }
+    const body = await response.json();
+    if (body?.managedObjects && Array.isArray(body.managedObjects)) {
+      const managedObjects: IManagedObject[] = body.managedObjects;
+      managedObjects.forEach(managedObject => {
+        managedObject['c8y_ReadByTutorialAppInterceptor'] = {};
+      });
+    }
+    response.json = () => Promise.resolve(body);
+    return response;
+  }
+
+  private addACustomHeaderToAllRequests(req: ApiCall): void {
+    const headers: IFetchOptions['headers'] = get(req, this.headerPath, {});
+    headers['TutorialAppInterceptorHeader'] = 'InterceptorValue';
+    set(req, this.headerPath, headers);
+  }
+
+  private adjustAllNewManagedObjects(req: ApiCall): void {
+    const { url, method } = req;
+    if (method !== 'POST' || !url.includes('inventory/managedObjects')) {
+      return;
+    }
+
+    const { body } = req.options;
+
+    const managedObject: Partial<IManagedObject> = JSON.parse(body as string);
+    managedObject['c8y_CreatedByTutorialApp'] = {};
+
+    req.options.body = JSON.stringify(managedObject);
+  }
+}

package/src/client-interceptor/index.ts

@@ -0,0 +1 @@
+export * from './client-interceptor.module';

package/src/component-styles/cascading-style-sheets-example/cascading-style-sheets-example.component.css

@@ -0,0 +1,17 @@
+:root{
+  --primary-color:#3bbfce;
+  --secundary-color:#2b9eab;
+  --margin:8px;
+}
+
+
+.content-navigation {
+  border-color: var(--secundary-color);
+  color: var(--secundary-color);
+}
+
+.border {
+  padding: 8px;
+  margin: var(--margin);
+  border-color: #3bbfce;
+}