@c8y/tutorial 1019.0.3

package/src/__mocks/scoped-mocks/boilerplate.ts

@@ -0,0 +1,54 @@
+import { IFetchResponse } from '@c8y/client';
+import { ApiCall, HttpHandler, HttpInterceptor } from '@c8y/ngx-components/api';
+import { generateResponse, handleRequest } from '../utils/common';
+import { Observable } from 'rxjs';
+import { generateDevice } from '../utils/generators/managedObjects';
+
+export class BoilerplateInterceptor implements HttpInterceptor {
+  intercept(req: ApiCall, next: HttpHandler): Observable<IFetchResponse> {
+    return handleRequest(req, next, 'inventory/managedObjects', {
+      POST: this.mockPOST.bind(this),
+      PUT: this.mockPUT.bind(this),
+      GET: this.mockGET.bind(this)
+    });
+  }
+
+  mockPOST(_requestDescriptor: string) {
+    return null;
+  }
+
+  mockPUT(_requestDescriptor: string) {
+    return null;
+  }
+
+  private mockGET(_requestDescriptor: string) {
+    // TODO: ask Jan about clusters in the map.
+    const responseGenerators = this.getResponseGenerators();
+
+    for (const urlPart in responseGenerators) {
+      if (_requestDescriptor.includes(urlPart)) {
+        const generatorResult = responseGenerators[urlPart]();
+        if (generatorResult) {
+          return generateResponse(() => generatorResult);
+        }
+      }
+    }
+    return null;
+  }
+
+  private getResponseGenerators() {
+    return {
+      true: () => ({
+        managedObjects: [...[...Array(1)].map(() => generateDevice())],
+        statistics: {
+          totalPages: 201,
+          pageSize: 1,
+          currentPage: 1
+        }
+      }),
+      'has(c8y_Position)': () => ({
+        managedObjects: [...[...Array(201)].map(() => generateDevice())]
+      })
+    };
+  }
+}

package/src/__mocks/scoped-mocks/context-dashboard.ts

@@ -0,0 +1,47 @@
+import { IFetchResponse } from '@c8y/client';
+import { ApiCall, HttpHandler, HttpInterceptor } from '@c8y/ngx-components/api';
+import { Observable } from 'rxjs';
+import { generateResponse, handleRequest } from '../utils/common';
+import { generateDashboard } from '../../__mocks/utils/generators/managedObjects';
+
+export class ContextDashboardInterceptor implements HttpInterceptor {
+  dashboard = generateDashboard();
+
+  intercept(req: ApiCall, next: HttpHandler): Observable<IFetchResponse> {
+    return handleRequest(req, next, 'inventory/managedObjects', {
+      POST: this.mockPOST.bind(this),
+      PUT: this.mockPUT.bind(this),
+      GET: this.mockGET.bind(this)
+    });
+  }
+
+  private mockPOST(_requestDescriptor: string) {
+    return generateResponse(() => this.dashboard);
+  }
+
+  private mockPUT(_requestDescriptor: string) {
+    return generateResponse(() => this.dashboard);
+  }
+
+  private mockGET(_requestDescriptor: string) {
+    const responseGenerators = this.getResponseGenerators();
+
+    for (const urlPart in responseGenerators) {
+      if (_requestDescriptor.includes(urlPart)) {
+        const generatorResult = responseGenerators[urlPart]();
+        if (generatorResult) {
+          return generateResponse(() => generatorResult);
+        }
+      }
+    }
+    return null;
+  }
+
+  private getResponseGenerators() {
+    return {
+      'example-widget': () => ({
+        managedObjects: [this.dashboard]
+      })
+    };
+  }
+}

package/src/__mocks/scoped-mocks/device-data-grid.ts

