{% 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>
          <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">
            <q-btn @click="payToJoin" unelevated color="primary float-right"
              >Pay to join</q-btn
            >
            <span class="text-bold">Cost to join: </span>

            <span v-text="relay.config.costToJoin"></span>
            <q-badge color="orange">
              <span>sats</span>
            </q-badge>
          </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="joinInvoice">
            <q-expansion-item
              group="join-invoice"
              label="Pay invoice to join relay"
              :content-inset-level="0.5"
              default-opened
            >
              <div class="q-ma-xl">
                <q-responsive :ratio="1" class="q-ma-xl q-mx-md">
                  <qrcode
                    :value="'lightning:'+joinInvoice"
                    :options="{width: 340}"
                    class="rounded-borders"
                  ></qrcode>
                </q-responsive>
              </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: '',
        joinInvoice: ''
      }
    },
    methods: {
      payToJoin: async function () {
        if (!this.pubkey) {
          this.$q.notify({
            timeout: 5000,
            type: 'warning',
            message: 'Public key is missing'
          })
          return
        }
        try {
          const {data} = await LNbits.api.request(
            'PUT',
            '/nostrrelay/api/v1/join',
            '',
            {
              relay_id: this.relay.id,
              pubkey: this.pubkey
            }
          )
          this.joinInvoice = data.invoice
        } catch (error) {
          LNbits.utils.notifyApiError(error)
        }
      }
    },
    created: function () {
      console.log('### created', this.relay)
    }
  })
</script>
{% endblock %}