Snackbar hinzugefügt

Man kann nun sehen, was hinzugefügt wurde und falls ein fehler auftritt was nicht hinzugefügt wurde.
Außerdem gibt es ladebalken.

src/components/baruser/BarFreedrinks.vue

@@ -1,38 +1,51 @@
 <template>
   <div>
-    <v-container>
+    <v-container v-if="!first_loading">
-      <v-card class="mx-auto" outlined>
+      <v-card class="mx-auto" outlined :loading="loading">
         <v-card-title>
           <div class="title">Dienstgetränke</div>
-          <v-chip class="ma-2" color="red" text-color="white" v-if="locked">Gesperrt</v-chip>
+          <v-chip class="ma-2" color="red" text-color="white" v-if="locked"
+            >Gesperrt</v-chip
+          >
           <v-btn class="menuBtn" @click.stop="isMenuShow = !isMenuShow" icon>
             <v-icon>{{ menuIcon }}</v-icon>
           </v-btn>
         </v-card-title>
-        <v-card-subtitle v-if="(limit - free_drink_list_history_job_credit) > 0">
+        <v-card-subtitle v-if="limit - free_drink_list_history_job_credit > 0">
-          Noch {{ ((limit - free_drink_list_history_job_credit) / 100).toFixed(2) }} €
+          Noch
-          übrig!!
+          {{ ((limit - free_drink_list_history_job_credit) / 100).toFixed(2) }}
+          € übrig!!
         </v-card-subtitle>
         <v-card-text>
-          <v-row v-if="!loading">
+          <v-row v-if="!first_loading">
             <v-col cols="12">
               <v-row>
-                <v-col v-for="freeDrink in free_drink_list_config_job" :key="freeDrink.id" cols="6" xs="3" sm="4" class="drinkCol">
+                <v-col
+                  v-for="freeDrink in free_drink_list_config_job"
+                  :key="freeDrink.id"
+                  cols="6"
+                  xs="3"
+                  sm="4"
+                  class="drinkCol"
+                >
                   <v-btn
                     class="drinkBtn"
                     block
                     :disabled="locked"
                     :color="color"
                     @click="addAmount(freeDrink, freeDrinkTypeJob)"
-                  >{{freeDrink.label}}</v-btn>
+                    >{{ freeDrink.label }}</v-btn
+                  >
                 </v-col>
               </v-row>
-              <v-row v-if="!loading" class="justify-end">
+              <v-row v-if="!first_loading" class="justify-end">
                 <v-col cols="3">
                   <v-list-item>
                     <v-list-item-content class="text-center">
                       <v-list-item-action-text :class="getColor()">
-                        {{ (free_drink_list_history_job_credit / 100).toFixed(2) }}
+                        {{
+                          (free_drink_list_history_job_credit / 100).toFixed(2)
+                        }}
                         €
                       </v-list-item-action-text>
                     </v-list-item-content>
@@ -43,7 +56,7 @@
           </v-row>
         </v-card-text>
       </v-card>
-      <v-card class="mx-auto" outlined>
+      <v-card class="mx-auto" outlined :loading="loading">
         <v-card-title>
           <div class="title">Bandgetränke</div>
           <v-btn class="menuBtn" @click.stop="isMenuShow = !isMenuShow" icon>
@@ -51,24 +64,35 @@
           </v-btn>
         </v-card-title>
         <v-card-text>
-          <v-row v-if="!loading">
+          <v-row v-if="!first_loading">
             <v-col cols="12">
               <v-row>
-                <v-col v-for="freeDrink in free_drink_list_config_band" :key="freeDrink.id" cols="6" xs="3" sm="4" class="drinkCol">
+                <v-col
+                  v-for="freeDrink in free_drink_list_config_band"
+                  :key="freeDrink.id"
+                  cols="6"
+                  xs="3"
+                  sm="4"
+                  class="drinkCol"
+                >
                   <v-btn
                     class="drinkBtn"
                     block
                     :color="color_fix"
                     @click="addAmount(freeDrink, freeDrinkTypeBand)"
-                  >{{freeDrink.label}}</v-btn>
+                    >{{ freeDrink.label }}</v-btn
+                  >
                 </v-col>
               </v-row>
-              <v-row v-if="!loading" class="justify-end">
+              <v-row v-if="!first_loading" class="justify-end">
                 <v-col cols="3">
                   <v-list-item>
                     <v-list-item-content class="text-center">
                       <v-list-item-action-text class="title">
-                        {{ free_drink_list_history_band_without_canceled.length }} Getränke
+                        {{
+                          free_drink_list_history_band_without_canceled.length
+                        }}
+                        Getränke
                       </v-list-item-action-text>
                     </v-list-item-content>
                   </v-list-item>
@@ -111,18 +135,35 @@
           v-for="freeDrinkHistory in free_drink_list_history"
           :key="freeDrinkHistory.id"
         >
-          <v-list-item three-line inactive @click="canceledAmount(freeDrinkHistory)">
+          <v-list-item
+            three-line
+            inactive
+            @click="canceledAmount(freeDrinkHistory)"
+          >
             <v-list-item-content>
-              <v-list-item-title>{{ now(freeDrinkHistory.timestamp) }}</v-list-item-title>
+              <v-list-item-title>{{
-              <v-list-item-subtitle>{{ freeDrinkHistory.free_drink_type.name }}: {{ freeDrinkHistory.free_drink_config.label }} wurde für
+                now(freeDrinkHistory.timestamp)
+              }}</v-list-item-title>
+              <v-list-item-subtitle
+                >{{ freeDrinkHistory.free_drink_type.name }}:
+                {{ freeDrinkHistory.free_drink_config.label }} wurde für
                 {{
-                  (freeDrinkHistory.free_drink_config.price/100).toFixed(2)
+                  (freeDrinkHistory.free_drink_config.price / 100).toFixed(2)
-                }} € hinzugefügt
+                }}
+                € hinzugefügt.
               </v-list-item-subtitle>
-              <v-list-item-subtitle class="red--text" v-if="freeDrinkHistory.canceled">STORNIERT!!!</v-list-item-subtitle>
+              <v-list-item-subtitle
+                class="red--text"
+                v-if="freeDrinkHistory.canceled"
+                >STORNIERT!!!</v-list-item-subtitle
+              >
               <v-list-item-action-text
-                  v-if="isStronoEnabled(freeDrinkHistory.timestamp) && !freeDrinkHistory.canceled"
+                v-if="
-              >Klicken um zu Stornieren</v-list-item-action-text>
+                  isStronoEnabled(freeDrinkHistory.timestamp) &&
+                    !freeDrinkHistory.canceled
+                "
+                >Klicken um zu Stornieren</v-list-item-action-text
+              >
             </v-list-item-content>
           </v-list-item>
         </div>
@@ -133,7 +174,10 @@
       <v-card>
         <v-card-title>Willst du wirklich??</v-card-title>
         <v-card-text v-if="canceledMessage">
-          {{canceledMessage.free_drink_type.name}}: Willst du wirklich ein {{canceledMessage.free_drink_config.label}} im Wert von {{(canceledMessage.free_drink_config.price/100).toFixed(2)}} € stornieren?
+          {{ canceledMessage.free_drink_type.name }}: Willst du wirklich ein
+          {{ canceledMessage.free_drink_config.label }} im Wert von
+          {{ (canceledMessage.free_drink_config.price / 100).toFixed(2) }} €
+          stornieren?
         </v-card-text>
         <v-card-actions>
           <v-spacer />
@@ -143,10 +187,47 @@
       </v-card>
     </v-dialog>
 
-    <v-container v-if="loading">
+    <v-container v-if="first_loading">
       <AddAmountSkeleton />
     </v-container>
-    
+    <v-snackbar
+        :color="
+              snackbar_messages.length > 0
+                ? snackbar_messages[0].error
+                  ? 'error'
+                  : 'success'
+                : 'success'
+            "
+        bottom
+        :timeout="0"
+        :multi-line="true"
+        :value="snackbar_messages.length > 0 ? snackbar_messages[0].visible : null"
+        vertical
+    >
+      <v-list-item
+          v-for="(message, index) in snackbar_messages"
+          :key="index"
+          :style="
+                message.error
+                  ? 'background-color: #FF5252;'
+                  : 'background-color: #4CAF50;'
+              "
+          v-show="message.visible"
+      >
+        <v-list-item-content>
+          <v-list-item-title style="color: white">
+            {{ createMessage(message) }}
+          </v-list-item-title>
+        </v-list-item-content>
+        <v-list-item-action v-if="message.error">
+          <v-btn icon @click="message.visible = false">
+            <v-icon color="white">
+              mdi-close
+            </v-icon>
+          </v-btn>
+        </v-list-item-action>
+      </v-list-item>
+    </v-snackbar>
   </div>
 </template>
 <script>
