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

public/index.html

@@ -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>

src/components/TitleBar.vue

@@ -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>

src/components/baruser/CreditLists.vue

@@ -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"
-          three-line
-          :key="messages.indexOf(message)"
-        >
-          <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-content>
-        </v-list-item>
+
+        <div v-for="message in messages"
+             three-line
+             :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 @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>

src/store/modules/barUsers.js

@@ -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)