From 6d545dddcc152a2b2f07b697e7e245d4f69b111d Mon Sep 17 00:00:00 2001
From: Tjibbe <tjibbe.gottmer@science.ru.nl>
Date: Mon, 6 May 2024 13:55:19 +0200
Subject: [PATCH] feat: grey-out already queued songs and make unclickable

---
 marietje/marietje/static/marietje/css/custom.css | 5 +++++
 marietje/queues/templates/queues/queue.html      | 8 ++++++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/marietje/marietje/static/marietje/css/custom.css b/marietje/marietje/static/marietje/css/custom.css
index e5e7055..6c65b57 100644
--- a/marietje/marietje/static/marietje/css/custom.css
+++ b/marietje/marietje/static/marietje/css/custom.css
@@ -113,6 +113,11 @@ footer {
     color: red !important;
 }
 
+.disabled {
+    pointer-events: none;
+    opacity: 0.5;
+}
+
 /* Bootstrap 3 doesn't support equal height columns, hack via <https://medium.com/wdstack/bootstrap-equal-height-columns-d07bc934eb27#892f> */
 .row.display-flex {
   display: flex;
diff --git a/marietje/queues/templates/queues/queue.html b/marietje/queues/templates/queues/queue.html
index e38035e..40b6602 100644
--- a/marietje/queues/templates/queues/queue.html
+++ b/marietje/queues/templates/queues/queue.html
@@ -219,7 +219,7 @@
                         </tfoot>
                         <tbody>
                         <template v-for="(song, index) in songs">
-                            <tr>
+                            <tr v-bind:class="{disabled: is_in_queue(song)}">
                                 <td>
                                     ${ song.artist }$
                                 </td>
@@ -238,7 +238,7 @@
                                     ${ song.duration.secondsToMMSS() }$
                                 </td>
                                 <td>
-                                    <button v-on:click="report_song(song.id);" class="btn btn-link p-0 text-decoration-none">
+                                    <button v-on:click="report_song(song.id);" class="btn btn-link p-0 text-decoration-none" style="pointer-events: auto">
                                         ⚑
                                     </button>
                                 </td>
@@ -581,6 +581,10 @@
                         }
                     });
                 },
+                is_in_queue(song) {
+                    return queue_vue.queue.filter(queuesong => Boolean(queuesong.user)
+                            ).map((queuesong) => queuesong.song.hash).includes(song.hash);
+                },
 
                 request_song(song_id) {
                     fetch('/api/v1/queues/current/request/', {