Fix playlist editor bugs

diff --git a/main.py b/main.py
index aee0141471709b7f846a9b437fc9981b2b786d0a..86987b2cfdc175b0955524d1754f8047ff550f59 100644 (file)
--- 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 f2f622a9002291d5a67ecfae304488ce0db144ee..15e2d6e7a5e8c91042745dc5cf04b98387a12f37 100644 (file)
--- 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 3ec44405e5c31051389536f6d920fc9d5b6d962b..829176f70170d92932bc50d4bc64cea80c2eebb5 100644 (file)
--- 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>