Implement selectable links for station names

Also prepare for date switcher

common/items.js

@@ -1,5 +1,18 @@
 var currentIndex = 0
 
+function findScrollParent(node) {
+	if (!node) {
+		return node
+	}
+
+	if (node.classList.contains('content') || node.tagName === 'body') {
+		return node
+	}
+	else {
+		return findScrollParent(node.parentNode)
+	}
+}
+
 function nav(offset) {
 	var items = document.querySelectorAll('.items:not(.disabled)')
 
@@ -11,6 +24,9 @@ function nav(offset) {
 		currentIndex -= items.length
 	}
 	items[currentIndex].focus()
+	if (items[currentIndex].getBoundingClientRect().y + items[currentIndex].getBoundingClientRect().height + 50 > document.documentElement.scrollHeight) {
+		findScrollParent(items[currentIndex]).scrollBy(0, 50)
+	}
 	items[currentIndex].addEventListener('keydown', handleKeyDown)
 }
 
@@ -29,6 +45,16 @@ function handleKeyDown(e) {
 				break
 		}
 	}
+	else if (e.target.name !== 'INPUT') {
+		switch (e.key) {
+			case 'ArrowUp':
+			case 'ArrowDown':
+				e.preventDefault()
+				e.stopPropagation()
+				nav(0)
+				break
+		}
+	}
 }
 
 window.addEventListener('load', function (e) {

sw.js

@@ -1,4 +1,4 @@
-const VERSION = 'v9'
+const VERSION = 'v10'
 const API_ORIGIN = 'https://scraper.infotren.dcdev.ro/'
 const API_TRAINS = `${API_ORIGIN}v3/trains`
 const API_STATIONS = `${API_ORIGIN}v3/stations`

view-train.html

@@ -32,7 +32,7 @@
 	</div>
 
 	<div id="train-info" class="content hidden" tabindex="0">
-		<div id="route">
+		<div class="items" tabindex="1000" id="route">
 			<h4>Route</h4>
 			<p class="thi">From</p>
 			<p class="pri" id="route-from"></p>

view-train.js

@@ -7,6 +7,16 @@ var showKm = false
 var trainData = null
 var lastSuccessfulFetch = null
 
+/**
+ * @typedef group
+ * @property {{from: string; to: string}} route
+ * @property {{delay: number; station: string; state: "passing" | "arrival" | "departure"} | undefined} status
+ * @property {any[]} stations
+ */
+
+/**
+ * @param {{ rank: string; number: string; operator: string; date: string; groups: group[]; }} data
+ */
 function onTrainData(data) {
 	var title = document.getElementById('title')
 	title.textContent = ''
@@ -20,10 +30,26 @@ function onTrainData(data) {
 	document.getElementsByTagName('title')[0].textContent = `Train ${data.rank} ${data.number}`
 
 	document.getElementById('company').textContent = data.operator
-	document.getElementById('date').textContent = data.date
+	var dateHref = document.createElement('a')
+	var dateP = document.getElementById('date')
+	while (dateP.childNodes.length > 0) {
+		dateP.childNodes[0].remove()
+	}
+	dateP.appendChild(dateHref)
+	dateHref.textContent = data.date
+	dateHref.href = '#'
+	dateHref.classList.add('no-a-custom')
+	// dateHref.classList.add('items', 'no-a-custom')
+	dateHref.addEventListener('click', function (e) {
+		e.preventDefault()
+		// Implement date switcher
+	})
 
 	document.getElementById('loading').classList.add('hidden')
 
+	/**
+	 * @type {group | null}
+	 */
 	var group = null;
 	if (data.groups.length > 1 && groupIndex == null) {
 		document.getElementById('group-choice').classList.remove('hidden')
@@ -194,8 +220,15 @@ function onTrainData(data) {
 
 		var stationName = document.createElement('p')
 		stationItem.appendChild(stationName)
-		stationName.textContent = station.name
 		stationName.classList.add('pri', 'name')
+		var stationNameHref = document.createElement('a')
+		stationName.appendChild(stationNameHref)
+		stationNameHref.textContent = station.name
+		stationNameHref.classList.add('items', 'no-a-custom')
+		var stationUrl = new URL('/view-station.html', window.location.origin)
+		stationUrl.searchParams.append('station', station.name)
+		stationUrl.searchParams.append('date', (station.arrival || station.departure).scheduleTime)
+		stationNameHref.href = stationUrl.toString()
 
 		if (station.arrival) {
 			var stationArrival = document.createElement('div')
@@ -379,12 +412,12 @@ window.addEventListener('load', function (e) {
 	content.focus()
 	content.addEventListener('keydown', function (e) {
 		switch (e.key) {
-			case 'ArrowUp':
+			// case 'ArrowUp':
-				content.scrollBy(0, -50)
+			// 	content.scrollBy(0, -50)
-				break
+			// 	break
-			case 'ArrowDown':
+			// case 'ArrowDown':
-				content.scrollBy(0, 50)
+			// 	content.scrollBy(0, 50)
-				break
+			// 	break
 			case 'SoftRight':
 				rsk()
 				break