Compare commits

...

4 commits

Author SHA1 Message Date
7645effd5f
Add recently viewed train on homepage 2022-12-27 19:08:42 +02:00
a653e92e03
Add share on clicking title 2022-12-25 10:09:19 +02:00
06e57e5b8b
Fix CSS typo 2022-12-25 09:55:10 +02:00
c0c5f3e7c4
Show time in monospace 2022-12-25 09:54:14 +02:00
7 changed files with 125 additions and 12 deletions

View file

@ -255,6 +255,12 @@ body {
font-family: -apple-system, BlinkMacSystemFont, Ubuntu, 'Segoe UI', 'Roboto', Sans-Serif, sans-serif; font-family: -apple-system, BlinkMacSystemFont, Ubuntu, 'Segoe UI', 'Roboto', Sans-Serif, sans-serif;
} }
pre {
margin: 0;
display: inline;
font-family: 'Martian Mono', Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
}
.tabs { .tabs {
display: flex; display: flex;
flex-direction: row; flex-direction: row;

View file

@ -12,6 +12,8 @@
<script src="/common/worker.js"></script> <script src="/common/worker.js"></script>
<script src="/common/items.js"></script> <script src="/common/items.js"></script>
<script src="/common/trainId.js"></script>
<script src="index.js"></script>
</head> </head>
<body> <body>
<h1>InfoTren</h1> <h1>InfoTren</h1>
@ -19,8 +21,8 @@
<div class="content"> <div class="content">
<ul> <ul>
<li><a class="items disabled" href="">Train routes</a></li> <li><a class="items disabled" href="">Train routes</a></li>
<li><a class="items" href="train.html">My train</a></li> <li id="my-train-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="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> <li><a class="items" href="about.html">About</a></li>
</ul> </ul>
</div> </div>

58
index.js Normal file
View file

@ -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)
}
}
}
})

4
sw.js
View file

