[#21] implements the notification when notes are overdue

components/note/OverdueNotifications.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <v-snackbar :value="true"
+                right top
+                color="primary"
+                class="text-center"
+                :timeout="0"
+                v-for="note of overdueNotes" :key="note.id">
+      <h3><v-icon>alarm</v-icon> {{note.title}}</h3>
+      <v-btn icon @click="removeAlarm(note.id)">
+        <v-icon>close</v-icon>
+      </v-btn>
+    </v-snackbar>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapMutations } from 'vuex';
+export default {
+  name: "OverdueNotifications",
+  computed: {
+    ...mapGetters({
+      overdueNotes: 'note/getOverdueNotes',
+    }),
+  },
+  methods: {
+    ...mapMutations({
+      removeAlarm: 'note/removeOverdueAlarm'
+    }),
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

components/note/form/Reminder.vue

@@ -185,6 +185,7 @@
         data.tags = this.note.tags
         data.content = {}
         data.content.date = this.note.date
+        data.content.noticed = false
 
         if(this.note.markdown) data.content.markdown = this.note.content
         else data.content.text = this.note.content

layouts/default.vue

@@ -73,6 +73,7 @@
     </v-app-bar>
 
     <v-content>
+      <OverdueNotifications />
       <nuxt />
     </v-content>
   </v-app>
@@ -82,9 +83,10 @@
 import { mapState } from 'vuex';
 import { generateBoardQuery, readBoardQuery } from '../common/boardQuery'
 import Info from "../components/Info";
+import OverdueNotifications from "../components/note/OverdueNotifications";
 
 export default {
-  components: {Info},
+  components: {OverdueNotifications, Info},
   data () {
     return {
       clipped: false,

nuxt.config.js

@@ -3,15 +3,14 @@ import colors from 'vuetify/es5/util/colors'
 // only add `router.base = '/<repository-name>/'` if `DEPLOY_ENV` is `GH_PAGES`
 const routerBase = process.env.DEPLOY_ENV === 'GH_PAGES' ? {
   router: {
-    middleware: ['encryption', 'dropbox'],
     base: '/dev-notes/'
   }
 } : {
   router: {
-    middleware: ['encryption', 'dropbox'],
     base: '/'
   }
 }
+routerBase.router.middleware = ['encryption', 'dropbox']
 
 export default {
   ...routerBase,
@@ -82,6 +81,8 @@ export default {
     '~/plugins/i18n',
     '~/plugins/init',
     '~/plugins/style',
+    '~/plugins/notification',
+    '~/plugins/reminder',
   ],
   /*
   ** Nuxt.js dev-modules

plugins/notification.js

@@ -0,0 +1,17 @@
+export default function ({ isHMR, app, store, route, params, error, redirect }) {
+  // check if the browser supports notifications
+  if ("Notification" in window) {
+    store.commit('settings/setNotificationSupported', true)
+  } else {
+    //notification are not supported!
+    return
+  }
+
+  if (Notification.permission === "granted"){
+    store.commit('settings/setNotificationGranted', true)
+  } else if (Notification.permission !== 'denied') {
+    Notification.requestPermission((permission) => {
+      store.commit('settings/setNotificationGranted', permission === "granted")
+    })
+  }
+}

plugins/reminder.js

@@ -0,0 +1,35 @@
+const TICKER_TIME=60000 //1min
+
+const activeNotifications = {}
+
+const checkOverdue = (store, env) => {
+  store.dispatch('note/checkOverdueNotes')
+    .then(() => {
+      if(store.getters['settings/isNotificationEnabled']){
+        for(let overdueNote of store.getters['note/getOverdueNotes']){
+          if(!activeNotifications[overdueNote.id]) {
+            activeNotifications[overdueNote.id] = new Notification(overdueNote.title, {
+              icon: `${env.routerBase}icon.png`,
+              tag: overdueNote.id,
+              requireInteraction: true,
+            })
+            activeNotifications[overdueNote.id].onclick = () => {
+              store.commit('note/removeOverdueAlarm', overdueNote.id)
+              delete activeNotifications[overdueNote.id]
+            }
+          }
+        }
+      }
+    })
+
+  setTimeout(() => {
+    checkOverdue(store, env);
+  }, TICKER_TIME);
+}
+
+export default function ({store, env}) {
+  //check but dont blocking!
+  setTimeout(() => {
+    checkOverdue(store, env)
+  }, 1)
+}

store/note.js

@@ -2,7 +2,8 @@ import Vue from 'vue'
 
 export const state = () => ({
   notes: [],
-  noteOrder: []
+  noteOrder: [],
+  overdueAlarm: []
 })
 
 export const mutations = {
@@ -56,6 +57,21 @@ export const mutations = {
 
     this.$localStore.clearNotes()
   },
+  triggerOverdueAlarm(state, noteId) {
+    if(!state.overdueAlarm.includes(noteId)) {
+      state.overdueAlarm.push(noteId)
+    }
+  },
+  removeOverdueAlarm(state, noteId) {
+    let index = state.overdueAlarm.findIndex(n => n.id === noteId)
+    if(index) {
+      state.overdueAlarm.splice(index, 1)
+    }
+
+    let note = state.notes.find(n => n.id === noteId)
+    note.content.noticed = true
+    this.$localStore.setNote(note)
+  }
 }
 
 export const getters = {
@@ -73,13 +89,26 @@ export const getters = {
     }
 
     return Object.keys(tagMap).sort()
+  },
+  getOverdueNotes(state) {
+    return state.overdueAlarm.map(nId => state.notes.find(n => n.id === nId))
   }
 }
 
 export const actions = {
   init(ctx) {
     return Promise.all([this.$localStore.getNotes(), this.$localStore.getNoteOrder()])
       .then(([notes, order]) => ctx.commit('loadNotes', {notes, order}))
+  },
+  checkOverdueNotes(ctx) {
+    ctx.state.notes
+      .filter(n => n.type === 'reminder')
+      .filter(n => n.content.date)
+      .filter(n => new Date() > n.content.date)
+      .filter(n => !n.content.noticed)
+      .forEach(n => {
+        ctx.commit('triggerOverdueAlarm', n.id)
+      })
   }
 }
 

store/settings.js

@@ -15,6 +15,10 @@ export const state = () => ({
   },
   theme: {
     dark: true,
+  },
+  notification: {
+    supported: false,
+    granted: false,
   }
 })
 
@@ -32,6 +36,12 @@ export const mutations = {
       this.$localStore.setLanguage(lang)
     }
   },
+  setNotificationSupported(state, supported) {
+    state.notification.supported = supported
+  },
+  setNotificationGranted(state, granted) {
+    state.notification.granted = granted
+  },
   setNoteSize(state, {fixed, size}) {
     state.notes.fixed = fixed
     state.notes.size = size
@@ -53,6 +63,12 @@ export const mutations = {
   }
 }
 
+export const getters = {
+  isNotificationEnabled(state){
+    return state.notification.supported && state.notification.granted
+  }
+}
+
 export const actions = {
   init(ctx) {
     return Promise.all([
@@ -130,5 +146,6 @@ export default {
   namespaced: true,
   state,
   mutations,
+  getters,
   actions
 }