From cc7778b55d1baaa7be2d9440480e0fb27bb9a930 Mon Sep 17 00:00:00 2001
From: ogerly <landmatrosen@googlemail.com>
Date: Thu, 8 Jul 2021 15:55:32 +0200
Subject: [PATCH] fix style decay startblick

---
 frontend/src/components/DecayInformation.vue  | 116 +++++++++++++-----
 frontend/src/locales/de.json                  |  22 +++-
 frontend/src/locales/en.json                  |  20 ++-
 .../AccountOverview/GddTransactionList.vue    |  64 +++++++---
 4 files changed, 174 insertions(+), 48 deletions(-)

diff --git a/frontend/src/components/DecayInformation.vue b/frontend/src/components/DecayInformation.vue
index 84b9a1310..c18bfdb3c 100644
--- a/frontend/src/components/DecayInformation.vue
+++ b/frontend/src/components/DecayInformation.vue
@@ -1,34 +1,90 @@
 <template>
   <div v-if="decay">
     <span v-if="decaytyp === 'short'">
-      <small>{{ decay ? ' ' + decay.balance : '' }}</small>
+      <small>{{ decay ? ' ' + decay.balance + ' ' + decay_start_block_text_short : '' }}</small>
     </span>
 
-    <div v-else class="pl-6 pr-6 pt-3" style="background-color: #f5365c0d">
+    <div v-if="decaytyp === 'new'">
+      <b-list-group style="border: 0px">
+        <b-list-group-item style="border: 0px; background-color: #f1f1f1">
+          <div class="d-flex">
+            <div style="width: 40%" class="text-right pr-3 mr-2">
+              {{ $t('decay.calculation_decay') }}
+              <b-icon icon="droplet-half" height="12" class="mb-2" />
+            </div>
+            <div style="width: 60%"></div>
+          </div>
+
+          <div class="d-flex">
+            <div style="width: 40%" class="text-right pr-3 mr-2">
+              {{ $t('decay.last_transaction') }}
+            </div>
+            <div style="width: 60%">
+              <div v-if="decay.decay_start_block > 0">
+                <div class="display-4">{{ $t('decay.Starting_block_decay') }}</div>
+                <div>
+                  {{ $t('decay.decay_introduced') }} :
+                  {{ $d($moment.unix(decay.decay_start), 'long') }}
+                </div>
+              </div>
+              <div>
+                <span>{{ $d($moment.unix(decay.decay_start), 'long') }} Uhr</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="d-flex">
+            <div style="width: 40%" class="text-right pr-3 mr-2">
+              {{ $t('decay.past_time') }}
+            </div>
+            <div style="width: 60%">
+              <div v-if="decay.decay_start_block > 0">{{ $t('decay.since_introduction') }}</div>
+              <i>{{ getDuration(decay.decay_end, decay.decay_start) }}</i>
+              <span v-if="this.duration != {}">
+                <b v-if="duration.years > 0">{{ duration.years }} {{ $t('decay.year') }},</b>
+                <b v-if="duration.months > 0">{{ duration.months }} {{ $t('decay.months') }},</b>
+                <b v-if="duration.days > 0">{{ duration.days }} {{ $t('decay.days') }},</b>
+                <b v-if="duration.hours > 0">{{ duration.hours }} {{ $t('decay.hours') }},</b>
+                <b v-if="duration.minutes > 0">{{ duration.minutes }} {{ $t('decay.minutes') }},</b>
+                <b v-if="duration.seconds > 0">{{ duration.seconds }} {{ $t('decay.seconds') }}</b>
+              </span>
+            </div>
+          </div>
+        </b-list-group-item>
+      </b-list-group>
+    </div>
+
+    <div v-if="decaytyp === 'long'" class="pl-6 pr-6 pt-3 pb-3" style="background-color: #f5365c0d">
       <b-icon icon="droplet-half" class="mr-2 display-4" />
-      <i>Berechnung der Vergänglichkeit</i>
-
+      <i>{{ $t('decay.calculation_decay') }}</i>
       <br />
       <br />
-      Letzte Transaktion:
-      <span>{{ $d($moment.unix(decay.decay_start), 'long') }} Uhr</span>
-
+      <div v-if="decay.decay_start_block > 0">
+        <div class="display-3">{{ $t('decay.Starting_block_decay') }} :</div>
+        <div>
+          {{ $t('decay.decay_introduced') }} : {{ $d($moment.unix(decay.decay_start), 'long') }}
+        </div>
+      </div>
+      <div v-else>
+        <div>{{ $t('decay.last_transaction') }}:</div>
+        <span>{{ $d($moment.unix(decay.decay_start), 'long') }} Uhr</span>
+      </div>
       <br />
-      Vergangene Zeit:
+      {{ $t('decay.past_time') }}
+      <span v-if="decay.decay_start_block > 0">{{ $t('decay.since_introduction') }}</span>
+      :
       <i>{{ getDuration(decay.decay_end, decay.decay_start) }}</i>
       <span 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.seconds > 0">{{ duration.seconds }} Sekunden</b>
