decay show moments duration

frontend/src/components/DecayInformation.vue

@@ -1,5 +1,42 @@
 <template>
-  <div></div>
+  <div v-if="decay">
+    <div>
+      <div v-if="form === 'short'">
+        <small>{{ decay ? ' ' + decay.balance + ' GDD' + ' ' + $t('decay') : '' }}</small>
+      </div>
+      <div v-else>
+        <hr />
+        <i>Berechnung der Vergänglichkeit</i>
+        <br />
+        <br />
+        Seit deiner letzten Buchungstransaktion (
+        <i>{{ $d($moment.unix(decay.decay_start), 'long') }} Uhr</i>
+        ) sind
+        <br />
+        <span>{{ getDuration(decay.decay_end, decay.decay_start) }}</span>
+        <div v-if="this.duration != {}">
+          <b v-if="duration.years > 0">{{ duration.years }} Jahre,</b>
+          <b v-if="duration.months > 0">{{ duration.months }} Monate,</b>
+          <b v-if="duration.days > 0">{{ duration.days }} Tage,</b>
+          <b v-if="duration.hours > 0">{{ duration.hours }} Stunden,</b>
+          <b v-if="duration.minutes > 0">{{ duration.minutes }} Minuten,</b>
+          <b v-if="duration.minutes > 0">{{ duration.minutes }} Sekunden</b>
+        </div>
+        vergangen. Das entspricht einer
+        <b>Vergänglichkeit</b>
+        von
+        <br />
+        <br />
+        <b>{{ decay ? decay.balance + ' GDD' : '' }}</b>
+        <br />
+        <br />
+        Die Vergänglichkeit wird automatisch mit jeder Transaktion auf oder von deinem Konto
+        berechnet und von deinen Gradidos automatisch abgezogen.
+        <hr />
+        <i>{{ decay.decay_duration }}</i>
+      </div>
+    </div>
+  </div>
 </template>
 <script>
 export default {
@@ -11,9 +48,25 @@ export default {
       decay_start: 0,
       decay_end: 0,
     },
+    form: '',
+  },
+  data() {
+    return {
+      a: 0,
+      b: 0,
+      duration: {},
+      diff: {},
+    }
+  },
+  methods: {
+    getDuration(start, end) {
+      this.a = new Date(start)
+      this.b = new Date(end)
+      this.a = this.$moment.unix(this.a)
+      this.b = this.$moment.unix(this.b)
+      this.diff = this.$moment.duration(this.a.diff(this.b))
+      this.duration = this.diff._data
     },
-  mounted() {
-    console.log(this.decay)
   },
 }
 </script>

frontend/src/locales/de.json

@@ -19,6 +19,8 @@
     "en": "English"
   },
   "decay": "Vergänglichkeit",
+  "resieve": "",
+  
   "form": {
     "cancel": "Abbrechen",
     "reset": "Zurücksetzen",

frontend/src/views/Layout/DashboardLayout_gdd.vue

@@ -128,7 +128,6 @@ export default {
       if (result.success) {
         this.GdtBalance = Number(result.result.data.gdtSum)
         this.transactions = result.result.data.transactions
-        console.log('this.transactions => ', this.transactions[1].decay.decay_start)
         this.balance = Number(result.result.data.decay)
         this.bookedBalance = Number(result.result.data.balance)
         this.transactionCount = result.result.data.count

frontend/src/views/Pages/AccountOverview/GddTransactionList.vue

@@ -18,16 +18,15 @@
             {{ item.name ? item.name : $t('decay') }}
             <div v-if="item.date" class="text-sm">{{ $d($moment(item.date), 'long') }}</div>
             <!-- <p>{{ item.decay }}</p> -->
-            <p>{{ getTransaction(item.transaction_id) }} GDD</p>
-            <p>{{ getTransaction(item.transaction_id).decay }} GDD</p>
+            <decay-information :decay="getTransaction(item.transaction_id).decay" form="short" />
           </div>
-          <div class="text-right" style="width: 5%">
+          <div v-if="item.type != 'decay'" class="text-right" style="width: 5%">
             <b-button class="btn-sm">
               <b>i</b>
             </b-button>
           </div>
         </div>
-        <b-collapse :id="'a' + item.date + ''" class="mt-2">
+        <b-collapse v-if="item.type != 'decay'" :id="'a' + item.date + ''" class="mt-2">
           <b-card>
             <b-card-title>
               <div class="display-4">
@@ -42,7 +41,7 @@
                 <span class="display-4">{{ $d($moment(item.date), 'long') }}</span>
               </div>
               <div>
-                <div>an:</div>
+                <div>{{ item.type === 'receive' ? 'von:' : 'an:' }}</div>
                 <span class="display-4">{{ item.name }}</span>
               </div>
               <div class="display-5">
@@ -51,31 +50,9 @@
                 }}
               </div>
               <div class="display-4">{{ item.memo }}</div>
-              <hr />
-              Seit deiner letzten Transaction sind
 
-              <div v-if="getTransaction(item.transaction_id).decay">
-                <decay-information :decay="getTransaction(item.transaction_id).decay" />
-              </div>
-
-              {{
-                getTransaction(item.transaction_id).decay
-                  ? getTransaction(item.transaction_id).decay.balance
-                  : 'missing'
-              }}
-              <!-- <p> {{ $moment.unix(getTransaction(item.transaction_id).descay_start).format('D.MM.YYYY - HH:mm:ss') }}</p>
-                   <p> {{ $moment.unix(getTransaction(item.transaction_id).decay_end).format('D.MM.YYYY - HH:mm:ss') }}</p> -->
-              <div>{{}} vergangen.</div>
-              <br />
-              <!-- <div>{{ getTransaction(item.id).balance }} Vergänglichkeit.</div> -->
+              <decay-information :decay="getTransaction(item.transaction_id).decay" form="long" />
             </b-card-body>
-
-            <b-button v-b-toggle="'collapse-1-inner' + item.date" variant="secondary">
-              {{ $t('transaction.more') }}
-            </b-button>
-            <b-collapse :id="'collapse-1-inner' + item.date" class="mt-2">
-              <b-card>{{ item }}</b-card>
-            </b-collapse>
           </b-card>
         </b-collapse>
       </b-list-group-item>