76 lines
2.2 KiB
HTML
76 lines
2.2 KiB
HTML
<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> |