Change track through web page

2025-11-16 15:56:57 +01:00
parent a825804dcf
commit 1615655f6c
5 changed files with 283 additions and 1 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,76 @@
+<html>
+
+<body>
+    <h2>Choose a track</h2>
+
+    <select id="trackSelect">
+        {{tracks}}
+    </select>
+    <select id="configSelect">
+        {{configs}}
+    </select>
+    <button onclick="apply()">Apply</button>
+
+    <br><br>
+
+    <div class="parent">
+        <img id="preview" src="" width="400" style="border:1px solid #444">
+        <img id="outline" src="" width="400">
+    </div>
+
+    <script>
+        const trackSelect = document.getElementById("trackSelect");
+        const configSelect = document.getElementById("configSelect");
+        const previewImg = document.getElementById("preview");
+        const outlineImg = document.getElementById("outline");
+
+
+        function updateTrack() {
+
+            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();
+                    }
+                });
+        }
+
+        function updateConfig() {
+            previewImg.src = "/img/preview/" + trackSelect.value + "/" + configSelect.value;
+            outlineImg.src = "/img/outline/" + trackSelect.value + "/" + configSelect.value;
+        }
+
+        function apply(){
+            const URL = '/changetrack/' + trackSelect.value + "/" + configSelect.value;
+            fetch(URL, { method: "POST" })
+                .then(res => res.json())
+                .then(data => {
+                    console.log(data)
+                });
+        }
+
+        trackSelect.addEventListener("change", updateTrack);
+        configSelect.addEventListener("change", updateConfig);
+
+        window.onload = updateTrack;
+    </script>
+</body>
+
+</html>