add history

src/components/baruser/CreditLists.vue

@@ -4,6 +4,23 @@
     <v-container>
       <AddAmountSkeleton v-if="loading && users.length === 0" />
     </v-container>
+    <v-navigation-drawer right app clipped :value="menu">
+      <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>
+      </v-list-item-group>
+    </v-navigation-drawer>
     <div v-for="user in users" :key="users.indexOf(user)">
       <div v-if="isFiltered(user)">
         <v-container>
@@ -22,7 +39,11 @@
                         class="creditBtn"
                         block
                         @click="
-                          addAmount({ username: user.username, amount: 200 })
+                          addAmount({
+                            username: user.username,
+                            amount: 200,
+                            user: user
+                          })
                         "
                         :color="color"
                         :disabled="user.locked"
@@ -34,7 +55,11 @@
                         class="creditBtn"
                         block
                         @click="
-                          addAmount({ username: user.username, amount: 100 })
+                          addAmount({
+                            username: user.username,
+                            amount: 100,
+                            user: user
+                          })
                         "
                         :color="color"
                         :disabled="user.locked"
@@ -46,7 +71,11 @@
                         class="creditBtn"
                         block
                         @click="
-                          addAmount({ username: user.username, amount: 50 })
+                          addAmount({
+                            username: user.username,
+                            amount: 50,
+                            user: user
+                          })
                         "
                         :color="color"
                         :disabled="user.locked"
@@ -60,7 +89,11 @@
                         class="creditBtn"
                         block
                         @click="
-                          addAmount({ username: user.username, amount: 40 })
+                          addAmount({
+                            username: user.username,
+                            amount: 40,
+                            user: user
+                          })
                         "
                         :color="color"
                         :disabled="user.locked"
@@ -72,7 +105,11 @@
                         class="creditBtn"
                         block
                         @click="
-                          addAmount({ username: user.username, amount: 20 })
+                          addAmount({
+                            username: user.username,
+                            amount: 20,
+                            user: user
+                          })
                         "
                         :color="color"
                         :disabled="user.locked"
@@ -84,7 +121,11 @@
                         class="creditBtn"
                         block
                         @click="
-                          addAmount({ username: user.username, amount: 10 })
+                          addAmount({
+                            username: user.username,
+                            amount: 10,
+                            user: user
+                          })
                         "
                         :color="color"
                         :disabled="user.locked"
@@ -113,6 +154,17 @@
               >
             </v-card-text>
           </v-card>
+          <v-snackbar
+            v-for="message in messages"
+            :key="messages.indexOf(message)"
+            :color="message.error ? 'error' : 'success'"
+            bottom
+            :timeout="3000"
+            :multi-line="true"
+            v-model="message.visible"
+          >
+            {{ message.message }}
+          </v-snackbar>
         </v-container>
       </div>
     </div>
@@ -158,8 +210,63 @@ export default {
     ...mapGetters({
       users: 'barUsers/users',
       filter: 'barUsers/filter',
-      loading: 'barUsers/usersLoading'
+      loading: 'barUsers/usersLoading',
-    })
+      messages: 'barUsers/messages',
+      menu: 'barUsers/menu'
+    }),
+    under5minutes() {
+      return now => {
+        var actual = new Date()
+        var zero = new Date(0)
+        var date = new Date(actual - now)
+        if (
+          date.getFullYear() === zero.getFullYear() &&
+          date.getMonth() === zero.getMonth() &&
+          date.getDate() === zero.getDate()
+        ) {
+          if (date.getMinutes() < 6) {
+            return true
+          }
+        }
+        return false
+      }
+    },
+    now() {
+      return now => {
+        var actual = new Date()
+        var zero = new Date(0)
+        var date = new Date(actual - now)
+        console.log(date)
+        if (date.getFullYear() === zero.getFullYear()) {
+          if (date.getMonth() === zero.getMonth()) {
+            if (date.getDate() === zero.getDate()) {
+              if (date.getHours() === zero.getDate()) {
+                if (date.getMinutes() < 1) {
+                  return 'vor ' + date.getSeconds() + ' Sekunden'
+                } else if (date.getMinutes() < 10) {
+                  return 'vor ' + date.getMinutes() + ' Minuten'
+                } else {
+                  return now.getHours() + ':' + now.getMinutes()
+                }
+              } else {
+                return now.getHours() + ':' + now.getMinutes()
+              }
+            }
+          }
+        }
+        return (
+          now.getDate() +
+          '.' +
+          now.getMonth() +
+          '.' +
+          now.getFullYear() +
+          ' ' +
+          now.getHours() +
+          ':' +
+          now.getMinutes()
+        )
+      }
+    }
   }
 }
 </script>

src/components/baruser/SearchBar.vue

@@ -16,10 +16,13 @@
           :search-input.sync="filter"
         >
           <template v-slot:prepend-inner>
-            <v-icon>{{search_person}}</v-icon>
+            <v-icon>{{ search_person }}</v-icon>
           </template>
         </v-autocomplete>
         <v-btn text @click="addUser">Hinzufügen</v-btn>
