From c061d1c3044be52c59ce72aa436278bac9e21c05 Mon Sep 17 00:00:00 2001
From: Lars van Rhijn <larsvanrhijn@gmail.com>
Date: Wed, 4 Oct 2023 20:21:43 +0200
Subject: [PATCH] Fix scroll bug and add success/error messages

---
 marietje/queues/templates/queues/queue.html | 37 ++++++++++++++-------
 1 file changed, 25 insertions(+), 12 deletions(-)

diff --git a/marietje/queues/templates/queues/queue.html b/marietje/queues/templates/queues/queue.html
index be7c2ad..f9e857e 100644
--- a/marietje/queues/templates/queues/queue.html
+++ b/marietje/queues/templates/queues/queue.html
@@ -93,17 +93,22 @@
                                     </template>
                                 </td>
                                 <td>
-                                    <a href="#" v-if="song.can_move_up" v-on:click="move_down(queue[index-1].id)"><i
-                                            class="fa-solid fa-arrow-up"></i></a>
-                                    <a href="#" v-else class="invisible"><i class="fa-solid fa-arrow-up"></i></a>
+                                    <div class="d-flex flex-column">
+                                        <div class="d-flex flex-row">
+                                            <button v-if="song.can_move_up" v-on:click="move_down(queue[index-1].id)" class="btn btn-link"><i
+                                            class="fa-solid fa-arrow-up"></i></button>
+                                            <button v-else class="btn btn-link invisible"><i class="fa-solid fa-arrow-up"></i></button>
 
-                                    <a href="#" v-if="song.can_move_down" v-on:click="move_down(song.id)"><i
-                                            class="fa-solid fa-arrow-down"></i></a>
-                                    <a href="#" v-else class="invisible"><i class="fa-solid fa-arrow-down"></i></a>
-
-                                    <a href="#" v-if="song.can_delete" v-on:click="cancel_song(song.id)"><i
-                                            class="fa-solid fa-trash-can"></i></a>
-                                    <a href="#" v-else class="invisible"><i class="fa-solid fa-trash-can"></i></a>
+                                            <button v-if="song.can_move_down" v-on:click="move_down(song.id)" class="btn btn-link"><i
+                                                    class="fa-solid fa-arrow-down"></i></button>
+                                            <button v-else class="btn btn-link invisible"><i class="fa-solid fa-arrow-down"></i></button>
+                                        </div>
+                                        <div class="d-flex flex-row">
+                                            <button v-if="song.can_delete" v-on:click="cancel_song(song.id)" class="btn btn-link"><i
+                                            class="fa-solid fa-trash-can"></i></button>
+                                            <button v-else class="btn btn-link invisible"><i class="fa-solid fa-trash-can"></i></button>
+                                        </div>
+                                    </div>
                                 </td>
                             </tr>
                         </template>
@@ -352,7 +357,11 @@
                                 "Content-Type": 'application/json',
                             },
                         }
-                    ).finally(() => {
+                    ).then(() => {
+                        tata.success("", "Removed song from the queue.");
+                    }).catch(() => {
+                        tata.error("", "An error occurred while removing the song, please try again.");
+                    }).finally(() => {
                         this.refresh();
                     });
                 },
@@ -367,7 +376,11 @@
                                 "Content-Type": 'application/json',
                             },
                         }
-                    ).finally(() => {
+                    ).then(() => {
+                        tata.success("", "Song was moved successfully.");
+                    }).catch(() => {
+                        tata.error("", "An error occurred while moving the song, please try again.");
+                    }).finally(() => {
                         this.refresh();
                     });
                 }