Add loading current track and config. Second part and fixes #2

index.html

@@ -157,38 +157,45 @@
         const previewImg = document.getElementById("preview");
         const outlineImg = document.getElementById("outline");
 
-        function update() {
-            updateTrack();
-        }
+        function updateCurrentTrack() {
+            fetch('/currenttrack')
+                .then(r => r.json())
+                .then(async data => {
+                    trackSelect.value = data.track;
 
-        function updateTrack() {
+                    await updateTrack(true);
 
-            const URL = '/track/' + trackSelect.value;
-            fetch(URL, { method: "GET" })
-                .then(res => res.json())
-                .then(data => {
-                    console.log(data)
-
-                    previewImg.src = data.image
-                    outlineImg.src = data.outline
-
-                    // Configs
-                    configSelect.innerHTML = "";
-                    data.configs.forEach(c => {
-                        let opt = document.createElement("option");
-                        opt.value = c;
-                        opt.textContent = c;
-                        configSelect.appendChild(opt);
-                    });
-
-                    // Update preview if a config exists
-                    if (data.configs.length > 0) {
-                        updateConfig();
-                    }
+                    configSelect.value = data.config;
+                    updateTrackImages();
                 });
         }
 
-        function updateConfig() {
+        function updateTrack(shouldUpdateConfig = true, preselectConfig = null) {
+            return fetch(`/track/${trackSelect.value}`)
+                .then(res => res.json())
+                .then(data => {
+                    previewImg.src = data.image;
+                    outlineImg.src = data.outline;
+
+                    if (shouldUpdateConfig) {
+                        configSelect.innerHTML = "";
+                        data.configs.forEach(c => {
+                            let opt = document.createElement("option");
+                            opt.value = c;
+                            opt.textContent = c;
+                            configSelect.appendChild(opt);
+                        });
+                    }
+
+                    if (preselectConfig) {
+                        configSelect.value = preselectConfig;
+                    }
+
+                    updateTrackImages();
+                });
+        }
+
+        function updateTrackImages() {
             previewImg.src = "/img/preview/" + trackSelect.value + "/" + configSelect.value;
             outlineImg.src = "/img/outline/" + trackSelect.value + "/" + configSelect.value;
         }
@@ -208,9 +215,12 @@
         }
 
         trackSelect.addEventListener("change", updateTrack);
-        configSelect.addEventListener("change", updateConfig);
+        configSelect.addEventListener("change", updateTrackImages);
 
-        window.onload = updateTrack;
+        if (window.addEventListener) // W3C standard
+        {
+            window.addEventListener('load', updateCurrentTrack, false); // NB **not** 'onload'
+        } 
     </script>
     <script>
         const addCarBtn = document.getElementById("addCarBtn");
@@ -233,7 +243,7 @@
                 const skinName = skinSelect?.value || "";
                 let amount = 1;
                 if (parseInt(amountInput.value) >= 1) {
-                    
+
                     console.log("setting amount to value:", amountInput.value);
                     amount = parseInt(amountInput.value);
                 }
@@ -407,9 +417,10 @@
 
         addCarBtn.addEventListener("click", addCar);
 
-        window.onload = () => {
-            getCurrentCars();
-        };
+        if (window.addEventListener) // W3C standard
+        {
+            window.addEventListener('load', getCurrentCars, false); // NB **not** 'onload'
+        } 
     </script>
 </body>