From d5393d75c541da1dcf8cf3ca77fefd00f46ad756 Mon Sep 17 00:00:00 2001
From: Snowmee <maniac987@hotmail.de>
Date: Sat, 8 Aug 2020 21:09:16 +0200
Subject: [PATCH 01/11] =?UTF-8?q?Dienstgetr=C3=A4nke=20UI=20ohne=20backend?=
 =?UTF-8?q?anschluss?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/baruser/BarFreedrinks.vue | 349 +++++++++++++++++++++++
 src/components/baruser/BarNavigation.vue |  13 +-
 src/components/baruser/SearchBar.vue     |   1 +
 src/plugins/routes.js                    |   4 +-
 src/router/index.js                      |   6 +
 src/views/contents/BarFreedrinksView.vue |  24 ++
 6 files changed, 393 insertions(+), 4 deletions(-)
 create mode 100644 src/components/baruser/BarFreedrinks.vue
 create mode 100644 src/views/contents/BarFreedrinksView.vue

diff --git a/src/components/baruser/BarFreedrinks.vue b/src/components/baruser/BarFreedrinks.vue
new file mode 100644
index 0000000..654e841
--- /dev/null
+++ b/src/components/baruser/BarFreedrinks.vue
@@ -0,0 +1,349 @@
+<template>
+  <div>
+    <v-container>
+      <v-card class="mx-auto" outlined>
+        <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-btn class="menuBtn" @click.stop="isMenuShow = !isMenuShow" icon>
+            <v-icon>{{ menuIcon }}</v-icon>
+          </v-btn>
+        </v-card-title>
+        <v-card-subtitle v-if="(limit - amount) > 0">
+          Noch {{ ((limit - amount) / 100).toFixed(2) }} €
+          übrig!!
+        </v-card-subtitle>
+        <v-card-text>
+          <v-row v-if="!loading">
+            <v-col cols="12">
+              <v-row>
+                <v-col cols="6" xs="3" sm="4" class="drinkCol">
+                  <v-btn
+                    class="drinkBtn"
+                    :disabled="locked"
+                    :color="color"
+                    @click="addAmount(140)"
+                  >Bier</v-btn>
+                </v-col>
+                <v-col cols="6" xs="3" sm="4" class="drinkCol">
+                  <v-btn
+                    class="drinkBtn"
+                    block
+                    :disabled="locked"
+                    :color="color"
+                    @click="addAmount(200)"
+                  >Cuba</v-btn>
+                </v-col>
+                <v-col cols="6" xs="3" sm="4" class="drinkCol">
+                  <v-btn
+                    class="drinkBtn"
+                    block
+                    :disabled="locked"
+                    :color="color"
+                    @click="addAmount(50)"
+                  >Schnaps</v-btn>
+                </v-col>
+                <v-col cols="6" xs="3" sm="4" class="drinkCol">
+                  <v-btn
+                    class="drinkBtn"
+                    block
+                    :disabled="locked"
+                    :color="color"
+                    @click="addAmount(200)"
+                  >Wein</v-btn>
+                </v-col>
+                <v-col cols="6" xs="3" sm="4" class="drinkCol">
+                  <v-btn
+                    class="drinkBtn"
+                    block
+                    :disabled="locked"
+                    :color="color"
+                    @click="addAmount(200)"
+                  >Gin Tonic</v-btn>
+                </v-col>
+                <v-col cols="6" xs="3" sm="4" class="drinkCol">
+                  <v-btn
+                    class="drinkBtn"
+                    block
+                    :disabled="locked"
+                    :color="color"
+                    @click="addAmount(100)"
+                  >Fritz</v-btn>
+                </v-col>
+                <v-col cols="6" xs="3" sm="4" class="drinkCol">
+                  <v-btn
+                    class="drinkBtn"
+                    block
+                    :disabled="locked"
+                    :color="color"
+                    @click="addAmount(100)"
+                  >Saft</v-btn>
+                </v-col>
+                <v-col cols="6" xs="3" sm="4" class="drinkCol">
+                  <v-btn
+                    class="drinkBtn"
+                    block
+                    :disabled="locked"
+                    :color="color"
+                    @click="addAmount(30)"
+                  >Wasser</v-btn>
+                </v-col>
+              </v-row>
+              <v-row v-if="!loading">
+                <v-col cols="8">
+                  <v-text-field
+                    outlined
+                    type="number"
+                    label="Benutzerdefinierter Betrag"
+                    :disabled="locked"
+                    v-model="customValue"
+                  ></v-text-field>
+                </v-col>
+                <v-col cols="2">
+                  <v-btn fab :color="color" :disabled="locked" @click="addAmount(customValue)">
+                    <v-icon>{{ plus }}</v-icon>
+                  </v-btn>
+                </v-col>
+                <v-col cols="2">
+                  <v-list-item>
+                    <v-list-item-content class="text-center">
+                      <v-list-item-action-text :class="getColor()">
+                        {{ (amount / 100).toFixed(2) }}
+                        €
+                      </v-list-item-action-text>
+                    </v-list-item-content>
+                  </v-list-item>
+                </v-col>
+              </v-row>
+            </v-col>
+          </v-row>
+        </v-card-text>
+      </v-card>
+    </v-container>
+
+    <v-navigation-drawer v-model="isMenuShow" right app clipped>
+      <v-list-item-group :key="componentRenderer">
+        <v-list-item inactive>
+          <v-list-item-title class="headline">Verlauf</v-list-item-title>
+        </v-list-item>
+        <v-divider />
+        <div
+          v-for="message in messages"
+          three-line
+          :key="messages.indexOf(message)"
+          class="history-item"
+        >
+          <v-list-item three-line inactive @click="stornoAmount(message)">
+            <v-list-item-content>
+              <v-list-item-title>{{ now(message.date) }}</v-list-item-title>
+              <v-list-item-subtitle>
+                {{
+                createMessage(message)
+                }}
+              </v-list-item-subtitle>
+              <v-list-item-subtitle class="red--text" v-if="message.storno">STORNIERT!!!</v-list-item-subtitle>
+              <v-list-item-action-text
+                v-if="isStronoEnabled(message.date) && !message.storno"
+              >Klicken um zu Stornieren</v-list-item-action-text>
+            </v-list-item-content>
+          </v-list-item>
+        </div>
+      </v-list-item-group>
+    </v-navigation-drawer>
+
+    <v-dialog v-model="showConfirmStornoDialog" max-width="290">
+      <v-card>
+        <v-card-title>Willst du wirklich??</v-card-title>
+        <v-card-text v-if="stornoMessage">
+          Willst du wirklich den Betrag
+          {{ (stornoMessage.amount / 100).toFixed(2) }}€ von
+          den Dienstgetränke stornieren?
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn text @click="cancelStorno">Abbrechen</v-btn>
+          <v-btn text @click="acceptStorno">Stornieren</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <v-container v-if="loading">
+      <AddAmountSkeleton />
+    </v-container>
+  </div>
+</template>
+<script>
+// eslint-disable-next-line no-unused-vars
+import AddAmountSkeleton from '../user/Skeleton/AddAmountSkeleton'
+import { mdiPlus, mdiMenu } from '@mdi/js'
+
+export default {
+  name: 'BarFreedrinks',
+  components: { AddAmountSkeleton },
+  created() {
+    this.loading = false
+    this.timer = setInterval(() => (this.componentRenderer += 1), 1000)
+  },
+  data() {
+    return {
+      plus: mdiPlus,
+      menuIcon: mdiMenu,
+      loading: true,
+      locked: false,
+      showConfirmStornoDialog: false,
+      stornoMessage: null,
+      limit: 1000,
+      amount: 0,
+      customValue: null,
+      color: 'green accent-4',
+      messages: [],
+      timer: '',
+      componentRenderer: 0,
+      isMenuShow: false
+    }
+  },
+  methods: {
+    addAmount(amount) {
+      if (amount) {
+        this.amount += amount
+        this.generateMessage(amount)
+      }
+      this.checkLocked()
+    },
+    stornoAmount(message) {
+      if (!this.isStronoEnabled(message.date) || message.storno) {
+        return
+      }
+
+      this.showConfirmStornoDialog = true
+      this.stornoMessage = message
+    },
+
+    cancelStorno() {
+      this.showConfirmStornoDialog = null
+      this.stornoMessage = null
+    },
+    generateMessage(amount) {
+      this.messages.push({
+        date: new Date(),
+        storno: false,
+        amount: amount
+      })
+    },
+    createMessage(message) {
+      var text = ''
+      if (message.error) {
+        text =
+          'ERROR: Konnte ' +
+          (message.amount / 100).toFixed(2) +
+          '€ nicht zu den Dienstgetränken hinzufügen.'
+      } else {
+        text =
+          '' +
+          (message.amount / 100).toFixed(2) +
+          '€ nicht zu den Dienstgetränken hinzugefügt.'
+      }
+      return text
+    },
+    checkLocked() {
+      this.locked = this.limit - this.amount <= 0
+    },
+    getColor() {
+      return this.locked ? 'title red--text' : 'title'
+    },
+    acceptStorno() {
+      this.stornoMessage.storno = true
+      this.amount -= this.stornoMessage.amount
+      console.log(this.amount, this.stornoMessage)
+      this.cancelStorno()
+    }
+  },
+  computed: {
+    now() {
+      return now => {
+        var actual = new Date()
+        var zero = new Date(0)
+        var date = new Date(actual - now)
+        if (date.getFullYear() === zero.getFullYear()) {
+          if (date.getMonth() === zero.getMonth()) {
+            if (date.getDate() === zero.getDate()) {
+              if (date.getHours() === zero.getDate()) {
+                if (date.getMinutes() < 1) {
+                  return 'vor ' + date.getSeconds() + ' Sekunden'
+                } else if (date.getMinutes() < 10) {
+                  return 'vor ' + date.getMinutes() + ' Minuten'
+                } else {
+                  return (
+                    (now.getHours() < 10 ? '0' : '') +
+                    now.getHours() +
+                    ':' +
+                    (now.getMinutes() < 10 ? '0' : '') +
+                    now.getMinutes()
+                  )
+                }
+              } else {
+                return (
+                  (now.getHours() < 10 ? '0' : '') +
+                  now.getHours() +
+                  ':' +
+                  (now.getMinutes() < 10 ? '0' : '') +
+                  now.getMinutes()
+                )
+              }
+            }
+          }
+        }
+        return (
+          now.getDate() +
+          '.' +
+          now.getMonth() +
+          '.' +
+          now.getFullYear() +
+          ' ' +
+          (now.getHours() < 10 ? '0' : '') +
+          now.getHours() +
+          ':' +
+          (now.getMinutes() < 10 ? '0' : '') +
+          now.getMinutes()
+        )
+      }
+    },
+    isStronoEnabled() {
+      return now => {
+        var actual = new Date()
+        return actual - now < 60000
+      }
+    }
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+  }
+}
+</script>
+
+<style scoped>
+.drinkBtn {
+  width: 100%;
+}
+.drinkCol {
+  padding: 6px !important;
+}
+
+.title {
+  width: calc(100% - 135px);
+  min-width: 150px;
+  font-size: 1.25rem !important;
+  font-weight: 500;
+  line-height: 2rem;
+  letter-spacing: 0.0125em !important;
+  font-family: 'Roboto', sans-serif !important;
+}
+.menuBtn {
+  right: 15px;
+  position: absolute;
+}
+.history-item {
+  cursor: pointer;
+}
+</style>
+
diff --git a/src/components/baruser/BarNavigation.vue b/src/components/baruser/BarNavigation.vue
index ef58718..c08adc4 100644
--- a/src/components/baruser/BarNavigation.vue
+++ b/src/components/baruser/BarNavigation.vue
@@ -8,16 +8,25 @@
         Geruecht
       </v-list-item-title>
     </v-list-item>
+    <v-list-item link :to="{name: 'baruserFreedrinks'}">
+      <v-list-item-icon>
+        <v-icon>{{ beer }}</v-icon>
+      </v-list-item-icon>
+      <v-list-item-title>
+        Freigetränke
+      </v-list-item-title>
+    </v-list-item>
   </v-list>
 </template>
 
 <script>
-import { mdiGlassMugVariant } from '@mdi/js'
+import { mdiGlassMugVariant,mdiBeer } from '@mdi/js'
 export default {
   name: 'BarNavigation',
   data() {
     return {
-      glass_mug_variant: mdiGlassMugVariant
+      glass_mug_variant: mdiGlassMugVariant,
+      beer: mdiBeer
     }
   }
 }
diff --git a/src/components/baruser/SearchBar.vue b/src/components/baruser/SearchBar.vue
index f571a47..3bfb47a 100644
--- a/src/components/baruser/SearchBar.vue
+++ b/src/components/baruser/SearchBar.vue
@@ -106,6 +106,7 @@ export default {
       return retUser ? retUser.amount : 0
     },
     getLocked(user) {
+      if(!user) return 
       let retUser = this.users.find(item => {
         return item.username === user.username
       })
diff --git a/src/plugins/routes.js b/src/plugins/routes.js
index 0128670..2c213d5 100644
--- a/src/plugins/routes.js
+++ b/src/plugins/routes.js
@@ -1,7 +1,7 @@
 //const main = 'https://192.168.5.128:5000/'
-const main = 'http://localhost:5000/'
+//const main = 'http://localhost:5000/'
 //const main = 'http://192.168.5.118:5000/'
-//const main = 'https://groeger-clan.duckdns.org:5000/'
+const main = 'https://groeger-clan.duckdns.org:5000/'
 //const main = 'https://flaschengeist.wu5.de:5000/'
 
 const url = {
diff --git a/src/router/index.js b/src/router/index.js
index 8ebe80f..2dc6732 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -4,6 +4,7 @@ import FinanzerView from '@/views/FinanzerView'
 import Login from '@/views/Login'
 import store from '@/store/index'
 import GeruechteView from '../views/contents/GeruechteView'
+import BarFreedrinksView from '../views/contents/BarFreedrinksView'
 import AddAmount from '../components/user/AddAmount'
 import CreditOverview from '../components/user/CreditOverview'
 import MainView from '../views/MainView'
@@ -124,6 +125,11 @@ const routes = [
             path: 'geruecht',
             name: 'geruecht',
             component: GeruechteView
+          },
+          {
+            path: 'baruserFreedrinks',
+            name: 'baruserFreedrinks',
+            component: BarFreedrinksView
           }
         ]
       },
diff --git a/src/views/contents/BarFreedrinksView.vue b/src/views/contents/BarFreedrinksView.vue
new file mode 100644
index 0000000..bbe6270
--- /dev/null
+++ b/src/views/contents/BarFreedrinksView.vue
@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <BarFreedrinks></BarFreedrinks>
+  </div>
+</template>
+
+<script>
+import BarFreedrinks from '@/components/baruser/BarFreedrinks'
+// eslint-disable-next-line no-unused-vars
+import { mapActions } from 'vuex'
+export default {
+  name: 'BarFreedrinksView',
+  components: { BarFreedrinks },
+  created() {},
+  data() {
+    return {}
+  },
+  methods: {
+   ...mapActions(['logout'])
+  }
+}
+</script>
+
+<style scoped></style>

From 22c5ebce1b6cf11ce3f582ed1898e15bf4e4e836 Mon Sep 17 00:00:00 2001
From: Snowmee <maniac987@hotmail.de>
Date: Sat, 8 Aug 2020 23:15:04 +0200
Subject: [PATCH 02/11] add freedrink to user

---
 src/components/baruser/BarFreedrinks.vue      |   7 +-
 src/components/user/UserNavigation.vue        |  30 +-
 .../user/freedrink/freedrinkUserView.vue      | 407 ++++++++++++++++++
 src/router/index.js                           |   6 +
 4 files changed, 432 insertions(+), 18 deletions(-)
 create mode 100644 src/components/user/freedrink/freedrinkUserView.vue

diff --git a/src/components/baruser/BarFreedrinks.vue b/src/components/baruser/BarFreedrinks.vue
index 654e841..0358179 100644
--- a/src/components/baruser/BarFreedrinks.vue
+++ b/src/components/baruser/BarFreedrinks.vue
@@ -170,6 +170,7 @@
     <v-container v-if="loading">
       <AddAmountSkeleton />
     </v-container>
+    
   </div>
 </template>
 <script>
@@ -227,7 +228,9 @@ export default {
       this.messages.push({
         date: new Date(),
         storno: false,
-        amount: amount
+        amount: amount,
+        error: false,
+        visible: true,
       })
     },
     createMessage(message) {
@@ -241,7 +244,7 @@ export default {
         text =
           '' +
           (message.amount / 100).toFixed(2) +
-          '€ nicht zu den Dienstgetränken hinzugefügt.'
+          '€ zu den Dienstgetränken hinzugefügt.'
       }
       return text
     },
diff --git a/src/components/user/UserNavigation.vue b/src/components/user/UserNavigation.vue
index 5d0d574..951500c 100644
--- a/src/components/user/UserNavigation.vue
+++ b/src/components/user/UserNavigation.vue
@@ -4,9 +4,13 @@
       <v-list-item-icon>
         <v-icon>{{ account }}</v-icon>
       </v-list-item-icon>
-      <v-list-item-title>
-        Home
-      </v-list-item-title>
+      <v-list-item-title>Home</v-list-item-title>
+    </v-list-item>
+    <v-list-item link :to="{ name: 'freedrinkUser' }">
+      <v-list-item-icon>
+        <v-icon>{{ beer }}</v-icon>
+      </v-list-item-icon>
+      <v-list-item-title>Freigetränk buchen</v-list-item-title>
     </v-list-item>
     <v-list-item link :to="{ name: 'userOverview' }">
       <v-list-item-icon>
@@ -25,21 +29,14 @@
       }"
     >
       <v-list-item-icon>
-        <v-icon>
-          {{ briefcase }}
-        </v-icon>
+        <v-icon>{{ briefcase }}</v-icon>
       </v-list-item-icon>
       <v-list-item-title>Dienstübersicht</v-list-item-title>
     </v-list-item>
-    <v-list-item
-      link
-      :to="{ name: 'jobRequests', params: { kind: 'jobInvites' } }"
-    >
+    <v-list-item link :to="{ name: 'jobRequests', params: { kind: 'jobInvites' } }">
       <v-list-item-icon>
         <v-badge overlap color="red" :content="news" :value="news !== 0">
-          <v-icon>
-            {{ switchAccount }}
-          </v-icon>
+          <v-icon>{{ switchAccount }}</v-icon>
         </v-badge>
       </v-list-item-icon>
       <v-list-item-title>Dienstanfragen</v-list-item-title>
@@ -59,7 +56,8 @@ import {
   mdiHome,
   mdiBank,
   mdiBriefcase,
-  mdiAccountSwitch
+  mdiAccountSwitch,
+  mdiBeer
 } from '@mdi/js'
 
 import { mapGetters, mapActions } from 'vuex'
