340 lines
11 KiB
Vue
340 lines
11 KiB
Vue
<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 - 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="!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="!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>
|
|
<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="!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="!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="loading">
|
|
<AddAmountSkeleton />
|
|
</v-container>
|
|
|
|
</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.loading = false
|
|
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,
|
|
loading: true,
|
|
showConfirmCanceledDialog: false,
|
|
canceledMessage: null,
|
|
limit: 1000,
|
|
amount: 0,
|
|
customValue: null,
|
|
color: 'green accent-4',
|
|
color_fix: 'green accent-4',
|
|
messages: [],
|
|
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: Konnte ' +
|
|
(message.amount / 100).toFixed(2) +
|
|
'€ nicht zu den Dienstgetränken hinzufügen.'
|
|
} else {
|
|
text =
|
|
'' +
|
|
(message.amount / 100).toFixed(2) +
|
|
'€ zu den Dienstgetränken 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']),
|
|
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
|
|
}
|
|
},
|
|
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>
|
|
|