{% extends "base.html" %} {% from "macros.jinja" import window_vars with context
%} {% block page %} {% raw %}
<div class="row q-col-gutter-md">
  <div class="col-12 col-md-7 q-gutter-y-md">
    <q-card>
      <q-form @submit="addRelay">
        <div class="row q-pa-md">
          <div class="col-9">
            <q-input
              outlined
              v-model="relayToAdd"
              dense
              filled
              label="Relay URL"
            ></q-input>
          </div>
          <div class="col-3">
            <q-btn unelevated color="primary" class="float-right" type="submit"
              >Add relay
            </q-btn>
          </div>
        </div>
      </q-form>
    </q-card>
    <q-card>
      <q-card-section>
        <div class="row items-center no-wrap q-mb-md">
          <div class="col">
            <h5 class="text-subtitle1 q-my-none">Nostrclient</h5>
          </div>
          <div class="col-auto">
            <q-input
              borderless
              dense
              debounce="300"
              v-model="filter"
              placeholder="Search"
            >
              <template v-slot:append>
                <q-icon name="search"></q-icon>
              </template>
            </q-input>
          </div>
        </div>
        <q-table
          flat
          dense
          :data="nostrrelayLinks"
          row-key="id"
          :columns="relayTable.columns"
          :pagination.sync="relayTable.pagination"
          :filter="filter"
        >
          <template v-slot:header="props">
            <q-tr :props="props">
              <q-th
                v-for="col in props.cols"
                :key="col.name"
                :props="props"
                auto-width
              >
                <div v-if="col.name == 'id'"></div>
                <div v-else>{{ col.label }}</div>
              </q-th>
            </q-tr>
          </template>

          <template v-slot:body="props">
            <q-tr :props="props">
              <q-td
                v-for="col in props.cols"
                :key="col.name"
                :props="props"
                auto-width
              >
                <div v-if="col.name == 'id'"></div>
                <div v-else>
                  <div v-if="col.value == true" style="background-color: green">
                    {{ col.value }}
                  </div>
                  <div v-else>{{ col.value }}</div>
                </div>
              </q-td>
              <q-td auto-width>
                <q-btn
                  flat
                  dense
                  size="xs"
                  @click="deleteRelay(props.row.url)"
                  icon="cancel"
                  color="pink"
                ></q-btn>
              </q-td>
            </q-tr>
          </template>
        </q-table>
      </q-card-section>
    </q-card>
    <q-card>
      <q-card-section>
        <div class="row">
          <div class="col">
            <div class="text-weight-bold">
              <q-btn
                flat
                dense
                size="0.6rem"
                class="q-px-none q-mx-none"
                color="grey"
                icon="content_copy"
                @click="copyText(`wss://${host}/nostrclient/api/v1/relay`)"
                ><q-tooltip>Copy address</q-tooltip></q-btn
              >
              Your endpoint:
              <q-badge
                outline
                class="q-ml-sm text-subtitle2"
                :label="`wss://${host}/nostrclient/api/v1/relay`"
              />
            </div>
          </div>
        </div>
      </q-card-section>
      <q-expansion-item
        group="advanced"
        icon="settings"
        label="Test this endpoint"
        @click="toggleTestPanel"
      >
        <q-separator></q-separator>
        <q-card-section>
          <div class="row">
            <div class="col-3">
              <span>Sender Private Key:</span>
            </div>
            <div class="col-9">
              <q-input
                outlined
                v-model="testData.senderPrivateKey"
                dense
                filled
                label="Private Key (optional)"
              ></q-input>
            </div>
          </div>
          <div class="row q-mt-sm q-mb-lg">
            <div class="col-3"></div>
            <div class="col-9">
              <q-badge color="yellow" text-color="black">
                <span>
                  No not use your real private key! Leave empty for a randomly
                  generated key.</span
                >
              </q-badge>
            </div>
          </div>
          <div v-if="testData.senderPublicKey" class="row">
            <div class="col-3">
              <span>Sender Public Key:</span>
            </div>
            <div class="col-9">
              <q-input
                outlined
                v-model="testData.senderPublicKey"
                dense
                readonly
                filled
              ></q-input>
            </div>
          </div>
          <div class="row q-mt-md">
            <div class="col-3">
              <span>Test Message:</span>
            </div>
            <div class="col-9">
              <q-input
                outlined
                v-model="testData.message"
                dense
                filled
                rows="3"
                type="textarea"
                label="Test Message *"
              ></q-input>
            </div>
          </div>
          <div class="row q-mt-md">
            <div class="col-3">
              <span>Receiver Public Key:</span>
            </div>
            <div class="col-9">
              <q-input
                outlined
                v-model="testData.recieverPublicKey"
                dense
                filled
                label="Public Key (hex or npub) *"
              ></q-input>
            </div>
          </div>
          <div class="row q-mt-sm q-mb-lg">
            <div class="col-3"></div>
            <div class="col-9">
              <q-badge color="yellow" text-color="black">
                <span
                  >This is the recipient of the message. Field required.</span
                >
              </q-badge>
            </div>
          </div>
          <div class="row">
            <div class="col-12">
              <q-btn
                :disabled="!testData.recieverPublicKey || !testData.message"
                @click="sendTestMessage"
                unelevated
                color="primary"
                class="float-right"
                >Send Message</q-btn
              >
            </div>
          </div>
        </q-card-section>

        <q-separator></q-separator>
        <q-card-section>
          <div class="row q-mt-md">
            <div class="col-3">
              <span>Sent Data:</span>
            </div>
            <div class="col-9">
              <q-input
                outlined
                v-model="testData.sentData"
                dense
                filled
                rows="5"
                type="textarea"
              ></q-input>
            </div>
          </div>
          <div class="row q-mt-md">
            <div class="col-3">
              <span>Received Data:</span>
            </div>
            <div class="col-9">
              <q-input
                outlined
                v-model="testData.receivedData"
                dense
                filled
                rows="5"
                type="textarea"
              ></q-input>
            </div>
          </div>
        </q-card-section>
      </q-expansion-item>
    </q-card>
  </div>

  <div class="col-12 col-md-5 q-gutter-y-md">
    <q-card>
      <q-card-section>
        <h6 class="text-subtitle1 q-my-none">Nostrclient Extension</h6>
        <p>
          This extension is a always-on nostr client that other extensions can
          use to send and receive events on nostr. Add multiple nostr relays to
          connect to. The extension then opens a websocket for you to use at
        </p>

        <p>
          <q-badge
            outline
            class="q-ml-sm text-subtitle2"
            color="primary"
            :label="`wss://${host}/nostrclient/api/v1/relay`"
          />
        </p>
        Only Admin users can manage this extension.
        <q-card-section></q-card-section>
      </q-card-section>
    </q-card>
  </div>
