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

<template>
  <div>
    <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-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-card-text>
          <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-btn
                    class="drinkBtn"
                    block
                    :disabled="locked"
                    :color="color"
                    @click="addAmount(freeDrink, freeDrinkTypeJob)"
                    >{{ freeDrink.label }}</v-btn
                  >
                </v-col>
              </v-row>
              <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)
                        }}
                        €
                      </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-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>
            <v-icon>{{ menuIcon }}</v-icon>
          </v-btn>
        </v-card-title>
        <v-card-text>
          <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-btn
                    class="drinkBtn"
                    block
                    :color="color_fix"
                    @click="addAmount(freeDrink, freeDrinkTypeBand)"
                    >{{ freeDrink.label }}</v-btn
                  >
                </v-col>
              </v-row>
              <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
                      </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="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"
        >
          <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>
        </div>
      </v-list-item-group>
    </v-navigation-drawer>

    <v-dialog v-model="showConfirmCanceledDialog" max-width="290">
      <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?
        </v-card-text>
        <v-card-actions>
          <v-spacer />
          <v-btn text @click="cancelCanceled">Abbrechen</v-btn>
          <v-btn text @click="acceptCanceled">Stornieren</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <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 '../user/Skeleton/AddAmountSkeleton'
import { mapActions, mapGetters } from 'vuex'
import { mdiPlus, mdiMenu } from '@mdi/js'
export default {
  name: 'BarFreedrinks',
  components: { AddAmountSkeleton },
  created() {
    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,
      showConfirmCanceledDialog: false,
      canceledMessage: null,
      limit: 1000,
      amount: 0,
      customValue: null,
      color: 'green accent-4',
      color_fix: 'green accent-4',
      timer: '',
      componentRenderer: 0,
      isMenuShow: false,
      freeDrinkTypeJob: 1,
      freeDrinkTypeBand: 3
    }
  },
  methods: {
    ...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()*/
    },
    canceledAmount(historyElement) {
      if (!this.isStronoEnabled(historyElement.timestamp)) {
        return
      }
      this.showConfirmCanceledDialog = true
      this.canceledMessage = historyElement
    },

    cancelCanceled() {
      this.showConfirmCanceledDialog = null
      this.canceledMessage = null
    },
    generateMessage(amount) {
      this.messages.push({
        date: new Date(),
        canceled: false,
        amount: amount,
        error: false,
        visible: true
      })
    },
    createMessage(message) {
      var text = ''
      if (message.error) {
        text =
          'ERROR: ' + message.free_drink_type.name +': Konnte ' + message.label + ' für ' +
          (message.price / 100).toFixed(2) +
          '€ nicht hinzufügen.'
      } else {
        text = message.free_drink_type.name + ': ' + message.label + ' wurde für ' + (message.price / 100).toFixed(2) + '€ hinzugefügt.'
      }
      return text
    },
    checkLocked() {
      this.locked = this.limit - this.amount <= 0
    },
    getColor() {
      return this.locked ? 'title red--text' : 'title'
    },
    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',
      'loading',
      'snackbar_messages'
    ]),
    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
      }
    },
    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() {
    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>