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

View File

@ -1,38 +1,51 @@
<template>
<div>
<v-container>
<v-card class="mx-auto" outlined>
<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-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-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-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-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>
>{{ freeDrink.label }}</v-btn
>
</v-col>
</v-row>
<v-row v-if="!loading" class="justify-end">
<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) }}
{{
(free_drink_list_history_job_credit / 100).toFixed(2)
}}
</v-list-item-action-text>
</v-list-item-content>
@ -43,7 +56,7 @@
</v-row>
</v-card-text>
</v-card>
<v-card class="mx-auto" outlined>
<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>
@ -51,24 +64,35 @@
</v-btn>
</v-card-title>
<v-card-text>
<v-row v-if="!loading">
<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-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>
>{{ freeDrink.label }}</v-btn
>
</v-col>
</v-row>
<v-row v-if="!loading" class="justify-end">
<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.length }} Getränke
{{
free_drink_list_history_band_without_canceled.length
}}
Getränke
</v-list-item-action-text>
</v-list-item-content>
</v-list-item>
@ -111,18 +135,35 @@
v-for="freeDrinkHistory in free_drink_list_history"
: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-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
<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
(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-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-if="
isStronoEnabled(freeDrinkHistory.timestamp) &&
!freeDrinkHistory.canceled
"
>Klicken um zu Stornieren</v-list-item-action-text
>
</v-list-item-content>
</v-list-item>
</div>
@ -133,7 +174,10 @@
<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?
{{ 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 />
@ -143,10 +187,47 @@
</v-card>
</v-dialog>
<v-container v-if="loading">
<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>
@ -158,7 +239,6 @@ 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()
@ -167,7 +247,6 @@ export default {
return {
plus: mdiPlus,
menuIcon: mdiMenu,
loading: true,
showConfirmCanceledDialog: false,
canceledMessage: null,
limit: 1000,
@ -175,7 +254,6 @@ export default {
customValue: null,
color: 'green accent-4',
color_fix: 'green accent-4',
messages: [],
timer: '',
componentRenderer: 0,
isMenuShow: false,
@ -184,12 +262,17 @@ export default {
}
},
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() {
console.log(this.free_drink_list_config)
},
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) {
this.amount += amount
this.generateMessage(amount)
@ -214,21 +297,18 @@ export default {
canceled: false,
amount: amount,
error: false,
visible: true,
visible: true
})
},
createMessage(message) {
var text = ''
if (message.error) {
text =
'ERROR: Konnte ' +
(message.amount / 100).toFixed(2) +
'€ nicht zu den Dienstgetränken hinzufügen.'
'ERROR: ' + message.free_drink_type.name +': Konnte ' + message.label + ' für ' +
(message.price / 100).toFixed(2) +
'€ nicht hinzufügen.'
} else {
text =
'' +
(message.amount / 100).toFixed(2) +
'€ zu den Dienstgetränken hinzugefügt.'
text = message.free_drink_type.name + ': ' + message.label + ' wurde für ' + (message.price / 100).toFixed(2) + '€ hinzugefügt.'
}
return text
},
@ -245,7 +325,16 @@ export default {
}
},
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() {
return now => {
var actual = new Date()
@ -303,6 +392,14 @@ export default {
},
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
)
}
},
beforeDestroy() {
@ -336,4 +433,3 @@ export default {
cursor: pointer;
}
</style>

View File

@ -4,7 +4,10 @@ const timeout = 20000
const state = {
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 = {
@ -24,12 +27,33 @@ const mutations = {
})
state.free_drink_list_history = data
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 = {
async get_free_drink_list_config({ commit, dispatch, rootState }) {
try {
commit('set_free_drink_list_config_loading', true)
const response = await axios.get(url.freeDrinkListConfig, {
headers: { Token: rootState.login.user.accessToken },
timeout
@ -41,10 +65,13 @@ const actions = {
}
if (e.response)
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 }) {
try {
commit('set_free_drink_list_history_loading', true)
const response = await axios.get(url.freeDrinkListHistory, {
headers: { Token: rootState.login.user.accessToken },
timeout
@ -56,10 +83,13 @@ const actions = {
}
if (e.response)
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) {
try {
commit('set_free_drink_list_history_loading', true)
const response = await axios.post(
url.freeDrinkListHistory,
{ ...data },
@ -69,28 +99,37 @@ const actions = {
}
)
commit('set_free_drink_list_history', response.data)
commit('add_snackbar_message', { data, error: false })
} catch (e) {
commit('add_snackbar_message', { data, error: true })
if (e.message == 'Network Error') {
dispatch('connectionError/addError', null, { root: true })
}
if (e.response)
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) {
try {
commit('set_free_drink_list_history_loading', true)
await axios.put(
url.freeDrinkListHistory,
{ ...data },
{ headers: { Token: rootState.login.user.accessToken }, timeout }
)
commit('set_free_drink_list_history', data)
commit('add_snackbar_message', { data, error: false })
} catch (e) {
dispatch('connectionError/addError', null, { root: true })
if (e.message == 'Network Error') {
dispatch('connectionError/addError', null, { root: true })
}
if (e.response)
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) {
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
jobDrinks.forEach(item => {
credit += item.free_drink_config.price
})
return credit
},
loading(state) {
return (
state.free_drink_list_history_loading ||
state.free_drink_list_config_loading
)
},
snackbar_messages(state) {
return state.snackbar_messages
}
}