From 16541d40c67e79879df7b388d1b01be7a2007fc5 Mon Sep 17 00:00:00 2001
From: fiatjaf <fiatjaf@alhur.es>
Date: Mon, 5 Oct 2020 22:37:40 -0300
Subject: [PATCH] show more data in txinfo modal and fee on main table.

- also center-align icons in main table.
- and use "x time ago" instead of raw dates by default in main table
  (raw date is accessible on a tooltip, on the modal and on the CSV export).
---
 lnbits/core/static/js/wallet.js        |  8 ++-
 lnbits/core/templates/core/wallet.html | 73 ++++++++++++++------------
 lnbits/static/js/base.js               |  3 +-
 lnbits/static/js/components.js         | 30 ++++++++++-
 lnbits/static/scss/base.scss           |  4 ++
 5 files changed, 80 insertions(+), 38 deletions(-)

diff --git a/lnbits/core/static/js/wallet.js b/lnbits/core/static/js/wallet.js
index ddd3ad1cf..88181961e 100644
--- a/lnbits/core/static/js/wallet.js
+++ b/lnbits/core/static/js/wallet.js
@@ -1,4 +1,4 @@
-/* globals decode, Vue, VueQrcodeReader, VueQrcode, Quasar, LNbits, _, EventHub, Chart */
+/* globals moment, decode, Vue, VueQrcodeReader, VueQrcode, Quasar, LNbits, _, EventHub, Chart */
 
 Vue.component(VueQrcode.name, VueQrcode)
 Vue.use(VueQrcodeReader)
