From ead0b1f90d4c5032f5797b54a0f6fcd0554ead63 Mon Sep 17 00:00:00 2001
From: Gregoo <versatile.mailbox@gmail.com>
Date: Wed, 29 Jan 2025 15:57:19 +0100
Subject: [PATCH] Add visually hidden label for dynamic input, move read-only
 logic in the macro

---
 bricktracker/part.py      |  2 +-
 static/styles.css         |  2 +-
 templates/macro/form.html | 13 ++++++++++---
 templates/part/table.html | 10 ++--------
 4 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/bricktracker/part.py b/bricktracker/part.py
index af901b2..c847db5 100644
--- a/bricktracker/part.py
+++ b/bricktracker/part.py
@@ -73,7 +73,7 @@ class BrickPart(RebrickablePart):
 
     # A identifier for HTML component
     def html_id(self) -> str:
-        components: list[str] = []
+        components: list[str] = ['part']
 
         if self.fields.figure is not None:
             components.append(self.fields.figure)
diff --git a/static/styles.css b/static/styles.css
index ee82ffe..0651e20 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -46,7 +46,7 @@
     object-fit:contain;
 }
 
-.table-td-missing {
+.table-td-input {
     max-width: 150px;
 }
 
diff --git a/templates/macro/form.html b/templates/macro/form.html
index cd126e9..f88b673 100644
--- a/templates/macro/form.html
+++ b/templates/macro/form.html
@@ -16,8 +16,13 @@
   {% endif %}
 {% endmacro %}
 
-{% macro input(id, html_id, url, value) %}
-  <input class="form-control form-control-sm flex-shrink-1" type="text" value="{% if value %}{{ value }}{% endif %}"
+{% macro input(name, id, prefix, url, value, all=none, read_only=none) %}
+  {% if all or read_only %}
+    {{ value }}
+  {% else %}
+    <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() %}
       onchange="change_part_missing_amount(this, '{{ id }}', '{{ html_id }}', '{{ url }}')"
   {% else %}
@@ -25,8 +30,10 @@
   {% endif %}
       autocomplete="off">
   {% if g.login.is_authenticated() %}
-    <span id="status-part-{{ id }}-{{ html_id }}" class="input-group-text ri-save-line"></span>
+        <span id="status-{{ prefix }}-{{ id }}" class="input-group-text ri-save-line"></span>
   {% else %}
     <span class="input-group-text ri-prohibited-line"></span>
+      {% endif %}
+    </div>
   {% endif %}
 {% endmacro %}
diff --git a/templates/part/table.html b/templates/part/table.html
index b7139ed..692a7dc 100644
--- a/templates/part/table.html
+++ b/templates/part/table.html
@@ -28,14 +28,8 @@
           {% endif %}
         {% endif %}
         {% if not no_missing %}
-          <td {% if not all %}id="sort-part-{{ item.fields.id }}-{{ item.html_id() }}" data-sort="{{ item.fields.total_missing }}"{% endif %} class="table-td-missing">
-            {% if all or read_only_missing %}
-              {{ item.fields.total_missing }}
-            {% else %}
-            <div class="input-group">
-              {{ form.input(item.fields.id, item.html_id(), item.url_for_missing(), item.fields.total_missing) }}
-            </div>
-            {% endif %}
+          <td data-sort="{{ item.fields.total_missing }}" class="table-td-input">
+            {{ form.input('Missing', item.fields.id, item.html_id(), item.url_for_missing(), item.fields.total_missing, all=all, read_only=read_only_missing) }}
           </td>
         {% endif %}
         {% if all %}