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

Merge branch 'fix/remember-song-details-unfold' into 'marietje-zuid'

Browse Source 
Keep song details unfolded between refreshes

Closes #79

See merge request technicie/MarietjeDjango!86
This commit is contained in:
Kees van Kempen
2024-02-27 20:56:24 +01:00
parent fe186ffa99 77728c9a82
commit 13448a2eec
1 changed files with 19 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -83,21 +83,20 @@
</td> </td>
<td class="col-md-1"> <td class="col-md-1">
<span class="control-icons">Control</span> <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-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="playsIn = true">(Plays At)</span> <span v-else class="btn btn-link p-0 d-sm-none" v-on:click="toggle_details(song)">(Plays At)</span>
</td> </td>
</tr> </tr>
</thead> </thead>
<tbody class="queuebody"> <tbody class="queuebody">
<template v-for="(song, index) in queue"> <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), <tr :class="{ marietjequeue: (song.user === null),
underline_cell: (index === queue[-1]), underline_cell: (index === queue[-1]),
currentsong: (index === 0),}" 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> <td>
<span class="artist">${ song.song.artist }$</span> <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> Requested by:<br>
<template v-if="song.user === null"> <template v-if="song.user === null">
Marietje Marietje
@ -109,7 +108,7 @@
</td> </td>
<td> <td>
<span class="title">${ song.song.title }$</span> <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-if="playsIn">Plays In:</span>
<span v-else>Plays At:</span> <span v-else>Plays At:</span>
<br> <br>
@ -278,6 +277,7 @@
clockInterval: null, clockInterval: null,
started_at: null, started_at: null,
playsIn: true, playsIn: true,
songs_show_details_on_mobile: [],
} }
}, },
watch: { watch: {
@ -461,6 +461,19 @@
this.refresh(); 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"); }).mount("#queue-container");
</script> </script>