Add getting car config

index.html

@@ -18,12 +18,21 @@
         <img id="outline" src="" width="400">
     </div>
 
+    <h2>Choose cars</h2>
+    <button id="addCarBtn">Add Car</button>
+
+    <div id="carList"></div>
+
     <script>
         const trackSelect = document.getElementById("trackSelect");
         const configSelect = document.getElementById("configSelect");
         const previewImg = document.getElementById("preview");
         const outlineImg = document.getElementById("outline");
 
+        function update() {
+            updateTrack();
+
+        }
 
         function updateTrack() {
 
@@ -57,7 +66,7 @@
             outlineImg.src = "/img/outline/" + trackSelect.value + "/" + configSelect.value;
         }
 
-        function apply(){
+        function apply() {
             const URL = '/changetrack/' + trackSelect.value + "/" + configSelect.value;
             fetch(URL, { method: "POST" })
                 .then(res => res.json())
@@ -71,6 +80,95 @@
 
         window.onload = updateTrack;
     </script>
+    <script>
+        const addCarBtn = document.getElementById("addCarBtn");
+        const carList = document.getElementById("carList");
+
+        async function addCar() {
+            const wrapper = document.createElement("div");
+            wrapper.style.marginTop = "12px";
+            wrapper.className = "car-block";
+
+            // --- elementen ---
+            const carSelect = document.createElement("select");
+            carSelect.className = "car-select";
+
+            const skinSelect = document.createElement("select");
+            skinSelect.className = "skin-select";
+            skinSelect.style.marginLeft = "10px";
+
+            const img = document.createElement("img");
+            img.className = "skin-preview";
+            img.style.display = "block";
+            img.style.marginTop = "10px";
+            img.style.maxWidth = "200px";
+
+            wrapper.appendChild(carSelect);
+            wrapper.appendChild(skinSelect);
+            wrapper.appendChild(img);
+            carList.appendChild(wrapper);
+
+            // --- cars ophalen ---
+            const url = '/cars';
+            const res = await fetch(url);
+            const data = await res.json();
+
+            const cars = data.cars; // array met cars
+
+            console.log(cars);
+
+            // cars inladen
+            cars.forEach(car => {
+                let o = document.createElement("option");
+                o.value = car.name;     // of car.id
+                o.textContent = car.name;
+                carSelect.appendChild(o);
+            });
+
+            // --- helper: laad skins voor de geselecteerde car ---
+            function loadSkins(carName) {
+                const car = cars.find(c => c.name === carName);
+                skinSelect.innerHTML = "";
+
+                car.skins.forEach(cfg => {
+                    let o = document.createElement("option");
+                    o.value = cfg.name;
+                    o.textContent = cfg.name;
+                    skinSelect.appendChild(o);
+                });
+
+                // direct de eerste skin tonen
+                updateImage(car.skins[0].image);
+            }
+
+            // --- helper: update image ---
+            function updateImage(imgPath) {
+                img.src = imgPath;
+            }
+
+            // --- event: auto veranderen ---
+            carSelect.addEventListener("change", () => {
+                const selectedCar = carSelect.value;
+                loadSkins(selectedCar);
+            });
+
+            // --- event: skin veranderen ---
+            skinSelect.addEventListener("change", () => {
+                const selectedCar = carSelect.value;
+                const selectedSkin = skinSelect.value;
+
+                const car = cars.find(c => c.name === selectedCar);
+                const cfg = car.skins.find(x => x.name === selectedSkin);
+
+                updateImage(cfg.image);
+            });
+
+            // laad skins voor de eerste auto direct
+            loadSkins(cars[0].name);
+        }
+
+        addCarBtn.addEventListener("click", addCar);
+    </script>
 </body>
 
 </html>