@c8y/tutorial 1023.14.76 → 1023.14.92

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/package.json +7 -7
  2. package/src/hooks/generic-wizard/minimal-setup/stepper-example.component.html +32 -18
  3. package/src/hooks/stepper/steps/step1.component.ts +8 -2
  4. package/src/modal/confirm-modal/confirm-modal-example.component.ts +26 -6
  5. package/src/stepper/device-stepper.component.html +40 -16
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@c8y/tutorial",
3
- "version": "1023.14.76",
3
+ "version": "1023.14.92",
4
4
  "description": "This package is used to scaffold a tutorial for Cumulocity IoT Web SDK which explains a lot of concepts.",
5
5
  "dependencies": {
6
- "@c8y/style": "1023.14.76",
7
- "@c8y/ngx-components": "1023.14.76",
8
- "@c8y/client": "1023.14.76",
9
- "@c8y/bootstrap": "1023.14.76",
6
+ "@c8y/style": "1023.14.92",
7
+ "@c8y/ngx-components": "1023.14.92",
8
+ "@c8y/client": "1023.14.92",
9
+ "@c8y/bootstrap": "1023.14.92",
10
10
  "@angular/cdk": "^20.2.14",
11
11
  "monaco-editor": "~0.53.0",
12
12
  "ngx-bootstrap": "20.0.2",
@@ -14,8 +14,8 @@
14
14
  "rxjs": "7.8.2"
15
15
  },
16
16
  "devDependencies": {
17
- "@c8y/options": "1023.14.76",
18
- "@c8y/devkit": "1023.14.76"
17
+ "@c8y/options": "1023.14.92",
18
+ "@c8y/devkit": "1023.14.92"
19
19
  },
20
20
  "peerDependencies": {
21
21
  "@angular/common": ">=20 <21"
package/src/hooks/generic-wizard/minimal-setup/stepper-example.component.html CHANGED
@@ -1,38 +1,52 @@
1
- <c8y-wizard-header> New header </c8y-wizard-header>
2
- <c8y-wizard-body
3
- ><c8y-stepper>
4
- <cdk-step [stepControl]="formGroupStepOne" label="Device name">
1
+ <c8y-wizard-header>New header</c8y-wizard-header>
2
+ <c8y-wizard-body>
3
+ <c8y-stepper>
4
+ <cdk-step
5
+ [stepControl]="formGroupStepOne"
6
+ label="Device name"
7
+ >
5
8
  <div class="m-l-40 m-r-40 m-t-32">
6
- <h4 title="Device name" class="p-b-8">Enter the device name</h4>
7
9
  <c8y-form-group>
8
10
  <div [formGroup]="formGroupStepOne">
11
+ <label for="name">Enter the device name</label>
9
12
  <input
10
13
  class="form-control"
14
+ id="name"
15
+ placeholder="MyDevice"
11
16
  type="text"
17
+ required
12
18
  #nameRef
13
19
  formControlName="name"
14
- placeholder="MyDevice"
15
- required
16
20
  />
17
21
  <c8y-messages>
18
- <c8y-message [name]="'required'" [text]="'Enter the name of the Device'"></c8y-message>
22
+ <c8y-message
23
+ [name]="'required'"
24
+ [text]="'Enter the name of the Device'"
25
+ ></c8y-message>
19
26
  </c8y-messages>
20
27
  </div>
21
28
  </c8y-form-group>
22
29
  </div>
23
30
  <c8y-stepper-buttons></c8y-stepper-buttons>
24
31
  </cdk-step>
25
- <cdk-step state="final" label="Job done!">
32
+ <cdk-step
33
+ state="final"
34
+ label="Job done!"
35
+ >
26
36
  <div class="m-l-40 m-r-40 m-t-32">
27
37
  <h4 class="p-b-32 text-center">Your device is now ready to save the world!</h4>
28
38
  </div>
29
- </cdk-step></c8y-stepper
30
- ></c8y-wizard-body
31
- >
32
- <c8y-wizard-footer *ngIf="stepper.selectedIndex === 0"> </c8y-wizard-footer>
33
-
34
- <c8y-wizard-footer *ngIf="stepper.selectedIndex === 1">
35
- <button (click)="done()" class="btn btn-default" title="{{ 'Done' }}">
36
- {{ 'Done' }}
37
- </button>
39
+ </cdk-step>
40
+ </c8y-stepper>
41
+ </c8y-wizard-body>
42
+ <c8y-wizard-footer>
43
+ @if (stepper.selectedIndex === 1) {
44
+ <button
45
+ class="btn btn-default"
46
+ title="{{ 'Done' }}"
47
+ (click)="done()"
48
+ >
49
+ {{ 'Done' }}
50
+ </button>
51
+ }
38
52
  </c8y-wizard-footer>
package/src/hooks/stepper/steps/step1.component.ts CHANGED
@@ -20,10 +20,16 @@ import {
20
20
  selector: 'tut-step-1-device',
21
21
  template: `
22
22
  <div class="m-l-40 m-r-40 m-t-32">
23
- <h4 class="p-b-8" title="Device name">Enter the device name</h4>
24
23
  <c8y-form-group>
25
24
  <div [formGroup]="formGroupStepOne">
26
- <input class="form-control" placeholder="MyDevice" type="text" formControlName="name" />
25
+ <label for="name">Enter the device name</label>
26
+ <input
27
+ class="form-control"
28
+ id="name"
29
+ placeholder="MyDevice"
30
+ type="text"
31
+ formControlName="name"
32
+ />
27
33
  <c8y-messages>
28
34
  <c8y-message [text]="'Enter the name of the Device'"></c8y-message>
29
35
  </c8y-messages>
package/src/modal/confirm-modal/confirm-modal-example.component.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  import { Component } from '@angular/core';
2
- import { gettext } from '@c8y/ngx-components/gettext';
3
2
  import { CoreModule, FormsModule, ModalModule, ModalService, Status } from '@c8y/ngx-components';
4
3
  import { BsModalService } from 'ngx-bootstrap/modal';
5
4
  import { DeleteModalExampleComponent } from './delete-modal-example.component';
@@ -20,7 +19,7 @@ import { DeleteModalExampleComponent } from './delete-modal-example.component';
20
19
  </div>
21
20
  </div>`,
22
21
  standalone: true,
23
- imports: [ModalModule, FormsModule, CoreModule, DeleteModalExampleComponent]
22
+ imports: [ModalModule, FormsModule, CoreModule]
24
23
  })
