2020-02-07 14:09:42 +01:00
|
|
|
'use strict';
|
|
|
|
|
2020-02-07 16:41:20 +01:00
|
|
|
import { showDiv, hideDiv, ElementById, parseDateTime, formatDuration } from './helpers.js';
|
2020-07-22 22:47:05 +02:00
|
|
|
import { saveDataStorage, getCache, addCache, parseName, ConsoleLog, t } from './app_functions.js';
|
2020-02-07 14:09:42 +01:00
|
|
|
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`
|
2020-06-12 16:49:54 +02:00
|
|
|
<div class="journeys">
|
|
|
|
<header id="header">
|
2020-06-12 21:41:45 +02:00
|
|
|
<a class="back icon-back" href="#/" title="${t('back')}">${t('back')}</a>
|
2020-06-12 16:49:54 +02:00
|
|
|
<h3>${t('from')}: ${parseName(data.params.fromPoint)}</h3>
|
|
|
|
<h3>${t('to')}: ${parseName(data.params.toPoint)}</h3>
|
2020-07-22 22:47:05 +02:00
|
|
|
<div class="mode-changers">
|
|
|
|
<a @click=${changeMode('table')} class="${dataStorage.settings.journeysViewMode !== 'canvas' ? 'active' : ''}">
|
|
|
|
<div class="icon-table"></div>
|
|
|
|
<span>Table</span>
|
|
|
|
</a>
|
|
|
|
<a @click=${changeMode('canvas')} class="${dataStorage.settings.journeysViewMode === 'canvas' ? 'active' : ''}">
|
|
|
|
<div class="icon-canvas"></div>
|
|
|
|
<span>Canvas</span>
|
|
|
|
</a>
|
|
|
|
</div>
|
2020-06-12 16:49:54 +02:00
|
|
|
</header>
|
2020-02-07 14:09:42 +01:00
|
|
|
|
2020-07-22 22:47:05 +02:00
|
|
|
${dataStorage.settings.journeysViewMode === 'canvas' ? html`
|
2020-02-07 14:09:42 +01:00
|
|
|
<div id="journeysCanvas">
|
|
|
|
<canvas id="canvas"></canvas>
|
|
|
|
</div>
|
|
|
|
` : html`
|
2020-06-12 21:41:45 +02:00
|
|
|
<a class="loadMore icon-arrow2 flipped" title="{{LABEL_EARLIER}}" @click=${() => moreJourneys(data.reqId, 'earlier')}"></a>
|
2020-02-07 14:09:42 +01:00
|
|
|
|
2020-07-22 20:55:20 +02:00
|
|
|
<div class="card">
|
2020-06-12 16:49:54 +02:00
|
|
|
<table>
|
|
|
|
<thead>
|
|
|
|
<tr>
|
|
|
|
<th>${t('departure')}</th>
|
|
|
|
<th>${t('arrival')}</th>
|
|
|
|
<th>${t('duration')}</th>
|
|
|
|
<th>${t('changes')}</th>
|
|
|
|
<th>${t('products')}</th>
|
|
|
|
<th></th>
|
|
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
<tbody>
|
2020-02-07 14:09:42 +01:00
|
|
|
${Object.keys(data.journeys).sort((a, b) => a - b).map(key => journeyOverviewTemplate(data, key))}
|
2020-06-12 16:49:54 +02:00
|
|
|
</tbody>
|
|
|
|
</table>
|
2020-07-22 20:55:20 +02:00
|
|
|
</div>
|
2020-02-07 14:09:42 +01:00
|
|
|
|
2020-06-12 21:41:45 +02:00
|
|
|
<a class="loadMore icon-arrow2" title="{{LABEL_LATER}}" @click=${() => moreJourneys(data.reqId, "later")}></a>
|
2020-02-07 14:09:42 +01:00
|
|
|
`}
|
|
|
|
</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;
|
2020-02-07 14:27:07 +01:00
|
|
|
let changes = 0;
|
|
|
|
let products = [];
|
|
|
|
let changesDuration = 0;
|
|
|
|
let cancelled = false;
|
2020-02-07 14:09:42 +01:00
|
|
|
|
|
|
|
let departureTime = departure.prognosedTime ? departure.prognosedTime : departure.plannedTime;
|
|
|
|
let arrivalTime = arrival.prognosedTime ? arrival.prognosedTime : arrival.plannedTime;
|
2020-02-07 16:41:57 +01:00
|
|
|
let duration = arrivalTime - departureTime;
|
2020-02-07 14:09:42 +01:00
|
|
|
|
|
|
|
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;
|
2020-02-07 17:29:33 +01:00
|
|
|
products.push(leg.line.productName);
|
2020-02-07 14:09:42 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
products = [...new Set(products)];
|
|
|
|
|
|
|
|
return html`
|
2020-06-12 16:49:54 +02:00
|
|
|
<tr @click=${() => go('/'+data.reqId + '/' + key)}">
|
|
|
|
<td><span>${timeTemplate(departure, 'departure')}</span></td>
|
|
|
|
<td><span>${timeTemplate(arrival, 'arrival')}</span></td>
|
|
|
|
<td title="${changesDuration > 0 ? 'Davon '+formatDuration(changesDuration)+' Umstiegsdauer' : ''}"><span>${formatDuration(duration)}</span></td>
|
|
|
|
<td><span>${changes-1}</span></td>
|
|
|
|
<td><span>${products.join(', ')}</span></td>
|
2020-06-12 21:41:45 +02:00
|
|
|
<td><a class="details-button icon-arrow3"></a></td>
|
2020-02-07 14:09:42 +01:00
|
|
|
</tr>`;
|
|
|
|
}
|
|
|
|
|
2020-07-22 22:56:32 +02:00
|
|
|
export const journeysView = async (match, isUpdate) => {
|
2020-02-07 14:09:42 +01:00
|
|
|
const reqId = match[0];
|
|
|
|
|
|
|
|
data = getCache('journeys', reqId);
|
|
|
|
|
|
|
|
if (!data) {
|
|
|
|
data = await get("/journeys", {"reqId": reqId});
|
|
|
|
addCache('journeys', data);
|
|
|
|
}
|
|
|
|
|
|
|
|
render(journeysTemplate(data), ElementById('content'))
|
|
|
|
|
2020-07-22 22:47:05 +02:00
|
|
|
if (dataStorage.settings.journeysViewMode === 'canvas') {
|
2020-07-22 22:56:32 +02:00
|
|
|
setupCanvas(data, isUpdate);
|
2020-02-07 14:09:42 +01:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
const timeTemplate = (data, mode) => {
|
2020-02-07 14:27:07 +01:00
|
|
|
let delay = 0;
|
2020-02-07 14:09:42 +01:00
|
|
|
|
|
|
|
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)}
|
|
|
|
`}`;
|
2020-07-22 22:47:05 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
const changeMode = (mode) => {
|
|
|
|
return () => {
|
|
|
|
dataStorage.settings.journeysViewMode = mode;
|
|
|
|
saveDataStorage();
|
|
|
|
render(journeysTemplate(data), ElementById('content'))
|
|
|
|
if (dataStorage.settings.journeysViewMode === 'canvas') {
|
|
|
|
setupCanvas(data);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
2020-02-07 14:09:42 +01:00
|
|
|
|
|
|
|
export const moreJourneys = async (reqId, mode) => {
|
2020-02-07 14:27:07 +01:00
|
|
|
let data = getCache('journeys', reqId);
|
2020-02-07 14:09:42 +01:00
|
|
|
const newData = await get('/moreJourneys', {"reqId": reqId, "mode": mode});
|
|
|
|
|
|
|
|
data.lastUpdated = newData.lastUpdated;
|
|
|
|
data.journeys = {...data.journeys, ...newData.journeys};
|
|
|
|
|
|
|
|
addCache('journeys', data);
|
2020-07-22 22:56:32 +02:00
|
|
|
journeysView([reqId], true);
|
2020-02-07 14:09:42 +01:00
|
|
|
};
|