Add Snackbar component and use it to display success messages

Author: nur557

.gitignore

@@ -22,6 +22,10 @@ pnpm-debug.log*
 *.sln
 *.sw?
 
-#Electron-builder output
+# Electron-builder output
 /dist_electron
-/builds
+/builds
+
+# Exports
+flight-log-export
+plots.html

src/App.vue

@@ -2,6 +2,7 @@
   <v-app>
     <AppBar />
     <NavPanel :items="navItems" />
+    <Snackbar />
     <Footer />
 
     <v-main>
@@ -11,16 +12,18 @@
 </template>
 
 <script>
-import { mapState, mapActions } from "vuex";
+import { mapActions } from "vuex";
 import AppBar from "@/components/AppBar";
 import NavPanel from "@/components/NavigationPanel";
+import Snackbar from "@/components/Snackbar";
 import Footer from "@/components/Footer";
 
 export default {
   name: "App",
   components: {
     AppBar,
     NavPanel,
+    Snackbar,
     Footer,
   },
   data() {
@@ -34,11 +37,6 @@ export default {
       ],
     };
   },
-  computed: {
-    ...mapState({
-      successSetMessage: (state) => state.successSetMessage,
-    }),
-  },
   mounted() {
     if (this.$route.path !== "/") this.$router.push("/");
 
@@ -59,8 +57,7 @@ export default {
       else this.setConfig(config);
     });
     window.renderer.on("SET_CONFIG_RESPONSE", () => {
-      if (this.successSetMessage) return;
-      this.setSuccessMessage("Values saved successfully!");
+      this.showSuccessSnackbar("Values saved successfully!");
     });
   },
   methods: {
@@ -71,7 +68,7 @@ export default {
       "setEvent",
       "setTimer",
       "setLog",
-      "setSuccessMessage",
+      "showSuccessSnackbar",
     ]),
   },
 };

src/components/ActionsBar.vue

@@ -1,9 +1,5 @@
 <template>
   <v-app-bar flat dense absolute bottom>
-    <div v-if="message">
-      <v-icon color="success" class="mr-2">mdi-check-circle-outline</v-icon>
-      <span v-text="message" class="success--text caption" />
-    </div>
     <v-spacer></v-spacer>
     <div>
       <v-btn class="mr-2" @click="$emit('refresh')"> Refresh </v-btn>
@@ -13,15 +9,8 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
-
 export default {
   name: "ActionsBar",
-  computed: {
-    ...mapState({
-      message: (state) => state.successSetMessage,
-    }),
-  },
 };
 </script>
 

src/components/Snackbar.vue

@@ -0,0 +1,40 @@
+<template>
+  <v-snackbar
+      v-model="snackbarState.isVisible"
+      :color="snackbarState.color"
+      :timeout="snackbarState.timeout"
+      @input="handleSnackbarInput"
+      bottom
+    >
+      {{ snackbarState.message }}
+
+    <template v-slot:action="{ attrs }">
+      <v-btn
+        text
+        v-bind="attrs"
+        @click="hideSnackbar"
+      >
+        <v-icon>mdi-close</v-icon>
+      </v-btn>
+    </template>
+  </v-snackbar>
+</template>
+
+<script>
+import { mapGetters, mapActions } from "vuex";
+
+export default {
+  name: "Snackbar",
+  computed: {
+    ...mapGetters([ "snackbarState" ]),
+  },
+  methods: {
+    ...mapActions([ "hideSnackbar" ]),
+    handleSnackbarInput(value) {
+      if (!value) {
+        this.hideSnackbar(); 
+      }
+    }
+  }
+};
+</script>

src/store/index.js

