{% extends "public.html" %} {% block page %}
<div class="q-pa-sm" style="width: 400px; margin: 10px auto">
  <q-card class="my-card">
    <div class="column">
      <div class="col">
        <center>
          <q-btn
            flat
            round
            dense
            @click="openCompose"
            icon="face"
            style="font-size: 80px"
          ></q-btn>
        </center>
      </div>
      <center>
        <div class="col" style="margin: 15px; font-size: 25px">
          Title: {{ copilot.title }}
        </div>
      </center>
      <q-separator></q-separator>
      <div class="col">
        <div class="row">
          <div class="col">
            <q-btn
              disable
              class="q-mt-sm q-ml-sm"
              color="primary"
              @click="fullscreenToggle"
              label="Webcam size"
            >
              <q-tooltip> Coming soon </q-tooltip></q-btn
            >
          </div>
          <div class="col">
            <q-input
              disable
              class="q-pt-sm"
              dense
              outlined
              bottom-slots
              v-model="iframe"
              label="iframe url"
              ><q-tooltip> Coming soon </q-tooltip>
              <template v-slot:after>
                <q-btn
                  round
                  dense
                  flat
                  @click="iframeChange(iframe)"
                  icon="send"
                />
              </template>
            </q-input>
          </div>
        </div>
        <div class="row q-pa-sm">
          <div class="col">
            <q-btn
              style="width: 95%"
              color="primary"
              @click="animationBTN('rocket')"
              label="rocket"
            />
          </div>
          <div class="col">
            <q-btn
              style="width: 95%"
              color="primary"
              @click="animationBTN('confetti')"
              label="confetti"
            />
          </div>
          <div class="col">
            <q-btn
              style="width: 95%"
              color="primary"
              @click="animationBTN('face')"
              label="face"
            />
          </div>
        </div>
        <div class="row q-pa-sm">
          <div class="col">
            <q-btn
              style="width: 95%"
              color="primary"
              @click="animationBTN('rick')"
              label="rick"
            />
          </div>
          <div class="col">
            <q-btn
              style="width: 95%"
              color="primary"
              @click="animationBTN('martijn')"
              label="martijn"
            />
          </div>
          <div class="col">
            <q-btn
              style="width: 95%"
              color="primary"
              @click="animationBTN('bitcoin')"
              label="bitcoin"
            />
          </div>
        </div>
      </div>
    </div>
  </q-card>
</div>

{% endblock %} {% block scripts %}
<script src="{{ url_for('static', filename='vendor/vue-qrcode@1.0.2/vue-qrcode.min.js') }}"></script>
<script>
  Vue.component(VueQrcode.name, VueQrcode)

  new Vue({
    el: '#vue',
    mixins: [windowMixin],
    data() {
      return {
        fullscreen_cam: true,
        textareaModel: '',
        iframe: ''
      }
    },
    methods: {
      iframeChange: function (url) {
        this.connection.send(String(url))
      },
      fullscreenToggle: function () {
        console.log(this.fullscreen_cam)
        this.connection.send(String(this.fullscreen_cam))
        if (this.fullscreen_cam) {
          this.fullscreen_cam = false
        } else {
          this.fullscreen_cam = true
        }
      },
      openCompose: function () {
        let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,width=1722,height=972,left=200,top=200`

        open('../copilot/cp/{{ copilot.id }}', 'test', params)
      },
      animationBTN: function (name) {
        this.connection.send(name)
      },
      stfu: function (name) {
        this.connection.send('')
      }
    },
    created: function () {
      console.log('{{ copilot.id }}')

      if (location.protocol == 'https:') {
        console.log(location.protocol)
        this.connection = new WebSocket(
          'wss://' +
            document.domain +
            ':' +
            location.port +
            '/copilot/ws/panel/{{ copilot.id }}'
        )
      } else {
        this.connection = new WebSocket(
          'ws://' +
            document.domain +
            ':' +
            location.port +
            '/copilot/ws/panel/{{ copilot.id }}'
        )
      }
      this.connection.addEventListener('open', function (event) {})

      this.connection.addEventListener('message', function (event) {
        console.log('Message from server ', event.data)
      })

      this.connection.addEventListener('close', function (event) {
        console.log('The connection has been closed')
      })
    }
  })
</script>
{% endblock %}