ayanova/src/components/gznotify.vue

@@ -1,11 +1,7 @@
 <template>
-  <v-snackbar
-    :value="isVisible"
-    :color="options.type"
-    :timeout="options.timeout"
-  >
-    <v-alert :type="options.type">
-      {{ message }}
+  <v-snackbar :value="isVisible" :color="currentNotification.type">
+    <v-alert :type="currentNotification.type">
+      {{ currentNotification.message }}
     </v-alert>
     <v-btn icon @click="isVisible = false">
       <v-icon color="white">fa-times-circle</v-icon>
@@ -14,37 +10,114 @@
 </template>
 
 <script>
+/*  eslint-disable    */
 //todo: modify this to MD standards so it can display multiple notifications sequentially but one at a time only
 //and no new one will overwrite an old one until the old one has had at least 2 seconds to show or some good default maybe based on how much text is on it?
+const DEFAULT_NOTIFY_OPTIONS = { type: "info", timeout: 3000 };
+
 export default {
   data: () => ({
     isVisible: false,
-    message: null,
-    options: {
+    processing: false,
+    notificationQueue: [],
+    currentNotification: {
       type: "info", //one of success, info, warning, and error, see v-alert docs for more info
-      timeout: 3000
+      timeout: 3000,
+      message: null
     }
   }),
   methods: {
-    open(message, options) {
-      this.message = message;
-      this.options = Object.assign(this.options, options);
-      this.isVisible = true;
-    },
-    addNotification(message, options) {
-      //if it's not currently displaying anything then just show it immediately
-      if (!this.isVisible) {
-        this.message = message;
-        this.options = Object.assign(this.options, options);
-        this.isVisible = true;
-      } else {
-        //it *is* showing something so give it maximum 2 seconds then show the new one
-        setTimeout(() => {
-          this.message = message;
-          this.options = Object.assign(this.options, options);
-          this.isVisible = true;
-        }, 2000);
+    addNotification(options) {
+     
+      if (!options.message) {
+        return;
       }
+      if (!options.type) {
+        options.type = DEFAULT_NOTIFY_OPTIONS.type;
+      }
+      if (!options.timeout) {
+        options.timeout = DEFAULT_NOTIFY_OPTIONS.timeout;
+      }
+      //add it to the queue
+      this.notificationQueue.push(options);
+       
+       console.log(
+          "addNotification just added: " +
+            "msg:" +
+            options.message +
+            "timeout:" +
+            options.timeout +
+            "type:" +
+            options.type +
+            " queue length is now: " +
+            this.notificationQueue.length
+        );
+
+      //trigger the notification queue handler if it isn't already in action
+      if (!this.processing) {
+        this.handleNotifications();
+      }
+
+      // //if it's not currently displaying anything then just show it immediately
+      // if (!this.isVisible) {
+      //   this.message = message;
+      //   this.options = Object.assign(this.options, options);
+      //   this.isVisible = true;
+      // } else {
+      //   //it *is* showing something so give it maximum 2 seconds then show the new one
+      //   setTimeout(() => {
+      //     this.message = message;
+      //     this.options = Object.assign(this.options, options);
+      //     this.isVisible = true;
+      //   }, 2000);
+      // }
+    },
+    handleNotifications() {
+      console.log("TOP OF handleNotifications");
+      this.processing = true;
+      //Process the queue
+      if (this.notificationQueue.length > 0) {
+        //Move the next item into the current slot
+        this.currentNotification = this.notificationQueue.shift();
+        this.isVisible = true;
+        console.log(
+          "handleNotification, just shown currentNotification deets: " +
+            "msg:" +
+            this.currentNotification.message +
+            "timeout:" +
+            this.currentNotification.timeout +
+            "type:" +
+            this.currentNotification.type +
+            " queue length is now: " +
+            this.notificationQueue.length
+        );
+        //Show it for the designated time before moving on to the next
+        setTimeout(() => {
+          console.log("Timeout-recursing now");
+          this.isVisible = false;
+          //recurse
+          this.handleNotifications();
+        }, this.currentNotification.timeout);
+      } else {
+        this.processing = false;
+        console.log("QUEUE EMPTY, stopping processing");
+        return;
+      }
+
+      // this.processing = true;
+      // //Keep doing this as long as there are items in the queue
+      // while (this.notificationQueue.length > 0) {
+      //   console.log("TOP OF LOOP");
+      //   //Move the first item into the current slot
+      //   this.currentNotification = this.notificationQueue.shift();
+      //   this.isVisible = true;
+      //   //Show it for the designated time before moving on to the next
+      //   setTimeout(() => {
+      //     this.isVisible = false;
+      //   }, this.currentNotification.timeout);
+      //   console.log("AFTER TIMEOUT");
+      // }
+      // this.processing = false;
     }
   }
 };