⏰ Notification reminder for notes

hsbalar · Apr 23, 2017 · 16320c2 · 16320c2
1 parent 3cd8b67
commit 16320c2
Show file tree

Hide file tree

Showing 11 changed files with 357 additions and 56 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "preserver",
   "productName": "Preserver",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "Preserver is an notes organizer desktop app based on Electron.",
   "main": "main.js",
   "author": "Hitesh Balar <www.hiteshbalar.com>",
@@ -31,6 +31,7 @@
     "@angular/platform-browser": "~2.4.0",
     "@angular/platform-browser-dynamic": "~2.4.0",
     "@angular/router": "~3.4.0",
+    "@ngui/datetime-picker": "^0.16.1",
     "angular2-notifications": "^0.4.48",
     "core-js": "^2.4.1",
     "dragula": "^3.7.2",

diff --git a/public/css/app.css b/public/css/app.css
@@ -2,7 +2,6 @@
 .gu-mirror{position:fixed!important;margin:0!important;z-index:9999!important;opacity:.8;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";filter:alpha(opacity=80)}.gu-hide{display:none!important}.gu-unselectable{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.gu-transit{opacity:.2;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";filter:alpha(opacity=20)}
 
 .note .panel {
-  margin: 8px;
   transition: opacity 0.4s ease-in-out;
 }
 
@@ -27,6 +26,10 @@
   word-wrap: break-word;
 }
 
+.my-note {
+  padding-bottom: 0px;
+}
+
 .my-note p {
   font-family: 'Roboto Condensed','Droid Sans',arial,sans-serif;
   font-size: 17px;
@@ -146,6 +149,19 @@
   padding: 10px 5px;
 }
 
+.note-footer {
+  margin-bottom: 0px;
+}
+
+.reminder-info {
+  padding: 0px 15px 5px 15px;
+  color: #747474;
+}
+
+.reminder-info span a {
+  color: #747474;  
+}
+
 .label-default {
   background-color: #FFF;
 }
@@ -267,12 +283,8 @@
   resize: none !important;
  }
 