@@ -8,7 +8,6 @@ export default new Vuex.Store({
   state: {
     serialPorts: [],
     active: false,
-    successSetMessage: null,
     changedTab: null,
     static: {},
     config: {},
@@ -18,6 +17,12 @@ export default new Vuex.Store({
       rec_speed: {},
       rec_elements: {},
     },
+    snackbar: {
+      isVisible: false,
+      message: "",
+      color: "success",
+      timeout: 3000,
+    },
   },
   mutations: {
     SET_SERIAL_PORTS(state, ports) {
@@ -56,8 +61,18 @@ export default new Vuex.Store({
     REMOVE_EVENT_ACTION(state, { key, index }) {
       state.events[key].actions.splice(index, 1);
     },
-    SET_SUCCESS_MESSAGE(state, value) {
-      state.successSetMessage = value;
+    SET_SNACKBAR_PROPS(state, payload) {
+      state.snackbar = { ...state.snackbar, ...payload };
+    },
+    SHOW_SNACKBAR(state, { message, color = "success", timeout = 3000 }) {
+      state.snackbar.isVisible = true;
+      state.snackbar.message = message;
+      state.snackbar.color = color;
+      state.snackbar.timeout = timeout;
+    },
+    HIDE_SNACKBAR(state) {
+      state.snackbar.isVisible = false;
+      state.snackbar.message = "";
     },
   },
   actions: {
@@ -74,8 +89,8 @@ export default new Vuex.Store({
       if (!payload.key) return;
 
       payload.name = CONFIG_SETTINGS[payload.key]
-      ? CONFIG_SETTINGS[payload.key].name
-      : null;
+        ? CONFIG_SETTINGS[payload.key].name
+        : null;
 
       payload.unit = CONFIG_SETTINGS[payload.key]
         ? CONFIG_SETTINGS[payload.key].unit
@@ -120,9 +135,11 @@ export default new Vuex.Store({
     removeEventAction({ commit }, payload) {
       commit("REMOVE_EVENT_ACTION", payload);
     },
-    setSuccessMessage({ commit }, value) {
-      commit("SET_SUCCESS_MESSAGE", value);
-      setTimeout(() => commit("SET_SUCCESS_MESSAGE", null), 5000);
+    showSuccessSnackbar({ commit }, message) {
+      commit("SHOW_SNACKBAR", { message, color: "success" });
+    },
+    hideSnackbar({ commit }) {
+      commit("HIDE_SNACKBAR");
     },
   },
   getters: {
@@ -144,5 +161,8 @@ export default new Vuex.Store({
 
       return changed;
     },
+    snackbarState(state) {
+      return state.snackbar;
+    },
   },
 });

src/views/Config.vue

@@ -330,7 +330,10 @@ export default {
   },
   mounted() {
     this.init();
-    window.renderer.on("BOARD:DUMP", () => (this.backupLoading = false));
+    window.renderer.on("BOARD:DUMP", () => {
+      this.backupLoading = false
+      this.showSuccessSnackbar("Backup created!");
+    });
     window.renderer.on("BOARD:RESTORE", () => {
       this.restoreLoading = false;
       setTimeout(this.init, 100);
@@ -346,7 +349,7 @@ export default {
     clearInterval(this.timer);
   },
   methods: {
-    ...mapActions(["setChangedTab"]),
+    ...mapActions(["setChangedTab", "showSuccessSnackbar"]),
     init() {
       getConfigs();
       this.getInfo();

src/views/Home.vue

@@ -69,6 +69,7 @@
 </template>
 
 <script>
+import { mapActions } from "vuex";
 import { makePlots } from '../modules/plots'
 
 export default {
@@ -98,17 +99,21 @@ export default {
       }
       this.errorString = "";
       this.flightLog = flightLog;
+      this.showSuccessSnackbar("Flight logs loaded successfully!");
 
       if (el) makePlots(flightLog, el)
     });
     window.renderer.on("EXPORT_FLIGHTLOG_CSVS", (flightLog) => {
       this.exportButtonLoading = false;
+      this.showSuccessSnackbar("Exported flight log CSVs!");
     });
     window.renderer.on("EXPORT_FLIGHTLOG_HTML", (flightLog) => {
       this.exportButtonLoading = false;
+      this.showSuccessSnackbar("Exported flight log HTML charts!");
     });
   },
   methods: {
+    ...mapActions(["showSuccessSnackbar"]),
     loadFlightLog(file) {
       this.loadButtonLoading = true;
       this.flightLog = null