mirror of
https://gitlab.science.ru.nl/technicie/MarietjeDjango.git
synced 2025-12-11 09:32:22 +01:00
Compare commits
2 Commits
cc2af7cfd1
...
fix/poetry
| Author | SHA1 | Date | |
|---|---|---|---|
| 1ac89e09ad | |||
| 8da9672fc1 |
@ -16,8 +16,7 @@ black:
|
||||
script:
|
||||
- poetry run black --quiet --check marietje
|
||||
|
||||
# TODO: Fix the deploy stage, as it has not been adapted to the new server Marietje runs on. The . disables the stage.
|
||||
.deploy:
|
||||
deploy:
|
||||
stage: deploy
|
||||
only: ['marietje-zuid']
|
||||
before_script:
|
||||
|
||||
@ -31,6 +31,19 @@ a {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.table {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.table-striped tbody tr:nth-of-type(odd) {
|
||||
background-color: var(--background-shade);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.table-striped > tbody > tr:nth-of-type(odd) > * {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
input[type="text"], input[type="password"] {
|
||||
background-color: var(--background-shade-light);
|
||||
border: 1px solid var(--background-shade);
|
||||
@ -53,23 +66,22 @@ button[type="button"] i {
|
||||
min-width: 90px;
|
||||
}
|
||||
|
||||
.song-info {
|
||||
position: absolute;
|
||||
padding: 8px;
|
||||
background: silver;
|
||||
white-space: nowrap;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#queue-time-header {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.table {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.table-striped tbody tr:nth-of-type(odd) {
|
||||
background-color: var(--background-shade);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.table-striped > tbody > tr:nth-of-type(odd) > * {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.marietjequeue {
|
||||
color: #777777;
|
||||
}
|
||||
@ -79,24 +91,7 @@ footer {
|
||||
}
|
||||
|
||||
.marietjequeue-pre-start td {
|
||||
border-bottom: 3px double var(--text-color);
|
||||
}
|
||||
|
||||
.marietjequeue-post-start td {
|
||||
border-top: 3px double var(--text-color);
|
||||
}
|
||||
|
||||
.ownsong {
|
||||
border-left: 1px solid var(--text-color);
|
||||
}
|
||||
|
||||
.currentsong {
|
||||
border-bottom: 1px solid var(--text-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.underline_cell {
|
||||
border-bottom: 1px solid var(--text-color);
|
||||
border-bottom: 3px double #777777;
|
||||
}
|
||||
|
||||
.block-button {
|
||||
@ -105,10 +100,13 @@ footer {
|
||||
transition: 1s transform ease-in-out;
|
||||
}
|
||||
|
||||
.currentsong {
|
||||
border-bottom: 1px solid #DDDDDD;
|
||||
}
|
||||
|
||||
.navbar-text {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.danger {
|
||||
color: red !important;
|
||||
}
|
||||
|
||||
@ -20,19 +20,17 @@
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: #181818;
|
||||
--background-shade: #282828;
|
||||
--background-shade-light: #404040;
|
||||
--background-color: #202020;
|
||||
--background-shade: #404040;
|
||||
--background-shade-light: #696969;
|
||||
|
||||
--card-background: #404040;
|
||||
--card-background-shade: #282828;
|
||||
--card-background-contrast: #dddddd;
|
||||
--card-background: #696969;
|
||||
--card-background-shade: #404040;
|
||||
--card-background-contrast: #ffffff;
|
||||
|
||||
--title-color: #000000;
|
||||
--sub-title-color: #dddddd;
|
||||
--link-color: #007bff;
|
||||
--text-color: #dddddd;
|
||||
|
||||
--bs-border-color: #282828;
|
||||
--text-color: #ffffff;
|
||||
}
|
||||
}
|
||||
@ -15,10 +15,7 @@
|
||||
<link href="{% static 'fontawesomefree/css/all.min.css' %}" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- Vue JS -->
|
||||
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
|
||||
<script>
|
||||
const { createApp } = Vue;
|
||||
</script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
|
||||
|
||||
<!-- TaTa.js notifications -->
|
||||
<script src="{% static 'marietje/js/tata.js' %}"></script>
|
||||
@ -40,7 +37,6 @@
|
||||
</section>
|
||||
<nav class="navbar navbar-expand-lg sticky-top navbar-dark bg-primary">
|
||||
<div class="container">
|
||||
<a class="navbar-brand d-block d-lg-none" href="{% url "index" %}">Marietje 4.1</a>
|
||||
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="offcanvas"
|
||||
data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
|
||||
{% block content %}
|
||||
<nav class="navbar navbar-expand navbar-default navbar-light border-bottom">
|
||||
<div class="container-lg">
|
||||
<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"
|
||||
@ -13,7 +13,7 @@
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item me-3" role="presentation">
|
||||
<button onclick="request_vue.select_textinput()" class="nav-link" id="request-tab" data-bs-toggle="tab" data-bs-target="#request"
|
||||
<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>
|
||||
@ -39,32 +39,30 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul id="personal-queue-container" class="navbar-nav navbar-right hidden-xs">
|
||||
<template v-if="infobar !== null && 'start_personal_queue' in infobar && infobar.start_personal_queue !== null">
|
||||
<li v-if="infobar.start_personal_queue !== 0" class="nav-item me-3">
|
||||
<p v-if="infobar.plays_in" class="navbar-text mb-0 start-queue hidden-sm hidden-xs">
|
||||
First song starts in ${ infobar.start_personal_queue.secondsToMMSS() }$
|
||||
</p>
|
||||
<p v-else class="navbar-text mb-0 start-queue hidden-sm hidden-xs">
|
||||
First song starts at ${ (infobar.now_in_seconds + infobar.start_personal_queue).timestampToHHMMSS() }$
|
||||
</p>
|
||||
</li>
|
||||
<li class="nav-item me-3">
|
||||
<p v-if="infobar.plays_in" class="navbar-text mb-0 start-queue hidden-sm hidden-xs">
|
||||
Last song ends in ${ infobar.end_personal_queue.secondsToMMSS() }$
|
||||
</p>
|
||||
<p v-else class="navbar-text mb-0 start-queue hidden-sm hidden-xs">
|
||||
Last song ends at ${ (infobar.now_in_seconds + infobar.end_personal_queue).timestampToHHMMSS() }$
|
||||
</p>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<p class="navbar-text mb-0 duration-queue" v-bind:class="{danger: infobar.length_personal_queue > infobar.max_length * 60}">(${ infobar.length_personal_queue.secondsToMMSS() }$)</p>
|
||||
</li>
|
||||
</template>
|
||||
<ul v-if="'start_personal_queue' in infobar && infobar.start_personal_queue !== null" id="personal-queue-container" class="navbar-nav navbar-right hidden-xs">
|
||||
<li v-if="infobar.start_personal_queue != 0" class="nav-item me-3">
|
||||
<p v-if="infobar.plays_in" class="navbar-text mb-0 start-queue hidden-sm hidden-xs">
|
||||
First song starts in <% infobar.start_personal_queue.secondsToMMSS() %>
|
||||
</p>
|
||||
<p v-else class="navbar-text mb-0 start-queue hidden-sm hidden-xs">
|
||||
First song starts at <% (infobar.now_in_seconds + infobar.start_personal_queue).timestampToHHMMSS() %>
|
||||
</p>
|
||||
</li>
|
||||
<li class="nav-item me-3">
|
||||
<p v-if="infobar.plays_in" class="navbar-text mb-0 start-queue hidden-sm hidden-xs">
|
||||
Last song ends in <% infobar.end_personal_queue.secondsToMMSS() %>
|
||||
</p>
|
||||
<p v-else class="navbar-text mb-0 start-queue hidden-sm hidden-xs">
|
||||
Last song ends at <% (infobar.now_in_seconds + infobar.end_personal_queue).timestampToHHMMSS() %>
|
||||
</p>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<p class="navbar-text mb-0 duration-queue" v-bind:class="{danger: infobar.length_personal_queue > infobar.max_length * 60}">(<% infobar.length_personal_queue.secondsToMMSS() %>)</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="container-lg">
|
||||
<div class="container">
|
||||
<br><br>
|
||||
<div class="alert-location">
|
||||
</div>
|
||||
@ -73,85 +71,53 @@
|
||||
<div id="queue-container">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr class="table-header-style underline_cell">
|
||||
<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" class="btn btn-link p-0" v-on:click="playsIn = false">Plays In</span>
|
||||
<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">
|
||||
<span class="control-icons">Control</span>
|
||||
<span v-if="playsIn" class="btn btn-link p-0 d-sm-none" v-on:click="toggle_details(song)">(Plays in)</span>
|
||||
<span v-else class="btn btn-link p-0 d-sm-none" v-on:click="toggle_details(song)">(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),
|
||||
underline_cell: (index === queue[-1]),
|
||||
currentsong: (index === 0),
|
||||
ownsong: (this.user_data.id === song.user?.id && index !== 0),
|
||||
}"
|
||||
v-on:click="toggle_details(song)">
|
||||
<td>
|
||||
<span class="artist">${ song.song.artist }$</span>
|
||||
<span v-if="show_details(song)" class="requested-by d-sm-none d-block small mt-3 fw-normal">
|
||||
Requested by:<br>
|
||||
<template v-if="song.user === null">
|
||||
Marietje
|
||||
</template>
|
||||
<template v-else>
|
||||
${ song.user.name }$
|
||||
</template>
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="title">${ song.song.title }$</span>
|
||||
<span v-if="show_details(song) && song.time_until_song_seconds > 0" class="plays-at d-sm-none d-block small mt-3 fw-normal" style="text-align: right">
|
||||
<span v-if="playsIn">Plays In:</span>
|
||||
<span v-else>Plays At:</span>
|
||||
<br>
|
||||
<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>
|
||||
</span>
|
||||
</td>
|
||||
<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 }$
|
||||
<% 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() }$
|
||||
<% song.time_until_song_seconds.secondsToMMSS() %>
|
||||
</template>
|
||||
<template v-else-if="playsIn === false && song.plays_at !== null && song.played === false">
|
||||
${ song.plays_at.timestampToHHMMSS() }$
|
||||
<% song.plays_at.timestampToHHMMSS() %>
|
||||
</template>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex flex-column">
|
||||
<div class="d-flex flex-row">
|
||||
<button v-if="song.can_move_up" v-on:click="move_down(queue[index-1].id)"
|
||||
class="btn btn-link p-1 p-md-2"><i class="fa-solid fa-arrow-up"></i></button>
|
||||
<button v-else class="btn btn-link invisible p-1 p-md-2"><i class="fa-solid fa-arrow-up"></i></button>
|
||||
<button v-if="song.can_move_up" v-on:click="move_down(queue[index-1].id)" class="btn btn-link"><i
|
||||
class="fa-solid fa-arrow-up"></i></button>
|
||||
<button v-else class="btn btn-link invisible"><i class="fa-solid fa-arrow-up"></i></button>
|
||||
|
||||
<button v-if="song.can_move_down" v-on:click="move_down(song.id)"
|
||||
class="btn btn-link p-1 p-md-2"><i class="fa-solid fa-arrow-down"></i></button>
|
||||
<button v-else class="btn btn-link invisible p-1 p-md-2"><i class="fa-solid fa-arrow-down"></i></button>
|
||||
|
||||
<button v-if="song.can_delete" v-on:click="cancel_song(song.id)"
|
||||
class="btn btn-link p-1 p-md-2"><i class="fa-solid fa-trash-can"></i></button>
|
||||
<button v-else class="btn btn-link invisible p-1 p-md-2"><i class="fa-solid fa-trash-can"></i></button>
|
||||
<button v-if="song.can_move_down" v-on:click="move_down(song.id)" class="btn btn-link"><i
|
||||
class="fa-solid fa-arrow-down"></i></button>
|
||||
<button v-else class="btn btn-link invisible"><i class="fa-solid fa-arrow-down"></i></button>
|
||||
</div>
|
||||
<div class="d-flex flex-row">
|
||||
<button v-if="song.can_delete" v-on:click="cancel_song(song.id)" class="btn btn-link"><i
|
||||
class="fa-solid fa-trash-can"></i></button>
|
||||
<button v-else class="btn btn-link invisible"><i class="fa-solid fa-trash-can"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
@ -162,7 +128,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="request" role="tabpanel" aria-labelledby="request-tab">
|
||||
<div id="request-container" class="table-responsive">
|
||||
<div id="request-container">
|
||||
<table id="request-table" class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -173,7 +139,7 @@
|
||||
<th>Report</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="5"><input id="search-all" class="search-input" type="text" ref="search_textinput"
|
||||
<th colspan="5"><input id="search-all" class="search-input" type="text"
|
||||
v-model="search_input"/></th>
|
||||
</tr>
|
||||
</thead>
|
||||
@ -210,7 +176,7 @@
|
||||
</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>
|
||||
<option :value="i"><% i %></option>
|
||||
</template>
|
||||
</select>
|
||||
</th>
|
||||
@ -221,21 +187,21 @@
|
||||
<template v-for="(song, index) in songs">
|
||||
<tr>
|
||||
<td>
|
||||
${ song.artist }$
|
||||
<% song.artist %>
|
||||
</td>
|
||||
<td>
|
||||
<button v-on:click="request_song(song.id);" class="btn btn-link p-0 text-decoration-none">${ song.title }$</button>
|
||||
<button v-on:click="request_song(song.id);" class="btn btn-link p-0 text-decoration-none"><% song.title %></button>
|
||||
</td>
|
||||
<td>
|
||||
<template v-if="song.user === null">
|
||||
Marietje
|
||||
</template>
|
||||
<template v-else>
|
||||
${ song.user.name }$
|
||||
<% song.user.name %>
|
||||
</template>
|
||||
</td>
|
||||
<td>
|
||||
${ song.duration.secondsToMMSS() }$
|
||||
<% song.duration.secondsToMMSS() %>
|
||||
</td>
|
||||
<td>
|
||||
<button v-on:click="report_song(song.id);" class="btn btn-link p-0 text-decoration-none">
|
||||
@ -259,42 +225,21 @@
|
||||
const CAN_MOVE = {{ perms.queues.can_move|yesno:"1,0" }};
|
||||
</script>
|
||||
<script>
|
||||
const personal_queue_vue = createApp({
|
||||
delimiters: ['${', '}$'],
|
||||
data() {
|
||||
return {
|
||||
infobar: null,
|
||||
}
|
||||
},
|
||||
}).mount('#personal-queue-container');
|
||||
const queue_vue = createApp({
|
||||
delimiters: ['${', '}$'],
|
||||
data() {
|
||||
return {
|
||||
current_song: null,
|
||||
queue: [],
|
||||
user_data: null,
|
||||
refreshing: true,
|
||||
refreshTimer: null,
|
||||
clockInterval: null,
|
||||
started_at: null,
|
||||
playsIn: true,
|
||||
songs_show_details_on_mobile: [],
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
playsIn: {
|
||||
handler(val, oldVal) {
|
||||
this.update_infobar();
|
||||
setCookie("PLAYS_IN", this.playsIn, 14);
|
||||
}
|
||||
},
|
||||
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);
|
||||
|
||||
const stored_playsIn = getCookie("PLAYS_IN");
|
||||
this.playsIn = (stored_playsIn !== "false");
|
||||
},
|
||||
unmounted() {
|
||||
clearInterval(this.clockInterval);
|
||||
@ -357,14 +302,16 @@
|
||||
plays_in: this.playsIn,
|
||||
now_in_seconds: 0,
|
||||
}
|
||||
infoBar.now_in_seconds = Math.round((new Date()).getTime() / 1000);
|
||||
const now_in_seconds = Math.round((new Date()).getTime() / 1000);
|
||||
infoBar.now_in_seconds = now_in_seconds;
|
||||
let current_song_played = now_in_seconds - this.queue[0].started_at;
|
||||
// If the current song is the current user's, their queue has started.
|
||||
if (this.queue[0].user.id === this.user_data.id) {
|
||||
if (this.queue[0].user.id == this.user_data.id) {
|
||||
infoBar.start_personal_queue = 0;
|
||||
}
|
||||
for (let i = 0; i < this.queue.length; i++) {
|
||||
const current_song = this.queue[i];
|
||||
if (i === 0) {
|
||||
if (i == 0) {
|
||||
const current_song_remaining_seconds = current_song.song.duration - this.queue[1].time_until_song_seconds;
|
||||
infoBar['length_personal_queue'] -= current_song_remaining_seconds;
|
||||
infoBar['length_total_queue'] -= current_song_remaining_seconds;
|
||||
@ -374,11 +321,11 @@
|
||||
infoBar['length_personal_queue'] += current_song.song.duration;
|
||||
infoBar['end_personal_queue'] = infoBar['length_total_queue'];
|
||||
if (infoBar['start_personal_queue'] === null) {
|
||||
infoBar['start_personal_queue'] = infoBar['length_total_queue'] - current_song.song.duration - this.queue[1].time_until_song_seconds;
|
||||
infoBar['start_personal_queue'] = infoBar['length_total_queue'] - current_song.song.duration - this.queue[1].time_until_song_seconds
|
||||
}
|
||||
}
|
||||
}
|
||||
personal_queue_vue.infobar = infoBar;
|
||||
this.$emit("infobar", infoBar);
|
||||
},
|
||||
refresh() {
|
||||
if (!this.refreshing) {
|
||||
@ -463,34 +410,30 @@
|
||||
this.refresh();
|
||||
});
|
||||
},
|
||||
show_details(song) {
|
||||
return this.songs_show_details_on_mobile.includes(song.id);
|
||||
},
|
||||
toggle_details(song) {
|
||||
if (!this.show_details(song)) {
|
||||
this.songs_show_details_on_mobile.push(song.id);
|
||||
} else {
|
||||
// Deze filter is gehaat door Kees, gemaakt door Olaf. Bedankt, Olaf. Duurde wel even.
|
||||
this.songs_show_details_on_mobile = this.songs_show_details_on_mobile.filter(
|
||||
value => value !== song.id
|
||||
);
|
||||
}
|
||||
},
|
||||
}
|
||||
}).mount("#queue-container");
|
||||
});
|
||||
const personal_queue_vue = new Vue({
|
||||
el: '#personal-queue-container',
|
||||
delimiters: ['<%', '%>'],
|
||||
data: {
|
||||
infobar: [],
|
||||
},
|
||||
mounted() {
|
||||
queue_vue.$on("infobar", infoBar => this.infobar = infoBar);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
const request_vue = createApp({
|
||||
delimiters: ['${', '}$'],
|
||||
data() {
|
||||
return {
|
||||
songs: [],
|
||||
total_songs: 0,
|
||||
search_input: "",
|
||||
typing_timer: null,
|
||||
page_size: 10,
|
||||
page_number: 1,
|
||||
}
|
||||
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: {
|
||||
@ -582,7 +525,6 @@
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
request_song(song_id) {
|
||||
fetch('/api/v1/queues/current/request/', {
|
||||
method: 'POST',
|
||||
@ -595,8 +537,7 @@
|
||||
"Content-Type": 'application/json',
|
||||
},
|
||||
}).then(response => {
|
||||
// TODO: Communicate failure through HTTP error codes (403) instead of checking response.success.
|
||||
if (response.status === 200 && response.success) {
|
||||
if (response.status === 200) {
|
||||
return response.json();
|
||||
} else {
|
||||
throw response;
|
||||
@ -614,7 +555,6 @@
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
report_song(song_id) {
|
||||
let message = prompt("What is wrong with the song?");
|
||||
if (message === null) {
|
||||
@ -652,16 +592,11 @@
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
update_page(page_number) {
|
||||
this.page_number = page_number;
|
||||
},
|
||||
|
||||
select_textinput() {
|
||||
this.$refs.search_textinput.select();
|
||||
},
|
||||
}
|
||||
}
|
||||
}).mount('#request-container');
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
function volume_down() {
|
||||
|
||||
@ -86,7 +86,7 @@ class SongUploadAPIView(APIView):
|
||||
song = upload_file(file, artist, title, request.user)
|
||||
upload_counter.inc()
|
||||
return Response(status=200, data=self.serializer_class(song).data)
|
||||
except (UploadException, ConnectionRefusedError):
|
||||
except UploadException:
|
||||
return Response(
|
||||
status=500,
|
||||
data={
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
{% block title %}Manage{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-lg">
|
||||
<div class="container">
|
||||
<div class="table-responsive mt-5">
|
||||
<table id="request-table" class="table table-striped">
|
||||
<thead>
|
||||
@ -41,7 +41,7 @@
|
||||
</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>
|
||||
<option :value="i"><% i %></option>
|
||||
</template>
|
||||
</select>
|
||||
</th>
|
||||
@ -52,10 +52,10 @@
|
||||
<template v-for="(song, index) in songs">
|
||||
<tr>
|
||||
<td>
|
||||
${ song.artist }$
|
||||
<% song.artist %>
|
||||
</td>
|
||||
<td>
|
||||
<a :href="'/songs/edit/' + song.id + '/'" v-on:click="request_song(song.id);">${ song.title }$</a>
|
||||
<a :href="'/songs/edit/' + song.id + '/'" v-on:click="request_song(song.id);"><% song.title %></a>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
@ -64,18 +64,17 @@
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
let manage_vue = createApp({
|
||||
delimiters: ['${', '}$'],
|
||||
data() {
|
||||
return {
|
||||
songs: [],
|
||||
total_songs: 0,
|
||||
search_input: "",
|
||||
typing_timer: null,
|
||||
page_size: 10,
|
||||
page_number: 1,
|
||||
user_data: null,
|
||||
}
|
||||
let manage_vue = new Vue({
|
||||
el: '#request-table',
|
||||
delimiters: ['<%', '%>'],
|
||||
data: {
|
||||
songs: [],
|
||||
total_songs: 0,
|
||||
search_input: "",
|
||||
typing_timer: null,
|
||||
page_size: 10,
|
||||
page_number: 1,
|
||||
user_data: null,
|
||||
},
|
||||
watch: {
|
||||
search_input: {
|
||||
@ -168,6 +167,6 @@
|
||||
this.page_number = page_number;
|
||||
}
|
||||
}
|
||||
}).mount('#request-table');
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
@ -16,12 +16,9 @@
|
||||
{% csrf_token %}
|
||||
<div class="fileupload fileupload-new" data-provides="fileupload">
|
||||
<span class="btn btn-primary btn-file">
|
||||
<span v-if="fileObjects.length === 0 && !files_loading">
|
||||
<span v-if="fileObjects.length === 0">
|
||||
Select files
|
||||
</span>
|
||||
<span v-else-if="files_loading">
|
||||
Loading new files...
|
||||
</span>
|
||||
<span v-else>
|
||||
Change
|
||||
</span>
|
||||
@ -32,35 +29,26 @@
|
||||
<div class="songs">
|
||||
<div v-for="fileObject in fileObjects" class="song-container card mb-3">
|
||||
<div class="card-header">
|
||||
<h3>${ fileObject.name }$</h3>
|
||||
<h3><% fileObject.name %></h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-group mb-3">
|
||||
<div v-if="fileObject.artist === '' || fileObject.artist === null"
|
||||
class="alert alert-danger">Please enter an artist for this song.
|
||||
</div>
|
||||
<input v-if="upload_in_progress || uploaded" type="text" name="artist[]"
|
||||
class="form-control input-sm artist" disabled
|
||||
<div v-if="fileObject.artist === '' || fileObject.artist === null" class="alert alert-danger">Please enter an artist for this song.</div>
|
||||
<input v-if="upload_in_progress || uploaded" type="text" name="artist[]" class="form-control input-sm artist" disabled
|
||||
placeholder="Artist" v-model="fileObject.artist"/>
|
||||
<input v-else type="text" name="artist[]"
|
||||
class="form-control input-sm artist"
|
||||
<input v-else type="text" name="artist[]" class="form-control input-sm artist"
|
||||
placeholder="Artist" v-model="fileObject.artist"/>
|
||||
</div>
|
||||
<div class="form-group mb-3">
|
||||
<div v-if="fileObject.title === '' || fileObject.title === null"
|
||||
class="alert alert-danger">Please enter a title for this song.
|
||||
</div>
|
||||
<input v-if="upload_in_progress || uploaded" type="text" name="title[]"
|
||||
class="form-control input-sm title" disabled
|
||||
<div v-if="fileObject.title === '' || fileObject.title === null" class="alert alert-danger">Please enter a title for this song.</div>
|
||||
<input v-if="upload_in_progress || uploaded" type="text" name="title[]" class="form-control input-sm title" disabled
|
||||
placeholder="Title" v-model="fileObject.title"/>
|
||||
<input v-else type="text" name="title[]" class="form-control input-sm title"
|
||||
placeholder="Title" v-model="fileObject.title"/>
|
||||
</div>
|
||||
<template v-if="fileObject.upload_finished === true">
|
||||
<div v-if="fileObject.success === true" class="alert alert-success">Upload
|
||||
finished successfully.
|
||||
</div>
|
||||
<div v-else class="alert alert-danger">${ fileObject.error_message }$</div>
|
||||
<div v-if="fileObject.success === true" class="alert alert-success">Upload finished successfully.</div>
|
||||
<div v-else class="alert alert-danger"><% fileObject.error_message %></div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
@ -68,20 +56,14 @@
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="progress mt-2 mb-3">
|
||||
<div :class="{ 'progress-bar-animated': (upload_in_progress), 'bg-success': (uploaded && everything_successfully_uploaded), 'bg-danger': (uploaded && !everything_successfully_uploaded) }"
|
||||
class="progress-bar progress-bar-striped" role="progressbar"
|
||||
:style="{ width: (progress_bar_width + '%') }" aria-valuenow="50" aria-valuemin="0"
|
||||
aria-valuemax="100"></div>
|
||||
<div :class="{ 'progress-bar-animated': (upload_in_progress), 'bg-success': (uploaded && everything_successfully_uploaded), 'bg-danger': (uploaded && !everything_successfully_uploaded) }" class="progress-bar progress-bar-striped" role="progressbar" :style="{ width: (progress_bar_width + '%') }" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<template v-if="upload_in_progress || uploaded">
|
||||
<button v-if="uploaded" class="btn btn-primary btn-block w-100" v-on:click="clear">
|
||||
Clear
|
||||
</button>
|
||||
<button v-if="uploaded" class="btn btn-primary btn-block w-100" v-on:click="clear">Clear</button>
|
||||
<button v-else class="btn btn-primary btn-block w-100 disabled">Clear</button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<input v-if="ready_for_upload" id="upload" class="btn btn-primary btn-block w-100"
|
||||
type="submit" value="Upload" v-on:click="upload"/>
|
||||
<input v-if="ready_for_upload" id="upload" class="btn btn-primary btn-block w-100" type="submit" value="Upload" v-on:click="upload"/>
|
||||
<button v-else class="btn btn-primary btn-block w-100 disabled">Upload</button>
|
||||
</template>
|
||||
</div>
|
||||
@ -91,21 +73,20 @@
|
||||
</div>
|
||||
</div>
|
||||
<link rel="stylesheet" href="{% static 'songs/css/upload.css' %}"/>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsmediatags/3.9.5/jsmediatags.min.js"></script>
|
||||
<script>
|
||||
let upload_vue = createApp({
|
||||
delimiters: ['${', '}$'],
|
||||
data() {
|
||||
return {
|
||||
files: [],
|
||||
fileObjects: [],
|
||||
uploaded: false,
|
||||
upload_in_progress: false,
|
||||
files_loading: false,
|
||||
}
|
||||
<script type="module">
|
||||
import * as id3 from '//unpkg.com/id3js@^2/lib/id3.js';
|
||||
|
||||
let upload_vue = new Vue({
|
||||
el: '#uploadform',
|
||||
delimiters: ['<%', '%>'],
|
||||
data: {
|
||||
files: [],
|
||||
fileObjects: [],
|
||||
uploaded: false,
|
||||
upload_in_progress: false,
|
||||
},
|
||||
computed: {
|
||||
ready_for_upload: function () {
|
||||
ready_for_upload: function() {
|
||||
if (this.uploaded !== false || this.upload_in_progress !== false || this.fileObjects.length === 0) {
|
||||
return false;
|
||||
} else {
|
||||
@ -117,14 +98,14 @@
|
||||
return true;
|
||||
}
|
||||
},
|
||||
everything_successfully_uploaded: function () {
|
||||
everything_successfully_uploaded: function() {
|
||||
return this.fileObjects.map((fileObject) => {
|
||||
return fileObject.upload_finished === true && fileObject.success === true;
|
||||
}).reduce((previousValue, currentValue) => {
|
||||
return previousValue && currentValue;
|
||||
}, true);
|
||||
},
|
||||
progress_bar_width: function () {
|
||||
progress_bar_width: function() {
|
||||
if (this.fileObjects.length === 0) {
|
||||
return 0;
|
||||
}
|
||||
@ -177,20 +158,14 @@
|
||||
}).then(() => {
|
||||
this.fileObjects[i].success = true;
|
||||
}).catch(e => {
|
||||
console.log(e);
|
||||
if (e instanceof Response) {
|
||||
try {
|
||||
e.json().then(data => {
|
||||
this.fileObjects[i].error_message = data.errorMessage;
|
||||
this.fileObjects[i].success = false;
|
||||
});
|
||||
} catch {
|
||||
this.fileObjects[i].error_message = "An exception occurred while uploading this file, please try again.";
|
||||
this.fileObjects[i].success = false;
|
||||
}
|
||||
e.json().then(data => {
|
||||
this.fileObjects.error_message = data.errorMessage;
|
||||
this.fileObjects.success = false;
|
||||
});
|
||||
} else {
|
||||
this.fileObjects[i].error_message = "An exception occurred while uploading this file, please try again.";
|
||||
this.fileObjects[i].success = false;
|
||||
this.fileObjects.error_message = "An exception occurred while uploading this file, please try again.";
|
||||
this.fileObjects.success = false;
|
||||
}
|
||||
}).finally(() => {
|
||||
this.fileObjects[i].upload_finished = true;
|
||||
@ -202,25 +177,23 @@
|
||||
});
|
||||
},
|
||||
async set_new_files(event) {
|
||||
this.files_loading = true;
|
||||
this.uploaded = false;
|
||||
this.upload_in_progress = false;
|
||||
this.files = event.target.files;
|
||||
let newFileObjects = [];
|
||||
for (let i = 0; i < this.files.length; i++) {
|
||||
await this.parseSong(this.files[i]).then((song) => {
|
||||
try {
|
||||
const tags = await this.parseSong(this.files[i]);
|
||||
newFileObjects.push(
|
||||
{
|
||||
"file": this.files[i],
|
||||
"name": this.files[i].name,
|
||||
"artist": song.artist,
|
||||
"title": song.title,
|
||||
"artist": tags.artist,
|
||||
"title": tags.title,
|
||||
"success": null,
|
||||
"error_message": null,
|
||||
"upload_finished": false,
|
||||
}
|
||||
);
|
||||
}).catch(() => {
|
||||
} catch {
|
||||
newFileObjects.push(
|
||||
{
|
||||
"file": this.files[i],
|
||||
@ -232,28 +205,14 @@
|
||||
"upload_finished": false,
|
||||
}
|
||||
)
|
||||
});
|
||||
}
|
||||
}
|
||||
this.fileObjects = newFileObjects;
|
||||
this.files_loading = false;
|
||||
},
|
||||
async parseSong(file) {
|
||||
let jsMediaTags = window.jsmediatags;
|
||||
|
||||
const tags = await new Promise((resolve, reject) => {
|
||||
jsMediaTags.read(file, {
|
||||
onSuccess: function (tag) {
|
||||
resolve(tag);
|
||||
},
|
||||
onError: function (error) {
|
||||
reject(error);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
return tags.tags;
|
||||
parseSong(file) {
|
||||
return id3.fromFile(file);
|
||||
}
|
||||
}
|
||||
}).mount('#uploadform');
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
@ -28,7 +28,6 @@
|
||||
<th>#</th>
|
||||
<th>User</th>
|
||||
<th style="text-align: right;"># Songs</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -55,7 +54,6 @@
|
||||
<th>#</th>
|
||||
<th>User</th>
|
||||
<th style="text-align: right;"># Requests</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -111,7 +109,6 @@
|
||||
<th>#</th>
|
||||
<th>User</th>
|
||||
<th style="text-align: right;"># Unique</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -179,9 +176,7 @@
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h2>Most played uploaders</h2>
|
||||
<p>These are the {{ stats.stats_top_count }} people whose songs are requested most often by other
|
||||
people, as shown in the left column. The right column shows how many times that person has queued
|
||||
their own songs.</p>
|
||||
<p>These are the {{ stats.stats_top_count }} people whose songs are requested most often by other people, as shown in the left column. The right column shows how many times that person has queued his own songs.</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
@ -207,7 +202,7 @@
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h2>Most played songs last 14 days</h2>
|
||||
<p>These {{ stats.stats_top_count }} songs have been requested the most in the last two weeks.</p>
|
||||
<p>These songs are played the {{ stats.stats_top_count }} most in the last two weeks.</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
|
||||
@ -21,10 +21,9 @@
|
||||
{% endif %}
|
||||
<div class="col-md-6">
|
||||
<h2>Most played songs</h2>
|
||||
<p>You have requested <strong> {{ stats.unique_requests }} </strong> different songs a total of
|
||||
<strong> {{ stats.total_requests }} </strong> times. This means
|
||||
<strong> {% widthratio stats.unique_requests stats.total_requests 100 %}% </strong> of your requests
|
||||
have been unique. These are the song you have requested the most.</p>
|
||||
<p>You have requested <strong> {{ stats.unique_requests }} </strong> different
|
||||
songs a total of <strong> {{ stats.total_requests }} </strong> times. This
|
||||
means <strong> {% widthratio stats.unique_requests stats.total_requests 100 %}% </strong> of your requests have been unique. </p>
|
||||
<h4>Top {{ stats.stats_top_count }}:</h4>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped">
|
||||
@ -51,7 +50,6 @@
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h2>Most played artists</h2>
|
||||
<p>These are the artists you have requested the most.</p>
|
||||
<h4>Top {{ stats.stats_top_count }}:</h4>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped">
|
||||
@ -59,7 +57,7 @@
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Artist</th>
|
||||
<th style="white-space:nowrap; text-align: right;"># Requests</th>
|
||||
<th style="text-align: right;"># Requests</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -76,11 +74,11 @@
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h2>Uploads requested</h2>
|
||||
<p>You have uploaded a total of <strong> {{stats.total_uploads }} </strong> songs. The left column
|
||||
shows how many times these have been requested by other people. The right column shows how many times
|
||||
you requested your own songs. In total your songs have been queued
|
||||
<strong> {{stats.total_played_uploads }} </strong> times by others and
|
||||
<strong> {{stats.total_played_user_uploads }} </strong> times by yourself.</p>
|
||||
<p> You have uploaded a total of <strong> {{stats.total_uploads }} </strong> songs. The left column
|
||||
shows how many times these have been requested by other people. The right column shows
|
||||
how many times you requested your own songs. In total your songs
|
||||
have been queued <strong> {{stats.total_played_uploads }} </strong> times by others and
|
||||
<strong> {{stats.total_played_user_uploads }} </strong> by yourself.
|
||||
<h4>Top {{ stats.stats_top_count }}:</h4>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped">
|
||||
@ -89,8 +87,8 @@
|
||||
<th>#</th>
|
||||
<th>Artist</th>
|
||||
<th>Title</th>
|
||||
<th style="white-space:nowrap; text-align: right;"># Others</th>
|
||||
<th style="white-space:nowrap;"># You</th>
|
||||
<th style="text-align: right;">Others</th>
|
||||
<th>You</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -109,8 +107,8 @@
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h2>Upload artists requested</h2>
|
||||
<p>The left column shows how many times songs from artists uploaded by you have been requested by
|
||||
other people. The right column shows how many times you requested those songs.</p>
|
||||
<p> The left column shows how many times songs from artists uploaded by you have been requested by
|
||||
other people. The right column shows how many times you requested those songs.
|
||||
<h4>Top {{ stats.stats_top_count }}:</h4>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped">
|
||||
@ -118,8 +116,8 @@
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Artist</th>
|
||||
<th style="white-space:nowrap; text-align: right;"># Others</th>
|
||||
<th style="white-space:nowrap;"># You</th>
|
||||
<th style="text-align: right;">Others</th>
|
||||
<th>You</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -137,15 +135,14 @@
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h2>Most played uploaders</h2>
|
||||
<p>These are the people whose songs you have requested the most.</p>
|
||||
<p> The people whose songs you have queued the most are:</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Uploader</th>
|
||||
<th style="white-space:nowrap; text-align: right;"># Requests</th>
|
||||
<th></th>
|
||||
<th style="text-align: right;"># Requests</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -163,14 +160,14 @@
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h2>Biggest fans</h2>
|
||||
<p>These are the people that have requested your songs the most.</p>
|
||||
<p> The people that queued your songs the most are:</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>User</th>
|
||||
<th style="white-space:nowrap; text-align: right;"># Requests</th>
|
||||
<th style="text-align: right;"># Requests</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
[tool.poetry]
|
||||
name = "marietje"
|
||||
name = "MarietjeDjango"
|
||||
version = "4.1.0"
|
||||
description = "A music player for the south canteen of the Huygens building"
|
||||
authors = [
|
||||
|
||||
Reference in New Issue
Block a user