feat: change utils.formatDate and utils.formatTimestamp (#3583)

lnbits/static/js/components.js

@@ -749,24 +749,6 @@ window.app.component('lnbits-channel-balance', {
   `
 })
 
-window.app.component('lnbits-date', {
-  props: ['ts'],
-  computed: {
-    date() {
-      return LNbits.utils.formatDate(this.ts)
-    },
-    dateFrom() {
-      return moment.utc(this.date).local().fromNow()
-    }
-  },
-  template: `
-    <div>
-      <q-tooltip>{{ this.date }}</q-tooltip>
-      {{ this.dateFrom }}
-    </div>
-  `
-})
-
 window.app.component('lnbits-node-info', {
   props: ['info'],
   data() {

lnbits/static/js/components/admin/lnbits-admin-exchange-providers.js

@@ -124,7 +124,7 @@ window.app.component('lnbits-admin-exchange-providers', {
     },
     initExchangeChart(data) {
       const xValues = data.map(d =>
-        Quasar.date.formatDate(new Date(d.timestamp * 1000), 'HH:mm')
+        this.utils.formatTimestamp(d.timestamp, 'HH:mm')
       )
       const exchanges = [
         ...this.formData.lnbits_exchange_rate_providers,

lnbits/static/js/components/lnbits-payment-list.js

@@ -166,16 +166,14 @@ window.app.component('lnbits-payment-list', {
         fiat_currency: data.fiat_currency,
         labels: data.labels
       }
-      obj.date = moment.utc(data.created_at).local().format(window.dateFormat)
+      obj.date = this.utils.formatDate(data.created_at)
-      obj.dateFrom = moment.utc(data.created_at).local().fromNow()
+      obj.dateFrom = this.utils.formatDateFrom(data.created_at)
-      obj.expirydate = moment.utc(obj.expiry).local().format(window.dateFormat)
+      obj.expirydate = this.utils.formatDate(data.expiry)
-      obj.expirydateFrom = moment.utc(obj.expiry).local().fromNow()
+      obj.expirydateFrom = this.utils.formatDateFrom(data.expiry)
       obj.msat = obj.amount
       obj.sat = obj.msat / 1000
       obj.tag = obj.extra?.tag
-      obj.fsat = new Intl.NumberFormat(window.i18n.global.locale).format(
+      obj.fsat = this.utils.formatSat(obj.sat)
-        obj.sat
-      )
       obj.isIn = obj.amount > 0
       obj.isOut = obj.amount < 0
       obj.isPending = obj.status === 'pending'

lnbits/static/js/components/lnbits-wallet-paylinks.js

@@ -15,10 +15,6 @@ window.app.component('lnbits-wallet-paylinks', {
     this.storedPaylinks = this.g.wallet.storedPaylinks
   },
   methods: {
-    dateFromNow(unix) {
-      const date = new Date(unix * 1000)
-      return moment.utc(date).local().fromNow()
-    },
     updatePaylinks() {
       LNbits.api
         .request(

lnbits/static/js/init-app.js

@@ -89,6 +89,7 @@ window.app.mixin({
   data() {
     return {
       g: window.g,
+      utils: window._lnbitsUtils,
       ...WINDOW_SETTINGS
     }
   },

lnbits/static/js/pages/audit.js

@@ -106,9 +106,6 @@ window.PageAudit = {
   },
 
   methods: {
-    formatDate(dateString) {
-      return LNbits.utils.formatDateString(dateString)
-    },
     async fetchAudit(props) {
       try {
         const params = LNbits.utils.prepareFilterQuery(this.auditTable, props)

lnbits/static/js/pages/payments.js

@@ -256,9 +256,6 @@ window.PagePayments = {
       this.paymentDetails = payment
       return (this.showDetails = !this.showDetails)
     },
-    formatDate(dateString) {
-      return LNbits.utils.formatDateString(dateString)
-    },
     formatCurrency(amount, currency) {
       try {
         return LNbits.utils.formatCurrency(amount, currency)

lnbits/static/js/pages/users.js

@@ -176,9 +176,6 @@ window.PageUsers = {
   },
 
   methods: {
-    formatDate(date) {
-      return LNbits.utils.formatDateString(date)
-    },
     formatSat(value) {
       return LNbits.utils.formatSat(Math.floor(value / 1000))
     },

lnbits/static/js/utils.js

@@ -34,11 +34,23 @@ window._lnbitsUtils = {
     const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('')
     return hashHex
   },
-  formatDate(timestamp) {
+  formatTimestamp(timestamp, format = null) {
-    return Quasar.date.formatDate(new Date(timestamp * 1000), window.dateFormat)
+    format = format || window.dateFormat
+    return Quasar.date.formatDate(new Date(timestamp * 1000), format)
   },
-  formatDateString(isoDateString) {
+  formatDate(isoDateString, format = null) {
-    return Quasar.date.formatDate(new Date(isoDateString), window.dateFormat)
+    format = format || window.dateFormat
+    return Quasar.date.formatDate(new Date(isoDateString), format)
+  },
+  formatTimestampFrom(timestamp) {
+    return moment
+      .utc(timestamp * 1000)
+      .local()
+      .fromNow()
+  },
+  formatDateFrom(isoDateString) {
+    const timestampMs = new Date(isoDateString).getTime()
+    return moment.utc(timestampMs).local().fromNow()
   },
   formatCurrency(value, currency) {
     return new Intl.NumberFormat(window.i18n.global.locale, {

lnbits/static/js/windowMixin.js

@@ -77,12 +77,6 @@ window.windowMixin = {
         })
       }
     },
-    formatDate(date) {
-      return moment
-        .utc(date * 1000)
-        .local()
-        .fromNow()
-    },
     formatBalance(amount) {
       if (LNBITS_DENOMINATION != 'sats') {
         return LNbits.utils.formatCurrency(amount / 100, LNBITS_DENOMINATION)

lnbits/templates/components/lnbits-wallet-paylinks.vue

@@ -70,7 +70,7 @@
               <span v-text="$t('delete')"></span>
             </q-tooltip>
           </q-btn>
-          <span v-text="dateFromNow(paylink.last_used)"></span>
+          <span v-text="utils.formatTimestampFrom(paylink.last_used)"></span>
         </div>
       </q-card-section>
     </q-card>

lnbits/templates/pages/audit.vue

@@ -128,11 +128,12 @@
                     ></q-tooltip>
                   </q-btn>
 
-                  <span v-text="formatDate(props.row.created_at)"></span>
+                  <span v-text="utils.formatDate(props.row.created_at)"></span>
                   <q-tooltip v-if="props.row.delete_at">
                     <span
                       v-text="
-                        'Will be deleted at: ' + formatDate(props.row.delete_at)
+                        'Will be deleted at: ' +
+                        utils.formatDate(props.row.delete_at)
                       "
                     ></span>
                   </q-tooltip>

lnbits/templates/pages/node.vue

@@ -785,7 +785,16 @@
                           </template>
                           <template v-slot:body-cell-date="props">
                             <q-td auto-width key="date" :props="props">
-                              <lnbits-date :ts="props.row.time"></lnbits-date>
+                              <q-tooltip
+                                ><span
+                                  v-text="utils.formatTimestamp(props.row.time)"
+                                ></span
+                              ></q-tooltip>
+                              <span
+                                v-text="
+                                  utils.formatTimestampFrom(props.row.time)
+                                "
+                              ></span>
                             </q-td>
                           </template>
                           <template v-slot:body-cell-destination="props">
@@ -874,19 +883,39 @@
 
                           <template v-slot:body-cell-paid_at="props">
                             <q-td auto-width :props="props">
-                              <lnbits-date
+                              <div v-if="props.row.paid_at">
-                                v-if="props.row.paid_at"
+                                <q-tooltip
-                                :ts="props.row.paid_at"
+                                  ><span
-                              ></lnbits-date>
+                                    v-text="
+                                      utils.formatTimestamp(props.row.paid_at)
+                                    "
+                                  ></span
+                                ></q-tooltip>
+                                <span
+                                  v-text="
+                                    utils.formatTimestampFrom(props.row.paid_at)
+                                  "
+                                ></span>
+                              </div>
                             </q-td>
                           </template>
 
                           <template v-slot:body-cell-expiry="props">
                             <q-td auto-width :props="props">
-                              <lnbits-date
+                              <div v-if="props.row.expiry">
-                                v-if="props.row.expiry"
+                                <q-tooltip
-                                :ts="props.row.expiry"
+                                  ><span
-                              ></lnbits-date>
+                                    v-text="
+                                      utils.formatTimestamp(props.row.expiry)
+                                    "
+                                  ></span
+                                ></q-tooltip>
+                                <span
+                                  v-text="
+                                    utils.formatTimestampFrom(props.row.expiry)
+                                  "
+                                ></span>
+                              </div>
                             </q-td>
                           </template>
                         </q-table>

lnbits/templates/pages/payments.vue

@@ -336,7 +336,9 @@
                   <div v-else-if="col.name == 'created_at'">
                     <div>
                       <q-tooltip anchor="top middle">
-                        <span v-text="formatDate(props.row.created_at)"></span>
+                        <span
+                          v-text="utils.formatDate(props.row.created_at)"
+                        ></span>
                       </q-tooltip>
                       <span v-text="props.row.timeFrom"> </span>
                     </div>

lnbits/templates/pages/users.vue

@@ -677,7 +677,7 @@
 
                 <q-td v-text="props.row.transaction_count"></q-td>
 
-                <q-td v-text="formatDate(props.row.last_payment)"></q-td>
+                <q-td v-text="utils.formatDate(props.row.last_payment)"></q-td>
               </q-tr>
             </template>
           </q-table>