@@ -162,6 +162,12 @@ new Vue({
             label: 'Amount (sat)',
             field: 'sat',
             sortable: true
+          },
+          {
+            name: 'fee',
+            align: 'right',
+            label: 'Fee (msat)',
+            field: 'fee'
           }
         ],
         pagination: {
diff --git a/lnbits/core/templates/core/wallet.html b/lnbits/core/templates/core/wallet.html
index 48a812409..5d6204672 100644
--- a/lnbits/core/templates/core/wallet.html
+++ b/lnbits/core/templates/core/wallet.html
@@ -114,50 +114,55 @@
                 {{ props.row.memo }}
               </q-td>
               <q-td auto-width key="date" :props="props">
-                {{ props.row.date }}
+                <q-tooltip>{{ props.row.date }}</q-tooltip>
+                {{ props.row.dateFrom }}
               </q-td>
               <q-td auto-width key="sat" :props="props">
                 {{ props.row.fsat }}
               </q-td>
+              <q-td auto-width key="sat" :props="props">
+                {{ props.row.fee }}
+              </q-td>
             </q-tr>
 
             <q-dialog v-model="props.expand" :props="props">
-              <q-card
-                v-if="props.row.amount > 0 && props.row.pending"
-                class="q-pa-lg q-pt-xl lnbits__dialog-card"
-              >
+              <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
                 <div class="text-center q-mb-lg">
-                  <a :href="'lightning:' + props.row.bolt11">
-                    <q-responsive :ratio="1" class="q-mx-xl">
-                      <qrcode
-                        :value="props.row.bolt11"
-                        :options="{width: 340}"
-                        class="rounded-borders"
-                      ></qrcode>
-                    </q-responsive>
-                  </a>
-                </div>
-                <div class="row q-mt-lg">
-                  <q-btn
-                    outline
-                    color="grey"
-                    @click="copyText(props.row.bolt11)"
-                    >Copy invoice</q-btn
-                  >
-                  <q-btn v-close-popup flat color="grey" class="q-ml-auto"
-                    >Close</q-btn
-                  >
-                </div>
-              </q-card>
-              <q-card v-else class="q-pa-lg q-pt-xl lnbits__dialog-card">
-                <div class="text-center q-mb-lg">
-                  <div v-if="props.row.isPaid && props.row.isIn">
+                  <div v-if="props.row.isIn && props.row.pending">
+                    <q-icon name="settings_ethernet" color="grey"></q-icon>
+                    Invoice waiting to be paid
+                    <lnbits-payment-details :payment="props.row"></lnbits-payment-details>
+                    <div v-if="props.row.bolt11" class="text-center q-mb-lg">
+                      <a :href="'lightning:' + props.row.bolt11">
+                        <q-responsive :ratio="1" class="q-mx-xl">
+                          <qrcode
+                            :value="props.row.bolt11"
+                            :options="{width: 340}"
+                            class="rounded-borders"
+                          ></qrcode>
+                        </q-responsive>
+                      </a>
+                    </div>
+                    <div class="row q-mt-lg">
+                      <q-btn
+                        outline
+                        color="grey"
+                        @click="copyText(props.row.bolt11)"
+                        >Copy invoice</q-btn
+                      >
+                      <q-btn v-close-popup flat color="grey" class="q-ml-auto"
+                        >Close</q-btn
+                      >
+                    </div>
+                  </div>
+                  <div v-else-if="props.row.isPaid && props.row.isIn">
                     <q-icon
                       size="18px"
                       :name="'call_received'"
                       :color="'green'"
                     ></q-icon>
                     Payment Received
+                    <lnbits-payment-details :payment="props.row"></lnbits-payment-details>
                   </div>
                   <div v-else-if="props.row.isPaid && props.row.isOut">
                     <q-icon
@@ -166,14 +171,12 @@
                       :color="'pink'"
                     ></q-icon>
                     Payment Sent
+                    <lnbits-payment-details :payment="props.row"></lnbits-payment-details>
                   </div>
-                  <div v-else>
+                  <div v-else-if="props.row.isOut && props.row.pending">
                     <q-icon name="settings_ethernet" color="grey"></q-icon>
                     Outgoing payment pending
-                  </div>
-                  <q-tooltip>Payment Hash</q-tooltip>
-                  <div class="text-wrap mono q-pt-sm text-body1">
-                    {{ props.row.payment_hash }}
+                    <lnbits-payment-details :payment="props.row"></lnbits-payment-details>
                   </div>
                 </div>
               </q-card>
diff --git a/lnbits/static/js/base.js b/lnbits/static/js/base.js
index e6c5615e5..abaec60c5 100644
--- a/lnbits/static/js/base.js
+++ b/lnbits/static/js/base.js
@@ -1,4 +1,4 @@
-/* globals Vue, EventHub, axios, Quasar, _ */
+/* globals moment, Vue, EventHub, axios, Quasar, _ */
 
 var LOCALE = 'en'
 
@@ -115,6 +115,7 @@ var LNbits = {
         new Date(obj.time * 1000),
         'YYYY-MM-DD HH:mm'
       )
+      obj.dateFrom = moment(obj.date).fromNow()
       obj.msat = obj.amount
       obj.sat = obj.msat / 1000
       obj.tag = obj.extra.tag
diff --git a/lnbits/static/js/components.js b/lnbits/static/js/components.js
index 1a484d8fa..d8048e3ca 100644
--- a/lnbits/static/js/components.js
+++ b/lnbits/static/js/components.js
@@ -1,4 +1,4 @@
-/* global Vue, LNbits, EventHub */
+/* global Vue, moment, LNbits, EventHub */
 
 Vue.component('lnbits-fsat', {
   props: {
@@ -174,3 +174,31 @@ Vue.component('lnbits-extension-list', {
     }
   }
 })
+
+Vue.component('lnbits-payment-details', {
+  props: ['payment'],
+  template: `
+    <div class="q-py-md" style="text-align: left">
+      <div class="row">
+        <div class="col-3"><b>Date</b>:</div>
+        <div class="col-9">{{ payment.date }} ({{ payment.dateFrom }})</div>
+      </div>
+      <div class="row">
+        <div class="col-3"><b>Description</b>:</div>
+        <div class="col-9">{{ payment.memo }}</div>
+      </div>
+      <div class="row">
+        <div class="col-3"><b>Amount</b>:</div>
+        <div class="col-9">{{ (payment.amount / 1000).toFixed(3) }} sat</div>
+      </div>
+      <div class="row">
+        <div class="col-3"><b>Fee</b>:</div>
+        <div class="col-9">{{ (payment.fee / 1000).toFixed(3) }} sat</div>
+      </div>
+      <div class="row">
+        <div class="col-3"><b>Payment hash</b>:</div>
+        <div class="col-9 text-wrap mono">{{ payment.payment_hash }}</div>
+      </div>
+    </div>
+  `
+})
diff --git a/lnbits/static/scss/base.scss b/lnbits/static/scss/base.scss
index 2af63bab3..a0a8d38ce 100644
--- a/lnbits/static/scss/base.scss
+++ b/lnbits/static/scss/base.scss
@@ -52,6 +52,10 @@ body.body--dark .q-field--error {
   width: 500px;
 }
 
+.lnbits__q-table__icon-td {
+  text-align: center;
+}
+
 .q-table--dense {
   th:first-child,
   td:first-child,