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

<template>
  <v-container >
    <AddAmountSkeleton v-if="loading" />
    <v-card v-if="!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(200)"
                  :color="color"
                  :disabled="user.locked"
                  >2 €</v-btn
                >
              </v-col>
              <v-col>
                <v-btn
                  class="creditBtn"
                  block
                  @click="addAmount(100)"
                  :color="color"
                  :disabled="user.locked"
                  >1 €</v-btn
                >
              </v-col>
              <v-col>
                <v-btn
                  class="creditBtn"
                  block
                  @click="addAmount(50)"
                  :color="color"
                  :disabled="user.locked"
                  >0,50 €</v-btn
                >
              </v-col>
            </v-row>
            <v-row>
              <v-col>
                <v-btn
                  class="creditBtn"
                  block
                  @click="addAmount(40)"
                  :color="color"
                  :disabled="user.locked"
                  >0,40 €</v-btn
                >
              </v-col>
              <v-col>
                <v-btn
                  class="creditBtn"
                  block
                  @click="addAmount(20)"
                  :color="color"
                  :disabled="user.locked"
                  >0,20 €</v-btn
                >
              </v-col>
              <v-col>
                <v-btn
                  class="creditBtn"
                  block
                  @click="addAmount(10)"
                  :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(getAllSum())"
                  >{{
                    (getAllSum() / 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-container>
</template>

<script>
  import {mapGetters, mapActions} from 'vuex'
  import AddAmountSkeleton from './Skeleton/AddAmountSkeleton'
export default {
  name: 'AddAmount',
  components: { AddAmountSkeleton },
  data() {
    return {
      color: 'green accent-4'
    }
  },
  methods: {
    ...mapActions({
      addAmount: 'user/addAmount'
    }),
    getColor(value) {
      return value >= 0 ? 'title green--text' : 'title red--text'
    },
    getAllSum() {
      console.log("getAllSum", this.user)
      if (this.user)
        return this.user.creditList[this.year][2].sum + this.user.creditList[this.year][1].last
      return 0
    }
  },
  computed: {
    ...mapGetters({
      user: 'user/user',
      year: 'user/year',
      loading: 'user/loading'
    }),
  }
}
</script>

<style scoped></style>