From: Chris Fulljames <christianfulljames@gmail.com>
Date: Sat, 15 Feb 2025 23:58:03 +0000 (-0500)
Subject: Fix playlist editor bugs
X-Git-Url: https://littlesong.place/gitweb/gitweb.cgi?a=commitdiff_plain;h=ffa9e4d7a6233eb646d2356ee7161fc83ef5c50c;p=littlesongplace.git

Fix playlist editor bugs
---

diff --git a/main.py b/main.py
index aee0141..86987b2 100644
--- a/main.py
+++ b/main.py
@@ -821,6 +821,7 @@ def edit_playlist_post(playlistid):
 
     # Re-add songs with new positions
     for position, songid in enumerate(songids):
+        print(position, songid)
         query_db("insert into playlist_songs (playlistid, position, songid) values (?, ?, ?)", args=[playlistid, position, songid])
 
     # Update private, name
@@ -856,6 +857,7 @@ def playlists(playlistid):
             "playlist.html",
             name=plist_data["name"],
             playlistid=plist_data["playlistid"],
+            private=plist_data["private"],
             userid=plist_data["userid"],
             username=plist_data["username"],
             songs=songs,
@@ -1034,8 +1036,9 @@ class Song:
             select * from playlist_songs
             inner join songs on playlist_songs.songid = songs.songid
             inner join users on songs.userid = users.userid
+            where playlistid = ?
             order by playlist_songs.position asc
-            """)
+            """, [playlistid])
 
     @classmethod
     def _from_db(cls, query, args=()):
diff --git a/templates/playlist.html b/templates/playlist.html
index f2f622a..15e2d6e 100644
--- a/templates/playlist.html
+++ b/templates/playlist.html
@@ -47,9 +47,9 @@ function deletePlaylist() {
         <input name="name" type="text" maxlength="100" value="{{ name }}"/><br>
 
         <label for="type">Playlist Type:</label>
-        <input name="type" type="radio" value="private" checked />
+        <input name="type" type="radio" value="private" {% if private %}checked{% endif %} />
         <label for="private">Private</label>
-        <input name="type" type="radio" value="public" />
+        <input name="type" type="radio" value="public" {% if not private %}checked{% endif %}/>
         <label for="public">Public</label><br>
 
         <input id="playlist-songids-input" type="hidden" name="songids" value="-1" /> <!-- Populated by script on submit -->
@@ -58,12 +58,12 @@ function deletePlaylist() {
 
         <div class="edit-list">
             {%- for song in songs %}
-            <div class="draggable-song" draggable="true" ondragstart="onSongDragStart(event)" ondragover="onSongDragOver(event)" ondrop="onSongDrop(event)">
+            <div class="draggable-song" draggable="true" ondragstart="onSongDragStart(event)" ondragend="clearDragMarker(event)" ondragover="onSongDragOver(event)" ondrop="onSongDrop(event)">
                 <span class="songid" hidden>{{ song.songid }}</span>
                 <span class="song-title">{{ song.title }}</span> -
                 <span class="song-artist">{{ song.username }}</span>
-                <span style="width: 100%"></span>
-                <button onclick="removeSong(event)" class="song-list-button" title="Remove" style="margin-right: 0px">
+                <span style="margin: auto"></span>
+                <button type="button" onclick="removeSong(event)" class="song-list-button" title="Remove" style="margin-right: 0px">
                     <img class="lsp_btn_delete02" alt="Delete">
                 </button>
             </div>
@@ -87,50 +87,56 @@ function deletePlaylist() {
         for (const entry of editList.children) {
             var songidSpan = entry.querySelector(".songid");
             if (songidSpan) {
-                console.log(songidSpan.textContent);
                 songids.push(songidSpan.textContent);
             }
         }
         songids = songids.join(",");
-        console.log(songids);
 
         var songidsInput = form.querySelector("#playlist-songids-input");
         songidsInput.value = songids;
     }
+
     function onSongDragStart(event) {
         var list = event.currentTarget.closest(".edit-list");
         var index = [...list.children].indexOf(event.currentTarget);
         event.dataTransfer.setData("text", index.toString());
         event.dataTransfer.effectAllowed = "move";
     }
+
     function onSongDragOver(event) {
         event.preventDefault();
         event.dataTransfer.dropEffect = "move";
-        var list = event.currentTarget.closest(".edit-list");
-        for (const child of list.children) {
-            child.style.borderTop = "";
-            child.style.borderBottom = "";
-        }
+        clearDragMarker(event);
         if (event.currentTarget.previousElementSibling) {
             event.currentTarget.previousElementSibling.style.borderBottom = "3px solid var(--purple)";
         }
         event.currentTarget.style.borderTop = "3px solid var(--purple)";
     }
+
     function onSongDrop(event) {
         event.preventDefault();
         const data = event.dataTransfer.getData("text");
         var sourceIndex = parseInt(data);
         var list = event.currentTarget.closest(".edit-list");
-        for (const child of list.children) {
-            child.style.borderTop = "";
-            child.style.borderBottom = "";
-        }
         var sourceElement = list.children[sourceIndex];
+        clearDragMarker(event);
         if (sourceElement !== event.currentTarget) {
             sourceElement.remove();
             list.insertBefore(sourceElement, event.currentTarget);
         }
     }
+
+    function clearDragMarker(event) {
+        var list = event.currentTarget.closest(".edit-list");
+        for (const child of list.children) {
+            child.style.borderTop = "";
+            child.style.borderBottom = "";
+        }
+    }
+
+    function removeSong(event) {
+        event.currentTarget.closest(".draggable-song").remove();
+    }
     </script>
 </div>
 {%- endif %}
diff --git a/templates/song-list.html b/templates/song-list.html
index 3ec4440..829176f 100644
--- a/templates/song-list.html
+++ b/templates/song-list.html
@@ -59,10 +59,10 @@
             <div class="song-playlist-controls">
                 <form action="/append-to-playlist" method="post">
                     <input type="hidden" name="songid" value="{{ song.songid }}" id="playlist-selector-songid"/>
-                    <select name="playlistid">
+                    <select name="playlistid" onchange="this.closest('form').submit()">
                         <option value="-1">Add to Playlist...</option>
                         {% for plist in current_user_playlists -%}
-                        <option value="{{ plist.playlistid }}" onclick="this.closest('form').submit()">{{ plist['name'] }}</option>
+                        <option value="{{ plist.playlistid }}">{{ plist['name'] }}</option>
                         {%- endfor %}
                     </select>
                 </form>