technicie/MarietjeDjango
1
0
Fork 0
mirror of https://gitlab.science.ru.nl/technicie/MarietjeDjango.git synced 2025-12-09 16:32:20 +01:00
Code Issues Packages Projects Releases Wiki Activity

Keep song details unfolded between refreshes

Browse Source 
Closes #79
This commit is contained in:
Kees van Kempen
2024-02-27 12:11:43 +01:00
parent 5acf553269
commit ad94fe7930
1 changed files with 20 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
marietje/queues/templates/queues/queue.html
View File

@ -83,21 +83,20 @@
</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="playsIn = false">(Plays in)</span>
<span v-else class="btn btn-link p-0 d-sm-none" v-on:click="playsIn = true">(Plays At)</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>
</tr>
</thead>
<tbody class="queuebody">
<template v-for="(song, index) in queue">
<!-- TODO: Remember show_details_on_small_screens value on queue refresh. Maybe add separate list. This is a good place for todo notes. -->
<tr :class="{ marietjequeue: (song.user === null),
underline_cell: (index === queue[-1]),
currentsong: (index === 0),}"
v-on:click="song.show_details_on_small_screens = !song.show_details_on_small_screens">
v-on:click="toggle_details(song)">
<td>
<span class="artist">${ song.song.artist }$</span>
<span v-if="song.show_details_on_small_screens" class="requested-by d-sm-none d-block small mt-3 fw-normal">
<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
@ -109,7 +108,7 @@
</td>
<td>
<span class="title">${ song.song.title }$</span>
<span v-if="song.show_details_on_small_screens && 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="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>
@ -278,6 +277,7 @@
clockInterval: null,
started_at: null,
playsIn: true,
songs_show_details_on_mobile: [],
}
},
watch: {
@ -457,6 +457,20 @@
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 {
const index = this.songs_show_details_on_mobile.indexOf(song.id);
if (index > -1) {
this.songs_show_details_on_mobile.splice(index, 1);
}
}
},
}
}).mount("#queue-container");
</script>