226 lines
7.0 KiB
HTML
226 lines
7.0 KiB
HTML
<html>
|
|
|
|
<body>
|
|
<h2>Choose a track</h2>
|
|
|
|
<select id="trackSelect">
|
|
{{tracks}}
|
|
</select>
|
|
<select id="configSelect">
|
|
{{configs}}
|
|
</select>
|
|
<button onclick="apply()">Change track</button>
|
|
|
|
<br><br>
|
|
|
|
<div class="parent">
|
|
<img id="preview" src="" width="400" style="border:1px solid #444">
|
|
<img id="outline" src="" width="400">
|
|
</div>
|
|
|
|
<h2>Choose cars</h2>
|
|
<button id="addCarBtn">Add Car</button>
|
|
<button id="applyCarsBtn">Change cars</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() {
|
|
|
|
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("server response:" + data)
|
|
if (data.status == "success") {
|
|
alert("Track changed successfully!");
|
|
} else {
|
|
alert("Failed to change track: " + data.message);
|
|
}
|
|
});
|
|
}
|
|
|
|
trackSelect.addEventListener("change", updateTrack);
|
|
configSelect.addEventListener("change", updateConfig);
|
|
|
|
window.onload = updateTrack;
|
|
</script>
|
|
<script>
|
|
const addCarBtn = document.getElementById("addCarBtn");
|
|
const carList = document.getElementById("carList");
|
|
const applyCarsBtn = document.getElementById("applyCarsBtn");
|
|
|
|
applyCarsBtn.addEventListener("click", applyCars);
|
|
|
|
function applyCars() {
|
|
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 || "";
|
|
const skinName = skinSelect?.value || "";
|
|
|
|
if (carName) {
|
|
cars.push({
|
|
car: carName,
|
|
skin: skinName
|
|
});
|
|
}
|
|
});
|
|
|
|
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);
|
|
if (data.status == "success") {
|
|
alert("Cars changed successfully!");
|
|
} else {
|
|
alert("Failed to change cars: " + data.message);
|
|
}
|
|
});
|
|
}
|
|
|
|
async function addCar() {
|
|
const wrapper = document.createElement("div");
|
|
wrapper.style.marginTop = "12px";
|
|
wrapper.className = "car-block";
|
|
|
|
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 = "400px";
|
|
|
|
wrapper.appendChild(carSelect);
|
|
wrapper.appendChild(skinSelect);
|
|
wrapper.appendChild(img);
|
|
carList.appendChild(wrapper);
|
|
|
|
const url = '/cars';
|
|
const res = await fetch(url);
|
|
const data = await res.json();
|
|
|
|
const cars = data.cars;
|
|
|
|
console.log(cars);
|
|
|
|
cars.forEach(car => {
|
|
let o = document.createElement("option");
|
|
o.value = car.name; // of car.id
|
|
o.textContent = car.name;
|
|
carSelect.appendChild(o);
|
|
});
|
|
|
|
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);
|
|
});
|
|
|
|
// show first stkin
|
|
try {
|
|
updateImage(car.skins[0].image);
|
|
} catch (e) {
|
|
updateImage("");
|
|
}
|
|
}
|
|
|
|
function updateImage(imgPath) {
|
|
img.src = imgPath;
|
|
}
|
|
|
|
carSelect.addEventListener("change", () => {
|
|
const selectedCar = carSelect.value;
|
|
loadSkins(selectedCar);
|
|
});
|
|
|
|
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);
|
|
|
|
try {
|
|
updateImage(cfg.image);
|
|
} catch (e) {
|
|
updateImage("");
|
|
}
|
|
});
|
|
|
|
// immediately load skins for first car
|
|
loadSkins(cars[0].name);
|
|
}
|
|
|
|
addCarBtn.addEventListener("click", addCar);
|
|
</script>
|
|
</body>
|
|
|
|
</html> |