mirror of
https://gitlab.science.ru.nl/technicie/MarietjeDjango.git
synced 2025-12-10 12:42:21 +01:00
Marietje 4.1: Addition of Django REST framework, Swagger, Dark mode and updates to Django and Bootstrap
This commit is contained in:
Lars van Rhijn
@ -1,123 +1,634 @@
|
||||
{% extends "base.html" %}
|
||||
{% extends "marietje/base.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block title %}Queue{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<nav class="navbar navbar-expand navbar-default navbar-light border-bottom">
|
||||
<div class="container">
|
||||
<ul class="nav nav-pills" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active" id="queue-tab" data-bs-toggle="tab" data-bs-target="#queue"
|
||||
type="button" role="tab" aria-controls="queue" aria-selected="true">Queue
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item me-3" role="presentation">
|
||||
<button class="nav-link" id="request-tab" data-bs-toggle="tab" data-bs-target="#request"
|
||||
type="button" role="tab" aria-controls="request" aria-selected="false">Request
|
||||
</button>
|
||||
</li>
|
||||
<li id="infobar-buttons" class="nav-item d-flex justify-content-center align-items-center">
|
||||
{% if perms.queues.can_control_volume %}
|
||||
<button type="button" id="mute" class="btn nav-btn btn-sm block-button" onclick="mute();">
|
||||
<i class="fa-solid fa-volume-xmark"></i>
|
||||
</button>
|
||||
<button type="button" id="volume_down" class="btn navbar-btn btn-sm block-button"
|
||||
onclick="volume_down();">
|
||||
<i class="fa-solid fa-volume-low"></i>
|
||||
</button>
|
||||
<button type="button" id="volume_up" class="btn navbar-btn btn-sm block-button"
|
||||
onclick="volume_up();">
|
||||
<i class="fa-solid fa-volume-high"></i>
|
||||
</button>
|
||||
{% endif %}
|
||||
{% if perms.queues.can_skip %}
|
||||
<button type="button" id="skip" class="btn navbar-btn btn-sm block-button" onclick="skip();">
|
||||
<i class="fa-solid fa-forward-fast"></i>
|
||||
</button>
|
||||
{% endif %}
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="navbar-nav navbar-right hidden-xs">
|
||||
<li class="nav-item me-3">
|
||||
<p class="navbar-text mb-0 start-queue hidden-sm hidden-xs"></p>
|
||||
</li>
|
||||
<li class="nav-item me-3">
|
||||
<p class="navbar-text mb-0 end-queue"></p>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<p class="navbar-text mb-0 duration-queue"></p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="container">
|
||||
<br><br>
|
||||
<div class="alert-location">
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane fade show active" id="queue" role="tabpanel" aria-labelledby="queue-tab">
|
||||
<div id="queue-container">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr class="table-header-style">
|
||||
<td class="col-md-4">Artist</td>
|
||||
<td class="col-md-4">Title</td>
|
||||
<td class="col-md-2 d-sm-table-cell d-none">Requested By</td>
|
||||
<td class="col-md-1 text-info d-sm-table-cell d-none" style="cursor: pointer;">
|
||||
<span v-if="playsIn" id="timeswitch" class="btn btn-link p-0" v-on:click="playsIn = false">Plays In</span>
|
||||
<span v-else class="btn btn-link p-0" v-on:click="playsIn = true">Plays at</span>
|
||||
</td>
|
||||
<td class="col-md-1 control-icons">Control</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="queuebody">
|
||||
<template v-for="(song, index) in queue">
|
||||
<tr :class="{ marietjequeue: (song.user === null), currentsong: (index === 0), 'fw-bold': (index === 0) }">
|
||||
<td class="artist"><% song.song.artist %></td>
|
||||
<td class="title"><% song.song.title %></td>
|
||||
<td class="d-sm-table-cell d-none requested-by">
|
||||
<template v-if="song.user === null">
|
||||
Marietje
|
||||
</template>
|
||||
<template v-else>
|
||||
<% song.user.name %>
|
||||
</template>
|
||||
</td>
|
||||
<td class="d-sm-table-cell d-none plays-at" style="text-align: right">
|
||||
<template v-if="song.time_until_song_seconds !== null && song.time_until_song_seconds > 0 && playsIn === true">
|
||||
<% song.time_until_song_seconds.secondsToMMSS() %>
|
||||
</template>
|
||||
<template v-else-if="playsIn === false && song.plays_at !== null && song.played === false">
|
||||
<% song.plays_at.timestampToHHMMSS() %>
|
||||
</template>
|
||||
</td>
|
||||
<td>
|
||||
<a href="#" v-if="song.can_move_up" v-on:click="move_down(queue[index-1].id)"><i
|
||||
class="fa-solid fa-arrow-up"></i></a>
|
||||
<a href="#" v-else class="invisible"><i class="fa-solid fa-arrow-up"></i></a>
|
||||
|
||||
<a href="#" v-if="song.can_move_down" v-on:click="move_down(song.id)"><i
|
||||
class="fa-solid fa-arrow-down"></i></a>
|
||||
<a href="#" v-else class="invisible"><i class="fa-solid fa-arrow-down"></i></a>
|
||||
|
||||
<nav class="navbar navbar-default navbar-fixed-top" style="top: 50px; border-top: 1px solid #bbbbbb; max-height: 50px; box-shadow: 2px 2px 4px #BBBBBB;">
|
||||
<div class="container">
|
||||
<ul class="navbar-nav" style="max-height: 50px; margin: 0;">
|
||||
<li class="btn-toolbar nav navbar-nav" style="margin: 0;">
|
||||
<button id="request-button" class="btn navbar-btn btn-primary">
|
||||
Request
|
||||
</button>
|
||||
<div id="infobar-buttons" class="btn-group">
|
||||
{% if perms.queues.can_control_volume %}
|
||||
<button type="button" id="mute" class="btn navbar-btn btn-sm block-button">
|
||||
<span id="mute-button-span" class="glyphicon glyphicon-volume-off"></span>
|
||||
</button>
|
||||
<button type="button" id="volume_down" class="btn navbar-btn btn-sm block-button">
|
||||
<span id="voldown-button-span" class="glyphicon glyphicon-volume-down"></span>
|
||||
</button>
|
||||
<button type="button" id="volume_up" class="btn navbar-btn btn-sm block-button">
|
||||
<span id="volup-button-span" class="glyphicon glyphicon-volume-up"></span>
|
||||
</button>
|
||||
{% endif %}
|
||||
{% if perms.queues.can_skip %}
|
||||
<button type="button" id="skip" class="btn navbar-btn btn-sm block-button">
|
||||
<span id="skip-button-span" class="glyphicon glyphicon-fast-forward"></span>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="nav navbar-nav navbar-right hidden-xs">
|
||||
<li>
|
||||
<div class="infobar">
|
||||
<p class="navbar-text start-queue hidden-sm hidden-xs"></p>
|
||||
<p class="navbar-text end-queue"></p>
|
||||
<div class="navbar-text">
|
||||
<p class="duration-queue"></p>
|
||||
<a href="#" v-if="song.can_delete" v-on:click="cancel_song(song.id)"><i
|
||||
class="fa-solid fa-trash-can"></i></a>
|
||||
<a href="#" v-else class="invisible"><i class="fa-solid fa-trash-can"></i></a>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<br><br>
|
||||
<div class="alert-location">
|
||||
</div>
|
||||
<div id="request-container" class="hidden">
|
||||
<table id="request-table" class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Artist</th>
|
||||
<th>Title</th>
|
||||
<th>Uploader</th>
|
||||
<th style="text-align: right;">Length</th>
|
||||
<th>Report</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="2"><input id="search-all" class="search-input" type="text"></th>
|
||||
<th colspan="3"><input id="search-uploader" class="search-input" type="text"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th colspan="3" class="ts-pager form-horizontal">
|
||||
<button type="button" class="btn first"><i class="icon-step-backward glyphicon glyphicon-step-backward"></i></button>
|
||||
<button type="button" class="btn prev"><i class="icon-arrow-left glyphicon glyphicon-backward"></i></button>
|
||||
<button type="button" class="btn next"><i class="icon-arrow-right glyphicon glyphicon-forward"></i></button>
|
||||
<button type="button" class="btn last"><i class="icon-step-forward glyphicon glyphicon-step-forward"></i></button>
|
||||
<select class="pagesize input-mini" title="Select page size">
|
||||
<option selected value="10">10</option>
|
||||
<option value="25">25</option>
|
||||
<option value="50">50</option>
|
||||
<option value="100">100</option>
|
||||
<option value="500">500</option>
|
||||
<option value="1000">1000</option>
|
||||
</select>
|
||||
<select class="pagenum input-mini" title="Select page number"></select>
|
||||
</th>
|
||||
<th colspan="2"></th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div id="queue-container">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr class="table-header-style">
|
||||
<td class="col-md-4">Artist</td>
|
||||
<td class="col-md-4">Title</td>
|
||||
<td class="col-md-2 hidden-xs">Requested By</td>
|
||||
<td class="col-md-1 hidden-xs text-info" style="cursor: pointer;">
|
||||
<span id="timeswitch" class="btn-link" >Plays In</span>
|
||||
</td>
|
||||
<td class="col-md-1 control-icons">Control</td>
|
||||
</tr>
|
||||
<tr class="currentsong" style="font-weight: bold">
|
||||
<td class="artist"></td>
|
||||
<td class="title"></td>
|
||||
<td class="requested-by hidden-xs"></td>
|
||||
<td colspan="2"></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="queuebody">
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="request" role="tabpanel" aria-labelledby="request-tab">
|
||||
<div id="request-container">
|
||||
<table id="request-table" class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Artist</th>
|
||||
<th>Title</th>
|
||||
<th>Uploader</th>
|
||||
<th>Length</th>
|
||||
<th>Report</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="5"><input id="search-all" class="search-input" type="text"
|
||||
v-model="search_input"/></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th colspan="3" class="ts-pager form-horizontal">
|
||||
<button v-if="page_number === 1" type="button" class="btn first disabled"><i
|
||||
class="fa-solid fa-backward-fast"></i></button>
|
||||
<button v-else v-on:click="update_page(1);" type="button" class="btn first"><i
|
||||
class="fa-solid fa-backward-fast"></i></button>
|
||||
|
||||
<script type="text/javascript" src="{% static 'js/js.cookie-2.1.3.min.js' %}"></script>
|
||||
<script type="text/javascript" src="{% static 'js/queue.js' %}?1"></script>
|
||||
<script type="text/javascript">
|
||||
var csrf_token = "{{ csrf_token }}";
|
||||
var canSkip = {{ perms.queues.can_skip|yesno:"1,0" }};
|
||||
var canCancel = {{ perms.queues.can_cancel|yesno:"1,0" }};
|
||||
var canMoveSongs = {{ perms.queues.can_move|yesno:"1,0" }};
|
||||
</script>
|
||||
<button v-if="page_number === 1" type="button" class="btn prev disabled"><i
|
||||
class="fa-solid fa-backward"></i></button>
|
||||
<button v-else v-on:click="update_page(page_number - 1);" type="button"
|
||||
class="btn prev"><i class="fa-solid fa-backward"></i></button>
|
||||
|
||||
<button v-if="page_number === number_of_pages" type="button" class="btn next disabled">
|
||||
<i class="fa-solid fa-forward"></i></button>
|
||||
<button v-else v-on:click="update_page(page_number + 1);" type="button"
|
||||
class="btn next"><i class="fa-solid fa-forward"></i></button>
|
||||
|
||||
<button v-if="page_number === number_of_pages" type="button" class="btn last disabled">
|
||||
<i class="fa-solid fa-forward-fast"></i></button>
|
||||
<button v-else v-on:click="update_page(number_of_pages);" type="button"
|
||||
class="btn last"><i class="fa-solid fa-forward-fast"></i></button>
|
||||
|
||||
<select class="pagesize input-mini" title="Select page size" v-model="page_size">
|
||||
<option value="10">10</option>
|
||||
<option value="25">25</option>
|
||||
<option value="50">50</option>
|
||||
<option value="100">100</option>
|
||||
<option value="500">500</option>
|
||||
<option value="1000">1000</option>
|
||||
</select>
|
||||
<select class="pagenum input-mini" title="Select page number" v-model="page_number">
|
||||
<template v-for="(i, index) in number_of_pages">
|
||||
<option :value="i"><% i %></option>
|
||||
</template>
|
||||
</select>
|
||||
</th>
|
||||
<th colspan="2"></th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<template v-for="(song, index) in songs">
|
||||
<tr>
|
||||
<td>
|
||||
<% song.artist %>
|
||||
</td>
|
||||
<td>
|
||||
<a href="#" v-on:click="request_song(song.id);"><% song.title %></a>
|
||||
</td>
|
||||
<td>
|
||||
<template v-if="song.user === null">
|
||||
Marietje
|
||||
</template>
|
||||
<template v-else>
|
||||
<% song.user.name %>
|
||||
</template>
|
||||
</td>
|
||||
<td>
|
||||
<% song.duration.secondsToMMSS() %>
|
||||
</td>
|
||||
<td>
|
||||
<a href="#" v-on:click="report_song(song.id);">
|
||||
⚑
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block js %}
|
||||
<script type="text/javascript">
|
||||
const CAN_SKIP = {{ perms.queues.can_skip|yesno:"1,0" }};
|
||||
const CAN_CANCEL = {{ perms.queues.can_cancel|yesno:"1,0" }};
|
||||
const CAN_MOVE = {{ perms.queues.can_move|yesno:"1,0" }};
|
||||
</script>
|
||||
<script>
|
||||
const queue_vue = new Vue({
|
||||
el: '#queue-container',
|
||||
delimiters: ['<%', '%>'],
|
||||
data: {
|
||||
current_song: null,
|
||||
queue: [],
|
||||
user_data: null,
|
||||
refreshing: true,
|
||||
refreshTimer: null,
|
||||
clockInterval: null,
|
||||
started_at: null,
|
||||
playsIn: true,
|
||||
},
|
||||
mounted() {
|
||||
this.clockInterval = setInterval(this.update_song_times, 1000);
|
||||
},
|
||||
unmounted() {
|
||||
clearInterval(this.clockInterval);
|
||||
},
|
||||
created() {
|
||||
fetch('/api/v1/users/me/').then(response => {
|
||||
if (response.status === 200) {
|
||||
return response.json();
|
||||
} else {
|
||||
throw response;
|
||||
}
|
||||
}).then(data => {
|
||||
this.user_data = data;
|
||||
}).then(() => {
|
||||
this.refreshing = false;
|
||||
this.refresh();
|
||||
}).catch(() => {
|
||||
tata.error('', 'User details failed to fetch, please reload this page to try again.');
|
||||
}).finally(() => {
|
||||
this.refreshing = false;
|
||||
});
|
||||
},
|
||||
computed: {
|
||||
infoBar() {
|
||||
let infoBar = {
|
||||
start_personal_queue: 0,
|
||||
length_personal_queue: 0,
|
||||
length_total_queue: 0,
|
||||
end_personal_queue: 0,
|
||||
max_length: 45,
|
||||
}
|
||||
for (let i = 0; i < this.queue.length; i++) {
|
||||
const current_song = this.queue[i];
|
||||
infoBar['length_total_queue'] = infoBar['length_total_queue'] + current_song.song.duration;
|
||||
if (current_song.user !== null && current_song.user.id === this.user_data.id) {
|
||||
infoBar['length_personal_queue'] = infoBar['length_personal_queue'] + current_song.song.duration;
|
||||
infoBar['end_personal_queue'] = infoBar['length_total_queue'];
|
||||
if (infoBar['start_personal_queue'] === 0) {
|
||||
infoBar['start_personal_queue'] = infoBar['length_total_queue'] - current_song.song.duration;
|
||||
}
|
||||
}
|
||||
}
|
||||
return infoBar;
|
||||
},
|
||||
play_next_song_at() {
|
||||
if (this.started_at !== null && this.current_song !== null) {
|
||||
return this.started_at + this.current_song.song.duration;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
update_song_times() {
|
||||
const now_in_seconds = Math.round((new Date()).getTime() / 1000);
|
||||
let total_song_length = 0;
|
||||
for (let i = 0; i < this.queue.length; i++) {
|
||||
if (this.started_at === null) {
|
||||
this.queue[i].time_until_song_seconds = null;
|
||||
this.queue[i].plays_at = null;
|
||||
this.queue[i].played = false;
|
||||
} else {
|
||||
this.queue[i].time_until_song_seconds = total_song_length;
|
||||
this.queue[i].plays_at = now_in_seconds + total_song_length;
|
||||
this.queue[i].played = this.queue[i].plays_at <= now_in_seconds;
|
||||
if (i === 0) {
|
||||
total_song_length += this.queue[i].song.duration - (now_in_seconds - this.started_at);
|
||||
} else {
|
||||
total_song_length += this.queue[i].song.duration;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
refresh() {
|
||||
if (!this.refreshing) {
|
||||
this.refreshing = true;
|
||||
clearTimeout(this.refreshTimer);
|
||||
fetch('/api/v1/queues/current/').then(response => {
|
||||
if (response.status === 200) {
|
||||
return response.json();
|
||||
} else {
|
||||
throw response;
|
||||
}
|
||||
}).then(data => {
|
||||
this.current_song = data.current_song;
|
||||
this.started_at = Math.round((new Date(data.started_at).getTime()) / 1000);
|
||||
let newQueue = data.queue;
|
||||
newQueue.unshift(this.current_song);
|
||||
newQueue = this.annotateQueue(newQueue);
|
||||
clearInterval(this.clockInterval);
|
||||
this.queue = newQueue;
|
||||
this.update_song_times();
|
||||
this.clockInterval = setInterval(this.update_song_times, 1000);
|
||||
|
||||
}).finally(() => {
|
||||
this.refreshing = false;
|
||||
this.refreshTimer = setTimeout(this.refresh, 10000);
|
||||
});
|
||||
}
|
||||
},
|
||||
annotateQueue(queue) {
|
||||
for (let i = 0; i < queue.length; i++) {
|
||||
const can_delete_previous = i === 0 || i === 1 ? false : queue[i - 1].can_delete;
|
||||
const previous_requested_by_user = i === 0 || i === 1 ? false : queue[i - 1].user !== null;
|
||||
const requested_by_marietje = queue[i].user === null;
|
||||
const next_is_marietje = i < queue.length - 1 && queue[i].user !== null && queue[i + 1].user === null;
|
||||
queue[i].can_delete = i !== 0 && (CAN_MOVE || (queue[i].user !== null && queue[i].user.id === this.user_data.id));
|
||||
queue[i].can_move_up = i !== 0 && ((CAN_MOVE && previous_requested_by_user && queue[i].user !== null) ||
|
||||
(CAN_MOVE && !previous_requested_by_user && queue[i].user === null) ||
|
||||
(can_delete_previous && !requested_by_marietje && previous_requested_by_user));
|
||||
queue[i].can_move_down = i !== 0 && ((CAN_MOVE && !next_is_marietje && i < queue.length - 1) ||
|
||||
(queue[i].can_delete && requested_by_marietje && next_is_marietje && i < queue.length - 1));
|
||||
queue[i].plays_at = null;
|
||||
queue[i].time_until_song_seconds = null;
|
||||
queue[i].played = false;
|
||||
}
|
||||
return queue;
|
||||
},
|
||||
cancel_song(id) {
|
||||
fetch(
|
||||
'/api/v1/queues/playlist-song/' + id + '/cancel/',
|
||||
{
|
||||
method: "DELETE",
|
||||
headers: {
|
||||
"X-CSRFToken": CSRF_TOKEN,
|
||||
"Accept": 'application/json',
|
||||
"Content-Type": 'application/json',
|
||||
},
|
||||
}
|
||||
).finally(() => {
|
||||
this.refresh();
|
||||
});
|
||||
},
|
||||
move_down(id) {
|
||||
fetch(
|
||||
'/api/v1/queues/playlist-song/' + id + '/move-down/',
|
||||
{
|
||||
method: "PATCH",
|
||||
headers: {
|
||||
"X-CSRFToken": CSRF_TOKEN,
|
||||
"Accept": 'application/json',
|
||||
"Content-Type": 'application/json',
|
||||
},
|
||||
}
|
||||
).finally(() => {
|
||||
this.refresh();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
const request_vue = new Vue({
|
||||
el: '#request-container',
|
||||
delimiters: ['<%', '%>'],
|
||||
data: {
|
||||
songs: [],
|
||||
total_songs: 0,
|
||||
search_input: "",
|
||||
typing_timer: null,
|
||||
page_size: 10,
|
||||
page_number: 1,
|
||||
},
|
||||
watch: {
|
||||
search_input: {
|
||||
handler(val, oldVal) {
|
||||
clearTimeout(this.typing_timer);
|
||||
if (this.search !== "") {
|
||||
this.typing_timer = setTimeout(this.search, 200);
|
||||
}
|
||||
}
|
||||
},
|
||||
page_number: {
|
||||
handler(val, oldVal) {
|
||||
if (this.page_number <= 0) {
|
||||
this.page_number = 1;
|
||||
}
|
||||
if (this.page_number > this.number_of_pages) {
|
||||
this.page_number = this.number_of_pages;
|
||||
}
|
||||
this.search();
|
||||
}
|
||||
},
|
||||
page_size: {
|
||||
handler(val, oldVal) {
|
||||
if (this.page_size <= 0) {
|
||||
this.page_size = 10;
|
||||
}
|
||||
this.page_number = 1;
|
||||
this.search();
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
number_of_pages: function () {
|
||||
return Math.ceil(this.total_songs / this.page_size);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
fetch(
|
||||
`/api/v1/songs/?ordering=title&limit=${this.page_size}&offset=${this.page_size * (this.page_number - 1)}`
|
||||
).then(response => {
|
||||
if (response.status === 200) {
|
||||
return response.json();
|
||||
} else {
|
||||
throw response;
|
||||
}
|
||||
}).then(data => {
|
||||
this.songs = data.results;
|
||||
this.total_songs = data.count;
|
||||
}).catch((e) => {
|
||||
if (e instanceof Response) {
|
||||
e.json().then(data => {
|
||||
tata.error("", data.errorMessage);
|
||||
});
|
||||
} else {
|
||||
tata.error("", "An unknown error occurred, please try again.")
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
search() {
|
||||
fetch(
|
||||
`/api/v1/songs/?ordering=title&limit=${this.page_size}&offset=${this.page_size * (this.page_number - 1)}&search=${this.search_input}`,
|
||||
{
|
||||
headers: {
|
||||
"X-CSRFToken": CSRF_TOKEN,
|
||||
}
|
||||
}
|
||||
).then(response => {
|
||||
if (response.status === 200) {
|
||||
return response.json();
|
||||
} else {
|
||||
throw response;
|
||||
}
|
||||
}).then(data => {
|
||||
this.songs = data.results;
|
||||
this.total_songs = data.count;
|
||||
}).catch((e) => {
|
||||
if (e instanceof Response) {
|
||||
e.json().then(data => {
|
||||
tata.error("", data.errorMessage);
|
||||
});
|
||||
} else {
|
||||
tata.error("", "An unknown error occurred, please try again.")
|
||||
}
|
||||
});
|
||||
},
|
||||
request_song(song_id) {
|
||||
fetch('/api/v1/queues/current/request/', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
song: song_id
|
||||
}),
|
||||
headers: {
|
||||
"X-CSRFToken": CSRF_TOKEN,
|
||||
"Accept": 'application/json',
|
||||
"Content-Type": 'application/json',
|
||||
},
|
||||
}).then(response => {
|
||||
if (response.status === 200) {
|
||||
return response.json();
|
||||
} else {
|
||||
throw response;
|
||||
}
|
||||
}).then(() => {
|
||||
tata.success('', 'Song added to the queue.');
|
||||
queue_vue.refresh();
|
||||
}).catch(e => {
|
||||
if (e instanceof Response) {
|
||||
e.json().then(data => {
|
||||
tata.error('', data.errorMessage);
|
||||
})
|
||||
} else {
|
||||
tata.error('', "An unknown exception occurred.")
|
||||
}
|
||||
});
|
||||
},
|
||||
report_song(song_id) {
|
||||
let message = prompt("What is wrong with the song?");
|
||||
if (message === null) {
|
||||
return;
|
||||
}
|
||||
if (message === "") {
|
||||
tata.error('', 'Please enter a message.');
|
||||
}
|
||||
fetch('/api/v1/songs/report-notes/', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
"X-CSRFToken": CSRF_TOKEN,
|
||||
"Accept": 'application/json',
|
||||
"Content-Type": 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
song: song_id,
|
||||
note: message,
|
||||
}),
|
||||
}).then(response => {
|
||||
if (response.status === 201) {
|
||||
return response.json();
|
||||
} else {
|
||||
throw response;
|
||||
}
|
||||
}).then(() => {
|
||||
tata.success("", "Successfully submitted report note.")
|
||||
}).catch(e => {
|
||||
if (e instanceof Response) {
|
||||
e.json().then(data => {
|
||||
tata.error("", data.errorMessage);
|
||||
});
|
||||
} else {
|
||||
tata.error("", "An unknown error occurred, please try again.")
|
||||
}
|
||||
});
|
||||
},
|
||||
update_page(page_number) {
|
||||
this.page_number = page_number;
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
function volume_down() {
|
||||
fetch('/api/v1/queues/current/volume-down/', {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"X-CSRFToken": CSRF_TOKEN,
|
||||
"Accept": 'application/json',
|
||||
"Content-Type": 'application/json',
|
||||
},
|
||||
}).then(response => {
|
||||
if (response.status !== 200) {
|
||||
throw response;
|
||||
}
|
||||
}).catch((e) => {
|
||||
if (e instanceof Response) {
|
||||
tata.error("", e.errorMessage);
|
||||
} else {
|
||||
tata.error("", "An unknown error occurred.")
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function volume_up() {
|
||||
fetch('/api/v1/queues/current/volume-up/', {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"X-CSRFToken": CSRF_TOKEN,
|
||||
"Accept": 'application/json',
|
||||
"Content-Type": 'application/json',
|
||||
},
|
||||
}).then(response => {
|
||||
if (response.status !== 200) {
|
||||
throw response;
|
||||
}
|
||||
}).catch((e) => {
|
||||
if (e instanceof Response) {
|
||||
tata.error("", e.errorMessage);
|
||||
} else {
|
||||
tata.error("", "An unknown error occurred.")
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function mute() {
|
||||
fetch('/api/v1/queues/current/mute/', {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"X-CSRFToken": CSRF_TOKEN,
|
||||
"Accept": 'application/json',
|
||||
"Content-Type": 'application/json',
|
||||
},
|
||||
}).then(response => {
|
||||
if (response.status !== 200) {
|
||||
throw response;
|
||||
}
|
||||
}).catch((e) => {
|
||||
if (e instanceof Response) {
|
||||
tata.error("", e.errorMessage);
|
||||
} else {
|
||||
tata.error("", "An unknown error occurred.")
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function skip() {
|
||||
fetch('/api/v1/queues/current/skip/', {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"X-CSRFToken": CSRF_TOKEN,
|
||||
"Accept": 'application/json',
|
||||
"Content-Type": 'application/json',
|
||||
},
|
||||
}).then(response => {
|
||||
if (response.status !== 200) {
|
||||
throw response;
|
||||
}
|
||||
}).then(() => {
|
||||
queue_vue.refresh();
|
||||
}).catch((e) => {
|
||||
if (e instanceof Response) {
|
||||
tata.error("", e.errorMessage);
|
||||
} else {
|
||||
tata.error("", "An unknown error occurred.")
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user