@c8y/tutorial 1023.37.0 → 1023.42.1

package/cumulocity.config.ts

@@ -717,6 +717,13 @@ export default {
         description: 'An introduction to datapoint without templates example.',
         scope: 'self'
       },
+      {
+        name: 'Introduction to data point single select example',
+        module: 'DatapointSelectionSingleSelectExampleModule',
+        path: './src/selector/datapoint-selection-example/single-select-example/datapoint-selection-single-select-example.module.ts',
+        description: 'An introduction to data point single select example.',
+        scope: 'self'
+      },
       {
         name: 'Introduction to alarm event selector',
         module: 'AlarmEventSlectorExampleModule',

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@c8y/tutorial",
-  "version": "1023.37.0",
+  "version": "1023.42.1",
   "description": "This package is used to scaffold a tutorial for Cumulocity IoT Web SDK which explains a lot of concepts.",
   "dependencies": {
-    "@c8y/style": "1023.37.0",
-    "@c8y/ngx-components": "1023.37.0",
-    "@c8y/client": "1023.37.0",
-    "@c8y/bootstrap": "1023.37.0",
+    "@c8y/style": "1023.42.1",
+    "@c8y/ngx-components": "1023.42.1",
+    "@c8y/client": "1023.42.1",
+    "@c8y/bootstrap": "1023.42.1",
     "@angular/cdk": "^20.2.14",
     "monaco-editor": "~0.53.0",
     "ngx-bootstrap": "20.0.2",
@@ -14,8 +14,8 @@
     "rxjs": "7.8.2"
   },
   "devDependencies": {
-    "@c8y/options": "1023.37.0",
-    "@c8y/devkit": "1023.37.0"
+    "@c8y/options": "1023.42.1",
+    "@c8y/devkit": "1023.42.1"
   },
   "peerDependencies": {
     "@angular/common": ">=20 <21"

package/src/hooks/generic-wizard/minimal-setup/stepper-example.component.html

@@ -1,38 +1,52 @@
-<c8y-wizard-header> New header </c8y-wizard-header>
-<c8y-wizard-body
-  ><c8y-stepper>
-    <cdk-step [stepControl]="formGroupStepOne" label="Device name">
+<c8y-wizard-header>New header</c8y-wizard-header>
+<c8y-wizard-body>
+  <c8y-stepper>
+    <cdk-step
+      [stepControl]="formGroupStepOne"
+      label="Device name"
+    >
       <div class="m-l-40 m-r-40 m-t-32">
-        <h4 title="Device name" class="p-b-8">Enter the device name</h4>
         <c8y-form-group>
           <div [formGroup]="formGroupStepOne">
+            <label for="name">Enter the device name</label>
             <input
               class="form-control"
+              id="name"
+              placeholder="MyDevice"
               type="text"
+              required
               #nameRef
               formControlName="name"
-              placeholder="MyDevice"
-              required
             />
             <c8y-messages>
-              <c8y-message [name]="'required'" [text]="'Enter the name of the Device'"></c8y-message>
+              <c8y-message
+                [name]="'required'"
+                [text]="'Enter the name of the Device'"
+              ></c8y-message>
             </c8y-messages>
           </div>
         </c8y-form-group>
       </div>
       <c8y-stepper-buttons></c8y-stepper-buttons>
     </cdk-step>
-    <cdk-step state="final" label="Job done!">
+    <cdk-step
+      state="final"
+      label="Job done!"
+    >
       <div class="m-l-40 m-r-40 m-t-32">
         <h4 class="p-b-32 text-center">Your device is now ready to save the world!</h4>
       </div>
-    </cdk-step></c8y-stepper
-  ></c8y-wizard-body
->
-<c8y-wizard-footer *ngIf="stepper.selectedIndex === 0"> </c8y-wizard-footer>
-
-<c8y-wizard-footer *ngIf="stepper.selectedIndex === 1">
-  <button (click)="done()" class="btn btn-default" title="{{ 'Done' }}">
-    {{ 'Done' }}
-  </button>
+    </cdk-step>
+  </c8y-stepper>
+</c8y-wizard-body>
+<c8y-wizard-footer>
+  @if (stepper.selectedIndex === 1) {
+    <button
+      class="btn btn-default"
+      title="{{ 'Done' }}"
+      (click)="done()"
+    >
+      {{ 'Done' }}
+    </button>
+  }
 </c8y-wizard-footer>

package/src/hooks/stepper/steps/step1.component.ts

@@ -20,10 +20,16 @@ import {
   selector: 'tut-step-1-device',
   template: `
     <div class="m-l-40 m-r-40 m-t-32">
-      <h4 class="p-b-8" title="Device name">Enter the device name</h4>
       <c8y-form-group>
         <div [formGroup]="formGroupStepOne">
-          <input class="form-control" placeholder="MyDevice" type="text" formControlName="name" />
+          <label for="name">Enter the device name</label>
+          <input
+            class="form-control"
+            id="name"
+            placeholder="MyDevice"
+            type="text"
+            formControlName="name"
+          />
           <c8y-messages>
             <c8y-message [text]="'Enter the name of the Device'"></c8y-message>
           </c8y-messages>

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

@@ -1,5 +1,4 @@
 import { Component } from '@angular/core';
-import { gettext } from '@c8y/ngx-components/gettext';
 import { CoreModule, FormsModule, ModalModule, ModalService, Status } from '@c8y/ngx-components';
 import { BsModalService } from 'ngx-bootstrap/modal';
 import { DeleteModalExampleComponent } from './delete-modal-example.component';
@@ -20,7 +19,7 @@ import { DeleteModalExampleComponent } from './delete-modal-example.component';
     </div>
   </div>`,
   standalone: true,
-  imports: [ModalModule, FormsModule, CoreModule, DeleteModalExampleComponent]
+  imports: [ModalModule, FormsModule, CoreModule]
 })
 export class ConfirmModalExampleComponent {
   constructor(
@@ -34,16 +33,37 @@ export class ConfirmModalExampleComponent {
 
   async deleteConfigurationSnapshot() {
     try {
-      await this.modalService.confirm(
-        'Delete configuration snapshot',
-        'You are about to delete the configuration snapshot DeviceA.',
+      const result = await this.modalService.confirm(
+        'Delete configuration snapshot?',
+        'You are about to delete the configuration snapshot from "Device A". Do you want to proceed?',
         Status.DANGER,
         {
-          ok: gettext('Delete')
+          ok: 'Delete'
+        },
+        {
+          resetToLatestSnapshot: {
+            checked: false,
+            text: 'Reset configuration to latest snapshot',
+            disabledByKey: 'resetToFactoryDefaults'
+          },
+          resetToFactoryDefaults: {
+            checked: false,
+            text: 'Reset configuration to factory defaults',
+            disabledByKey: 'resetToLatestSnapshot'
+          },
+          restartDevice: {
+            checked: false,
+            text: 'Restart device',
+            showIf: () => true
+          }
         }
       );
       // eslint-disable-next-line no-console
       console.log('Delete clicked');
+      if (typeof result !== 'boolean') {
+        // eslint-disable-next-line no-console
+        console.log('Options selected:', result.confirmOptions);
+      }
     } catch (e) {
       // eslint-disable-next-line no-console
       console.log('Cancel clicked');

package/src/selector/datapoint-selection-example/single-select-example/datapoint-selection-single-select-example.component.ts

@@ -0,0 +1,55 @@
+import { Component } from '@angular/core';
+import { DatapointSelectorService, KPIDetails } from '@c8y/ngx-components/datapoint-selector';
+import { CommonModule } from '@angular/common';
+import { HeaderModule } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'datapoint-selection-single-select-example',
+  template: `<c8y-title>Data point selector - Single select</c8y-title>
+    <div class="container-fluid p-t-24">
+      <div class="row">
+        <div class="col-xs-12 col-sm-8 col-md-9">
+          <div class="card">
+            <div class="card-block d-flex d-col">
+              <button class="btn btn-primary" (click)="selectDatapoint()">
+                Select single data point
+              </button>
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-12 col-sm-4 col-md-3">
+          <div class="card">
+            <div class="card-header separator">
+              <h4 class="card-title">Model</h4>
+            </div>
+            <div class="card-inner-scroll">
+              <pre style="min-height: 98px"><code>{{ datapoint | json }}</code></pre>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div> `,
+  standalone: true,
+  imports: [CommonModule, HeaderModule]
+})
+export class DatapointSelectionSingleSelectExampleComponent {
+  // important
+  datapoint: KPIDetails | null = null;
+  constructor(private datapointSelectorService: DatapointSelectorService) {}
+
+  selectDatapoint(): void {
+    this.datapointSelectorService
+      .selectDataPoints({
+        finishWithFirstSelection: true
+      })
+      .then(
+        res => {
+          this.datapoint = res.length ? res[0] : null;
+        },
+        () => {
+          // nothing to do, modal was canceled
+        }
+      );
+  }
+  // /important
+}

package/src/selector/datapoint-selection-example/single-select-example/datapoint-selection-single-select-example.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  providers: [
+    hookRoute({
+      path: 'selector/datapoint-selection-example/single-select-example',
+      loadComponent: () =>
+        import('./datapoint-selection-single-select-example.component').then(
+          m => m.DatapointSelectionSingleSelectExampleComponent
+        )
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        label: 'single-select',
+        path: '/selector/datapoint-selection-example/single-select-example',
+        icon: 'th-list',
+        priority: -1,
+        parent: 'Datapoint selection'
+      })
+    )
+  ]
+})
+export class DatapointSelectionSingleSelectExampleModule {}

package/src/stepper/device-stepper.component.html

@@ -1,50 +1,71 @@
 <div class="p-b-16">
-  <div *ngIf="isModal" class="modal-header modal-header-primary text-center">
-    <i [c8yIcon]="'diamond'" style="font-size: 32px"></i>
-    <h3 id="modal-title" class="p-t-16">{{ 'Create a new device ' }}</h3>
-  </div>
+  @if (isModal) {
+    <div class="modal-header modal-header-primary text-center">
+      <i
+        [c8yIcon]="'diamond'"
+        style="font-size: 32px"
+      ></i>
+      <h3
+        class="p-t-16"
+        id="modal-title"
+      >
+        {{ 'Create a new device ' }}
+      </h3>
+    </div>
+  }
   <c8y-stepper
-    (onStepChange)="navigate($event)"
     [disableDefaultIcons]="{ edit: true, done: false }"
-    [customClasses]="['m-l-40', 'm-r-40', 'm-t-32']"
     id="modal-body"
+    (selectionChange)="navigate($event.selectedIndex)"
+    [customClasses]="['m-l-40', 'm-r-40', 'm-t-32']"
     linear
   >
     <!-- override icons -->
     <ng-template c8yStepperIcon="final">
       <span [c8yIcon]="'hand-peace-o'"></span>
     </ng-template>
-    <cdk-step [stepControl]="formGroupStepOne" label="Device name">
+    <cdk-step
+      [stepControl]="formGroupStepOne"
+      label="Device name"
+    >
       <div class="m-l-40 m-r-40 m-t-32">
-        <h4 title="Device name" class="p-b-8">Enter the device name</h4>
         <c8y-form-group>
           <div [formGroup]="formGroupStepOne">
+            <label for="name">Enter the device name</label>
             <input
               class="form-control"
+              id="name"
+              placeholder="MyDevice"
               type="text"
+              required
               formControlName="name"
-              placeholder="MyDevice"
               #nameRef
-              required
             />
             <c8y-messages>
-              <c8y-message [name]="'required'" [text]="'Enter the name of the Device'"></c8y-message>
+              <c8y-message
+                [name]="'required'"
+                [text]="'Enter the name of the Device'"
+              ></c8y-message>
             </c8y-messages>
           </div>
         </c8y-form-group>
       </div>
       <c8y-stepper-buttons></c8y-stepper-buttons>
     </cdk-step>
-    <cdk-step [stepControl]="formGroupStepTwo" label="Device type">
+    <cdk-step
+      [stepControl]="formGroupStepTwo"
+      label="Device type"
+    >
       <div class="m-l-40 m-r-40 m-t-32">
-        <h4 title="Enter device type" class="p-b-8">Enter the device type</h4>
         <c8y-form-group>
           <div [formGroup]="formGroupStepTwo">
+            <label for="type">Enter the device type</label>
             <input
               class="form-control"
-              type="any"
-              formControlName="type"
+              id="type"
               placeholder="e.g. phone"
+              type="text"
+              formControlName="type"
             />
           </div>
         </c8y-form-group>
@@ -57,7 +78,10 @@
       ></c8y-stepper-buttons>
     </cdk-step>
     <!-- Final step -->
-    <cdk-step state="final" label="Job done!">
+    <cdk-step
+      state="final"
+      label="Job done!"
+    >
       <div class="m-l-40 m-r-40 m-t-32">
         <h4 class="p-b-32 text-center">Your device is now ready to save the world!</h4>
       </div>