Add recently viewed train on homepage

2 years ago · 7645effd5f
4 changed files with 86 additions and 3 deletions
--- a/index.html
+++ b/index.html
@ -12,6 +12,8 @@

 	<script src="/common/worker.js"></script>
 	<script src="/common/items.js"></script>
+	<script src="/common/trainId.js"></script>
+	<script src="index.js"></script>
 </head>
 <body>
 	<h1>InfoTren</h1>
@ -19,8 +21,8 @@
 	<div class="content">
 		<ul>
 			<li><a class="items disabled" href="">Train routes</a></li>
-			<li><a class="items" href="train.html">My train</a></li>
-			<li><a class="items" href="station.html">Station departures/arrivals</a></li>
+			<li id="my-train-li"><a class="items" href="train.html">My train</a></li>
+			<li id="station-arr-dep-li"><a class="items" href="station.html">Station departures/arrivals</a></li>
 			<li><a class="items" href="about.html">About</a></li>
 		</ul>
 	</div>
--- a/index.js
+++ b/index.js
@ -0,0 +1,58 @@
+window.addEventListener('load', function (e) {
+    if (window.localStorage) {
+        var recentViewTrain = localStorage.getItem('recent/view-train')
+        if (recentViewTrain) {
+            /**
+             * @property {string} trainNumber
+             * @property {string} date
+             * @property {string} $addDate
+             * @property {string | undefined} groupIndex
+             */
+            recentViewTrain = JSON.parse(recentViewTrain)
+            var addDate = new Date(recentViewTrain.$addDate)
+            addDate.setHours(addDate.getHours() + 2) // store recents for 2 hours
+            if (addDate.getTime() > Date.now()) {
+                var recentViewTrainLi = document.createElement('li')
+                var recentViewTrainLink = document.createElement('a')
+                recentViewTrainLi.appendChild(recentViewTrainLink)
+                var recentViewTrainLinkUrl = new URL('/view-train.html', window.location.origin)
+                recentViewTrainLinkUrl.searchParams.append('train', recentViewTrain.trainNumber)
+                recentViewTrainLinkUrl.searchParams.append('date', recentViewTrain.date)
+                if (recentViewTrain.groupIndex) {
+                    recentViewTrainLinkUrl.searchParams.append('groupIndex', recentViewTrain.groupIndex)
+                }
+                recentViewTrainLink.href = recentViewTrainLinkUrl.toString()
+                recentViewTrainLink.classList.add('items')
+                recentViewTrainLink.innerText = `Recent train: ${recentViewTrain.trainNumber}`
+
+                fetch(`https://scraper.infotren.dcdev.ro/v3/trains/${recentViewTrain.trainNumber}?date=${recentViewTrain.date}`)
+                    .then(function (result) {
+                        if (result.ok) {
+                            return result.json()
+                        }
+                    })
+                    .then(function (result) {
+                        recentViewTrainLink.innerText = 'Recent train: '
+                        trainIdSpan(result.rank, result.number, recentViewTrainLink)
+                        if (recentViewTrain.groupIndex !== undefined || result.groups.length === 1) {
+                            var group = result.groups[recentViewTrain.groupIndex || 0]
+                            if (group.status) {
+                                if (group.status.delay === 0) {
+                                    recentViewTrainLink.appendChild(document.createTextNode(" (on time)"))
+                                }
+                                else if (group.status.delay > 0) {
+                                    recentViewTrainLink.appendChild(document.createTextNode(` (${group.status.delay} min late)`))
+                                }
+                                else {
+                                    recentViewTrainLink.appendChild(document.createTextNode(` (${-group.status.delay} min early)`))
+                                }
+                            }
+                        }
+                    })
+
+                var myTrainLi = document.getElementById("my-train-li")
+                myTrainLi.parentNode.insertBefore(recentViewTrainLi, myTrainLi.nextSibling)
+            }
+        }
+    }
+})
--- a/sw.js
+++ b/sw.js
@ -1,4 +1,4 @@
-const VERSION = 'v23'
+const VERSION = 'v24'
 const API_ORIGIN = 'https://scraper.infotren.dcdev.ro/'
 const API_TRAINS = `${API_ORIGIN}v3/trains`
 const API_STATIONS = `${API_ORIGIN}v3/stations`
@ -22,8 +22,10 @@ const CACHE_FIRST = [

 	// Pages
 	'/index.html',
+	'/index.js',

 	'/about.html',
+	'/about.js',

 	'/train.html',
 	'/train.js',
--- a/view-train.js
+++ b/view-train.js
@ -129,6 +129,14 @@ function onTrainData(data, fetchDate) {
 				function onAction(e) {
 					var url = new URL(window.location.toString())
 					groupIndex = i
+					if (window.localStorage) {
+						localStorage.setItem('recent/view-train', JSON.stringify({
+							trainNumber: trainNumber,
+							date: date.toISOString(),
+							groupIndex: groupIndex,
+							$addDate: new Date().toISOString(),
+						}))
+					}
 					url.searchParams.append('groupIndex', groupIndex)
 					window.history.pushState({'groupIndex': groupIndex}, '', url.toString( ))
 					onTrainData(data)
@ -512,6 +520,19 @@ window.addEventListener('load', function (e) {
 	date = sp.has('date') ? new Date(sp.get('date')) : new Date()
 	groupIndex = sp.has('groupIndex') ? parseInt(sp.get('groupIndex')) : null

+	if (window.localStorage) {
+		var oldRecent = localStorage.getItem('recent/view-train')
+		if (oldRecent) {
+			oldRecent = JSON.parse(oldRecent)
+		}
+		localStorage.setItem('recent/view-train', JSON.stringify({
+			trainNumber: trainNumber,
+			date: date.toISOString(),
+			groupIndex: oldRecent && oldRecent.trainNumber === trainNumber ? oldRecent.groupIndex : undefined,
+			$addDate: new Date().toISOString(),
+		}))
+	}
+
 	document.querySelectorAll('.rsk').forEach(function (rskElem) {
 		rskElem.addEventListener('click', function (e) {
 			rsk()