feat(reminders): fix some quirks

johannesjo · Nov 25, 2018 · 75d8703 · 75d8703
1 parent 6438e7f
commit 75d8703
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 41 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -136,6 +136,7 @@
     "rxjs": "^6.3.3",
     "rxjs-compat": "^6.3.3",
     "shortid": "^2.2.13",
+    "throttle-debounce": "^2.0.1",
     "zone.js": "~0.8.26"
   },
   "devDependencies": {

diff --git a/src/app/note/dialog-add-note-reminder/dialog-add-note-reminder.component.html b/src/app/note/dialog-add-note-reminder/dialog-add-note-reminder.component.html
@@ -1,58 +1,64 @@
 <form (submit)="save()">
   <mat-dialog-content>
     <h2 class="mat-h2">{{isEdit ? 'Edit' : 'Add'}} reminder for note</h2>
-
-    <mat-form-field>
-      <!--[matDatepicker]="myDatepicker"-->
-      <input
-        matInput
-        placeholder="Title for notification"
-        type="text"
-        [(ngModel)]="title"
-        required
-        name="title">
-      <mat-error>You need to enter a title</mat-error>
-      <!--<mat-datepicker-toggle matPrefix-->
-      <!--[for]="myDatepicker"></mat-datepicker-toggle>-->
-      <!--<mat-datepicker #myDatepicker></mat-datepicker>-->
-    </mat-form-field>
-    <mat-form-field>
-      <!--[matDatepicker]="myDatepicker"-->
-      <input
-        matInput
-        placeholder="Datetime for reminder"
-        type="datetime-local"
-        [(ngModel)]="date"
-        required
-        name="date">
-      <mat-error>The entered value is not a date!</mat-error>
-      <mat-icon matPrefix="">schedule</mat-icon>
-      <!--<mat-datepicker-toggle matPrefix-->
-      <!--[for]="myDatepicker"></mat-datepicker-toggle>-->
-      <!--<mat-datepicker #myDatepicker></mat-datepicker>-->
-    </mat-form-field>
-
+    <div class="form-wrapper">
+      <mat-form-field>
+        <!--[matDatepicker]="myDatepicker"-->
+        <input
+          matInput
+          placeholder="Title for notification"
+          type="text"
+          [(ngModel)]="title"
+          required
+          name="title">
+        <mat-error>You need to enter a title</mat-error>
+        <!--<mat-datepicker-toggle matPrefix-->
+        <!--[for]="myDatepicker"></mat-datepicker-toggle>-->
+        <!--<mat-datepicker #myDatepicker></mat-datepicker>-->
+      </mat-form-field>
+      <mat-form-field>
+        <!--[matDatepicker]="myDatepicker"-->
+        <input
+          matInput
+          placeholder="Datetime for reminder"
+          type="datetime-local"
+          [(ngModel)]="date"
+          required
+          name="date">
+        <mat-error>The entered value is not a date!</mat-error>
+        <mat-icon matPrefix="">schedule</mat-icon>
+        <!--<mat-datepicker-toggle matPrefix-->
+        <!--[for]="myDatepicker"></mat-datepicker-toggle>-->
+        <!--<mat-datepicker #myDatepicker></mat-datepicker>-->
+      </mat-form-field>
+    </div>
   </mat-dialog-content>
 
   <mat-dialog-actions align="end">
     <div class="wrap-buttons">
       <button color="primary"
               type="submit"
               class="btn btn-primary submit-button"
-              mat-raised-button>Save Reminder
+              mat-raised-button>
+        <mat-icon>schedule</mat-icon>
+        {{isEdit ? 'Update' : 'Add'}} Reminder
       </button>
 
       <button type="button"
               *ngIf="isEdit"
               color="warn"
               (click)="remove()"
               class="btn btn-primary submit-button"
-              mat-raised-button>Delete Reminder
+              mat-raised-button>
+        <mat-icon>delete_forever</mat-icon>
+        Delete Reminder
       </button>
       <button type="button"
               (click)="close()"
               class="btn btn-primary submit-button"
-              mat-raised-button>Cancel
+              mat-raised-button>
+
+        Cancel
       </button>
     </div>
   </mat-dialog-actions>

diff --git a/src/app/note/dialog-add-note-reminder/dialog-add-note-reminder.component.scss b/src/app/note/dialog-add-note-reminder/dialog-add-note-reminder.component.scss
@@ -0,0 +1,4 @@
+.form-wrapper{
+  display: flex;
+  flex-direction: column;
+}
diff --git a/src/app/note/dialog-add-note-reminder/dialog-add-note-reminder.component.ts b/src/app/note/dialog-add-note-reminder/dialog-add-note-reminder.component.ts
@@ -35,7 +35,8 @@ export class DialogAddNoteReminderComponent {
       this.date = this._convertDate(new Date(this.reminder.remindAt));
       this.title = this.reminder.title;
     } else {
-      this.date = this._convertDate(new Date());
+      const offset = new Date().getTimezoneOffset();
+      this.date = this._convertDate(new Date(Date.now() - (offset * 1000 * 60)));
       this.title = this.note.content.substr(0, 40);
     }
   }

