mirror of
https://codeberg.org/kbruen/kai.infotren.git
synced 2025-02-22 17:19:37 +02:00
Initial commit
This commit is contained in:
commit
f5c01f97c9
GPG key ID:
C1980A470C3EE5B1
10 changed files with 813 additions and 0 deletions
8
back.js
Normal file
8
back.js
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
window.addEventListener('load', function (e) {
|
||||
this.document.body.addEventListener('keydown', function (e) {
|
||||
if (e.key == 'Backspace') {
|
||||
e.preventDefault()
|
||||
window.history.back()
|
||||
}
|
||||
})
|
||||
})
|
||||
199
base.css
Normal file
199
base.css
Normal file
|
|
@ -0,0 +1,199 @@
|
|||
html {
|
||||
height: 100vh;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
font-size: 17px;
|
||||
font-weight: 400;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 100%;
|
||||
|
||||
overflow-y: scroll;
|
||||
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.content::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: auto;
|
||||
display: flex;
|
||||
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
|
||||
footer * {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
footer .lsk {
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
footer .csk {
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
footer .rsk {
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 17px;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
|
||||
margin: 1px 0;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
|
||||
margin: 1px 0;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
|
||||
margin: 1px 0;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
|
||||
color: #606060;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
p.pri {
|
||||
font-size: 17px;
|
||||
font-weight: 400;
|
||||
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
p.sec {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
|
||||
margin: 0 8px;
|
||||
|
||||
color: gray;
|
||||
}
|
||||
|
||||
p.thi {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
|
||||
margin: 0 8px;
|
||||
|
||||
color: gray;
|
||||
}
|
||||
|
||||
p, ul {
|
||||
font-size: 17px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
p.link, a {
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
p.btn, button {
|
||||
font-size: 17px;
|
||||
font-weight: 400;
|
||||
|
||||
margin: 8px;
|
||||
padding: 8px;
|
||||
border: 1px solid grey;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
li:focus {
|
||||
color: white;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
|
||||
padding: 8px;
|
||||
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a.disabled {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
a:not(.disabled):hover:not(:focus) {
|
||||
color: black;
|
||||
background-color: lightskyblue;
|
||||
}
|
||||
|
||||
a:focus {
|
||||
color: white;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
input {
|
||||
display: block;
|
||||
|
||||
box-sizing: border-box;
|
||||
width: calc(100% - 16px);
|
||||
|
||||
margin: 8px;
|
||||
padding: 2px;
|
||||
border: 2px solid grey;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
28
index.html
Normal file
28
index.html
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>InfoTren</title>
|
||||
|
||||
<link rel="stylesheet" href="/base.css">
|
||||
|
||||
<script src="items.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>InfoTren</h1>
|
||||
|
||||
<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 disabled" href="station.html">Station departures/arrivals</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="csk">Select</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
48
items.js
Normal file
48
items.js
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
var currentIndex = 0
|
||||
|
||||
function nav(offset) {
|
||||
var items = document.querySelectorAll('.items:not(.disabled)')
|
||||
if (offset === -1) {
|
||||
if (currentIndex <= 0) {
|
||||
return
|
||||
}
|
||||
}
|
||||
else if (offset === 1) {
|
||||
if (currentIndex >= items.length - 1) {
|
||||
return
|
||||
}
|
||||
}
|
||||
else {
|
||||
console.error(`nav called with unknown offset: ${offset}`)
|
||||
}
|
||||
|
||||
currentIndex += offset
|
||||
items[currentIndex].focus()
|
||||
items[currentIndex].addEventListener('keydown', handleKeyDown)
|
||||
}
|
||||
|
||||
function handleKeyDown(e) {
|
||||
switch (e.key) {
|
||||
case 'ArrowUp':
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
nav(-1)
|
||||
break
|
||||
case 'ArrowDown':
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
nav(1)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('load', function (e) {
|
||||
// Select first item
|
||||
var items = document.querySelectorAll('.items:not(.disabled)')
|
||||
if (items.length > 0) {
|
||||
items[0].focus()
|
||||
items[0].addEventListener('keydown', handleKeyDown)
|
||||
}
|
||||
|
||||
document.body.addEventListener('keydown', handleKeyDown)
|
||||
})
|
||||
16
manifest.webapp
Normal file
16
manifest.webapp
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
{
|
||||
"version": "1",
|
||||
"name": "InfoTren",
|
||||
"launch_path": "/index.html",
|
||||
"description": "Frontend for InfoFer scraper",
|
||||
"developer": {
|
||||
"name": "Dan Cojocaru",
|
||||
"url": "https://dcdev.ro"
|
||||
},
|
||||
"installs_allowed_from": [
|
||||
"*"
|
||||
],
|
||||
"default_locale": "en",
|
||||
"permissions": {},
|
||||
"cursor": false
|
||||
}
|
||||
30
train.html
Normal file
30
train.html
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Train - InfoTren</title>
|
||||
|
||||
<link rel="stylesheet" href="/base.css">
|
||||
|
||||
<script src="back.js"></script>
|
||||
<script src="items.js"></script>
|
||||
<script src="train.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Train Information</h1>
|
||||
|
||||
<h4>Train Number</h4>
|
||||
<input class="items" type="tel" name="trainNumber" id="trainNumber">
|
||||
|
||||
<h4>Suggestions</h4>
|
||||
<div class="content">
|
||||
<ul id="suggestionsArea"></ul>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="csk">Search</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
109
train.js
Normal file
109
train.js
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
var knownTrains = []
|
||||
|
||||
function goToTrain(number) {
|
||||
var url = new URL(window.location.href)
|
||||
url.pathname = 'view-train.html'
|
||||
url.searchParams.set('train', number)
|
||||
url.searchParams.set('date', new Date().toISOString())
|
||||
window.location.href = url.toString()
|
||||
}
|
||||
|
||||
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 trainNumberInput = document.getElementById('trainNumber')
|
||||
var trainNumber = trainNumberInput.value.trim()
|
||||
|
||||
var suggestions = []
|
||||
for (var i = 0; i < knownTrains.length; i++) {
|
||||
if (trainNumber) {
|
||||
if (!knownTrains[i].number.includes(trainNumber)) {
|
||||
continue
|
||||
}
|
||||
}
|
||||
suggestions.push(knownTrains[i])
|
||||
}
|
||||
|
||||
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) {
|
||||
goToTrain(suggestion.number)
|
||||
}
|
||||
suggestionLi.addEventListener('click', onAction)
|
||||
suggestionLi.addEventListener('keypress', function (e) {
|
||||
if (e.key == 'Enter') {
|
||||
onAction(e)
|
||||
}
|
||||
})
|
||||
|
||||
var trainNameP = document.createElement('p')
|
||||
suggestionLi.appendChild(trainNameP)
|
||||
|
||||
trainNameP.textContent = `${suggestion.rank} ${suggestion.number}`
|
||||
trainNameP.classList.add('pri', 'trainName')
|
||||
|
||||
var trainCompanyP = document.createElement('p')
|
||||
suggestionLi.appendChild(trainCompanyP)
|
||||
|
||||
trainCompanyP.textContent = suggestion.company
|
||||
trainCompanyP.classList.add('thi')
|
||||
}, 0)
|
||||
})
|
||||
|
||||
setTimeout(function () {
|
||||
_rebuildDebounce = null
|
||||
if (_rebuildRequested) {
|
||||
rebuildSuggestions()
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
|
||||
window.addEventListener('load', function (e) {
|
||||
var trainNumber = document.getElementById('trainNumber')
|
||||
trainNumber.addEventListener('input', function (e) {
|
||||
rebuildSuggestions()
|
||||
})
|
||||
trainNumber.addEventListener('focus', function (e) {
|
||||
document.getElementsByClassName('csk')[0].textContent = 'Search'
|
||||
})
|
||||
trainNumber.addEventListener('blur', function (e) {
|
||||
document.getElementsByClassName('csk')[0].textContent = 'Select'
|
||||
})
|
||||
trainNumber.addEventListener('keypress', function (e) {
|
||||
if (e.key == 'Enter') {
|
||||
goToTrain(trainNumber.value.trim())
|
||||
}
|
||||
})
|
||||
|
||||
fetch('https://scraper.infotren.dcdev.ro/v2/trains')
|
||||
.then(function (response) {
|
||||
return response.json()
|
||||
})
|
||||
.then(function (response) {
|
||||
knownTrains = response
|
||||
knownTrains.sort(function(a, b) { return a.number - b.number })
|
||||
})
|
||||
.then(function () {
|
||||
rebuildSuggestions()
|
||||
})
|
||||
})
|
||||
75
view-train.css
Normal file
75
view-train.css
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
.IR, .IRN {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.early {
|
||||
color: green;
|
||||
}
|
||||
|
||||
.late {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.station {
|
||||
color: black;
|
||||
}
|
||||
|
||||
#company {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stationItem {
|
||||
display: grid;
|
||||
grid-template-columns: 50px auto 50px;
|
||||
grid-template-rows: auto;
|
||||
grid-template-areas:
|
||||
"arr name dep"
|
||||
"arr km dep"
|
||||
"arr platform dep";
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.stationItem .name {
|
||||
text-align: center;
|
||||
grid-area: name;
|
||||
}
|
||||
|
||||
.stationItem .arrival {
|
||||
text-align: start;
|
||||
grid-area: arr;
|
||||
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.stationItem .departure {
|
||||
text-align: end;
|
||||
grid-area: dep;
|
||||
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.stationItem .arrival, .station .departure {
|
||||
align-self: center;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.stationItem .arrival .original, .stationItem .departure .original {
|
||||
color: #a0a0a0;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.stationItem .arrival .not-real, .stationItem .departure .not-real {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.stationItem .km {
|
||||
text-align: center;
|
||||
grid-area: km;
|
||||
}
|
||||
|
||||
.stationItem .platform {
|
||||
text-align: center;
|
||||
grid-area: platform;
|
||||
}
|
||||
42
view-train.html
Normal file
42
view-train.html
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>View Train - InfoTren</title>
|
||||
|
||||
<link rel="stylesheet" href="/base.css">
|
||||
<link rel="stylesheet" href="view-train.css">
|
||||
|
||||
<script src="back.js"></script>
|
||||
<script src="view-train.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Train Info</h1>
|
||||
<p class="sec" id="company"></p>
|
||||
|
||||
<div class="content" tabindex="0">
|
||||
<div id="route">
|
||||
<h4>Route</h4>
|
||||
<p class="thi">From</p>
|
||||
<p class="pri" id="route-from"></p>
|
||||
<p class="thi">To</p>
|
||||
<p class="pri" id="route-to"></p>
|
||||
</div>
|
||||
<div id="status" class="hidden">
|
||||
<h4>Status</h4>
|
||||
<p class="pri" id="status-delay"></p>
|
||||
<p class="sec" id="status-location"></p>
|
||||
</div>
|
||||
<div id="stations">
|
||||
<h4>Stations</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="csk"></div>
|
||||
<div class="rsk">Refresh</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
258
view-train.js
Normal file
258
view-train.js
Normal file
|
|
@ -0,0 +1,258 @@
|
|||
var trainNumber
|
||||
var date
|
||||
|
||||
var showKm = false
|
||||
|
||||
var trainData = null
|
||||
|
||||
function onTrainData(data) {
|
||||
var title = document.getElementsByTagName('h1')[0]
|
||||
title.textContent = ''
|
||||
title.appendChild(document.createTextNode('Train '))
|
||||
var rankSpan = document.createElement('span')
|
||||
rankSpan.textContent = data.rank
|
||||
rankSpan.classList.add(data.rank)
|
||||
title.appendChild(rankSpan)
|
||||
title.appendChild(document.createTextNode(` ${data.number}`))
|
||||
|
||||
document.getElementById('company').textContent = data.operator
|
||||
|
||||
document.getElementById('route-from').textContent = data.route.from
|
||||
document.getElementById('route-to').textContent = data.route.to
|
||||
|
||||
if (data.status) {
|
||||
document.getElementById('status').classList.remove('hidden')
|
||||
|
||||
var statusDelay = document.getElementById('status-delay')
|
||||
while (statusDelay.childNodes.length > 0) {
|
||||
statusDelay.childNodes[0].remove()
|
||||
}
|
||||
var delayString = ''
|
||||
var delayMinutes = data.status.delay
|
||||
if (delayMinutes === 0) {
|
||||
delayString = 'No delay'
|
||||
statusDelay.appendChild(document.createTextNode(delayString))
|
||||
}
|
||||
else {
|
||||
var early = false
|
||||
if (delayMinutes < 0) {
|
||||
early = true
|
||||
delayMinutes = -delayMinutes
|
||||
}
|
||||
|
||||
if (delayMinutes >= 60) {
|
||||
var hours = Math.floor(delayMinutes / 60)
|
||||
delayMinutes = delayMinutes % 60
|
||||
delayString += hours.toString()
|
||||
delayString += ' hour'
|
||||
if (hours > 1) {
|
||||
delayString += 's'
|
||||
}
|
||||
}
|
||||
if (delayMinutes > 0) {
|
||||
if (delayString.length > 0) {
|
||||
delayString += ' and '
|
||||
}
|
||||
delayString += delayMinutes.toString()
|
||||
delayString += ' minute'
|
||||
if (delayMinutes > 1) {
|
||||
delayString += 's'
|
||||
}
|
||||
}
|
||||
delayString += ' '
|
||||
statusDelay.appendChild(document.createTextNode(delayString))
|
||||
|
||||
var kindSpan = document.createElement('span')
|
||||
statusDelay.appendChild(kindSpan)
|
||||
if (early) {
|
||||
kindSpan.textContent = 'early'
|
||||
kindSpan.classList.add('early')
|
||||
}
|
||||
else {
|
||||
kindSpan.textContent = 'late'
|
||||
kindSpan.classList.add('late')
|
||||
}
|
||||
}
|
||||
|
||||
var statusLocation = document.getElementById('status-location')
|
||||
while (statusLocation.childNodes.length > 0) {
|
||||
statusLocation.childNodes[0].remove()
|
||||
}
|
||||
var stateString = ''
|
||||
if (data.status.state === 'arrival') {
|
||||
stateString += 'when arriving at '
|
||||
}
|
||||
else if (data.status.state === 'departure') {
|
||||
stateString += 'when departing from '
|
||||
}
|
||||
else if (data.status.state === 'passing') {
|
||||
stateString += 'while passing through '
|
||||
}
|
||||
statusLocation.appendChild(document.createTextNode(stateString))
|
||||
var stationSpan = document.createElement('span')
|
||||
statusLocation.appendChild(stationSpan)
|
||||
stationSpan.textContent = data.status.station
|
||||
stationSpan.classList.add('station')
|
||||
}
|
||||
else {
|
||||
document.getElementById('status').classList.add('hidden')
|
||||
}
|
||||
|
||||
var stationsDiv = document.getElementById('stations')
|
||||
while (stationsDiv.childNodes.length > 0) {
|
||||
stationsDiv.childNodes[0].remove()
|
||||
}
|
||||
|
||||
var separator = document.createElement('h4')
|
||||
stationsDiv.appendChild(separator)
|
||||
separator.textContent = 'Stations'
|
||||
|
||||
var stationsList = document.createElement('ul')
|
||||
stationsDiv.appendChild(stationsList)
|
||||
|
||||
data.stations.forEach(function (station) {
|
||||
var stationItem = document.createElement('li')
|
||||
stationsList.appendChild(stationItem)
|
||||
stationItem.classList.add('stationItem')
|
||||
|
||||
var stationName = document.createElement('p')
|
||||
stationItem.appendChild(stationName)
|
||||
stationName.textContent = station.name
|
||||
stationName.classList.add('pri', 'name')
|
||||
|
||||
if (station.arrival) {
|
||||
var stationArrival = document.createElement('div')
|
||||
stationItem.appendChild(stationArrival)
|
||||
stationArrival.classList.add('arrival')
|
||||
|
||||
var originalArr = document.createElement('p')
|
||||
stationArrival.appendChild(originalArr)
|
||||
var arrDate = new Date(station.arrival.scheduleTime)
|
||||
originalArr.textContent = `${arrDate.getHours().toString().padStart(2, "0")}:${arrDate.getMinutes().toString().padStart(2, "0")}`
|
||||
originalArr.classList.add('pri')
|
||||
if (station.arrival.status && station.arrival.status.delay != 0) {
|
||||
originalArr.classList.remove('pri')
|
||||
originalArr.classList.add('thi', 'original')
|
||||
|
||||
var actualArr = document.createElement('p')
|
||||
stationArrival.appendChild(actualArr)
|
||||
arrDate.setMinutes(arrDate.getMinutes() + station.arrival.status.delay)
|
||||
actualArr.textContent = `${arrDate.getHours().toString().padStart(2, "0")}:${arrDate.getMinutes().toString().padStart(2, "0")}`
|
||||
actualArr.classList.add('pri', station.arrival.status.delay > 0 ? 'late' : 'early')
|
||||
if (!station.arrival.status.real) {
|
||||
actualArr.classList.add('not-real')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (station.departure) {
|
||||
var stationDeparture = document.createElement('div')
|
||||
stationItem.appendChild(stationDeparture)
|
||||
stationDeparture.classList.add('departure')
|
||||
|
||||
var originalDep = document.createElement('p')
|
||||
stationDeparture.appendChild(originalDep)
|
||||
var depDate = new Date(station.departure.scheduleTime)
|
||||
originalDep.textContent = `${depDate.getHours().toString().padStart(2, "0")}:${depDate.getMinutes().toString().padStart(2, "0")}`
|
||||
originalDep.classList.add('pri')
|
||||
if (station.departure.status && station.departure.status.delay != 0) {
|
||||
originalDep.classList.remove('pri')
|
||||
originalDep.classList.add('thi', 'original')
|
||||
|
||||
var actualDep = document.createElement('p')
|
||||
stationDeparture.appendChild(actualDep)
|
||||
depDate.setMinutes(depDate.getMinutes() + station.departure.status.delay)
|
||||
actualDep.textContent = `${depDate.getHours().toString().padStart(2, "0")}:${depDate.getMinutes().toString().padStart(2, "0")}`
|
||||
actualDep.classList.add('pri', station.departure.status.delay > 0 ? 'late' : 'early')
|
||||
if (!station.departure.status.real) {
|
||||
actualDep.classList.add('not-real')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var stationKm = document.createElement('p')
|
||||
stationItem.appendChild(stationKm)
|
||||
stationKm.textContent = `${station.km} km`
|
||||
stationKm.classList.add('thi', 'km')
|
||||
if (!showKm) {
|
||||
stationKm.classList.add('hidden')
|
||||
}
|
||||
|
||||
if (station.platform) {
|
||||
var stationPlatform = document.createElement('p')
|
||||
stationItem.appendChild(stationPlatform)
|
||||
stationPlatform.textContent = `platform ${station.platform}`
|
||||
stationPlatform.classList.add('thi', 'platform')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
var refreshStopToken = null
|
||||
function refresh() {
|
||||
fetch(`https://scraper.infotren.dcdev.ro/v2/train/${trainNumber}?date=${date.toISOString()}`)
|
||||
.then(function (response) {
|
||||
return response.json()
|
||||
})
|
||||
.then(function (response) {
|
||||
trainData = response
|
||||
onTrainData(response)
|
||||
})
|
||||
.then(function () {
|
||||
refreshStopToken = setTimeout(function () {
|
||||
refresh()
|
||||
}, 60000)
|
||||
})
|
||||
}
|
||||
|
||||
window.addEventListener('unload', function (e) {
|
||||
if (refreshStopToken != null) {
|
||||
clearTimeout(refreshStopToken)
|
||||
}
|
||||
})
|
||||
|
||||
window.addEventListener('load', function (e) {
|
||||
if (!new URL(window.location.href).searchParams.has('train')) {
|
||||
window.history.back()
|
||||
this.setTimeout(function () {
|
||||
var url = new URL(window.location.href)
|
||||
url.pathname = 'train.html'
|
||||
window.location.href = url.toString()
|
||||
}, 100)
|
||||
}
|
||||
|
||||
var sp = new URL(window.location.href).searchParams
|
||||
|
||||
trainNumber = sp.get('train')
|
||||
date = sp.has('date') ? new Date(sp.get('date')) : new Date()
|
||||
|
||||
var content = document.getElementsByClassName('content')[0]
|
||||
content.focus()
|
||||
content.addEventListener('keydown', function (e) {
|
||||
switch (e.key) {
|
||||
case 'ArrowUp':
|
||||
content.scrollBy(0, -50)
|
||||
break
|
||||
case 'ArrowDown':
|
||||
content.scrollBy(0, 50)
|
||||
break
|
||||
case 'SoftRight':
|
||||
refresh()
|
||||
break
|
||||
case '*':
|
||||
showKm = !showKm
|
||||
document.querySelectorAll('.km').forEach(function (kmItem) {
|
||||
if (showKm) {
|
||||
kmItem.classList.remove('hidden')
|
||||
}
|
||||
else {
|
||||
kmItem.classList.add('hidden')
|
||||
}
|
||||
})
|
||||
break
|
||||
default:
|
||||
console.log(e.key)
|
||||
}
|
||||
})
|
||||
|
||||
refresh()
|
||||
})
|
||||
Loading…
Add table
Reference in a new issue