ayanova/src/api/gzdialog.js

@@ -45,25 +45,25 @@ TODO:
     ///////////
     //ERROR
     window.$gz.eventBus.$on("notify-error", function handleNotifyWarn(msg) {
-      vm.$root.$gznotify(msg, { type: "error", timeout: 7000 });
+      vm.$root.$gznotify({ message: msg, type: "error", timeout: 2000 });
     });
 
     ///////////
     //WARNING
     window.$gz.eventBus.$on("notify-warning", function handleNotifyWarn(msg) {
-      vm.$root.$gznotify(msg, { type: "warning", timeout: 7000 });
+      vm.$root.$gznotify({ message: msg, type: "warning", timeout: 2000 });
     });
 
     ///////////
     //INFO
     window.$gz.eventBus.$on("notify-info", function handleNotifyWarn(msg) {
-      vm.$root.$gznotify(msg, { type: "info", timeout: 5000 });
+      vm.$root.$gznotify({ message: msg, type: "info", timeout: 2000 });
     });
 
     ///////////
     //SUCCESS
     window.$gz.eventBus.$on("notify-success", function handleNotifyWarn(msg) {
-      vm.$root.$gznotify(msg, { type: "info", timeout: 3000 });
+      vm.$root.$gznotify({ message: msg, type: "success", timeout: 2000 });
     });
   },
   /////////////////////////////////////

ayanova/src/api/initialize.js

@@ -148,7 +148,7 @@ export default function initialize() {
                   //for now just show the message
                   window.$gz.eventBus.$emit(
                     "notify-info",
-                    "Time zone offset for your account is set to " +
+                    "1111 Time zone offset for your account is set to " +
                       res.data.timeZoneOffset +
                       " which doesn't match the local timezone offset of " +
                       localOffset
@@ -156,15 +156,20 @@ export default function initialize() {
 
                   window.$gz.eventBus.$emit(
                     "notify-warning",
-                    "this is a warning test"
+                    "2222 this is a warning test"
                   );
                   window.$gz.eventBus.$emit(
                     "notify-error",
-                    "this is an error test"
+                    "3333 this is an error test"
                   );
                   window.$gz.eventBus.$emit(
                     "notify-success",
-                    "this is a success test"
+                    "4444 this is a success test"
+                  );
+
+                  window.$gz.eventBus.$emit(
+                    "notify-info",
+                    "5555 this is the FINAL (info) test"
                   );
                 }
 

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;
     }
   }
 };