@c8y/tutorial 1021.0.11 → 1021.2.1

package/cumulocity.config.ts

@@ -736,6 +736,13 @@ export default {
         path: './src/typeahead/typeahead-example.module.ts',
         description: 'This is an example for the typeahead component.',
         scope: 'self'
+      },
+      {
+        name: 'Countdown',
+        module: 'CountdownExampleModule',
+        path: './src/countdown/countdown-example.module.ts',
+        description: 'This is an example for the countdown component.',
+        scope: 'self'
       }
     ]
   },

package/package.json

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

package/src/countdown/countdown-example.component.html

@@ -0,0 +1,35 @@
+<div class="time-elapsed">
+  <!-- important -->
+  <c8y-countdown-interval
+    [countdownInterval]="10000"
+    (countdownEnded)="onCountdownEnded()"
+  ></c8y-countdown-interval>
+  <!-- /important -->
+</div>
+<div class="container-fluid p-24 text-center">
+  <button
+    class="btn btn-default"
+    (click)="startCountdown()"
+  >
+    Start
+  </button>
+  <button
+    class="btn btn-default"
+    (click)="stopCountdown()"
+  >
+    Stop
+  </button>
+  <button
+    class="btn btn-default"
+    (click)="stopCountdownAtZero()"
+  >
+    Stop at 0
+  </button>
+  <button
+    class="btn btn-default"
+    (click)="resetCountdown()"
+  >
+    Reset
+  </button>
+</div>
+`

package/src/countdown/countdown-example.component.ts

@@ -0,0 +1,43 @@
+import { AfterViewInit, Component, ViewChild } from '@angular/core';
+import {
+  CommonModule,
+  CountdownIntervalComponent,
+  CountdownIntervalModule
+} from '@c8y/ngx-components';
+
+@Component({
+  selector: 'tut-countdown-example',
+  templateUrl: './countdown-example.component.html',
+  standalone: true,
+  imports: [CommonModule, CountdownIntervalModule]
+})
+export class CountdownExampleComponent implements AfterViewInit {
+  @ViewChild(CountdownIntervalComponent)
+  countdownIntervalComponent: CountdownIntervalComponent;
+
+  ngAfterViewInit(): void {
+    this.startCountdown(); // We need to start the countdown at some point, for example, in AfterViewInit
+  }
+
+  startCountdown(): void {
+    this.countdownIntervalComponent.start();
+  }
+
+  stopCountdown(): void {
+    this.countdownIntervalComponent.stop();
+  }
+
+  stopCountdownAtZero(): void {
+    this.countdownIntervalComponent.stop(true);
+  }
+
+  resetCountdown(): void {
+    this.countdownIntervalComponent.reset();
+  }
+
+  onCountdownEnded(): void {
+    console.log('Countdown Ended!');
+
+    this.resetCountdown();
+  }
+}

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

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  providers: [
+    hookRoute({
+      path: 'help',
+      loadComponent: () =>
+        import('./countdown-example.component').then(m => m.CountdownExampleComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        path: '/countdown',
+        label: 'Countdown',
+        icon: 'hand-o-right',
+        priority: 110
+      })
+    )
+  ]
+})
+export class CountdownExampleModule {}