Send cars

index.html

@@ -20,6 +20,7 @@
 
     <h2>Choose cars</h2>
     <button id="addCarBtn">Add Car</button>
+    <button id="applyCarsBtn">Apply Cars</button>
 
     <div id="carList"></div>
 
@@ -83,6 +84,48 @@
     <script>
         const addCarBtn = document.getElementById("addCarBtn");
         const carList = document.getElementById("carList");
+        const applyCarsBtn = document.getElementById("applyCarsBtn");
+
+        applyCarsBtn.addEventListener("click", applyCars);
+
+        function applyCars() {
+            // Zoek alle car blocks
+            const blocks = document.querySelectorAll(".car-block");
+
+            let cars = [];
+
+            blocks.forEach(block => {
+                const carSelect = block.querySelector(".car-select");
+                const skinSelect = block.querySelector(".skin-select");
+
+                const carName = carSelect?.value || null;
+                const skinName = skinSelect?.value || null;
+
+                if (carName) {
+                    cars.push({
+                        car: carName,
+                        skin: skinName
+                    });
+                }
+            });
+
+            // Payload klaar
+            const payload = { cars };
+
+            console.log("Sending cars:", payload);
+
+            fetch("/changecars", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify(payload)
+            })
+                .then(res => res.json())
+                .then(data => {
+                    console.log("Server response:", data);
+                });
+        }
 
         async function addCar() {
             const wrapper = document.createElement("div");
@@ -157,7 +200,7 @@
                 const car = cars.find(c => c.name === selectedCar);
                 const cfg = car.skins.find(x => x.name === selectedSkin);
 
-                try{
+                try {
                     updateImage(cfg.image);
                 } catch (e) {
                     updateImage("");