Color base add support for transparent color (#5)

* added db model is transparent and fixed PETG translucent showing black

* js and filament form for transparent color

* bumped version to v0.1.2

bambu_run/templates/bambu_run/filament_color_list.html

@@ -54,11 +54,19 @@
                         {% for color in colors %}
                         <tr>
                             <td class="align-middle">
+                                {% if color.is_transparent %}
+                                <div style="width: 50px; height: 50px; border-radius: 4px; border: 2px solid #ddd; background: repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 0 0/10px 10px;" title="Clear / Transparent"></div>
+                                {% else %}
                                 <div style="width: 50px; height: 50px; background-color: {{ color.get_hex_color }}; border-radius: 4px; border: 2px solid #ddd;"></div>
+                                {% endif %}
                             </td>
                             <td class="align-middle"><strong>{{ color.color_name }}</strong></td>
                             <td class="align-middle">
+                                {% if color.is_transparent %}
+                                <span class="text-muted fst-italic">Clear / Transparent</span>
+                                {% else %}
                                 <span class="font-monospace">{{ color.get_hex_color }}</span>
+                                {% endif %}
                             </td>
                             <td class="align-middle">
                                 <span class="badge bg-secondary">{{ color.filament_type }}</span>

bambu_run/templates/bambu_run/filament_detail.html

@@ -27,10 +27,14 @@
                 <div class="card-body">
                     <h6>Color</h6>
                     <div class="d-flex align-items-center">
+                        {% if filament.is_transparent %}
+                        <div style="width: 50px; height: 50px; border-radius: 8px; margin-right: 15px; border: 2px solid #ddd; background: repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 0 0/10px 10px;" title="Clear / Transparent"></div>
+                        {% else %}
                         <div style="width: 50px; height: 50px; background-color: {{ filament.color_hex|default:'#999' }}; border-radius: 8px; margin-right: 15px; border: 2px solid #ddd;"></div>
+                        {% endif %}
                         <div>
                             <strong>{{ filament.color }}</strong><br>
-                            <small class="text-muted">{{ filament.color_hex }}</small>
+                            <small class="text-muted">{% if filament.is_transparent %}Clear / Transparent{% else %}{{ filament.color_hex }}{% endif %}</small>
                         </div>
                     </div>
                 </div>

bambu_run/templates/bambu_run/filament_form.html

@@ -43,6 +43,14 @@
                 <hr>
                 <h5>Specifications</h5>
 
+                <div class="row mb-3">
+                    <div class="col-md-12">
+                        <label class="form-label">Filament Type Preset</label>
+                        {{ form.filament_type }}
+                        <small class="form-text text-muted">Selecting a preset auto-fills Type, Sub Type, and Brand below.</small>
+                    </div>
+                </div>
+
                 <div class="row mb-3">
                     <div class="col-md-3">
                         <label class="form-label">Type *</label>
@@ -62,12 +70,19 @@
                     </div>
                 </div>
 
-                <div class="row mb-3">
-                    <div class="col-md-3">
+                <div class="row mb-3 align-items-end">
+                    <div class="col-md-2">
                         <label class="form-label">Color Picker</label>
+                        <div id="transparent-swatch" style="display:none; width:100%; height:38px; border-radius:4px; border:1px solid #ddd; background: repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 0 0/10px 10px;" title="Clear / Transparent"></div>
                         {{ form.color_hex }}
                     </div>
-                    <div class="col-md-3">
+                    <div class="col-md-2">
+                        <div class="form-check mt-4">
+                            {{ form.is_transparent }}
+                            <label class="form-check-label" for="id_is_transparent">Transparent / Clear</label>
+                        </div>
+                    </div>
+                    <div class="col-md-2">
                         <label class="form-label">{{ form.color_hex_text.label }}</label>
                         {{ form.color_hex_text }}
                         <small class="form-text text-muted">e.g. #0A2CA5</small>
@@ -209,95 +224,7 @@
 {% endblock %}
 
 {% block extra_js %}
-<script>
-    // Sync color picker and text input
-    const colorPicker = document.getElementById('id_color_hex_picker');
-    const colorText = document.getElementById('id_color_hex_text');
-
-    if (colorPicker && colorText) {
-        colorPicker.addEventListener('input', function() {
-            colorText.value = this.value.toUpperCase();
-        });
-
-        colorText.addEventListener('input', function() {
-            const value = this.value.trim();
-            if (/^#[0-9A-Fa-f]{6}$/.test(value)) {
-                colorPicker.value = value;
-                this.classList.remove('is-invalid');
-            } else if (value.length === 7) {
-                this.classList.add('is-invalid');
-            }
-        });
-
-        if (colorText.value && /^#[0-9A-Fa-f]{6}$/.test(colorText.value)) {
-            colorPicker.value = colorText.value;
-        } else if (colorPicker.value && !colorText.value) {
-            colorText.value = colorPicker.value.toUpperCase();
-        }
-    }
-
-    // Delete confirmation logic
-    const deleteConfirmText = document.getElementById('deleteConfirmText');
-    const confirmDeleteBtn = document.getElementById('confirmDeleteBtn');
-    const deleteForm = document.getElementById('deleteForm');
-    const deleteModal = document.getElementById('deleteModal');
-
-    if (deleteConfirmText && confirmDeleteBtn) {
-        deleteConfirmText.addEventListener('input', function() {
-            const value = this.value.trim();
-            if (value === 'DELETE') {
-                confirmDeleteBtn.disabled = false;
-                this.classList.remove('is-invalid');
-                this.classList.add('is-valid');
-            } else {
-                confirmDeleteBtn.disabled = true;
-                this.classList.remove('is-valid');
-                if (value.length > 0) {
-                    this.classList.add('is-invalid');
-                } else {
-                    this.classList.remove('is-invalid');
-                }
-            }
-        });
-
-        if (deleteForm) {
-            deleteForm.addEventListener('submit', function(e) {
-                if (confirmDeleteBtn.disabled) {
-                    e.preventDefault();
-                    alert('Please type DELETE to confirm deletion');
-                    return false;
-                }
-                return true;
-            });
-        }
-
-        if (deleteModal) {
-            deleteModal.addEventListener('hidden.bs.modal', function() {
-                deleteConfirmText.value = '';
-                confirmDeleteBtn.disabled = true;
-                deleteConfirmText.classList.remove('is-valid', 'is-invalid');
-            });
-
-            deleteModal.addEventListener('shown.bs.modal', function() {
-                deleteConfirmText.focus();
-            });
-        }
-    }
-
-    // Backup modal opener
-    const deleteBtn = document.getElementById('deleteBtn');
-    if (deleteBtn && deleteModal) {
-        deleteBtn.addEventListener('click', function() {
-            if (!deleteModal.classList.contains('show')) {
-                if (typeof bootstrap !== 'undefined') {
-                    const modalInstance = bootstrap.Modal.getOrCreateInstance(deleteModal);
-                    modalInstance.show();
-                } else if (typeof coreui !== 'undefined' && coreui.Modal) {
-                    const modalInstance = coreui.Modal.getOrCreateInstance(deleteModal);
-                    modalInstance.show();
-                }
-            }
-        });
-    }
-</script>
+{# Server-side data consumed by filament_form.js #}
+<script type="application/json" id="filament-type-data">{{ filament_type_map|safe }}</script>
+<script src="{% static 'bambu_run/js/filament_form.js' %}"></script>
 {% endblock %}

bambu_run/templates/bambu_run/filament_list.html

@@ -122,7 +122,11 @@
                             </td>
                             <td class="align-middle">
                                 <div class="d-flex align-items-center">
+                                    {% if filament.is_transparent %}
+                                    <div style="width: 30px; height: 30px; border-radius: 4px; margin-right: 10px; border: 1px solid #ddd; background: repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 0 0/10px 10px;" title="Clear / Transparent"></div>
+                                    {% else %}
                                     <div style="width: 30px; height: 30px; background-color: {{ filament.color_hex|default:'#999' }}; border-radius: 4px; margin-right: 10px; border: 1px solid #ddd;"></div>
+                                    {% endif %}
                                     {{ filament.color }}
                                 </div>
                             </td>

bambu_run/templates/bambu_run/printer_dashboard.html

@@ -152,7 +152,7 @@
                     <div class="row g-3">
                         {% for filament in stats.filaments %}
                         <div class="col-12 col-md-6 col-lg-3">
-                            <div class="card filament-card" data-filament-color="{{ filament.color|slice:':6' }}">
+                            <div class="card filament-card" data-filament-color="{{ filament.color|slice:':6' }}"{% if filament.is_transparent %} data-filament-transparent="true"{% endif %}>
                                 <div class="card-body">
                                     <div class="d-flex justify-content-between align-items-center mb-2">
                                         <h6 class="mb-0">Tray {{ filament.tray_id }}</h6>