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

Add playlist editor
---

diff --git a/main.py b/main.py
index dad5977..aee0141 100644
--- a/main.py
+++ b/main.py
@@ -179,7 +179,7 @@ def users_profile(profile_username):
             user_accolor=profile_data["accolor"],
             playlists=plist_data,
             songs=songs,
-            song_list=render_template("song-list.html", songs=songs))
+            song_list=render_template("song-list.html", songs=songs, is_profile_song_list=True))
 
 @app.post("/edit-profile")
 def edit_profile():
@@ -727,13 +727,13 @@ def create_playlist():
     flash_and_log(f"Created playlist {name}", "success")
     return redirect(request.referrer)
 
-@app.post("/delete-playlist/<int:playlistid>")
+@app.get("/delete-playlist/<int:playlistid>")
 def delete_playlist(playlistid):
     if not "userid" in session:
         abort(401)
 
     # Make sure playlist exists
-    plist_data = query_db("select * from playlists where playlistid = ?", args=[playlistid])
+    plist_data = query_db("select * from playlists where playlistid = ?", args=[playlistid], one=True)
     if not plist_data:
         abort(404)
 
@@ -746,7 +746,7 @@ def delete_playlist(playlistid):
     get_db().commit()
 
     flash_and_log(f"Deleted playlist {plist_data['name']}", "success")
-    return redirect(request.referrer)
+    return redirect(f"/users/{session['username']}")
 
 @app.post("/append-to-playlist")
 def append_to_playlist():
@@ -770,7 +770,7 @@ def append_to_playlist():
     songid = request.form["songid"]
 
     # Make sure song exists
-    song_data = query_db("select * from songs where songid = ?", args=[songid])
+    song_data = query_db("select * from songs where songid = ?", args=[songid], one=True)
     if not song_data:
         abort(404)
 
@@ -786,7 +786,9 @@ def append_to_playlist():
     query_db("update playlists set updated = ? where playlistid = ?", args=[timestamp, playlistid])
     get_db().commit()
 
-    return {"status": "ok"}
+    flash_and_log(f"Added '{song_data['title']}' to {plist_data['name']}", "success")
+
+    return redirect(request.referrer)
 
 @app.post("/edit-playlist/<int:playlistid>")
 def edit_playlist_post(playlistid):
@@ -794,7 +796,7 @@ def edit_playlist_post(playlistid):
         abort(401)
 
     # Make sure playlist exists
-    plist_data = query_db("select * from playlists where playlistid = ?", args=[playlistid])
+    plist_data = query_db("select * from playlists where playlistid = ?", args=[playlistid], one=True)
     if not plist_data:
         abort(404)
 
@@ -802,32 +804,30 @@ def edit_playlist_post(playlistid):
     if session["userid"] != plist_data["userid"]:
         abort(401)
 
-    private = request.form["type"] == "private"
-
     # Make sure all songs are valid
-    songids = []
-    for field, value in request.form.items():
-        if field.startswith("position-"):
-            try:
-                position = int(field[len("position-"):])
-                songid = int(value)
-            except ValueError:
-                abort(400)
-
-            song_data = query_db("select * from songs where songid = ?", args=[songid])
-            if not song_data:
-                abort(400)
-
-            # Song is valid, add to list
-            songids.append((position, songid))
+    try:
+        songids = [int(s) for s in request.form["songids"].split(",")]
+    except ValueError:
+        # Invalid songid(s)
+        abort(400)
+
+    for songid in songids:
+        song_data = query_db("select * from songs where songid = ?", args=[songid])
+        if not song_data:
+            abort(400)
 
     # All songs valid - delete old songs
     query_db("delete from playlist_songs where playlistid = ?", args=[playlistid])
 
     # Re-add songs with new positions
-    for position, songid in songids:
+    for position, songid in enumerate(songids):
         query_db("insert into playlist_songs (playlistid, position, songid) values (?, ?, ?)", args=[playlistid, position, songid])
 
+    # Update private, name
+    private = int(request.form["type"] == "private")
+    name = request.form["name"]
+    query_db("update playlists set private = ?, name = ? where playlistid = ?", [private, name, playlistid])
+
     get_db().commit()
 
     flash_and_log("Playlist updated", "success")
@@ -855,7 +855,10 @@ def playlists(playlistid):
     return render_template(
             "playlist.html",
             name=plist_data["name"],
+            playlistid=plist_data["playlistid"],
+            userid=plist_data["userid"],
             username=plist_data["username"],
+            songs=songs,
             song_list=render_template("song-list.html", songs=songs))
 
 def flash_and_log(msg, category=None):
@@ -922,6 +925,7 @@ def get_db():
     db = getattr(g, '_database', None)
     if db is None:
         db = g._database = sqlite3.connect(DATA_DIR / "database.db")
+        db.cursor().execute("PRAGMA foreign_keys = ON")
 
         # Get current version
         user_version = query_db("pragma user_version", one=True)[0]
