var knownTrains = [] function goToTrip(tripId) { var url = new URL(window.location.href) url.pathname = 'view-train.html' url.searchParams.set('tripId', tripId) url.searchParams.set('date', new Date().toISOString()) window.location.href = url.toString() } var focusedElement = null var _rebuildDebounce = null var _rebuildRequested = false function rebuildSuggestions() { if (_rebuildDebounce !== null) { _rebuildRequested = true return } _rebuildRequested = false _rebuildDebounce = 123 var suggestionsArea = document.getElementById('suggestionsArea') while (suggestionsArea.childNodes.length > 0) { suggestionsArea.childNodes[0].remove() } var suggestions = knownTrains.filter(function (suggestion) { return suggestion.line.name }) // Trim the amount of results displayed if (suggestions.length > 100) { suggestions.splice(100) } suggestions.forEach(function (suggestion, index) { var suggestionLi = document.createElement('li') suggestionsArea.appendChild(suggestionLi) setTimeout(function () { suggestionLi.classList.add('items') suggestionLi.tabIndex = index + 1 suggestionLi.style.padding = '2px 0' function onAction(e) { goToTrip(suggestion.id) } suggestionLi.addEventListener('click', onAction) suggestionLi.addEventListener('keypress', function (e) { if (e.key == 'Enter') { onAction(e) } }) suggestionLi.addEventListener('focus', function (e) { focusedElement = suggestionLi }) var trainNameP = document.createElement('p') suggestionLi.appendChild(trainNameP) trainNameP.textContent = `${suggestion.line.name} (${suggestion.line.fahrtNr})` trainNameP.classList.add('pri', 'trainName') var trainRouteP = document.createElement('p') suggestionLi.appendChild(trainRouteP) trainRouteP.textContent = `${suggestion.origin.name} → ${suggestion.destination.name}` trainRouteP.classList.add('thi') var trainCompanyP = document.createElement('p') suggestionLi.appendChild(trainCompanyP) trainCompanyP.textContent = suggestion.line.operator.name trainCompanyP.classList.add('thi') }, 0) }) setTimeout(function () { _rebuildDebounce = null if (_rebuildRequested) { rebuildSuggestions() } }, 500) } var fetchAbortController = new AbortController() function reloadSuggestions() { var trainNumberInput = document.getElementById('trainNumber') var trainNumber = trainNumberInput.value.trim() var tripsUrl = new URL('https://v6.db.transport.rest/trips') tripsUrl.searchParams.set('query', trainNumber) tripsUrl.searchParams.set('onlyCurrentlyRunning', 'true') fetchAbortController.abort() fetchAbortController = new AbortController() fetch(tripsUrl.toString(), { signal: fetchAbortController.signal }) .then(function (response) { return response.json() }) .then(function (data) { if (data.trips) { knownTrains = data.trips knownTrains.sort(function (s1, s2) { var diff1 = Math.abs(Date.now() - new Date(s1.plannedDeparture).getTime()) var diff2 = Math.abs(Date.now() - new Date(s2.plannedDeparture).getTime()) return diff1 - diff2 }) rebuildSuggestions() } }) } function lsk() { document.getElementById('trainNumber').focus() } function csk() { if (focusedElement == null) { return } if (focusedElement.id === 'trainNumber') { goToTrip(document.activeElement.value.trim()) } else { focusedElement.click() } } window.addEventListener('load', function (e) { var trainNumber = document.getElementById('trainNumber') trainNumber.addEventListener('input', function (e) { reloadSuggestions() }) trainNumber.addEventListener('focus', function (e) { focusedElement = trainNumber document.getElementsByClassName('lsk')[0].textContent = '' document.getElementsByClassName('csk')[0].textContent = 'Search' }) trainNumber.addEventListener('blur', function (e) { document.getElementsByClassName('lsk')[0].textContent = 'Search' document.getElementsByClassName('csk')[0].textContent = 'Select' }) trainNumber.addEventListener('keypress', function (e) { if (e.key == 'Enter') { goToTrip(trainNumber.value.trim()) } }) document.querySelectorAll('.lsk').forEach(function (lskElem) { lskElem.addEventListener('click', function (e) { lsk() }) }) document.querySelectorAll('.csk').forEach(function (cskElem) { cskElem.addEventListener('click', function (e) { csk() }) }) document.body.addEventListener('keydown', function (e) { if (e.key == 'SoftLeft') { lsk() } else if (e.key == 'Enter') { csk() } }) reloadSuggestions() })