{% extends "base.html" %} {% from "macros.jinja" import window_vars with context
%} {% block page %}
<div class="row q-col-gutter-md">
  <div class="col-12 col-md-8 col-lg-7 q-gutter-y-md">
    <q-card>
      <q-card-section>
        <q-btn unelevated color="primary" @click="enableRelay"
          ><div v-if="enabled">Disable relay</div>
          <div v-else>Enable relay</div></q-btn
        >
      </q-card-section>
    </q-card>

    <q-card>
      <q-card-section>
        <h6>WebSocket Chat</h6>

        <input type="text" id="messageText" autocomplete="off" />

        <q-btn unelevated color="primary" @click="sendMessage()"
          ><div>Send</div>
        </q-btn>

        <ul id="messages"></ul>
      </q-card-section>
    </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}} NostrRelay extension
        </h6>
      </q-card-section>
      <q-card-section>
        <p>
          Thiago's Point of Sale is a secure, mobile-ready, instant and
          shareable point of sale terminal (PoS) for merchants. The PoS is
          linked to your LNbits wallet but completely air-gapped so users can
          ONLY create invoices. To share the NostrRelay hit the hash on the
          terminal.
        </p>
        <small
          >Created by
          <a
            class="text-secondary"
            href="https://pypi.org/user/dcs/"
            target="_blank"
            >DCs</a
          >,
          <a
            class="text-secondary"
            href="https://github.com/benarc"
            target="_blank"
            >Ben Arc</a
          >.</small
        >
      </q-card-section>
    </q-card>
  </div>
</div>
{% endblock %} {% block scripts %} {{ window_vars(user) }}
<script>
  new Vue({
    el: '#vue',
    mixins: [windowMixin],
    data: function () {
      return {
        enabled: false,
        ws: null
      }
    },
    methods: {
      enableRelay: function () {
        // var self = this
        // LNbits.api
        //   .request(
        //     'GET',
        //     '/nostrrelay/api/v1/nostrrelays?all_wallets=true',
        //     this.g.user.wallets[0].inkey
        //   )
        //   .then(function (response) {
        //     self.nostrrelays = response.data.map(function (obj) {
        //       return mapNostrRelay(obj)
        //     })
        //   })
        this.enabled = !this.enabled
      },
      sendMessage: function (event) {
        var input = document.getElementById('messageText')
        this.ws.send(input.value)
        input.value = ''
      }
    },
    created: function () {
      this.ws = new WebSocket('ws://localhost:5000/nostrrelay/client')
      this.ws.onmessage = function (event) {
        var messages = document.getElementById('messages')
        var message = document.createElement('li')
        var content = document.createTextNode(event.data)
        message.appendChild(content)
        messages.appendChild(message)
      }
    }
  })
</script>
{% endblock %}