diff --git a/src/app/note/note.module.ts b/src/app/note/note.module.ts
@@ -47,6 +47,7 @@ export class NoteModule {
 
     this._reminderService.onReminderActive$.subscribe(reminder => {
       if (!isDialogOpen && reminder && reminder.type === 'NOTE') {
+        isDialogOpen = true;
         this._matDialog.open(DialogViewNoteReminderComponent, {
           data: {
             reminder: reminder,

diff --git a/src/app/reminder/reminder.service.ts b/src/app/reminder/reminder.service.ts
@@ -5,7 +5,8 @@ import { RecurringConfig, Reminder, ReminderType } from './reminder.model';
 import { SnackService } from '../core/snack/snack.service';
 import shortid from 'shortid';
 import { NotifyService } from '../core/notify/notify.service';
-import { BehaviorSubject, Observable } from 'rxjs';
+import { BehaviorSubject } from 'rxjs';
+import { debounce, throttle } from 'throttle-debounce';
 
 const WORKER_PATH = 'assets/web-workers/reminder.js';
 
@@ -15,6 +16,7 @@ const WORKER_PATH = 'assets/web-workers/reminder.js';
 export class ReminderService {
   private _w: Worker;
   private _reminders: Reminder[];
+  private _throttledShowNotification = throttle(60000, this._showNotification.bind(this));
 
   public onReminderActive$: BehaviorSubject<Reminder> = new BehaviorSubject(null);
 
@@ -56,13 +58,11 @@ export class ReminderService {
     });
     // this._persistenceService
     this._saveModel(this._reminders);
-    console.log(this._reminders);
     return id;
   }
 
   updateReminder(reminderId: string, reminderChanges: Partial<Reminder>) {
     Object.assign(this.getById(reminderId), reminderChanges);
-    console.log(this._reminders);
     this._saveModel(this._reminders);
   }
 
@@ -82,17 +82,22 @@ export class ReminderService {
   private _onReminderActivated(msg: MessageEvent) {
     const reminder = msg.data as Reminder;
     // TODO get related model here
+    this.onReminderActive$.next(reminder);
+    this._throttledShowNotification(reminder);
+  }
+
+  private _showNotification(reminder: Reminder) {
     this._notifyService.notify({
       title: reminder.title,
     });
-    this.onReminderActive$.next(reminder);
   }
 
   private _loadFromLs(): Reminder[] {
     return this._persistenceService.loadReminders() || [];
   }
 
   private _saveModel(reminders: Reminder[]) {
+    console.log('Reminder._saveModel', this._reminders);
     this._persistenceService.saveReminders(reminders);
     this._updateRemindersInWorker(this._reminders);
   }

diff --git a/src/assets/web-workers/reminder.js b/src/assets/web-workers/reminder.js
@@ -1,5 +1,5 @@
 const CHECK_INTERVAL_DURATION = 1000;
-const MESSAGE_INTERVAL_DURATION = 60000;
+const MESSAGE_INTERVAL_DURATION = 10000;
 let currentMessageTimerVal = 0;
 let checkInterval;
 
@@ -15,13 +15,15 @@ const reInitCheckInterval = (reminders) => {
     return;
   }
 
-  setInterval(() => {
+  checkInterval = setInterval(() => {
     const oldestDueReminder = reminders.reduce(
       (minReminder, reminder) => (reminder.remindAt < minReminder.remindAt)
         ? reminder
         : minReminder, reminders[0]
     );
 
+    console.log('oldestDueReminder in:', (oldestDueReminder.remindAt - Date.now()) / 1000, oldestDueReminder);
+
     if (oldestDueReminder && oldestDueReminder.remindAt < Date.now()) {
       if (currentMessageTimerVal <= 0) {
         self.postMessage(oldestDueReminder);