From cb58ef83cccbfbb7966e4af51cc1eccef003b87f Mon Sep 17 00:00:00 2001
From: Gregoo <versatile.mailbox@gmail.com>
Date: Wed, 29 Jan 2025 16:14:52 +0100
Subject: [PATCH] Add a clear button for dynamic input

---
 static/scripts/changer.js |  8 ++++++++
 templates/macro/form.html | 29 +++++++++++++++--------------
 2 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/static/scripts/changer.js b/static/scripts/changer.js
index e3a32f8..8cb005f 100644
--- a/static/scripts/changer.js
+++ b/static/scripts/changer.js
@@ -3,6 +3,7 @@ class BrickChanger {
     constructor(prefix, id, url, parent = undefined) {
         this.prefix = prefix
         this.html_element = document.getElementById(`${prefix}-${id}`);
+        this.html_clear = document.getElementById(`clear-${prefix}-${id}`);
         this.html_status = document.getElementById(`status-${prefix}-${id}`);
         this.html_type = this.html_element.getAttribute("type");
         this.url = url;
@@ -24,6 +25,13 @@ class BrickChanger {
         this.html_element.addEventListener(listener, ((changer) => (e) => {
             changer.change();
         })(this));
+
+        if (this.html_clear) {
+            this.html_clear.addEventListener("click", ((changer) => (e) => {
+                changer.html_element.value = "";
+                changer.change();
+            })(this));
+        }
     }
 
     // Clean the status
diff --git a/templates/macro/form.html b/templates/macro/form.html
index 4844822..499c220 100644
--- a/templates/macro/form.html
+++ b/templates/macro/form.html
@@ -1,12 +1,12 @@
 {% macro checkbox(prefix, id, text, url, checked, delete=false) %}
   {% if g.login.is_authenticated() %}
     <input class="form-check-input" type="checkbox" id="{{ prefix }}-{{ id }}" {% if checked %}checked{% endif %}
-        {% if not delete %}
-          data-changer-id="{{ id }}" data-changer-prefix="{{ prefix }}" data-changer-url="{{ url }}" data-changer-parent="set"
-        {% else %}
-          disabled
-        {% endif %}
-    autocomplete="off">
+    {% if not delete %}
+      data-changer-id="{{ id }}" data-changer-prefix="{{ prefix }}" data-changer-url="{{ url }}" data-changer-parent="set"
+    {% else %}
+      disabled
+    {% endif %}
+      autocomplete="off">
     <label class="form-check-label" for="{{ prefix }}-{{ id }}">
       {{ text }} <i id="status-{{ prefix }}-{{ id }}" class="mb-1"></i>
     </label>
@@ -23,16 +23,17 @@
     <label class="visually-hidden" for="{{ prefix }}-{{ id }}">{{ name }}</label>
     <div class="input-group">
       <input class="form-control form-control-sm flex-shrink-1" type="text" id="{{ prefix }}-{{ id }}" value="{% if value %}{{ value }}{% endif %}"
-  {% if g.login.is_authenticated() %}
+      {% if g.login.is_authenticated() %}
         data-changer-id="{{ id }}" data-changer-prefix="{{ prefix }}" data-changer-url="{{ url }}"
-  {% else %}
-      disabled
-  {% endif %}
-      autocomplete="off">
-  {% if g.login.is_authenticated() %}
+      {% else %}
+        disabled
+      {% endif %}
+        autocomplete="off">
+      {% if g.login.is_authenticated() %}
         <span id="status-{{ prefix }}-{{ id }}" class="input-group-text ri-save-line"></span>
-  {% else %}
-    <span class="input-group-text ri-prohibited-line"></span>
+        <button id="clear-{{ prefix }}-{{ id }}" type="button" class="btn btn-sm btn-light btn-outline-danger border"><i class="ri-eraser-line"></i></button>
+      {% else %}
+        <span class="input-group-text ri-prohibited-line"></span>
       {% endif %}
     </div>
   {% endif %}