Adds new feature to write and read location tags

Location tags can be written via the website. If a location tag is read after reading a spool tag, the location of the spool will be updated in spoolman to the location from the tag.

html/rfid.html

@@ -139,6 +139,18 @@
                 <p id="nfcInfo" class="nfc-status"></p>
                 <button id="writeNfcButton" class="btn btn-primary hidden" onclick="writeNfcTag()">Write Tag</button>
             </div>
+
+            <div class="feature-box">
+                <h2>Spoolman Locations</h2>
+                <label for="locationSelect">Location:</label>
+                <div style="display: flex; justify-content: space-between; align-items: center;">
+                    <select id="locationSelect" class="styled-select">
+                        <option value="">Please choose...</option>
+                    </select>
+                </div>
+                <p id="nfcInfoLocation" class="nfc-status"></p>
+                <button id="writeLocationNfcButton" class="btn btn-primary hidden" onclick="writeLocationNfcTag()">Write Location Tag</button>
+            </div>
         </div>
 
     </div>

html/rfid.js

@@ -626,11 +626,11 @@ function writeNfcTag() {
 
     // Erstelle das NFC-Datenpaket mit korrekten Datentypen
     const nfcData = {
-        color_hex: selectedSpool.filament.color_hex || "FFFFFF",
-        type: selectedSpool.filament.material,
-        min_temp: minTemp,
-        max_temp: maxTemp,
-        brand: selectedSpool.filament.vendor.name,
+        //color_hex: selectedSpool.filament.color_hex || "FFFFFF",
+        //type: selectedSpool.filament.material,
+        //min_temp: minTemp,
+        //max_temp: maxTemp,
+        //brand: selectedSpool.filament.vendor.name,
         sm_id: String(selectedSpool.id) // Konvertiere zu String
     };
 
@@ -647,16 +647,56 @@ function writeNfcTag() {
     }
 }
 
