{% 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-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-th auto-width></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-section>
        <div class="text-weight-bold"> Your endpoint:
          <q-badge outline class="q-ml-sm text-subtitle2" color="primary" :label="`wss://${host}nostrclient/api/v1/relay`" />
          </div>
      </q-card-section>
    </q-card>
    <q-card>
      <q-separator></q-separator>
      <q-form class="q-gutter-md q-y-md" @submit="addRelay">
        <div class="row">
          <div class="col q-mx-md q-my-sm">
            <q-input outlined v-model="relayToAdd" dense filled label="Relay URL"></q-input>
          </div>
          <div class="col q-mx-md items-align flex items-center justify-right">
            <q-btn unelevated color="primary" type="submit">Add relay </q-btn>
          </div>
        </div>
      </q-form>
    </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">{{SITE_TITLE}} 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>
            <!-- wss://{{host}}nostrclient/api/v1/relay -->
            <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.
        </p>
        <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: '',
        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) {
              console.log(response.data)
              response.data.map(maplrelays)
              self.nostrrelayLinks = response.data
              console.log(self.nostrrelayLinks)
            }
          })
          .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
        }
        console.log('ADD RELAY ' + this.relayToAdd)
        var self = 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) {
            if (response.data) {
              console.log(response.data)
              response.data.map(maplrelays)
              self.nostrrelayLinks = response.data
              console.log(self.nostrrelayLinks)
            }
          })
          .catch(function (error) {
            LNbits.utils.notifyApiError(error)
          })
        location.reload()
      },
      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)
          })
        location.reload()
      },
      exportlnurldeviceCSV: function () {
        var self = this
        LNbits.utils.exportCSV(self.relayTable.columns, this.nostrLinks)
      }
    },
    created: function () {
      var self = this
      this.getRelays()
      setInterval(this.getRelays, 5000)
    }
  })
</script>
{% endblock %}