More work on comments

diff --git a/main.py b/main.py
index e390285775dedb3d5bbc738a821eee9e9f541324..244d889fa547859c9c4fe598c60cc5563f81194a 100644 (file)
--- a/main.py
+++ b/main.py
@@ -489,9 +489,9 @@ def comment_get():
         abort(401) # Must be logged in
 
     comment = None
-    if "commentid" in request.args:
-        commentid = request.args["commentid"]
-        comment = query_db("select * from song_comments inner join users on song_comments.userid == users.userid where commentid = ?", [commentid], one=True)
+    if "replytoid" in request.args:
+        replytoid = request.args["replytoid"]
+        comment = query_db("select * from song_comments inner join users on song_comments.userid == users.userid where commentid = ?", [replytoid], one=True)
 
     session["previous_page"] = request.referrer
     return render_template("comment.html", song=song, comment=comment)
@@ -507,9 +507,9 @@ def comment_post():
         abort(404) # Invald songid
 
     comment = None
-    if "commentid" in request.args:
-        commentid = request.args["commentid"]
-        comment = query_db("select * from song_comments inner join users on song_comments.userid == users.userid where commentid = ?", [commentid], one=True)
+    if "replytoid" in request.args:
+        replytoid = request.args["replytoid"]
+        comment = query_db("select * from song_comments inner join users on song_comments.userid == users.userid where commentid = ?", [replytoid], one=True)
         if not comment:
             abort(404) # Invalid comment
 
@@ -521,7 +521,7 @@ def comment_post():
     content = request.form["content"]
     userid = session["userid"]
     songid = request.args["songid"]
-    replytoid = request.args.get("commentid", None)
+    replytoid = request.args.get("replytoid", None)
     query_db(
             "insert into song_comments (songid, userid, replytoid, created, content) values (?, ?, ?, ?, ?)",
             args=[songid, userid, replytoid, timestamp, content])
@@ -607,6 +607,7 @@ class Song:
         comments = query_db("select * from song_comments inner join users on song_comments.userid == users.userid where songid = ?", [self.songid])
         # Top-level comments
         song_comments = sorted([dict(c) for c in comments if c["replytoid"] is None], key=lambda c: c["created"])
+        song_comments = list(reversed(song_comments))
         # Replies (can only reply to top-level)
         for comment in song_comments:
             comment["replies"] = sorted([c for c in comments if c["replytoid"] == comment["commentid"]], key=lambda c: c["created"])

diff --git a/static/styles.css b/static/styles.css
index 3745edb85bfbb647da0780c1601da8dddbd62787..e6a7de8abddadf6a41275f03eef6085746750613 100644 (file)
--- a/static/styles.css
+++ b/static/styles.css
@@ -215,6 +215,31 @@ div.song-tags {
     margin: 10px;
 }
 
+div.song-comments {
+    margin: 10px;
+}
+
+div.top-level-comment {
+    margin-top: 10px;
+    padding: 10px;
+    box-shadow: 0px 0px 5px 0px;
+    border-radius: 10px;
+}
+
+div.reply-comment {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    padding: 10px;
+    box-shadow: 0px 0px 5px 0px;
+    border-radius: 10px;
+}
+
+div.comment-button-container {
+    display: flex;
+    gap: 10px;
+    margin-top: 10px;
+}
+
 [hidden] {
     display: none !important;
 }

diff --git a/templates/song-list.html b/templates/song-list.html
index 4809f9f95950b8b51f1ae83ac36eba3a7dcd258d..206bbf8e39dde28a10246a4dcf94c4a572724b83 100644 (file)
--- a/templates/song-list.html
+++ b/templates/song-list.html
@@ -65,22 +65,70 @@
 
             <!-- Song Comments -->
             <div class="song-comments">
-                Comments:
+                Comments:<br>
                 <a href="/comment?songid={{ song.songid }}">Add a Comment</a>
 
                 {% for comment in song.get_comments() %}
                 <div class="top-level-comment">
-                    <a href="/users/{{ comment['username'] }}" class="profile-link">{{ comment['username'] }}</a>
-                    <p>{{ comment['content'] }}</p>
+
+                    <a href="/users/{{ comment['username'] }}" class="profile-link">{{ comment['username'] }}:</a>
+                    {{ comment['content'] }}
+
+                    {% if session['userid'] == comment['userid'] or session['userid'] == song.userid %}
+                    <div class="comment-button-container">
+                    {% endif %}
+
+                        <!-- Only commenter can edit comment -->
+                        {% if session['userid'] == comment['userid'] %}
+                        <a href="/comment?commentid={{ comment['commentid'] }}&songid={{ song.songid }}" class="comment-button">
+                            Edit
+                        </a>
+                        {% endif %}
+
+                        <!-- Commenter and song owner can delete comment -->
+                        {% if session['userid'] == comment['userid'] or session['userid'] == song.userid %}
+                        <a href="/delete-comment/{{ comment['commentid'] }}" onclick="return confirm(&#34;Are you sure you want to delete this comment?&#34;)" class="comment-button">
+                            Delete
+                        </a>
+                        {% endif %}
+
+                    {% if session['userid'] == comment['userid'] or session['userid'] == song.userid %}
+                    </div>
+                    {% endif %}
 
                     {% for reply in comment['replies'] %}
                     <div class="reply-comment">
-                        <a href="/users/{{ reply['username'] }}" class="profile-link">{{ reply['username'] }}</a>
-                        <p>{{ reply['content'] }}</p>
+
+                        <a href="/users/{{ reply['username'] }}" class="profile-link">{{ reply['username'] }}:</a>
+                        {{ reply['content'] }}
+
+                        {% if session['userid'] == reply['userid'] or session['userid'] == song.userid %}
+                        <div class="comment-button-container">
+                        {% endif %}
+
+                            <!-- Only commenter can edit comment -->
+                            {% if session['userid'] == reply['userid'] %}
+                            <a href="/comment?commentid={{ reply['commentid'] }}&songid={{ song.songid }}&replytoid={{ comment['commentid'] }}" class="comment-button">
+                                Edit
+                            </a>
+                            {% endif %}
+
+                            <!-- Commenter and song owner can delete comment -->
+                            {% if session['userid'] == reply['userid'] or session['userid'] == song.userid %}
+                            <a href="/delete-comment/{{ reply['commentid'] }}" onclick="return confirm(&#34;Are you sure you want to delete this comment?&#34;)" class="comment-button">
+                                Delete
+                            </a>
+                            {% endif %}
+
+                        {% if session['userid'] == reply['userid'] or session['userid'] == song.userid %}
+                        </div>
+                        {% endif %}
                     </div>
                     {% endfor %}
 
-                    <a href="/comment?songid={{ song.songid }}&commentid={{ comment['commentid'] }}">Reply</a>
+                    <div class="comment-button-container">
+                        <a href="/comment?songid={{ song.songid }}&replytoid={{ comment['commentid'] }}">Reply</a>
+                    </div>
                 </div>
                 {% endfor %}
             </div>