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

@@ -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: {

lnbits/core/templates/core/wallet.html

@@ -114,19 +114,25 @@
                 {{ 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
+              <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
-                v-if="props.row.amount > 0 && props.row.pending"
-                class="q-pa-lg q-pt-xl lnbits__dialog-card"
-              >
                 <div class="text-center q-mb-lg">
+                  <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
@@ -148,16 +154,15 @@
                         >Close</q-btn
                       >
                     </div>
-              </q-card>
+                  </div>
-              <q-card v-else class="q-pa-lg q-pt-xl lnbits__dialog-card">
+                  <div v-else-if="props.row.isPaid && props.row.isIn">
-                <div class="text-center q-mb-lg">
-                  <div v-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>
+                    <lnbits-payment-details :payment="props.row"></lnbits-payment-details>
-                  <q-tooltip>Payment Hash</q-tooltip>
-                  <div class="text-wrap mono q-pt-sm text-body1">
-                    {{ props.row.payment_hash }}
                   </div>
                 </div>
               </q-card>

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

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>
+  `
+})

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,