350 lines
10 KiB
Vue
350 lines
10 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 - amount) > 0">
|
||
|
|
Noch {{ ((limit - amount) / 100).toFixed(2) }} €
|
||
|
|
übrig!!
|
||
|
|
</v-card-subtitle>
|
||
|
|
<v-card-text>
|
||
|
|
<v-row v-if="!loading">
|
||
|
|
<v-col cols="12">
|
||
|
|
<v-row>
|
||
|
|
<v-col cols="6" xs="3" sm="4" class="drinkCol">
|
||
|
|
<v-btn
|
||
|
|
class="drinkBtn"
|
||
|
|
:disabled="locked"
|
||
|
|
:color="color"
|
||
|
|
@click="addAmount(140)"
|
||
|
|
>Bier</v-btn>
|
||
|
|
</v-col>
|
||
|
|
<v-col cols="6" xs="3" sm="4" class="drinkCol">
|
||
|
|
<v-btn
|
||
|
|
class="drinkBtn"
|
||
|
|
block
|
||
|
|
:disabled="locked"
|
||
|
|
:color="color"
|
||
|
|
@click="addAmount(200)"
|
||
|
|
>Cuba</v-btn>
|
||
|
|
</v-col>
|
||
|
|
<v-col cols="6" xs="3" sm="4" class="drinkCol">
|
||
|
|
<v-btn
|
||
|
|
class="drinkBtn"
|
||
|
|
block
|
||
|
|
:disabled="locked"
|
||
|
|
:color="color"
|
||
|
|
@click="addAmount(50)"
|
||
|
|
>Schnaps</v-btn>
|
||
|
|
</v-col>
|
||
|
|
<v-col cols="6" xs="3" sm="4" class="drinkCol">
|
||
|
|
<v-btn
|
||
|
|
class="drinkBtn"
|
||
|
|
block
|
||
|
|
:disabled="locked"
|
||
|
|
:color="color"
|
||
|
|
@click="addAmount(200)"
|
||
|
|
>Wein</v-btn>
|
||
|
|
</v-col>
|
||
|
|
<v-col cols="6" xs="3" sm="4" class="drinkCol">
|
||
|
|
<v-btn
|
||
|
|
class="drinkBtn"
|
||
|
|
block
|
||
|
|
:disabled="locked"
|
||
|
|
:color="color"
|
||
|
|
@click="addAmount(200)"
|
||
|
|
>Gin Tonic</v-btn>
|
||
|
|
</v-col>
|
||
|
|
<v-col cols="6" xs="3" sm="4" class="drinkCol">
|
||
|
|
<v-btn
|
||
|
|
class="drinkBtn"
|
||
|
|
block
|
||
|
|
:disabled="locked"
|
||
|
|
:color="color"
|
||
|
|
@click="addAmount(100)"
|
||
|
|
>Fritz</v-btn>
|
||
|
|
</v-col>
|
||
|
|
<v-col cols="6" xs="3" sm="4" class="drinkCol">
|
||
|
|
<v-btn
|
||
|
|
class="drinkBtn"
|
||
|
|
block
|
||
|
|
:disabled="locked"
|
||
|
|
:color="color"
|
||
|
|
@click="addAmount(100)"
|
||
|
|
>Saft</v-btn>
|
||
|
|
</v-col>
|
||
|
|
<v-col cols="6" xs="3" sm="4" class="drinkCol">
|
||
|
|
<v-btn
|
||
|
|
class="drinkBtn"
|
||
|
|
block
|
||
|
|
:disabled="locked"
|
||
|
|
:color="color"
|
||
|
|
@click="addAmount(30)"
|
||
|
|
>Wasser</v-btn>
|
||
|
|
</v-col>
|
||
|
|
</v-row>
|
||
|
|
<v-row v-if="!loading">
|
||
|
|
<v-col cols="8">
|
||
|
|
<v-text-field
|
||
|
|
outlined
|
||
|
|
type="number"
|
||
|
|
label="Benutzerdefinierter Betrag"
|
||
|
|
:disabled="locked"
|
||
|
|
v-model="customValue"
|
||
|
|
></v-text-field>
|
||
|
|
</v-col>
|
||
|
|
<v-col cols="2">
|
||
|
|
<v-btn fab :color="color" :disabled="locked" @click="addAmount(customValue)">
|
||
|
|
<v-icon>{{ plus }}</v-icon>
|
||
|
|
</v-btn>
|
||
|
|
</v-col>
|
||
|
|
<v-col cols="2">
|
||
|
|
<v-list-item>
|
||
|
|
<v-list-item-content class="text-center">
|
||
|
|
<v-list-item-action-text :class="getColor()">
|
||
|
|
{{ (amount / 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="message in messages"
|
||
|
|
three-line
|
||
|
|
:key="messages.indexOf(message)"
|
||
|
|
class="history-item"
|
||
|
|
>
|
||
|
|
<v-list-item three-line inactive @click="stornoAmount(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.storno">STORNIERT!!!</v-list-item-subtitle>
|
||
|
|
<v-list-item-action-text
|
||
|
|
v-if="isStronoEnabled(message.date) && !message.storno"
|
||
|
|
>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="showConfirmStornoDialog" 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
|
||
|
|
den Dienstgetränke 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-container v-if="loading">
|
||
|
|
<AddAmountSkeleton />
|
||
|
|
</v-container>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
// eslint-disable-next-line no-unused-vars
|
||
|
|
import AddAmountSkeleton from '../user/Skeleton/AddAmountSkeleton'
|
||
|
|
import { mdiPlus, mdiMenu } from '@mdi/js'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'BarFreedrinks',
|
||
|
|
components: { AddAmountSkeleton },
|
||
|
|
created() {
|
||
|
|
this.loading = false
|
||
|
|
this.timer = setInterval(() => (this.componentRenderer += 1), 1000)
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
plus: mdiPlus,
|
||
|
|
menuIcon: mdiMenu,
|
||
|
|
loading: true,
|
||
|
|
locked: false,
|
||
|
|
showConfirmStornoDialog: false,
|
||
|
|
stornoMessage: null,
|
||
|
|
limit: 1000,
|
||
|
|
amount: 0,
|
||
|
|
customValue: null,
|
||
|
|
color: 'green accent-4',
|
||
|
|
messages: [],
|
||
|
|
timer: '',
|
||
|
|
componentRenderer: 0,
|
||
|
|
isMenuShow: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
addAmount(amount) {
|
||
|
|
if (amount) {
|
||
|
|
this.amount += amount
|
||
|
|
this.generateMessage(amount)
|
||
|
|
}
|
||
|
|
this.checkLocked()
|
||
|
|
},
|
||
|
|
stornoAmount(message) {
|
||
|
|
if (!this.isStronoEnabled(message.date) || message.storno) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
this.showConfirmStornoDialog = true
|
||
|
|
this.stornoMessage = message
|
||
|
|
},
|
||
|
|
|
||
|
|
cancelStorno() {
|
||
|
|
this.showConfirmStornoDialog = null
|
||
|
|
this.stornoMessage = null
|
||
|
|
},
|
||
|
|
generateMessage(amount) {
|
||
|
|
this.messages.push({
|
||
|
|
date: new Date(),
|
||
|
|
storno: false,
|
||
|
|
amount: amount
|
||
|
|
})
|
||
|
|
},
|
||
|
|
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) +
|
||
|
|
'€ nicht zu den Dienstgetränken hinzugefügt.'
|
||
|
|
}
|
||
|
|
return text
|
||
|
|
},
|
||
|
|
checkLocked() {
|
||
|
|
this.locked = this.limit - this.amount <= 0
|
||
|
|
},
|
||
|
|
getColor() {
|
||
|
|
return this.locked ? 'title red--text' : 'title'
|
||
|
|
},
|
||
|
|
acceptStorno() {
|
||
|
|
this.stornoMessage.storno = true
|
||
|
|
this.amount -= this.stornoMessage.amount
|
||
|
|
console.log(this.amount, this.stornoMessage)
|
||
|
|
this.cancelStorno()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
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
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
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>
|
||
|
|
|