change name to 'Flaschengeist', add some logic that messages_navigation_drawer hide and show in tablet mode

This commit is contained in:
Tim Gröger 2020-02-19 21:29:09 +01:00
parent 08c8475ac1
commit 211bb99d07
5 changed files with 64 additions and 20 deletions

View File

@ -4,8 +4,8 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>newgruecht-vue</title>
<link rel="icon" href="<%= BASE_URL %>wuicon.ico">
<title>Flaschengeist</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
</head>

BIN
public/wuicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

View File

@ -3,7 +3,7 @@
<v-btn icon>
<v-img src="@/assets/logo-big.png" contain height="40"></v-img>
</v-btn>
<v-toolbar-title>WU5-Dashboard</v-toolbar-title>
<v-toolbar-title>Flaschengeist</v-toolbar-title>
<v-spacer />
<v-btn icon v-if="isFinanzer">
<v-icon>{{attach_money}}</v-icon>

View File

@ -1,24 +1,44 @@
<template>
<div>
<v-dialog v-model="dialog" max-width="290">
<v-card>
<v-card-title class="headline"
>Transaktion ist länger als 5 Minuten her!</v-card-title
>
<v-card-text>
Da die Transaktion länger als 5 Minutern her ist, kann eine
Stornierung nicht durchgeführt werden. Wende dich bitte an den
Finanzer.
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn text @click="dialog = false">
Verstanden
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-progress-linear v-if="loading && users.length !== 0" indeterminate />
<v-container>
<AddAmountSkeleton v-if="loading && users.length === 0" />
</v-container>
<v-navigation-drawer right app clipped :value="menu">
<v-navigation-drawer v-model="menu" right app clipped>
<v-list-item-group>
<v-list-item
v-for="message in messages"
<div v-for="message in messages"
three-line
:key="messages.indexOf(message)"
>
:key="messages.indexOf(message)">
<v-list-item v-if="!message.storno">
<v-list-item-content>
<v-list-item-title>{{ now(message.date) }}</v-list-item-title>
<v-list-item-subtitle>{{ message.message }}</v-list-item-subtitle>
<v-list-item-action-text v-if="under5minutes(message.date)"
>Klicken um zurückzusetzen</v-list-item-action-text
<v-list-item-action-text @click.stop="storno(message)"
>Klicken um zu Stornieren
</v-list-item-action-text
>
</v-list-item-content>
</v-list-item>
</div>
</v-list-item-group>
</v-navigation-drawer>
<div v-for="user in users" :key="users.indexOf(user)">
@ -181,16 +201,20 @@ export default {
props: {},
data() {
return {
color: 'green accent-4'
color: 'green accent-4',
menu: true,
dialog: false
}
},
created() {
this.menu = this.menu_from_store
this.getUsers()
},
methods: {
...mapActions({
addAmount: 'barUsers/addAmount',
getUsers: 'barUsers/getUsers'
getUsers: 'barUsers/getUsers',
deactivate: 'barUsers/deactivateMenu'
}),
getColor(type) {
return type === 'credit' ? 'title green--text' : 'title red--text'
@ -204,6 +228,13 @@ export default {
} catch (e) {
return true
}
},
storno(message) {
if (!message.error) {
console.log(message)
message.storno = true
if (!this.under5minutes(message.date)) this.dialog = true
}
}
},
computed: {
@ -212,7 +243,7 @@ export default {
filter: 'barUsers/filter',
loading: 'barUsers/usersLoading',
messages: 'barUsers/messages',
menu: 'barUsers/menu'
menu_from_store: 'barUsers/menu'
}),
under5minutes() {
return now => {
@ -267,6 +298,17 @@ export default {
)
}
}
},
watch: {
menu(newValue) {
console.log('menu', newValue)
if (!newValue) this.deactivate()
},
menu_from_store(newValue) {
console.log('for menu_from_store', newValue, this.menu)
if (newValue) this.menu = this.menu_from_store
console.log('after menu_from_store', newValue, this.menu)
}
}
}
</script>

View File

@ -97,7 +97,9 @@ const mutations = {
state.message.unshift({
message: message,
error: data.error,
storno: false,
visible: true,
amount: data.amount,
date: new Date()
})
console.log(state.message)