@@ -71,7 +69,8 @@ export default {
       account: mdiHome,
       bank: mdiBank,
       briefcase: mdiBriefcase,
-      switchAccount: mdiAccountSwitch
+      switchAccount: mdiAccountSwitch,
+      beer: mdiBeer
     }
   },
   methods: {
@@ -93,7 +92,6 @@ export default {
   },
   created() {
     this.getUser()
-
   },
   watch: {
     loading(newValue) {
diff --git a/src/components/user/freedrink/freedrinkUserView.vue b/src/components/user/freedrink/freedrinkUserView.vue
new file mode 100644
index 0000000..4362dea
--- /dev/null
+++ b/src/components/user/freedrink/freedrinkUserView.vue
@@ -0,0 +1,407 @@
+<template>
+  <div>
+    <v-container>
+      <v-card class="mx-auto" outlined>
+        <v-card-title>
+          <div class="title">Freigetränk für Versammlungen/Arbeit</div>
+          <v-btn class="menuBtn" @click.stop="isMenuShow = !isMenuShow" icon>
+            <v-icon>{{ menuIcon }}</v-icon>
+          </v-btn>
+        </v-card-title>
+        <v-card-text>
+          <v-row v-if="!loading">
+            <v-col cols="12">
+              <v-row>
+                <v-col cols="6" xs="3" sm="4" class="drinkCol">
+                  <v-btn
+                    class="drinkBtn"
+                    :disabled="locked"
+                    :color="color"
+                    @click="addAmount(140, 'Bier')"
+                  >Bier</v-btn>
+                </v-col>
+                <v-col cols="6" xs="3" sm="4" class="drinkCol">
+                  <v-btn
+                    class="drinkBtn"
+                    block
+                    :disabled="locked"
+                    :color="color"
+                    @click="addAmount(200, 'Cuba')"
+                  >Cuba</v-btn>
+                </v-col>
+                <v-col cols="6" xs="3" sm="4" class="drinkCol">
+                  <v-btn
+                    class="drinkBtn"
+                    block
+                    :disabled="locked"
+                    :color="color"
+                    @click="addAmount(50, 'Schnaps')"
+                  >Schnaps</v-btn>
+                </v-col>
+                <v-col cols="6" xs="3" sm="4" class="drinkCol">
+                  <v-btn
+                    class="drinkBtn"
+                    block
+                    :disabled="locked"
+                    :color="color"
+                    @click="addAmount(200, 'Wein')"
+                  >Wein</v-btn>
+                </v-col>
+                <v-col cols="6" xs="3" sm="4" class="drinkCol">
+                  <v-btn
+                    class="drinkBtn"
+                    block
+                    :disabled="locked"
+                    :color="color"
+                    @click="addAmount(200, 'Gin Tonic')"
+                  >Gin Tonic</v-btn>
+                </v-col>
+                <v-col cols="6" xs="3" sm="4" class="drinkCol">
+                  <v-btn
+                    class="drinkBtn"
+                    block
+                    :disabled="locked"
+                    :color="color"
+                    @click="addAmount(100, 'Fritz')"
+                  >Fritz</v-btn>
+                </v-col>
+                <v-col cols="6" xs="3" sm="4" class="drinkCol">
+                  <v-btn
+                    class="drinkBtn"
+                    block
+                    :disabled="locked"
+                    :color="color"
+                    @click="addAmount(100, 'Saft')"
+                  >Saft</v-btn>
+                </v-col>
+                <v-col cols="6" xs="3" sm="4" class="drinkCol">
+                  <v-btn
+                    class="drinkBtn"
+                    block
+                    :disabled="locked"
+                    :color="color"
+                    @click="addAmount(30, 'Wasser')"
+                  >Wasser</v-btn>
+                </v-col>
+              </v-row>
+              <v-row v-if="!loading">
+                <v-col cols="8">
+                  <v-text-field
+                    outlined
+                    type="number"
+                    label="Benutzerdefinierter Betrag"
+                    :disabled="locked"
+                    v-model="customValue"
+                  ></v-text-field>
+                </v-col>
+                <v-col cols="2">
+                  <v-btn fab :color="color" :disabled="locked" @click="addAmount(customValue)">
+                    <v-icon>{{ plus }}</v-icon>
+                  </v-btn>
+                </v-col>
+              </v-row>
+            </v-col>
+          </v-row>
+        </v-card-text>
+      </v-card>
+    </v-container>
+
+    <v-navigation-drawer v-model="isMenuShow" right app clipped>
+      <v-list-item-group :key="componentRenderer">
+        <v-list-item inactive>
+          <v-list-item-title class="headline">Verlauf</v-list-item-title>
+        </v-list-item>
+        <v-divider />
+        <div
+          v-for="message in messages"
+          :key="messages.indexOf(message)"
+          class="history-item"
+        >
+          <!-- <v-list-item three-line inactive @click="stornoAmount(message)"> -->
+          <v-list-item inactive>
+            <v-list-item-content>
+              <v-list-item-title>{{ now(message.date) }}</v-list-item-title>
+              <v-list-item-action-text>
+                {{
+                createMessage(message)
+                }}
+              </v-list-item-action-text>
+              <!-- <v-list-item-subtitle class="red--text" v-if="message.storno">STORNIERT!!!</v-list-item-subtitle>
+              <v-list-item-action-text
+                v-if="isStronoEnabled(message.date) && !message.storno"
+              >Klicken um zu Stornieren</v-list-item-action-text>-->
+            </v-list-item-content>
+          </v-list-item>
+        </div>
+      </v-list-item-group>
+    </v-navigation-drawer>
+
+    <!-- <v-dialog v-model="showConfirmStornoDialog" max-width="290">
+      <v-card>
+        <v-card-title>Willst du wirklich??</v-card-title>
+        <v-card-text v-if="stornoMessage">
+          Willst du wirklich den Betrag
+          {{ (stornoMessage.amount / 100).toFixed(2) }}€ von
+          den Dienstgetränke stornieren?
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn text @click="cancelStorno">Abbrechen</v-btn>
+          <v-btn text @click="acceptStorno">Stornieren</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>-->
+
+    <v-dialog v-model="showReasonDialog" max-width="290">
+      <v-card>
+        <v-card-title>Willst du wirklich??</v-card-title>
+        <v-card-text>
+          <v-combobox v-model="selectedReason" :items="getReason()" label="Grund fürs Getränk"></v-combobox>
+          <v-textarea label="Beschreibung" v-model="reasonDescription"></v-textarea>
+          <v-text-field type="number" label="Anzahl der Getränke" v-model="drinkCount"></v-text-field>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn text @click="cancelFreedrink">Abbrechen</v-btn>
+          <v-btn text @click="confirmFreeDrink">Bestätigen</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <v-container v-if="loading">
+      <AddAmountSkeleton />
+    </v-container>
+  </div>
+</template>
+<script>
+// eslint-disable-next-line no-unused-vars
+import AddAmountSkeleton from '../Skeleton/AddAmountSkeleton'
+import { mapGetters } from 'vuex'
+import { mdiPlus, mdiMenu } from '@mdi/js'
+
+export default {
+  name: 'FreedrinkUserView',
+  components: { AddAmountSkeleton },
+  created() {
+    this.loading = false
+    // this.timer = setInterval(() => (this.componentRenderer += 1), 1000)
+  },
+  data() {
+    return {
+      plus: mdiPlus,
+      menuIcon: mdiMenu,
+      loading: true,
+      locked: false,
+      showConfirmStornoDialog: false,
+      showReasonDialog: false,
+      stornoMessage: null,
+      customValue: null,
+      color: 'green accent-4',
+      messages: [],
+      amount: 0,
+      selectedDrink: null,
+      drinkCount: 1,
+      timer: '',
+      componentRenderer: 0,
+      isMenuShow: false,
+      selectedReason: null,
+      reasonDescription: null,
+      snackbarTimeout: 3000
+    }
+  },
+  methods: {
+    getReason() {
+      const reasonArray = []
+      if (!this.user) {
+        return
+      }
+      if (this.user.group.includes('user')) {
+        reasonArray.push('AG-Besprechung')
+        reasonArray.push('AGDSN')
+      }
+      if (this.user.group.includes('bar')) {
+        reasonArray.push('Dienstantrittsschnaps')
+      }
+      if (this.user.group.includes('vorstand')) {
+        reasonArray.push('Vorstandssitzung')
+        reasonArray.push('Vermietungsgespräch')
+      }
+      if (this.user.group.includes('gastro')) {
+        reasonArray.push('Helmke-Fahrern')
+        reasonArray.push('Vertretergespräch')
+      }
+
+      return reasonArray
+    },
+    addAmount(amount, drink) {
+      if (amount) {
+        this.showReasonDialog = true
+        this.amount = amount
+        this.selectedDrink = drink
+        console.log(this.user)
+      }
+    },
+    stornoAmount(message) {
+      if (!this.isStronoEnabled(message.date) || message.storno) {
+        return
+      }
+
+      this.showConfirmStornoDialog = true
+      this.stornoMessage = message
+    },
+
+    cancelStorno() {
+      this.showConfirmStornoDialog = null
+      this.stornoMessage = null
+    },
+
+    confirmFreeDrink() {
+      if (this.drinkCount >= 0) {
+        console.log(this.selectedReason)
+        console.log(this.reasonDescription)
+        console.log(this.drinkCount)
+        this.generateMessage()
+      }
+      this.cancelFreedrink()
+    },
+
+    cancelFreedrink() {
+      this.showReasonDialog = false
+      this.amount = null
+      this.selectedReason = null
+      this.reasonDescription = null
+      this.drinkCount = 0
+    },
+    generateMessage() {
+      this.messages.push({
+        date: new Date(),
+        storno: false,
+        amount: this.amount,
+        reasonDescription: this.reasonDescription,
+        selectedReason: this.selectedReason,
+        drinkCount: this.drinkCount
+      })
+    },
+    createMessage(message) {
+      var text = ''
+      if (message.error) {
+        text = 'ERROR: Freigetränk konnt enicht genommen werden'
+      } else {
+        text =
+          this.user.firstname +
+          ' hat sich ' +
+          message.drinkCount +
+          ' ' +
+          this.selectedDrink +
+          ' als Freigetränk im Wert von ' +
+          (message.drinkCount * message.amount / 100).toFixed(2) +
+          '€ genommen weil ' +
+          message.selectedReason
+      }
+      return text
+    },
+    checkLocked() {
+      this.locked = this.limit - this.amount <= 0
+    },
+    getColor() {
+      return this.locked ? 'title red--text' : 'title'
+    },
+    acceptStorno() {
+      this.stornoMessage.storno = true
+      this.amount -= this.stornoMessage.amount
+      console.log(this.amount, this.stornoMessage)
+      this.cancelStorno()
+    }
+  },
+  computed: {
+    ...mapGetters({
+      user: 'user/user'
+    }),
+    now() {
+      return now => {
+        var actual = new Date()
+        var zero = new Date(0)
+        var date = new Date(actual - now)
+        if (date.getFullYear() === zero.getFullYear()) {
+          if (date.getMonth() === zero.getMonth()) {
+            if (date.getDate() === zero.getDate()) {
+              if (date.getHours() === zero.getDate()) {
+                if (date.getMinutes() < 1) {
+                  return 'vor ' + date.getSeconds() + ' Sekunden'
+                } else if (date.getMinutes() < 10) {
+                  return 'vor ' + date.getMinutes() + ' Minuten'
+                } else {
+                  return (
+                    (now.getHours() < 10 ? '0' : '') +
+                    now.getHours() +
+                    ':' +
+                    (now.getMinutes() < 10 ? '0' : '') +
+                    now.getMinutes()
+                  )
+                }
+              } else {
+                return (
+                  (now.getHours() < 10 ? '0' : '') +
+                  now.getHours() +
+                  ':' +
+                  (now.getMinutes() < 10 ? '0' : '') +
+                  now.getMinutes()
+                )
+              }
+            }
+          }
+        }
+        return (
+          now.getDate() +
+          '.' +
+          now.getMonth() +
+          '.' +
+          now.getFullYear() +
+          ' ' +
+          (now.getHours() < 10 ? '0' : '') +
+          now.getHours() +
+          ':' +
+          (now.getMinutes() < 10 ? '0' : '') +
+          now.getMinutes()
+        )
+      }
+    },
+    isStronoEnabled() {
+      return now => {
+        var actual = new Date()
+        return actual - now < 60000
+      }
+    }
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+  }
+}
+</script>
+
+<style scoped>
+.drinkBtn {
+  width: 100%;
+}
+.drinkCol {
+  padding: 6px !important;
+}
+
+.title {
+  width: calc(100% - 135px);
+  min-width: 150px;
+  font-size: 1.25rem !important;
+  font-weight: 500;
+  line-height: 2rem;
+  letter-spacing: 0.0125em !important;
+  font-family: 'Roboto', sans-serif !important;
+}
+.menuBtn {
+  right: 15px;
+  position: absolute;
+}
+.history-item {
+  cursor: pointer;
+}
+</style>
+
diff --git a/src/router/index.js b/src/router/index.js
index 2dc6732..9e2ba9d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -17,6 +17,7 @@ import Overview from '../components/finanzer/Overview'
 import User from '../components/finanzer/User'
 import ServiceManagement from '../components/vorstand/ServiceManagement'
 import Config from '@/components/user/Config'
+import FreedrinkUserView from '@/components/user/freedrink/freedrinkUserView'
 import Jobs from '@/components/user/Jobs'
 import PriceList from '@/components/pricelist/PriceList'
 import ManagementNavigation from '@/components/vorstand/ManagementNavigation'
@@ -94,6 +95,11 @@ const routes = [
             name: 'add',
             component: AddAmount
           },
+          {
+            path: 'freedrinkUser',
+            name: 'freedrinkUser',
+            component: FreedrinkUserView
+          },
           {
             path: 'overview',
             name: 'userOverview',

From 8ac74c9f64f8f9875661fdb7dd5be108c81b2b61 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Gr=C3=B6ger?= <tim@groeger-clan.de>
Date: Thu, 20 Aug 2020 08:39:38 +0200
Subject: [PATCH 03/11] =?UTF-8?q?Backend=20Connection=20f=C3=BCr=20Freiget?=
 =?UTF-8?q?r=C3=A4nke=20Band=20und=20Dienste?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Es wurde die Verbindung zur Schnittstelle aufgebaut. Freigetränke werden Dynamisch gehalten.
---
 src/components/baruser/BarFreedrinks.vue | 229 +++++++++++------------
 src/plugins/routes.js                    |   7 +-
 src/store/index.js                       |   4 +-
 src/store/modules/freeDrinkList.js       | 155 +++++++++++++++
 4 files changed, 271 insertions(+), 124 deletions(-)
 create mode 100644 src/store/modules/freeDrinkList.js

diff --git a/src/components/baruser/BarFreedrinks.vue b/src/components/baruser/BarFreedrinks.vue
index 0358179..8299945 100644
--- a/src/components/baruser/BarFreedrinks.vue
+++ b/src/components/baruser/BarFreedrinks.vue
@@ -9,106 +9,30 @@
             <v-icon>{{ menuIcon }}</v-icon>
           </v-btn>
         </v-card-title>
-        <v-card-subtitle v-if="(limit - amount) > 0">
-          Noch {{ ((limit - amount) / 100).toFixed(2) }} €
+        <v-card-subtitle v-if="(limit - free_drink_list_history_job_credit) > 0">
+          Noch {{ ((limit - free_drink_list_history_job_credit) / 100).toFixed(2) }} €
           übrig!!
         </v-card-subtitle>
         <v-card-text>
           <v-row v-if="!loading">
             <v-col cols="12">
               <v-row>
-                <v-col 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"
-                    :disabled="locked"
-                    :color="color"
-                    @click="addAmount(140)"
-                  >Bier</v-btn>
-                </v-col>
-                <v-col cols="6" xs="3" sm="4" class="drinkCol">
-                  <v-btn
-                    class="drinkBtn"
-                    block
-                    :disabled="locked"
-                    :color="color"
-                    @click="addAmount(200)"
-                  >Cuba</v-btn>
-                </v-col>
-                <v-col cols="6" xs="3" sm="4" class="drinkCol">
-                  <v-btn
-                    class="drinkBtn"
-                    block
-                    :disabled="locked"
-                    :color="color"
-                    @click="addAmount(50)"
-                  >Schnaps</v-btn>
-                </v-col>
-                <v-col cols="6" xs="3" sm="4" class="drinkCol">
-                  <v-btn
-                    class="drinkBtn"
-                    block
-                    :disabled="locked"
-                    :color="color"
-                    @click="addAmount(200)"
-                  >Wein</v-btn>
-                </v-col>
-                <v-col cols="6" xs="3" sm="4" class="drinkCol">
-                  <v-btn
-                    class="drinkBtn"
-                    block
-                    :disabled="locked"
-                    :color="color"
-                    @click="addAmount(200)"
-                  >Gin Tonic</v-btn>
-                </v-col>
-                <v-col cols="6" xs="3" sm="4" class="drinkCol">
-                  <v-btn
-                    class="drinkBtn"
-                    block
-                    :disabled="locked"
-                    :color="color"
-                    @click="addAmount(100)"
-                  >Fritz</v-btn>
-                </v-col>
-                <v-col cols="6" xs="3" sm="4" class="drinkCol">
-                  <v-btn
-                    class="drinkBtn"
-                    block
-                    :disabled="locked"
-                    :color="color"
-                    @click="addAmount(100)"
-                  >Saft</v-btn>
-                </v-col>
-                <v-col cols="6" xs="3" sm="4" class="drinkCol">
-                  <v-btn
-                    class="drinkBtn"
-                    block
-                    :disabled="locked"
-                    :color="color"
-                    @click="addAmount(30)"
-                  >Wasser</v-btn>
+                      class="drinkBtn"
+                      block
+                      :disabled="locked"
+                      :color="color"
+                      @click="addAmount(freeDrink, freeDrinkTypeJob)"
+                  >{{freeDrink.label}}</v-btn>
                 </v-col>
               </v-row>
-              <v-row v-if="!loading">
-                <v-col cols="8">
-                  <v-text-field
-                    outlined
-                    type="number"
-                    label="Benutzerdefinierter Betrag"
-                    :disabled="locked"
-                    v-model="customValue"
-                  ></v-text-field>
-                </v-col>
-                <v-col cols="2">
-                  <v-btn fab :color="color" :disabled="locked" @click="addAmount(customValue)">
-                    <v-icon>{{ plus }}</v-icon>
-                  </v-btn>
-                </v-col>
-                <v-col cols="2">
+              <v-row v-if="!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()">
-                        {{ (amount / 100).toFixed(2) }}
+                        {{ (free_drink_list_history_job_credit / 100).toFixed(2) }}
                         €
                       </v-list-item-action-text>
                     </v-list-item-content>
@@ -119,6 +43,41 @@
           </v-row>
         </v-card-text>
       </v-card>
+      <v-card class="mx-auto" outlined>
+        <v-card-title>
+          <div class="title">Bandgetränke</div>
+          <v-btn class="menuBtn" @click.stop="isMenuShow = !isMenuShow" icon>
+            <v-icon>{{ menuIcon }}</v-icon>
+          </v-btn>
+        </v-card-title>
+        <v-card-text>
+          <v-row v-if="!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-btn
+                      class="drinkBtn"
+                      block
+                      :color="color_fix"
+                      @click="addAmount(freeDrink,  freeDrinkTypeBand)"
+                  >{{freeDrink.label}}</v-btn>
+                </v-col>
+              </v-row>
+              <v-row v-if="!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
+                      </v-list-item-action-text>
+                    </v-list-item-content>
+                  </v-list-item>
+                </v-col>
+              </v-row>
+            </v-col>
+          </v-row>
+        </v-card-text>
+      </v-card>
     </v-container>
 
     <v-navigation-drawer v-model="isMenuShow" right app clipped>
@@ -127,13 +86,13 @@
           <v-list-item-title class="headline">Verlauf</v-list-item-title>
         </v-list-item>
         <v-divider />
-        <div
+        <!-- <div
           v-for="message in messages"
           three-line
           :key="messages.indexOf(message)"
           class="history-item"
         >
-          <v-list-item three-line inactive @click="stornoAmount(message)">
+          <v-list-item three-line inactive @click="canceledAmount(message)">
             <v-list-item-content>
               <v-list-item-title>{{ now(message.date) }}</v-list-item-title>
               <v-list-item-subtitle>
@@ -141,9 +100,28 @@
                 createMessage(message)
                 }}
               </v-list-item-subtitle>
-              <v-list-item-subtitle class="red--text" v-if="message.storno">STORNIERT!!!</v-list-item-subtitle>
+              <v-list-item-subtitle class="red--text" v-if="message.canceled">STORNIERT!!!</v-list-item-subtitle>
               <v-list-item-action-text
-                v-if="isStronoEnabled(message.date) && !message.storno"
+                v-if="isStronoEnabled(message.date) && !message.canceled"
+              >Klicken um zu Stornieren</v-list-item-action-text>
+            </v-list-item-content>
+          </v-list-item>
+        </div> -->
+        <div
+          v-for="freeDrinkHistory in free_drink_list_history"
+          :key="freeDrinkHistory.id"
+          >
+          <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-subtitle>{{ freeDrinkHistory.free_drink_type.name }}: {{ freeDrinkHistory.free_drink_config.label }} wurde für
+                {{
+                  (freeDrinkHistory.free_drink_config.price/100).toFixed(2)
+                }} € 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-action-text
+                  v-if="isStronoEnabled(freeDrinkHistory.timestamp) && !freeDrinkHistory.canceled"
               >Klicken um zu Stornieren</v-list-item-action-text>
             </v-list-item-content>
           </v-list-item>
@@ -151,18 +129,16 @@
       </v-list-item-group>
     </v-navigation-drawer>
 
-    <v-dialog v-model="showConfirmStornoDialog" max-width="290">
+    <v-dialog v-model="showConfirmCanceledDialog" max-width="290">
       <v-card>
         <v-card-title>Willst du wirklich??</v-card-title>
-        <v-card-text v-if="stornoMessage">
-          Willst du wirklich den Betrag
-          {{ (stornoMessage.amount / 100).toFixed(2) }}€ von
-          den Dienstgetränke stornieren?
+        <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?
         </v-card-text>
         <v-card-actions>
           <v-spacer />
-          <v-btn text @click="cancelStorno">Abbrechen</v-btn>
-          <v-btn text @click="acceptStorno">Stornieren</v-btn>
+          <v-btn text @click="cancelCanceled">Abbrechen</v-btn>
+          <v-btn text @click="acceptCanceled">Stornieren</v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -176,58 +152,66 @@
 <script>
 // eslint-disable-next-line no-unused-vars
 import AddAmountSkeleton from '../user/Skeleton/AddAmountSkeleton'
+import { mapActions, mapGetters } from 'vuex'
 import { mdiPlus, mdiMenu } from '@mdi/js'
-
 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()
   },
   data() {
     return {
       plus: mdiPlus,
       menuIcon: mdiMenu,
       loading: true,
-      locked: false,
-      showConfirmStornoDialog: false,
-      stornoMessage: null,
+      showConfirmCanceledDialog: false,
+      canceledMessage: null,
       limit: 1000,
       amount: 0,
       customValue: null,
       color: 'green accent-4',
+      color_fix: 'green accent-4',
       messages: [],
       timer: '',
       componentRenderer: 0,
-      isMenuShow: false
+      isMenuShow: false,
+      freeDrinkTypeJob: 1,
+      freeDrinkTypeBand: 3
     }
   },
   methods: {
-    addAmount(amount) {
-      if (amount) {
+    ...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})
+      /*if (amount) {
         this.amount += amount
         this.generateMessage(amount)
       }
-      this.checkLocked()
+      this.checkLocked()*/
     },
-    stornoAmount(message) {
-      if (!this.isStronoEnabled(message.date) || message.storno) {
+    canceledAmount(historyElement) {
+      if (!this.isStronoEnabled(historyElement.timestamp)) {
         return
       }
-
-      this.showConfirmStornoDialog = true
-      this.stornoMessage = message
+      this.showConfirmCanceledDialog = true
+      this.canceledMessage = historyElement
     },
 
-    cancelStorno() {
-      this.showConfirmStornoDialog = null
-      this.stornoMessage = null
+    cancelCanceled() {
+      this.showConfirmCanceledDialog = null
+      this.canceledMessage = null
     },
     generateMessage(amount) {
       this.messages.push({
         date: new Date(),
-        storno: false,
+        canceled: false,
         amount: amount,
         error: false,
         visible: true,
@@ -254,14 +238,14 @@ export default {
     getColor() {
       return this.locked ? 'title red--text' : 'title'
     },
-    acceptStorno() {
-      this.stornoMessage.storno = true
-      this.amount -= this.stornoMessage.amount
-      console.log(this.amount, this.stornoMessage)
-      this.cancelStorno()
+    acceptCanceled() {
+      this.canceledMessage.canceled = true
+      this.update_free_drink_list_history(this.canceledMessage)
+      this.cancelCanceled()
     }
   },
   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']),
     now() {
       return now => {
         var actual = new Date()
@@ -316,6 +300,9 @@ export default {
         var actual = new Date()
         return actual - now < 60000
       }
+    },
+    locked() {
+      return this.free_drink_list_history_job_credit >= 1000
     }
   },
   beforeDestroy() {
diff --git a/src/plugins/routes.js b/src/plugins/routes.js
index 2c213d5..ae326d3 100644
--- a/src/plugins/routes.js
+++ b/src/plugins/routes.js
@@ -1,7 +1,7 @@
 //const main = 'https://192.168.5.128:5000/'
-//const main = 'http://localhost:5000/'
+const main = 'http://localhost:5000/'
 //const main = 'http://192.168.5.118:5000/'
-const main = 'https://groeger-clan.duckdns.org:5000/'
+//const main = 'https://groeger-clan.duckdns.org:5000/'
 //const main = 'https://flaschengeist.wu5.de:5000/'
 
 const url = {
@@ -28,6 +28,9 @@ const url = {
   saveLifeTime: main + 'saveLifeTime',
   getLifeTime: main + 'getLifeTime',
   resetPassword: main + 'passwordReset',
+  freeDrinkListConfig: main + 'freeDrinkListConfig',
+  freeDrinkListHistory: main + 'freeDrinkListHistory',
+  deleteDrinkListHistory: main + 'deleteDrinkListHistory',
   vorstand: {
     sm: {
       addUser: main + 'sm/addUser',
diff --git a/src/store/index.js b/src/store/index.js
index 7c4eed4..41c8768 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -13,6 +13,7 @@ import jkm from '@/store/modules/jobkindManager'
 import jobInvites from '@/store/modules/jobInvites'
 import jobRequests from '@/store/modules/jobRequests'
 import connectionError from '@/store/modules/connectionError'
+import freeDrinkList from '@/store/modules/freeDrinkList'
 
 Vue.use(Vuex)
 
@@ -30,6 +31,7 @@ export default new Vuex.Store({
     jkm,
     jobInvites,
     jobRequests,
-    connectionError
+    connectionError,
+    freeDrinkList
   }
 })
diff --git a/src/store/modules/freeDrinkList.js b/src/store/modules/freeDrinkList.js
new file mode 100644
index 0000000..edf26db
--- /dev/null
+++ b/src/store/modules/freeDrinkList.js
@@ -0,0 +1,155 @@
+import axios from 'axios'
+import url from '@/plugins/routes'
+const timeout = 20000
+
+const state = {
+  free_drink_list_config: [],
+  free_drink_list_history: []
+}
+
+const mutations = {
+  set_free_drink_list_config(state, data) {
+    state.free_drink_list_config = data
+  },
+  set_free_drink_list_history(state, data) {
+    data.forEach(item => {
+      item.timestamp = new Date(
+        item.timestamp.year,
+        item.timestamp.month - 1,
+        item.timestamp.day,
+        item.timestamp.hour,
+        item.timestamp.minute,
+        item.timestamp.second
+      )
+    })
+    state.free_drink_list_history = data
+    state.free_drink_list_history.reverse()
+  }
+}
+
+const actions = {
+  async get_free_drink_list_config({ commit, dispatch, rootState }) {
+    try {
+      const response = await axios.get(url.freeDrinkListConfig, {
+        headers: { Token: rootState.login.user.accessToken },
+        timeout
+      })
+      commit('set_free_drink_list_config', response.data)
+    } catch (e) {
+      if (e.message == 'Network Error') {
+        dispatch('connectionError/addError', null, { root: true })
+      }
+      if (e.response)
+        if (e.response.status === 401) dispatch('logout', null, { root: true })
+    }
+  },
+  async get_free_drink_list_history({ commit, dispatch, rootState }) {
+    try {
+      const response = await axios.get(url.freeDrinkListHistory, {
+        headers: { Token: rootState.login.user.accessToken },
+        timeout
+      })
+      commit('set_free_drink_list_history', response.data)
+    } catch (e) {
+      if (e.message == 'Network Error') {
+        dispatch('connectionError/addError', null, { root: true })
+      }
+      if (e.response)
+        if (e.response.status === 401) dispatch('logout', null, { root: true })
+    }
+  },
+  async set_free_drink_list_history({ commit, dispatch, rootState }, data) {
+    try {
+      const response = await axios.post(
+        url.freeDrinkListHistory,
+        { ...data },
+        {
+          headers: { Token: rootState.login.user.accessToken },
+          timeout
+        }
+      )
+      commit('set_free_drink_list_history', response.data)
+    } catch (e) {
+      if (e.message == 'Network Error') {
+        dispatch('connectionError/addError', null, { root: true })
+      }
+      if (e.response)
+        if (e.response.status === 401) dispatch('logout', null, { root: true })
+    }
+  },
+  async update_free_drink_list_history({ commit, dispatch, rootState }, data) {
+    try {
+      await axios.put(
+        url.freeDrinkListHistory,
+        { ...data },
+        { headers: { Token: rootState.login.user.accessToken }, timeout }
+      )
+      commit('set_free_drink_list_history', data)
+    } catch (e) {
+      if (e.message == 'Network Error') {
+        dispatch('connectionError/addError', null, { root: true })
+      }
+      if (e.response)
+        if (e.response.status === 401) dispatch('logout', null, { root: true })
+    }
+  }
+}
+
+const getters = {
+  free_drink_list_config(state) {
+    return state.free_drink_list_config
+  },
+  free_drink_list_config_job(state) {
+    return state.free_drink_list_config.filter(item => {
+      console.log(item)
+      return item.free_drink_types.find(drink_type => {
+        return drink_type.id == 1
+      })
+    })
+  },
+  free_drink_list_config_workgroup(state) {
+    return state.free_drink_list_config.filter(item => {
+      return item.free_drink_types.find(drink_type => {
+        return drink_type.id == 2
+      })
+    })
+  },
+  free_drink_list_config_band(state) {
+    return state.free_drink_list_config.filter(item => {
+      return item.free_drink_types.find(drink_type => {
+        return drink_type.id == 3
+      })
+    })
+  },
+  free_drink_list_history(state) {
+    return state.free_drink_list_history
+  },
+  free_drink_list_history_band(state) {
+    return state.free_drink_list_history.filter(item => {
+      return item.free_drink_type.id == 3
+    })
+  },
+  free_drink_list_history_band_without_canceled(state) {
+    return state.free_drink_list_history.filter(item => {
+      return item.free_drink_type.id == 3 && !item.canceled
+    })
+  },
+  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
+    })
+    let credit = 0
+    jobDrinks.forEach(item => {
+      credit += item.free_drink_config.price
+    })
+    return credit
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+  getters
+}

From a91384546b9d01724cc53b16d6ab9a2a792fa26a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Gr=C3=B6ger?= <tim@groeger-clan.de>
Date: Thu, 20 Aug 2020 11:33:47 +0200
Subject: [PATCH 04/11] =?UTF-8?q?Snackbar=20hinzugef=C3=BCgt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 | 200 +++++++++++++++++------
 src/store/modules/freeDrinkList.js       |  52 +++++-
 2 files changed, 198 insertions(+), 54 deletions(-)

diff --git a/src/components/baruser/BarFreedrinks.vue b/src/components/baruser/BarFreedrinks.vue
index 8299945..10ecf09 100644
--- a/src/components/baruser/BarFreedrinks.vue
+++ b/src/components/baruser/BarFreedrinks.vue
@@ -1,38 +1,51 @@
 <template>
   <div>
-    <v-container>
-      <v-card class="mx-auto" outlined>
+    <v-container v-if="!first_loading">
+      <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">
-          Noch {{ ((limit - free_drink_list_history_job_credit) / 100).toFixed(2) }} €
-          übrig!!
+        <v-card-subtitle v-if="limit - free_drink_list_history_job_credit > 0">
+          Noch
+          {{ ((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>
+                    class="drinkBtn"
+                    block
+                    :disabled="locked"
+                    :color="color"
+                    @click="addAmount(freeDrink, freeDrinkTypeJob)"
+                    >{{ 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>
+                    class="drinkBtn"
+                    block
+                    :color="color_fix"
+                    @click="addAmount(freeDrink, freeDrinkTypeBand)"
+                    >{{ 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>
@@ -110,19 +134,36 @@
         <div
           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-subtitle>{{ freeDrinkHistory.free_drink_type.name }}: {{ freeDrinkHistory.free_drink_config.label }} wurde für
+              <v-list-item-title>{{
+                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)
-                }} € hinzugefügt
+                  (freeDrinkHistory.free_drink_config.price / 100).toFixed(2)
+                }}
+                € 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"
-              >Klicken um zu Stornieren</v-list-item-action-text>
+                v-if="
+                  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 ' +
-          (message.amount / 100).toFixed(2) +
-          '€ nicht zu den Dienstgetränken hinzufügen.'
+          'ERROR: ' + message.free_drink_type.name +': Konnte ' + message.label + ' für ' +
+          (message.price / 100).toFixed(2) +
+          '€ nicht hinzufügen.'
       } else {
-        text =
-          '' +
-          (message.amount / 100).toFixed(2) +
-          '€ zu den Dienstgetränken hinzugefügt.'
+        text = message.free_drink_type.name + ': ' + message.label + ' wurde für ' + (message.price / 100).toFixed(2) + '€ 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>
-
diff --git a/src/store/modules/freeDrinkList.js b/src/store/modules/freeDrinkList.js
index edf26db..84ca3a7 100644
--- a/src/store/modules/freeDrinkList.js
+++ b/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
   }
 }
 

From 72e2606ed24079eddf0369a16a9db7128d2248ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Gr=C3=B6ger?= <tim@groeger-clan.de>
Date: Thu, 20 Aug 2020 22:05:20 +0200
Subject: [PATCH 05/11] =?UTF-8?q?Backendconnection=20f=C3=BCr=20FreeDrinkL?=
 =?UTF-8?q?istHistoryWorkgroup?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Es können jetzt auch Freigetränke für mit verschiedenen Gründen und Beschreibungen angelegt werden. Count ist vernachlässigt worden und muss größer als 0 sein. Es kann ebenfalls storniert werden.
---
 package-lock.json                             |  29 +-
 package.json                                  |   2 +-
 src/components/baruser/BarFreedrinks.vue      |  42 ++-
 .../user/freedrink/freedrinkUserView.vue      | 333 +++++++++++-------
 src/plugins/routes.js                         |   1 +
 src/store/modules/freeDrinkList.js            |  47 ++-
 6 files changed, 282 insertions(+), 172 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e8b918a..b099db4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1707,10 +1707,13 @@
           "dev": true
         },
         "serialize-javascript": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-3.0.0.tgz",
-          "integrity": "sha512-skZcHYw2vEX4bw90nAr2iTTsz6x2SrHEnfxgKYmZlvJYBEZrvbKtobJWlQ20zczKb3bsHHXXTYt48zBA7ni9cw==",
-          "dev": true
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-3.1.0.tgz",
+          "integrity": "sha512-JIJT1DGiWmIKhzRsG91aS6Ze4sFUrYbltlkg2onR5OrnNM02Kl/hnY/T4FN2omvyeBbQmMJv+K4cPOpGzOTFBg==",
+          "dev": true,
+          "requires": {
+            "randombytes": "^2.1.0"
+          }
         },
         "source-map": {
           "version": "0.6.1",
@@ -4538,9 +4541,9 @@
       "dev": true
     },
     "elliptic": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.2.tgz",
-      "integrity": "sha512-f4x70okzZbIQl/NSRLkI/+tteV/9WqL98zx+SQ69KbXxmVrmjwsNUPn/gYJJ0sHvEak24cZgHIPegRePAtA/xw==",
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.3.tgz",
+      "integrity": "sha512-IMqzv5wNQf+E6aHeIqATs0tOLeOTwj1QKbRcS3jBbYkl5oLAserA8yJTT7/VyHUYG91PRmPyeQDObKLPpeS4dw==",
       "dev": true,
       "requires": {
         "bn.js": "^4.4.0",
@@ -6842,9 +6845,9 @@
       }
     },
     "lodash": {
-      "version": "4.17.15",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
-      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
+      "version": "4.17.20",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
+      "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==",
       "dev": true
     },
     "lodash.defaultsdeep": {
@@ -11026,9 +11029,9 @@
       "dev": true
     },
     "vuetify": {
-      "version": "2.2.29",
-      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.2.29.tgz",
-      "integrity": "sha512-UI1i8kEdV+s7tNQe2yJJMPlvxGTE8cZfUAXEGV2yO4owHmeybn6p5YzFpJqimoKkfX6ok+zV29+6yIKfkyUDAA=="
+      "version": "2.3.9",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.3.9.tgz",
+      "integrity": "sha512-E5K9flTvS21tCkHgqDBMl0BY/Rld4SLUaJpQ+sQdL8/2uPcWmWLrdumn4SI8LBFojE0UP1GSaH4zKuxLL36fYg=="
     },
     "vuetify-loader": {
       "version": "1.4.4",
diff --git a/package.json b/package.json
index 7240f50..b36db1e 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "core-js": "^3.6.5",
     "vue": "^2.6.10",
     "vue-router": "^3.2.0",
-    "vuetify": "^2.2.29",
+    "vuetify": "^2.3.8",
     "vuex": "^3.4.0"
   },
   "devDependencies": {
diff --git a/src/components/baruser/BarFreedrinks.vue b/src/components/baruser/BarFreedrinks.vue
index 10ecf09..bc47eba 100644
--- a/src/components/baruser/BarFreedrinks.vue
+++ b/src/components/baruser/BarFreedrinks.vue
@@ -110,27 +110,6 @@
           <v-list-item-title class="headline">Verlauf</v-list-item-title>
         </v-list-item>
         <v-divider />
-        <!-- <div
-          v-for="message in messages"
-          three-line
-          :key="messages.indexOf(message)"
-          class="history-item"
-        >
-          <v-list-item three-line inactive @click="canceledAmount(message)">
-            <v-list-item-content>
-              <v-list-item-title>{{ now(message.date) }}</v-list-item-title>
-              <v-list-item-subtitle>
-                {{
-                createMessage(message)
-                }}
-              </v-list-item-subtitle>
-              <v-list-item-subtitle class="red--text" v-if="message.canceled">STORNIERT!!!</v-list-item-subtitle>
-              <v-list-item-action-text
-                v-if="isStronoEnabled(message.date) && !message.canceled"
-              >Klicken um zu Stornieren</v-list-item-action-text>
-            </v-list-item-content>
-          </v-list-item>
-        </div> -->
         <div
           v-for="freeDrinkHistory in free_drink_list_history"
           :key="freeDrinkHistory.id"
@@ -322,7 +301,26 @@ export default {
       this.canceledMessage.canceled = true
       this.update_free_drink_list_history(this.canceledMessage)
       this.cancelCanceled()
-    }
+    },
+    acceptStorno() {
+      this.stornoMessage.storno = true
+      this.amount -= this.stornoMessage.amount
+      console.log(this.amount, this.stornoMessage)
+      this.cancelStorno()
+    },
+    stornoAmount(message) {
+      if (!this.isStronoEnabled(message.date) || message.storno) {
+        return
+      }
+
+      this.showConfirmStornoDialog = true
+      this.stornoMessage = message
+    },
+
+    cancelStorno() {
+      this.showConfirmStornoDialog = null
+      this.stornoMessage = null
+    },
   },
   computed: {
     ...mapGetters('freeDrinkList', [
diff --git a/src/components/user/freedrink/freedrinkUserView.vue b/src/components/user/freedrink/freedrinkUserView.vue
index 4362dea..1a94a5a 100644
--- a/src/components/user/freedrink/freedrinkUserView.vue
+++ b/src/components/user/freedrink/freedrinkUserView.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <v-container>
-      <v-card class="mx-auto" outlined>
+      <v-card class="mx-auto" outlined v-if="!first_loading" :loading="loading">
         <v-card-title>
           <div class="title">Freigetränk für Versammlungen/Arbeit</div>
           <v-btn class="menuBtn" @click.stop="isMenuShow = !isMenuShow" icon>
@@ -9,95 +9,38 @@
           </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 cols="6" xs="3" sm="4" class="drinkCol">
-                  <v-btn
-                    class="drinkBtn"
-                    :disabled="locked"
-                    :color="color"
-                    @click="addAmount(140, 'Bier')"
-                  >Bier</v-btn>
-                </v-col>
-                <v-col cols="6" xs="3" sm="4" class="drinkCol">
+                <v-col
+                  v-for="freeDrink in free_drink_list_config_workgroup"
+                  :key="freeDrink.id"
+                  cols="6"
+                  xs="3"
+                  sm="4"
+                  class="drinkCol"
+                >
                   <v-btn
                     class="drinkBtn"
                     block
-                    :disabled="locked"
-                    :color="color"
-                    @click="addAmount(200, 'Cuba')"
-                  >Cuba</v-btn>
-                </v-col>
-                <v-col cols="6" xs="3" sm="4" class="drinkCol">
-                  <v-btn
-                    class="drinkBtn"
-                    block
-                    :disabled="locked"
-                    :color="color"
-                    @click="addAmount(50, 'Schnaps')"
-                  >Schnaps</v-btn>
-                </v-col>
-                <v-col cols="6" xs="3" sm="4" class="drinkCol">
-                  <v-btn
-                    class="drinkBtn"
-                    block
-                    :disabled="locked"
-                    :color="color"
-                    @click="addAmount(200, 'Wein')"
-                  >Wein</v-btn>
-                </v-col>
-                <v-col cols="6" xs="3" sm="4" class="drinkCol">
-                  <v-btn
-                    class="drinkBtn"
-                    block
-                    :disabled="locked"
-                    :color="color"
-                    @click="addAmount(200, 'Gin Tonic')"
-                  >Gin Tonic</v-btn>
-                </v-col>
-                <v-col cols="6" xs="3" sm="4" class="drinkCol">
-                  <v-btn
-                    class="drinkBtn"
-                    block
-                    :disabled="locked"
-                    :color="color"
-                    @click="addAmount(100, 'Fritz')"
-                  >Fritz</v-btn>
-                </v-col>
-                <v-col cols="6" xs="3" sm="4" class="drinkCol">
-                  <v-btn
-                    class="drinkBtn"
-                    block
-                    :disabled="locked"
-                    :color="color"
-                    @click="addAmount(100, 'Saft')"
-                  >Saft</v-btn>
-                </v-col>
-                <v-col cols="6" xs="3" sm="4" class="drinkCol">
-                  <v-btn
-                    class="drinkBtn"
-                    block
-                    :disabled="locked"
-                    :color="color"
-                    @click="addAmount(30, 'Wasser')"
-                  >Wasser</v-btn>
+                    :color="color_fix"
+                    @click="addAmount(freeDrink, freeDrinkTypeWorkgroup)"
+                    >{{ freeDrink.label }}</v-btn
+                  >
                 </v-col>
               </v-row>
-              <v-row v-if="!loading">
-                <v-col cols="8">
-                  <v-text-field
-                    outlined
-                    type="number"
-                    label="Benutzerdefinierter Betrag"
-                    :disabled="locked"
-                    v-model="customValue"
-                  ></v-text-field>
-                </v-col>
-                <v-col cols="2">
-                  <v-btn fab :color="color" :disabled="locked" @click="addAmount(customValue)">
-                    <v-icon>{{ plus }}</v-icon>
-                  </v-btn>
+              <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_workgroup_without_canceled.length
+                        }}
+                        Getränke
+                      </v-list-item-action-text>
+                    </v-list-item-content>
+                  </v-list-item>
                 </v-col>
               </v-row>
             </v-col>
@@ -113,52 +56,80 @@
         </v-list-item>
         <v-divider />
         <div
-          v-for="message in messages"
-          :key="messages.indexOf(message)"
-          class="history-item"
+          v-for="freeDrinkHistory in free_drink_list_history_workgroup"
+          :key="freeDrinkHistory.id"
         >
-          <!-- <v-list-item three-line inactive @click="stornoAmount(message)"> -->
-          <v-list-item inactive>
+          <v-list-item
+            three-line
+            inactive
+            @click="canceledAmount(freeDrinkHistory)"
+          >
             <v-list-item-content>
-              <v-list-item-title>{{ now(message.date) }}</v-list-item-title>
-              <v-list-item-action-text>
+              <v-list-item-title>{{
+                now(freeDrinkHistory.timestamp)
+              }}</v-list-item-title>
+              <v-list-item-subtitle>
+                {{ freeDrinkHistory.free_drink_config.label }} wurde für
                 {{
-                createMessage(message)
+                  (freeDrinkHistory.free_drink_config.price / 100).toFixed(2)
                 }}
-              </v-list-item-action-text>
-              <!-- <v-list-item-subtitle class="red--text" v-if="message.storno">STORNIERT!!!</v-list-item-subtitle>
+                € 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-action-text
-                v-if="isStronoEnabled(message.date) && !message.storno"
-              >Klicken um zu Stornieren</v-list-item-action-text>-->
+                v-if="
+                  isStronoEnabled(freeDrinkHistory.timestamp) &&
+                    !freeDrinkHistory.canceled
+                "
+                >Klicken um zu Stornieren</v-list-item-action-text
+              >
             </v-list-item-content>
           </v-list-item>
         </div>
       </v-list-item-group>
     </v-navigation-drawer>
 
-    <!-- <v-dialog v-model="showConfirmStornoDialog" max-width="290">
+    <v-dialog v-model="showConfirmCanceledDialog" max-width="290">
       <v-card>
         <v-card-title>Willst du wirklich??</v-card-title>
-        <v-card-text v-if="stornoMessage">
-          Willst du wirklich den Betrag
-          {{ (stornoMessage.amount / 100).toFixed(2) }}€ von
-          den Dienstgetränke stornieren?
+        <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?
         </v-card-text>
         <v-card-actions>
           <v-spacer />
-          <v-btn text @click="cancelStorno">Abbrechen</v-btn>
-          <v-btn text @click="acceptStorno">Stornieren</v-btn>
+          <v-btn text @click="cancelCanceled">Abbrechen</v-btn>
+          <v-btn text @click="acceptCanceled">Stornieren</v-btn>
         </v-card-actions>
       </v-card>
-    </v-dialog>-->
+    </v-dialog>
 
     <v-dialog v-model="showReasonDialog" max-width="290">
       <v-card>
         <v-card-title>Willst du wirklich??</v-card-title>
         <v-card-text>
-          <v-combobox v-model="selectedReason" :items="getReason()" label="Grund fürs Getränk"></v-combobox>
-          <v-textarea label="Beschreibung" v-model="reasonDescription"></v-textarea>
-          <v-text-field type="number" label="Anzahl der Getränke" v-model="drinkCount"></v-text-field>
+          <v-combobox
+            v-model="selectedReason"
+            :items="free_drink_list_reasons"
+            item-value="id"
+            item-text="name"
+            label="Grund fürs Getränk"
+          ></v-combobox>
+          <v-textarea
+            label="Beschreibung"
+            v-model="reasonDescription"
+          ></v-textarea>
+          <v-text-field
+            type="number"
+            label="Anzahl der Getränke"
+            v-model="drinkCount"
+          ></v-text-field>
         </v-card-text>
         <v-card-actions>
           <v-spacer />
@@ -168,37 +139,81 @@
       </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>
 // eslint-disable-next-line no-unused-vars
 import AddAmountSkeleton from '../Skeleton/AddAmountSkeleton'
-import { mapGetters } from 'vuex'
+import { mapGetters, mapActions } from 'vuex'
 import { mdiPlus, mdiMenu } from '@mdi/js'
 
 export default {
   name: 'FreedrinkUserView',
   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()
+    this.get_free_drink_list_reasons()
   },
   data() {
     return {
       plus: mdiPlus,
       menuIcon: mdiMenu,
-      loading: true,
       locked: false,
-      showConfirmStornoDialog: false,
+      showConfirmCanceledDialog: false,
       showReasonDialog: false,
-      stornoMessage: null,
       customValue: null,
       color: 'green accent-4',
+      color_fix: 'green accent-4',
       messages: [],
       amount: 0,
+      free_drink: null,
+      free_drink_type_id: null,
       selectedDrink: null,
       drinkCount: 1,
       timer: '',
@@ -206,10 +221,19 @@ export default {
       isMenuShow: false,
       selectedReason: null,
       reasonDescription: null,
-      snackbarTimeout: 3000
+      freeDrinkTypeWorkgroup: 2,
+      snackbarTimeout: 3000,
+      canceledMessage: null
     }
   },
   methods: {
+    ...mapActions('freeDrinkList', [
+      'get_free_drink_list_config',
+      'get_free_drink_list_history',
+      'get_free_drink_list_reasons',
+      'set_free_drink_list_history',
+      'update_free_drink_list_history'
+    ]),
     getReason() {
       const reasonArray = []
       if (!this.user) {
@@ -233,12 +257,11 @@ export default {
 
       return reasonArray
     },
-    addAmount(amount, drink) {
-      if (amount) {
+    addAmount(free_drink, free_drink_type_id) {
+      if (free_drink) {
         this.showReasonDialog = true
-        this.amount = amount
-        this.selectedDrink = drink
-        console.log(this.user)
+        this.free_drink = free_drink
+        this.free_drink_type_id = free_drink_type_id
       }
     },
     stornoAmount(message) {
@@ -257,10 +280,13 @@ export default {
 
     confirmFreeDrink() {
       if (this.drinkCount >= 0) {
-        console.log(this.selectedReason)
-        console.log(this.reasonDescription)
-        console.log(this.drinkCount)
-        this.generateMessage()
+        this.set_free_drink_list_history({
+          ...this.free_drink,
+          free_drink_type_id: this.free_drink_type_id,
+          free_drink_list_reason_id: this.selectedReason.id,
+          description: this.reasonDescription,
+          count: this.drinkCount
+        })
       }
       this.cancelFreedrink()
     },
@@ -271,6 +297,8 @@ export default {
       this.selectedReason = null
       this.reasonDescription = null
       this.drinkCount = 0
+      this.free_drink_type_id = null
+      this.free_drink = null
     },
     generateMessage() {
       this.messages.push({
@@ -285,18 +313,22 @@ export default {
     createMessage(message) {
       var text = ''
       if (message.error) {
-        text = 'ERROR: Freigetränk konnt enicht genommen werden'
+        text =
+          'ERROR: ' +
+          message.free_drink_type.name +
+          ': Konnte ' +
+          message.label +
+          ' für ' +
+          (message.price / 100).toFixed(2) +
+          '€ nicht hinzufügen.'
       } else {
         text =
-          this.user.firstname +
-          ' hat sich ' +
-          message.drinkCount +
-          ' ' +
-          this.selectedDrink +
-          ' als Freigetränk im Wert von ' +
-          (message.drinkCount * message.amount / 100).toFixed(2) +
-          '€ genommen weil ' +
-          message.selectedReason
+          message.free_drink_type.name +
+          ': ' +
+          message.label +
+          ' wurde für ' +
+          (message.price / 100).toFixed(2) +
+          '€ hinzugefügt.'
       }
       return text
     },
@@ -311,12 +343,39 @@ export default {
       this.amount -= this.stornoMessage.amount
       console.log(this.amount, this.stornoMessage)
       this.cancelStorno()
-    }
+    },
+    acceptCanceled() {
+      this.canceledMessage.canceled = true
+      this.update_free_drink_list_history(this.canceledMessage)
+      this.cancelCanceled()
+    },
+    canceledAmount(historyElement) {
+      if (!this.isStronoEnabled(historyElement.timestamp)) {
+        return
+      }
+      this.showConfirmCanceledDialog = true
+      this.canceledMessage = historyElement
+    },
+
+    cancelCanceled() {
+      this.showConfirmCanceledDialog = null
+      this.canceledMessage = null
+    },
   },
   computed: {
     ...mapGetters({
       user: 'user/user'
     }),
+    ...mapGetters('freeDrinkList', [
+      'free_drink_list_config_workgroup',
+      'free_drink_list_history',
+      'loading',
+      'free_drink_list_reasons',
+      'free_drink_list_reasons_loading',
+      'free_drink_list_history_workgroup_without_canceled',
+      'free_drink_list_history_workgroup',
+      'snackbar_messages'
+    ]),
     now() {
       return now => {
         var actual = new Date()
@@ -371,6 +430,13 @@ export default {
         var actual = new Date()
         return actual - now < 60000
       }
+    },
+    first_loading() {
+      return (
+        this.loading &&
+        this.free_drink_list_history.length == 0 &&
+        this.free_drink_list_config_workgroup.length == 0
+      )
     }
   },
   beforeDestroy() {
@@ -404,4 +470,3 @@ export default {
   cursor: pointer;
 }
 </style>
-
diff --git a/src/plugins/routes.js b/src/plugins/routes.js
index ae326d3..6d9c6e1 100644
--- a/src/plugins/routes.js
+++ b/src/plugins/routes.js
@@ -31,6 +31,7 @@ const url = {
   freeDrinkListConfig: main + 'freeDrinkListConfig',
   freeDrinkListHistory: main + 'freeDrinkListHistory',
   deleteDrinkListHistory: main + 'deleteDrinkListHistory',
+  freeDrinkListReasons: main + 'freeDrinkListReasons',
   vorstand: {
     sm: {
       addUser: main + 'sm/addUser',
diff --git a/src/store/modules/freeDrinkList.js b/src/store/modules/freeDrinkList.js
index 84ca3a7..338aafb 100644
--- a/src/store/modules/freeDrinkList.js
+++ b/src/store/modules/freeDrinkList.js
@@ -5,8 +5,10 @@ const timeout = 20000
 const state = {
   free_drink_list_config: [],
   free_drink_list_history: [],
+  free_drink_list_reasons: [],
   free_drink_list_config_loading: false,
   free_drink_list_history_loading: false,
+  free_drink_list_reasons_loading: false,
   snackbar_messages: []
 }
 
@@ -34,6 +36,9 @@ const mutations = {
   set_free_drink_list_history_loading(state, loading) {
     state.free_drink_list_history_loading = loading
   },
+  set_free_drink_list_reasons_loading(state, loading) {
+    state.free_drink_list_reasons_loading = loading
+  },
   add_snackbar_message(state, { data, error }) {
     data.error = error
     data.visible = true
@@ -47,6 +52,9 @@ const mutations = {
     }, 5000)
     console.log(data)
     state.snackbar_messages.unshift(data)
+  },
+  set_free_drink_list_reasons(state, data) {
+    state.free_drink_list_reasons = data
   }
 }
 
@@ -114,12 +122,12 @@ const actions = {
   async update_free_drink_list_history({ commit, dispatch, rootState }, data) {
     try {
       commit('set_free_drink_list_history_loading', true)
-      await axios.put(
+      const response = await axios.put(
         url.freeDrinkListHistory,
         { ...data },
         { headers: { Token: rootState.login.user.accessToken }, timeout }
       )
-      commit('set_free_drink_list_history', data)
+      commit('set_free_drink_list_history', response.data)
       commit('add_snackbar_message', { data, error: false })
     } catch (e) {
       dispatch('connectionError/addError', null, { root: true })
@@ -131,6 +139,25 @@ const actions = {
     } finally {
       commit('set_free_drink_list_history_loading', false)
     }
+  },
+  async get_free_drink_list_reasons({ commit, dispatch, rootState }) {
+    try {
+      commit('set_free_drink_list_reasons_loading', true)
+      const response = await axios.get(url.freeDrinkListReasons, {
+        headers: { Token: rootState.login.user.accessToken },
+        timeout
+      })
+      commit('set_free_drink_list_reasons', response.data)
+    } 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_reasons_loading', false)
+    }
   }
 }
 
@@ -183,6 +210,16 @@ const getters = {
     })
     return credit
   },
+  free_drink_list_history_workgroup_without_canceled(state) {
+    return state.free_drink_list_history.filter(item => {
+      return item.free_drink_type.id == 2 && !item.canceled
+    })
+  },
+  free_drink_list_history_workgroup(state) {
+    return state.free_drink_list_history.filter(item => {
+      return item.free_drink_type.id == 2
+    })
+  },
   loading(state) {
     return (
       state.free_drink_list_history_loading ||
@@ -191,6 +228,12 @@ const getters = {
   },
   snackbar_messages(state) {
     return state.snackbar_messages
+  },
+  free_drink_list_reasons(state) {
+    return state.free_drink_list_reasons
+  },
+  free_drink_list_reasons_loading(state) {
+    return state.free_drink_list_reasons_loading
   }
 }
 

From 6e4d3a8a014c545cced45258db6b1d7b0f9d82ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Gr=C3=B6ger?= <tim@groeger-clan.de>
Date: Fri, 21 Aug 2020 22:03:24 +0200
Subject: [PATCH 06/11] =?UTF-8?q?MainLayout=20f=C3=BCr=20Freigetr=C3=A4nke?=
 =?UTF-8?q?=20f=C3=BCr=20den=20Vorstand=20gesetzt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Es wurde das MainLayout für die Freigetränke für den Vorstand gesetzt. Dabei wurden free_drink_types hinzugefügt und die Einstellungsseite für die Freigetränke angefangen. Bis jetzt können diese geladen werden.
---
 src/components/vorstand/FreeDrinkList.vue     | 55 ++++++++++++++
 .../FreeDrinkList/FreeDrinkListConfig.vue     | 76 +++++++++++++++++++
 .../FreeDrinkList/FreeDrinkListMain.vue       | 15 ++++
 .../vorstand/ManagementNavigation.vue         |  8 ++
 src/plugins/routes.js                         |  1 +
 src/router/index.js                           | 20 +++++
 src/store/modules/freeDrinkList.js            | 33 ++++++++
 7 files changed, 208 insertions(+)
 create mode 100644 src/components/vorstand/FreeDrinkList.vue
 create mode 100644 src/components/vorstand/FreeDrinkList/FreeDrinkListConfig.vue
 create mode 100644 src/components/vorstand/FreeDrinkList/FreeDrinkListMain.vue

diff --git a/src/components/vorstand/FreeDrinkList.vue b/src/components/vorstand/FreeDrinkList.vue
new file mode 100644
index 0000000..4c36c83
--- /dev/null
+++ b/src/components/vorstand/FreeDrinkList.vue
@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <v-bottom-navigation v-model="bottom_nav" horizontal>
+      <v-btn link :to="{ name: 'freeDrinkListMain' }">
+        <span>Übersicht</span>
+      </v-btn>
+      <v-btn>
+        <span>Liste 1</span>
+      </v-btn>
+      <v-btn>
+        <span>Liste 2</span>
+      </v-btn>
+      <v-btn>
+        <span>Liste 3</span>
+      </v-btn>
+      <v-btn link :to="{ name: 'freeDrinkListConfig' }">
+        <span>Einstellungen</span>
+        <v-icon>mdi-cogs</v-icon>
+      </v-btn>
+    </v-bottom-navigation>
+    <div>
+      <router-view />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+export default {
+  name: 'FreeDrinkList',
+  data() {
+    return {
+      bottom_nav: true
+    }
+  },
+  created() {
+    this.get_free_drink_list_reasons()
+    this.get_free_drink_list_config()
+    this.get_free_drink_list_history()
+    this.get_free_drink_types()
+    this.getPriceList()
+  },
+  methods: {
+    ...mapActions('freeDrinkList', [
+      'get_free_drink_list_config',
+      'get_free_drink_list_history',
+      'get_free_drink_list_reasons',
+      'get_free_drink_types'
+    ]),
+    ...mapActions('priceList', ['getPriceList'])
+  }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/components/vorstand/FreeDrinkList/FreeDrinkListConfig.vue b/src/components/vorstand/FreeDrinkList/FreeDrinkListConfig.vue
new file mode 100644
index 0000000..c1cedc7
--- /dev/null
+++ b/src/components/vorstand/FreeDrinkList/FreeDrinkListConfig.vue
@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <v-card tile>
+      <v-card-title>
+        Freigetränke
+      </v-card-title>
+      <v-card-text>
+        <v-list>
+          <v-list-item
+            v-for="free_drink_config in free_drink_list_config"
+            :key="free_drink_config.id"
+          >
+            <v-text-field
+              outlined
+              label="Label"
+              :value="free_drink_config.label"
+            />
+            <v-autocomplete
+              outlined
+              label="Zugeordnetes Getränk"
+              :items="priceList"
+              :item-text="item => {return item.name + '/' + (item.price_club/100).toFixed(2) + '€'}"
+              item-value="id"
+              :value="free_drink_config.drink"
+            />
+            <v-autocomplete
+                outlined
+                label="Freigetränkaufnahme"
+                multiple
+                :items="free_drink_types"
+                item-text="name"
+                item-value="id"
+                :value="free_drink_config.free_drink_types"
+            />
+            <v-text-field
+              outlined
+              label="Preis in €"
+              type="number"
+              :value="(free_drink_config.price / 100).toFixed(2)"
+            />
+          </v-list-item>
+        </v-list>
+      </v-card-text>
+      <v-card-actions>
+        <v-btn @click="log">
+          LOG
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+    <v-card tile>
+      <v-card-title>Gründe für Freigetränke</v-card-title>
+    </v-card>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  name: 'FreeDrinkListConfig',
+  methods: {
+    log() {
+      console.log(this.free_drink_list_config)
+    }
+  },
+  computed: {
+    ...mapGetters('freeDrinkList', [
+      'free_drink_list_config',
+      'free_drink_list_reasons',
+        'free_drink_types'
+    ]),
+    ...mapGetters('priceList', ["priceList"])
+  }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/components/vorstand/FreeDrinkList/FreeDrinkListMain.vue b/src/components/vorstand/FreeDrinkList/FreeDrinkListMain.vue
new file mode 100644
index 0000000..bc04564
--- /dev/null
+++ b/src/components/vorstand/FreeDrinkList/FreeDrinkListMain.vue
@@ -0,0 +1,15 @@
+<template>
+<div>
+  Übersicht
+</div>
+</template>
+
+<script>
+export default {
+  name: "FreeDrinkListMain"
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/vorstand/ManagementNavigation.vue b/src/components/vorstand/ManagementNavigation.vue
index 6631763..fb61006 100644
--- a/src/components/vorstand/ManagementNavigation.vue
+++ b/src/components/vorstand/ManagementNavigation.vue
@@ -31,6 +31,14 @@
         Dienstarten
       </v-list-item-title>
     </v-list-item>
+    <v-list-item link :to="{name: 'freeDrinkList'}">
+      <v-list-item-icon>
+        <v-icon>mdi-beer</v-icon>
+      </v-list-item-icon>
+      <v-list-item-title>
+        Freigetränke
+      </v-list-item-title>
+    </v-list-item>
   </v-list>
 </template>
 
diff --git a/src/plugins/routes.js b/src/plugins/routes.js
index 6d9c6e1..953a34a 100644
--- a/src/plugins/routes.js
+++ b/src/plugins/routes.js
@@ -32,6 +32,7 @@ const url = {
   freeDrinkListHistory: main + 'freeDrinkListHistory',
   deleteDrinkListHistory: main + 'deleteDrinkListHistory',
   freeDrinkListReasons: main + 'freeDrinkListReasons',
+  freeDrinkTypes: main + 'freeDrinkTypes',
   vorstand: {
     sm: {
       addUser: main + 'sm/addUser',
diff --git a/src/router/index.js b/src/router/index.js
index 9e2ba9d..b90dbcf 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -28,6 +28,9 @@ import WorkgroupManagement from '@/components/vorstand/WorkgroupManagement'
 import JobKindManager from '@/components/vorstand/JobKindManager'
 import JobsRequest from '@/components/user/JobsRequest'
 import ResetPassword from '@/components/ResetPassword'
+import FreeDrinkList from '@/components/vorstand/FreeDrinkList'
+import FreeDrinkListMain from '@/components/vorstand/FreeDrinkList/FreeDrinkListMain'
+import FreeDrinkListConfig from '@/components/vorstand/FreeDrinkList/FreeDrinkListConfig'
 
 Vue.use(VueRouter)
 
@@ -82,6 +85,23 @@ const routes = [
             path: 'jobkindmanagement',
             name: 'jobkindManagement',
             component: JobKindManager
+          },
+          {
+            path: 'freeDrinkList',
+            name: 'freeDrinkList',
+            component: FreeDrinkList,
+            children: [
+              {
+                path: 'main',
+                name: 'freeDrinkListMain',
+                component: FreeDrinkListMain
+              },
+              {
+                path: 'config',
+                name: 'freeDrinkListConfig',
+                component: FreeDrinkListConfig
+              }
+            ]
           }
         ]
       },
diff --git a/src/store/modules/freeDrinkList.js b/src/store/modules/freeDrinkList.js
index 338aafb..7d434d5 100644
--- a/src/store/modules/freeDrinkList.js
+++ b/src/store/modules/freeDrinkList.js
@@ -6,9 +6,11 @@ const state = {
   free_drink_list_config: [],
   free_drink_list_history: [],
   free_drink_list_reasons: [],
+  free_drink_types: [],
   free_drink_list_config_loading: false,
   free_drink_list_history_loading: false,
   free_drink_list_reasons_loading: false,
+  free_drink_types_loading: false,
   snackbar_messages: []
 }
 
@@ -55,6 +57,12 @@ const mutations = {
   },
   set_free_drink_list_reasons(state, data) {
     state.free_drink_list_reasons = data
+  },
+  set_free_drink_types(state, data) {
+    state.free_drink_types = data
+  },
+  set_free_drink_types_loading(state, loading) {
+    state.free_drink_types_loading = loading
   }
 }
 
@@ -158,6 +166,25 @@ const actions = {
     } finally {
       commit('set_free_drink_list_reasons_loading', false)
     }
+  },
+  async get_free_drink_types({ commit, dispatch, rootState }) {
+    try {
+      commit('set_free_drink_types_loading', true)
+      const response = await axios.get(url.freeDrinkTypes, {
+        headers: { Token: rootState.login.user.accessToken },
+        timeout
+      })
+      commit('set_free_drink_types', response.data)
+    } 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_types_loading', false)
+    }
   }
 }
 
@@ -234,6 +261,12 @@ const getters = {
   },
   free_drink_list_reasons_loading(state) {
     return state.free_drink_list_reasons_loading
+  },
+  free_drink_types(state) {
+    return state.free_drink_types
+  },
+  free_drink_types_loading(state) {
+    return state.free_drink_types_loading
   }
 }
 

From a28bbe8e0ae836d81854b21d5feac957e94af554 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Gr=C3=B6ger?= <tim@groeger-clan.de>
Date: Sat, 22 Aug 2020 18:10:39 +0200
Subject: [PATCH 07/11] better view for freedrinklistconfig

---
 .../FreeDrinkList/FreeDrinkListConfig.vue     | 81 +++++++++++--------
 1 file changed, 49 insertions(+), 32 deletions(-)

diff --git a/src/components/vorstand/FreeDrinkList/FreeDrinkListConfig.vue b/src/components/vorstand/FreeDrinkList/FreeDrinkListConfig.vue
index c1cedc7..2c3b77c 100644
--- a/src/components/vorstand/FreeDrinkList/FreeDrinkListConfig.vue
+++ b/src/components/vorstand/FreeDrinkList/FreeDrinkListConfig.vue
@@ -6,39 +6,56 @@
       </v-card-title>
       <v-card-text>
         <v-list>
-          <v-list-item
-            v-for="free_drink_config in free_drink_list_config"
-            :key="free_drink_config.id"
-          >
-            <v-text-field
-              outlined
-              label="Label"
-              :value="free_drink_config.label"
+          <template
+              v-for="(free_drink_config, index) in free_drink_list_config">
+            <v-list-item
+                :key="index">
+              <v-list-item-content>
+                <v-row>
+                  <v-col>
+                    <v-text-field
+                        outlined
+                        label="Label"
+                        :value="free_drink_config.label"
+                    />
+                  </v-col>
+                  <v-col>
+                    <v-autocomplete
+                        outlined
+                        label="Zugeordnetes Getränk"
+                        :items="priceList"
+                        :item-text="item => {return item.name + '/' + (item.price_club/100).toFixed(2) + '€'}"
+                        item-value="id"
+                        :value="free_drink_config.drink"
+                    />
+                  </v-col>
+                  <v-col>
+                    <v-autocomplete
+                        outlined
+                        label="Freigetränkaufnahme"
+                        multiple
+                        :items="free_drink_types"
+                        item-text="name"
+                        item-value="id"
+                        :value="free_drink_config.free_drink_types"
+                    />
+                  </v-col>
+                  <v-col>
+                    <v-text-field
+                        outlined
+                        label="Preis in €"
+                        type="number"
+                        :value="(free_drink_config.price / 100).toFixed(2)"
+                    />
+                  </v-col>
+                </v-row>
+              </v-list-item-content>
+            </v-list-item>
+            <v-divider
+                v-if="index + 1 < free_drink_list_config.length"
+                :key="index"
             />
-            <v-autocomplete
-              outlined
-              label="Zugeordnetes Getränk"
-              :items="priceList"
-              :item-text="item => {return item.name + '/' + (item.price_club/100).toFixed(2) + '€'}"
-              item-value="id"
-              :value="free_drink_config.drink"
-            />
-            <v-autocomplete
-                outlined
-                label="Freigetränkaufnahme"
-                multiple
-                :items="free_drink_types"
-                item-text="name"
-                item-value="id"
-                :value="free_drink_config.free_drink_types"
-            />
-            <v-text-field
-              outlined
-              label="Preis in €"
-              type="number"
-              :value="(free_drink_config.price / 100).toFixed(2)"
-            />
-          </v-list-item>
+          </template>
         </v-list>
       </v-card-text>
       <v-card-actions>

From 8a442d029b5cc54ed38bf4bbe9aed4411cb9492e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Gr=C3=B6ger?= <tim@groeger-clan.de>
Date: Sun, 23 Aug 2020 21:16:56 +0200
Subject: [PATCH 08/11] =?UTF-8?q?L=C3=B6schen,=20Modifizieren=20und=20Hinz?=
 =?UTF-8?q?uf=C3=BCgen=20von=20Freigetr=C3=A4nken?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Der Vorstand kann nun Freigetränke löschen, modifizieren und hinzufügen.
---
 .../FreeDrinkList/FreeDrinkListConfig.vue     | 132 +++++++++++-------
 .../FreeDrinkListConfigConfigItem.vue         | 116 +++++++++++++++
 src/plugins/routes.js                         |   1 +
 src/store/modules/freeDrinkList.js            |  66 +++++++++
 4 files changed, 268 insertions(+), 47 deletions(-)
 create mode 100644 src/components/vorstand/FreeDrinkList/FreeDrinkListConfigComponents/FreeDrinkListConfigConfigItem.vue

diff --git a/src/components/vorstand/FreeDrinkList/FreeDrinkListConfig.vue b/src/components/vorstand/FreeDrinkList/FreeDrinkListConfig.vue
index 2c3b77c..326e95a 100644
--- a/src/components/vorstand/FreeDrinkList/FreeDrinkListConfig.vue
+++ b/src/components/vorstand/FreeDrinkList/FreeDrinkListConfig.vue
@@ -9,83 +9,121 @@
           <template
               v-for="(free_drink_config, index) in free_drink_list_config">
             <v-list-item
-                :key="index">
+                :key="free_drink_config.label"
+            >
               <v-list-item-content>
-                <v-row>
-                  <v-col>
-                    <v-text-field
-                        outlined
-                        label="Label"
-                        :value="free_drink_config.label"
-                    />
-                  </v-col>
-                  <v-col>
-                    <v-autocomplete
-                        outlined
-                        label="Zugeordnetes Getränk"
-                        :items="priceList"
-                        :item-text="item => {return item.name + '/' + (item.price_club/100).toFixed(2) + '€'}"
-                        item-value="id"
-                        :value="free_drink_config.drink"
-                    />
-                  </v-col>
-                  <v-col>
-                    <v-autocomplete
-                        outlined
-                        label="Freigetränkaufnahme"
-                        multiple
-                        :items="free_drink_types"
-                        item-text="name"
-                        item-value="id"
-                        :value="free_drink_config.free_drink_types"
-                    />
-                  </v-col>
-                  <v-col>
-                    <v-text-field
-                        outlined
-                        label="Preis in €"
-                        type="number"
-                        :value="(free_drink_config.price / 100).toFixed(2)"
-                    />
-                  </v-col>
-                </v-row>
+                <FreeDrinkListConfigConfigItem :free_drink_config="free_drink_config" @save="save" @delete_free_drink_list_config="delete_free_drink_config" />
               </v-list-item-content>
             </v-list-item>
             <v-divider
-                v-if="index + 1 < free_drink_list_config.length"
+                v-if="(index + 1 < free_drink_list_config.length) || new_free_drink_list_config"
                 :key="index"
             />
           </template>
+          <v-list-item v-if="new_free_drink_list_config">
+            <v-list-item-content>
+              <FreeDrinkListConfigConfigItem :free_drink_config="default_model" @save="save" @delete_free_drink_config="new_free_drink_list_config=false"/>
+            </v-list-item-content>
+          </v-list-item>
         </v-list>
       </v-card-text>
       <v-card-actions>
-        <v-btn @click="log">
-          LOG
+        <v-spacer />
+        <v-btn fab color="success" @click="new_free_drink_list_config=true" v-if="!new_free_drink_list_config">
+          <v-icon>mdi-plus</v-icon>
         </v-btn>
       </v-card-actions>
     </v-card>
     <v-card tile>
       <v-card-title>Gründe für Freigetränke</v-card-title>
     </v-card>
+
+    <v-dialog v-model="check_delete_free_drink_list_config" max-width="400">
+        <v-card>
+          <v-card-title>
+            Wirklich löschen?
+          </v-card-title>
+          <v-card-text>
+            Willst du wirklich <span class="font-weight-black">{{check_model.label}}</span> mit dem Getränk <span class="font-weight-black">{{check_model.drink.name}}</span> löschen?
+            Wenn du dies löscht, wird auch der ganze Verlauf gelöscht. Dh. es ist nicht mehr vollständig nachvollziehbar, was getrunken wurde.
+          </v-card-text>
+          <v-card-actions>
+            <v-spacer/>
+            <v-btn @click="cancel_delete()">Abbrechen</v-btn>
+            <v-btn @click="accept_delete()" color="error">Löschen</v-btn>
+          </v-card-actions>
+        </v-card>
+    </v-dialog>
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { mapGetters, mapActions} from 'vuex'
+import FreeDrinkListConfigConfigItem
+  from '@/components/vorstand/FreeDrinkList/FreeDrinkListConfigComponents/FreeDrinkListConfigConfigItem'
 export default {
   name: 'FreeDrinkListConfig',
+  components: { FreeDrinkListConfigConfigItem },
+  data() {
+    return {
+      new_free_drink_list_config: false,
+      default_model: {
+        id: -1,
+        label: null,
+        free_drink_types: null,
+        drink: null,
+        price: null
+      },
+      check_model: {
+        label: null,
+        drink: {name: null}
+      },
+      default_check_model: {
+        label: null,
+        drink: {name: null}
+      },
+      check_delete_free_drink_list_config: false
+    }
+  },
   methods: {
+    ...mapActions('freeDrinkList', ['set_free_drink_list_config', 'delete_free_drink_list_config', 'update_free_drink_list_config']),
     log() {
       console.log(this.free_drink_list_config)
+    },
+    reset(free_drink_config) {
+      let data = this.model.find(item => {
+        return item.id == free_drink_config.id
+      })
+      this.set_free_drink_config(data.origin)
+      this.model.splice(this.model.indexOf(data), 1)
+
+    },
+    cancel_delete() {
+      this.check_delete_free_drink_list_config = false
+      this.check_model = Object.assign({}, this.default_check_model)
+    },
+    accept_delete() {
+      this.delete_free_drink_list_config(this.check_model)
+      this.cancel_delete()
+    },
+    delete_free_drink_config(free_drink_config) {
+      Object.assign(this.check_model, free_drink_config)
+      this.check_delete_free_drink_list_config = true
+      console.log(this.check_delete_free_drink_list_config)
+    },
+    save(free_drink_config) {
+      if (free_drink_config.id > 0) {
+        this.update_free_drink_list_config(free_drink_config)
+      } else {
+        this.set_free_drink_list_config(free_drink_config)
+      }
     }
   },
   computed: {
     ...mapGetters('freeDrinkList', [
       'free_drink_list_config',
-      'free_drink_list_reasons',
-        'free_drink_types'
-    ]),
-    ...mapGetters('priceList', ["priceList"])
+      'free_drink_list_reasons'
+    ])
   }
 }
 </script>
diff --git a/src/components/vorstand/FreeDrinkList/FreeDrinkListConfigComponents/FreeDrinkListConfigConfigItem.vue b/src/components/vorstand/FreeDrinkList/FreeDrinkListConfigComponents/FreeDrinkListConfigConfigItem.vue
new file mode 100644
index 0000000..8f8bd70
--- /dev/null
+++ b/src/components/vorstand/FreeDrinkList/FreeDrinkListConfigComponents/FreeDrinkListConfigConfigItem.vue
@@ -0,0 +1,116 @@
+<template>
+<div>
+  <v-form :ref="free_drink_config.id">
+    <v-row>
+      <v-col>
+        <v-text-field
+            outlined
+            label="Label"
+            :value="free_drink_config.label"
+            @change="set_model($event, 'label')"
+        />
+      </v-col>
+      <v-col>
+        <v-autocomplete
+            outlined
+            label="Zugeordnetes Getränk"
+            :items="priceList"
+            :item-text="item => {return item.name + '/' + (item.price_club/100).toFixed(2) + '€'}"
+            item-value="id"
+            :value="free_drink_config.drink"
+            @change="set_model($event, 'drink')"
+            return-object
+        />
+      </v-col>
+      <v-col>
+        <v-autocomplete
+            outlined
+            label="Freigetränkaufnahme"
+            multiple
+            :items="free_drink_types"
+            item-text="name"
+            item-value="id"
+            :value="free_drink_config.free_drink_types"
+            return-object
+            @change="set_model($event, 'free_drink_types')"
+        />
+      </v-col>
+      <v-col>
+        <v-text-field
+            outlined
+            label="Preis in €"
+            type="number"
+            :value="(free_drink_config.price/100).toFixed(2)"
+            @change="set_model(Math.round($event*100), 'price')"
+        />
+      </v-col>
+    </v-row>
+  </v-form>
+  <v-row justify="end">
+    <v-btn
+        v-if="free_drink_config.id > 0"
+        icon
+        class="mr-3"
+        @click="$emit('delete_free_drink_list_config', free_drink_config)">
+      <v-icon>mdi-delete</v-icon>
+    </v-btn>
+    <v-btn
+      v-else
+      fab
+      color="error"
+      x-small
+      class="mr-4"
+      @click="$emit('delete_free_drink_config')"
+      >
+      <v-icon>mdi-minus</v-icon>
+    </v-btn>
+    <v-btn
+        v-if="!is_same || free_drink_config.id < 0"
+        class="mr-3"
+        color="success"
+        @click="() => {$emit('save', model); $emit('delete_free_drink_config'); model = null}"
+    >
+      Save
+    </v-btn>
+  </v-row>
+</div>
+</template>
+
+<script>
+import {mapGetters} from 'vuex'
+export default {
+name: "FreeDrinkListConfigConfigItem",
+  props: ['free_drink_config'],
+  data() {
+  return {
+    model: null
+  }
+  },
+  methods: {
+    set_model(event, type) {
+      console.log(!!this.model)
+      if (!this.model) {
+        this.model = Object.assign({}, this.free_drink_config)
+      }
+      if (type == 'drink') {
+        this.model.drink_id = event.id
+      }
+      this.model[type] = event
+      console.log(this.model)
+    }
+  },
+  computed: {
+  ...mapGetters('freeDrinkList', [
+    'free_drink_types']),
+    ...mapGetters('priceList', ["priceList"]),
+    is_same() {
+      console.log(this.model ? 'yo': 'no')
+      return this.model ? JSON.stringify(this.model) == JSON.stringify(this.free_drink_config) : true
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/plugins/routes.js b/src/plugins/routes.js
index 953a34a..cef3e5a 100644
--- a/src/plugins/routes.js
+++ b/src/plugins/routes.js
@@ -33,6 +33,7 @@ const url = {
   deleteDrinkListHistory: main + 'deleteDrinkListHistory',
   freeDrinkListReasons: main + 'freeDrinkListReasons',
   freeDrinkTypes: main + 'freeDrinkTypes',
+  deleteFreeDrinkListConfig: main + 'deleteFreeDrinkListConfig',
   vorstand: {
     sm: {
       addUser: main + 'sm/addUser',
diff --git a/src/store/modules/freeDrinkList.js b/src/store/modules/freeDrinkList.js
index 7d434d5..44f9434 100644
--- a/src/store/modules/freeDrinkList.js
+++ b/src/store/modules/freeDrinkList.js
@@ -63,6 +63,12 @@ const mutations = {
   },
   set_free_drink_types_loading(state, loading) {
     state.free_drink_types_loading = loading
+  },
+  set_free_drink_config(state, data) {
+    let config = state.free_drink_list_config.find(item => {
+      return item.id == data.id
+    })
+    Object.assign(config, data)
   }
 }
 
@@ -185,6 +191,63 @@ const actions = {
     } finally {
       commit('set_free_drink_types_loading', false)
     }
+  },
+  async set_free_drink_list_config({commit, dispatch, rootState}, data) {
+    try {
+      commit('set_free_drink_list_config_loading', true)
+      const response = await axios.post(url.freeDrinkListConfig, {...data},{
+        headers: { Token: rootState.login.user.accessToken },
+        timeout
+      })
+      commit('set_free_drink_list_config', response.data)
+    } 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_config_loading', false)
+    }
+  },
+  async update_free_drink_list_config({commit, dispatch, rootState}, data) {
+    try {
+      commit('set_free_drink_list_config_loading', true)
+      const response = await axios.put(url.freeDrinkListConfig, {...data},{
+        headers: { Token: rootState.login.user.accessToken },
+        timeout
+      })
+      commit('set_free_drink_list_config', response.data)
+    } 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_config_loading', false)
+    }
+  },
+  async delete_free_drink_list_config({commit, dispatch, rootState}, data) {
+    try {
+      commit('set_free_drink_list_config_loading', true)
+      const response = await axios.post(url.deleteFreeDrinkListConfig, {...data},{
+        headers: { Token: rootState.login.user.accessToken },
+        timeout
+      })
+      commit('set_free_drink_list_config', response.data)
+    } 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_config_loading', false)
+    }
   }
 }
 
@@ -267,6 +330,9 @@ const getters = {
   },
   free_drink_types_loading(state) {
     return state.free_drink_types_loading
+  },
+  free_drink_list_config_by_id: (state) => (id) => {
+    return state.free_drink_list_config.find(item => { return item.id == id})
   }
 }
 

From 0fcbbe23c211da919dbb6824762e9d4d2d2802bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Gr=C3=B6ger?= <tim@groeger-clan.de>
Date: Sun, 23 Aug 2020 23:18:36 +0200
Subject: [PATCH 09/11] =?UTF-8?q?Overview=20f=C3=BCr=20Freigetr=C3=A4nke?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

es gibt nun eine Gesamtübersicht aller Freigetränke für einen bestimmten Monat.
Für Dienstgetränke funktioniert es schon auch ist aber noch nicht vollständig.
---
 src/components/vorstand/FreeDrinkList.vue     |  82 ++++++++-
 .../FreeDrinkList/FreeDrinkListJob.vue        | 108 ++++++++++++
 .../FreeDrinkList/FreeDrinkListMain.vue       | 155 +++++++++++++++++-
 src/plugins/routes.js                         |   1 +
 src/router/index.js                           |   6 +
 src/store/modules/freeDrinkList.js            |  28 ++++
 6 files changed, 372 insertions(+), 8 deletions(-)
 create mode 100644 src/components/vorstand/FreeDrinkList/FreeDrinkListJob.vue

diff --git a/src/components/vorstand/FreeDrinkList.vue b/src/components/vorstand/FreeDrinkList.vue
index 4c36c83..7335494 100644
--- a/src/components/vorstand/FreeDrinkList.vue
+++ b/src/components/vorstand/FreeDrinkList.vue
@@ -4,8 +4,8 @@
       <v-btn link :to="{ name: 'freeDrinkListMain' }">
         <span>Übersicht</span>
       </v-btn>
-      <v-btn>
-        <span>Liste 1</span>
+      <v-btn link :to="{name: 'freeDrinkListJob'}">
+        <span>Dienstgetränke</span>
       </v-btn>
       <v-btn>
         <span>Liste 2</span>
@@ -18,6 +18,23 @@
         <v-icon>mdi-cogs</v-icon>
       </v-btn>
     </v-bottom-navigation>
+    <v-toolbar v-if="$route.name != 'freeDrinkListConfig'" flat dense>
+      <v-spacer/>
+      <v-toolbar-items>
+        <v-btn icon @click="change_month(-1)">
+          <v-icon>mdi-chevron-left</v-icon>
+        </v-btn>
+        <v-item>
+          <v-list-item-title>
+            {{month[date.getMonth()]}} {{date.getFullYear()}}
+          </v-list-item-title>
+        </v-item>
+        <v-btn icon @click="change_month(1)">
+          <v-icon>mdi-chevron-right</v-icon>
+        </v-btn>
+      </v-toolbar-items>
+      <v-spacer/>
+    </v-toolbar>
     <div>
       <router-view />
     </div>
@@ -30,24 +47,77 @@ export default {
   name: 'FreeDrinkList',
   data() {
     return {
-      bottom_nav: true
+      bottom_nav: true,
+      date: new Date(),
+      month: [
+          'Januar',
+          'Februar',
+          'März',
+          'April',
+          'Mai',
+          'Juni',
+          'Juli',
+          'August',
+          'September',
+          'Oktober',
+          'November',
+          'Dezember'
+      ]
     }
   },
   created() {
     this.get_free_drink_list_reasons()
     this.get_free_drink_list_config()
-    this.get_free_drink_list_history()
+    this.get_free_drink_list_history_from_to({
+      from_date: {
+        year: this.from_date.getFullYear(),
+        month: this.from_date.getMonth() + 1,
+        day: 1
+      },
+      to_date: {
+        year: this.to_date.getFullYear(),
+        month: this.to_date.getMonth() + 1,
+        day: 1
+      }
+    })
     this.get_free_drink_types()
     this.getPriceList()
   },
   methods: {
     ...mapActions('freeDrinkList', [
       'get_free_drink_list_config',
-      'get_free_drink_list_history',
+      'get_free_drink_list_history_from_to',
       'get_free_drink_list_reasons',
       'get_free_drink_types'
     ]),
-    ...mapActions('priceList', ['getPriceList'])
+    ...mapActions('priceList', ['getPriceList']),
+    change_month(payload) {
+      this.date = new Date(this.date.getFullYear(), this.date.getMonth() + payload, 1)
+    }
+  },
+  computed: {
+    to_date() {
+      return new Date(this.date.getFullYear(), this.date.getMonth()+1,1)
+    },
+    from_date() {
+      return new Date(this.date.getFullYear(), this.date.getMonth(), 1)
+    }
+  },
+  watch: {
+    date() {
+      this.get_free_drink_list_history_from_to({
+        from_date: {
+          year: this.from_date.getFullYear(),
+          month: this.from_date.getMonth() + 1,
+          day: 1
+        },
+        to_date: {
+          year: this.to_date.getFullYear(),
+          month: this.to_date.getMonth() + 1,
+          day: 1
+        }
+      })
+    }
   }
 }
 </script>
diff --git a/src/components/vorstand/FreeDrinkList/FreeDrinkListJob.vue b/src/components/vorstand/FreeDrinkList/FreeDrinkListJob.vue
new file mode 100644
index 0000000..ba66a1f
--- /dev/null
+++ b/src/components/vorstand/FreeDrinkList/FreeDrinkListJob.vue
@@ -0,0 +1,108 @@
+<template>
+  <div>
+    <v-row justify="space-around">
+      <v-card>
+        <v-card-title class="text-center">
+          Anzahl Freigetränke
+        </v-card-title>
+        <v-card-text class="text-h2 text-center">
+          {{free_drink_list_history_job_without_canceled.length}}
+        </v-card-text>
+      </v-card>
+      <v-card>
+        <v-card-title class="text-center">
+          Summe Freigetränke
+        </v-card-title>
+        <v-card-text class="text-h2 text-center">
+          {{ (sum/100).toFixed(2)}} €
+        </v-card-text>
+      </v-card>
+    </v-row>
+    <v-data-table :headers="header" :items="table"/>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+name: "FreeDrinkListJob",
+data() {
+  return {
+    header: [
+      {
+        text: 'Datum',
+        value: 'date'
+      },
+      {
+        text: 'Label Freigetränk',
+        value: 'label'
+      },
+      {
+        text: 'Freigetränk',
+        value: 'name'
+      },
+      {
+        text: 'Anzahl',
+        value: 'count'
+      },
+      {
+        text: 'Preis pro Getränk',
+        value: 'pricepro'
+      },
+      {
+        text: 'Preis gesamt',
+        value: 'sum'
+      }
+    ]
+  }
+},
+computed: {
+  ...mapGetters('freeDrinkList', ['free_drink_list_history_job_without_canceled', 'free_drink_list_config']),
+  sum() {
+    let sum = 0
+    this.free_drink_list_history_job_without_canceled.forEach(item => {
+      if (item.canceled) {
+        sum += item.free_drink_config.price
+      }
+    })
+    return sum
+  },
+  table() {
+    if (this.free_drink_list_history_job_without_canceled.length == 0) {
+      return []
+    }
+    let retVal = []
+    const date_month = this.free_drink_list_history_job_without_canceled[0].timestamp
+    let days = new Date(date_month.getFullYear(), date_month.getMonth() + 1, 0).getDate()
+    for (let day = 1; day <= days; day++) {
+      let from = new Date(date_month.getFullYear(), date_month.getMonth(), day)
+      let to = new Date(date_month.getFullYear(), date_month.getMonth(), day + 1)
+      let history_of_date = this.free_drink_list_history_job_without_canceled.filter(item => {
+        return item.timestamp >= from && item.timestamp <= to && !item.canceled
+      })
+      this.free_drink_list_config.forEach(drink_config => {
+        let history_of_config = history_of_date.filter(item => {
+          return item.free_drink_config_id == drink_config.id
+        })
+        if (history_of_config.length > 0) {
+          retVal.push({
+            date: `${from.getDate()}.${from.getMonth() + 1}.${from.getFullYear()}`,
+            label: drink_config.label,
+            name: drink_config.drink.name,
+            count: history_of_config.length,
+            pricepro: (drink_config.price / 100).toFixed(2),
+            sum: (drink_config.price / 100 * history_of_config.length).toFixed(2)
+          })
+        }
+      })
+    }
+    return retVal
+  }
+}
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/vorstand/FreeDrinkList/FreeDrinkListMain.vue b/src/components/vorstand/FreeDrinkList/FreeDrinkListMain.vue
index bc04564..f5f8801 100644
--- a/src/components/vorstand/FreeDrinkList/FreeDrinkListMain.vue
+++ b/src/components/vorstand/FreeDrinkList/FreeDrinkListMain.vue
@@ -1,12 +1,163 @@
 <template>
 <div>
-  Übersicht
+  <v-row justify="space-around">
+    <v-card>
+      <v-card-title class="text-center">
+        Anzahl Freigetränke
+      </v-card-title>
+      <v-card-text class="text-h2 text-center">
+        {{free_drink_list_history_without_canceled.length}}
+      </v-card-text>
+      <v-card-title class="text-center">
+        Summe Freigetränke
+      </v-card-title>
+      <v-card-text class="text-h2 text-center">
+        {{ (sum/100).toFixed(2)}} €
+      </v-card-text>
+    </v-card>
+    <v-card>
+      <v-card-title class="text-center">
+        Anzahl Dienstgetränke
+      </v-card-title>
+      <v-card-text class="text-h2 text-center">
+        {{ free_drink_list_history_job_without_canceled.length }}
+      </v-card-text>
+      <v-card-title class="text-center">
+        Summe Dienstgetränke
+      </v-card-title>
+      <v-card-text class="text-h2 text-center">
+        {{(sumJob/100).toFixed(2)}} €
+      </v-card-text>
+    </v-card>
+    <v-card>
+      <v-card-title class="text-center">
+        Anzahl AG-Getränke
+      </v-card-title>
+      <v-card-text class="text-h2 text-center">
+        {{ free_drink_list_history_workgroup_without_canceled.length }}
+      </v-card-text>
+      <v-card-title class="text-center">
+        Summe AG-Getränke
+      </v-card-title>
+      <v-card-text class="text-h2 text-center">
+        {{(sumWorkgroup/100).toFixed(2)}} €
+      </v-card-text>
+    </v-card>
+    <v-card>
+      <v-card-title class="text-center">
+        Anzahl Bandgetränke
+      </v-card-title>
+      <v-card-text class="text-h2 text-center">
+        {{ free_drink_list_history_band_without_canceled.length }}
+      </v-card-text>
+      <v-card-title class="text-center">
+        Summe Bandgetränke
+      </v-card-title>
+      <v-card-text class="text-h2 text-center">
+        {{(sumBand/100).toFixed(2)}} €
+      </v-card-text>
+    </v-card>
+  </v-row>
+  <v-data-table :headers="header" :items="table"/>
 </div>
 </template>
 
 <script>
+import {mapGetters} from 'vuex'
 export default {
-  name: "FreeDrinkListMain"
+  name: "FreeDrinkListMain",
+  data() {
+    return {
+      header: [
+        {
+          text: 'Datum',
+          value: 'date'
+        },
+        {
+          text: 'Label Freigetränk',
+          value: 'label'
+        },
+        {
+          text: 'Freigetränk',
+          value: 'name'
+        },
+        {
+          text: 'Anzahl',
+          value: 'count'
+        },
+        {
+          text: 'Preis pro Getränk',
+          value: 'pricepro'
+        },
+        {
+          text: 'Preis gesamt',
+          value: 'sum'
+        }
+      ]
+    }
+  },
+  computed: {
+    ...mapGetters('freeDrinkList', ['free_drink_list_history_without_canceled', 'free_drink_list_config', 'free_drink_list_history_job_without_canceled', 'free_drink_list_history_band_without_canceled', 'free_drink_list_history_workgroup_without_canceled']),
+    sum() {
+      let sum = 0
+      this.free_drink_list_history_without_canceled.forEach(item => {
+          sum += item.free_drink_config.price
+      })
+      return sum
+    },
+    sumJob() {
+      let sum = 0
+      this.free_drink_list_history_job_without_canceled.forEach(item => {
+        sum += item.free_drink_config.price
+      })
+      return sum
+    },
+    sumWorkgroup() {
+      let sum = 0
+      this.free_drink_list_history_workgroup_without_canceled.forEach(item => {
+        sum += item.free_drink_config.price
+      })
+      return sum
+    },
+    sumBand() {
+      let sum = 0
+      this.free_drink_list_history_band_without_canceled.forEach(item => {
+        sum += item.free_drink_config.price
+      })
+      return sum
+    },
+    table() {
+      if (this.free_drink_list_history_without_canceled.length == 0) {
+        return []
+      }
+      let retVal = []
+      const date_month = this.free_drink_list_history_without_canceled[0].timestamp
+      let days = new Date(date_month.getFullYear(), date_month.getMonth() + 1, 0).getDate()
+      for (let day = 1; day <= days; day++) {
+        let from = new Date(date_month.getFullYear(), date_month.getMonth(), day)
+        let to = new Date(date_month.getFullYear(), date_month.getMonth(), day + 1)
+        let history_of_date = this.free_drink_list_history_without_canceled.filter(item => {
+          return item.timestamp >= from && item.timestamp <= to && !item.canceled
+        })
+        this.free_drink_list_config.forEach(drink_config => {
+          let history_of_config = history_of_date.filter(item => {
+            return item.free_drink_config_id == drink_config.id
+          })
+          if (history_of_config.length > 0) {
+            retVal.push({
+              date: `${from.getDate()}.${from.getMonth() + 1}.${from.getFullYear()}`,
+              label: drink_config.label,
+              name: drink_config.drink.name,
+              count: history_of_config.length,
+              pricepro: (drink_config.price/100).toFixed(2),
+              sum:  (drink_config.price/100*history_of_config.length).toFixed(2)
+            })
+          }
+        })
+      }
+      return retVal
+    }
+  }
 }
 </script>
 
diff --git a/src/plugins/routes.js b/src/plugins/routes.js
index cef3e5a..e974d25 100644
--- a/src/plugins/routes.js
+++ b/src/plugins/routes.js
@@ -30,6 +30,7 @@ const url = {
   resetPassword: main + 'passwordReset',
   freeDrinkListConfig: main + 'freeDrinkListConfig',
   freeDrinkListHistory: main + 'freeDrinkListHistory',
+  freeDrinkListHistoryFromTo: main + 'freeDrinkListHistoryFromTo',
   deleteDrinkListHistory: main + 'deleteDrinkListHistory',
   freeDrinkListReasons: main + 'freeDrinkListReasons',
   freeDrinkTypes: main + 'freeDrinkTypes',
diff --git a/src/router/index.js b/src/router/index.js
index b90dbcf..55690e2 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -31,6 +31,7 @@ import ResetPassword from '@/components/ResetPassword'
 import FreeDrinkList from '@/components/vorstand/FreeDrinkList'
 import FreeDrinkListMain from '@/components/vorstand/FreeDrinkList/FreeDrinkListMain'
 import FreeDrinkListConfig from '@/components/vorstand/FreeDrinkList/FreeDrinkListConfig'
+import FreeDrinkListJob from '@/components/vorstand/FreeDrinkList/FreeDrinkListJob'
 
 Vue.use(VueRouter)
 
@@ -100,6 +101,11 @@ const routes = [
                 path: 'config',
                 name: 'freeDrinkListConfig',
                 component: FreeDrinkListConfig
+              },
+              {
+                path: 'freeDrinkListJob',
+                name: 'freeDrinkListJob',
+                component: FreeDrinkListJob
               }
             ]
           }
diff --git a/src/store/modules/freeDrinkList.js b/src/store/modules/freeDrinkList.js
index 44f9434..c46d651 100644
--- a/src/store/modules/freeDrinkList.js
+++ b/src/store/modules/freeDrinkList.js
@@ -109,6 +109,24 @@ const actions = {
       commit('set_free_drink_list_history_loading', false)
     }
   },
+  async get_free_drink_list_history_from_to({ commit, dispatch, rootState },  data) {
+    try {
+      commit('set_free_drink_list_history_loading', true)
+      const response = await axios.post(url.freeDrinkListHistoryFromTo, {...data},{
+        headers: { Token: rootState.login.user.accessToken },
+        timeout
+      })
+      commit('set_free_drink_list_history', response.data)
+    } catch (e) {
+      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 set_free_drink_list_history({ commit, dispatch, rootState }, data) {
     try {
       commit('set_free_drink_list_history_loading', true)
@@ -280,6 +298,11 @@ const getters = {
   free_drink_list_history(state) {
     return state.free_drink_list_history
   },
+  free_drink_list_history_without_canceled(state) {
+    return state.free_drink_list_history.filter(item => {
+      return !item.canceled
+    })
+  },
   free_drink_list_history_band(state) {
     return state.free_drink_list_history.filter(item => {
       return item.free_drink_type.id == 3
@@ -290,6 +313,11 @@ const getters = {
       return item.free_drink_type.id == 3 && !item.canceled
     })
   },
+  free_drink_list_history_job_without_canceled(state) {
+    return state.free_drink_list_history.filter(item => {
+      return item.free_drink_type.id == 1 && !item.canceled
+    })
+  },
   free_drink_list_history_job_credit(state) {
     let jobDrinks = state.free_drink_list_history.filter(item => {
       return item.free_drink_type.id == 1 && !item.canceled

From 6c5c67f45b03a5c077dbe7432e17482302dca3df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Gr=C3=B6ger?= <tim@groeger-clan.de>
Date: Mon, 24 Aug 2020 14:04:21 +0200
Subject: [PATCH 10/11] =?UTF-8?q?Freigetr=C3=A4nke=20Listen=20f=C3=BCr=20D?=
 =?UTF-8?q?ienst,=20AG=20und=20Band?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Der Vorstand kann nun die Freigetränkelisten von Diensten, AG's und Bands anschauen.
---
 src/components/vorstand/FreeDrinkList.vue     |   8 +-
 .../FreeDrinkList/FreeDrinkListBand.vue       | 123 ++++++++++++++++++
 .../FreeDrinkList/FreeDrinkListConfig.vue     |   5 +-
 .../FreeDrinkListConfigConfigItem.vue         |  12 +-
 .../FreeDrinkList/FreeDrinkListJob.vue        |  27 +++-
 .../FreeDrinkList/FreeDrinkListWorkgroup.vue  | 112 ++++++++++++++++
 src/router/index.js                           |  12 ++
 7 files changed, 283 insertions(+), 16 deletions(-)
 create mode 100644 src/components/vorstand/FreeDrinkList/FreeDrinkListBand.vue
 create mode 100644 src/components/vorstand/FreeDrinkList/FreeDrinkListWorkgroup.vue

diff --git a/src/components/vorstand/FreeDrinkList.vue b/src/components/vorstand/FreeDrinkList.vue
index 7335494..546be23 100644
--- a/src/components/vorstand/FreeDrinkList.vue
+++ b/src/components/vorstand/FreeDrinkList.vue
@@ -7,11 +7,11 @@
       <v-btn link :to="{name: 'freeDrinkListJob'}">
         <span>Dienstgetränke</span>
       </v-btn>
-      <v-btn>
-        <span>Liste 2</span>
+      <v-btn link :to="{name: 'freeDrinkListWorkgroup'}">
+        <span>AG-Getränke</span>
       </v-btn>
-      <v-btn>
-        <span>Liste 3</span>
+      <v-btn link :to="{name: 'freeDrinkListBand'}">
+        <span>Bandgetränke</span>
       </v-btn>
       <v-btn link :to="{ name: 'freeDrinkListConfig' }">
         <span>Einstellungen</span>
diff --git a/src/components/vorstand/FreeDrinkList/FreeDrinkListBand.vue b/src/components/vorstand/FreeDrinkList/FreeDrinkListBand.vue
new file mode 100644
index 0000000..98848c1
--- /dev/null
+++ b/src/components/vorstand/FreeDrinkList/FreeDrinkListBand.vue
@@ -0,0 +1,123 @@
+<template>
+  <div>
+    <v-row justify="space-around">
+      <v-card>
+        <v-card-title class="text-center">
+          Anzahl Freigetränke
+        </v-card-title>
+        <v-card-text class="text-h2 text-center">
+          {{free_drink_list_history_band_without_canceled.length}}
+        </v-card-text>
+      </v-card>
+      <v-card>
+        <v-card-title class="text-center">
+          Summe Freigetränke
+        </v-card-title>
+        <v-card-text class="text-h2 text-center">
+          {{ (sum/100).toFixed(2)}} €
+        </v-card-text>
+      </v-card>
+    </v-row>
+    <v-data-table :headers="header" :items="table"/>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+name: "FreeDrinkListBand",
+  data() {
+    return {
+      header: [
+        {
+          text: 'Datum',
+          value: 'date'
+        },
+        {
+          text: 'Label Freigetränk',
+          value: 'label'
+        },
+        {
+          text: 'Freigetränk',
+          value: 'name'
+        },
+        {
+          text: 'Anzahl',
+          value: 'count'
+        },
+        {
+          text: 'User',
+          value: 'user'
+        },
+        {
+          text: 'Preis pro Getränk',
+          value: 'pricepro'
+        },
+        {
+          text: 'Preis gesamt',
+          value: 'sum'
+        }
+      ]
+    }
+  },
+  computed: {
+    ...mapGetters('freeDrinkList', ['free_drink_list_history_band_without_canceled', 'free_drink_list_config']),
+    sum() {
+      let sum = 0
+      this.free_drink_list_history_band_without_canceled.forEach(item => {
+        sum += item.free_drink_config.price
+      })
+      return sum
+    },
+    table() {
+      if (this.free_drink_list_history_band_without_canceled.length == 0) {
+        return []
+      }
+      let retVal = []
+      const date_month = this.free_drink_list_history_band_without_canceled[0].timestamp
+      let days = new Date(date_month.getFullYear(), date_month.getMonth() + 1, 0).getDate()
+      for (let day = 1; day <= days; day++) {
+        let from = new Date(date_month.getFullYear(), date_month.getMonth(), day)
+        let to = new Date(date_month.getFullYear(), date_month.getMonth(), day + 1)
+        let history_of_date = this.free_drink_list_history_band_without_canceled.filter(item => {
+          return item.timestamp >= from && item.timestamp <= to && !item.canceled
+        })
+        this.free_drink_list_config.forEach(drink_config => {
+          let history_of_config = history_of_date.filter(item => {
+            return item.free_drink_config_id == drink_config.id
+          })
+          // eslint-disable-next-line no-unused-vars
+          let users = []
+          history_of_config.forEach(history_config => {
+            if (!users.find(user_id => { return user_id == history_config.user_id})) {
+              users.push(history_config.user_id)
+            }
+          })
+          users.forEach(user_id => {
+            let history_of_user = history_of_config.filter(item => {
+              return item.user_id == user_id
+            })
+            if (history_of_user.length > 0) {
+              retVal.push({
+                date: `${from.getDate()}.${from.getMonth() + 1}.${from.getFullYear()}`,
+                label: drink_config.label,
+                name: drink_config.drink.name,
+                user: `${history_of_user[0].user.firstname} ${history_of_user[0].user.lastname}`,
+                count: history_of_user.length,
+                pricepro: (drink_config.price / 100).toFixed(2),
+                sum: (drink_config.price / 100 * history_of_user.length).toFixed(2)
+              })
+            }
+          })
+        })
+      }
+      return retVal
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/vorstand/FreeDrinkList/FreeDrinkListConfig.vue b/src/components/vorstand/FreeDrinkList/FreeDrinkListConfig.vue
index 326e95a..e7b4951 100644
--- a/src/components/vorstand/FreeDrinkList/FreeDrinkListConfig.vue
+++ b/src/components/vorstand/FreeDrinkList/FreeDrinkListConfig.vue
@@ -10,6 +10,7 @@
               v-for="(free_drink_config, index) in free_drink_list_config">
             <v-list-item
                 :key="free_drink_config.label"
+                dense
             >
               <v-list-item-content>
                 <FreeDrinkListConfigConfigItem :free_drink_config="free_drink_config" @save="save" @delete_free_drink_list_config="delete_free_drink_config" />
@@ -27,9 +28,9 @@
           </v-list-item>
         </v-list>
       </v-card-text>
-      <v-card-actions>
+      <v-card-actions dense>
         <v-spacer />
-        <v-btn fab color="success" @click="new_free_drink_list_config=true" v-if="!new_free_drink_list_config">
+        <v-btn fab small color="success" @click="new_free_drink_list_config=true" v-if="!new_free_drink_list_config">
           <v-icon>mdi-plus</v-icon>
         </v-btn>
       </v-card-actions>
diff --git a/src/components/vorstand/FreeDrinkList/FreeDrinkListConfigComponents/FreeDrinkListConfigConfigItem.vue b/src/components/vorstand/FreeDrinkList/FreeDrinkListConfigComponents/FreeDrinkListConfigConfigItem.vue
index 8f8bd70..ea797f5 100644
--- a/src/components/vorstand/FreeDrinkList/FreeDrinkListConfigComponents/FreeDrinkListConfigConfigItem.vue
+++ b/src/components/vorstand/FreeDrinkList/FreeDrinkListConfigComponents/FreeDrinkListConfigConfigItem.vue
@@ -2,15 +2,16 @@
 <div>
   <v-form :ref="free_drink_config.id">
     <v-row>
-      <v-col>
+      <v-col cols="12" sm="6" md="3">
         <v-text-field
             outlined
             label="Label"
             :value="free_drink_config.label"
             @change="set_model($event, 'label')"
+            dense
         />
       </v-col>
-      <v-col>
+      <v-col cols="12" sm="6" md="3">
         <v-autocomplete
             outlined
             label="Zugeordnetes Getränk"
@@ -20,9 +21,10 @@
             :value="free_drink_config.drink"
             @change="set_model($event, 'drink')"
             return-object
+            dense
         />
       </v-col>
-      <v-col>
+      <v-col cols="12" sm="6" md="3">
         <v-autocomplete
             outlined
             label="Freigetränkaufnahme"
@@ -33,15 +35,17 @@
             :value="free_drink_config.free_drink_types"
             return-object
             @change="set_model($event, 'free_drink_types')"
+            dense
         />
       </v-col>
-      <v-col>
+      <v-col cols="12" sm="6" md="3">
         <v-text-field
             outlined
             label="Preis in €"
             type="number"
             :value="(free_drink_config.price/100).toFixed(2)"
             @change="set_model(Math.round($event*100), 'price')"
+            dense
         />
       </v-col>
     </v-row>
diff --git a/src/components/vorstand/FreeDrinkList/FreeDrinkListJob.vue b/src/components/vorstand/FreeDrinkList/FreeDrinkListJob.vue
index ba66a1f..7d35878 100644
--- a/src/components/vorstand/FreeDrinkList/FreeDrinkListJob.vue
+++ b/src/components/vorstand/FreeDrinkList/FreeDrinkListJob.vue
@@ -46,6 +46,10 @@ data() {
         text: 'Anzahl',
         value: 'count'
       },
+      {
+        text: 'User',
+        value: 'user'
+      },
       {
         text: 'Preis pro Getränk',
         value: 'pricepro'
@@ -62,9 +66,7 @@ computed: {
   sum() {
     let sum = 0
     this.free_drink_list_history_job_without_canceled.forEach(item => {
-      if (item.canceled) {
-        sum += item.free_drink_config.price
-      }
+      sum += item.free_drink_config.price
     })
     return sum
   },
@@ -85,16 +87,29 @@ computed: {
         let history_of_config = history_of_date.filter(item => {
           return item.free_drink_config_id == drink_config.id
         })
-        if (history_of_config.length > 0) {
+        // eslint-disable-next-line no-unused-vars
+        let users = []
+        history_of_config.forEach(history_config => {
+          if (!users.find(user_id => { return user_id == history_config.user_id})) {
+            users.push(history_config.user_id)
+          }
+        })
+        users.forEach(user_id => {
+          let history_of_user = history_of_config.filter(item => {
+            return item.user_id == user_id
+          })
+        if (history_of_user.length > 0) {
           retVal.push({
             date: `${from.getDate()}.${from.getMonth() + 1}.${from.getFullYear()}`,
             label: drink_config.label,
             name: drink_config.drink.name,
-            count: history_of_config.length,
+            user: `${history_of_user[0].user.firstname} ${history_of_user[0].user.lastname}`,
+            count: history_of_user.length,
             pricepro: (drink_config.price / 100).toFixed(2),
-            sum: (drink_config.price / 100 * history_of_config.length).toFixed(2)
+            sum: (drink_config.price / 100 * history_of_user.length).toFixed(2)
           })
         }
+        })
       })
     }
     return retVal
diff --git a/src/components/vorstand/FreeDrinkList/FreeDrinkListWorkgroup.vue b/src/components/vorstand/FreeDrinkList/FreeDrinkListWorkgroup.vue
new file mode 100644
index 0000000..71e2d94
--- /dev/null
+++ b/src/components/vorstand/FreeDrinkList/FreeDrinkListWorkgroup.vue
@@ -0,0 +1,112 @@
+<template>
+  <div>
+    <v-row justify="space-around">
+      <v-card>
+        <v-card-title class="text-center">
+          Anzahl Freigetränke
+        </v-card-title>
+        <v-card-text class="text-h2 text-center">
+          {{free_drink_list_history_workgroup_without_canceled.length}}
+        </v-card-text>
+      </v-card>
+      <v-card>
+        <v-card-title class="text-center">
+          Summe Freigetränke
+        </v-card-title>
+        <v-card-text class="text-h2 text-center">
+          {{ (sum/100).toFixed(2)}} €
+        </v-card-text>
+      </v-card>
+    </v-row>
+    <v-data-table :headers="header" :items="table"/>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+name: "FreeDrinkListWorkgroup",
+  data() {
+    return {
+      header: [
+        {
+          text: 'Datum',
+          value: 'date'
+        },
+        {
+          text: 'Label Freigetränk',
+          value: 'label'
+        },
+        {
+          text: 'Freigetränk',
+          value: 'name'
+        },
+        {
+          text: 'User',
+          value: 'user'
+        },
+        {
+          text: 'Preis',
+          value: 'pricepro'
+        },
+        {
+          text: 'Grund',
+          value: 'reason'
+        },
+        {
+          text: 'Beschreibung',
+          value: 'description'
+        }
+      ]
+    }
+  },
+  computed: {
+    ...mapGetters('freeDrinkList', ['free_drink_list_history_workgroup_without_canceled', 'free_drink_list_config']),
+    sum() {
+      let sum = 0
+      this.free_drink_list_history_workgroup_without_canceled.forEach(item => {
+        sum += item.free_drink_config.price
+      })
+      return sum
+    },
+    table() {
+      if (this.free_drink_list_history_workgroup_without_canceled.length == 0) {
+        return []
+      }
+      let retVal = []
+      const date_month = this.free_drink_list_history_workgroup_without_canceled[0].timestamp
+      let days = new Date(date_month.getFullYear(), date_month.getMonth() + 1, 0).getDate()
+      for (let day = 1; day <= days; day++) {
+        let from = new Date(date_month.getFullYear(), date_month.getMonth(), day)
+        let to = new Date(date_month.getFullYear(), date_month.getMonth(), day + 1)
+        let history_of_date = this.free_drink_list_history_workgroup_without_canceled.filter(item => {
+          return item.timestamp >= from && item.timestamp <= to && !item.canceled
+        })
+        this.free_drink_list_config.forEach(drink_config => {
+          let history_of_config = history_of_date.filter(item => {
+            return item.free_drink_config_id == drink_config.id
+          })
+          console.log(history_of_config)
+          history_of_config.forEach(history_config => {
+              retVal.push({
+                date: `${from.getDate()}.${from.getMonth() + 1}.${from.getFullYear()}`,
+                label: drink_config.label,
+                name: drink_config.drink.name,
+                user: `${history_config.user.firstname} ${history_config.user.lastname}`,
+                reason: history_config.free_drink_list_reason.name,
+                description: history_config.description,
+                pricepro: (drink_config.price / 100).toFixed(2)
+              })
+          })
+        })
+      }
+      return retVal
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 55690e2..4a4a7cb 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -32,6 +32,8 @@ import FreeDrinkList from '@/components/vorstand/FreeDrinkList'
 import FreeDrinkListMain from '@/components/vorstand/FreeDrinkList/FreeDrinkListMain'
 import FreeDrinkListConfig from '@/components/vorstand/FreeDrinkList/FreeDrinkListConfig'
 import FreeDrinkListJob from '@/components/vorstand/FreeDrinkList/FreeDrinkListJob'
+import FreeDrinkListWorkgroup from '@/components/vorstand/FreeDrinkList/FreeDrinkListWorkgroup'
+import FreeDrinkListBand from '@/components/vorstand/FreeDrinkList/FreeDrinkListBand'
 
 Vue.use(VueRouter)
 
@@ -106,6 +108,16 @@ const routes = [
                 path: 'freeDrinkListJob',
                 name: 'freeDrinkListJob',
                 component: FreeDrinkListJob
+              },
+              {
+                path: 'freeDrinkListWorkgroup',
+                name: 'freeDrinkListWorkgroup',
+                component: FreeDrinkListWorkgroup
+              },
+              {
+                path: 'freeDrinkListBand',
+                name: 'freeDrinkListBand',
+                component: FreeDrinkListBand
               }
             ]
           }

From c8a6ab7d351228746a55a5507a5988b27f91f617 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Gr=C3=B6ger?= <tim@groeger-clan.de>
Date: Mon, 24 Aug 2020 15:18:21 +0200
Subject: [PATCH 11/11] =?UTF-8?q?Gr=C3=BCnde=20f=C3=BCr=20Freigetr=C3=A4nk?=
 =?UTF-8?q?e=20k=C3=B6nnen=20erstellt=20und=20gel=C3=B6scht=20werden?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Außerdem wurd überall ein Loading balken hinzugefügt.
---
 src/components/vorstand/FreeDrinkList.vue     | 17 +++-
 .../FreeDrinkList/FreeDrinkListConfig.vue     | 88 ++++++++++++++++++-
 .../FreeDrinkListConfigReasonItem.vue         | 70 +++++++++++++++
 .../FreeDrinkList/FreeDrinkListWorkgroup.vue  |  2 +-
 src/plugins/routes.js                         |  1 +
 src/store/modules/freeDrinkList.js            | 65 ++++++++++++++
 6 files changed, 236 insertions(+), 7 deletions(-)
 create mode 100644 src/components/vorstand/FreeDrinkList/FreeDrinkListConfigComponents/FreeDrinkListConfigReasonItem.vue

diff --git a/src/components/vorstand/FreeDrinkList.vue b/src/components/vorstand/FreeDrinkList.vue
index 546be23..d4189a7 100644
--- a/src/components/vorstand/FreeDrinkList.vue
+++ b/src/components/vorstand/FreeDrinkList.vue
@@ -35,6 +35,7 @@
       </v-toolbar-items>
       <v-spacer/>
     </v-toolbar>
+    <v-progress-linear indeterminate v-if="loading" />
     <div>
       <router-view />
     </div>
@@ -42,7 +43,7 @@
 </template>
 
 <script>
-import { mapActions } from 'vuex'
+import { mapActions, mapGetters } from 'vuex'
 export default {
   name: 'FreeDrinkList',
   data() {
@@ -88,7 +89,7 @@ export default {
       'get_free_drink_list_config',
       'get_free_drink_list_history_from_to',
       'get_free_drink_list_reasons',
-      'get_free_drink_types'
+      'get_free_drink_types',
     ]),
     ...mapActions('priceList', ['getPriceList']),
     change_month(payload) {
@@ -96,11 +97,23 @@ export default {
     }
   },
   computed: {
+    ...mapGetters('freeDrinkList', [
+        'free_drink_list_config_loading',
+        'free_drink_list_history_loading',
+        'free_drink_list_reasons_loading',
+        'free_drink_types_loading'
+    ]),
+    ...mapGetters('priceList', [
+        'priceListLoading'
+    ]),
     to_date() {
       return new Date(this.date.getFullYear(), this.date.getMonth()+1,1)
     },
     from_date() {
       return new Date(this.date.getFullYear(), this.date.getMonth(), 1)
+    },
+    loading() {
+      return this.free_drink_types_loading || this.free_drink_list_reasons_loading || this.free_drink_list_history_loading || this.free_drink_list_config_loading || this.priceListLoading
     }
   },
   watch: {
diff --git a/src/components/vorstand/FreeDrinkList/FreeDrinkListConfig.vue b/src/components/vorstand/FreeDrinkList/FreeDrinkListConfig.vue
index e7b4951..498ebf9 100644
--- a/src/components/vorstand/FreeDrinkList/FreeDrinkListConfig.vue
+++ b/src/components/vorstand/FreeDrinkList/FreeDrinkListConfig.vue
@@ -37,6 +37,36 @@
     </v-card>
     <v-card tile>
       <v-card-title>Gründe für Freigetränke</v-card-title>
+      <v-card-text>
+        <v-list>
+          <template
+              v-for="(free_drink_reason, index) in free_drink_list_reasons">
+            <v-list-item
+                :key="free_drink_reason.name"
+                dense
+            >
+              <v-list-item-content>
+                <FreeDrinkListConfigReasonItem :free_drink_reason="free_drink_reason" @save="save_reason" @delete_free_drink_list_reason="delete_free_drink_reason" />
+              </v-list-item-content>
+            </v-list-item>
+            <v-divider
+                v-if="(index + 1 < free_drink_list_reasons.length) || new_free_drink_list_reason"
+                :key="index"
+            />
+          </template>
+          <v-list-item v-if="new_free_drink_list_reason">
+            <v-list-item-content>
+              <FreeDrinkListConfigReasonItem :free_drink_reason="default_model_reason" @save="save_reason" @delete_free_drink_reason="new_free_drink_list_reason=false"/>
+            </v-list-item-content>
+          </v-list-item>
+        </v-list>
+      </v-card-text>
+      <v-card-actions dense>
+        <v-spacer />
+        <v-btn fab small color="success" @click="new_free_drink_list_reason=true" v-if="!new_free_drink_list_reason">
+          <v-icon>mdi-plus</v-icon>
+        </v-btn>
+      </v-card-actions>
     </v-card>
 
     <v-dialog v-model="check_delete_free_drink_list_config" max-width="400">
@@ -55,6 +85,23 @@
           </v-card-actions>
         </v-card>
     </v-dialog>
+
+    <v-dialog v-model="check_delete_free_drink_list_reason" max-width="400">
+      <v-card>
+        <v-card-title>
+          Wirklich löschen?
+        </v-card-title>
+        <v-card-text>
+          Willst du wirklich den Grund <span class="font-weight-black">{{check_model_reason.name}}</span> löschen?
+          Wenn du dies löscht, wird auch der im Verlauf alle dieser Gründe gelöscht.. Dh. es ist nicht mehr vollständig nachvollziehbar, aus welchem Grund ein Freigetränk rausgegeben wurde.
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer/>
+          <v-btn @click="cancel_delete_reason()">Abbrechen</v-btn>
+          <v-btn @click="accept_delete_reason()" color="error">Löschen</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </div>
 </template>
 
@@ -62,12 +109,15 @@
 import { mapGetters, mapActions} from 'vuex'
 import FreeDrinkListConfigConfigItem
   from '@/components/vorstand/FreeDrinkList/FreeDrinkListConfigComponents/FreeDrinkListConfigConfigItem'
+import FreeDrinkListConfigReasonItem
+  from '@/components/vorstand/FreeDrinkList/FreeDrinkListConfigComponents/FreeDrinkListConfigReasonItem'
 export default {
   name: 'FreeDrinkListConfig',
-  components: { FreeDrinkListConfigConfigItem },
+  components: { FreeDrinkListConfigConfigItem, FreeDrinkListConfigReasonItem },
   data() {
     return {
       new_free_drink_list_config: false,
+      new_free_drink_list_reason: false,
       default_model: {
         id: -1,
         label: null,
@@ -83,11 +133,22 @@ export default {
         label: null,
         drink: {name: null}
       },
-      check_delete_free_drink_list_config: false
+      check_delete_free_drink_list_config: false,
+      check_delete_free_drink_list_reason: false,
+      default_model_reason: {
+        id: -1,
+        name: null
+      },
+      check_model_reason: {
+        name: null
+      },
+      default_check_model_reason: {
+        name: null
+      }
     }
   },
   methods: {
-    ...mapActions('freeDrinkList', ['set_free_drink_list_config', 'delete_free_drink_list_config', 'update_free_drink_list_config']),
+    ...mapActions('freeDrinkList', ['set_free_drink_list_config', 'delete_free_drink_list_config', 'update_free_drink_list_config', 'set_free_drink_list_reason', 'update_free_drink_list_reason', 'delete_free_drink_list_reason']),
     log() {
       console.log(this.free_drink_list_config)
     },
@@ -118,7 +179,26 @@ export default {
       } else {
         this.set_free_drink_list_config(free_drink_config)
       }
-    }
+    },
+    delete_free_drink_reason(free_drink_reason) {
+      Object.assign(this.check_model_reason, free_drink_reason)
+      this.check_delete_free_drink_list_reason = true
+    },
+    save_reason(free_drink_reason) {
+      if (free_drink_reason.id > 0) {
+        this.update_free_drink_list_reason(free_drink_reason)
+      } else {
+        this.set_free_drink_list_reason(free_drink_reason)
+      }
+    },
+    cancel_delete_reason() {
+      this.check_delete_free_drink_list_reason = false
+      this.check_model_reason = Object.assign({}, this.default_check_model_reason)
+    },
+    accept_delete_reason() {
+      this.delete_free_drink_list_reason(this.check_model_reason)
+      this.cancel_delete_reason()
+    },
   },
   computed: {
     ...mapGetters('freeDrinkList', [
diff --git a/src/components/vorstand/FreeDrinkList/FreeDrinkListConfigComponents/FreeDrinkListConfigReasonItem.vue b/src/components/vorstand/FreeDrinkList/FreeDrinkListConfigComponents/FreeDrinkListConfigReasonItem.vue
new file mode 100644
index 0000000..7ccf745
--- /dev/null
+++ b/src/components/vorstand/FreeDrinkList/FreeDrinkListConfigComponents/FreeDrinkListConfigReasonItem.vue
@@ -0,0 +1,70 @@
+<template>
+  <div>
+  <v-row>
+    <v-col>
+      <v-text-field
+        outlined
+        label="Name"
+        :value="free_drink_reason.name"
+        @change="set_model($event)"
+        dense />
+    </v-col>
+  </v-row>
+  <v-row justify="end">
+    <v-btn
+        v-if="free_drink_reason.id > 0"
+        icon
+        class="mr-3"
+        @click="$emit('delete_free_drink_list_reason', free_drink_reason)">
+      <v-icon>mdi-delete</v-icon>
+    </v-btn>
+    <v-btn
+        v-else
+        fab
+        color="error"
+        x-small
+        class="mr-4"
+        @click="$emit('delete_free_drink_reason')"
+    >
+      <v-icon>mdi-minus</v-icon>
+    </v-btn>
+    <v-btn
+        v-if="!is_same || free_drink_reason.id < 0"
+        class="mr-3"
+        color="success"
+        @click="() => {$emit('save', model); $emit('delete_free_drink_reason'); model = null}"
+    >
+      Save
+    </v-btn>
+  </v-row>
+  </div>
+</template>
+
+<script>
+export default {
+name: "FreeDrinkListConfigReason",
+  props: ['free_drink_reason'],
+  data() {
+    return {
+      model: null
+    }
+  },
+  methods: {
+    set_model(event) {
+      if (!this.model) {
+        this.model = Object.assign({}, this.free_drink_reason)
+      }
+      this.model.name = event
+    }
+  },
+  computed: {
+    is_same() {
+      return this.model ? JSON.stringify(this.model) == JSON.stringify(this.free_drink_reason): true
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/vorstand/FreeDrinkList/FreeDrinkListWorkgroup.vue b/src/components/vorstand/FreeDrinkList/FreeDrinkListWorkgroup.vue
index 71e2d94..84b6f77 100644
--- a/src/components/vorstand/FreeDrinkList/FreeDrinkListWorkgroup.vue
+++ b/src/components/vorstand/FreeDrinkList/FreeDrinkListWorkgroup.vue
@@ -94,7 +94,7 @@ name: "FreeDrinkListWorkgroup",
                 label: drink_config.label,
                 name: drink_config.drink.name,
                 user: `${history_config.user.firstname} ${history_config.user.lastname}`,
-                reason: history_config.free_drink_list_reason.name,
+                reason: history_config.free_drink_list_reason ? history_config.free_drink_list_reason.name : null,
                 description: history_config.description,
                 pricepro: (drink_config.price / 100).toFixed(2)
               })
diff --git a/src/plugins/routes.js b/src/plugins/routes.js
index e974d25..cfa1742 100644
--- a/src/plugins/routes.js
+++ b/src/plugins/routes.js
@@ -33,6 +33,7 @@ const url = {
   freeDrinkListHistoryFromTo: main + 'freeDrinkListHistoryFromTo',
   deleteDrinkListHistory: main + 'deleteDrinkListHistory',
   freeDrinkListReasons: main + 'freeDrinkListReasons',
+  deleteFreeDrinkListReason: main + 'deleteFreeDrinkListReason',
   freeDrinkTypes: main + 'freeDrinkTypes',
   deleteFreeDrinkListConfig: main + 'deleteFreeDrinkListConfig',
   vorstand: {
diff --git a/src/store/modules/freeDrinkList.js b/src/store/modules/freeDrinkList.js
index c46d651..f95451b 100644
--- a/src/store/modules/freeDrinkList.js
+++ b/src/store/modules/freeDrinkList.js
@@ -266,7 +266,66 @@ const actions = {
     } finally {
       commit('set_free_drink_list_config_loading', false)
     }
+  },
+  async set_free_drink_list_reason({ commit, dispatch, rootState }, data) {
+    try {
+      commit('set_free_drink_list_reasons_loading', true)
+      const response = await axios.post(url.freeDrinkListReasons, {...data},{
+        headers: { Token: rootState.login.user.accessToken },
+        timeout
+      })
+      commit('set_free_drink_list_reasons', response.data)
+    } 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_reasons_loading', false)
+    }
   }
+  ,
+  async update_free_drink_list_reason({ commit, dispatch, rootState }, data) {
+    try {
+      commit('set_free_drink_list_reasons_loading', true)
+      const response = await axios.put(url.freeDrinkListReasons, {...data},{
+        headers: { Token: rootState.login.user.accessToken },
+        timeout
+      })
+      commit('set_free_drink_list_reasons', response.data)
+    } 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_reasons_loading', false)
+    }
+  },
+  async delete_free_drink_list_reason({ commit, dispatch, rootState }, data) {
+    try {
+      commit('set_free_drink_list_reasons_loading', true)
+      const response = await axios.post(url.deleteFreeDrinkListReason, {...data},{
+        headers: { Token: rootState.login.user.accessToken },
+        timeout
+      })
+      commit('set_free_drink_list_reasons', response.data)
+    } 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_reasons_loading', false)
+    }
+  }
+
 }
 
 const getters = {
@@ -356,6 +415,12 @@ const getters = {
   free_drink_types(state) {
     return state.free_drink_types
   },
+  free_drink_list_history_loading(state) {
+    return state.free_drink_list_history_loading
+  },
+  free_drink_list_config_loading(state) {
+    return state.free_drink_list_config_loading
+  },
   free_drink_types_loading(state) {
     return state.free_drink_types_loading
   },