@ -1,4 +1,4 @@
const VERSION = 'v20' const VERSION = 'v24'
const API_ORIGIN = 'https://scraper.infotren.dcdev.ro/' const API_ORIGIN = 'https://scraper.infotren.dcdev.ro/'
const API_TRAINS = `${API_ORIGIN}v3/trains` const API_TRAINS = `${API_ORIGIN}v3/trains`
const API_STATIONS = `${API_ORIGIN}v3/stations` const API_STATIONS = `${API_ORIGIN}v3/stations`
@ -22,8 +22,10 @@ const CACHE_FIRST = [
// Pages // Pages
'/index.html', '/index.html',
'/index.js',
'/about.html', '/about.html',
'/about.js',
'/train.html', '/train.html',
'/train.js', '/train.js',

View file

@ -39,7 +39,9 @@ function onStationData(data) {
var timeDiv = document.createElement('p') var timeDiv = document.createElement('p')
trainItem.appendChild(timeDiv) trainItem.appendChild(timeDiv)
timeDiv.classList.add('pri', 'time') timeDiv.classList.add('pri', 'time')
timeDiv.textContent = new Date(train.time).toLocaleTimeString([], { 'hour': '2-digit', 'minute': '2-digit' }) var timeDivPre = document.createElement('pre')
timeDiv.appendChild(timeDivPre)
timeDivPre.textContent = new Date(train.time).toLocaleTimeString([], { 'hour': '2-digit', 'minute': '2-digit' })
if (train.status && train.status.delay != 0) { if (train.status && train.status.delay != 0) {
var delayDiv = document.createElement('p') var delayDiv = document.createElement('p')
@ -61,20 +63,24 @@ function onStationData(data) {
var rankDiv = document.createElement('p') var rankDiv = document.createElement('p')
trainItem.appendChild(rankDiv) trainItem.appendChild(rankDiv)
rankDiv.textContent = train.train.rank
rankDiv.classList.add('sec', 'rank', train.train.rank) rankDiv.classList.add('sec', 'rank', train.train.rank)
var rankDivPre = document.createElement('pre')
rankDiv.appendChild(rankDivPre)
rankDivPre.textContent = train.train.rank
var trainDiv = document.createElement('p') var trainDiv = document.createElement('p')
trainItem.appendChild(trainDiv) trainItem.appendChild(trainDiv)
trainDiv.classList.add('pri', 'train') trainDiv.classList.add('pri', 'train')
var trainDivHref = document.createElement('a') var trainDivHref = document.createElement('a')
trainDiv.appendChild(trainDivHref) trainDiv.appendChild(trainDivHref)
trainDivHref.textContent = train.train.number
trainDivHref.classList.add('no-a-custom') trainDivHref.classList.add('no-a-custom')
var trainUrl = new URL('/view-train.html', window.location.origin) var trainUrl = new URL('/view-train.html', window.location.origin)
trainUrl.searchParams.append('train', train.train.number) trainUrl.searchParams.append('train', train.train.number)
trainUrl.searchParams.append('date', train.train.departureDate) trainUrl.searchParams.append('date', train.train.departureDate)
trainDivHref.href = trainUrl.toString() trainDivHref.href = trainUrl.toString()
var trainDivHrefPre = document.createElement('pre')
trainDivHref.appendChild(trainDivHrefPre)
trainDivHrefPre.textContent = train.train.number
var terminusDiv = document.createElement('p') var terminusDiv = document.createElement('p')
trainItem.appendChild(terminusDiv) trainItem.appendChild(terminusDiv)
@ -85,7 +91,9 @@ function onStationData(data) {
var platformDiv = document.createElement('div') var platformDiv = document.createElement('div')
trainItem.appendChild(platformDiv) trainItem.appendChild(platformDiv)
platformDiv.classList.add('thi', 'platform') platformDiv.classList.add('thi', 'platform')
platformDiv.textContent = train.status.platform var platformDivPre = document.createElement('pre')
platformDiv.appendChild(platformDivPre)
platformDivPre.textContent = train.status.platform
} }
if (train.status && train.status.cancelled) { if (train.status && train.status.cancelled) {
@ -201,6 +209,12 @@ window.addEventListener('load', function (e) {
}) })
}) })
if (navigator.canShare && navigator.canShare({ url: '' })) {
document.getElementById('title').addEventListener('click', function () {
navigator.share({ url: '' });
})
}
refresh() refresh()
setInterval(function () { setInterval(function () {

View file

@ -64,7 +64,7 @@
align-items: flex-end; align-items: flex-end;
} }
.stationItem .arrival, .station .departure { .stationItem .arrival, .stationItem .departure {
align-self: center; align-self: center;
display: flex; display: flex;

View file

@ -129,6 +129,14 @@ function onTrainData(data, fetchDate) {
function onAction(e) { function onAction(e) {
var url = new URL(window.location.toString()) var url = new URL(window.location.toString())
groupIndex = i 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) url.searchParams.append('groupIndex', groupIndex)
window.history.pushState({'groupIndex': groupIndex}, '', url.toString( )) window.history.pushState({'groupIndex': groupIndex}, '', url.toString( ))
onTrainData(data) onTrainData(data)
@ -285,7 +293,7 @@ function onTrainData(data, fetchDate) {
var originalArr = document.createElement('p') var originalArr = document.createElement('p')
stationArrival.appendChild(originalArr) stationArrival.appendChild(originalArr)
var originalArrSpan = document.createElement('span') var originalArrSpan = document.createElement('pre')
originalArr.appendChild(originalArrSpan) originalArr.appendChild(originalArrSpan)
var arrDate = new Date(station.arrival.scheduleTime) var arrDate = new Date(station.arrival.scheduleTime)
originalArrSpan.textContent = arrDate.toLocaleTimeString([], { 'hour': '2-digit', 'minute': '2-digit' }) originalArrSpan.textContent = arrDate.toLocaleTimeString([], { 'hour': '2-digit', 'minute': '2-digit' })
@ -303,11 +311,13 @@ function onTrainData(data, fetchDate) {
var actualArr = document.createElement('p') var actualArr = document.createElement('p')
stationArrival.appendChild(actualArr) stationArrival.appendChild(actualArr)
arrDate.setMinutes(arrDate.getMinutes() + station.arrival.status.delay) arrDate.setMinutes(arrDate.getMinutes() + station.arrival.status.delay)
actualArr.textContent = arrDate.toLocaleTimeString([], { 'hour': '2-digit', 'minute': '2-digit' })
actualArr.classList.add('pri', station.arrival.status.delay > 0 ? 'late' : 'early') actualArr.classList.add('pri', station.arrival.status.delay > 0 ? 'late' : 'early')
if (!station.arrival.status.real) { if (!station.arrival.status.real) {
actualArr.classList.add('not-real') actualArr.classList.add('not-real')
} }
var actualArrPre = document.createElement('pre')
actualArr.appendChild(actualArrPre)
actualArrPre.textContent = arrDate.toLocaleTimeString([], { 'hour': '2-digit', 'minute': '2-digit' })
} }
} }
@ -319,7 +329,7 @@ function onTrainData(data, fetchDate) {
var originalDep = document.createElement('p') var originalDep = document.createElement('p')
stationDeparture.appendChild(originalDep) stationDeparture.appendChild(originalDep)
var depDate = new Date(station.departure.scheduleTime) var depDate = new Date(station.departure.scheduleTime)
var originalDepSpan = document.createElement('span') var originalDepSpan = document.createElement('pre')
originalDep.appendChild(originalDepSpan) originalDep.appendChild(originalDepSpan)
originalDepSpan.textContent = depDate.toLocaleTimeString([], { 'hour': '2-digit', 'minute': '2-digit' }) originalDepSpan.textContent = depDate.toLocaleTimeString([], { 'hour': '2-digit', 'minute': '2-digit' })
originalDep.classList.add('pri') originalDep.classList.add('pri')
@ -336,11 +346,13 @@ function onTrainData(data, fetchDate) {
var actualDep = document.createElement('p') var actualDep = document.createElement('p')
stationDeparture.appendChild(actualDep) stationDeparture.appendChild(actualDep)
depDate.setMinutes(depDate.getMinutes() + station.departure.status.delay) depDate.setMinutes(depDate.getMinutes() + station.departure.status.delay)
actualDep.textContent = depDate.toLocaleTimeString([], { 'hour': '2-digit', 'minute': '2-digit' })
actualDep.classList.add('pri', station.departure.status.delay > 0 ? 'late' : 'early') actualDep.classList.add('pri', station.departure.status.delay > 0 ? 'late' : 'early')
if (!station.departure.status.real) { if (!station.departure.status.real) {
actualDep.classList.add('not-real') actualDep.classList.add('not-real')
} }
var actualDepPre = document.createElement('pre')
actualDep.appendChild(actualDepPre)
actualDepPre.textContent = depDate.toLocaleTimeString([], { 'hour': '2-digit', 'minute': '2-digit' })
} }
} }
@ -508,12 +520,31 @@ window.addEventListener('load', function (e) {
date = sp.has('date') ? new Date(sp.get('date')) : new Date() date = sp.has('date') ? new Date(sp.get('date')) : new Date()
groupIndex = sp.has('groupIndex') ? parseInt(sp.get('groupIndex')) : null 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) { document.querySelectorAll('.rsk').forEach(function (rskElem) {
rskElem.addEventListener('click', function (e) { rskElem.addEventListener('click', function (e) {
rsk() rsk()
}) })
}) })
if (navigator.canShare && navigator.canShare({ url: '' })) {
document.getElementById('title').addEventListener('click', function () {
navigator.share({ url: '' });
})
}
var content = document.getElementsByClassName('content')[0] var content = document.getElementsByClassName('content')[0]
content.focus() content.focus()
content.addEventListener('keydown', function (e) { content.addEventListener('keydown', function (e) {