From: Christian Heller <c.heller@plomlompom.de>
Date: Sat, 15 Feb 2025 06:22:46 +0000 (+0100)
Subject: Improve tag selection interface in files index.
X-Git-Url: https://plomlompom.com/repos/%7B%7B%20web_path%20%7D%7D/booking/static/%7B%7Bprefix%7D%7D/feed.xml?a=commitdiff_plain;p=ytplom

Improve tag selection interface in files index.
---

diff --git a/src/templates/_macros.tmpl b/src/templates/_macros.tmpl
index 9c70226..602d2d3 100644
--- a/src/templates/_macros.tmpl
+++ b/src/templates/_macros.tmpl
@@ -3,3 +3,12 @@
 {% if display_name %}{{display_name}}{% else %}{{target}}{% endif %}
 {% if cond %}</a>{% endif %}
 {% endmacro %}
+
+
+{% macro js_new_child_to() %}
+function new_child_to(tag, parent, textContent='') {
+    const el = document.createElement(tag);
+    parent.appendChild(el);
+    el.textContent = textContent;
+    return el; }
+{% endmacro %}
diff --git a/src/templates/files.tmpl b/src/templates/files.tmpl
index e447c2a..e0fc5b6 100644
--- a/src/templates/files.tmpl
+++ b/src/templates/files.tmpl
@@ -1,11 +1,62 @@
 {% extends '_base.tmpl' %}
 
 
+{% block script %}
+{{ macros.js_new_child_to() }}
+
+const all_tags = {{showable_tags|tojson|safe}};
+var needed_tags = {{needed_tags|tojson|safe}};
+
+function select_tag() {
+  if (tags_select.selectedIndex < 1) {
+    return;
+  }
+  const chosen_tag = document.getElementById('tags_select').value;
+  needed_tags.push(chosen_tag);
+  reload_selector();
+}
+
+function reload_selector() {
+  const tags_select = document.getElementById('tags_select');
+  while (tags_select.options.length > 0) {
+    tags_select.remove(0);
+  }
+  new_child_to('option', tags_select, 'add tag');
+  all_tags.forEach((tag) => {
+    if (needed_tags.includes(tag)) {
+      return;
+    }
+    const option = new_child_to('option', tags_select, tag);
+  });
+  const tags_div = document.getElementById("tags");
+  tags_div.innerHTML = '';
+  needed_tags.forEach((chosen_tag) => {
+    const tag_text_node = document.createTextNode(` ${chosen_tag} `);
+    tags_div.appendChild(tag_text_node);
+    const btn_del = new_child_to('button', tags_div, 'x');
+    btn_del.onclick = function() {
+      tag_text_node.remove();
+      btn_del.remove();
+      needed_tags = needed_tags.filter(tag => tag !== chosen_tag);
+      reload_selector();
+    };
+    const input = new_child_to('input', tags_div);
+    input.type = 'hidden';
+    input.name = 'needed_tag';
+    input.value = chosen_tag;
+  });
+}
+
+window.addEventListener('load', reload_selector);
+{% endblock %}
+
+
 {% block body %}
 <form method="GET">
-filter filename: <input name="filter_path" value="{{filter_path}}" />
-needed tags: <input name="needed_tags" value="{{needed_tags}}" />
-show absent: <input type="checkbox" name="show_absent" {% if show_absent %}checked{% endif %}/>
+<input type="checkbox" name="show_absent" {% if show_absent %}checked{% endif %}/> show absent<br />
+filename: <input name="filter_path" value="{{filter_path}}" /><br />
+tags: <span id="tags"></span><br />
+<select id="tags_select" onchange="select_tag()"></select><br />
 <input type="submit" value="filter" />
 </form>
 <p>known files (shown: {{files|length}}):</p>
diff --git a/src/templates/playlist.tmpl b/src/templates/playlist.tmpl
index c4cdeb7..a27d4a2 100644
--- a/src/templates/playlist.tmpl
+++ b/src/templates/playlist.tmpl
@@ -2,17 +2,12 @@
 
 
 {% block script %}
+{{ macros.js_new_child_to() }}
 
 const CLS_PLAYLIST_ROW = 'playlist_row';
 events_params += 'playlist=1';
 var first_load = true;
 
-function new_child_to(tag, parent, textContent='') {
-    const el = document.createElement(tag);
-    parent.appendChild(el);
-    el.textContent = textContent;
-    return el; }
-
 event_handlers.push(function(data) {  // update playlist
     const table = document.getElementById('playlist_rows');
     var old_rows = document.getElementsByClassName(CLS_PLAYLIST_ROW);
diff --git a/src/ytplom/http.py b/src/ytplom/http.py
index 4f30f13..a17b00e 100644
--- a/src/ytplom/http.py
+++ b/src/ytplom/http.py
@@ -301,20 +301,22 @@ class _TaskHandler(PlomHttpHandler):
 
     def _send_files_index(self) -> None:
         filter_path = FilterStr(self.params.first_for('filter_path'))
-        needed_tags_str = self.params.first_for('needed_tags')
         show_absent = bool(self.params.first_for('show_absent'))
+        needed_tags_list = self.params.all_for('needed_tag')
         with DbConn() as conn:
             files = VideoFile.get_filtered(
                     conn,
                     filter_path,
-                    TagSet.from_joined(needed_tags_str),
+                    TagSet(set(needed_tags_list)),
                     show_absent)
+            showable_tags = sorted(list(VideoFile.all_tags_showable(conn)))
         files.sort(key=lambda t: t.rel_path)
         self._send_rendered_template(_NAME_TEMPLATE_FILES,
                                      {'files': files,
                                       'selected': 'files',
                                       'filter_path': filter_path,
-                                      'needed_tags': needed_tags_str,
+                                      'showable_tags': showable_tags,
+                                      'needed_tags': needed_tags_list,
                                       'show_absent': show_absent})
 
     def _send_missing_json(self) -> None:
diff --git a/src/ytplom/misc.py b/src/ytplom/misc.py
index 51a39aa..010a2fb 100644
--- a/src/ytplom/misc.py
+++ b/src/ytplom/misc.py
@@ -390,9 +390,17 @@ class VideoFile(DbData):
             and needed_tags_seen.whitelisted(cls.tags_display_whitelist
                                              ).are_all_in(f.tags)]
 
+    @classmethod
+    def all_tags_showable(cls, conn) -> TagSet:
+        """Show all used tags passing .tags_display_whitelist."""
+        tags = TagSet()
+        for file in cls.get_all(conn):
+            tags.add(file.tags.whitelisted(cls.tags_display_whitelist))
+        return tags
+
     @property
     def tags_showable(self) -> TagSet:
-        """Show .tags passing .tags_display_whitelist, if latter set."""
+        """Show .tags passing .tags_display_whitelist."""
         return self.tags.whitelisted(self.tags_display_whitelist)
 
     def unused_tags(self, conn: DbConn) -> TagSet: