@c8y/tutorial 1020.4.3 → 1020.5.0

package/cumulocity.config.ts

@@ -618,6 +618,13 @@ export default {
         description: 'An introduction to datapoint without templates example.',
         scope: 'self'
       },
+      {
+        name: 'Introduction to alarm event selector',
+        module: 'AlarmEventSlectorExampleModule',
+        path: './src/selector/alarm-event-selector-example/alarm-event-selector.module.ts',
+        description: 'An introduction to alarm event selector example.',
+        scope: 'self'
+      },
       {
         name: 'Introduction to asset selector device child',
         module: 'AssetSingleSelectModule',

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@c8y/tutorial",
-  "version": "1020.4.3",
+  "version": "1020.5.0",
   "description": "This package is used to scaffold a tutorial for Cumulocity IoT Web SDK which explains a lot of concepts.",
   "dependencies": {
-    "@c8y/style": "1020.4.3",
-    "@c8y/ngx-components": "1020.4.3",
-    "@c8y/client": "1020.4.3",
-    "@c8y/bootstrap": "1020.4.3",
+    "@c8y/style": "1020.5.0",
+    "@c8y/ngx-components": "1020.5.0",
+    "@c8y/client": "1020.5.0",
+    "@c8y/bootstrap": "1020.5.0",
     "@angular/cdk": "^17.3.9",
     "ngx-bootstrap": "12.0.0",
     "leaflet": "1.9.4",
     "rxjs": "^7.4.0"
   },
   "devDependencies": {
-    "@c8y/options": "1020.4.3",
-    "@c8y/devkit": "1020.4.3"
+    "@c8y/options": "1020.5.0",
+    "@c8y/devkit": "1020.5.0"
   },
   "peerDependencies": {
     "@angular/common": ">=16 <18"

package/src/selector/alarm-event-selector-example/alarm-event-selector.component.ts

@@ -0,0 +1,52 @@
+import { Component, Input } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { CommonModule, CoreModule } from '@c8y/ngx-components';
+import { AlarmEventSelectorModule, AlarmOrEvent } from '@c8y/ngx-components/alarm-event-selector';
+import { AlarmEventSelectorModalOptions } from '@c8y/ngx-components/alarm-event-selector/alarm-event-selector-modal/alarm-event-selector-modal.model';
+import { AssetSelectorModule } from '@c8y/ngx-components/assets-navigator';
+
+@Component({
+  selector: 'app-widget',
+  template: `
+    <div class="row">
+      <div class="col-md-6">
+        <form [formGroup]="formGroup">
+          <c8y-alarm-event-selection-list
+            name="alarms"
+            [config]="config"
+            [timelineType]="'ALARM'"
+            formControlName="alarms"
+          >
+          </c8y-alarm-event-selection-list>
+          <c8y-alarm-event-selection-list
+            name="events"
+            [config]="config"
+            [timelineType]="'EVENT'"
+            formControlName="events"
+          >
+          </c8y-alarm-event-selection-list>
+        </form>
+      </div>
+    </div>
+  `,
+  standalone: true,
+  imports: [CommonModule, AssetSelectorModule, CoreModule, AlarmEventSelectorModule]
+})
+export class AlarmEventSelectorExampleComponent {
+  selectedAlarmEvent: AlarmOrEvent;
+  formGroup: FormGroup;
+  @Input() config: Partial<AlarmEventSelectorModalOptions> = {};
+
+  constructor(private formBuilder: FormBuilder) {}
+
+  ngOnInit(): void {
+    this.initForm();
+  }
+
+  initForm() {
+    this.formGroup = this.formBuilder.group({
+      alarms: [[]],
+      events: [[]]
+    });
+  }
+}

package/src/selector/alarm-event-selector-example/alarm-event-selector.module.ts

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