From f4d5f548464a582ab8de2f16f9f1fe56d3cbff63 Mon Sep 17 00:00:00 2001
From: TobiZog <developer@zoghaib.de>
Date: Thu, 14 Nov 2024 09:33:45 +0100
Subject: [PATCH] Improve Snackbar

---
 software/backend/routes/account.routes.ts     |  10 -
 software/src/App.vue                          |  37 ++-
 .../src/components/basics/confirmDialog.vue   |   8 +-
 software/src/locales/de.json                  |   1 +
 software/src/locales/en.json                  |   1 +
 software/src/stores/account.store.ts          |  47 ++--
 software/src/stores/band.store.ts             |   8 +-
 software/src/stores/basket.store.ts           |   6 +-
 software/src/stores/exercise.store.ts         |   2 +-
 software/src/stores/feedback.store.ts         | 260 ++++++++----------
 software/src/stores/genre.store.ts            |  12 +-
 software/src/stores/preferences.store.ts      |   9 +-
 12 files changed, 192 insertions(+), 209 deletions(-)

diff --git a/software/backend/routes/account.routes.ts b/software/backend/routes/account.routes.ts
index 262cde5..b7d2d14 100644
--- a/software/backend/routes/account.routes.ts
+++ b/software/backend/routes/account.routes.ts
@@ -88,16 +88,6 @@ account.post("/", async (req: Request, res: Response) => {
     .then(account => {
       // Status: 201 Created
       res.status(201).json(account)
-
-      // Check exercise in table
-      Exercise.update(
-        { solved: true },
-        {
-          where: {
-            nameEn: "Register"
-          }
-        }
-      )
     }).catch(reason => {
       // Status: 409 Conflict
       res.status(409).json({
diff --git a/software/src/App.vue b/software/src/App.vue
index 2611e43..e2d00f2 100644
--- a/software/src/App.vue
+++ b/software/src/App.vue
@@ -1,15 +1,14 @@
 <script setup lang="ts">
 import { useTheme } from 'vuetify/lib/framework.mjs';
 import { i18n } from './plugins/i18n';
-import { watch } from 'vue';
-import navigationAppendItems from './components/navigation/navigationAppendItems.vue';
-import navigationPrependItems from './components/navigation/navigationPrependItems.vue';
+import { ref, watch } from 'vue';
 import { usePreferencesStore } from './stores/preferences.store';
 import { useFeedbackStore } from './stores/feedback.store';
 import companyFooter from './components/navigation/companyFooter.vue';
 import urlBar from './components/navigation/urlBar.vue';
 import { useRouter } from 'vue-router';
 import NavigationBar from './components/navigation/navigationBar.vue';
+import { BannerStateEnum } from './data/enums/bannerStateEnum';
 
 const preferencesStore = usePreferencesStore()
 const feedbackStore = useFeedbackStore()
@@ -27,6 +26,7 @@ watch(() => preferencesStore.language, () => {
 // Watch for theme change
 watch(() => preferencesStore.theme, () => {
   theme.global.name.value = preferencesStore.theme
+  feedbackStore.addSnackbar(BannerStateEnum.ERROR)
 })
 
 // Watch for 404 page directions
@@ -36,6 +36,17 @@ watch(() => feedbackStore.notFound, () => {
     router.push("/404")
   }
 })
+
+// Watch for snackbar disappear
+watch(() => feedbackStore.showSnackbar, () => {
+  if (!feedbackStore.showSnackbar) {
+    feedbackStore.snackbars = []
+  }
+})
+
+function calcMargin(i) {
+  return (i * 60) + 10 + 'px'
+}
 </script>
 
 <template>
@@ -50,22 +61,18 @@ watch(() => feedbackStore.notFound, () => {
     <v-main>
       <!-- Snackbar in the top right corner for user feedback -->
       <v-snackbar
-        v-model="feedbackStore.showBanner"
+        v-for="(s, i) in feedbackStore.snackbars"
+        v-model="feedbackStore.showSnackbar"
+        :key="i"
         timeout="3000"
         location="top right"
-        :color="feedbackStore.color"
+        :color="s.color"
+        :style="{ 'margin-top': calcMargin(i) }"
+        :icon="s.icon"
         close
       >
-        <v-icon :icon="feedbackStore.icon" />
-        {{ feedbackStore.title }}
-
-        <template v-slot:actions>
-          <v-btn
-            variant="text"
-            @click="feedbackStore.showBanner = false"
-            icon="mdi-close"
-          />
-        </template>
+        <v-icon :icon="s.icon" />
+        {{ s.text }}
       </v-snackbar>
 
       <!-- Here changes the router the content -->
diff --git a/software/src/components/basics/confirmDialog.vue b/software/src/components/basics/confirmDialog.vue
index 370cbb7..4f28864 100644
--- a/software/src/components/basics/confirmDialog.vue
+++ b/software/src/components/basics/confirmDialog.vue
@@ -24,7 +24,13 @@ function confirmPressed() {
     v-model="showDialog"
     persistent
   >
-    {{ description }}
+    <v-container>
+      <v-row>
+        <v-col>
+          {{ description }}
+        </v-col>
+      </v-row>
+    </v-container>
 
     <template #actions>
       <outlined-button
diff --git a/software/src/locales/de.json b/software/src/locales/de.json
index 117f833..c1c1bf2 100644
--- a/software/src/locales/de.json
+++ b/software/src/locales/de.json
@@ -170,6 +170,7 @@
     "wrongLogin": "Falscher Username oder falsches Passwort!",
     "error": "Es ist ein Fehler aufgetreten...",
     "databaseResetSuccessful": "Datenbank erfolgreich zurück gesetzt!",
+    "exerciseProgressResetSuccessful": "Aufgabenfortschritt erfolgreich zurück gesetzt!",
     "registerSuccessful": "Account erfolgreich erstellt!",
     "usernameInUse": "Der Accountname ist bereits vergeben!",
     "accountUpdated": "Account erfolgreich aktualisiert",
diff --git a/software/src/locales/en.json b/software/src/locales/en.json
index f166288..e17cbc6 100644
--- a/software/src/locales/en.json
+++ b/software/src/locales/en.json
@@ -170,6 +170,7 @@
     "wrongLogin": "Wrong username or wrong password!",
     "error": "There is some error...",
     "databaseResetSuccessful": "Database successfully resetted!",
+    "exerciseProgressResetSuccessful": "Exercise progress successfully resetted!",
     "registerSuccessful": "Account successfully created!",
     "usernameInUse": "The username is already in use!",
     "accountUpdated": "Account successfully updated",
diff --git a/software/src/stores/account.store.ts b/software/src/stores/account.store.ts
index bd56931..79ac70a 100644
--- a/software/src/stores/account.store.ts
+++ b/software/src/stores/account.store.ts
@@ -9,6 +9,7 @@ import { PaymentModel } from "../data/models/user/paymentModel";
 import { AccountApiModel } from "../data/models/user/accountApiModel";
 import { ref } from "vue";
 import { defineStore } from "pinia";
+import { useExerciseStore } from "./exercise.store";
 
 export const useAccountStore = defineStore("accountStore", {
   state: () => ({
@@ -21,7 +22,7 @@ export const useAccountStore = defineStore("accountStore", {
     /** User input on login screen */
     // todo: Remove JSON!
     loginData: ref<{ username: String, password: String}>(
-      { username: "duranduran", password: "H4nn0ver" }
+      { username: "", password: "" }
     ),
 
     /** Buffer for register data */
@@ -55,31 +56,31 @@ export const useAccountStore = defineStore("accountStore", {
       if (this.loginData.username == null || this.loginData.username.length == 0 ||
         this.loginData.password == null || this.loginData.password.length == 0
       ) {
-        feedbackStore.changeBanner(BannerStateEnum.ACCOUNTLOGINWRONGLOGIN)
+        feedbackStore.addSnackbar(BannerStateEnum.ACCOUNTLOGINWRONGLOGIN)
         this.fetchInProgress = false
         return false
       }
       else
       {
         await loginAccount(this.loginData.username, this.loginData.password)
-        .then(async result => {
-          this.userAccount = result.data
+          .then(async result => {
+            this.userAccount = result.data
 
-          feedbackStore.changeBanner(BannerStateEnum.ACCOUNTLOGINSUCCESSFUL)
+            feedbackStore.addSnackbar(BannerStateEnum.ACCOUNTLOGINSUCCESSFUL)
 
-          this.fetchInProgress = false
-          return true
-        })
-        .catch(error => {
-          if (error.status == 400) {
-            feedbackStore.changeBanner(BannerStateEnum.ACCOUNTLOGINERROR)
-          } else if (error.status == 401) {
-            feedbackStore.changeBanner(BannerStateEnum.ACCOUNTLOGINWRONGLOGIN)
-          }
+            this.fetchInProgress = false
+            return true
+          })
+          .catch(error => {
+            if (error.status == 400) {
+              feedbackStore.addSnackbar(BannerStateEnum.ACCOUNTLOGINERROR)
+            } else if (error.status == 401) {
+              feedbackStore.addSnackbar(BannerStateEnum.ACCOUNTLOGINWRONGLOGIN)
+            }
 
-          this.fetchInProgress = false
-          return false
-        })
+            this.fetchInProgress = false
+            return false
+          })
       }
     },
 
@@ -91,12 +92,14 @@ export const useAccountStore = defineStore("accountStore", {
      */
     async registerAccount(): Promise<boolean> {
       const feedbackStore = useFeedbackStore()
+      const exerciseStore = useExerciseStore()
       this.fetchInProgress = true
 
       await registerAccount(this.registerData)
         .then(async res => {
           if (res.status == 201) {
-            feedbackStore.changeBanner(BannerStateEnum.ACCOUNTREGISTERSUCCESSFUL)
+            feedbackStore.addSnackbar(BannerStateEnum.ACCOUNTREGISTERSUCCESSFUL)
+            exerciseStore.solveExercise(0, 1)
           }
 
           this.loginData = {
@@ -108,9 +111,9 @@ export const useAccountStore = defineStore("accountStore", {
         })
         .catch((error) => {
           if (error.status == 400) {
-            feedbackStore.changeBanner(BannerStateEnum.ACCOUNTREGISTERERROR)
+            feedbackStore.addSnackbar(BannerStateEnum.ACCOUNTREGISTERERROR)
           } else if (error.status == 409) {
-            feedbackStore.changeBanner(BannerStateEnum.ACCOUNTREGISTERUSERNAMEINUSE)
+            feedbackStore.addSnackbar(BannerStateEnum.ACCOUNTREGISTERUSERNAMEINUSE)
           }
 
           this.fetchInProgress = false
@@ -129,7 +132,7 @@ export const useAccountStore = defineStore("accountStore", {
       await updateAccount(this.userAccount)
         .then(res => {
           if (res.status == 200) {
-            feedbackStore.changeBanner(BannerStateEnum.ACCOUNTUPDATESUCCESSFUL)
+            feedbackStore.addSnackbar(BannerStateEnum.ACCOUNTUPDATESUCCESSFUL)
           }
         })
     },
@@ -143,7 +146,7 @@ export const useAccountStore = defineStore("accountStore", {
       this.userAccount = new AccountModel()
       this.loggedIn = false
       
-      feedbackStore.changeBanner(BannerStateEnum.ACCOUNTLOGOUTSUCCESSFUL)
+      feedbackStore.addSnackbar(BannerStateEnum.ACCOUNTLOGOUTSUCCESSFUL)
     },
 
     /**
diff --git a/software/src/stores/band.store.ts b/software/src/stores/band.store.ts
index fe59fcf..3ae9055 100644
--- a/software/src/stores/band.store.ts
+++ b/software/src/stores/band.store.ts
@@ -102,24 +102,24 @@ export const useBandStore = defineStore("bandStore", {
         postBand(this.band)
           .then(result => {
             if (result.status == 200) {
-              feedbackStore.changeBanner(BannerStateEnum.BANDSAVEDSUCCESSFUL)
+              feedbackStore.addSnackbar(BannerStateEnum.BANDSAVEDSUCCESSFUL)
 
               this.getBands()
               this.showEditDialog = false
             } else {
-              feedbackStore.changeBanner(BannerStateEnum.BANDSAVEDERROR)
+              feedbackStore.addSnackbar(BannerStateEnum.BANDSAVEDERROR)
             }
           })
       } else {
         patchBand(this.band)
           .then(result => {
             if (result.status == 200) {
-              feedbackStore.changeBanner(BannerStateEnum.BANDSAVEDSUCCESSFUL)
+              feedbackStore.addSnackbar(BannerStateEnum.BANDSAVEDSUCCESSFUL)
 
               this.getBands()
               this.showEditDialog = false
             } else {
-              feedbackStore.changeBanner(BannerStateEnum.BANDSAVEDERROR)
+              feedbackStore.addSnackbar(BannerStateEnum.BANDSAVEDERROR)
             }
           })
       }
diff --git a/software/src/stores/basket.store.ts b/software/src/stores/basket.store.ts
index 4ba6fed..1cd89d8 100644
--- a/software/src/stores/basket.store.ts
+++ b/software/src/stores/basket.store.ts
@@ -53,7 +53,7 @@ export const useBasketStore = defineStore('basketStore', {
      */
     removeItemFromBasket(item: BasketItemModel) {
       const feedbackStore = useFeedbackStore()
-      feedbackStore.changeBanner(BannerStateEnum.BASKETPRODUCTREMOVED)
+      feedbackStore.addSnackbar(BannerStateEnum.BASKETPRODUCTREMOVED)
 
       this.itemsInBasket = this.itemsInBasket.filter((basketItemModel: BasketItemModel) => 
         basketItemModel.concert.id != item.concert.id
@@ -110,12 +110,12 @@ export const useBasketStore = defineStore('basketStore', {
             await accountStore.refreshOrders()
 
             this.itemsInBasket = []
-            feedbackStore.changeBanner(BannerStateEnum.ORDERPLACESUCCESSFUL)
+            feedbackStore.addSnackbar(BannerStateEnum.ORDERPLACESUCCESSFUL)
 
             // Exercise 0.2 is solved
             exerciseStore.solveExercise(0, 2)
           } else {
-            feedbackStore.changeBanner(BannerStateEnum.ERROR)
+            feedbackStore.addSnackbar(BannerStateEnum.ERROR)
           }
         })
     }
diff --git a/software/src/stores/exercise.store.ts b/software/src/stores/exercise.store.ts
index f22c2d4..ef6b7fb 100644
--- a/software/src/stores/exercise.store.ts
+++ b/software/src/stores/exercise.store.ts
@@ -107,7 +107,7 @@ export const useExerciseStore = defineStore("exerciseStore", {
               }
             }
 
-            feedbackStore.changeBanner(bannerState)
+            feedbackStore.addSnackbar(bannerState)
             this.getAllExercises()
           }
         })
diff --git a/software/src/stores/feedback.store.ts b/software/src/stores/feedback.store.ts
index 4c1e3b1..00e3dca 100644
--- a/software/src/stores/feedback.store.ts
+++ b/software/src/stores/feedback.store.ts
@@ -9,8 +9,10 @@ import { Composer } from 'vue-i18n';
  */
 export const useFeedbackStore = defineStore("feedbackStore", {
   state: () => ({
+    snackbars: ref<Array<{text: string, color: string, icon: string }>>([]),
+
     /** Show notification banner in top right corner */
-    showBanner: ref(false),
+    showSnackbar: ref(false),
 
     /** Text in the notification banner */
     title: ref(""),
@@ -35,162 +37,148 @@ export const useFeedbackStore = defineStore("feedbackStore", {
   },
 
   actions: {
-    /**
-     * Change the state of the banner, displays it immediately
-     * 
-     * @param bannerState New banner state
-     */
-    changeBanner(bannerState: BannerStateEnum) {
-      // Banner message
+    addSnackbar(bannerState: BannerStateEnum) {
+      this.snackbars.push({
+        text: this.getSnackbarText(bannerState),
+        color: this.getSnackbarColor(bannerState),
+        icon: this.getSnackbarIcon(bannerState)
+      })
+
+      this.showSnackbar = true
+    },
+
+    getSnackbarText(bannerState: BannerStateEnum) {
       switch (bannerState) {
         ////////// System feedback //////////
 
-        case BannerStateEnum.ERROR: {
-          this.title = this.i18n.t('bannerMessages.error'); break;
-        }
+        case BannerStateEnum.ERROR:
+          return this.i18n.t('bannerMessages.error')
 
-        case BannerStateEnum.BASKETPRODUCTADDED: {
-          this.title = this.i18n.t('bannerMessages.basketTicketAdded'); break;
-        }
+        case BannerStateEnum.BASKETPRODUCTADDED:
+          return this.i18n.t('bannerMessages.basketTicketAdded')
 
-        case BannerStateEnum.BASKETPRODUCTREMOVED: {
-          this.title = this.i18n.t("bannerMessages.basketTicketRemoved"); break;
-        }
+        case BannerStateEnum.BASKETPRODUCTREMOVED:
+          return this.i18n.t("bannerMessages.basketTicketRemoved")
 
 
         ////////// Exercise feedback //////////
 
-        case BannerStateEnum.EXERCISESOLVED01: {
-          this.title = this.i18n.t("bannerMessages.exerciseSolvedNr", [0, 1]); break;
-        }
+        case BannerStateEnum.EXERCISESOLVED01: 
+          return this.i18n.t("bannerMessages.exerciseSolvedNr", [0, 1])
+        
 
-        case BannerStateEnum.EXERCISESOLVED02: {
-          this.title = this.i18n.t("bannerMessages.exerciseSolvedNr", [0, 2]); break;
-        }
+        case BannerStateEnum.EXERCISESOLVED02: 
+          return this.i18n.t("bannerMessages.exerciseSolvedNr", [0, 2])
+        
 
-        case BannerStateEnum.EXERCISESOLVED11: {
-          this.title = this.i18n.t("bannerMessages.exerciseSolvedNr", [1, 1]); break;
-        }
+        case BannerStateEnum.EXERCISESOLVED11: 
+          return this.i18n.t("bannerMessages.exerciseSolvedNr", [1, 1])
+        
 
-        case BannerStateEnum.EXERCISESOLVED12: {
-          this.title = this.i18n.t("bannerMessages.exerciseSolvedNr", [1, 2]); break;
-        }
+        case BannerStateEnum.EXERCISESOLVED12: 
+          return this.i18n.t("bannerMessages.exerciseSolvedNr", [1, 2])
+        
 
-        case BannerStateEnum.EXERCISESOLVED13: {
-          this.title = this.i18n.t("bannerMessages.exerciseSolvedNr", [1, 3]); break;
-        }
+        case BannerStateEnum.EXERCISESOLVED13: 
+          return this.i18n.t("bannerMessages.exerciseSolvedNr", [1, 3])
+        
 
-        case BannerStateEnum.EXERCISESOLVED21: {
-          this.title = this.i18n.t("bannerMessages.exerciseSolvedNr", [2, 1]); break;
-        }
+        case BannerStateEnum.EXERCISESOLVED21: 
+          return this.i18n.t("bannerMessages.exerciseSolvedNr", [2, 1])
+        
 
-        case BannerStateEnum.EXERCISESOLVED22: {
-          this.title = this.i18n.t("bannerMessages.exerciseSolvedNr", [2, 2]); break;
-        }
+        case BannerStateEnum.EXERCISESOLVED22: 
+          return this.i18n.t("bannerMessages.exerciseSolvedNr", [2, 2])
+        
 
-        case BannerStateEnum.EXERCISESOLVED23: {
-          this.title = this.i18n.t("bannerMessages.exerciseSolvedNr", [2, 3]); break;
-        }
+        case BannerStateEnum.EXERCISESOLVED23: 
+          return this.i18n.t("bannerMessages.exerciseSolvedNr", [2, 3])
+        
 
-        case BannerStateEnum.EXERCISESOLVED31: {
-          this.title = this.i18n.t("bannerMessages.exerciseSolvedNr", [3, 1]); break;
-        }
+        case BannerStateEnum.EXERCISESOLVED31: 
+          return this.i18n.t("bannerMessages.exerciseSolvedNr", [3, 1])
+        
 
-        case BannerStateEnum.EXERCISESOLVED32: {
-          this.title = this.i18n.t("bannerMessages.exerciseSolvedNr", [3, 2]); break;
-        }
+        case BannerStateEnum.EXERCISESOLVED32: 
+          return this.i18n.t("bannerMessages.exerciseSolvedNr", [3, 2])
+        
 
-        case BannerStateEnum.EXERCISESOLVED33: {
-          this.title = this.i18n.t("bannerMessages.exerciseSolvedNr", [3, 3]); break;
-        }
+        case BannerStateEnum.EXERCISESOLVED33: 
+          return this.i18n.t("bannerMessages.exerciseSolvedNr", [3, 3])
+        
 
 
         ////////// API Endpoint /api //////////
 
-        case BannerStateEnum.DATABASERESETSUCCESSFUL: {
-          this.title = this.i18n.t('bannerMessages.databaseResetSuccessful'); break;
-        }
+        case BannerStateEnum.DATABASERESETSUCCESSFUL:
+          return this.i18n.t('bannerMessages.databaseResetSuccessful')
+
+        case BannerStateEnum.EXERCISEPROGRESSRESETSUCCESSFUL:
+          return this.i18n.t('bannerMessages.exerciseProgressResetSuccessful')
 
 
         ////////// API Endpoint /accounts //////////
 
-        case BannerStateEnum.ACCOUNTLOGINSUCCESSFUL: {
-          this.title = this.i18n.t('bannerMessages.loginSuccessful'); break;
-        }
+        case BannerStateEnum.ACCOUNTLOGINSUCCESSFUL: 
+          return this.i18n.t('bannerMessages.loginSuccessful')
 
-        case BannerStateEnum.ACCOUNTLOGINWRONGLOGIN: {
-          this.title = this.i18n.t('bannerMessages.wrongLogin'); break;
-        }
+        case BannerStateEnum.ACCOUNTLOGINWRONGLOGIN: 
+          return this.i18n.t('bannerMessages.wrongLogin')
 
-        case BannerStateEnum.ACCOUNTLOGINERROR: {
-          this.title = this.i18n.t('bannerMessages.error'); break;
-        }
+        case BannerStateEnum.ACCOUNTLOGINERROR: 
+          return this.i18n.t('bannerMessages.error')
 
-        case BannerStateEnum.ACCOUNTREGISTERSUCCESSFUL: {
-          this.title = this.i18n.t("bannerMessages.registerSuccessful"); break;
-        }
+        case BannerStateEnum.ACCOUNTREGISTERSUCCESSFUL: 
+          return this.i18n.t("bannerMessages.registerSuccessful")
 
-        case BannerStateEnum.ACCOUNTREGISTERUSERNAMEINUSE: {
-          this.title = this.i18n.t("bannerMessages.usernameInUse"); break;
-        }
+        case BannerStateEnum.ACCOUNTREGISTERUSERNAMEINUSE: 
+          return this.i18n.t("bannerMessages.usernameInUse")
 
-        case BannerStateEnum.ACCOUNTUPDATESUCCESSFUL: {
-          this.title = this.i18n.t("bannerMessages.accountUpdated"); break;
-        }
-
-        case BannerStateEnum.ACCOUNTLOGOUTSUCCESSFUL: {
-          this.title = this.i18n.t('bannerMessages.logoutSuccessful'); break;
-        }
+        case BannerStateEnum.ACCOUNTUPDATESUCCESSFUL: 
+          return this.i18n.t("bannerMessages.accountUpdated")
 
+        case BannerStateEnum.ACCOUNTLOGOUTSUCCESSFUL: 
+          return this.i18n.t('bannerMessages.logoutSuccessful')
+        
 
         ////////// API Endpoint /orders //////////
 
-        case BannerStateEnum.ORDERPLACESUCCESSFUL: {
-          this.title = this.i18n.t('bannerMessages.orderPlaceSuccessfull'); break;
-        }
-
+        case BannerStateEnum.ORDERPLACESUCCESSFUL: 
+          return this.i18n.t('bannerMessages.orderPlaceSuccessfull')
+        
 
         ////////// API Endpoint /bands //////////
 
-        case BannerStateEnum.BANDDELETEERROR: {
-          this.title = this.i18n.t('bannerMessages.bandDeleteError'); break;
-        }
+        case BannerStateEnum.BANDDELETEERROR: 
+          return this.i18n.t('bannerMessages.bandDeleteError')
+        
+        case BannerStateEnum.BANDDELETESUCCESSFUL: 
+          return this.i18n.t('bannerMessages.bandDeleteSuccessful')
 
-        case BannerStateEnum.BANDDELETESUCCESSFUL: {
-          this.title = this.i18n.t('bannerMessages.bandDeleteSuccessful'); break;
-        }
-
-        case BannerStateEnum.BANDSAVEDERROR: {
-          this.title = this.i18n.t('bannerMessages.bandSavedError'); break;
-        }
-
-        case BannerStateEnum.BANDSAVEDSUCCESSFUL: {
-          this.title = this.i18n.t('bannerMessages.bandSavedSuccessful'); break;
-        }
+        case BannerStateEnum.BANDSAVEDERROR: 
+          return this.i18n.t('bannerMessages.bandSavedError')
 
+        case BannerStateEnum.BANDSAVEDSUCCESSFUL: 
+          return this.i18n.t('bannerMessages.bandSavedSuccessful')
+        
 
         ////////// API Endpoint /genres //////////
 
-        case BannerStateEnum.GENREDELETEERROR: {
-          this.title = this.i18n.t('bannerMessages.genreDeleteError'); break;
-        }
+        case BannerStateEnum.GENREDELETEERROR: 
+          return this.i18n.t('bannerMessages.genreDeleteError')
 
-        case BannerStateEnum.GENREDELETESUCCESSFUL: {
-          this.title = this.i18n.t('bannerMessages.genreDeleteSuccessful'); break;
-        }
+        case BannerStateEnum.GENREDELETESUCCESSFUL: 
+          return this.i18n.t('bannerMessages.genreDeleteSuccessful')
+        
+        case BannerStateEnum.GENRESAVEDERROR: 
+          return this.i18n.t('bannerMessages.genreSavedError')
 
-        case BannerStateEnum.GENRESAVEDERROR: {
-          this.title = this.i18n.t('bannerMessages.genreSavedError'); break;
-        }
-
-        case BannerStateEnum.GENRESAVEDSUCCESSFUL: {
-          this.title = this.i18n.t('bannerMessages.genreSavedSuccessful'); break;
-        }
+        case BannerStateEnum.GENRESAVEDSUCCESSFUL: 
+          return this.i18n.t('bannerMessages.genreSavedSuccessful')
       }
+    },
 
-
-      // Banner color
-
+    getSnackbarColor(bannerState: BannerStateEnum) {
       switch (bannerState) {
         case BannerStateEnum.ERROR:
         case BannerStateEnum.ACCOUNTLOGINERROR:
@@ -201,8 +189,7 @@ export const useFeedbackStore = defineStore("feedbackStore", {
         case BannerStateEnum.BANDSAVEDERROR:
         case BannerStateEnum.GENREDELETEERROR:
         case BannerStateEnum.GENRESAVEDERROR:
-          this.color = "red"
-          break;
+          return "red"
         
         case BannerStateEnum.BASKETPRODUCTADDED:
         case BannerStateEnum.DATABASERESETSUCCESSFUL:
@@ -216,8 +203,7 @@ export const useFeedbackStore = defineStore("feedbackStore", {
         case BannerStateEnum.EXERCISEPROGRESSRESETSUCCESSFUL:
         case BannerStateEnum.GENREDELETESUCCESSFUL:
         case BannerStateEnum.GENRESAVEDSUCCESSFUL:
-          this.color = "green"
-          break;
+          return "green"
 
         case BannerStateEnum.EXERCISESOLVED01:
         case BannerStateEnum.EXERCISESOLVED02:
@@ -230,27 +216,24 @@ export const useFeedbackStore = defineStore("feedbackStore", {
         case BannerStateEnum.EXERCISESOLVED31:
         case BannerStateEnum.EXERCISESOLVED32:
         case BannerStateEnum.EXERCISESOLVED33:
-          this.color = "purple"
-          break;
+          return "purple"
 
         case BannerStateEnum.BASKETPRODUCTREMOVED:
-          this.color = "blue"
+          return "blue"
       }
+    },
 
 
-      // Banner icon
-
+    getSnackbarIcon(bannerState: BannerStateEnum) {
       switch (bannerState) {
         case BannerStateEnum.ERROR:
-          this.icon = "mdi-alert-circle"
-          break;
+          return "mdi-alert-circle"
 
         case BannerStateEnum.ACCOUNTLOGINERROR:
         case BannerStateEnum.ACCOUNTLOGINWRONGLOGIN:
         case BannerStateEnum.ACCOUNTREGISTERERROR:
         case BannerStateEnum.ACCOUNTREGISTERUSERNAMEINUSE:
-          this.icon = "mdi-account"
-          break;
+          return "mdi-account"
 
         case BannerStateEnum.EXERCISESOLVED01:
         case BannerStateEnum.EXERCISESOLVED02:
@@ -263,56 +246,43 @@ export const useFeedbackStore = defineStore("feedbackStore", {
         case BannerStateEnum.EXERCISESOLVED31:
         case BannerStateEnum.EXERCISESOLVED32:
         case BannerStateEnum.EXERCISESOLVED33:
-          this.icon = "mdi-check-circle-outline"
-          break;
-        
+          return "mdi-check-circle-outline"
       
         case BannerStateEnum.DATABASERESETSUCCESSFUL:
         case BannerStateEnum.EXERCISEPROGRESSRESETSUCCESSFUL:
-          this.icon = "mdi-database-refresh"
-          break;
+          return "mdi-database-refresh"
         
         case BannerStateEnum.BASKETPRODUCTADDED:
         case BannerStateEnum.BASKETPRODUCTREMOVED:
-          this.icon = "mdi-basket"
-          break;
+          return "mdi-basket"
 
         case BannerStateEnum.ORDERPLACESUCCESSFUL:
-          this.icon = "mdi-basket-check"
-          break;
+          return "mdi-basket-check"
 
         case BannerStateEnum.ACCOUNTLOGOUTSUCCESSFUL:
-          this.icon = "mdi-logout"
-          break;
+          return "mdi-logout"
 
         case BannerStateEnum.ACCOUNTLOGINSUCCESSFUL:
-          this.icon = "mdi-login"
-          break;
+          return "mdi-login"
 
         case BannerStateEnum.ACCOUNTREGISTERSUCCESSFUL:
-          this.icon = "mdi-account-plus"
-          break;
+          return "mdi-account-plus"
         
         case BannerStateEnum.ACCOUNTUPDATESUCCESSFUL:
-          this.icon = "mdi-account-reactivate"
-          break;
+          return "mdi-account-reactivate"
 
         case BannerStateEnum.BANDDELETEERROR:
         case BannerStateEnum.BANDDELETESUCCESSFUL:
         case BannerStateEnum.BANDSAVEDERROR:
         case BannerStateEnum.BANDSAVEDSUCCESSFUL:
-          this.icon = "mdi-guitar-electric"
-          break;
+          return "mdi-guitar-electric"
 
         case BannerStateEnum.GENREDELETEERROR:
         case BannerStateEnum.GENREDELETESUCCESSFUL:
         case BannerStateEnum.GENRESAVEDERROR:
         case BannerStateEnum.GENRESAVEDSUCCESSFUL:
-          this.icon = "mdi-music-clef-treble"
-          break;
+          return "mdi-music-clef-treble"
       }
-
-      this.showBanner = true
     }
   }
 })
\ No newline at end of file
diff --git a/software/src/stores/genre.store.ts b/software/src/stores/genre.store.ts
index 0faf0ed..a189470 100644
--- a/software/src/stores/genre.store.ts
+++ b/software/src/stores/genre.store.ts
@@ -67,11 +67,11 @@ export const useGenreStore = defineStore("genreStore", {
         postGenre(this.genre)
           .then(response => {
             if (response.status == 200) {
-              feedbackStore.changeBanner(BannerStateEnum.GENRESAVEDSUCCESSFUL)
+              feedbackStore.addSnackbar(BannerStateEnum.GENRESAVEDSUCCESSFUL)
               this.getGenres()
               this.showEditDialog = false
             } else {
-              feedbackStore.changeBanner(BannerStateEnum.GENRESAVEDERROR)
+              feedbackStore.addSnackbar(BannerStateEnum.GENRESAVEDERROR)
             }
           })
       } else {
@@ -79,11 +79,11 @@ export const useGenreStore = defineStore("genreStore", {
         patchGenre(this.genre)
           .then(response => {
             if (response.status == 200) {
-              feedbackStore.changeBanner(BannerStateEnum.GENRESAVEDSUCCESSFUL)
+              feedbackStore.addSnackbar(BannerStateEnum.GENRESAVEDSUCCESSFUL)
               this.getGenres()
               this.showEditDialog = false
             } else {
-              feedbackStore.changeBanner(BannerStateEnum.GENRESAVEDERROR)
+              feedbackStore.addSnackbar(BannerStateEnum.GENRESAVEDERROR)
             }
           })
       }
@@ -101,10 +101,10 @@ export const useGenreStore = defineStore("genreStore", {
       deleteGenre(genre)
         .then(response => {
           if (response.status == 200) {
-            feedbackStore.changeBanner(BannerStateEnum.GENREDELETESUCCESSFUL)
+            feedbackStore.addSnackbar(BannerStateEnum.GENREDELETESUCCESSFUL)
             this.getGenres()
           } else {
-            feedbackStore.changeBanner(BannerStateEnum.GENREDELETEERROR)
+            feedbackStore.addSnackbar(BannerStateEnum.GENREDELETEERROR)
           }
         })
     }
diff --git a/software/src/stores/preferences.store.ts b/software/src/stores/preferences.store.ts
index f5f028c..1e1f826 100644
--- a/software/src/stores/preferences.store.ts
+++ b/software/src/stores/preferences.store.ts
@@ -8,6 +8,7 @@ import { ServerStateEnum } from "@/data/enums/serverStateEnum";
 import { BannerStateEnum } from "@/data/enums/bannerStateEnum";
 import { useFeedbackStore } from "./feedback.store";
 import { useBasketStore } from "./basket.store";
+import { useExerciseStore } from "./exercise.store";
 
 export const usePreferencesStore = defineStore('preferencesStore', {
   state: () => ({
@@ -76,7 +77,7 @@ export const usePreferencesStore = defineStore('preferencesStore', {
       await resetDatabase()
         .then(result => {
           if (result.status == 200) {
-            feedbackStore.changeBanner(BannerStateEnum.DATABASERESETSUCCESSFUL)
+            feedbackStore.addSnackbar(BannerStateEnum.DATABASERESETSUCCESSFUL)
             this.serverState = ServerStateEnum.ONLINE
           }
 
@@ -90,14 +91,18 @@ export const usePreferencesStore = defineStore('preferencesStore', {
      */
     async resetExerciseProg() {
       const feedbackStore = useFeedbackStore()
+      const exerciseStore = useExerciseStore()
+
       this.serverState = ServerStateEnum.PENDING
       this.fetchInProgress = true
 
       await resetExerciseProgress()
         .then(result => {
           if (result.status == 200) {
-            feedbackStore.changeBanner(BannerStateEnum.EXERCISEPROGRESSRESETSUCCESSFUL)
+            feedbackStore.addSnackbar(BannerStateEnum.EXERCISEPROGRESSRESETSUCCESSFUL)
             this.serverState = ServerStateEnum.ONLINE
+
+            exerciseStore.getAllExercises()
           }
 
           this.fetchInProgress = false