@@ -0,0 +1,44 @@
+import { IFetchResponse } from '@c8y/client';
+import { ApiCall, HttpHandler, HttpInterceptor } from '@c8y/ngx-components/api';
+import { generateResponse, handleRequest } from '../utils/common';
+import { Observable } from 'rxjs';
+import { generateDevice } from '../../__mocks/utils/generators/managedObjects';
+
+export class DeviceDataGridInterceptor implements HttpInterceptor {
+  intercept(req: ApiCall, next: HttpHandler): Observable<IFetchResponse> {
+    return handleRequest(req, next, 'inventory/managedObjects', {
+      POST: this.mockPOST.bind(this),
+      PUT: this.mockPUT.bind(this),
+      GET: this.mockGET.bind(this)
+    });
+  }
+
+  mockPOST(_requestDescriptor: string) {
+    return null;
+  }
+
+  mockPUT(_requestDescriptor: string) {
+    return null;
+  }
+  private mockGET(_requestDescriptor: string) {
+    const responseGenerators = this.getResponseGenerators();
+
+    for (const urlPart in responseGenerators) {
+      if (_requestDescriptor.includes(urlPart)) {
+        const generatorResult = responseGenerators[urlPart]();
+        if (generatorResult) {
+          return generateResponse(() => generatorResult);
+        }
+      }
+    }
+    return null;
+  }
+
+  private getResponseGenerators() {
+    return {
+      pageSize: () => ({
+        managedObjects: [...[...Array(25)].map(() => generateDevice())]
+      })
+    };
+  }
+}

package/src/__mocks/scoped-mocks/named-context-dashboard.ts

@@ -0,0 +1,42 @@
+import { IFetchResponse } from '@c8y/client';
+import { ApiCall, HttpHandler, HttpInterceptor } from '@c8y/ngx-components/api';
+import { Observable } from 'rxjs';
+import { generateResponse, handleRequest } from '../utils/common';
+import { generateDashboard } from '../../__mocks/utils/generators/managedObjects';
+
+export class NamedContextDashboardInterceptor implements HttpInterceptor {
+  dashboard = generateDashboard({
+    id: '1000000',
+    name: 'myCustomDeviceDashboardName-3',
+    device: {
+      name: 'Device abc',
+      id: '200'
+    }
+  });
+
+  intercept(req: ApiCall, next: HttpHandler): Observable<IFetchResponse> {
+    return handleRequest(req, next, 'inventory/managedObjects', {
+      POST: this.mockPOST.bind(this),
+      PUT: this.mockPUT.bind(this),
+      GET: this.mockGET.bind(this)
+    });
+  }
+
+  private mockPOST(_requestDescriptor: string) {
+    if (_requestDescriptor.includes('childAdditions')) {
+      return generateResponse(() => this.dashboard);
+    }
+    return null;
+  }
+
+  private mockPUT(_requestDescriptor: string) {
+    if (/\/\d+/.test(_requestDescriptor)) {
+      return generateResponse(() => this.dashboard);
+    }
+    return null;
+  }
+
+  private mockGET(_requestDescriptor: string) {
+    return null;
+  }
+}

package/src/__mocks/scoped-mocks/server-side-data-grid.ts

@@ -0,0 +1,47 @@
+import { IFetchResponse } from '@c8y/client';
+import { ApiCall, HttpHandler, HttpInterceptor } from '@c8y/ngx-components/api';
+import { generateResponse, handleRequest } from '../utils/common';
+import { Observable } from 'rxjs';
+import { generateRandomMo } from '../../__mocks/utils/generators/managedObjects';
+import { filterObjects } from '../utils/grid';
+
+export class ServerSideDataGridInterceptor implements HttpInterceptor {
+  intercept(req: ApiCall, next: HttpHandler): Observable<IFetchResponse> {
+    return handleRequest(req, next, 'managedObjects', {
+      POST: this.mockPOST.bind(this),
+      PUT: this.mockPUT.bind(this),
+      GET: this.mockGET.bind(this)
+    });
+  }
+
+  mockPOST(_requestDescriptor: string) {
+    return null;
+  }
+
+  mockPUT(_requestDescriptor: string) {
+    return null;
+  }
+
+  private mockGET(_requestDescriptor: string) {
+    const responseGenerators = this.getResponseGenerators();
+
+    for (const urlPart in responseGenerators) {
+      if (_requestDescriptor.includes(urlPart)) {
+        const generatorResult = responseGenerators[urlPart]();
+        if (generatorResult) {
+          const filteredData = filterObjects(generatorResult.managedObjects, _requestDescriptor);
+          return generateResponse(() => ({ managedObjects: filteredData }));
+        }
+      }
+    }
+    return null;
+  }
+
+  private getResponseGenerators() {
+    return {
+      pageSize: () => ({
+        managedObjects: [...[...Array(25)].map(() => generateRandomMo())]
+      })
+    };
+  }
+}