diff --git a/schema_update.sql b/schema_update.sql
index 44b610c..3d065f2 100644
--- a/schema_update.sql
+++ b/schema_update.sql
@@ -6,7 +6,7 @@ CREATE TABLE playlists (
     name TEXT NOT NULL,
     private INTEGER NOT NULL,
 
-    FOREIGN KEY(userid) REFERENCES users(userid)
+    FOREIGN KEY(userid) REFERENCES users(userid) ON DELETE CASCADE
 );
 CREATE INDEX playlists_by_userid ON playlists(userid);
 
@@ -16,8 +16,8 @@ CREATE TABLE playlist_songs (
     songid INTEGER NOT NULL,
 
     PRIMARY KEY(playlistid, position),
-    FOREIGN KEY(playlistid) REFERENCES playlists(playlistid),
-    FOREIGN KEY(songid) REFERENCES songs(songid)
+    FOREIGN KEY(playlistid) REFERENCES playlists(playlistid) ON DELETE CASCADE,
+    FOREIGN KEY(songid) REFERENCES songs(songid) ON DELETE CASCADE
 );
 CREATE INDEX playlist_songs_by_playlist ON playlist_songs(playlistid);
 
diff --git a/static/styles.css b/static/styles.css
index 130bc63..54aeb80 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -65,7 +65,15 @@ input[type=text], input[type=password], input[type=url] {
     border: 0px;
     border-radius: 5px;
     padding: 8px;
-    margin: 10px;
+}
+
+select {
+    border: none;
+    background-color: var(--purple);
+    color: var(--yellow);
+    border-radius: 5px;
+    font-size: 16px;
+    padding: 8px;
 }
 
 div.main {
@@ -197,6 +205,10 @@ input[type=file] {
     border: solid 2px var(--purple);
 }
 
+.profile-bio {
+    margin: 10px 0px;
+}
+
 .profile-action {
     margin-bottom: 20px;
 }
@@ -209,6 +221,24 @@ input[type=file] {
     margin: 10px;
 }
 
+.playlist-list-entry {
+    box-shadow: 0px 0px 5px 0px;
+    border-radius: 10px;
+    padding: 10px;
+    margin: 10px 0px;
+}
+
+.draggable-song {
+    box-shadow: 0px 0px 5px 0px;
+    border-radius: 10px;
+    padding: 5px 10px;
+    margin: 10px 0px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 10px;
+}
+
 /* Coloris Color Picker */
 
 .clr-field button {
diff --git a/templates/playlist.html b/templates/playlist.html
index e298333..f2f622a 100644
--- a/templates/playlist.html
+++ b/templates/playlist.html
@@ -2,12 +2,137 @@
 
 {% block title %}{{ name }}{% endblock %}
 
-{% block body %}
+{% block body -%}
 
 <h1>{{ name }}</h1>
 
 <p>Playlist by <a href="/users/{{ username }}" class="profile-link">{{ username }}</a></p>
 
+{% if session["userid"] == userid -%}
+<p class="playlist-actions">
+<button class="button" onclick="showPlaylistEditor()">Edit</button>
+<button class="button" onclick="deletePlaylist()">Delete</button>
+</p>
+
+<script>
+function showPlaylistEditor() {
+    document.querySelector(".song-list").hidden = true;
+    document.querySelector(".playlist-actions").hidden = true;
+    document.querySelector(".playlist-editor").hidden = false;
+}
+
+function hidePlaylistEditor() {
+    document.querySelector(".song-list").hidden = false;
+    document.querySelector(".playlist-actions").hidden = false;
+    document.querySelector(".playlist-editor").hidden = true;
+}
+
+function deletePlaylist() {
+    if (confirm("Are you sure you want to delete this playlist?")) {
+        window.location.href = "/delete-playlist/{{ playlistid }}";
+    }
+}
+</script>
+
+{%- endif %}
+
 {{ song_list|safe }}
 
-{% endblock %}
+{% if session["userid"] == userid -%}
+<!-- Drag-and-drop playlist editor -->
+<div class="playlist-editor" hidden>
+    <h2>Edit Playlist</h2>
+    <form action="/edit-playlist/{{ playlistid }}" method="post" onsubmit="updateSongIds(event)">
+        <label for="name">Playlist Name</label><br>
+        <input name="name" type="text" maxlength="100" value="{{ name }}"/><br>
+
+        <label for="type">Playlist Type:</label>
+        <input name="type" type="radio" value="private" checked />
+        <label for="private">Private</label>
+        <input name="type" type="radio" value="public" />
+        <label for="public">Public</label><br>
+
+        <input id="playlist-songids-input" type="hidden" name="songids" value="-1" /> <!-- Populated by script on submit -->
+
+        <p>Drag and drop songs to reorder them, or use the trash icon to remove them from the playlist.</p>
+
+        <div class="edit-list">
+            {%- for song in songs %}
+            <div class="draggable-song" draggable="true" ondragstart="onSongDragStart(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">
+                    <img class="lsp_btn_delete02" alt="Delete">
+                </button>
+            </div>
+            {%- endfor %}
+
+            <!-- dummy song to move to end -->
+            <div class="draggable-song" ondragover="onSongDragOver(event)" ondrop="onSongDrop(event)">
+                &nbsp;
+            </div>
+        </div>
+
+        <a href="javascript:hidePlaylistEditor()">Cancel</a>
+        <input type="submit" value="Save" style="margin: 10px;"/>
+    </form>
+
+    <script>
+    function updateSongIds(event) {
+        var form = event.currentTarget;
+        var editList = form.querySelector(".edit-list");
+        var songids = [];
+        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 = "";
+        }
+        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];
+        if (sourceElement !== event.currentTarget) {
+            sourceElement.remove();
+            list.insertBefore(sourceElement, event.currentTarget);
+        }
+    }
+    </script>
+</div>
+{%- endif %}
+
+{%- endblock %}
diff --git a/templates/profile.html b/templates/profile.html
index 37f6ba0..f9ae7f5 100644
--- a/templates/profile.html
+++ b/templates/profile.html
@@ -145,7 +145,7 @@
         <label for="public">Public</label><br>
 
         <a href="javascript:hideAddPlaylist();">Cancel</a>
