Reworked log data format, overhauled snackbar

app/imports/ui/components/snackbars/SnackbarQueue.js

@@ -0,0 +1,16 @@
+// Modified from https://gitlab.com/tozd/vue/snackbar-que
+import Vue from 'vue';
+
+const globalState = Vue.observable({queue: []});
+let lastSnackbarId = 0;
+
+function snackbar(data) {
+  globalState.queue.push({
+    data,
+    id: ++lastSnackbarId,
+    enqueuedAt: new Date(),
+    shown: false,
+  });
+}
+
+export {snackbar, globalState}

app/imports/ui/components/snackbars/SnackbarQueue.vue

@@ -0,0 +1,128 @@
+<template lang="html">
+  <v-snackbar
+    bottom
+    left
+    v-bind="$attrs"
+    :value="isShown"
+    :timeout="timeout"
+    @input="value => isShown = value"
+  >
+    <div class="layout align-center">
+      <template v-if="snackbar && snackbar.data">
+        <div v-if="snackbar.data.text">
+          {{ snackbar.data.text }}
+        </div>
+        <template v-else-if="snackbar.data.content">
+          <log-content :model="snackbar.data.content" />
+        </template>
+        <v-spacer />
+        <v-btn
+          v-if="snackbar.data.callback"
+          color="primary"
+          text
+          @click="closeSnackbar(); snackbar.data.callback()"
+        >
+          {{ snackbar.data.callbackName }}
+        </v-btn>
+      </template>
+    </div>
+    <template #action="{ attrs }">
+      <v-btn
+        icon
+        v-bind="attrs"
+        @click="closeSnackbar"
+      >
+        <v-icon>close</v-icon>
+      </v-btn>
+    </template>
+  </v-snackbar>
+</template>
+
+<script lang="js">
+// Modified from https://gitlab.com/tozd/vue/snackbar-queue
+import { globalState } from '/imports/ui/components/snackbars/SnackbarQueue.js';
+import LogContent from '/imports/ui/log/LogContent.vue';
+
+export default {
+  components: {
+    LogContent,
+  },
+  props: {
+    timeout: {
+      type: Number,
+      default: 6000,
+    },
+    pause: {
+      type: Number,
+      default: 300,
+    },
+  },
+  data() {
+    return {
+      isShown: false,
+      snackbar: null,
+    };
+  },
+  watch: {
+    isShown(newValue) {
+      if (newValue === false && this.snackbar) {
+        const snackbarIndex = globalState.queue.findIndex((element) => element.id === this.snackbar.id);
+        if (snackbarIndex > -1) {
+          globalState.queue.splice(snackbarIndex, 1);
+        }
+        this.snackbar = null;
+      }
+    },
+  },
+  created() {
+    this.handle = null;
+    this.unwait = null;
+    this.showNextSnackbar();
+  },
+  methods: {
+    clearSnackbarState() {
+      if (this.handle) {
+        clearTimeout(this.handle);
+        this.handle = null;
+      }
+
+      if (this.unwait) {
+        this.unwait();
+        this.unwait = null;
+      }
+    },
+    showNextSnackbar() {
+      this.clearSnackbarState();
+
+      // Wait for the first next snackbar to be available.
+      this.unwait = this.$wait(function () {
+        // Snackbars are enqueued from oldest to newest and "find" searches array elements in
+        // same order as well, so the first one which matches is also the oldest one.
+        return globalState.queue.find((element) => element.shown === false);
+      }, function (snackbar) {
+        this.unwait = null;
+
+        snackbar.shown = true;
+
+        this.snackbar = snackbar;
+        this.isShown = true;
+
+        this.handle = setTimeout(() => {
+          this.handle = null;
+
+          this.showNextSnackbar();
+        }, this.timeout + this.pause);
+      });
+    },
+    closeSnackbar() {
+      this.clearSnackbarState();
+
+      this.isShown = false;
+
+      setTimeout(() => {
+        this.showNextSnackbar();
+      }, this.pause);
+    },
+  },
+};
+</script>

app/imports/ui/components/snackbars/Snackbars.vue

@@ -1,46 +0,0 @@
-<template lang="html">
-  <v-snackbar
-    v-if="snackbar"
-    :key="snackbar.text"
-    auto-height
-    bottom
-    :value="true"
-    :timeout="0"
-  >
-    {{ snackbar.text }}
-    <v-btn
-      v-if="snackbar.callback"
-      class="primary--text"
-      icon
-      @click="doCallback"
-    >
-      {{ snackbar.callbackName }}
-    </v-btn>
-    <v-btn
-      v-if="snackbar.showCloseButton"
-      icon
-      @click="$store.dispatch('closeSnackbar')"
-    >
-      <v-icon>close</v-icon>
-    </v-btn>
-  </v-snackbar>
-</template>
-
-<script lang="js">
-export default {
-  computed: {
-    snackbar(){
-      return this.$store.state.snackbars.snackbars[0];
-    }
-  },
-  methods: {
-    doCallback(){
-      this.snackbar.callback();
-      this.$store.dispatch('closeSnackbar')
-    }
-  }
-}
-</script>
-
-<style lang="css" scoped>
-</style>

app/imports/ui/components/snackbars/snackboxStore.js

@@ -1,47 +0,0 @@
-const snackbarStore = {
-  state: {
-    snackbars: [],
-    snackbarTimout: undefined,
-  },
-  mutations: {
-    addSnackbar(state, value){
-      state.snackbars.push(value)
-    },
-    closeCurrentSnackbar (state){
-      state.snackbars.shift();
-    },
-    cancelSnackbarTimeout (state){
-      if(state.snackbarTimout){
-        clearTimeout(state.snackbarTimout);
-      }
-    },
-    setSnackbarTimout(state, value){
-      state.snackbarTimout = value;
-    },
-  },
-  actions: {
-    snackbar({dispatch, commit}, value){
-      // value = {
-      //   text,
-      //   showCloseButton,
-      //   callback,
-      //   callbackName
-      // }
-      commit('addSnackbar', value);
-      commit('setSnackbarTimout', setTimeout(() => {
-        dispatch('closeSnackbar');
-      }, 5000));
-    },
-    closeSnackbar({dispatch, commit, state}){
-      commit('closeCurrentSnackbar');
-      commit('cancelSnackbarTimeout');
-      if (state.snackbars.length){
-        commit('setSnackbarTimout', setTimeout(() => {
-          dispatch('closeSnackbar');
-        }, 5000));
-      }
-    },
-  }
-};
-
-export default snackbarStore;