-.edit-saved .modal-header {
-  padding-left: 14px !important;
-}
-
-.modal-content .modal-body {
-  padding: 0px 0px 5px 14px!important;
+.edit-saved .modal-body {
+  padding-top: 0px !important;
 }
 
 .grid-container {
@@ -389,3 +401,12 @@
 	from { -o-transform: rotate(0deg) scale(0.955) skew(0deg) translate(0px); }
 	to { -o-transform: rotate(0deg) scale(1.0) skew(0deg) translate(0px); }
 }
+
+.ngui-datetime-picker-wrapper ngui-datetime-picker {
+  position: relative !important;
+  top: 0px !important;
+}
+
+.ngui-datetime-picker .days {
+  padding: 0px !important; 
+}
diff --git a/public/sound/notification.mp3 b/public/sound/notification.mp3
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,11 +1,18 @@
 import { Component, AfterViewInit } from '@angular/core';
+import { NotesTableService }        from './services';
 
 @Component({
   selector: 'my-app',
   template: '<router-outlet></router-outlet>'
 })
 export class AppComponent implements AfterViewInit {
 
+  constructor(private _notesService: NotesTableService,) {
+    this._notesService.updateReminderTable('notes');
+    this._notesService.updateReminderTable('archiveNotes');
+    this._notesService.reminderTickStart();
+  }
+
   ngAfterViewInit() {
     $.material.init();
   }

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -1,6 +1,9 @@
 import { NgModule }             from '@angular/core';
 import { FormsModule }          from '@angular/forms';
 import { BrowserModule }        from '@angular/platform-browser';
+import { NguiDatetimePickerModule } from '@ngui/datetime-picker';
+import { SimpleNotificationsModule,
+         PushNotificationsModule }  from 'angular2-notifications';
 
 import { AppRoutingModule }     from './app.routing';
 import { AppComponent }         from './app.component';
@@ -16,13 +19,14 @@ import { FluidHeightDirective } from './directives/fluid-height';
 import { NotesTable,
          DragulaService,
          NotesTableService }    from './services';
-import { SimpleNotificationsModule } from 'angular2-notifications';
 
 @NgModule({
   imports: [
     FormsModule,
     BrowserModule,
     AppRoutingModule,
+    NguiDatetimePickerModule,
+    PushNotificationsModule,
     SimpleNotificationsModule.forRoot()
   ],
   declarations: [

diff --git a/src/app/components/archive/archive.component.html b/src/app/components/archive/archive.component.html
@@ -6,7 +6,6 @@
           <li class="dropdown">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <i class="glyphicon glyphicon-option-vertical"></i></a>
             <ul class="dropdown-menu">
-
               <li class="dropdown-header">Preferences</li>
               <li><a [routerLink]="['/notes']">My Notes</a></li>
               <li><a [routerLink]="['/archive-notes']">Archive Notes</a></li>   
@@ -29,7 +28,7 @@
         <ul class="nav navbar-nav navbar-right">
           <li>
             <a href="javascript:void(0)" (click)="displayTypeChange()">
-              <i class="{{displayList ? 'fa fa-bars' : 'fa fa-th'}}"></i>
+              <i class="{{displayList ? 'fa fa-th' : 'fa fa-bars'}}"></i>
             </a>
           </li>
           <li class="dropdown">
@@ -53,14 +52,23 @@
   <spinner *ngIf="spinner"></spinner>
   <div class="{{ displayList ? 'container note animate' : 'container note grid-container animate'}}" [dragula]='"another-bag"' [dragulaModel]='notes'>
     <div *ngFor='let text of notes' class="{{ displayList ? 'panel panel-default ' + text.doc.color : 'panel panel-default grid-item ' + text.doc.color}}" #noteRow [attr.id]="text.doc._id">
-      <div data-toggle="modal" [attr.data-target]="'#note' + text.doc._id" (click)="editModalNoteClick(text)">
+      <div data-toggle="modal" data-target="#note_edit_modal" (click)="editModalNoteClick(text)">
         <div class="panel-body my-note module line-clamp">
           <p><strong>{{text.doc.title}}</strong></p>
-          <p> {{text.doc.note}} </p>
+          <p>{{text.doc.note}}</p>
         </div>
       </div>
       <div class="{{ 'panel-footer ' + text.doc.color}}">
         <ul class="note-footer">
+          <li>
+            <a data-toggle="modal"
+               data-target="#remind_me_modal"
+               (click)="setRemindMeNote(text)"
+               class="btn btn-link btn-raised"
+               title="Remind">
+               <i class="fa fa-bell"></i>
+            </a>
+          </li>
           <li><a href="javascript:void(0)" class="btn btn-link btn-raised"
              title="Unarchive" (click)="unArchive(text, noteRow)">
             <i class="fa fa-upload"></i>        
@@ -87,24 +95,61 @@
           </a></li>
         </ul>
       </div>
-      <div class="modal fade" id="{{'note' + text.doc._id}}" tabindex="-1" role="dialog" aria-hidden="true">
-        <div class="modal-dialog">
-          <div class="{{'modal-content edit-saved ' + text.doc.color}}">
-            <div class="modal-header">
-              <h4 class="modal-title">
-                <div class="form-group label-floating">
-                <input type="text" class="form-control edit-saved-input" placeholder="Title" [(ngModel)]="editNoteDraft.title" [value]="text.doc.title ? text.doc.title : ''" >
-                </div>                
-              </h4>
-            </div>
-            <div class="modal-body">
-              <textarea class="form-control edit-saved-textera" #editSavedTextarea modaleditorautosize placeholder="Write a note" [(ngModel)]="editNoteDraft.note" [value]="text.doc?.note"></textarea>              
-            </div>
-            <div class="modal-footer">
-              <button type="button" class="btn btn-primary btn-sm" data-dismiss="modal" (click)="updateModalNote(text)">Done</button>
-            </div>
+      <div class="{{text.doc.color + ' reminder-info'}}" *ngIf="text.doc.reminder">
+        <i class="fa fa-clock-o"></i> {{text.doc.reminder?.date}}<span class="pull-right"><a href="javascript:void(0)" (click)="removeReminder(text)"><i class="fa fa-times-circle"></i></a></span>
+      </div>
+    </div>
+  </div>
+  <div class="modal fade" id="note_edit_modal" tabindex="-1" role="dialog" aria-hidden="true">
+    <div class="modal-dialog">
+      <div class="{{'modal-content edit-saved ' + toEditNote?.doc?.color}}">
+        <div class="modal-header">
+          <h4 class="modal-title">
+            <div class="form-group label-floating">
+            <input type="text" class="form-control edit-saved-input" placeholder="Title" [(ngModel)]="editNoteDraft.title" [value]="toEditNote?.doc.title" >
+            </div>                
+          </h4>
+        </div>
+        <div class="modal-body">
+          <textarea class="form-control edit-saved-textera" #editSavedTextarea modaleditorautosize placeholder="Write a note" [(ngModel)]="editNoteDraft.note" [value]="toEditNote?.doc.note"></textarea>              
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-primary btn-sm" data-dismiss="modal" (click)="updateModalNote(toEditNote)">Done</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="modal fade" id="remind_me_modal">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+          <h4 class="modal-title">Remind Me</h4>
+        </div>
+        <div class="modal-body">
+          <label><i class="fa fa-clock-o"></i> Set date and time</label>          
+          <div class="form-group">
+              <input class="form-control"
+                    readonly="readonly"
+                    required
+                    placeholder="Set your schedule here"
+                    [(ngModel)]="remindMe.date"
+                    ngui-datetime-picker>
+          </div>
+          <div class="form-group">
+            <select id="s1" class="form-control" [(ngModel)]="remindMe.repeat">
+              <option value="doesnotrepeat">Doesn't repeat</option>
+              <option value="daily">Daily</option>
+              <option value="weekly">Weekly</option>
+              <option value="monthly">Monthly</option>
+              <option value="yearly">Yearly</option>
+            </select>
           </div>
         </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-default btn-sm" data-dismiss="modal" (click)="remindMe.date = null">CANCEL</button>
+          <button type="button" class="btn btn-primary btn-sm" data-dismiss="modal" (click)="setReminderClick()">SET</button>
+        </div>
       </div>
     </div>
   </div>

diff --git a/src/app/components/archive/archive.component.ts b/src/app/components/archive/archive.component.ts
@@ -17,6 +17,8 @@ export class ArchiveComponent {
   public notes: any;
   public orderNotes: any;
   public editNoteDraft: any;
+  public toEditNote: any;
+  public remindMe: any;
   public notificationOptions: any;
   public spinner: boolean = true;
   public displayList: boolean = false;
@@ -26,12 +28,18 @@ export class ArchiveComponent {
   public subscription: Subscription;
 
   constructor (
-      private dragulaService: DragulaService,
+      private _dragulaService: DragulaService,
       private _notesService: NotesTableService,
       private _notificationsService: NotificationsService
     ) {
     this.notes = [];
     this.editNoteDraft = {};
+    this.toEditNote = null;
+    this.remindMe = {
+      date: null,
+      repeat: 'doesnotrepeat',
+      noteToSet: null
+    };
     this.order = [];
     this.orderNotes = [];
     this.notificationOptions = {
@@ -45,7 +53,7 @@ export class ArchiveComponent {
       rtl: false
     };
 
-    dragulaService.dropModel.subscribe((value) => {
+    _dragulaService.dropModel.subscribe((value) => {
       this.onDropModel(value.slice(1));
     });
     this.displayList = localStorage.getItem("displayArchiveTypeList") == 'true' ? true : false;
@@ -128,6 +136,37 @@ export class ArchiveComponent {
     }
   }
 
+  setRemindMeNote(note) {
+    this.remindMe.noteToSet = note;
+  }
+
+  setReminderClick() {
+    if (this.remindMe.date) {
+      this.remindMe.noteToSet.doc.reminder = {
+        date: this.remindMe.date.toString(),
+        repeat: this.remindMe.repeat
+      };
+      this._notesService.updateNote('archiveNotes', this.remindMe.noteToSet.doc)
+        .then(res => {
+          this.remindMe.date = null;
+          this.remindMe.repeat = 'doesnotrepeat';
+          this.remindMe.noteToSet = null;
+          this._notesService.updateReminderTable('archiveNotes');
+          this.refreshNotesTables();
+          this._notificationsService.alert("Done", "Reminder set");
+        }, err => {
+          this.editNoteDraft = {};
+        });
+    }
+  }
+
+  removeReminder(note) {
+    note.doc.reminder = null;
+    this._notesService.updateNote('archiveNotes', note.doc);
+    this._notesService.updateReminderTable('archiveNotes');    
+    this.refreshNotesTables();    
+  }
+
   updateModalNote(note) {
     note.doc.note = this.editNoteDraft.note;
     note.doc.title = this.editNoteDraft.title;
@@ -141,6 +180,7 @@ export class ArchiveComponent {
   }
 
   editModalNoteClick(note) {
+    this.toEditNote = note;
     this.editNoteDraft.title = note.doc.title;
     this.editNoteDraft.note = note.doc.note;
   }