lnbits-legend/lnbits/core/templates/node/public.html

{% extends "public.html" %} {% from "macros.jinja" import window_vars with
context %} {% block page %}

<div class="q-ma-lg-xl q-mx-auto q-ma-xl" style="max-width: 1048px">
  <lnbits-node-info :info="this.info"></lnbits-node-info>

  <div class="row q-col-gutter-lg q-mt-sm">
    <div class="col-12 col-md-8 q-gutter-y-md">
      <div class="row q-col-gutter-md q-pb-lg">
        <div class="col-12 col-md-6 q-gutter-y-md">
          <lnbits-stat
            :title="$t('total_capacity')"
            :msat="this.channel_stats.total_capacity"
          />
        </div>

        <div class="col-12 col-md-6 q-gutter-y-md">
          <lnbits-stat title="Peers" :amount="this.info.num_peers" />
        </div>
        <div class="col-12 col-md-6 q-gutter-y-md">
          <lnbits-stat
            :title="$t('avg_channel_size')"
            :msat="this.channel_stats.avg_size"
          />
        </div>
        <div class="col-12 col-md-6 q-gutter-y-md">
          <lnbits-stat
            :title="$t('biggest_channel_size')"
            :msat="this.channel_stats.biggest_size"
          />
        </div>
        <div class="col-12 col-md-6 q-gutter-y-md">
          <lnbits-stat
            :title="$t('smallest_channel_size')"
            :msat="this.channel_stats.smallest_size"
          />
        </div>
        <div class="col-12 col-md-6 q-gutter-y-md">
          <lnbits-stat
            :title="$t('smallest_channel_size')"
            :msat="this.channel_stats.smallest_size"
          />
        </div>
      </div>
    </div>
    <div class="column col-12 col-md-4 q-gutter-y-md">
      <lnbits-node-ranks :ranks="this.ranks"></lnbits-node-ranks>
      <lnbits-channel-stats :stats="this.channel_stats"></lnbits-channel-stats>
    </div>
  </div>
</div>

{% endblock %} {% block scripts %} {{ window_vars(user) }}
<script src="{{ static_url_for('static', 'js/node.js') }}"></script>
<script>
  Vue.component(VueQrcode.name, VueQrcode)
  Vue.use(VueQrcodeReader)

  new Vue({
    el: '#vue',
    config: {
      globalProperties: {
        LNbits,
        msg: 'hello'
      }
    },
    mixins: [windowMixin],
    data: function () {
      return {
        isSuperUser: false,
        wallet: {},
        tab: 'dashboard',
        payments: 1000,
        info: {},
        channel_stats: {},
        channels: [],
        activeBalance: {},
        ranks: {},

        peers: [],

        connectPeerDialog: {
          show: false,
          data: {}
        },

        openChannelDialog: {
          show: false,
          data: {}
        },

        closeChannelDialog: {
          show: false,
          data: {}
        },

        nodeInfoDialog: {
          show: false,
          data: {}
        },

        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'}
        ]
      }
    },
    created: function () {
      this.getInfo()
      this.get1MLStats()
    },
    methods: {
      formatMsat: function (msat) {
        return LNbits.utils.formatMsat(msat)
      },
      api: function (method, url, data) {
        return LNbits.api.request(method, '/node/public/api/v1' + url, {}, data)
      },
      getInfo: function () {
        this.api('GET', '/info', {}).then(response => {
          this.info = response.data
          this.channel_stats = response.data.channel_stats
        })
      },
      get1MLStats: function () {
        this.api('GET', '/rank', {}).then(response => {
          this.ranks = response.data
        })
      }
    }
  })
</script>

{% endblock %}