kbruen/kai.infotren
1
0
Fork 0
mirror of https://codeberg.org/kbruen/kai.infotren.git synced 2025-06-19 10:42:30 +03:00
Code Issues Projects Releases Wiki Activity

Compare commits

base: kbruen:c2ea04de4b3a87773e9baece178dcd57cfbd33a4
Branches Tags
kbruen:master
...
compare: kbruen:255dae9decfaa120c933de689bd343e9ba9059c8
Branches Tags
kbruen:master

4 commits
c2ea04de4b ... 255dae9dec

Author SHA1 Message Date
Dan Cojocaru
255dae9dec
Add service worker version on about page 2022-11-18 07:52:08 +01:00
Dan Cojocaru
3b007ce548
Add defer to script loading 2022-11-18 07:51:12 +01:00
Dan Cojocaru
fd1e7c0729
Add back button 
Also: change PWA to standalone
 2022-11-18 04:58:35 +01:00
Dan Cojocaru
32f52fe549
Fix refresh button on view station page 2022-11-18 01:52:43 +01:00
13 changed files with 251 additions and 31 deletions
Show stats Expand all files Collapse all files

32
about.html
View file

@ -9,20 +9,38 @@
<link rel="stylesheet" href="/base.css"> <link rel="stylesheet" href="/base.css">
<script src="/common/worker.js"></script> <script src="/common/worker.js"></script>
<script src="/common/back.js"></script> <script defer src="/common/back.js"></script>
<script src="/common/items.js"></script> <script defer src="/common/items.js"></script>
<script defer src="about.js"></script>
</head> </head>
<body> <body>
<h1>About</h1> <header>
<div class="left">
<img id="back-button" class="back" src="/common/back.svg"></img>
</div>
<h1>About</h1>
<div class="right"></div>
</header>
<div class="content"> <div class="content">
<h2>InfoTren</h2> <h2>InfoTren</h2>
<p>KaiOS webapp for <a rel="noreferrer" target="_blank" href="https://infofer.ro" class="items inline">Informatica Feroviară</a> scraper</p> <p>KaiOS webapp for <a rel="noreferrer" target="_blank" href="https://infofer.ro" class="items inline">Informatica Feroviară</a> scraper</p>
<h4>Acknowledgements</h4> <div>
<ul> <h4>Acknowledgements</h4>
<li><a rel="noreferrer" target="_blank" href="https://brailleinstitute.org/freefont" class="items">Atkinson Hyperlegible</a></li> <ul>
</ul> <li><a rel="noreferrer" target="_blank" href="https://brailleinstitute.org/freefont" class="items">Atkinson Hyperlegible</a></li>
</ul>
</div>
<div id="debug-info">
<h4>Debugging Information</h4>
<div id="sw-version-div">
<p class="thi">Service Worker Version</p>
<p class="pri items" tabindex="1000" id="sw-version">Not attached to service worker</p>
</div>
</div>
</div> </div>
<footer> <footer>

19
about.js Normal file
View file

@ -0,0 +1,19 @@
window.addEventListener('load', function (e) {
if (navigator.serviceWorker) {
navigator.serviceWorker.ready.then(function (reg) {
reg.active.postMessage({
type: 'swVersionRequest',
})
})
navigator.serviceWorker.addEventListener('message', function (e) {
if ('type' in e.data) {
switch (e.data.type) {
case 'swVersion': {
document.getElementById('sw-version-div').classList.remove('hidden')
document.getElementById('sw-version').textContent = e.data.version
}
}
}
})
}
})

18
base.css
View file

