{% 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-7 q-gutter-y-md">
    <q-card>
      <q-card-section>
        <q-btn
          unelevated
          color="primary"
          class="q-ma-lg"
          @click="openNewDialog()"
          >Add Spotify Jukebox</q-btn
        >

        {% raw %}

        <q-table
          flat
          dense
          :data="JukeboxLinks"
          row-key="id"
          :columns="JukeboxTable.columns"
          :pagination.sync="JukeboxTable.pagination"
          :filter="filter"
        >
          <template v-slot:header="props">
            <q-tr :props="props">
              <q-th auto-width></q-th>
              <q-th auto-width></q-th>

              <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 auto-width>
                <q-btn
                  unelevated
                  dense
                  size="xs"
                  icon="launch"
                  :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
                  @click="openQrCodeDialog(props.row.sp_id)"
                >
                  <q-tooltip> Jukebox QR </q-tooltip>
                </q-btn>
              </q-td>
              <q-td auto-width>
                <q-btn
                  flat
                  dense
                  size="xs"
                  @click="updateJukebox(props.row.id)"
                  icon="edit"
                  color="light-blue"
                ></q-btn>
                <q-btn
                  flat
                  dense
                  size="xs"
                  @click="deleteJukebox(props.row.id)"
                  icon="cancel"
                  color="pink"
                >
                  <q-tooltip> Delete Jukebox </q-tooltip>
                </q-btn>
              </q-td>
              <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>{{ col.value }}</div>
              </q-td>
            </q-tr>
          </template>
        </q-table>
        {% endraw %}
      </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}} jukebox extension
        </h6>
      </q-card-section>
      <q-card-section class="q-pa-none">
        <q-separator></q-separator>
        <q-list> {% include "jukebox/_api_docs.html" %} </q-list>
      </q-card-section>
    </q-card>
  </div>

  <q-dialog v-model="jukeboxDialog.show" position="top" @hide="closeFormDialog">
    <q-card class="q-pa-md q-pt-lg q-mt-md" style="width: 100%">
      <q-stepper
        v-model="step"
        active-color="primary"
        inactive-color="secondary"
        vertical
        animated
      >
        <q-step
          :name="1"
          title="1. Pick Wallet and Price"
          icon="account_balance_wallet"
          :done="step > 1"
        >
          <q-input
            filled
            class="q-pt-md"
            dense
            v-model.trim="jukeboxDialog.data.title"
            label="Jukebox name"
          ></q-input>
          <q-select
            class="q-pb-md q-pt-md"
            filled
            dense
            emit-value
            v-model="jukeboxDialog.data.wallet"
            :options="g.user.walletOptions"
            label="Wallet to use"
          ></q-select>
          <q-input
            filled
            dense
            v-model.trim="jukeboxDialog.data.price"
            type="number"
            max="1440"
            label="Price per track"
            class="q-pb-lg"
          >
          </q-input>
          <div class="row">
            <div class="col-4">
              <q-btn
                v-if="jukeboxDialog.data.title != null && jukeboxDialog.data.price != null && jukeboxDialog.data.wallet != null"
                color="primary"
                @click="step = 2"
                >Continue</q-btn
              >
              <q-btn v-else color="primary" disable>Continue</q-btn>
            </div>
            <div class="col-8">
              <q-btn
                color="primary"
                class="float-right"
                @click="closeFormDialog"
                >Cancel</q-btn
              >
            </div>
          </div>

          <br />
        </q-step>

        <q-step
          :name="2"
          title="2. Add API keys"
          icon="vpn_key"
          :done="step > 2"
        >
          <img src="/jukebox/static/spotapi.gif" />
          To use this extension you need a Spotify client ID and client secret.
          You get these by creating an app in the Spotify Developer Dashboard
          <br />
          <br />
          <q-btn
            type="a"
            target="_blank"
            color="primary"
            href="https://developer.spotify.com/dashboard/applications"
            >Open the Spotify Developer Dashboard</q-btn
          >

          <q-input
            filled
            class="q-pb-md q-pt-md"
            dense
            v-model.trim="jukeboxDialog.data.sp_user"
            label="Client ID"
          >
          </q-input>

          <q-input
            dense
            v-model="jukeboxDialog.data.sp_secret"
            filled
            :type="isPwd ? 'password' : 'text'"
            label="Client secret"
          >
            <template #append>
              <q-icon
                :name="isPwd ? 'visibility_off' : 'visibility'"
                class="cursor-pointer"
                @click="isPwd = !isPwd"
              >
              </q-icon>
            </template>
          </q-input>

          <div class="row q-mt-md">
            <div class="col-4">
              <q-btn
                v-if="jukeboxDialog.data.sp_secret != null && jukeboxDialog.data.sp_user != null && tokenFetched"
                color="primary"
                @click="submitSpotifyKeys"
                >Submit keys</q-btn
              >
              <q-btn v-else color="primary" disable color="primary"
                >Submit keys</q-btn
              >
            </div>
            <div class="col-8">
              <q-btn
                color="primary"
                class="float-right"
                @click="closeFormDialog"
                >Cancel</q-btn
              >
            </div>
          </div>

          <br />
        </q-step>

        <q-step
          :name="3"
          title="3. Add Redirect URI"
          icon="link"
          :done="step > 3"
        >
          <img src="/jukebox/static/spotapi1.gif" />
          <p>
            In the app go to edit-settings, set the redirect URI to this link
          </p>
          <q-card
            class="cursor-pointer word-break"
            @click="copyText(locationcb + jukeboxDialog.data.sp_id, 'Link copied to clipboard!')"
          >
            <q-card-section style="word-break: break-all">
              {% raw %}{{ locationcb }}{{ jukeboxDialog.data.sp_id }}{% endraw
              %}
            </q-card-section>
            <q-tooltip> Click to copy URL </q-tooltip>
          </q-card>
          <br />
          <q-btn
            type="a"
            target="_blank"
            color="primary"
            href="https://developer.spotify.com/dashboard/applications"
            >Open the Spotify Application Settings</q-btn
          >
          <br /><br />
          <p>
            After adding the redirect URI, click the "Authorise access" button
            below.
          </p>

          <div class="row q-mt-md">
            <div class="col-4">
              <q-btn
                v-if="jukeboxDialog.data.sp_secret != null && jukeboxDialog.data.sp_user != null && tokenFetched"
                color="primary"
                @click="authAccess"
                >Authorise access</q-btn
              >
              <q-btn v-else color="primary" disable color="primary"
                >Authorise access</q-btn
              >
            </div>
            <div class="col-8">
              <q-btn
                color="primary"
                class="float-right"
                @click="closeFormDialog"
                >Cancel</q-btn
              >
            </div>
          </div>

          <br />
        </q-step>

        <q-step
          :name="4"
          title="4. Select Device and Playlists"
          icon="queue_music"
          active-color="primary"
          :done="step > 4"
        >
          <q-select
            class="q-pb-md q-pt-md"
            filled
            dense
            emit-value
            v-model="jukeboxDialog.data.sp_device"
            :options="devices"
            label="Device jukebox will play to"
          ></q-select>
          <q-select
            class="q-pb-md"
            filled
            dense
            multiple
            emit-value
            v-model="jukeboxDialog.data.sp_playlists"
            :options="playlists"
            label="Playlists available to the jukebox"
          ></q-select>
          <div class="row q-mt-md">
            <div class="col-5">
              <q-btn
                v-if="jukeboxDialog.data.sp_device != null && jukeboxDialog.data.sp_playlists != null"
                color="primary"
                @click="createJukebox"
                >Create Jukebox</q-btn
              >
              <q-btn v-else color="primary" disable>Create Jukebox</q-btn>
            </div>
            <div class="col-7">
              <q-btn
                color="primary"
                class="float-right"
                @click="closeFormDialog"
                >Cancel</q-btn
              >
            </div>
          </div>
        </q-step>
      </q-stepper>
    </q-card>
  </q-dialog>

  <q-dialog v-model="qrCodeDialog.show" position="top">
    <q-card v-if="qrCodeDialog.data" class="q-pa-lg lnbits__dialog-card">
      <center>
        <h5 class="q-my-none">Shareable Jukebox QR</h5>
      </center>
      <q-responsive :ratio="1" class="q-mx-xl q-mb-md">
        <qrcode
          :value="qrCodeDialog.data.url + '/jukebox/' + qrCodeDialog.data.id"
          :options="{width: 800}"
          class="rounded-borders"
        ></qrcode>
      </q-responsive>
      <div class="row q-mt-lg q-gutter-sm">
        <q-btn
          outline
          color="grey"
          @click="copyText(qrCodeDialog.data.url + '/jukebox/' + qrCodeDialog.data.id, 'Link copied to clipboard!')"
        >
          Copy jukebox link</q-btn
        >
        <q-btn
          outline
          color="grey"
          type="a"
          :href="qrCodeDialog.data.url + '/jukebox/' + qrCodeDialog.data.id"
          target="_blank"
          >Open jukebox</q-btn
        >
        <q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
      </div>
    </q-card>
  </q-dialog>
</div>
{% endblock %} {% block scripts %} {{ window_vars(user) }}
<script src="https://cdn.jsdelivr.net/npm/pica@6.1.1/dist/pica.min.js"></script>
<script src="/jukebox/static/js/index.js"></script>
{% endblock %}