added search bar + platform select + refresh btn

index.js

@@ -1,12 +1,93 @@
 const MAX_DISPLAYED_VIAS = 4
+let currentBpuic = null
+let currentPlatform = null
+let currentInfo = null
+
+function initSearch() {
+	const sInput = document.getElementById("search-input")
+	const form = document.getElementById("search")
+	const refresh = document.getElementById("refresh")
+	const platforms = document.getElementById("platforms")
+
+	form.addEventListener("submit", e => {
+		e.preventDefault()
+		searchStation(sInput.value)
+			.then(stations => updateStationsList(stations))
+	})
+
+	refresh.addEventListener("click", () => {
+		if (currentBpuic !== null) {
+			setStation(currentBpuic)
+		}
+	})
+
+	platforms.addEventListener("change", () => {
+		setPlatform(platforms.value)
+	})
+}
+
+function updateStationsList(stations) {
+	const stationsList = document.getElementById("stations")
+	stationsList.innerHTML = ""
+	stations.forEach(station => {
+		const div = document.createElement("div")
+		div.classList.add("station")
+		div.innerText = station.bezeichnungOffiziell
+		div.addEventListener("click", () => setStation(station.bpuic))
+		stationsList.appendChild(div)
+	})
+}
+
+function setStation(bpuic) {
+	if (bpuic !== currentBpuic) {
+		currentPlatform = null
+	}
+	currentBpuic = bpuic
+	fetchInfo(bpuic).then(res => {
+		currentInfo = res
+		document.getElementById("search-input").value = ""
+		document.getElementById("stations").innerHTML = ""
+
+		const platformsList = document.getElementById("platforms")
+		platformsList.innerHTML = ""
+
+		let platforms = res.contents[0].verkehrsmittels.map(train => train.gleisAbIst)
+		platforms = [... new Set(platforms)]
+		platforms = platforms.sort()
+		platforms.forEach(platform => {
+			const opt = document.createElement("option")
+			opt.value = platform
+			opt.innerText = platform
+			if (currentPlatform === platform) {
+				opt.selected = true
+			}
+			platformsList.appendChild(opt)
+		})
+
+		const station = document.getElementById("station")
+		station.querySelector(".name").innerText = res.contents[0].betriebspunkt.bezeichnungOffiziell
+		updateDisplay(res, 0, currentPlatform)
+	})
+}
+
+function setPlatform(platform) {
+	const platforms = document.getElementById("platforms")
+	currentPlatform = platforms.value
+	if (currentInfo === null) return
+	updateDisplay(currentInfo, 0, platform)
+}
 
 function searchStation(query) {
 	return fetch(`https://displays.api.sbb.ch/internal/api/v1/betriebspunkt?query=${query}`, {
 		headers: {
 			"X-API-Key": API_KEY
 		}
-	}).then(res => {
-		return res.json()
+	}).then(async (res) => {
+		let stations = []
+		if (res.status === 200) {
+			stations = await res.json()
+		}
+		return stations
 	})
 }
 
@@ -47,8 +128,8 @@ const example = {
 					},
 					zeitAbKb: "2024-04-08T18:32:00",  // heure de départ prévue
 					zeitAbErw: "2024-04-08T18:33:00",  // heure de départ réelle
-					gleisAbKb: 1,  // voie prévue
-					gleisAbIst: 1,  // voie réelle
+					gleisAbKb: "1",  // voie prévue
+					gleisAbIst: "1",  // voie réelle
 					verspaetungsminutenAb: 0,  // au moins n minutes de retard
 					verspaetungsminutenAn: 0,  // au plus n minutes de retard
 					ziele: [
@@ -204,8 +285,6 @@ function buildComposition(formation) {
 }
 
 function updateDisplay(result, idx=0, platform=null) {
-	document.getElementById("station").innerText = result.config.stationName
-
 	let trains = result.contents[0].verkehrsmittels
 	if (platform !== null) {
 		trains = trains.filter(t => t.gleisAbIst === platform)
@@ -235,4 +314,8 @@ function updateDisplay(result, idx=0, platform=null) {
 	})
 
 	buildComposition(train.formation)
-}
+}
+
+window.addEventListener("load", () => {
+	initSearch()
+})