@ -71,6 +71,22 @@ footer .rsk {
text-align: end; text-align: end;
} }
header {
display: flex;
align-items: center;
}
header .left, header .right {
flex-grow: 1;
flex-basis: 0;
}
header .back {
margin: 4px;
height: 24px;
cursor: pointer;
}
h1 { h1 {
font-size: 17px; font-size: 17px;
font-weight: 400; font-weight: 400;
@ -236,7 +252,7 @@ input {
} }
body { body {
font-family: -apple-system, BlinkMacSystemFont, Ubuntu, 'Segoe UI', 'Roboto', Sans-Serif; font-family: -apple-system, BlinkMacSystemFont, Ubuntu, 'Segoe UI', 'Roboto', Sans-Serif, sans-serif;
} }
.tabs { .tabs {

9
common/back.js
View file

@ -1,8 +1,15 @@
window.addEventListener('load', function (e) { window.addEventListener('load', function (e) {
this.document.body.addEventListener('keydown', function (e) { document.body.addEventListener('keydown', function (e) {
if (e.key == 'Backspace' && (e.target.tagName.toUpperCase() !== 'INPUT' || e.target.value.length === 0)) { if (e.key == 'Backspace' && (e.target.tagName.toUpperCase() !== 'INPUT' || e.target.value.length === 0)) {
e.preventDefault() e.preventDefault()
window.history.back() window.history.back()
} }
}) })
var backButton = document.getElementById('back-button')
if (backButton) {
backButton.addEventListener('click', function (e) {
window.history.back()
})
}
}) })

83
common/back.svg Normal file
View file

@ -0,0 +1,83 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="80"
height="21"
viewBox="0 0 80 21"
version="1.1"
id="svg5"
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
sodipodi:docname="back.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
showgrid="false"
showguides="true"
inkscape:zoom="8"
inkscape:cx="69.0625"
inkscape:cy="-14.625"
inkscape:window-width="1920"
inkscape:window-height="966"
inkscape:window-x="0"
inkscape:window-y="28"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs2">
<rect
x="13.964817"
y="34.74966"
width="31.664412"
height="28.903925"
id="rect113" />
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
style="fill:none;stroke:none">
<path
class="arrow"
style="fill:none;stroke:#000000;stroke-opacity:1"
d="m 10.707106,0.5 -9.99999923,10 9.99999923,10 H 79.627 v -20 z"
id="path342"
sodipodi:nodetypes="cccccc" />
<g
id="g1046">
<svg
x="10"
y="0"
width="70"
height="20">
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:11.7322px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;white-space:pre;shape-inside:url(#rect487);fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.909149"
id="text119"
x="50%"
y="50%"
dominant-baseline="central"
text-anchor="middle"
inkscape:label="text119">Back</text>
</svg>
<rect
style="fill:none;stroke:none;stroke-width:5.63791"
id="rect487"
width="68.209442"
height="19.004217"
x="10.917553"
y="0.99609375" />
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.5 KiB

9
manifest.json
View file

@ -1,9 +1,10 @@
{ {
"id": "ro.dcdev.infotren.kai",
"name": "Info Tren: Romanian Railways", "name": "Info Tren: Romanian Railways",
"short_name": "Info Tren", "short_name": "Info Tren",
"theme_color": "#0000ff", "theme_color": "#0000ff",
"background_color": "#ffffff", "background_color": "#ffffff",
"display": "minimal-ui", "display": "standalone",
"scope": "/", "scope": "/",
"start_url": "/", "start_url": "/",
"shortcuts": [ "shortcuts": [
@ -12,6 +13,12 @@
"short_name": "My train", "short_name": "My train",
"description": "Find information about a train", "description": "Find information about a train",
"url": "/train.html" "url": "/train.html"
},
{
"name": "Station Departures/Arrivals",
"short_name": "Departures/Arrivals",
"description": "View the departures and arrivals boards of a station",
"url": "/station.html"
} }
] ]
} }

14
station.html
View file

@ -11,12 +11,18 @@
<link rel="stylesheet" href="/base.css"> <link rel="stylesheet" href="/base.css">
<script src="/common/worker.js"></script> <script src="/common/worker.js"></script>
<script src="/common/back.js"></script> <script defer src="/common/back.js"></script>
<script src="/common/items.js"></script> <script defer src="/common/items.js"></script>
<script src="station.js"></script> <script defer src="station.js"></script>
</head> </head>
<body> <body>
<h1>Station Information</h1> <header>
<div class="left">
<img id="back-button" class="back" src="/common/back.svg"></img>
</div>
<h1>Station Information</h1>
<div class="right"></div>
</header>
<h4><label for="stationName">Station Name</label></h4> <h4><label for="stationName">Station Name</label></h4>
<input type="search" class="items" name="stationName" id="stationName"> <input type="search" class="items" name="stationName" id="stationName">

16
sw.js
View file

@ -1,4 +1,4 @@
const VERSION = 'v15' const VERSION = 'v18'
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`
@ -79,6 +79,20 @@ self.addEventListener('activate', (event) => {
event.waitUntil(Promise.all([deleteOldCaches(), enableNavigationPreload()])) event.waitUntil(Promise.all([deleteOldCaches(), enableNavigationPreload()]))
}) })
self.addEventListener('message', (event) => {
if ('type' in event.data) {
switch (event.data.type) {
case 'swVersionRequest': {
event.source.postMessage({
type: 'swVersion',
version: VERSION,
})
break;
}
}
}
})
/** /**
* @param {RequestInfo | URL} request * @param {RequestInfo | URL} request
* @param {Response} response * @param {Response} response

14
train.html
View file

@ -11,12 +11,18 @@
<link rel="stylesheet" href="/base.css"> <link rel="stylesheet" href="/base.css">
<script src="/common/worker.js"></script> <script src="/common/worker.js"></script>
<script src="/common/back.js"></script> <script defer src="/common/back.js"></script>
<script src="/common/items.js"></script> <script defer src="/common/items.js"></script>
<script src="train.js"></script> <script defer src="train.js"></script>
</head> </head>
<body> <body>
<h1>Train Information</h1> <header>
<div class="left">
<img id="back-button" class="back" src="/common/back.svg"></img>
</div>
<h1>Train Information</h1>
<div class="right"></div>
</header>
<h4><label for="trainNumber">Train Number</label></h4> <h4><label for="trainNumber">Train Number</label></h4>
<input class="items" type="tel" name="trainNumber" id="trainNumber"> <input class="items" type="tel" name="trainNumber" id="trainNumber">

4
view-station.css
View file

@ -10,6 +10,10 @@
color: red !important; color: red !important;
} }
.rsk {
cursor: pointer;
}
#-date { #-date {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;

16
view-station.html
View file

@ -12,13 +12,19 @@
<link rel="stylesheet" href="view-station.css"> <link rel="stylesheet" href="view-station.css">
<script src="/common/worker.js"></script> <script src="/common/worker.js"></script>
<script src="/common/back.js"></script> <script defer src="/common/back.js"></script>
<script src="/common/items.js"></script> <script defer src="/common/items.js"></script>
<script src="/common/tabs.js"></script> <script defer src="/common/tabs.js"></script>
<script src="view-station.js"></script> <script defer src="view-station.js"></script>
</head> </head>
<body> <body>
<h1 id="title">View Station</h1> <header>
<div class="left">
<img id="back-button" class="back" src="/common/back.svg"></img>
</div>
<h1 id="title">View Station</h1>
<div class="right"></div>
</header>
<div id="-date" class="hidden"> <div id="-date" class="hidden">
<p></p> <p></p>
<p class="sec" id="date"></p> <p class="sec" id="date"></p>

34
view-station.js
View file

@ -114,14 +114,25 @@ function refresh() {
reschedule(10000) reschedule(10000)
return return
} }
return response.json() var cacheDate = response.headers.get('SW-Cached-At')
return response.json().then(function (data) {
data['$cacheDate'] = cacheDate
return data
})
}).then(function (response) { }).then(function (response) {
if (!response) { if (!response) {
return return
} }
var cacheDate = response['$cacheDate']
if (cacheDate) {
cacheDate = new Date(cacheDate)
}
var success = !cacheDate
stationData = response stationData = response
onStationData(response) onStationData(response)
reschedule() // Check in 1 seconds if network error
reschedule(success ? undefined : 1000)
return success
}).catch(function (e) { }).catch(function (e) {
// Check in 1 second if network error // Check in 1 second if network error
reschedule(1000) reschedule(1000)
@ -136,7 +147,24 @@ window.addEventListener('unload', function (e) {
}) })
function rsk() { function rsk() {
refresh() function changeRskText(newText) {
document.querySelectorAll('.rsk').forEach(function (elem) {
elem.textContent = newText
})
}
changeRskText('Refreshing...')
refresh().catch(function () { return false}).then(function (success) {
if (!success) {
changeRskText('Refreshing failed')
setTimeout(function (_) {
changeRskText('Refresh')
}, 3000)
}
else {
changeRskText('Refresh')
}
})
} }
window.addEventListener('load', function (e) { window.addEventListener('load', function (e) {

14
view-train.html
View file

@ -12,12 +12,18 @@
<link rel="stylesheet" href="view-train.css"> <link rel="stylesheet" href="view-train.css">
<script src="/common/worker.js"></script> <script src="/common/worker.js"></script>
<script src="/common/back.js"></script> <script defer src="/common/back.js"></script>
<script src="/common/items.js"></script> <script defer src="/common/items.js"></script>
<script src="view-train.js"></script> <script defer src="view-train.js"></script>
</head> </head>
<body> <body>
<h1 id="title"></h1> <header>
<div class="left">
<img id="back-button" class="back" src="/common/back.svg"></img>
</div>
<h1 id="title"></h1>
<div class="right"></div>
</header>
<div id="comp-date"> <div id="comp-date">
<p class="sec" id="company"></p> <p class="sec" id="company"></p>
<p class="sec" id="date"></p> <p class="sec" id="date"></p>