@@ -158,7 +239,6 @@ export default {
   name: 'BarFreedrinks',
   components: { AddAmountSkeleton },
   created() {
-    this.loading = false
     this.timer = setInterval(() => (this.componentRenderer += 1), 1000)
     this.get_free_drink_list_config()
     this.get_free_drink_list_history()
@@ -167,7 +247,6 @@ export default {
     return {
       plus: mdiPlus,
       menuIcon: mdiMenu,
-      loading: true,
       showConfirmCanceledDialog: false,
       canceledMessage: null,
       limit: 1000,
@@ -175,7 +254,6 @@ export default {
       customValue: null,
       color: 'green accent-4',
       color_fix: 'green accent-4',
-      messages: [],
       timer: '',
       componentRenderer: 0,
       isMenuShow: false,
@@ -184,12 +262,17 @@ export default {
     }
   },
   methods: {
-    ...mapActions('freeDrinkList', ['get_free_drink_list_config', 'get_free_drink_list_history','set_free_drink_list_history', 'update_free_drink_list_history']),
+    ...mapActions('freeDrinkList', [
+      'get_free_drink_list_config',
+      'get_free_drink_list_history',
+      'set_free_drink_list_history',
+      'update_free_drink_list_history'
+    ]),
     output() {
       console.log(this.free_drink_list_config)
     },
     addAmount(freeDrink, free_drink_type_id) {
-      this.set_free_drink_list_history({...freeDrink, free_drink_type_id})
+      this.set_free_drink_list_history({ ...freeDrink, free_drink_type_id })
       /*if (amount) {
         this.amount += amount
         this.generateMessage(amount)
@@ -214,21 +297,18 @@ export default {
         canceled: false,
         amount: amount,
         error: false,
-        visible: true,
+        visible: true
       })
     },
     createMessage(message) {
       var text = ''
       if (message.error) {
         text =
-          'ERROR: Konnte ' +
+          'ERROR: ' + message.free_drink_type.name +': Konnte ' + message.label + ' für ' +
-          (message.amount / 100).toFixed(2) +
+          (message.price / 100).toFixed(2) +
-          '€ nicht zu den Dienstgetränken hinzufügen.'
+          '€ nicht hinzufügen.'
       } else {
-        text =
+        text = message.free_drink_type.name + ': ' + message.label + ' wurde für ' + (message.price / 100).toFixed(2) + '€ hinzugefügt.'
-          '' +
-          (message.amount / 100).toFixed(2) +
-          '€ zu den Dienstgetränken hinzugefügt.'
       }
       return text
     },
@@ -245,7 +325,16 @@ export default {
     }
   },
   computed: {
-    ...mapGetters('freeDrinkList', ['free_drink_list_config_job', 'free_drink_list_config_band', 'free_drink_list_history', 'free_drink_list_history_job_credit', 'free_drink_list_history_band', 'free_drink_list_history_band_without_canceled']),
+    ...mapGetters('freeDrinkList', [
+      'free_drink_list_config_job',
+      'free_drink_list_config_band',
+      'free_drink_list_history',
+      'free_drink_list_history_job_credit',
+      'free_drink_list_history_band',
+      'free_drink_list_history_band_without_canceled',
+      'loading',
+      'snackbar_messages'
+    ]),
     now() {
       return now => {
         var actual = new Date()
@@ -303,6 +392,14 @@ export default {
     },
     locked() {
       return this.free_drink_list_history_job_credit >= 1000
+    },
+    first_loading() {
+      return (
+        this.loading &&
+        this.free_drink_list_history.length == 0 &&
+        this.free_drink_list_config_band.length == 0 &&
+        this.free_drink_list_config_job.length == 0
+      )
     }
   },
   beforeDestroy() {
@@ -336,4 +433,3 @@ export default {
   cursor: pointer;
 }
 </style>
-

src/store/modules/freeDrinkList.js

@@ -4,7 +4,10 @@ const timeout = 20000
 
 const state = {
   free_drink_list_config: [],
-  free_drink_list_history: []
+  free_drink_list_history: [],
+  free_drink_list_config_loading: false,
+  free_drink_list_history_loading: false,
+  snackbar_messages: []
 }
 
 const mutations = {
@@ -24,12 +27,33 @@ const mutations = {
     })
     state.free_drink_list_history = data
     state.free_drink_list_history.reverse()
+  },
+  set_free_drink_list_config_loading(state, loading) {
+    state.free_drink_list_config_loading = loading
+  },
+  set_free_drink_list_history_loading(state, loading) {
+    state.free_drink_list_history_loading = loading
+  },
+  add_snackbar_message(state, { data, error }) {
+    data.error = error
+    data.visible = true
+    data.free_drink_type = data.free_drink_types.find(item => {
+      return item.id == data.free_drink_type_id
+    })
+    data.timer = setTimeout(() => {
+      if (!data.error) {
+        data.visible = false
+      }
+    }, 5000)
+    console.log(data)
+    state.snackbar_messages.unshift(data)
   }
 }
 
 const actions = {
   async get_free_drink_list_config({ commit, dispatch, rootState }) {
     try {
+      commit('set_free_drink_list_config_loading', true)
       const response = await axios.get(url.freeDrinkListConfig, {
         headers: { Token: rootState.login.user.accessToken },
         timeout
@@ -41,10 +65,13 @@ const actions = {
       }
       if (e.response)
         if (e.response.status === 401) dispatch('logout', null, { root: true })
+    } finally {
+      commit('set_free_drink_list_config_loading', false)
     }
   },
   async get_free_drink_list_history({ commit, dispatch, rootState }) {
     try {
+      commit('set_free_drink_list_history_loading', true)
       const response = await axios.get(url.freeDrinkListHistory, {
         headers: { Token: rootState.login.user.accessToken },
         timeout
@@ -56,10 +83,13 @@ const actions = {
       }
       if (e.response)
         if (e.response.status === 401) dispatch('logout', null, { root: true })
+    } finally {
+      commit('set_free_drink_list_history_loading', false)
     }
   },
   async set_free_drink_list_history({ commit, dispatch, rootState }, data) {
     try {
+      commit('set_free_drink_list_history_loading', true)
       const response = await axios.post(
         url.freeDrinkListHistory,
         { ...data },
@@ -69,28 +99,37 @@ const actions = {
         }
       )
       commit('set_free_drink_list_history', response.data)
+      commit('add_snackbar_message', { data, error: false })
     } catch (e) {
+      commit('add_snackbar_message', { data, error: true })
       if (e.message == 'Network Error') {
         dispatch('connectionError/addError', null, { root: true })
       }
       if (e.response)
         if (e.response.status === 401) dispatch('logout', null, { root: true })
+    } finally {
+      commit('set_free_drink_list_history_loading', false)
     }
   },
   async update_free_drink_list_history({ commit, dispatch, rootState }, data) {
     try {
+      commit('set_free_drink_list_history_loading', true)
       await axios.put(
         url.freeDrinkListHistory,
         { ...data },
         { headers: { Token: rootState.login.user.accessToken }, timeout }
       )
       commit('set_free_drink_list_history', data)
+      commit('add_snackbar_message', { data, error: false })
     } catch (e) {
+      dispatch('connectionError/addError', null, { root: true })
       if (e.message == 'Network Error') {
         dispatch('connectionError/addError', null, { root: true })
       }
       if (e.response)
         if (e.response.status === 401) dispatch('logout', null, { root: true })
+    } finally {
+      commit('set_free_drink_list_history_loading', false)
     }
   }
 }
@@ -136,13 +175,22 @@ const getters = {
   },
   free_drink_list_history_job_credit(state) {
     let jobDrinks = state.free_drink_list_history.filter(item => {
-      return item.free_drink_type.id == 1 && !item.storno
+      return item.free_drink_type.id == 1 && !item.canceled
     })
     let credit = 0
     jobDrinks.forEach(item => {
       credit += item.free_drink_config.price
     })
     return credit
+  },
+  loading(state) {
+    return (
+      state.free_drink_list_history_loading ||
+      state.free_drink_list_config_loading
+    )
+  },
+  snackbar_messages(state) {
+    return state.snackbar_messages
   }
 }