From c2ca3927bcb0a3950c28185dbfc91c7559a154b3 Mon Sep 17 00:00:00 2001
From: ogerly <landmatrosen@googlemail.com>
Date: Tue, 6 Jul 2021 16:02:04 +0200
Subject: [PATCH] style decay fix

---
 frontend/src/components/DecayInformation.vue  |  66 +++++------
 .../AccountOverview/GddTransactionList.vue    | 108 ++++++++++++++----
 2 files changed, 117 insertions(+), 57 deletions(-)

diff --git a/frontend/src/components/DecayInformation.vue b/frontend/src/components/DecayInformation.vue
index 4bd5d31be..4035bad3c 100644
--- a/frontend/src/components/DecayInformation.vue
+++ b/frontend/src/components/DecayInformation.vue
@@ -1,40 +1,34 @@
 <template>
   <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>
+    <span v-if="decaytyp === 'short'">
+      <small>{{ decay ? ' ' + decay.balance : '' }}</small>
+    </span>
+
+    <div v-else class="pl-6 pr-6 pt-3" style="background-color: #f5365c0d">
+      <b-icon icon="droplet-half" class="mr-2 display-4" />
+      <i>Berechnung der Vergänglichkeit</i>
+
+      <br />
+      <br />
+      Letzte Transaktion:
+      <span>{{ $d($moment.unix(decay.decay_start), 'long') }} Uhr</span>
+
+      <br />
+      Vergangene Zeit:
+      <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>
+      </span>
+      <br />
+      Vergänglichkeit:
+      <b>{{ decay ? decay.balance + ' GDD' : '' }}</b>
+      <hr />
+      <i>{{ decay.decay_duration }}</i>
     </div>
   </div>
 </template>
@@ -48,7 +42,7 @@ export default {
       decay_start: 0,
       decay_end: 0,
     },
-    form: '',
+    decaytyp: '',
   },
   data() {
     return {
diff --git a/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue b/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue
index be0ccf87d..3c93e449b 100644
--- a/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue
+++ b/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue
@@ -4,54 +4,120 @@
       <b-list-group-item
         v-for="item in transactions"
         v-bind:key="item.transaction_id"
-        style="background-color: #ebebeba3 !important"
+        :style="item.type === 'decay' ? 'background-color:#f1e0ae3d' : ''"
       >
         <div class="d-flex gdd-transaction-list-item" v-b-toggle="'a' + item.date + ''">
           <div style="width: 8%">
             <b-icon :icon="getProperties(item).icon" :class="getProperties(item).class" />
           </div>
+
           <div class="font1_2em pr-2 text-right" style="width: 32%">
             <span>{{ getProperties(item).operator }}</span>
-            {{ $n(item.balance, 'decimal') }}
+            <small v-if="item.type === 'decay'">{{ $n(item.balance, 'decimal') }}</small>
+
+            <span v-else>{{ $n(item.balance, 'decimal') }}</span>
+
+            <div v-if="getTransaction(item.transaction_id).decay">
+              <br />
+              <b-icon v-if="item.type != 'decay'" icon="droplet-half" height="15" class="mb-3" />
+            </div>
           </div>
+
           <div class="font1_2em text-left pl-2" style="width: 55%">
-            {{ item.name ? item.name : $t('decay') }}
+            {{ item.name ? item.name : '' }}
+            <span v-if="item.type === 'decay'">
+              <small>Vergänglichkeit seit der letzten Transaktion</small>
+            </span>
             <div v-if="item.date" class="text-sm">{{ $d($moment(item.date), 'long') }}</div>
-            <!-- <p>{{ item.decay }}</p> -->
-            <decay-information :decay="getTransaction(item.transaction_id).decay" form="short" />
+            <decay-information
+              :decay="getTransaction(item.transaction_id).decay"
+              decaytyp="short"
+            />
           </div>
+
           <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 v-if="item.type != 'decay'" :id="'a' + item.date + ''" class="mt-2">
+
+        <b-collapse v-if="item.type != 'decay'" :id="'a' + item.date + ''">
           <b-card>
             <b-card-title>
-              <div class="display-4">
+              <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:' }}
               </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:' : '' }}
+              </div>
             </b-card-title>
             <b-card-body>
               <p class="display-2">{{ $n(item.balance, 'decimal') }} GDD</p>
 
-              <div>
+              <div v-if="item.type != 'creation'">
                 <div>am:</div>
-                <span class="display-4">{{ $d($moment(item.date), 'long') }}</span>
-              </div>
-              <div>
-                <div>{{ item.type === 'receive' ? 'von:' : 'an:' }}</div>
-                <span class="display-4">{{ item.name }}</span>
-              </div>
-              <div class="display-5">
-                {{
-                  item.type === 'receive' ? 'Nachricht vom Absender:' : 'Nachricht an Empfänger:'
-                }}
-              </div>
-              <div class="display-4">{{ item.memo }}</div>
 
-              <decay-information :decay="getTransaction(item.transaction_id).decay" form="long" />
+                <b-list-group style="min-width: 300px">
+                  <b-list-group-item class="d-flex align-items-center">
+                    <b-icon icon="clock" class="mr-3" />
+                    <span>{{ $d($moment(item.date), 'long') }}</span>
+                  </b-list-group-item>
+                  <div>{{ item.type === 'receive' ? 'von:' : 'an:' }}</div>
+                  <b-list-group-item class="d-flex align-items-center">
+                    <b-avatar class="mr-3"></b-avatar>
+                    <span>{{ item.name }}</span>
+                    <b-badge>5</b-badge>
+                  </b-list-group-item>
+                </b-list-group>
+                <div>
+                  {{
+                    item.type === 'receive' ? 'Nachricht vom Absender:' : 'Nachricht an Empfänger:'
+                  }}
+                </div>
+                <b-list-group>
+                  <b-list-group-item class="d-flex align-items-center">
+                    <b-icon icon="card-text" class="mr-3" />
+                    <span>{{ item.memo }}</span>
+                  </b-list-group-item>
+                </b-list-group>
+              </div>
+              <div v-else>
+                <div>Dein Eintrag aus der Community wurde bestätigt.</div>
+
+                <div class="mt-3">
+                  <b-card
+                    title="Hilfe bei Gartenarbeit"
+                    img-src="https://picsum.photos/600/300/?image=25"
+                    img-alt="Image"
+                    img-top
+                    tag="article"
+                    style="max-width: 30rem"
+                    class="mb-2"
+                  >
+                    <b-card-text>
+                      5 Stunden hilfe bei Gartenarbeit. Meine 80 jährige Nachbarin kann zur Zeit
+                      nicht in Ihrem Garten arbeiten.
+                    </b-card-text>
+
+                    <b-button href="#" variant="primary">ansehen</b-button>
+                  </b-card>
+                </div>
+
+                <hr />
+                Deinem Konto wurden am
+                <span>{{ $d($moment(item.date), 'long') }}</span>
+                <div>{{ $n(item.balance, 'decimal') }} GDD geschöpft</div>
+              </div>
+
+              <decay-information
+                :decay="getTransaction(item.transaction_id).decay"
+                decay_typ="short"
+              />
             </b-card-body>
           </b-card>
         </b-collapse>