[CHORE] cleanup nodemanagement vue components (#1986)

lnbits-date component was a duplication.
moved all to the Vue.components into node.js
empty {% raw %} tags in public

lnbits/core/static/js/node.js

@@ -176,3 +176,93 @@ Vue.component('lnbits-node-info', {
     </div>
   `
 })
+
+Vue.component('lnbits-stat', {
+  props: ['title', 'amount', 'msat', 'btc'],
+  computed: {
+    value: function () {
+      return (
+        this.amount ??
+        (this.btc
+          ? LNbits.utils.formatSat(this.btc)
+          : LNbits.utils.formatMsat(this.msat))
+      )
+    }
+  },
+  template: `
+        <q-card>
+        <q-card-section>
+          <div class='text-overline text-primary'>
+            {{ title }}
+          </div>
+          <div>
+            <span class='text-h4 text-bold q-my-none'>{{ value }}</span>
+            <span class='text-h5' v-if='msat != undefined'>sats</span>
+            <span class='text-h5' v-if='btc != undefined'>BTC</span>
+          </div>
+        </q-card-section>
+        </q-card>
+      `
+})
+
+Vue.component('lnbits-channel-balance', {
+  props: ['balance', 'color'],
+  methods: {
+    formatMsat: function (msat) {
+      return LNbits.utils.formatMsat(msat)
+    }
+  },
+  template: `
+    <div>
+        <div class="row items-center justify-between">
+          <span class="text-weight-thin">
+            Local: {{ formatMsat(balance.local_msat) }}
+            sats
+          </span>
+          <span class="text-weight-thin">
+            Remote: {{ formatMsat(balance.remote_msat) }}
+            sats
+          </span>
+        </div>
+
+        <q-linear-progress
+          rounded
+          size="25px"
+          :value="balance.local_msat / balance.total_msat"
+          :color="color"
+          :style="\`color: #\${this.color}\`"
+        >
+          <div class="absolute-full flex flex-center">
+            <q-badge
+              color="white"
+              text-color="accent"
+              :label="formatMsat(balance.total_msat) + ' sats'"
+            >
+              {{ balance.alias }}
+            </q-badge>
+          </div>
+       </q-linear-progress>
+    </div>
+  `
+})
+
+Vue.component('lnbits-date', {
+  props: ['ts'],
+  computed: {
+    date: function () {
+      return Quasar.utils.date.formatDate(
+        new Date(this.ts * 1000),
+        'YYYY-MM-DD HH:mm'
+      )
+    },
+    dateFrom: function () {
+      return moment(this.date).fromNow()
+    }
+  },
+  template: `
+    <div>
+      <q-tooltip>{{ this.date }}</q-tooltip>
+      {{ this.dateFrom }}
+    </div>
+  `
+})

lnbits/core/templates/node/index.html

@@ -47,126 +47,6 @@
   Vue.component(VueQrcode.name, VueQrcode)
   Vue.use(VueQrcodeReader)
 
-  {% raw %}
-  Vue.component('lnbits-stat',
-    {
-      props: ['title', 'amount', 'msat', 'btc'],
-      computed: {
-        value: function () {
-          return this.amount ?? (this.btc ? LNbits.utils.formatSat(this.btc) : LNbits.utils.formatMsat(this.msat))
-        }
-      },
-      template: `
-        <q-card>
-        <q-card-section>
-          <div class='text-overline text-primary'>
-            {{ title }}
-          </div>
-          <div>
-            <span class='text-h4 text-bold q-my-none'>{{ value }}</span>
-            <span class='text-h5' v-if='msat != undefined'>sats</span>
-            <span class='text-h5' v-if='btc != undefined'>BTC</span>
-          </div>
-        </q-card-section>
-        </q-card>
-      `
-    }
-  )
-
-
-  Vue.component('lnbits-channel-balance',
-    {
-      props: ['balance', 'color'],
-      methods: {
-        formatMsat: function (msat) {
-          return LNbits.utils.formatMsat(msat)
-        }
-      },
-      template: `
-        <div>
-                        <div class="row items-center justify-between">
-                          <span class="text-weight-thin">
-                            Local: {{ formatMsat(balance.local_msat) }}
-                            sats
-                          </span>
-                          <span class="text-weight-thin">
-                            Remote: {{ formatMsat(balance.remote_msat) }}
-                            sats
-                          </span>
-                        </div>
-
-                        <q-linear-progress
-                          rounded
-                          size="25px"
-                          :value="balance.local_msat / balance.total_msat"
-                          :color="color"
-                          :style="\`color: #\${this.color}\`"
-                        >
-                          <div class="absolute-full flex flex-center">
-                            <q-badge
-                              color="white"
-                              text-color="accent"
-                              :label="formatMsat(balance.total_msat) + ' sats'"
-                            >
-                              {{ balance.alias }}
-                            </q-badge>
-                          </div>
-                        </q-linear-progress>
-        </div>
-      `
-    }
-  )
-
-  Vue.component('lnbits-date',
-    {
-      props: ['ts'],
-      computed: {
-        date: function () {
-          return Quasar.utils.date.formatDate(
-            new Date(this.ts * 1000),
-            'YYYY-MM-DD HH:mm'
-          )
-        },
-        dateFrom: function () {
-          return moment(this.date).fromNow()
-        }
-      },
-      template: `
-        <div>
-          <q-tooltip>{{ this.date }}</q-tooltip>
-          {{ this.dateFrom }}
-        </div>
-      `
-    }
-  )
-
-
-  Vue.component('lnbits-date',
-    {
-      props: ['ts'],
-      computed: {
-        date: function () {
-          return Quasar.utils.date.formatDate(
-            new Date(this.ts * 1000),
-            'YYYY-MM-DD HH:mm'
-          )
-        },
-        dateFrom: function () {
-          return moment(this.date).fromNow()
-        }
-      },
-      template: `
-        <div>
-          <q-tooltip>{{ this.date }}</q-tooltip>
-          {{ this.dateFrom }}
-        </div>
-      `
-    }
-  )
-
-  {% endraw %}
-
-
   new Vue({
     el: '#vue',
     config: {
@@ -190,13 +70,12 @@
           filter: ''
         },
 
-
         activeBalance: {},
         ranks: {},
 
         peers: {
           data: [],
-          filter: '',
+          filter: ''
         },
 
         connectPeerDialog: {
@@ -315,7 +194,7 @@
               label: this.$t('amount') + ' (' + LNBITS_DENOMINATION + ')',
               field: row => this.formatMsat(row.amount),
               sortable: true
-            },
+            }
           ],
           pagination: {
             rowsPerPage: 10,
@@ -346,9 +225,11 @@
         return !_.isEqual(this.settings, this.formData)
       },
       filteredChannels: function () {
-        return this.stateFilters ? this.channels.data.filter(channel => {
+        return this.stateFilters
-          return this.stateFilters.find(({value}) => value == channel.state)
+          ? this.channels.data.filter(channel => {
-        }) : this.channels.data
+              return this.stateFilters.find(({value}) => value == channel.state)
+            })
+          : this.channels.data
       },
       totalBalance: function () {
         return this.filteredChannels.reduce(
@@ -360,7 +241,7 @@
           },
           {local_msat: 0, remote_msat: 0, total_msat: 0}
         )
-      },
+      }
     },
     methods: {
       formatMsat: function (msat) {
@@ -369,29 +250,27 @@
       api: function (method, url, options) {
         const params = new URLSearchParams(options?.query)
         params.set('usr', this.g.user.id)
-        return LNbits.api.request(method, `/node/api/v1${url}?${params}`, {}, options?.data)
+        return LNbits.api
+          .request(method, `/node/api/v1${url}?${params}`, {}, options?.data)
           .catch(error => {
             LNbits.utils.notifyApiError(error)
           })
       },
       getChannels: function () {
-        return this.api('GET', '/channels')
+        return this.api('GET', '/channels').then(response => {
-          .then(response => {
+          this.channels.data = response.data
-            this.channels.data = response.data
+        })
-          })
       },
       getInfo: function () {
-        return this.api('GET', '/info')
+        return this.api('GET', '/info').then(response => {
-          .then(response => {
+          this.info = response.data
-            this.info = response.data
+          this.channel_stats = response.data.channel_stats
-            this.channel_stats = response.data.channel_stats
+        })
-          })
       },
       get1MLStats: function () {
-        return this.api('GET', '/rank')
+        return this.api('GET', '/rank').then(response => {
-          .then(response => {
+          this.ranks = response.data
-            this.ranks = response.data
+        })
-          })
       },
       getPayments: function (props) {
         if (props) {
@@ -400,13 +279,12 @@
         let pagination = this.paymentsTable.pagination
         const query = {
           limit: pagination.rowsPerPage,
-          offset: ((pagination.page - 1) * pagination.rowsPerPage) ?? 0,
+          offset: (pagination.page - 1) * pagination.rowsPerPage ?? 0
         }
-        return this.api('GET', '/payments', {query})
+        return this.api('GET', '/payments', {query}).then(response => {
-          .then(response => {
+          this.paymentsTable.data = response.data.data
-            this.paymentsTable.data = response.data.data
+          this.paymentsTable.pagination.rowsNumber = response.data.total
-            this.paymentsTable.pagination.rowsNumber = response.data.total
+        })
-          })
       },
       getInvoices: function (props) {
         if (props) {
@@ -415,44 +293,40 @@
         let pagination = this.invoiceTable.pagination
         const query = {
           limit: pagination.rowsPerPage,
-          offset: ((pagination.page - 1) * pagination.rowsPerPage) ?? 0,
+          offset: (pagination.page - 1) * pagination.rowsPerPage ?? 0
         }
-        return this.api('GET', '/invoices', {query})
+        return this.api('GET', '/invoices', {query}).then(response => {
-          .then(response => {
+          this.invoiceTable.data = response.data.data
-            this.invoiceTable.data = response.data.data
+          this.invoiceTable.pagination.rowsNumber = response.data.total
-            this.invoiceTable.pagination.rowsNumber = response.data.total
+        })
-          })
       },
       getPeers: function () {
-        return this.api('GET', '/peers')
+        return this.api('GET', '/peers').then(response => {
-          .then(response => {
+          this.peers.data = response.data
-            this.peers.data = response.data
+          console.log('peers', this.peers)
-            console.log('peers', this.peers)
+        })
-          })
       },
       connectPeer: function () {
         console.log('peer', this.connectPeerDialog)
-        this.api('POST', '/peers', {data: this.connectPeerDialog.data})
+        this.api('POST', '/peers', {data: this.connectPeerDialog.data}).then(
-          .then(() => {
+          () => {
             this.connectPeerDialog.show = false
             this.getPeers()
-          })
+          }
+        )
       },
-      disconnectPeer: function(id) {
+      disconnectPeer: function (id) {
         LNbits.utils
-          .confirmDialog(
+          .confirmDialog('Do you really wanna disconnect this peer?')
-            'Do you really wanna disconnect this peer?'
-          )
           .onOk(() => {
-            this.api('DELETE', `/peers/${id}`)
+            this.api('DELETE', `/peers/${id}`).then(response => {
-              .then(response => {
+              this.$q.notify({
-                this.$q.notify({
+                message: 'Disconnected',
-                  message: 'Disconnected',
+                icon: null
-                  icon: null
-                })
-                this.needsRestart = true
-                this.getPeers()
               })
+              this.needsRestart = true
+              this.getPeers()
+            })
           })
       },
       openChannel: function () {
@@ -467,14 +341,19 @@
       },
       showCloseChannelDialog: function (channel) {
         this.closeChannelDialog.show = true
-        this.closeChannelDialog.data = {force: false, short_id: channel.short_id, ...channel.point}
+        this.closeChannelDialog.data = {
+          force: false,
+          short_id: channel.short_id,
+          ...channel.point
+        }
       },
       closeChannel: function () {
-        this.api('DELETE', '/channels', {query: this.closeChannelDialog.data})
+        this.api('DELETE', '/channels', {
-          .then(response => {
+          query: this.closeChannelDialog.data
-            this.closeChannelDialog.show = false
+        }).then(response => {
-            this.getChannels()
+          this.closeChannelDialog.show = false
-          })
+          this.getChannels()
+        })
       },
       showOpenChannelDialog: function (peer_id) {
         this.openChannelDialog.show = true
@@ -489,9 +368,7 @@
         this.transactionDetailsDialog.data = details
         console.log('details', details)
       },
-      exportCSV: function () {
+      exportCSV: function () {},
-
-      },
       shortenNodeId
     }
   })

lnbits/core/templates/node/public.html

@@ -56,11 +56,6 @@ context %} {% block page %}
   Vue.component(VueQrcode.name, VueQrcode)
   Vue.use(VueQrcodeReader)
 
-  {% raw %}
-
-  {% endraw %}
-
-
   new Vue({
     el: '#vue',
     config: {
@@ -109,7 +104,7 @@ context %} {% block page %}
           {label: 'Pending', value: 'pending', color: 'orange'},
           {label: 'Inactive', value: 'inactive', color: 'grey'},
           {label: 'Closed', value: 'closed', color: 'red'}
-        ],
+        ]
       }
     },
     created: function () {
@@ -124,18 +119,16 @@ context %} {% block page %}
         return LNbits.api.request(method, '/node/public/api/v1' + url, {}, data)
       },
       getInfo: function () {
-        this.api('GET', '/info', {})
+        this.api('GET', '/info', {}).then(response => {
-          .then(response => {
+          this.info = response.data
-            this.info = response.data
+          this.channel_stats = response.data.channel_stats
-            this.channel_stats = response.data.channel_stats
+        })
-          })
       },
       get1MLStats: function () {
-        this.api('GET', '/rank', {})
+        this.api('GET', '/rank', {}).then(response => {
-          .then(response => {
+          this.ranks = response.data
-            this.ranks = response.data
+        })
-          })
+      }
-      },
     }
   })
 </script>