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:
parent
8ac74c9f64
commit
a91384546b
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue