flaschengeist-frontend/src/components/user/AddAmount.vue

<template>
  <v-container>
    <v-dialog v-model="checkValidate" 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
          {{ stornoMessage.user.firstname }}
          {{ stornoMessage.user.lastname }} 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="dialog" max-width="290">
      <v-card>
        <v-card-title class="headline"
          >Transaktion ist länger als 15 Sekunden her!</v-card-title
        >
        <v-card-text>
          Da die Transaktion länger als 15 Sekunden 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-dialog
            v-if="overLimitUser"
            v-model="overLimitUser"
            max-width="290"
            persistent
    >
      <v-card>
        <v-card-title>Warnung</v-card-title>
        <v-card-text>
          {{ overLimitUser.firstname }} {{ overLimitUser.lastname }} übersteigt
          das Anschreibelimit von
          {{ (overLimitUser.limit / 100).toFixed(2) }} €. Danach kann dieses
          Mitglied nichts mehr anschreiben. Will er das wirklich?
        </v-card-text>
        <v-card-actions>
          <v-spacer />
          <v-btn text @click="cancel()">Abbrechen</v-btn>
          <v-btn text @click="continueAdd(overLimitUser)">Anschreiben</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-dialog v-if="overOverLimit" v-model="overOverLimit" max-width="290" persistent>
      <v-card>
        <v-card-title>Anschreiben nicht möglich</v-card-title>
        <v-card-text>
          {{ overOverLimit.firstname }}
          {{ overOverLimit.lastname }} überschreitet das Anschreibelimit zuviel.
          Das Anschreiben wurde daher gestoppt und zurückgesetzt.
        </v-card-text>
        <v-card-actions>
          <v-btn text @click="overOverLimit = null">Verstanden</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <AddAmountSkeleton v-if="loading" />
    <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)"
        >
          <div v-if="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>
                  {{ createSum(message) }} {{ 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-else-if="message.error">
                  ERROR!
                </v-list-item-subtitle>
                <v-list-item-action-text v-if="under5minutes(message.date) && !message.error"
                  >Klicken um zu Stornieren
                </v-list-item-action-text>
              </v-list-item-content>
            </v-list-item>
          </div>
        </div>
      </v-list-item-group>
    </v-navigation-drawer>
    <v-card v-if="!loading" :loading="addLoading">
      <v-card-title>
        {{ user.firstname }} {{ user.lastname }}
        <v-spacer />
        <v-btn @click="menu = !menu" icon>
          <v-icon>{{ menuIcon }}</v-icon>
        </v-btn>
      </v-card-title>
      <v-card-subtitle v-if="user.limit + getAllSum() > 0">
        Nur noch {{ ((user.limit + getAllSum()) / 100).toFixed(2) }} €
        übrig!!
      </v-card-subtitle>
      <v-card-text>
        <v-row>
          <v-col cols="10">
            <v-row>
              <v-col cols="6" sm="4">
                <v-btn
                  class="creditBtn"
                  block
                  @click="addingAmount(200)"
                  :color="color"
                  :disabled="user.locked"
                  >2 €</v-btn
                >
              </v-col>
              <v-col cols="6" sm="4">
                <v-btn
                  class="creditBtn"
                  block
                  @click="addingAmount(100)"
                  :color="color"
                  :disabled="user.locked"
                  >1 €</v-btn
                >
              </v-col>
              <v-col cols="6" sm="4">
                <v-btn
                  class="creditBtn"
                  block
                  @click="addingAmount(50)"
                  :color="color"
                  :disabled="user.locked"
                  >0,50 €</v-btn
                >
              </v-col>
              <v-col cols="6" sm="4">
                <v-btn
                  class="creditBtn"
                  block
                  @click="addingAmount(40)"
                  :color="color"
                  :disabled="user.locked"
                  >0,40 €</v-btn
                >
              </v-col>
              <v-col cols="6" sm="4">
                <v-btn
                  class="creditBtn"
                  block
                  @click="addingAmount(20)"
                  :color="color"
                  :disabled="user.locked"
                  >0,20 €</v-btn
                >
              </v-col>
              <v-col cols="6" sm="4">
                <v-btn
                  class="creditBtn"
                  block
                  @click="addingAmount(10)"
                  :color="color"
                  :disabled="user.locked"
                  >0,10 €</v-btn
                >
              </v-col>
              <v-col cols="8">
                <v-text-field
                  outlined
                  type="number"
                  v-model="value"
                  label="Benutzerdefinierter Betrag"
                  :disabled="user.locked"
                ></v-text-field>
              </v-col>
              <v-col cols="4">
                <v-btn
                  fab
                  :color="color"
                  @click="addAmountMore()"
                  :disabled="user.locked"
                >
                  <v-icon>{{ plus }}</v-icon>
                </v-btn>
              </v-col>
            </v-row>
          </v-col>
          <v-col align-self="center">
            <v-row>
              <v-list-item>
                <v-list-item-content class="text-center">
                  <v-list-item-action-text :class="getColor(getAllSum())"
                    >{{ (getAllSum() / 100).toFixed(2) }}
                    €
                  </v-list-item-action-text>
                  <v-list-item-action-text v-if="toSetAmount">
                    - {{ (toSetAmount / 100).toFixed(2) }}
                  </v-list-item-action-text>
                </v-list-item-content>
              </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="0"
      :multi-line="true"
      v-model="message.visible"
      vertical
    >
      <div class="title">
        <p style="font-size: 5em; margin: 20px">{{ createSum(message) }}</p>
        {{ createMessage(message) }}
      </div>
      <div>
        {{ now(message.date) }}
      </div>
      <v-btn color="white" icon @click="message.visible = false">
        <v-icon>
          {{ close }}
        </v-icon>
      </v-btn>
    </v-snackbar>
    <ConnectionError/>
  </v-container>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
// eslint-disable-next-line no-unused-vars
import { mdiMenu, mdiPlus, mdiClose } from '@mdi/js'
import AddAmountSkeleton from './Skeleton/AddAmountSkeleton'
import ConnectionError from "@/components/ConnectionError";
export default {
  name: 'AddAmount',
  components: {ConnectionError, AddAmountSkeleton },
  data() {
    return {
      color: 'green accent-4',
      value: null,
      plus: mdiPlus,
      menu: false,
      dialog: false,
      componentRenderer: 0,
      timer: '',
      menuIcon: mdiMenu,
      close: mdiClose,
      checkValidate: false,
      stornoMessage: null,
      timeout: null,
      toSetAmount: null,
      overLimitUser: null,
      overOverLimit: null,
    }
  },
  created() {
    this.timer = setInterval(this.forceRender, 1000)
  },
  methods: {
    ...mapActions({
      addAmount: 'user/addAmount',
      commitStorno: 'user/storno'
    }),
    continueAdd(user) {
      this.overLimitUser = null
      user.checkedOverLimit = true
      if (this.value) {
        this.addAmount(Math.round(Math.abs(this.value * 100)))
        setTimeout(() => {
          this.value = null
          this.toSetAmount = null
        }, 300)
      } else {
        user.timeout = setTimeout(() => {
          this.addAmount(this.toSetAmount)
          setTimeout(() => {
            this.toSetAmount = null
          }, 300)
        }, 2000)
      }
    },
    cancel() {
      this.toSetAmount = null
      this.value = null
      this.overLimitUser = null
    },
    checkOverLimitIsValid(user) {
      if (this.toSetAmount) {
        if (Math.abs(this.getAllSum() - Number.parseInt(this.toSetAmount)) > user.limit + 500) {
          this.overOverLimit = user
          this.toSetAmount = null
          this.value = null
          return false
        }
      }
      return true
    },
    checkOverLimit(user) {
      if (this.toSetAmount) {
        if (Math.abs( this.getAllSum() - this.toSetAmount) > user.limit) {
          return user.checkedOverLimit ? false : true
        }
      }
      return false
    },
    addingAmount(amount) {
      clearTimeout(this.timeout)
      this.toSetAmount = this.toSetAmount ? this.toSetAmount + amount : amount
      if (this.checkOverLimitIsValid(this.user)) {
        if (this.checkOverLimit(this.user)) {
          this.overLimitUser = this.user
        } else {
          this.timeout = setTimeout(() => {
            this.addAmount(this.toSetAmount)
            setTimeout(() => {
              this.toSetAmount = null
            }, 300)
          }, 2000)
        }
      }
    },
    forceRender() {
      this.componentRenderer += 1
    },
    getColor(value) {
      return value >= 0 ? 'title green--text' : 'title red--text'
    },
    getAllSum() {
      if (this.user)
        return (
          this.user.creditList[this.year][2].sum +
          this.user.creditList[this.year][1].last
        )
      return 0
    },
    storno(message) {
      if (!message.error) {
        if (!this.under5minutes(message.date)) this.dialog = true
        else {
          this.checkValidate = true
          this.stornoMessage = message
        }
      }
    },
    acceptStorno() {
      this.commitStorno({
        amount: this.stornoMessage.amount,
        date: this.stornoMessage.date
      })
      setTimeout(() => {
        this.cancelStorno()
      }, 300)
    },
    cancelStorno() {
      this.stornoMessage = null
      this.checkValidate = null
    },
    addAmountMore() {
      this.toSetAmount = this.toSetAmount
              ? this.toSetAmount + Math.round(Math.abs(this.value * 100))
              : Math.round(Math.abs(this.value * 100))
      if (this.checkOverLimitIsValid(this.user)) {
        if (this.checkOverLimit(this.user)) {
          this.overLimitUser = this.user
        }
        else {
          this.addAmount(Math.abs(this.value * 100))
          setTimeout(() => {
            this.value = null
          }, 300)
        }
      }
    },
    createSum(message) {
      var text = '' + (message.amount / 100).toFixed(2) + '€'
      return text
    },
    createMessage(message) {
      var text = ''
      if (message.error) {
        text =
          ' konnten nicht zu ' +
          message.user.firstname +
          ' ' +
          message.user.lastname +
          ' hinzufügen.'
      } else {
        text =
          ' wurde zu ' +
          message.user.firstname +
          ' ' +
          message.user.lastname +
          ' hinzugefügt.'
      }
      return text
    }
  },
  computed: {
    ...mapGetters({
      user: 'user/user',
      year: 'user/year',
      loading: 'user/loading',
      addLoading: 'user/addLoading',
      messages: 'user/messages'
    }),
    under5minutes() {
      return now => {
        var actual = new Date()
        return actual - now < 15000
      }
    },
    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()
        )
      }
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  }
}
</script>

<style scoped></style>