finished ##200

user can storno them transaktion

src/components/user/AddAmount.vue

@@ -1,12 +1,59 @@
 <template>
-  <v-container >
-    <AddAmountSkeleton v-if="loading" />
-    <v-card v-if="!loading" :loading="addLoading">
-      <v-list-item>
-        <v-list-item-title class="title"
-          >{{ user.firstname }} {{ user.lastname }}</v-list-item-title
+  <v-container>
+    <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>
+    <AddAmountSkeleton v-if="loading" />
+    <v-navigation-drawer v-model="menu" right app clipped>
+      <v-list-item-group :key="componentRenderer">
+        <v-list-item inactive>
+          <v-list-item-title class="headline">
+            Verlauf
+          </v-list-item-title>
         </v-list-item>
+        <v-divider />
+        <div
+          v-for="message in messages"
+          three-line
+          :key="messages.indexOf(message)"
+        >
+          <v-list-item three-line inactive @click="storno(message)">
+            <v-list-item-content>
+              <v-progress-linear indeterminate v-if="message.loading" />
+              <v-list-item-title>{{ now(message.date) }}</v-list-item-title>
+              <v-list-item-subtitle>{{ message.message }}</v-list-item-subtitle>
+              <v-list-item-subtitle class="red--text" v-if="message.storno"
+                >STORNIERT!!!</v-list-item-subtitle
+              >
+              <v-list-item-action-text
+                >Klicken um zu Stornieren
+              </v-list-item-action-text>
+            </v-list-item-content>
+          </v-list-item>
+        </div>
+      </v-list-item-group>
+    </v-navigation-drawer>
+    <v-card v-if="!loading" :loading="addLoading">
+      <v-card-title>
+        {{ user.firstname }} {{ user.lastname }}
+        <v-spacer />
+        <v-btn @click="menu = !menu">test</v-btn>
+      </v-card-title>
       <v-card-text>
         <v-row>
           <v-col cols="10">
@@ -95,32 +142,69 @@
         >
       </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>
 </template>
 
 <script>
-  import {mapGetters, mapActions} from 'vuex'
-  import AddAmountSkeleton from './Skeleton/AddAmountSkeleton'
+import { mapGetters, mapActions } from 'vuex'
+import AddAmountSkeleton from './Skeleton/AddAmountSkeleton'
 export default {
   name: 'AddAmount',
   components: { AddAmountSkeleton },
   data() {
     return {
-      color: 'green accent-4'
+      color: 'green accent-4',
+      menu: false,
+      dialog: false,
+      componentRenderer: 0,
+      timer: ''
     }
   },
+  created() {
+    this.timer = setInterval(this.forceRender, 1000)
+  },
   methods: {
     ...mapActions({
-      addAmount: 'user/addAmount'
+      addAmount: 'user/addAmount',
+      commitStorno: 'user/storno'
     }),
+    forceRender() {
+      this.componentRenderer += 1
+    },
     getColor(value) {
       return value >= 0 ? 'title green--text' : 'title red--text'
     },
     getAllSum() {
-      console.log("getAllSum", this.user)
+      console.log('getAllSum', this.user)
       if (this.user)
-        return this.user.creditList[this.year][2].sum + this.user.creditList[this.year][1].last
+        return (
+          this.user.creditList[this.year][2].sum +
+          this.user.creditList[this.year][1].last
+        )
       return 0
+    },
+    storno(message) {
+      console.log('storno')
+      if (!message.error) {
+        if (!this.under5minutes(message.date)) this.dialog = true
+        else {
+          this.commitStorno({
+            amount: message.amount,
+            date: message.date
+          })
+        }
+      }
     }
   },
   computed: {
@@ -128,8 +212,78 @@ export default {
       user: 'user/user',
       year: 'user/year',
       loading: 'user/loading',
-      addLoading: 'user/addLoading'
+      addLoading: 'user/addLoading',
+      messages: 'user/messages'
     }),
+    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)
+        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() < 10 ? '0' : '') +
+                    now.getHours() +
+                    ':' +
+                    (now.getMinutes() < 10 ? '0' : '') +
+                    now.getMinutes()
+                  )
+                }
+              } else {
+                return (
+                  (now.getHours() < 10 ? '0' : '') +
+                  now.getHours() +
+                  ':' +
+                  (now.getMinutes() < 10 ? '0' : '') +
+                  now.getMinutes()
+                )
+              }
+            }
+          }
+        }
+        return (
+          now.getDate() +
+          '.' +
+          now.getMonth() +
+          '.' +
+          now.getFullYear() +
+          ' ' +
+          (now.getHours() < 10 ? '0' : '') +
+          now.getHours() +
+          ':' +
+          (now.getMinutes() < 10 ? '0' : '') +
+          now.getMinutes()
+        )
+      }
+    }
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
   }
 }
 </script>

src/plugins/routes.js

@@ -37,7 +37,8 @@ const url = {
     answerTransactJob: main + 'user/answerTransactJob',
     jobRequests: main + 'user/jobRequests',
     getTransactJobs: main + 'user/getTransactJobs',
-    deleteTransactJobs: main + 'user/deleteTransactJob'
+    deleteTransactJobs: main + 'user/deleteTransactJob',
+    storno: main + 'user/storno'
   },
   barU: {
     storno: main + 'bar/storno'

src/store/modules/user.js

@@ -7,7 +7,8 @@ const state = {
   loading: false,
   addLoading: false,
   error: '',
-  days: []
+  days: [],
+  message: []
 }
 
 const mutations = {
@@ -157,6 +158,48 @@ const mutations = {
         if (data.workers) state.days[day].workers = data.workers
       }
     }
+  },
+  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,
+      user: data.user,
+      error: data.error,
+      storno: false,
+      loading: false,
+      visible: true,
+      amount: data.amount,
+      date: new Date()
+    })
+    console.log(state.message)
+  },
+  updateMessage: (state, data) => {
+    var message = state.message.find(msg => {
+      return msg.date - data.date === 0 ? true : false
+    })
+    if (message) {
+      if (data.storno !== undefined) message.storno = data.storno
+      if (data.loading !== undefined) message.loading = data.loading
+    }
   }
 }
 
@@ -183,9 +226,20 @@ const actions = {
         { amount: amount },
         { headers: { Token: rootState.login.user.accessToken } }
       )
+      console.log(response.data)
       commit('setUser', response.data)
+      commit('addMessage', {
+        user: rootState.login.user,
+        amount: amount,
+        error: false
+      })
       commit('setError', '')
     } catch (e) {
+      commit('addMessage', {
+        user: rootState.login.user,
+        amount: amount,
+        error: true
+      })
       if (e.response)
         if (e.response.status === 401) dispatch('logout', null, { root: true })
     }
@@ -238,6 +292,25 @@ const actions = {
       console.log(e)
     }
     commit('setLoading', false)
+  },
+  async storno({ commit, rootState, dispatch }, data) {
+    commit('updateMessage', { date: data.date, loading: true })
+    try {
+      const response = await axios.post(
+        url.user.storno,
+        {
+          amount: data.amount
+        },
+        { headers: { Token: rootState.login.user.accessToken } }
+      )
+      console.log(response.data)
+      commit('setUser', response.data)
+      commit('updateMessage', { date: data.date, storno: true })
+    } catch (e) {
+      if (e.response)
+        if (e.response.status === 401) dispatch('logout', null, { root: true })
+    }
+    commit('updateMessage', { date: data.date, loading: false })
   }
 }
 
@@ -264,6 +337,9 @@ const getters = {
   },
   days: state => {
     return state.days
+  },
+  messages: state => {
+    return state.message
   }
 }