feat: add tags to playlist items in web interface

interface.py

@@ -181,9 +181,13 @@ def playlist():
     items = []
 
     for index, item_wrapper in enumerate(var.playlist):
+        tag_tuples = []
+        for tag in item_wrapper.item().tags:
+            tag_tuples.append([tag, tags_color_lookup[tag]])
+
         items.append(render_template('playlist.html',
                                      index=index,
-                                     tags_color_lookup=tags_color_lookup,
+                                     tag_tuples=tag_tuples,
                                      m=item_wrapper.item(),
                                      playlist=var.playlist
                                      )
@@ -491,8 +495,15 @@ def library():
                     'active_page': current_page
                 })
         elif request.form['action'] == 'edit_tags':
+            tags = list(dict.fromkeys(request.form['tags'].split(","))) # remove duplicated items
+            if request.form['id'] in var.cache:
+                music_wrapper = get_cached_wrapper_by_id(var.bot, request.form['id'], user)
+                music_wrapper.clear_tags()
+                music_wrapper.add_tags(tags)
+                var.playlist.version += 1
+            else:
                 item = var.music_db.query_music_by_id(request.form['id'])
-            item['tags'] = list(dict.fromkeys(request.form['tags'].split(","))) # remove duplicated items
+                item['tags'] = tags
                 var.music_db.insert_music(item)
             return redirect("./", code=302)
 

templates/index.html

@@ -598,7 +598,7 @@
                 tag.addClass('tag-clicked');
                 tag.removeClass('tag-unclicked');
             } else {
-                tag.addClass('tag-umclicked');
+                tag.addClass('tag-unclicked');
                 tag.removeClass('tag-clicked');
             }
             updateResults();
@@ -684,8 +684,7 @@
 
             var tag_edit_copy = tag_edit_element.clone();
             tag_edit_copy.click(function(){
-                addTagModalPrepare(item.id, item.title, item.tags);
-                add_tag_modal.modal('show');
+                addTagModalShow(item.id, item.title, item.tags);
             });
             tag_edit_copy.appendTo(tags);
 
@@ -895,7 +894,7 @@
         var modal_tag = $(".modal-tag");
         var modal_tag_text = $(".modal-tag-text");
 
-        function addTagModalPrepare(_id, _title, _tag_tuples){
+        function addTagModalShow(_id, _title, _tag_tuples){
             add_tag_modal_title.html("Edit tags for " + _title);
             add_tag_modal_item_id.val(_id);
             add_tag_modal_tags.empty();
@@ -910,6 +909,7 @@
                 tag_copy.appendTo(add_tag_modal_tags);
                 modal_tag_text.html("");
             });
+            add_tag_modal.modal('show');
         }
 
         function addTagModalAdd(){

templates/playlist.html

@@ -39,8 +39,11 @@
                 Unknown Artist
             {% endif %}
             <br />
-            {% for tag in m.tags %}
-                <span class="badge badge-{{ tags_color_lookup[tag] }}">{{ tag }}</span>
+
+            <a class="tag-space tag-click"
+               onclick='addTagModalShow("{{ m.id }}", "{{ m.title }}", {{ tag_tuples | tojson }});'><i class="fas fa-edit" style="color: #AAAAAA"></i></a>
+            {% for tag_tuple in tag_tuples %}
+                <span class="badge badge-{{ tag_tuple[1] }}">{{ tag_tuple[0] }}</span>
             {% endfor %}
         </div>
     </td>