-        <input type="submit" value="Create Playlist" />
+        <input type="submit" value="Create Playlist" style="margin: 10px;"/>
     </form>
     <script>
         function showAddPlaylist() {
diff --git a/templates/song-list.html b/templates/song-list.html
index f587fae..3ec4440 100644
--- a/templates/song-list.html
+++ b/templates/song-list.html
@@ -32,7 +32,7 @@
             <div class="song-buttons">
 
                 <!-- Owner-Specific Buttons (Edit/Delete) -->
-                {% if session["userid"] == song.userid %}
+                {% if session["userid"] == song.userid and is_profile_song_list %}
                 <a href="/edit-song?songid={{ song.songid }}" class="song-list-button">
                     <img class="lsp_btn_edit02" alt="Edit">
                 </a>
@@ -57,7 +57,15 @@
             {% if current_user_playlists %}
             <!-- Add to Playlist Buttons -->
             <div class="song-playlist-controls">
-                <button type="button" class="button" onclick="return showPlaylistSelector(event, {{ song.songid }})">Add to Playlist</button>
+                <form action="/append-to-playlist" method="post">
+                    <input type="hidden" name="songid" value="{{ song.songid }}" id="playlist-selector-songid"/>
+                    <select name="playlistid">
+                        <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>
+                        {%- endfor %}
+                    </select>
+                </form>
             </div>
             {% endif %}
 
@@ -148,58 +156,26 @@
         </div>
     </div>
 {% endfor %}
-
-    {% if current_user_playlists -%}
-    <!-- Playlist selector, shown when Add to Playlist is clicked -->
-    <div class="playlist-selector" hidden>
-        <form action="/append-to-playlist" method="post">
-            <input type="hidden" name="songid" value="-1" id="playlist-selector-songid"/>
-            <select name="playlistid">
-                {% for plist in current_user_playlists -%}
-                <option value="{{ plist.playlistid }}">{{ plist['name'] }}</option>
-                {%- endfor %}
-            </select>
-            <input type="submit" value="submit" />
-        </form>
-    </div>
-    {%- endif %}
 </div>
 
 <script>
 function showDetails(event) {
     var songElement = event.target.closest(".song");
-
-    for (const child of songElement.children) {
-        if (child.classList.contains("song-details")) {
-            if (child.hidden) {
-                // Show details
-                child.hidden = false;
-                event.target.alt = "Hide Details";
-                event.target.className = "lsp_btn_hide02";
-                event.target.src = customImage(document.getElementById("lsp_btn_hide02"));
-            }
-            else {
-                // Hide details
-                child.hidden = true;
-                event.target.alt = "Show Details";
-                event.target.className = "lsp_btn_show02";
-                event.target.src = customImage(document.getElementById("lsp_btn_show02"));
-            }
-        }
+    var songDetails = songElement.querySelector(".song-details");
+    if (songDetails.hidden) {
+        // Show details
+        songDetails.hidden = false;
+        event.target.alt = "Hide Details";
+        event.target.className = "lsp_btn_hide02";
+        event.target.src = customImage(document.getElementById("lsp_btn_hide02"));
+    }
+    else {
+        // Hide details
+        songDetails.hidden = true;
+        event.target.alt = "Show Details";
+        event.target.className = "lsp_btn_show02";
+        event.target.src = customImage(document.getElementById("lsp_btn_show02"));
     }
     return false;
 }
-
-{% if current_user_playlists %}
-var m_addToPlaylistSongid = null;
-function showPlaylistSelector(event, songid) {
-    m_addToPlaylistSongid = songid;
-    var songList = event.target.closest(".song-list");
-    var playlistSelector = songList.querySelector(".playlist-selector");
-    playlistSelector.hidden = false;
-    var songidInput = playlistSelector.querySelector("#playlist-selector-songid")
-    songidInput.value = songid
-    return false;
-}
-{% endif %}
 </script>