package/src/__mocks/scoped-mocks/service-dashboard.ts

@@ -0,0 +1,42 @@
+import { IFetchResponse } from '@c8y/client';
+import { ApiCall, HttpHandler, HttpInterceptor } from '@c8y/ngx-components/api';
+import { generateResponse, handleRequest } from '../utils/common';
+import { Observable } from 'rxjs';
+import { generateDashboard } from '../utils/generators/managedObjects';
+
+export class ServiceDashboardInterceptor implements HttpInterceptor {
+  dashboard = generateDashboard({
+    id: '1000000',
+    name: 'myCustomDeviceDashboardName-3',
+    device: {
+      name: 'Service',
+      id: '<contextId>'
+    }
+  });
+
+  intercept(req: ApiCall, next: HttpHandler): Observable<IFetchResponse> {
+    return handleRequest(req, next, 'inventory/managedObjects', {
+      POST: this.mockPOST.bind(this),
+      PUT: this.mockPUT.bind(this),
+      GET: this.mockGET.bind(this)
+    });
+  }
+
+  mockPOST(_requestDescriptor: string) {
+    if (_requestDescriptor.includes('childAdditions')) {
+      return generateResponse(() => this.dashboard);
+    }
+    return null;
+  }
+
+  mockPUT(_requestDescriptor: string) {
+    if (/\/\d+/.test(_requestDescriptor)) {
+      return generateResponse(() => this.dashboard);
+    }
+    return null;
+  }
+
+  private mockGET(_requestDescriptor: string) {
+    return null;
+  }
+}

package/src/__mocks/utils/clean.realtime.ts

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { OptionsService } from '@c8y/ngx-components';
+import { Subject } from 'rxjs';
+
+@Injectable({ providedIn: 'root' })
+export class CleanRealtime {
+  stop$: Subject<void> = new Subject();
+  onDestroy$: Subject<void> = new Subject();
+
+  constructor(private options: OptionsService) {}
+
+  onDestroy() {
+    if (this.options.get<boolean>('noLogin', false) && this.onDestroy$) {
+      this.onDestroy$.next();
+    }
+  }
+
+  stop() {
+    if (this.options.get<boolean>('noLogin', false) && this.stop$) {
+      this.stop$.next();
+    }
+  }
+}

package/src/__mocks/utils/common.ts

