flaschengeist-frontend/src/components/baruser/CreditLists.vue

<template>
  <div>
    <v-dialog v-model="dialog" max-width="290">
      <v-card>
        <v-card-title class="headline"
          >Transaktion ist länger als 5 Minuten her!</v-card-title
        >
        <v-card-text>
          Da die Transaktion länger als 5 Minutern her ist, kann eine
          Stornierung nicht durchgeführt werden. Wende dich bitte an den
          Finanzer.
        </v-card-text>
        <v-card-actions>
          <v-spacer />
          <v-btn text @click="dialog = false">
            Verstanden
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-progress-linear v-if="loading && users.length !== 0" indeterminate />
    <v-container>
      <AddAmountSkeleton v-if="loading && users.length === 0" />
    </v-container>
    <v-navigation-drawer v-model="menu" 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)"
        >
          <v-list-item three-line inactive @click="storno(message)">
            <v-list-item-content>
              <v-progress-linear indeterminate v-if="message.loading" />
              <v-list-item-title>{{ now(message.date) }}</v-list-item-title>
              <v-list-item-subtitle>{{ message.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
                >Klicken um zu Stornieren
              </v-list-item-action-text>
            </v-list-item-content>
          </v-list-item>
        </div>
      </v-list-item-group>
    </v-navigation-drawer>
    <div v-for="user in users" :key="users.indexOf(user)">
      <div v-if="isFiltered(user)">
        <v-container>
          <v-card :loading="user.loading">
            <v-list-item>
              <v-list-item-title class="title"
                >{{ user.firstname }} {{ user.lastname }}</v-list-item-title
              >
            </v-list-item>
            <v-card-text>
              <v-row>
                <v-col cols="10">
                  <v-row>
                    <v-col>
                      <v-btn
                        class="creditBtn"
                        block
                        @click="
                          addAmount({
                            username: user.username,
                            amount: 200,
                            user: user
                          })
                        "
                        :color="color"
                        :disabled="user.locked"
                        >2 €</v-btn
                      >
                    </v-col>
                    <v-col>
                      <v-btn
                        class="creditBtn"
                        block
                        @click="
                          addAmount({
                            username: user.username,
                            amount: 100,
                            user: user
                          })
                        "
                        :color="color"
                        :disabled="user.locked"
                        >1 €</v-btn
                      >
                    </v-col>
                    <v-col>
                      <v-btn
                        class="creditBtn"
                        block
                        @click="
                          addAmount({
                            username: user.username,
                            amount: 50,
                            user: user
                          })
                        "
                        :color="color"
                        :disabled="user.locked"
                        >0,50 €</v-btn
                      >
                    </v-col>
                  </v-row>
                  <v-row>
                    <v-col>
                      <v-btn
                        class="creditBtn"
                        block
                        @click="
                          addAmount({
                            username: user.username,
                            amount: 40,
                            user: user
                          })
                        "
                        :color="color"
                        :disabled="user.locked"
                        >0,40 €</v-btn
                      >
                    </v-col>
                    <v-col>
                      <v-btn
                        class="creditBtn"
                        block
                        @click="
                          addAmount({
                            username: user.username,
                            amount: 20,
                            user: user
                          })
                        "
                        :color="color"
                        :disabled="user.locked"
                        >0,20 €</v-btn
                      >
                    </v-col>
                    <v-col>
                      <v-btn
                        class="creditBtn"
                        block
                        @click="
                          addAmount({
                            username: user.username,
                            amount: 10,
                            user: user
                          })
                        "
                        :color="color"
                        :disabled="user.locked"
                        >0,10 €</v-btn
                      >
                    </v-col>
                  </v-row>
                </v-col>
                <v-col align-self="center">
                  <v-row>
                    <v-list-item>
                      <v-list-item-action-text :class="getColor(user.type)"
                        >{{
                          (user.amount / 100).toFixed(2)
                        }}
                        €</v-list-item-action-text
                      >
                    </v-list-item>
                  </v-row>
                </v-col>
              </v-row>
              <v-alert v-if="user.locked" type="error"
                >{{ user.firstname }} darf nicht mehr anschreiben.
                {{ user.firstname }} sollte sich lieber mal beim Finanzer
                melden.</v-alert
              >
            </v-card-text>
          </v-card>
          <v-snackbar
            v-for="message in messages"
            :key="messages.indexOf(message)"
            :color="message.error ? 'error' : 'success'"
            bottom
            :timeout="3000"
            :multi-line="true"
            v-model="message.visible"
          >
            {{ message.message }}
          </v-snackbar>
        </v-container>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import AddAmountSkeleton from '../user/Skeleton/AddAmountSkeleton'

export default {
  name: 'CreditLists',
  components: { AddAmountSkeleton },
  props: {},
  data() {
    return {
      color: 'green accent-4',
      menu: true,
      dialog: false,
      componentRenderer: 0,
      timer: ''
    }
  },
  created() {
    this.menu = this.menu_from_store
    this.getUsers()
    this.timer = setInterval(this.forceRender, 1000)
  },
  methods: {
    ...mapActions({
      addAmount: 'barUsers/addAmount',
      getUsers: 'barUsers/getUsers',
      deactivate: 'barUsers/deactivateMenu',
      commitStorno: 'barUsers/storno'
    }),
    forceRender() {
      this.componentRenderer += 1
    },
    getColor(type) {
      return type === 'credit' ? 'title green--text' : 'title red--text'
    },
    isFiltered(user) {
      try {
        return (
          user.firstname.toLowerCase().includes(this.filter.toLowerCase()) ||
          user.lastname.toLowerCase().includes(this.filter.toLowerCase())
        )
      } catch (e) {
        return true
      }
    },
    storno(message) {
      console.log('storno')
      if (!message.error) {
        if (!this.under5minutes(message.date)) this.dialog = true
        else {
          this.commitStorno({
            username: message.user.username,
            amount: message.amount,
            date: message.date
          })
        }
      }
    }
  },
  computed: {
    ...mapGetters({
      users: 'barUsers/users',
      filter: 'barUsers/filter',
      loading: 'barUsers/usersLoading',
      messages: 'barUsers/messages',
      menu_from_store: 'barUsers/menu'
    }),
    under5minutes() {
      return now => {
        var actual = new Date()
        var zero = new Date(0)
        var date = new Date(actual - now)
        if (
          date.getFullYear() === zero.getFullYear() &&
          date.getMonth() === zero.getMonth() &&
          date.getDate() === zero.getDate()
        ) {
          if (date.getMinutes() < 6) {
            return true
          }
        }
        return false
      }
    },
    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()
        )
      }
    }
  },
  watch: {
    menu(newValue) {
      if (!newValue) this.deactivate()
    },
    menu_from_store() {
      this.menu = this.menu_from_store
    }
  },
  beforeDestroy () {
    clearInterval(this.timer)
  }
}
</script>

<style scoped>
.creditBtn {
  margin: 2px;
}
</style>