1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
'use strict';
import { showDiv, hideDiv, ElementById, parseDateTime, formatDuration } from './helpers.js';
import { getCache, addCache, parseName, ConsoleLog, t } from './app_functions.js';
import { dataStorage } from './app.js';
import { setupCanvas } from './canvas.js';
import { get } from './api.js';
import { go } from './router.js';
import { html, render } from './lit-html.js';
import { showAlertModal } from './overlays.js';
let data;
const journeysTemplate = (data) => html`
<div id="journeysView">
<div id="header">
<a class="back" href="#/"></a>
<p><h3>${t('from')}: <span id="fromName">${parseName(data.params.fromPoint)}</span></h3></p>
<p><h3>${t('to')}: <span id="toName">${parseName(data.params.toPoint)}</span></h3></p>
<!-- <div class="reload" id="reload-journeys" @click=${() => reloadJourneys(data.reqId)}></div> -->
</div>
${dataStorage.settings.enableCanvas ? html`
<div id="journeysCanvas">
<canvas id="canvas"></canvas>
</div>
` : html`
<div id="journeysTable">
<div class="loadMore flipped" @click=${() => moreJourneys(data.reqId, 'earlier')}></div>
<table>
<thead>
<tr><th>${t('departure')}</th><th>${t('arrival')}</th><th>${t('duration')}</th><th>${t('changes')}</th><th>${t('products')}</th></tr>
</thead>
<tbody id="connectionsTable">
${Object.keys(data.journeys).sort((a, b) => a - b).map(key => journeyOverviewTemplate(data, key))}
</tbody>
</table>
<div class="loadMore" @click=${() => moreJourneys(data.reqId, "later")}></div>
</div>
`}
</div>
`;
const journeyOverviewTemplate = (data, key) => {
let departure = data.journeys[key].legs[0].departure;
let arrival = data.journeys[key].legs[data.journeys[key].legs.length - 1].arrival;
let changes = 0;
let products = [];
let changesDuration = 0;
let cancelled = false;
let departureTime = departure.prognosedTime ? departure.prognosedTime : departure.plannedTime;
let arrivalTime = arrival.prognosedTime ? arrival.prognosedTime : arrival.plannedTime;
let duration = arrivalTime - departureTime;
for (let legKey in data.journeys[key].legs) {
let leg = data.journeys[key].legs[legKey];
if (leg.cancelled !== false) cancelled = true;
if (leg.isWalking || leg.isTransfer) continue;
changes = changes+1;
products.push(leg.line.productName);
}
products = [...new Set(products)];
return html`
<tr class="connection ${cancelled ? 'cancelled' : ''}" @click=${() => go('/'+data.reqId + '/' + key)}">
<td>${timeTemplate(departure, 'departure')}</td>
<td>${timeTemplate(arrival, 'arrival')}</td>
<td title="${changesDuration > 0 ? 'Davon '+formatDuration(changesDuration)+' Umstiegsdauer' : ''}">${formatDuration(duration)}</td>
<td>${changes-1}</td>
<td>${products.join(', ')}</td>
</tr>`;
}
export const journeysView = async (match) => {
const reqId = match[0];
data = getCache('journeys', reqId);
if (!data) {
data = await get("/journeys", {"reqId": reqId});
addCache('journeys', data);
}
render(journeysTemplate(data), ElementById('content'))
if (dataStorage.settings.enableCanvas) {
setupCanvas(data);
}
};
const timeTemplate = (data, mode) => {
let delay = 0;
if (data.prognosedTime !== null) {
delay = (data.prognosedTime - data.plannedTime)/60;
}
return html`
${delay > 0 ? html`
${parseDateTime(data.prognosedTime)} <b>(+${delay})</b>
` : html`
${parseDateTime(data.plannedTime)}
`}`;
}
export const moreJourneys = async (reqId, mode) => {
let data = getCache('journeys', reqId);
const newData = await get('/moreJourneys', {"reqId": reqId, "mode": mode});
data.lastUpdated = newData.lastUpdated;
data.journeys = {...data.journeys, ...newData.journeys};
addCache('journeys', data);
journeysView([reqId]);
};
export const reloadJourneys = async (requestId) => {
showAlertModal("not implemented yet");
};