25
24
  export class ConfirmModalExampleComponent {
26
25
  constructor(
@@ -34,16 +33,37 @@ export class ConfirmModalExampleComponent {
34
33
 
35
34
  async deleteConfigurationSnapshot() {
36
35
  try {
37
- await this.modalService.confirm(
38
- 'Delete configuration snapshot',
39
- 'You are about to delete the configuration snapshot DeviceA.',
36
+ const result = await this.modalService.confirm(
37
+ 'Delete configuration snapshot?',
38
+ 'You are about to delete the configuration snapshot from "Device A". Do you want to proceed?',
40
39
  Status.DANGER,
41
40
  {
42
- ok: gettext('Delete')
41
+ ok: 'Delete'
42
+ },
43
+ {
44
+ resetToLatestSnapshot: {
45
+ checked: false,
46
+ text: 'Reset configuration to latest snapshot',
47
+ disabledByKey: 'resetToFactoryDefaults'
48
+ },
49
+ resetToFactoryDefaults: {
50
+ checked: false,
51
+ text: 'Reset configuration to factory defaults',
52
+ disabledByKey: 'resetToLatestSnapshot'
53
+ },
54
+ restartDevice: {
55
+ checked: false,
56
+ text: 'Restart device',
57
+ showIf: () => true
58
+ }
43
59
  }
44
60
  );
45
61
  // eslint-disable-next-line no-console
46
62
  console.log('Delete clicked');
63
+ if (typeof result !== 'boolean') {
64
+ // eslint-disable-next-line no-console
65
+ console.log('Options selected:', result.confirmOptions);
66
+ }
47
67
  } catch (e) {
48
68
  // eslint-disable-next-line no-console
49
69
  console.log('Cancel clicked');
package/src/stepper/device-stepper.component.html CHANGED
@@ -1,50 +1,71 @@
1
1
  <div class="p-b-16">
2
- <div *ngIf="isModal" class="modal-header modal-header-primary text-center">
3
- <i [c8yIcon]="'diamond'" style="font-size: 32px"></i>
4
- <h3 id="modal-title" class="p-t-16">{{ 'Create a new device ' }}</h3>
5
- </div>
2
+ @if (isModal) {
3
+ <div class="modal-header modal-header-primary text-center">
4
+ <i
5
+ [c8yIcon]="'diamond'"
6
+ style="font-size: 32px"
7
+ ></i>
8
+ <h3
9
+ class="p-t-16"
10
+ id="modal-title"
11
+ >
12
+ {{ 'Create a new device ' }}
13
+ </h3>
14
+ </div>
15
+ }
6
16
  <c8y-stepper
7
- (onStepChange)="navigate($event)"
8
17
  [disableDefaultIcons]="{ edit: true, done: false }"
9
- [customClasses]="['m-l-40', 'm-r-40', 'm-t-32']"
10
18
  id="modal-body"
19
+ (selectionChange)="navigate($event.selectedIndex)"
20
+ [customClasses]="['m-l-40', 'm-r-40', 'm-t-32']"
11
21
  linear
12
22
  >
13
23
  <!-- override icons -->
14
24
  <ng-template c8yStepperIcon="final">
15
25
  <span [c8yIcon]="'hand-peace-o'"></span>
16
26
  </ng-template>
17
- <cdk-step [stepControl]="formGroupStepOne" label="Device name">
27
+ <cdk-step
28
+ [stepControl]="formGroupStepOne"
29
+ label="Device name"
30
+ >
18
31
  <div class="m-l-40 m-r-40 m-t-32">
19
- <h4 title="Device name" class="p-b-8">Enter the device name</h4>
20
32
  <c8y-form-group>
21
33
  <div [formGroup]="formGroupStepOne">
34
+ <label for="name">Enter the device name</label>
22
35
  <input
23
36
  class="form-control"
37
+ id="name"
38
+ placeholder="MyDevice"
24
39
  type="text"
40
+ required
25
41
  formControlName="name"
26
- placeholder="MyDevice"
27
42
  #nameRef
28
- required
29
43
  />
30
44
  <c8y-messages>
31
- <c8y-message [name]="'required'" [text]="'Enter the name of the Device'"></c8y-message>
45
+ <c8y-message
46
+ [name]="'required'"
47
+ [text]="'Enter the name of the Device'"
48
+ ></c8y-message>
32
49
  </c8y-messages>
33
50
  </div>
34
51
  </c8y-form-group>
35
52
  </div>
36
53
  <c8y-stepper-buttons></c8y-stepper-buttons>
37
54
  </cdk-step>
38
- <cdk-step [stepControl]="formGroupStepTwo" label="Device type">
55
+ <cdk-step
56
+ [stepControl]="formGroupStepTwo"
57
+ label="Device type"
58
+ >
39
59
  <div class="m-l-40 m-r-40 m-t-32">
40
- <h4 title="Enter device type" class="p-b-8">Enter the device type</h4>
41
60
  <c8y-form-group>
42
61
  <div [formGroup]="formGroupStepTwo">
62
+ <label for="type">Enter the device type</label>
43
63
  <input
44
64
  class="form-control"
45
- type="any"
46
- formControlName="type"
65
+ id="type"
47
66
  placeholder="e.g. phone"
67
+ type="text"
68
+ formControlName="type"
48
69
  />
49
70
  </div>
50
71
  </c8y-form-group>
@@ -57,7 +78,10 @@
57
78
  ></c8y-stepper-buttons>
58
79
  </cdk-step>
59
80
  <!-- Final step -->
60
- <cdk-step state="final" label="Job done!">
81
+ <cdk-step
82
+ state="final"
83
+ label="Job done!"
84
+ >
61
85
  <div class="m-l-40 m-r-40 m-t-32">
62
86
  <h4 class="p-b-32 text-center">Your device is now ready to save the world!</h4>
63
87
  </div>