@@ -0,0 +1,114 @@
+import { IFetchResponse, ISource } from '@c8y/client';
+import { ApiCall, HttpHandler } from '@c8y/ngx-components/api';
+import { DEFAULT_STATISTICS, HttpMethods, ResponseWithType } from '../mock.model';
+import { from } from 'rxjs';
+
+/**
+ * Handles HTTP requests and provides mock responses based on the method type and URL path.
+ * This function is primarily designed to be used in HTTP interceptors.
+ *
+ * @param req - The incoming HTTP request to be handled. This request should be of `ApiCall` type.
+ * @param next - The next middleware function in the pipeline. If no matching handler is found, the request is passed to this next handler.
+ * @param urlPath - The URL path which will be used to determine if the request should be handled. If the request URL includes this path, a handler will be searched for.
+ * @param handlers - An object mapping HTTP methods to their respective handlers. These handlers are functions that accept a string argument (requestDescriptor), which is a combination of the request URL and any parameters or body, and return either a Promise or an object of `IFetchResponse` type.
+ *
+ * For example:
+ *
+ * ```typescript
+ * {
+ *   POST: mockPOSTFunction,
+ *   PUT: mockPUTFunction,
+ *   GET: mockGETFunction,
+ * }
+ * ```
+ *
+ * If a handler is found for the HTTP method of the request, the handler function is called with the `requestDescriptor` as its argument.
+ * @returns An Observable which will either contain the response from the matched handler function or, if no handler is matched, the result of the `next.handle(req)` call.
+ *
+ * @example
+ * In the example below, all requests to inventory/managedObjects will pass through the interceptor.
+ *
+ * ```typescript
+ * export class TestInterceptor implements HttpInterceptor {
+ *   intercept(req: ApiCall, next: HttpHandler): Observable<IFetchResponse> {
+ *     return handleRequest(req, next, 'inventory/managedObjects', {
+ *       POST: this.mockPOST.bind(this),
+ *       PUT: this.mockPUT.bind(this),
+ *       GET: this.mockGET.bind(this)
+ *     });
+ *   }
+ *
+ *   mockPOST(_requestDescriptor: string) {
+ *     return null;
+ *   }
+ *
+ *   mockPUT(_requestDescriptor: string) {
+ *    return null;
+ *   }
+ *   ...
+ * }
+ * ```
+ */
+export function handleRequest(
+  req: ApiCall,
+  next: HttpHandler,
+  urlPath: string,
+  handlers: {
+    [method in HttpMethods]?: (
+      requestDescriptor: string
+    ) => Promise<IFetchResponse> | IFetchResponse;
+  } = {}
+): ReturnType<HttpHandler['handle']> {
+  let requestDescriptor = req?.url;
+
+  if (req?.options.params) {
+    requestDescriptor += JSON.stringify(req.options.params);
+  }
+
+  if (req?.options?.body) {
+    requestDescriptor += req.options.body;
+  }
+
+  const { method = 'GET' } = req?.options || {};
+
+  if (requestDescriptor.includes(urlPath) && handlers[method]) {
+    const response = handlers[method](requestDescriptor);
+    return response ? from(Promise.resolve(response)) : next.handle(req);
+  }
+  return next.handle(req);
+}
+
+export function generateId() {
+  return Math.floor(Math.random() * 100000).toString();
+}
+
+export function getFakeSource(): ISource {
+  return {
+    id: generateId(),
+    self: 'https://example.com/inventory/managedObjects/...'
+  };
+}
+
+/**
+ * A utility function for generating mock responses with predefined status, body content, and statistics.
+ *
+ * @function generateResponse
+ *
+ * @template T - The type of the data that will be included in the response body.
+ *
+ * @param bodyGenerator - A function that generates the content of the body of the response.
+ * @param statistics - An optional parameter providing statistics for the response. Defaults to DEFAULT_STATISTICS.
+ *
+ * @returns A mock Response object with status 200 and a json method that resolves to a custom body object.
+ */
+export function generateResponse<T>(bodyGenerator: () => T, statistics = DEFAULT_STATISTICS) {
+  const newResponse = new Response(null, {
+    status: 200
+  });
+  newResponse.json = () =>
+    Promise.resolve({
+      ...bodyGenerator(),
+      statistics
+    });
+  return newResponse as ResponseWithType<T & { statistics: typeof DEFAULT_STATISTICS }>;
+}

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

