feat: füge Unterstützung für Spoolman-Einstellungen hinzu und aktualisiere die Benutzeroberfläche

html/rfid.js

@@ -150,6 +150,13 @@ function initWebSocket() {
                     ramStatus.textContent = `${data.freeHeap}k`;
                 }
             }
+            else if (data.type === 'setSpoolmanSettings') {
+                if (data.payload == 'success') {
+                    showNotification(`Spoolman Settings set successfully`, true);
+                } else {
+                    showNotification(`Error setting Spoolman Settings`, false);
+                }
+            }
         };
     } catch (error) {
         isConnected = false;
@@ -285,6 +292,14 @@ function displayAmsData(amsData) {
                     <img src="spool_in.png" alt="Spool In" style="width: 48px; height: 48px; transform: rotate(180deg) scaleX(-1);">
                 </button>`;
 
+            const spoolmanButtonHtml = `
+                <button class="spool-button" onclick="handleSpoolmanSettings('${tray.tray_info_idx}', '${tray.setting_id}', '${tray.cali_idx}', '${tray.nozzle_temp_min}', '${tray.nozzle_temp_max}')" 
+                        style="position: absolute; bottom: 0px; right: 0px; 
+                               background: none; border: none; padding: 0; 
+                               cursor: pointer; display: none;">
+                    <img src="set_spoolman.png" alt="Spool In" style="width: 38px; height: 38px;">
+                </button>`;
+
             if (!hasAnyContent) {
                 return `
                     <div class="tray">
@@ -348,6 +363,7 @@ function displayAmsData(amsData) {
                         ${trayDetails}
                         ${tempHTML}
                         ${(ams.ams_id === 255 && tray.tray_type !== '') ? outButtonHtml : ''}
+                        ${(tray.setting_id != "" && tray.setting_id != "null") ? spoolmanButtonHtml : ''}
                     </div>
                     
                 </div>`;
@@ -373,6 +389,36 @@ function updateSpoolButtons(show) {
     });
 }
 
+function handleSpoolmanSettings(tray_info_idx, setting_id, cali_idx, nozzle_temp_min, nozzle_temp_max) {
+    // Hole das ausgewählte Filament
+    const selectedText = document.getElementById("selected-filament").textContent;
+
+    // Finde die ausgewählte Spule in den Daten
+    const selectedSpool = spoolsData.find(spool => 
+        `${spool.id} | ${spool.filament.name} (${spool.filament.material})` === selectedText
+    );
+
+    const payload = {
+        type: 'setSpoolmanSettings',
+        payload: {
+            filament_id: selectedSpool.filament.id,
+            tray_info_idx: tray_info_idx,
+            setting_id: setting_id,
+            cali_idx: cali_idx,
+            temp_min: nozzle_temp_min,
+            temp_max: nozzle_temp_max
+        }
+    };
+
+    try {
+        socket.send(JSON.stringify(payload));
+        showNotification(`Setting send to Spoolman`, true);
+    } catch (error) {
+        console.error("Error while sending settings to Spoolman:", error);
+        showNotification("Error while sending!", false);
+    }
+}
+
 function handleSpoolOut() {
     // Erstelle Payload
     const payload = {

html/style.css

@@ -761,17 +761,19 @@ a:hover {
     right: 20px;
     padding: 15px 25px;
     border-radius: 4px;
-    color: white;
+    color: black;
     z-index: 1000;
     animation: slideIn 0.3s ease-out;
 }
 
 .notification.success {
     background-color: #28a745;
+    color: black !important;
 }
 
 .notification.error {
     background-color: #dc3545;
+    color: white !important;
 }
 
 .notification.fade-out {
@@ -1013,6 +1015,7 @@ input[type="submit"]:disabled,
     color: #000;
     vertical-align: middle;
     margin-left: 0.5rem;
+    text-shadow: 0 !important;
 }
 
 .progress-container {