+        <b v-if="duration.years > 0">{{ duration.years }} {{ $t('decay.year') }},</b>
+        <b v-if="duration.months > 0">{{ duration.months }} {{ $t('decay.months') }},</b>
+        <b v-if="duration.days > 0">{{ duration.days }} {{ $t('decay.days') }},</b>
+        <b v-if="duration.hours > 0">{{ duration.hours }} {{ $t('decay.hours') }},</b>
+        <b v-if="duration.minutes > 0">{{ duration.minutes }} {{ $t('decay.minutes') }},</b>
+        <b v-if="duration.seconds > 0">{{ duration.seconds }} {{ $t('decay.seconds') }}</b>
       </span>
       <br />
-      Vergänglichkeit:
+      {{ $t('decay.decay') }}:
       <b>{{ decay ? decay.balance + ' GDD' : '' }}</b>
-      <hr />
-      <i>{{ decay.decay_duration }}</i>
     </div>
   </div>
 </template>
@@ -41,6 +97,7 @@ export default {
       decay_duration: '',
       decay_start: 0,
       decay_end: 0,
+      decay_start_block: 0,
     },
     decaytyp: '',
   },
@@ -50,22 +107,21 @@ export default {
       b: 0,
       duration: {},
       diff: {},
+      decay_start_block_text_short: this.decay.decay_start_block
+        ? ' - Startblock Decay am: ' + this.$d(this.$moment.unix(this.decay.decay_start_block))
+        : '',
     }
   },
-  created() {
-    console.log("start", start)
-  },
   methods: {
-    getDuration(start, end) {    
-      console.log("start", start)
-      console.log("end", 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   
-     
+    getDuration(start, end) {
+      // console.log("start", start)
+      // console.log("end", 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
     },
   },
 }
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index 3c8098346..1781ea1cd 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -18,9 +18,25 @@
     "de": "Deutsch",
     "en": "English"
   },
-  "decay": "Vergänglichkeit",
-  "resieve": "",
-  
+  "decay": {
+    "decay": "Vergänglichkeit",
+    "decay_since_last_transaction":"Vergänglichkeit seit der letzten Transaktion",
+    "calculation_decay":"Berechnung der Vergänglichkeit",
+    "Starting_block_decay":"Startblock Vergänglichkeit",
+    "decay_introduced":"Die Vergänglichkeit wurde Eingeführt am",
+    "last_transaction":"Letzte Transaktion",
+    "past_time":"Vergangene Zeit",
+    "since_introduction":"seit Einführung der Vergänglichkeit",
+    "year":"Jahre",
+    "months":"Monate",
+    "days":"Tage",
+    "hours":"Stunden",
+    "minutes":"Minuten",
+    "seconds":"Sekunden",
+    "received":"empfangen",
+    "sent":"gesendet",
+    "created":"geschöpft"
+  }, 
   "form": {
     "cancel": "Abbrechen",
     "reset": "Zurücksetzen",
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 987605bd8..29a9b49c1 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -18,7 +18,25 @@
     "de": "Deutsch",
     "en": "English"
   },