+function writeLocationNfcTag() {
+    const selectedText = document.getElementById("locationSelect").value;
+    if (selectedText === "Please choose...") {
+        alert('Please select a location first.');
+        return;
+    }
+    // Erstelle das NFC-Datenpaket mit korrekten Datentypen
+    const nfcData = {
+        location: String(selectedText)
+    };
+
+    if (socket?.readyState === WebSocket.OPEN) {
+        const writeButton = document.getElementById("writeLocationNfcButton");
+        writeButton.classList.add("writing");
+        writeButton.textContent = "Writing";
+        socket.send(JSON.stringify({
+            type: 'writeNfcTag',
+            payload: nfcData
+        }));
+    } else {
+        alert('Not connected to Server. Please check connection.');
+    }
+}
+
 function handleWriteNfcTagResponse(success) {
     const writeButton = document.getElementById("writeNfcButton");
-    writeButton.classList.remove("writing");
-    writeButton.classList.add(success ? "success" : "error");
-    writeButton.textContent = success ? "Write success" : "Write failed";
+    const writeLocationButton = document.getElementById("writeLocationNfcButton");
+    if(writeButton.classList.contains("writing")){
+        writeButton.classList.remove("writing");
+        writeButton.classList.add(success ? "success" : "error");
+        writeButton.textContent = success ? "Write success" : "Write failed";
 
-    setTimeout(() => {
-        writeButton.classList.remove("success", "error");
-        writeButton.textContent = "Write Tag";
-    }, 5000);
+        setTimeout(() => {
+            writeButton.classList.remove("success", "error");
+            writeButton.textContent = "Write Tag";
+        }, 5000);
+    }
+
+    if(writeLocationButton.classList.contains("writing")){
+        writeLocationButton.classList.remove("writing");
+        writeLocationButton.classList.add(success ? "success" : "error");
+        writeLocationButton.textContent = success ? "Write success" : "Write failed";
+
+        setTimeout(() => {
+            writeLocationButton.classList.remove("success", "error");
+            writeLocationButton.textContent = "Write Location Tag";
+        }, 5000);
+    }
+
+    
 }
 
 function showNotification(message, isSuccess) {

html/spoolman.js

@@ -1,6 +1,7 @@
 // Globale Variablen
 let spoolmanUrl = '';
 let spoolsData = [];
+let locationData = [];
 
 // Hilfsfunktionen für Datenmanipulation
 function processSpoolData(data) {
@@ -133,6 +134,26 @@ function populateVendorDropdown(data, selectedSmId = null) {
     }
 }
 
+// Dropdown-Funktionen
+function populateLocationDropdown(data) {
+    const locationSelect = document.getElementById("locationSelect");
+    if (!locationSelect) {
+        console.error('locationSelect Element nicht gefunden');
+        return;
+    }
+
+    locationSelect.innerHTML = '<option value="">Bitte wählen...</option>';
+    // Dropdown mit gefilterten Herstellern befüllen - alphabetisch sortiert
+    Object.entries(data)
+        .sort(([, nameA], [, nameB]) => nameA.localeCompare(nameB)) // Sort vendors alphabetically by name
+        .forEach(([id, name]) => {
+            const option = document.createElement("option");
+            option.value = name;
+            option.textContent = name;
+            locationSelect.appendChild(option);
+        });
+}
+
 function updateFilamentDropdown(selectedSmId = null) {
     const vendorId = document.getElementById("vendorSelect").value;
     const dropdownContentInner = document.getElementById("filament-dropdown-content");
@@ -208,6 +229,13 @@ function updateFilamentDropdown(selectedSmId = null) {
     }
 }
 
+function updateLocationSelect(){
+    const writeLocationNfcButton = document.getElementById('writeLocationNfcButton');
+    if(writeLocationNfcButton){
+        writeLocationNfcButton.classList.remove("hidden");
+    }
+}
+
 function selectFilament(spool) {
     const selectedColor = document.getElementById("selected-color");
     const selectedText = document.getElementById("selected-filament");
@@ -261,10 +289,18 @@ async function initSpoolman() {
         
         const fetchedData = await fetchSpoolData();
         spoolsData = processSpoolData(fetchedData);
-        
+
         document.dispatchEvent(new CustomEvent('spoolDataLoaded', { 
             detail: spoolsData 
         }));
+        
+        locationData = await fetchLocationData();
+        
+        document.dispatchEvent(new CustomEvent('locationDataLoaded', { 
+            detail: locationData 
+        }));
+
+
     } catch (error) {
         console.error('Fehler beim Initialisieren von Spoolman:', error);
         document.dispatchEvent(new CustomEvent('spoolmanError', { 
@@ -292,6 +328,25 @@ async function fetchSpoolData() {
     }
 }
 
+async function fetchLocationData() {
+    try {
+        if (!spoolmanUrl) {
+            throw new Error('Spoolman URL ist nicht initialisiert');
+        }
+        
+        const response = await fetch(`${spoolmanUrl}/api/v1/location`);
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        
+        const data = await response.json();
+        return data;
+    } catch (error) {
+        console.error('Fehler beim Abrufen der Location-Daten:', error);
+        return [];
+    }
+}
+
 // Event Listener
 document.addEventListener('DOMContentLoaded', () => {
     initSpoolman();
@@ -300,6 +355,11 @@ document.addEventListener('DOMContentLoaded', () => {
     if (vendorSelect) {
         vendorSelect.addEventListener('change', () => updateFilamentDropdown());
     }
+
+    const locationSelect = document.getElementById('locationSelect');
+    if (locationSelect) {
+        locationSelect.addEventListener('change', () => updateLocationSelect());
+    }
     
     const onlyWithoutSmId = document.getElementById('onlyWithoutSmId');
     if (onlyWithoutSmId) {
@@ -312,6 +372,10 @@ document.addEventListener('DOMContentLoaded', () => {
     document.addEventListener('spoolDataLoaded', (event) => {
         populateVendorDropdown(event.detail);
     });
+
+    document.addEventListener('locationDataLoaded', (event) => {
+        populateLocationDropdown(event.detail);
+    });
     
     window.onclick = function(event) {
         if (!event.target.closest('.custom-dropdown')) {
@@ -342,6 +406,7 @@ window.getSpoolData = () => spoolsData;
 window.setSpoolData = (data) => { spoolsData = data; };
 window.reloadSpoolData = initSpoolman;
 window.populateVendorDropdown = populateVendorDropdown;
+window.populateLocationDropdown = populateLocationDropdown;
 window.updateFilamentDropdown = updateFilamentDropdown;
 window.toggleFilamentDropdown = () => {
     const content = document.getElementById("filament-dropdown-content");

html/style.css

@@ -971,31 +971,35 @@ input[type="submit"]:disabled,
 }
 
 /* Schreib-Button */
-#writeNfcButton {
+#writeNfcButton, #writeLocationNfcButton {
     background-color: #007bff;
     color: white;
     transition: background-color 0.3s, color 0.3s;
     width: 160px;
 }
 
-#writeNfcButton.writing {
+#writeNfcButton.writing, #writeLocationNfcButton.writing {
     background-color: #ffc107;
     color: black;
     width: 160px;
 }
 
-#writeNfcButton.success {
+#writeNfcButton.success, #writeLocationNfcButton.success {
     background-color: #28a745;
     color: white;
     width: 160px;
 }
 
-#writeNfcButton.error {
+#writeNfcButton.error, #writeLocationNfcButton.error {
     background-color: #dc3545;
     color: white;
     width: 160px;
 }
 
+#writeLocationNfcButton{
+    width: 250px;
+}
+
 @keyframes dots {
     0% { content: ""; }
     33% { content: "."; }
@@ -1003,7 +1007,7 @@ input[type="submit"]:disabled,
     100% { content: "..."; }
 }
 
-#writeNfcButton.writing::after {
+#writeNfcButton.writing::after, #writeLocationNfcButton.writing::after {
     content: "...";
     animation: dots 1s steps(3, end) infinite;
 }