Dienstgetränke UI ohne backendanschluss

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>
+

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
     }
   }
 }

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
       })

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 = {

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
           }
         ]
       },

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>