-  "decay": "Decay",
+  "decay": {
+    "decay": "Decay",
+    "decay_since_last_transaction":"Decay since the last transaction",
+    "calculation_decay": "Calculation of Decay",
+    "Starting_block_decay": "Starting Block Decay",
+    "decay_introduced": "Decay was Introduced on",
+    "last_transaction": "Last transaction:",
+    "past_time": "Past time",
+    "since_introduction": "Since the introduction of Decay",
+    "year": "Years",
+    "months": "Months",
+    "days": "Days",
+    "hours": "Hours",
+    "minutes": "Minutes",
+    "seconds": "Seconds",
+    "received":"received",
+    "sent":"sent",
+    "created":"created"
+  },
   "form": {
     "cancel":"Cancel",
     "reset": "Reset",
diff --git a/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue b/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue
index 100385d9b..8524a87bb 100644
--- a/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue
+++ b/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue
@@ -6,11 +6,13 @@
         v-bind:key="item.transaction_id"
         :style="item.type === 'decay' ? 'background-color:#f1e0ae3d' : ''"
       >
+        <!-- ROW Start -->
         <div class="d-flex gdd-transaction-list-item" v-b-toggle="'a' + item.date + ''">
+          <!-- ICON -->
           <div style="width: 8%">
             <b-icon :icon="getProperties(item).icon" :class="getProperties(item).class" />
           </div>
-
+          <!-- Text Links -->
           <div class="font1_2em pr-2 text-right" style="width: 32%">
             <span>{{ getProperties(item).operator }}</span>
             <small v-if="item.type === 'decay'">{{ $n(item.balance, 'decimal') }}</small>
@@ -22,43 +24,75 @@
               <b-icon v-if="item.type != 'decay'" icon="droplet-half" height="15" class="mb-3" />
             </div>
           </div>
-
+          <!-- Text Rechts -->
           <div class="font1_2em text-left pl-2" style="width: 55%">
             {{ item.name ? item.name : '' }}
             <span v-if="item.type === 'decay'">
-              <small>Vergänglichkeit seit der letzten Transaktion</small>
+              <small>{{ $t('decay.decay_since_last_transaction') }}</small>
             </span>
             <div v-if="item.date" class="text-sm">{{ $d($moment(item.date), 'long') }}</div>
             <decay-information
-              :decay="getTransaction(item.transaction_id).decay"
               decaytyp="short"
+              :decay="getTransaction(item.transaction_id).decay"
             />
           </div>
-
+          <!-- Collaps Toggle Button -->
           <div v-if="item.type != 'decay'" class="text-right" style="width: 5%">
             <b-button class="btn-sm">
               <b>i</b>
             </b-button>
           </div>
         </div>
-
+        <!-- ROW End -->
+        <!-- Collaps Start -->
         <b-collapse v-if="item.type != 'decay'" :id="'a' + item.date + ''">
+          <b-list-group v-if="item.type === 'receive' || item.type === 'send'">
+            <b-list-group-item style="border: 0px; background-color: #f1f1f1">
+              <div class="d-flex">
+                <div style="width: 40%" class="text-right pr-3 mr-2">
+                  {{ item.type === 'receive' ? 'von:' : 'an:' }}
+                </div>
+                <div style="width: 60%">
+                  {{ item.name }}
+                  <b-avatar class="mr-3"></b-avatar>
+                </div>
+              </div>
+              <div class="d-flex">
+                <div style="width: 40%" class="text-right pr-3 mr-2">
+                  {{ item.type === 'receive' ? 'Nachricht:' : 'Nachricht:' }}
+                </div>
+                <div style="width: 60%">
+                  {{ item.memo }}
+                </div>
+              </div>
+            </b-list-group-item>
+          </b-list-group>
+          <b-list-group v-if="item.type === 'creation'">
+            <b-list-group-item style="border: 0px">
+              <div class="d-flex">
+                <div style="width: 40%" class="text-right pr-3 mr-2">Schöpfung</div>
+                <div style="width: 60%">Aus der Community</div>
+              </div>
+            </b-list-group-item>
+          </b-list-group>
+          <decay-information decaytyp="new" :decay="getTransaction(item.transaction_id).decay" />
+          <!--
           <b-card>
             <b-card-title>
               <div class="display-4" v-if="item.type === 'receive' || item.type === 'send'">
                 <b-icon :icon="getProperties(item).icon" :class="getProperties(item).class" />
 
-                {{ item.type === 'receive' ? 'empfangen:' : 'gesendet:' }}
+                {{ item.type === 'receive' ? $t('decay.received') : $t('decay.sent') }}
               </div>
               <div class="display-4" v-if="item.type === 'creation'">
                 <b-icon :icon="getProperties(item).icon" :class="getProperties(item).class" />
 
-                {{ item.type === 'creation' ? 'geschöpft:' : '' }}
+                {{ item.type === 'creation' ? $t('decay.created') : '' }}
               </div>
             </b-card-title>
             <b-card-body>
               <p class="display-2">{{ $n(item.balance, 'decimal') }} GDD</p>
-
+              <! -- Card receive and send -- >
               <div v-if="item.type != 'creation'">
                 <div>am:</div>
 
@@ -86,6 +120,7 @@
                   </b-list-group-item>
                 </b-list-group>
               </div>
+              <! -- Card Creation -- >
               <div v-else>
                 <div>Dein Eintrag aus der Community wurde bestätigt.</div>
 
@@ -114,13 +149,14 @@
                 <div>{{ $n(item.balance, 'decimal') }} GDD geschöpft</div>
               </div>
 
-              <decay-information
-                :decay="getTransaction(item.transaction_id).decay"
-                decay_typ="short"
+              <decay-information decaytyp="long"
+                :decay="getTransaction(item.transaction_id).decay"                
               />
             </b-card-body>
           </b-card>
+          -->
         </b-collapse>
+        <!-- Collaps End -->
       </b-list-group-item>
       <pagination-buttons
         v-if="showPagination && transactionCount > pageSize"
@@ -158,6 +194,7 @@ export default {
   data() {
     return {
       currentPage: 1,
+      startDecay: 0,
     }
   },
   props: {
@@ -188,7 +225,6 @@ export default {
     getTransaction(id) {
       return this.transactions.find((t) => t.transaction_id === id)
     },
-
     updateTransactions() {
       this.$emit('update-transactions', {
         firstPage: this.currentPage,
@@ -224,4 +260,4 @@ export default {
   padding-left: 0px;
   padding-right: 0px;
 }
-</style>
\ No newline at end of file
+</style>