</div>
{% endraw %} {% endblock %} {% block scripts %} {{ window_vars(user) }}

<script>
  Vue.component(VueQrcode.name, VueQrcode)

  var maplrelays = obj => {
    obj._data = _.clone(obj)
    obj.theTime = obj.time * 60 - (Date.now() / 1000 - obj.timestamp)
    obj.time = obj.time + 'mins'

    obj.ping = obj.ping + ' ms'

    if (obj.time_elapsed) {
      obj.date = 'Time elapsed'
    } else {
      obj.date = Quasar.utils.date.formatDate(
        new Date((obj.theTime - 3600) * 1000),
        'HH:mm:ss'
      )
    }
    return obj
  }

  new Vue({
    el: '#vue',
    mixins: [windowMixin],
    data: function () {
      return {
        base_url: location.protocol + '//' + location.host,
        host: location.host,
        relayToAdd: '',
        nostrrelayLinks: [],
        filter: '',
        testData: {
          show: false,
          wsConnection: null,
          senderPrivateKey: null,
          senderPublicKey: null,
          recieverPublicKey: null,
          message: null,
          sentData: '',
          receivedData: ''
        },
        relayTable: {
          columns: [
            {
              name: 'connected_string',
              align: 'left',
              label: '',
              field: 'connected_string'
            },
            {
              name: 'relay',
              align: 'left',
              label: 'URL',
              field: 'url'
            },
            {
              name: 'status',
              align: 'center',
              label: 'Status',
              field: 'status'
            },
            {
              name: 'ping',
              align: 'center',
              label: 'Ping',
              field: 'ping'
            }
          ],
          pagination: {
            rowsPerPage: 10
          }
        }
      }
    },
    methods: {
      getRelays: function () {
        var self = this
        LNbits.api
          .request(
            'GET',
            '/nostrclient/api/v1/relays?usr=' + this.g.user.id,
            this.g.user.wallets[0].adminkey
          )
          .then(function (response) {
            if (response.data) {
              response.data.map(maplrelays)
              self.nostrrelayLinks = response.data
            }
          })
          .catch(function (error) {
            LNbits.utils.notifyApiError(error)
          })
      },
      addRelay() {
        if (
          !this.relayToAdd.startsWith('wss://') &&
          !this.relayToAdd.startsWith('ws://')
        ) {
          this.relayToAdd = ''
          this.$q.notify({
            timeout: 5000,
            type: 'warning',
            message: `Invalid relay URL.`,
            caption: "Should start with 'wss://'' or 'ws://'"
          })
          return false
        }
        console.log('ADD RELAY ' + this.relayToAdd)
        let that = this
        LNbits.api
          .request(
            'POST',
            '/nostrclient/api/v1/relay?usr=' + this.g.user.id,
            this.g.user.wallets[0].adminkey,
            {url: this.relayToAdd}
          )
          .then(function (response) {
            console.log('response:', response)
            if (response.data) {
              response.data.map(maplrelays)
              that.nostrrelayLinks = response.data
              that.relayToAdd = ''
            }
          })
          .catch(function (error) {
            LNbits.utils.notifyApiError(error)
          })
        return false
      },
      deleteRelay(url) {
        console.log('DELETE RELAY ' + url)
        LNbits.api
          .request(
            'DELETE',
            '/nostrclient/api/v1/relay?usr=' + this.g.user.id,
            this.g.user.wallets[0].adminkey,
            {url: url}
          )
          .then(function (response) {
            if (response.data) {
              console.log(response.data)
            }
          })
          .catch(function (error) {
            LNbits.utils.notifyApiError(error)
          })
      },
      toggleTestPanel: async function () {
        if (this.testData.show) {
          await this.hideTestPannel()
        } else {
          await this.showTestPanel()
        }
      },
      showTestPanel: async function () {
        this.testData = {
          show: true,
          wsConnection: null,
          senderPrivateKey:
            this.$q.localStorage.getItem(
              'lnbits.nostrclient.senderPrivateKey'
            ) || '',
          recieverPublicKey: null,
          message: null,
          sentData: '',
          receivedData: ''
        }
        await this.closeWebsocket()
        this.connectToWebsocket()
      },
      hideTestPannel: async function () {
        await this.closeWebsocket()
        this.testData = {
          show: false,
          wsConnection: null,
          senderPrivateKey: null,
          recieverPublicKey: null,
          message: null,
          sentData: '',
          receivedData: ''
        }
      },
      sendTestMessage: async function () {
        try {
          const {data} = await LNbits.api.request(
            'PUT',
            '/nostrclient/api/v1/relay/test?usr=' + this.g.user.id,
            this.g.user.wallets[0].adminkey,
            {
              sender_private_key: this.testData.senderPrivateKey,
              reciever_public_key: this.testData.recieverPublicKey,
              message: this.testData.message
            }
          )
          this.testData.senderPrivateKey = data.private_key
          this.$q.localStorage.set(
            'lnbits.nostrclient.senderPrivateKey',
            data.private_key || ''
          )
          const event = JSON.parse(data.event_json)[1]
          this.testData.senderPublicKey = event.pubkey
          await this.sendDataToWebSocket(data.event_json)
          const subscription = JSON.stringify([
            'REQ',
            'test-dms',
            {kinds: [4], '#p': [event.pubkey]}
          ])
          this.testData.wsConnection.send(subscription)
        } catch (error) {
          LNbits.utils.notifyApiError(error)
        }
      },

      sendDataToWebSocket: async function (data) {
        try {
          if (!this.testData.wsConnection) {
            this.connectToWebsocket()
            await this.sleep(500)
          }
          this.testData.wsConnection.send(data)
          const separator = '='.repeat(80)
          this.testData.sentData =
            data + `\n\n${separator}\n` + this.testData.sentData
        } catch (error) {
          this.$q.notify({
            timeout: 5000,
            type: 'warning',
            message: 'Failed to connect to websocket',
            caption: `${error}`
          })
        }
      },
      connectToWebsocket: function () {
        const scheme = location.protocol === 'http:' ? 'ws' : 'wss'
        const port = location.port ? `:${location.port}` : ''
        const wsUrl = `${scheme}://${document.domain}${port}/nostrclient/api/v1/relay`
        this.testData.wsConnection = new WebSocket(wsUrl)
        const updateReciveData = async e => {
          const separator = '='.repeat(80)
          this.testData.receivedData =
            e.data + `\n\n${separator}\n` + this.testData.receivedData
        }

        this.testData.wsConnection.onmessage = updateReciveData
        this.testData.wsConnection.onerror = updateReciveData
        this.testData.wsConnection.onclose = updateReciveData
      },
      closeWebsocket: async function () {
        try {
          if (this.testData.wsConnection) {
            this.testData.wsConnection.close()
            await this.sleep(100)
          }
        } catch (error) {
          console.warn(error)
        }
      },
      exportlnurldeviceCSV: function () {
        var self = this
        LNbits.utils.exportCSV(self.relayTable.columns, this.nostrLinks)
      },
      sleep: ms => new Promise(r => setTimeout(r, ms))
    },
    created: function () {
      var self = this
      this.getRelays()
      setInterval(this.getRelays, 5000)
    }
  })
</script>
{% endblock %}