From ad94fe793020d0524a510861f0786ad3d2fe732e Mon Sep 17 00:00:00 2001
From: Kees van Kempen <k.vankempen@student.science.ru.nl>
Date: Tue, 27 Feb 2024 12:11:43 +0100
Subject: [PATCH 1/2] Keep song details unfolded between refreshes

Closes #79
---
 marietje/queues/templates/queues/queue.html | 26 ++++++++++++++++-----
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/marietje/queues/templates/queues/queue.html b/marietje/queues/templates/queues/queue.html
index e611013..8087d0b 100644
--- a/marietje/queues/templates/queues/queue.html
+++ b/marietje/queues/templates/queues/queue.html
@@ -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>

From 77728c9a8247c8b7f2aca23183d824ee009aaece Mon Sep 17 00:00:00 2001
From: Kees van Kempen <k.vankempen@student.science.ru.nl>
Date: Tue, 27 Feb 2024 12:48:52 +0100
Subject: [PATCH 2/2] Replace shift shit with array filter

Co-Authored-By: Olaf Slomp <git@oslomp.nl>
---
 marietje/queues/templates/queues/queue.html | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/marietje/queues/templates/queues/queue.html b/marietje/queues/templates/queues/queue.html
index 8087d0b..20db3f8 100644
--- a/marietje/queues/templates/queues/queue.html
+++ b/marietje/queues/templates/queues/queue.html
@@ -463,12 +463,11 @@
                 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);
-                        }
+                    } 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
+                        );
                     }
                 },
             }