{% 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: 100px"
          ></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-toggle
              v-model="fullscreen_cam"
              @click="fullscreenToggle"
              size="xl"
              icon="face"
              label="Fullscreen"
            />
          </div>
          <div class="col">
            <q-input
              class="q-pt-sm"
              dense
              outlined
              bottom-slots
              v-model="iframe"
              label="iframe url"
            >
              <template v-slot:after>
                <q-btn round dense flat @click="" icon="send" />
              </template>
            </q-input>
          </div>
        </div>
        <div class="row q-pa-sm">
          <div class="col">
            <q-btn
              color="primary"
              @click="animationBTN('animation1')"
              label="Confetti"
            />
          </div>
          <div class="col">
            <q-btn
              color="primary"
              @click="animationBTN('animation2')"
              label="Smiley"
            />
          </div>
          <div class="col">
            <q-btn
              color="primary"
              @click="animationBTN('animation3')"
              label="Rocket"
            />
          </div>
        </div>
        <div class="column">
          <div class="col">
            <q-input
              v-model="textareaModel"
              filled
              class="q-pl-sm q-pr-sm q-pb-sm"
              clearable
              type="textarea"
              label="Notes"
            ></q-input>
          </div>
          <div class="col">
            <q-btn
              color="primary"
              label="Save notes"
              class="q-ma-sm float-right"
            ></q-btn>
          </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: {
      fullscreenToggle: function () {
        this.connection.send(String(fullscreen_cam))
      },
      openCompose: function () {
        let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,width=900,height=500,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 }}')

      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 %}