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

Snackbar hinzugefügt 

Man kann nun sehen, was hinzugefügt wurde und falls ein fehler auftritt was nicht hinzugefügt wurde.
Außerdem gibt es ladebalken.
This commit is contained in:
Tim Gröger 2020-08-20 11:33:47 +02:00
parent 8ac74c9f64
commit a91384546b
2 changed files with 198 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

200
src/components/baruser/BarFreedrinks.vue
View File

@ -1,38 +1,51 @@
<template> <template>
<div> <div>
<v-container> <v-container v-if="!first_loading">
<v-card class="mx-auto" outlined> <v-card class="mx-auto" outlined :loading="loading">
<v-card-title> <v-card-title>
<div class="title">Dienstgetränke</div> <div class="title">Dienstgetränke</div>
<v-chip class="ma-2" color="red" text-color="white" v-if="locked">Gesperrt</v-chip> <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-btn class="menuBtn" @click.stop="isMenuShow = !isMenuShow" icon>
<v-icon>{{ menuIcon }}</v-icon> <v-icon>{{ menuIcon }}</v-icon>
</v-btn> </v-btn>
</v-card-title> </v-card-title>
<v-card-subtitle v-if="(limit - free_drink_list_history_job_credit) > 0"> <v-card-subtitle v-if="limit - free_drink_list_history_job_credit > 0">
Noch {{ ((limit - free_drink_list_history_job_credit) / 100).toFixed(2) }} € Noch
übrig!! {{ ((limit - free_drink_list_history_job_credit) / 100).toFixed(2) }}
€ übrig!!
</v-card-subtitle> </v-card-subtitle>
<v-card-text> <v-card-text>
<v-row v-if="!loading"> <v-row v-if="!first_loading">
<v-col cols="12"> <v-col cols="12">
<v-row> <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-col
v-for="freeDrink in free_drink_list_config_job"
:key="freeDrink.id"
cols="6"
xs="3"
sm="4"
class="drinkCol"
>
<v-btn <v-btn
class="drinkBtn" class="drinkBtn"
block block
:disabled="locked" :disabled="locked"
:color="color" :color="color"
@click="addAmount(freeDrink, freeDrinkTypeJob)" @click="addAmount(freeDrink, freeDrinkTypeJob)"
>{{freeDrink.label}}</v-btn> >{{ freeDrink.label }}</v-btn
>
</v-col> </v-col>
</v-row> </v-row>
<v-row v-if="!loading" class="justify-end"> <v-row v-if="!first_loading" class="justify-end">
<v-col cols="3"> <v-col cols="3">
<v-list-item> <v-list-item>
<v-list-item-content class="text-center"> <v-list-item-content class="text-center">
<v-list-item-action-text :class="getColor()"> <v-list-item-action-text :class="getColor()">
{{ (free_drink_list_history_job_credit / 100).toFixed(2) }} {{
(free_drink_list_history_job_credit / 100).toFixed(2)
}}
€ €
</v-list-item-action-text> </v-list-item-action-text>
</v-list-item-content> </v-list-item-content>
@ -43,7 +56,7 @@
</v-row> </v-row>
</v-card-text> </v-card-text>
</v-card> </v-card>
<v-card class="mx-auto" outlined> <v-card class="mx-auto" outlined :loading="loading">
<v-card-title> <v-card-title>
<div class="title">Bandgetränke</div> <div class="title">Bandgetränke</div>
<v-btn class="menuBtn" @click.stop="isMenuShow = !isMenuShow" icon> <v-btn class="menuBtn" @click.stop="isMenuShow = !isMenuShow" icon>
@ -51,24 +64,35 @@
</v-btn> </v-btn>
</v-card-title> </v-card-title>
<v-card-text> <v-card-text>
<v-row v-if="!loading"> <v-row v-if="!first_loading">
<v-col cols="12"> <v-col cols="12">
<v-row> <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-col
v-for="freeDrink in free_drink_list_config_band"
:key="freeDrink.id"
cols="6"
xs="3"
sm="4"
class="drinkCol"
>
<v-btn <v-btn
class="drinkBtn" class="drinkBtn"
block block
:color="color_fix" :color="color_fix"
@click="addAmount(freeDrink, freeDrinkTypeBand)" @click="addAmount(freeDrink, freeDrinkTypeBand)"
>{{freeDrink.label}}</v-btn> >{{ freeDrink.label }}</v-btn
>
</v-col> </v-col>
</v-row> </v-row>
<v-row v-if="!loading" class="justify-end"> <v-row v-if="!first_loading" class="justify-end">
<v-col cols="3"> <v-col cols="3">
<v-list-item> <v-list-item>
<v-list-item-content class="text-center"> <v-list-item-content class="text-center">
<v-list-item-action-text class="title"> <v-list-item-action-text class="title">
{{ free_drink_list_history_band_without_canceled.length }} Getränke {{
free_drink_list_history_band_without_canceled.length
}}
Getränke
</v-list-item-action-text> </v-list-item-action-text>
</v-list-item-content> </v-list-item-content>
</v-list-item> </v-list-item>
@ -110,19 +134,36 @@
<div <div
v-for="freeDrinkHistory in free_drink_list_history" v-for="freeDrinkHistory in free_drink_list_history"
:key="freeDrinkHistory.id" :key="freeDrinkHistory.id"
>
<v-list-item
three-line
inactive
@click="canceledAmount(freeDrinkHistory)"
> >
<v-list-item three-line inactive @click="canceledAmount(freeDrinkHistory)">
<v-list-item-content> <v-list-item-content>
<v-list-item-title>{{ now(freeDrinkHistory.timestamp) }}</v-list-item-title> <v-list-item-title>{{
<v-list-item-subtitle>{{ freeDrinkHistory.free_drink_type.name }}: {{ freeDrinkHistory.free_drink_config.label }} wurde für 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) (freeDrinkHistory.free_drink_config.price / 100).toFixed(2)
}} € hinzugefügt }}
€ hinzugefügt.
</v-list-item-subtitle> </v-list-item-subtitle>
<v-list-item-subtitle class="red--text" v-if="freeDrinkHistory.canceled">STORNIERT!!!</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-list-item-action-text
v-if="isStronoEnabled(freeDrinkHistory.timestamp) && !freeDrinkHistory.canceled" v-if="
>Klicken um zu Stornieren</v-list-item-action-text> isStronoEnabled(freeDrinkHistory.timestamp) &&
!freeDrinkHistory.canceled
"
>Klicken um zu Stornieren</v-list-item-action-text
>
</v-list-item-content> </v-list-item-content>
</v-list-item> </v-list-item>
</div> </div>
@ -133,7 +174,10 @@
<v-card> <v-card>
<v-card-title>Willst du wirklich??</v-card-title> <v-card-title>Willst du wirklich??</v-card-title>
<v-card-text v-if="canceledMessage"> <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? {{ 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-text>
<v-card-actions> <v-card-actions>
<v-spacer /> <v-spacer />
@ -143,10 +187,47 @@
</v-card> </v-card>
</v-dialog> </v-dialog>
<v-container v-if="loading"> <v-container v-if="first_loading">
<AddAmountSkeleton /> <AddAmountSkeleton />
</v-container> </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> </div>
</template> </template>
<script> <script>
@ -158,7 +239,6 @@ export default {
name: 'BarFreedrinks', name: 'BarFreedrinks',
components: { AddAmountSkeleton }, components: { AddAmountSkeleton },
created() { created() {
this.loading = false
this.timer = setInterval(() => (this.componentRenderer += 1), 1000) this.timer = setInterval(() => (this.componentRenderer += 1), 1000)
this.get_free_drink_list_config() this.get_free_drink_list_config()
this.get_free_drink_list_history() this.get_free_drink_list_history()
@ -167,7 +247,6 @@ export default {
return { return {
plus: mdiPlus, plus: mdiPlus,
menuIcon: mdiMenu, menuIcon: mdiMenu,
loading: true,
showConfirmCanceledDialog: false, showConfirmCanceledDialog: false,
canceledMessage: null, canceledMessage: null,
limit: 1000, limit: 1000,
@ -175,7 +254,6 @@ export default {
customValue: null, customValue: null,
color: 'green accent-4', color: 'green accent-4',
color_fix: 'green accent-4', color_fix: 'green accent-4',
messages: [],
timer: '', timer: '',
componentRenderer: 0, componentRenderer: 0,
isMenuShow: false, isMenuShow: false,
@ -184,12 +262,17 @@ export default {
} }
}, },
methods: { methods: {
...mapActions('freeDrinkList', ['get_free_drink_list_config', 'get_free_drink_list_history','set_free_drink_list_history', 'update_free_drink_list_history']), ...mapActions('freeDrinkList', [
'get_free_drink_list_config',
'get_free_drink_list_history',
'set_free_drink_list_history',
'update_free_drink_list_history'
]),
output() { output() {
console.log(this.free_drink_list_config) console.log(this.free_drink_list_config)
}, },
addAmount(freeDrink, free_drink_type_id) { addAmount(freeDrink, free_drink_type_id) {
this.set_free_drink_list_history({...freeDrink, free_drink_type_id}) this.set_free_drink_list_history({ ...freeDrink, free_drink_type_id })
/*if (amount) { /*if (amount) {
this.amount += amount this.amount += amount
this.generateMessage(amount) this.generateMessage(amount)
@ -214,21 +297,18 @@ export default {
canceled: false, canceled: false,
amount: amount, amount: amount,
error: false, error: false,
visible: true, visible: true
}) })
}, },
createMessage(message) { createMessage(message) {
var text = '' var text = ''
if (message.error) { if (message.error) {
text = text =
'ERROR: Konnte ' + 'ERROR: ' + message.free_drink_type.name +': Konnte ' + message.label + ' für ' +
(message.amount / 100).toFixed(2) + (message.price / 100).toFixed(2) +
'€ nicht zu den Dienstgetränken hinzufügen.' '€ nicht hinzufügen.'
} else { } else {
text = text = message.free_drink_type.name + ': ' + message.label + ' wurde für ' + (message.price / 100).toFixed(2) + '€ hinzugefügt.'
'' +
(message.amount / 100).toFixed(2) +
'€ zu den Dienstgetränken hinzugefügt.'
} }
return text return text
}, },
@ -245,7 +325,16 @@ export default {
} }
}, },
computed: { 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']), ...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() { now() {
return now => { return now => {
var actual = new Date() var actual = new Date()
@ -303,6 +392,14 @@ export default {
}, },
locked() { locked() {
return this.free_drink_list_history_job_credit >= 1000 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() { beforeDestroy() {
@ -336,4 +433,3 @@ export default {
cursor: pointer; cursor: pointer;
} }
</style> </style>

52
src/store/modules/freeDrinkList.js
View File

@ -4,7 +4,10 @@ const timeout = 20000
const state = { const state = {
free_drink_list_config: [], free_drink_list_config: [],
free_drink_list_history: [] free_drink_list_history: [],
free_drink_list_config_loading: false,
free_drink_list_history_loading: false,
snackbar_messages: []
} }
const mutations = { const mutations = {
@ -24,12 +27,33 @@ const mutations = {
}) })
state.free_drink_list_history = data state.free_drink_list_history = data
state.free_drink_list_history.reverse() state.free_drink_list_history.reverse()
},
set_free_drink_list_config_loading(state, loading) {
state.free_drink_list_config_loading = loading
},
set_free_drink_list_history_loading(state, loading) {
state.free_drink_list_history_loading = loading
},
add_snackbar_message(state, { data, error }) {
data.error = error
data.visible = true
data.free_drink_type = data.free_drink_types.find(item => {
return item.id == data.free_drink_type_id
})
data.timer = setTimeout(() => {
if (!data.error) {
data.visible = false
}
}, 5000)
console.log(data)
state.snackbar_messages.unshift(data)
} }
} }
const actions = { const actions = {
async get_free_drink_list_config({ commit, dispatch, rootState }) { async get_free_drink_list_config({ commit, dispatch, rootState }) {
try { try {
commit('set_free_drink_list_config_loading', true)
const response = await axios.get(url.freeDrinkListConfig, { const response = await axios.get(url.freeDrinkListConfig, {
headers: { Token: rootState.login.user.accessToken }, headers: { Token: rootState.login.user.accessToken },
timeout timeout
@ -41,10 +65,13 @@ const actions = {
} }
if (e.response) if (e.response)
if (e.response.status === 401) dispatch('logout', null, { root: true }) if (e.response.status === 401) dispatch('logout', null, { root: true })
} finally {
commit('set_free_drink_list_config_loading', false)
} }
}, },
async get_free_drink_list_history({ commit, dispatch, rootState }) { async get_free_drink_list_history({ commit, dispatch, rootState }) {
try { try {
commit('set_free_drink_list_history_loading', true)
const response = await axios.get(url.freeDrinkListHistory, { const response = await axios.get(url.freeDrinkListHistory, {
headers: { Token: rootState.login.user.accessToken }, headers: { Token: rootState.login.user.accessToken },
timeout timeout
@ -56,10 +83,13 @@ const actions = {
} }
if (e.response) if (e.response)
if (e.response.status === 401) dispatch('logout', null, { root: true }) if (e.response.status === 401) dispatch('logout', null, { root: true })
} finally {
commit('set_free_drink_list_history_loading', false)
} }
}, },
async set_free_drink_list_history({ commit, dispatch, rootState }, data) { async set_free_drink_list_history({ commit, dispatch, rootState }, data) {
try { try {
commit('set_free_drink_list_history_loading', true)
const response = await axios.post( const response = await axios.post(
url.freeDrinkListHistory, url.freeDrinkListHistory,
{ ...data }, { ...data },
@ -69,28 +99,37 @@ const actions = {
} }
) )
commit('set_free_drink_list_history', response.data) commit('set_free_drink_list_history', response.data)
commit('add_snackbar_message', { data, error: false })
} catch (e) { } catch (e) {
commit('add_snackbar_message', { data, error: true })
if (e.message == 'Network Error') { if (e.message == 'Network Error') {
dispatch('connectionError/addError', null, { root: true }) dispatch('connectionError/addError', null, { root: true })
} }
if (e.response) if (e.response)
if (e.response.status === 401) dispatch('logout', null, { root: true }) if (e.response.status === 401) dispatch('logout', null, { root: true })
} finally {
commit('set_free_drink_list_history_loading', false)
} }
}, },
async update_free_drink_list_history({ commit, dispatch, rootState }, data) { async update_free_drink_list_history({ commit, dispatch, rootState }, data) {
try { try {
commit('set_free_drink_list_history_loading', true)
await axios.put( await axios.put(
url.freeDrinkListHistory, url.freeDrinkListHistory,
{ ...data }, { ...data },
{ headers: { Token: rootState.login.user.accessToken }, timeout } { headers: { Token: rootState.login.user.accessToken }, timeout }
) )
commit('set_free_drink_list_history', data) commit('set_free_drink_list_history', data)
commit('add_snackbar_message', { data, error: false })
} catch (e) { } catch (e) {
dispatch('connectionError/addError', null, { root: true })
if (e.message == 'Network Error') { if (e.message == 'Network Error') {
dispatch('connectionError/addError', null, { root: true }) dispatch('connectionError/addError', null, { root: true })
} }
if (e.response) if (e.response)
if (e.response.status === 401) dispatch('logout', null, { root: true }) if (e.response.status === 401) dispatch('logout', null, { root: true })
} finally {
commit('set_free_drink_list_history_loading', false)
} }
} }
} }
@ -136,13 +175,22 @@ const getters = {
}, },
free_drink_list_history_job_credit(state) { free_drink_list_history_job_credit(state) {
let jobDrinks = state.free_drink_list_history.filter(item => { let jobDrinks = state.free_drink_list_history.filter(item => {
return item.free_drink_type.id == 1 && !item.storno return item.free_drink_type.id == 1 && !item.canceled
}) })
let credit = 0 let credit = 0
jobDrinks.forEach(item => { jobDrinks.forEach(item => {
credit += item.free_drink_config.price credit += item.free_drink_config.price
}) })
return credit return credit
},
loading(state) {
return (
state.free_drink_list_history_loading ||
state.free_drink_list_config_loading
)
},
snackbar_messages(state) {
return state.snackbar_messages
} }
} }