@@ -0,0 +1,30 @@
+import { AlarmStatus, IAlarm, Severity } from '@c8y/client';
+import { generateId, getFakeSource } from '../common';
+
+export function getFakeAlarm(): IAlarm {
+  const severities: Severity[] = [
+    Severity.CRITICAL,
+    Severity.MAJOR,
+    Severity.MINOR,
+    Severity.WARNING
+  ];
+  const statuses: AlarmStatus[] = [
+    AlarmStatus.ACKNOWLEDGED,
+    AlarmStatus.CLEARED,
+    AlarmStatus.ACTIVE
+  ];
+
+  return {
+    severity: severities[Math.floor(Math.random() * severities.length)] as Severity,
+    source: getFakeSource(),
+    type: `Type_${Math.floor(Math.random() * 1000)}`,
+    time: new Date().toISOString(),
+    text: `Text_${Math.floor(Math.random() * 1000)}`,
+    id: generateId(),
+    status: statuses[Math.floor(Math.random() * statuses.length)] as AlarmStatus,
+    count: Math.floor(Math.random() * 100),
+    name: `Name_${Math.floor(Math.random() * 1000)}`,
+    self: 'https://example.com/self/...}',
+    creationTime: new Date().toISOString()
+  };
+}

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

@@ -0,0 +1,14 @@
+import { IEvent } from '@c8y/client';
+import { generateId, getFakeSource } from '../common';
+
+export function getFakeEvent(): IEvent {
+  return {
+    source: getFakeSource(),
+    type: `Type_${Math.floor(Math.random() * 1000)}`,
+    time: new Date().toISOString(),
+    text: `Text_${Math.floor(Math.random() * 1000)}`,
+    id: generateId(),
+    self: 'https://example.com/self/...',
+    creationTime: new Date().toISOString()
+  };
+}

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

