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

440 lines
13 KiB
Vue
Raw Normal View History

<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_price/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-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="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,
2020-08-08 21:15:04 +00:00
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()
},
acceptStorno() {
this.stornoMessage.storno = true
this.amount -= this.stornoMessage.amount
console.log(this.amount, this.stornoMessage)
this.cancelStorno()
},
stornoAmount(message) {
if (!this.isStronoEnabled(message.date) || message.storno) {
return
}
this.showConfirmStornoDialog = true
this.stornoMessage = message
},
cancelStorno() {
this.showConfirmStornoDialog = null
this.stornoMessage = null
},
},
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
)
},
free_drink_list_history_band_without_canceled_price() {
let sum = 0
this.free_drink_list_history_band_without_canceled.forEach(item => {
sum += item.free_drink_config.price
})
return sum
}
},
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>