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/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,