feat: implement multi-color filament display and styles for dropdown options

html/rfid.js

@@ -215,20 +215,6 @@ document.addEventListener('filamentSelected', function (event) {
     updateSpoolButtons(selectedText !== "Please choose...");
 });
 
-// Hilfsfunktion für kontrastreiche Textfarbe
-function getContrastColor(hexcolor) {
-    // Konvertiere Hex zu RGB
-    const r = parseInt(hexcolor.substr(0,2),16);
-    const g = parseInt(hexcolor.substr(2,2),16);
-    const b = parseInt(hexcolor.substr(4,2),16);
-    
-    // Berechne Helligkeit (YIQ Formel)
-    const yiq = ((r*299)+(g*587)+(b*114))/1000;
-    
-    // Return schwarz oder weiß basierend auf Helligkeit
-    return (yiq >= 128) ? '#000000' : '#FFFFFF';
-}
-
 function updateNfcInfo() {
     const selectedText = document.getElementById("selected-filament").textContent;
     const nfcInfo = document.getElementById("nfcInfo");

html/spoolman.js

@@ -169,9 +169,32 @@ function updateFilamentDropdown(selectedSmId = null) {
             option.setAttribute("data-value", spool.filament.id);
             option.setAttribute("data-nfc-id", spool.extra.nfc_id || "");
             
+
+            // Generate color representation based on filament type (single or multi color)
+            let colorHTML = '';
+            
+            // Check if this is a multicolor filament
+            if (spool.filament.multi_color_hexes) {
+                // Parse multi color hexes from comma-separated string
+                const colors = spool.filament.multi_color_hexes.replace(/#/g, '').split(',');
+                
+                // Determine the display style based on direction
+                const direction = spool.filament.multi_color_direction || 'coaxial';
+                
+                // Generate color circles for each color
+                colorHTML = '<div class="option-colors">';
+                colors.forEach(color => {
+                    colorHTML += `<div class="option-color multi-color ${direction}" style="background-color: #${color}"></div>`;
+                });
+                colorHTML += '</div>';
+            } else {
+                // Single color filament
                 const colorHex = spool.filament.color_hex || 'FFFFFF';
+                colorHTML = `<div class="option-color" style="background-color: #${colorHex}"></div>`;
+            }
+            
             option.innerHTML = `
-                <div class="option-color" style="background-color: #${colorHex}"></div>
+                ${colorHTML}
                 <span>${spool.id} | ${spool.filament.name} (${spool.filament.material})</span>
             `;
             
@@ -190,7 +213,29 @@ function selectFilament(spool) {
     const selectedText = document.getElementById("selected-filament");
     const dropdownContent = document.getElementById("filament-dropdown-content");
     
+    // Update the selected color display
+    if (spool.filament.multi_color_hexes) {
+        // Handle multicolor filament display in the selection header
+        const colors = spool.filament.multi_color_hexes.replace(/#/g, '').split(',');
+        const direction = spool.filament.multi_color_direction || 'coaxial';
+        
+        // Replace the single color div with multiple color divs
+        selectedColor.innerHTML = '';
+        colors.forEach(color => {
+            const colorDiv = document.createElement('div');
+            colorDiv.className = `color-segment multi-color ${direction}`;
+            colorDiv.style.backgroundColor = `#${color}`;
+            selectedColor.appendChild(colorDiv);
+        });
+        // Add multiple color class to the container
+        selectedColor.classList.add('multi-color-container');
+    } else {
+        // Single color filament - reset to default display
+        selectedColor.innerHTML = '';
+        selectedColor.classList.remove('multi-color-container');
         selectedColor.style.backgroundColor = `#${spool.filament.color_hex || 'FFFFFF'}`;
+    }
+    
     selectedText.textContent = `${spool.id} | ${spool.filament.name} (${spool.filament.material})`;
     dropdownContent.classList.remove("show");
     

html/style.css

@@ -759,6 +759,50 @@ a:hover {
     flex-shrink: 0;
 }
 
+/* Multi-color filament styles */
+.option-colors {
+    display: flex;
+    flex-shrink: 0;
+    gap: 2px;
+}
+
+.multi-color {
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    border: 1px solid #333;
+}
+
+/* Coaxial pattern (horizontal stripes) */
+.multi-color.coaxial {
+    border-radius: 50%;
+    position: relative;
+}
+
+/* Longitudinal pattern (vertical stripes) */
+.multi-color.longitudinal {
+    border-radius: 50%;
+    position: relative;
+}
+
+/* Container for multiple colors in selected display */
+.multi-color-container {
+    display: flex !important;
+    background: none !important;
+    border: none !important;
+    gap: 2px;
+    align-items: center;
+    justify-content: flex-start;
+    width: auto !important;
+}
+
+.color-segment {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    border: 1px solid #333;
+}
+
 .notification {
     position: fixed;
     top: 20px;