pass tags as separate inputs

This looks way better than doing wonky space-separated things.

5 files changed, 11 insertions, 26 deletions

diff --git a/fietsboek/static/fietsboek.js b/fietsboek/static/fietsboek.js
index f21f0b5..dd5b9bf 100644
--- a/fietsboek/static/fietsboek.js
+++ b/fietsboek/static/fietsboek.js
@@ -1,22 +1,6 @@
 function tagClicked(event) {
-  /* We clicked on the little icon */
-  if (event.target.tagName.toLowerCase() == "i") {
-    event.target.parentNode.parentNode.removeChild(event.target.parentNode);
-  } else {
-    event.target.parentNode.removeChild(event.target);
-  }
-  updateTagList();
-}
-
-function updateTagList() {
-  let input = document.querySelector('#formTagsInput');
-  if (input) {
-    input.value = "";
-    document.querySelectorAll(".tag-badge").forEach((t) => {
-      input.value += t.textContent + " ";
-    });
-    input.value = input.value.trim();
-  }
+  let span = event.target.closest('span');
+  span.parentNode.removeChild(span);
 }
 
 function checkPasswordValidity(main, repeat) {
@@ -104,11 +88,15 @@ document.addEventListener('DOMContentLoaded', function(event) {
       icon.classList.add("bi");
       icon.classList.add("bi-x");
       node.appendChild(icon);
+      let input = document.createElement("input");
+      input.hidden = true;
+      input.name = "tag[]";
+      input.value = $("#new-tag").value;
+      node.appendChild(input);
       $("#formTags").appendChild(node);
       let space = document.createTextNode(" ");
       $("#formTags").appendChild(space);
       $("#new-tag").value = "";
-      updateTagList();
     });
   }
 
@@ -123,9 +111,6 @@ document.addEventListener('DOMContentLoaded', function(event) {
   /* Enable clicking on a tag to remove it */
   document.querySelectorAll(".tag-badge").forEach((t) => t.addEventListener("click", tagClicked));
 
-  /* Initialize the pre-loaded tags */
-  updateTagList();
-
   /* Enable tooltips */
   var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
   var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
diff --git a/fietsboek/templates/edit_form.jinja2 b/fietsboek/templates/edit_form.jinja2
index aebd37f..e3aaba5 100644
--- a/fietsboek/templates/edit_form.jinja2
+++ b/fietsboek/templates/edit_form.jinja2
@@ -23,7 +23,7 @@
   <div>{{ _("page.track.form.tags") }}</div>
   <div id="formTags">
     {% for tag in tags %}
-    <span class="tag-badge badge rounded-pill bg-info text-dark">{{ tag }} <i class="bi bi-x"></i></span>
+    <span class="tag-badge badge rounded-pill bg-info text-dark">{{ tag }} <i class="bi bi-x"></i><input type="hidden" value="{{ tag }}" name="tag[]"></span>
     {% endfor %}
   </div>
   <div class="row">
@@ -34,7 +34,6 @@
       <button type="button" class="btn btn-primary" id="add-tag-btn">{{ _("page.track.form.add_tag") }}</buttton>
     </div>
   </div>
-  <input type="hidden" name="tags" id="formTagsInput">
 </div>
 <div class="mb-3">
   <div>{{ _("page.track.form.tagged_people") }}</div>
diff --git a/fietsboek/views/account.py b/fietsboek/views/account.py
index e7b1efd..2816325 100644
--- a/fietsboek/views/account.py
+++ b/fietsboek/views/account.py
@@ -33,6 +33,7 @@ def do_create_account(request):
     :return: The HTTP response.
     :rtype: pyramid.response.Response
     """
+    # pylint: disable=duplicate-code
     if not request.registry.settings['enable_account_registration']:
         return HTTPForbidden()
     password = request.params["password"]
diff --git a/fietsboek/views/edit.py b/fietsboek/views/edit.py
index 4b842fb..aad3539 100644
--- a/fietsboek/views/edit.py
+++ b/fietsboek/views/edit.py
@@ -61,7 +61,7 @@ def do_edit(request):
     track.description = request.params["description"]
     track.date = datetime.datetime.fromisoformat(request.params["date"])
     track.badges = badges
-    tags = set(filter(bool, request.params["tags"].split(" ")))
+    tags = request.params.getall("tag[]")
     track.sync_tags(tags)
 
     return HTTPFound(request.route_url('details', id=track.id))
diff --git a/fietsboek/views/upload.py b/fietsboek/views/upload.py
index 00b2a67..debd248 100644
--- a/fietsboek/views/upload.py
+++ b/fietsboek/views/upload.py
@@ -155,7 +155,7 @@ def do_finish_upload(request):
         link_secret=util.random_alphanum_string(),
         tagged_people=tagged_people,
     )
-    tags = set(filter(bool, request.params["tags"].split(" ")))
+    tags = request.params.getall("tag[]")
     track.sync_tags(tags)
     track.gpx_data = upload.gpx_data
     request.dbsession.add(track)