lnbits-legend/lnbits/core/static/js/node.js

function shortenNodeId(nodeId) {
  return nodeId
    ? nodeId.substring(0, 5) + '...' + nodeId.substring(nodeId.length - 5)
    : '...'
}

Vue.component('lnbits-node-ranks', {
  props: ['ranks'],
  data: function () {
    return {
      user: {},
      stats: [
        {label: 'Capacity', key: 'capacity'},
        {label: 'Channels', key: 'channelcount'},
        {label: 'Age', key: 'age'},
        {label: 'Growth', key: 'growth'},
        {label: 'Availability', key: 'availability'}
      ]
    }
  },
  template: `
    <q-card class='q-my-none'>
    <div class='column q-ma-md'>
      <h5 class='text-subtitle1 text-bold q-my-none'>1ml Node Rank</h5>
      <div v-for='stat in stats' class='q-gutter-sm'>
        <div class='row items-center'>
          <div class='col-9'>{{ stat.label }}</div>
          <div class='col-3 text-subtitle1 text-bold'>
            {{ (ranks && ranks[stat.key]) ?? '-' }}
          </div>
        </div>
      </div>
    </div>
    </q-card>
  `
})

Vue.component('lnbits-channel-stats', {
  props: ['stats'],
  data: function () {
    return {
      states: [
        {label: 'Active', value: 'active', color: 'green'},
        {label: 'Pending', value: 'pending', color: 'orange'},
        {label: 'Inactive', value: 'inactive', color: 'grey'},
        {label: 'Closed', value: 'closed', color: 'red'}
      ]
    }
  },
  template: `
    <q-card>
    <div class='column q-ma-md'>
      <h5 class='text-subtitle1 text-bold q-my-none'>Channels</h5>
      <div v-for='state in states' class='q-gutter-sm'>
        <div class='row'>
          <div class='col-9'>
            <q-badge rounded size='md' :color='state.color'>{{ state.label }}</q-badge>
          </div>
          <div class='col-3 text-subtitle1 text-bold'>
            {{ (stats?.counts && stats.counts[state.value]) ?? "-" }}
          </div>
        </div>
      </div>
    </div>
    </q-card>
  `,
  created: function () {
    if (window.user) {
      this.user = LNbits.map.user(window.user)
    }
  }
})

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-node-qrcode', {
  props: ['info'],
  mixins: [windowMixin],
  template: `
    <q-card class="my-card">
      <q-card-section>
        <div class="text-h6">
          <div style="text-align: center">
            <qrcode
              :value="info.addresses[0]"
              :options="{width: 250}"
              v-if='info.addresses[0]'
              class="rounded-borders"
            ></qrcode>
            <div v-else class='text-subtitle1'>
              No addresses available
            </div>
          </div>
        </div>
      </q-card-section>
      <q-card-actions vertical>
        <q-btn
          dense
          unelevated
          size="md"
          @click="copyText(info.id)"
        >Public Key<q-tooltip> Click to copy </q-tooltip>
        </q-btn>
      </q-card-actions>
    </q-card>
  `
})

Vue.component('lnbits-node-info', {
  props: ['info'],
  data() {
    return {
      showDialog: false
    }
  },
  mixins: [windowMixin],
  methods: {
    shortenNodeId
  },
  template: `
    <div class='row items-baseline q-gutter-x-sm'>
    <div class='text-h4 text-bold'>{{ this.info.alias }}</div>
    <div class='row items-center q-gutter-sm'>
      <div class='text-subtitle1 text-light'>{{ this.info.backend_name }}</div>
      <q-badge
        :style='\`background-color: #\${this.info.color}\`'
        class='text-bold'
      >
        #{{ this.info.color }}
      </q-badge>
      <div class='text-bold'>{{ shortenNodeId(this.info.id) }}</div>
      <q-btn
        size='xs'
        flat
        dense
        icon='content_paste'
        @click='copyText(info.id)'
      ></q-btn>
      <q-btn
        size='xs'
        flat
        dense
        icon='qr_code'
        @click='showDialog = true'
      ></q-btn>
    </div>
      <q-dialog v-model="showDialog">
        <lnbits-node-qrcode :info='info'></lnbits-node-qrcode>
      </q-dialog>
    </div>
  `
})