Bugfix: External spool

Improvement: Use fragments in templates
Features: Manual fill of empty tray
Bump version to 0.1.3

templates/fragments/list_spools.html

@@ -0,0 +1,51 @@
+<!-- Empty State -->
+{% if spools|length == 0 or not spools %}
+<div class="alert alert-info text-center" role="alert">
+  No spools available to tag at the moment.
+</div>
+{% else %}
+
+<!-- Spool List -->
+<div class="list-group">
+  {% for spool in spools %}
+  <!-- Individual Spool Item -->
+  {% if action_fill %}<a href="{{ url_for('fill', spool_id=spool.id, ams=ams_id, tray=tray_id) }}"
+     class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">{% endif %}
+  {% if action_assign %}<a href="{{ url_for('write_tag', spool_id=spool.id) }}"
+     class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">{% endif %}
+    <!-- Left: Filament Color Badge -->
+    <div class="me-3">
+        <span class="badge d-inline-block"
+              style="background-color: #{{ spool.filament.color_hex }}; width: 20px; height: 50px;">
+        </span>
+    </div>
+
+    <!-- Middle: Filament Details -->
+    <div class="flex-grow-1">
+      <!-- Vendor Name and Material (Row 1) -->
+      <h6 class="mb-0">{{ spool.filament.vendor.name }} - {{ spool.filament.material }}</h6>
+      <!-- Filament Name (Row 2) -->
+      <small class="text-muted">{{ spool.filament.name }}</small>
+    </div>
+
+    {% if action_fill %}
+    <span class="badge bg-primary rounded-pill">
+                <i class="bi bi-plus-circle"></i> Fill
+            </span>
+    {% endif %}
+    {% if action_assign %}
+    <!-- Action Icon -->
+    {% if spool.extra.get("tag") or spool.extra.get("tag") == "\"\"" %}
+    <span class="badge bg-secondary rounded-pill">
+                <i class="bi bi-plus-circle"></i> Reassign
+            </span>
+    {% else %}
+    <span class="badge bg-primary rounded-pill">
+                <i class="bi bi-plus-circle"></i> Assign
+            </span>
+    {% endif %}
+    {% endif %}
+  {% if action_fill or action_assign %}</a>{% endif %}
+  {% endfor %}
+</div>
+{% endif %}

templates/fragments/tray.html

@@ -0,0 +1,57 @@
+<div class="card">
+  <!-- Tray ID -->
+  <div class="card-header d-flex justify-content-between align-items-center">
+    {% if tray_data.issue %}
+    <i class="bi bi-exclamation-circle text-danger me-2"></i>
+    {% endif %}
+    {% if not tray_data.tray_type %}
+    Empty
+    {% endif %}
+    Tray {{ tray_data.id }}
+  </div>
+
+  <div class="card-body">
+    <!-- Tray Sub-Brand and Type -->
+    <div class="small text-muted mb-2">
+      {{ tray_data.tray_type }}
+      {% if tray_data.tray_sub_brands %}
+      <br/>
+      {{ tray_data.tray_sub_brands }}
+      {% endif %}
+    </div>
+
+    <!-- Badge with Dynamic Colors -->
+    <span class="badge d-inline-block p-2"
+          style="background-color: #{{ tray_data.tray_color }};
+                     color: {% if color_is_dark(tray_data.tray_color) %}#FFFFFF{% else %}#000000{% endif %}">
+                        #{{ tray_data.tray_color | upper }}
+                    </span>
+
+    <!-- Remaining Percentage -->
+    <div class="mt-2">
+      Remaining:
+      {% if AUTO_SPEND and tray_data.matched %}
+      <span class="fw-bold">{{ tray_data.remaining_weight|round }}g</span>
+      {% else %}
+      <span class="fw-bold">{{ tray_data.remain }}%</span>
+      {% endif %}
+    </div>
+  </div>
+  <div class="card-footer">
+    {% if pick_tray %}
+    <a class="btn btn-primary"
+       href="{{ url_for('tray_load', spool_id=current_spool['id'], tag_id=tag_id, ams=ams_id, tray=tray_id) }}">Pick
+      this tray</a>
+    {% endif %}
+    {% if tray_data.issue %}
+    <a class="btn btn-primary"
+       href="{{ url_for('issue', ams=ams_id, tray=tray_id) }}">Fix
+      this tray</a>
+    {% endif %}
+    {% if not pick_tray and not tray_data.tray_type %}
+    <a class="btn btn-primary"
+       href="{{ url_for('fill', ams=ams_id, tray=tray_id) }}">Fill
+      this tray</a>
+    {% endif %}
+  </div>
+</div>