FrederikBaerentsen/BrickTracker
4
6
Fork 6
Code Issues 13 Pull Requests 2 Actions Packages Projects 1 Releases 4 Wiki Activity

Add a clear button for dynamic input

Browse Source
This commit is contained in:
Gregoo 2025-01-29 16:14:52 +01:00
parent e8a8899b3c
commit bfae90c247
2 changed files with 23 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
static/scripts/changer.js
View File

@ -3,6 +3,7 @@ class BrickChanger {
constructor(prefix, id, url, parent = undefined) { constructor(prefix, id, url, parent = undefined) {
this.prefix = prefix this.prefix = prefix
this.html_element = document.getElementById(`${prefix}-${id}`); 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_status = document.getElementById(`status-${prefix}-${id}`);
this.html_type = this.html_element.getAttribute("type"); this.html_type = this.html_element.getAttribute("type");
this.url = url; this.url = url;
@ -24,6 +25,13 @@ class BrickChanger {
this.html_element.addEventListener(listener, ((changer) => (e) => { this.html_element.addEventListener(listener, ((changer) => (e) => {
changer.change(); changer.change();
})(this)); })(this));
if (this.html_clear) {
this.html_clear.addEventListener("click", ((changer) => (e) => {
changer.html_element.value = "";
changer.change();
})(this));
}
} }
// Clean the status // Clean the status

29
templates/macro/form.html
View File

@ -1,12 +1,12 @@
{% macro checkbox(prefix, id, text, url, checked, delete=false) %} {% macro checkbox(prefix, id, text, url, checked, delete=false) %}
{% if g.login.is_authenticated() %} {% if g.login.is_authenticated() %}
<input class="form-check-input" type="checkbox" id="{{ prefix }}-{{ id }}" {% if checked %}checked{% endif %} <input class="form-check-input" type="checkbox" id="{{ prefix }}-{{ id }}" {% if checked %}checked{% endif %}
{% if not delete %} {% if not delete %}
data-changer-id="{{ id }}" data-changer-prefix="{{ prefix }}" data-changer-url="{{ url }}" data-changer-parent="set" data-changer-id="{{ id }}" data-changer-prefix="{{ prefix }}" data-changer-url="{{ url }}" data-changer-parent="set"
{% else %} {% else %}
disabled disabled
{% endif %} {% endif %}
autocomplete="off"> autocomplete="off">
<label class="form-check-label" for="{{ prefix }}-{{ id }}"> <label class="form-check-label" for="{{ prefix }}-{{ id }}">
{{ text }} <i id="status-{{ prefix }}-{{ id }}" class="mb-1"></i> {{ text }} <i id="status-{{ prefix }}-{{ id }}" class="mb-1"></i>
</label> </label>
@ -23,16 +23,17 @@
<label class="visually-hidden" for="{{ prefix }}-{{ id }}">{{ name }}</label> <label class="visually-hidden" for="{{ prefix }}-{{ id }}">{{ name }}</label>
<div class="input-group"> <div class="input-group">
<input class="form-control form-control-sm flex-shrink-1" type="text" id="{{ prefix }}-{{ id }}" value="{% if value %}{{ value }}{% endif %}" <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 }}" data-changer-id="{{ id }}" data-changer-prefix="{{ prefix }}" data-changer-url="{{ url }}"
{% else %} {% else %}
disabled disabled
{% endif %} {% endif %}
autocomplete="off"> autocomplete="off">
{% if g.login.is_authenticated() %} {% if g.login.is_authenticated() %}
<span id="status-{{ prefix }}-{{ id }}" class="input-group-text ri-save-line"></span> <span id="status-{{ prefix }}-{{ id }}" class="input-group-text ri-save-line"></span>
{% else %} <button id="clear-{{ prefix }}-{{ id }}" type="button" class="btn btn-sm btn-light btn-outline-danger border"><i class="ri-eraser-line"></i></button>
<span class="input-group-text ri-prohibited-line"></span> {% else %}
<span class="input-group-text ri-prohibited-line"></span>
{% endif %} {% endif %}
</div> </div>
{% endif %} {% endif %}