Flaschengeist/flaschengeist-frontend
Flaschengeist
/
flaschengeist-frontend
7
0
Fork 1
Code Issues Pull Requests Projects Releases Activity

Dienstgetränke UI ohne backendanschluss

This commit is contained in:
Snowmee 2020-08-08 21:09:16 +02:00
parent 1cd823f44e
commit d5393d75c5
6 changed files with 393 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

349
src/components/baruser/BarFreedrinks.vue Normal file
View File

@ -0,0 +1,349 @@
<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>

13
src/components/baruser/BarNavigation.vue
View File

@ -8,16 +8,25 @@
Geruecht
</v-list-item-title>
</v-list-item>
<v-list-item link :to="{name: 'baruserFreedrinks'}">
<v-list-item-icon>
<v-icon>{{ beer }}</v-icon>
</v-list-item-icon>
<v-list-item-title>
Freigetränke
</v-list-item-title>
</v-list-item>
</v-list>
</template>
<script>
import { mdiGlassMugVariant } from '@mdi/js'
import { mdiGlassMugVariant,mdiBeer } from '@mdi/js'
export default {
name: 'BarNavigation',
data() {
return {
glass_mug_variant: mdiGlassMugVariant
glass_mug_variant: mdiGlassMugVariant,
beer: mdiBeer
}
}
}

1
src/components/baruser/SearchBar.vue
View File

@ -106,6 +106,7 @@ export default {
return retUser ? retUser.amount : 0
},
getLocked(user) {
if(!user) return
let retUser = this.users.find(item => {
return item.username === user.username
})

4
src/plugins/routes.js
View File

@ -1,7 +1,7 @@
//const main = 'https://192.168.5.128:5000/'
const main = 'http://localhost:5000/'
//const main = 'http://localhost:5000/'
//const main = 'http://192.168.5.118:5000/'
//const main = 'https://groeger-clan.duckdns.org:5000/'
const main = 'https://groeger-clan.duckdns.org:5000/'
//const main = 'https://flaschengeist.wu5.de:5000/'
const url = {

6
src/router/index.js
View File

@ -4,6 +4,7 @@ import FinanzerView from '@/views/FinanzerView'
import Login from '@/views/Login'
import store from '@/store/index'
import GeruechteView from '../views/contents/GeruechteView'
import BarFreedrinksView from '../views/contents/BarFreedrinksView'
import AddAmount from '../components/user/AddAmount'
import CreditOverview from '../components/user/CreditOverview'
import MainView from '../views/MainView'
@ -124,6 +125,11 @@ const routes = [
path: 'geruecht',
name: 'geruecht',
component: GeruechteView
},
{
path: 'baruserFreedrinks',
name: 'baruserFreedrinks',
component: BarFreedrinksView
}
]
},

24
src/views/contents/BarFreedrinksView.vue Normal file
View File

@ -0,0 +1,24 @@
<template>
<div>
<BarFreedrinks></BarFreedrinks>
</div>
</template>
<script>
import BarFreedrinks from '@/components/baruser/BarFreedrinks'
// eslint-disable-next-line no-unused-vars
import { mapActions } from 'vuex'
export default {
name: 'BarFreedrinksView',
components: { BarFreedrinks },
created() {},
data() {
return {}
},
methods: {
...mapActions(['logout'])
}
}
</script>
<style scoped></style>