#10: sets indicator tooltip

plugin/components/reminder-indicator/reminder-indicator.component.html

@@ -1,4 +1,5 @@
-<button type="button" class="{{ status }}" [class.open]="open" (click)="toggleDrawer()">
+<button type="button" class="{{ status }}" [tooltip]="tooltipText" [class.open]="open"
+  (click)="toggleDrawer()">
   <em>
     <ng-container *ngIf="open; else showText">
       <i [c8yIcon]="'close'"></i>

plugin/components/reminder-indicator/reminder-indicator.component.ts

@@ -2,27 +2,29 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
 import { REMINDER_MAX_COUNTER } from '../../reminder.model';
 import { ReminderService } from '../../services/reminder.service';
 import { Subscription } from 'rxjs';
+import { TranslateService } from '@ngx-translate/core';
 
 const ReminderStatus = {
   default: '',
   warning: 'status-warning',
-  danger: 'status-danger',
+  danger: 'status-danger'
 };
 
 @Component({
   selector: 'c8y-reminder-indicator',
   templateUrl: './reminder-indicator.component.html',
-  styleUrls: ['./reminder-indicator.component.less'],
+  styleUrls: ['./reminder-indicator.component.less']
 })
 export class ReminderIndicatorComponent implements OnInit, OnDestroy {
   open = false;
   counter = 0;
   status = ReminderStatus.default;
   maxCounter = REMINDER_MAX_COUNTER;
+  tooltipText!: string;
 
   private subscription = new Subscription();
 
-  constructor(private reminderService: ReminderService) { }
+  constructor(private reminderService: ReminderService, private translateService: TranslateService) {}
 
   ngOnInit(): void {
     // open status
@@ -34,7 +36,10 @@ export class ReminderIndicatorComponent implements OnInit, OnDestroy {
 
     // reminder counter
     this.subscription.add(
-      this.reminderService.reminderCounter$.subscribe((counter) => this.setCounterStatus(counter))
+      this.reminderService.reminderCounter$.subscribe((counter) => {
+        this.setCounterStatus(counter);
+        this.setCounterText();
+      })
     );
   }
 
@@ -46,11 +51,28 @@ export class ReminderIndicatorComponent implements OnInit, OnDestroy {
     this.reminderService.toggleDrawer();
   }
 
-  private setCounterStatus(counter: number) {
+  private setCounterStatus(counter: number): void {
     this.counter = counter;
 
     if (counter >= this.maxCounter) this.status = ReminderStatus.danger;
     else if (counter >= 1) this.status = ReminderStatus.warning;
     else this.status = ReminderStatus.default;
   }
+
+  private setCounterText(counter = this.counter): void {
+    let txt: string;
+
+    switch (counter) {
+      case 0:
+        txt = 'No reminder is due';
+        break;
+      case 1:
+        txt = 'One reminder is due';
+        break;
+      default:
+        txt = '{{ counter }} reminders are due';
+    }
+
+    this.tooltipText = this.translateService.instant(txt, { counter });
+  }
 }

plugin/components/reminder-modal/reminder-modal.component.html

@@ -4,14 +4,19 @@ <h3 translate>Create a Reminder</h3>
 
 <form [formGroup]="form" (submit)="submit()">
   <div class="modal-body">
-    <c8y-asset-selector-miller class="m-b-24" [label]="'Assign to'" [selectedDevice]="asset" [isLoading]="isLoading"
-      (onSelected)="assetSelected($event.items)" [config]="{
-      groupsSelectable: true,
-      singleColumn: true,
-      columnHeaders: true,
-      showFilter: true,
-      search: true
-    }"></c8y-asset-selector-miller>
+    <c8y-asset-selector-miller class="m-b-24"
+      [label]="'Assign to'"
+      [selectedDevice]="asset"
+      [isLoading]="isLoading"
+      [config]="{
+        groupsSelectable: true,
+        singleColumn: true,
+        columnHeaders: true,
+        showFilter: true,
+        search: true
+      }"
+      (onSelected)="assetSelected($event.items)"
+    ></c8y-asset-selector-miller>
 
     <formly-form [form]="form" [fields]="fields" [model]="reminder"></formly-form>
   </div>

plugin/components/reminder-modal/reminder-modal.component.ts

@@ -16,16 +16,15 @@ import { Reminder, ReminderStatus, REMINDER_TEXT_LENGTH, REMINDER_TYPE } from '.
   styleUrls: ['./reminder-modal.component.less']
 })
 export class ReminderModalComponent implements OnInit {
-  // TODO selectable context
   isLoading = false;
   asset!: Partial<IManagedObject>;
   form = new FormGroup({});
 
   reminder: Partial<Reminder> = {
-    // source: {
-    //   id: undefined,
-    //   name: undefined
-    // },
+    source: {
+      id: undefined,
+      name: undefined
+    },
     text: undefined,
     time: undefined,
     type: REMINDER_TYPE
@@ -75,15 +74,15 @@ export class ReminderModalComponent implements OnInit {
 
   ngOnInit(): void {
     this.asset = this.getAssetFromRoute(this.activatedRoute.snapshot);
-    // this.reminder.source.id = this.asset.id;
-    // this.reminder.source.name = String(this.asset.name) || '';
   }
 
   close() {
     this.bsModalRef.hide();
   }
 
   assetSelected(asset: Partial<IManagedObject>): void {
+    if (!asset || !asset.id) return;
+
     this.asset = {
       id: asset.id,
       name: asset.name

plugin/reminder-plugin.module.ts

@@ -4,6 +4,7 @@ import { RouterModule } from '@angular/router';
 import { CoreModule, EventRealtimeService, hookAction } from '@c8y/ngx-components';
 import { AssetSelectorModule } from '@c8y/ngx-components/assets-navigator';
 import { FormlyModule } from '@ngx-formly/core';
+import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { MomentModule } from 'ngx-moment';
 import { ReminderDrawerComponent } from './components/reminder-drawer/reminder-drawer.component';
 import { ReminderIndicatorComponent } from './components/reminder-indicator/reminder-indicator.component';
@@ -21,7 +22,8 @@ import { ReminderService } from './services/reminder.service';
     MomentModule,
     FormlyModule.forChild({
       types: [{ name: 'time', component: TimeFieldType }]
-    })
+    }),
+    TooltipModule
   ],
   declarations: [ReminderDrawerComponent, ReminderIndicatorComponent, ReminderModalComponent, TimeFieldType],
   providers: [

plugin/services/reminder.service.ts

@@ -34,6 +34,7 @@ export class ReminderService {
   private set reminders(reminders: Reminder[]) {
     this._reminders = reminders;
     this.reminders$.next(this._reminders);
+    this.updateCounter();
   }
 
   private get reminderCounter(): number {
@@ -250,4 +251,17 @@ export class ReminderService {
       return reminder;
     });
   }
+
+  private updateCounter(): void {
+    const now = new Date().getTime();
+    let count = 0;
+    let dueDate: number;
+
+    this.reminders.forEach((reminder) => {
+      dueDate = new Date(reminder.time).getTime();
+      if (dueDate <= now && reminder.status === ReminderStatus.active) count++;
+    });
+
+    this.reminderCounter = count;
+  }
 }