Merge branch 'feature/improve-queueable' into 'marietje-zuid'

Improvement to the visibility of already queued songs

See merge request technicie/MarietjeDjango!96

marietje/marietje/static/marietje/css/custom.css

@@ -117,6 +117,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;

marietje/queues/templates/queues/queue.html

@@ -221,7 +221,7 @@
                         </tfoot>
                         <tbody>
                         <template v-for="(song, index) in songs">
-                            <tr>
+                            <tr v-bind:class="{disabled: is_in_queue(song)}">
                                 <td>
                                     ${ song.artist }$
                                 </td>
@@ -240,7 +240,7 @@
                                     ${ song.duration.secondsToMMSS() }$
                                 </td>
                                 <td>
-                                    <button v-on:click="report_song(song.id);" class="btn btn-link p-0">
+                                    <button v-on:click="report_song(song.id);" class="btn btn-link p-0" style="pointer-events: auto">
                                         ⚑
                                     </button>
                                 </td>
@@ -585,6 +585,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/', {