{% extends "public.html" %} {% block toolbar_title %} LNbits Relay
<q-icon name="sensors" class="q-ml-lg" />
{% endblock %} {% block footer %}{% endblock %} {% block page_container %}

<q-page-container>
  <q-page>
    <div class="row q-col-gutter-md">
      <div class="col-12 col-md-2 q-gutter-y-md"></div>
      <div class="col-12 col-md-6 q-gutter-y-md q-pa-xl">
        <q-card>
          <q-card-section>
            <h4 v-text="relay.name" class="q-my-none"></h4>
          </q-card-section>
        </q-card>
        <q-card class="q-pb-xl">
          <q-card-section>
            <span class="text-bold">Public Key:</span>
            <q-input
              filled
              dense
              v-model.trim="pubkey"
              type="text"
              label="User Public Key"
            ></q-input>
          </q-card-section>
          <q-card-section v-if="relay.config.isPaidRelay">
            <div class="row q-mb-md">
              <div class="col-2">
                <span class="text-bold">Cost to join: </span>
              </div>
              <div class="col-6">
                <span v-text="relay.config.costToJoin"></span>
                <span class="text-bold q-ml-sm">sats</span>
              </div>
              <div class="col-4">
                <q-btn
                  @click="createInvoice('join')"
                  unelevated
                  color="primary"
                  class="float-right"
                  >Pay to Join</q-btn
                >
              </div>
            </div>
            <q-separator></q-separator>
            <div class="row q-mt-md q-mb-md">
              <div class="col-2">
                <span class="text-bold">Storage cost: </span>
              </div>
              <div class="col-3">
                <span v-text="relay.config.storageCostValue"></span>
                <span class="text-bold q-ml-sm"> sats per</span>
                <q-badge color="orange">
                  <span v-text="relay.config.storageCostUnit"></span>
                </q-badge>
              </div>
              <div class="col-2">
                <q-input
                  filled
                  dense
                  v-model="unitsToBuy"
                  type="number"
                  min="0"
                  :label="relay.config.storageCostUnit"
                ></q-input>
              </div>
              <div class="col-2">
                <span class="text-bold q-ml-md" v-text="storageCost"></span>
                <span>sats</span>
              </div>
              <div class="col-3">
                <q-btn
                  @click="createInvoice('storage')"
                  unelevated
                  color="primary"
                  class="float-right"
                  >Buy storage space</q-btn
                >
              </div>
            </div>
            <q-separator></q-separator>
          </q-card-section>
          <q-card-section v-else>
            <q-badge color="yellow" text-color="black">
              This is a free relay
            </q-badge>
          </q-card-section>
          <q-card-section v-if="invoice">
            <q-expansion-item
              group="join-invoice"
              label="Invoice"
              :content-inset-level="0.5"
              default-opened
            >
              <div class="row q-ma-md">
                <div class="col-3"></div>
                <div class="col-6 text-center">
                  <q-btn outline color="grey" @click="copyText(invoice)"
                    >Copy invoice</q-btn
                  >
                </div>
                <div class="col-3"></div>
              </div>
              <div class="row">
                <div class="col-3"></div>
                <div class="col-6">
                  <q-responsive :ratio="1">
                    <qrcode
                      :value="'lightning:'+invoice"
                      :options="{width: 340}"
                      class="rounded-borders"
                    ></qrcode>
                  </q-responsive>
                </div>
                <div class="col-3"></div>
              </div>
            </q-expansion-item>
          </q-card-section>
        </q-card>
      </div>
      <div class="col-12 col-md-4 q-gutter-y-md q-pa-xl">
        <q-card>
          <q-card-section>
            <q-expansion-item
              group="extras"
              icon="sensors"
              label="Relay Specs"
              :content-inset-level="0.5"
            >
              <q-separator class="q-mt-md"></q-separator>
              <span v-text="relay.description"></span>
              <q-separator class="q-mb-md"></q-separator>
              <q-expansion-item
                group="api"
                dense
                expand-separator
                label="Payment Spec"
              >
                <q-card>
                  <q-card-section>
                    <code
                      ><span class="text-blue">GET</span>
                      /lnurlp/api/v1/links</code
                    >
                    <h5 class="text-caption q-mt-sm q-mb-none">Headers</h5>
                    <code>{"X-Api-Key": &lt;invoice_key&gt;}</code><br />
                    <h5 class="text-caption q-mt-sm q-mb-none">
                      Body (application/json)
                    </h5>
                    <h5 class="text-caption q-mt-sm q-mb-none">
                      Returns 200 OK (application/json)
                    </h5>
                    <code>[&lt;pay_link_object&gt;, ...]</code>
                    <h5 class="text-caption q-mt-sm q-mb-none">Curl example</h5>
                  </q-card-section>
                </q-card>
              </q-expansion-item>
              <q-expansion-item
                group="api"
                dense
                expand-separator
                label="Events Spec"
              >
                <q-card>
                  <q-card-section> </q-card-section>
                </q-card>
              </q-expansion-item>
              <q-expansion-item
                group="api"
                dense
                expand-separator
                label="Filters Spec"
              >
                <q-card>
                  <q-card-section> </q-card-section>
                </q-card>
              </q-expansion-item>
              <q-expansion-item
                group="api"
                dense
                expand-separator
                label="Storage Spec"
              >
                <q-card>
                  <q-card-section> </q-card-section>
                </q-card>
              </q-expansion-item>
            </q-expansion-item>
          </q-card-section>
        </q-card>
      </div>
    </div>
  </q-page>
</q-page-container>
{% endblock %} {% block scripts %}
<script>
  Vue.component(VueQrcode.name, VueQrcode)

  new Vue({
    el: '#vue',
    mixins: [windowMixin],
    data: function () {
      return {
        relay: JSON.parse('{{relay | tojson | safe}}'),
        pubkey: '',
        invoice: '',
        unitsToBuy: 0
      }
    },
    computed: {
      storageCost: function () {
        if (!this.relay || !this.relay.config.storageCostValue) return 0
        return this.unitsToBuy * this.relay.config.storageCostValue
      }
    },
    methods: {
      createInvoice: async function (action) {
        if (!action) return
        if (!this.pubkey) {
          this.$q.notify({
            timeout: 5000,
            type: 'warning',
            message: 'Public key is missing'
          })
          return
        }
        try {
          const reqData = {
            action,
            relay_id: this.relay.id,
            pubkey: this.pubkey,
            units_to_buy: this.unitsToBuy
          }
          const {data} = await LNbits.api.request(
            'PUT',
            '/nostrrelay/api/v1/pay',
            '',
            reqData
          )
          console.log('### data.invoice', data.invoice)
          this.invoice = data.invoice
        } catch (error) {
          LNbits.utils.notifyApiError(error)
        }
      }
    },
    created: function () {
      console.log('### created', this.relay)
    }
  })
</script>
{% endblock %}