+        <v-btn @click="clickMenu" icon>
+          <v-icon>{{ menuIcon }}</v-icon>
+        </v-btn>
       </v-toolbar-items>
     </v-toolbar>
   </div>
@@ -27,7 +30,7 @@
 
 <script>
 import { mapGetters, mapActions } from 'vuex'
-import { mdiAccountSearch } from '@mdi/js'
+import { mdiAccountSearch, mdiMenu } from '@mdi/js'
 
 export default {
   name: 'SearchBar',
@@ -36,7 +39,8 @@ export default {
     return {
       user: null,
       filter: '',
-      search_person: mdiAccountSearch
+      search_person: mdiAccountSearch,
+      menuIcon: mdiMenu
     }
   },
   created() {
@@ -46,17 +50,24 @@ export default {
     ...mapActions({
       getAllUsers: 'barUsers/getAllUsers',
       addCreditList: 'barUsers/addCreditList',
-      setFilter: 'barUsers/setFilter'
+      setFilter: 'barUsers/setFilter',
+      activateMenu: 'barUsers/activateMenu',
+      deactivateMenu: 'barUsers/deactivateMenu'
     }),
     addUser() {
       this.addCreditList(this.user)
       this.user = null
+    },
+    clickMenu() {
+      if (this.menu) this.deactivateMenu()
+      else this.activateMenu()
     }
   },
   computed: {
     ...mapGetters({
       allUsers: 'barUsers/allUsers',
-      loading: 'barUsers/allUsersLoading'
+      loading: 'barUsers/allUsersLoading',
+      menu: 'barUsers/menu'
     })
   },
   watch: {

src/main.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
-import vuetify from './plugins/vuetify';
+import vuetify from './plugins/vuetify'
 
 Vue.config.productionTip = false
 

src/plugins/routes.js

@@ -1,7 +1,7 @@
 //const main = 'https://192.168.5.128:5000/'
-const main = 'http://localhost:5000/'
+//const main = 'http://localhost:5000/'
 //const main = 'http://192.168.5.118:5000/'
-//const main = 'https://groeger-clan.duckdns.org:5000/'
+const main = 'https://groeger-clan.duckdns.org:5000/'
 
 const url = {
   login: main + 'login',

src/router/index.js

@@ -15,8 +15,8 @@ import FinanzerNavigation from '../components/finanzer/FinanzerNavigation'
 import Overview from '../components/finanzer/Overview'
 import User from '../components/finanzer/User'
 import ServiceManagement from '../components/vorstand/ServiceManagement'
-import Config from "@/components/user/Config";
+import Config from '@/components/user/Config'
-import Jobs from "@/components/user/Jobs";
+import Jobs from '@/components/user/Jobs'
 
 Vue.use(VueRouter)
 

src/store/modules/barUsers.js

@@ -7,7 +7,8 @@ const state = {
   filter: '',
   usersLoading: false,
   allUsersLoading: false,
-  message: ''
+  message: [],
+  menu: false
 }
 
 const mutations = {
@@ -71,6 +72,38 @@ const mutations = {
   },
   setAllUsersLoading: (state, value) => {
     state.allUsersLoading = value
+  },
+  addMessage: (state, data) => {
+    var message = ''
+    if (data.error) {
+      message =
+        'Konnte ' +
+        (data.amount / 100).toFixed(2) +
+        '€ zu ' +
+        data.user.firstname +
+        ' ' +
+        data.user.lastname +
+        ' hinzufügen.'
+    } else {
+      message =
+        '' +
+        (data.amount / 100).toFixed(2) +
+        '€ wurde zu ' +
+        data.user.firstname +
+        ' ' +
+        data.user.lastname +
+        ' hinzugefügt.'
+    }
+    state.message.unshift({
+      message: message,
+      error: data.error,
+      visible: true,
+      date: new Date()
+    })
+    console.log(state.message)
+  },
+  setMenu: (state, value) => {
+    state.menu = value
   }
 }
 
@@ -98,7 +131,17 @@ const actions = {
         { headers: { Token: rootState.login.user.accessToken } }
       )
       commit('setUsers', { [response.data.username]: response.data })
+      commit('addMessage', {
+        user: data.user,
+        amount: data.amount,
+        error: false
+      })
     } catch (e) {
+      commit('addMessage', {
+        user: data.user,
+        amount: data.amount,
+        error: true
+      })
       if (e.response)
         if (e.response.status === 401) dispatch('logout', null, { root: true })
     }
@@ -136,6 +179,12 @@ const actions = {
   },
   setFilter({ commit }, data) {
     commit('setFilter', data)
+  },
+  activateMenu({ commit }) {
+    commit('setMenu', true)
+  },
+  deactivateMenu({ commit }) {
+    commit('setMenu', false)
   }
 }
 
@@ -154,6 +203,12 @@ const getters = {
   },
   allUsersLoading: state => {
     return state.allUsersLoading
+  },
+  messages: state => {
+    return state.message
+  },
+  menu: state => {
+    return state.menu
   }
 }