@@ -0,0 +1,208 @@
+import { IManagedObject, IManagedObjectReferences } from '@c8y/client';
+import { generateId } from '../common';
+
+const cords = [
+  {
+    lat: '51.225324115117',
+    lng: '6.758050918579102'
+  },
+  {
+    lat: '51.22446407082351',
+    lng: '6.75933837890625'
+  },
+  {
+    lat: '51.22338899285697',
+    lng: '6.760711669921875'
+  },
+  {
+    lat: '51.222152622151995',
+    lng: '6.762084960937499'
+  },
+  {
+    lat: '51.2212387615908',
+    lng: '6.763544082641601'
+  },
+  {
+    lat: '51.21994857461735',
+    lng: '6.765260696411133'
+  },
+  {
+    lat: '51.21828202959081',
+    lng: '6.766977310180663'
+  },
+  {
+    lat: '51.21731433059918',
+    lng: '6.769466400146484'
+  },
+  {
+    lat: '51.21849707104884',
+    lng: '6.771183013916016'
+  },
+  {
+    lat: '51.219034670299344',
+    lng: '6.772127151489258'
+  }
+];
+
+export function generateRealtimeDeviceMO(): IManagedObject {
+  return generateDevice<{ id: string; customFragment: string }>({
+    id: '1',
+    customFragment: 'customFragment'
+  });
+}
+
+export function generateDevice<T>(customAttributes?: T): IManagedObject {
+  const randomPosition = Math.floor(Math.random() * 10);
+  return {
+    id: generateId(),
+    name: `Child_Device_${generateId()}`,
+    ...getMOCommonProps(),
+    type: 'c8y_SensorPhone',
+    c8y_IsDevice: {},
+    c8y_Position: {
+      lng: cords[randomPosition].lng,
+      alt: 0,
+      accuracy: 10,
+      lat: cords[randomPosition].lat
+    },
+    ...customAttributes
+  };
+}
+
+export function generateAsset<T>(customAttributes?: T): IManagedObject {
+  return {
+    id: generateId(),
+    name: `Asset_${generateId()}`,
+    ...getMOCommonProps(),
+    type: 'building',
+    c8y_IsAsset: {},
+    c8y_IsDeviceGroup: {},
+    icon: {
+      name: 'hospital-o',
+      category: 'userInterface'
+    },
+    ...customAttributes
+  };
+}
+
+export function generateAssetType<T>(customAttributes?: T): IManagedObject {
+  return {
+    id: generateId(),
+    name: 'building',
+    ...getMOCommonProps(),
+    type: 'lemon',
+    c8y_IsAssetType: {
+      allowedAssetTypes: [
+        {
+          id: generateId()
+        }
+      ],
+      isNoneChildAssetsAllowed: 'false',
+      icon: {
+        name: 'hospital-o',
+        category: 'userInterface'
+      },
+      properties: []
+    },
+    description: '...',
+    label: 'Building',
+    ...customAttributes
+  };
+}
+
+export function generateGroup<T>(customAttributes?: T): IManagedObject {
+  return {
+    id: generateId(),
+    name: `Group_${generateId()}`,
+    ...getMOCommonProps(),
+    type: 'c8y_DeviceGroup',
+    c8y_IsDeviceGroup: {},
+    ...customAttributes
+  };
+}
+
+export function generateSubGroup<T>(customAttributes?: T): IManagedObject {
+  return generateGroup({
+    name: `Sub_Group_${generateId()}`,
+    type: 'c8y_DeviceSubgroup',
+    ...customAttributes
+  });
+}
+
+export function generateRandomMo() {
+  const randomPosition = Math.floor(Math.random() * 3);
+  const generators = [generateAsset, generateSubGroup, generateDevice];
+  return generators[randomPosition]();
+}
+
+function getMOCommonProps() {
+  return {
+    creationTime: new Date().toISOString(),
+    lastUpdated: new Date().toISOString(),
+    owner: 'owner1',
+    self: 'http://example.com/self/...',
+    additionParents: getFakeManagedObjectReferences(),
+    assetParents: getFakeManagedObjectReferences(),
+    childAdditions: getFakeManagedObjectReferences(),
+    childAssets: getFakeManagedObjectReferences(),
+    childDevices: getFakeManagedObjectReferences(),
+    deviceParents: getFakeManagedObjectReferences(),
+    ['customFragment']: 'customData'
+  };
+}
+
+function getFakeManagedObjectReferences(): IManagedObjectReferences {
+  return { references: [] };
+}
+
+export function generateDashboard({
+  id = '6000',
+  name = 'example-widget',
+  globalRolesIds = undefined,
+  device = undefined
+} = {}) {
+  const dashboard = {
+    id: id,
+    c8y_Global: {},
+    c8y_Dashboard: {
+      c8y_IsNavigatorNode: null,
+      children: {
+        [id]: {
+          componentId: 'angular.widget.demo',
+          _x: 3,
+          _y: 0,
+          id: id,
+          title: 'Hello',
+          _width: 6,
+          config: {
+            text: 'Welcome to a context dashboard'
+          },
+          _height: 6
+        }
+      },
+      widgetClasses: {
+        'dashboard-theme-light': true,
+        'panel-title-regular': true
+      }
+    },
+    [`c8y_Dashboard!name!${name}`]: {}
+  };
+
+  if (globalRolesIds) {
+    (dashboard.c8y_Dashboard as any).globalRolesIds = globalRolesIds;
+  }
+
+  if (device) {
+    (dashboard.c8y_Dashboard.children[id].config as any).device = device;
+  }
+
+  return dashboard;
+}
+
+export function generateUserPreferences() {
+  return {
+    type: 'c8y_UserPreference',
+    id: generateId(),
+    language: 'en'
+  };
+}

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

@@ -0,0 +1,22 @@
+import { IMeasurement, IMeasurementValue } from '@c8y/client';
+import { generateId, getFakeSource } from '../common';
+
+export function getFakeMeasurement(): IMeasurement {
+  return {
+    id: generateId(),
+    type: 'c8y_Temperature',
+    time: new Date().toISOString(),
+    self: 'https://example.com/measurement/measurements/...',
+    source: getFakeSource(),
+    c8y_Temperature: {
+      T: getFakeMeasurementValue()
+    }
+  };
+}
+
+function getFakeMeasurementValue(): IMeasurementValue {
+  return {
+    value: Math.random() * 100,
+    unit: `ºC`
+  };
+}