195 lines
5.9 KiB
JavaScript
195 lines
5.9 KiB
JavaScript
'use strict';
|
|
|
|
import { showDiv, hideDiv, ElementById, parseDateTime, formatDuration } from './helpers.js';
|
|
import { getCache, addCache, ConsoleLog, parseName, ds100Names, t } from './app_functions.js';
|
|
import { showModal } from './overlays.js';
|
|
import { get } from './api.js';
|
|
import { go } from './router.js';
|
|
import { html, render } from './lit-html.js';
|
|
|
|
const remarksModalTemplate = (type, remarks) => html`
|
|
<table class="remarks">
|
|
${remarks.map(element => html`
|
|
<tr>
|
|
<td>
|
|
<span class="remark ${type}"></span>
|
|
<span>${element.text}</span>
|
|
</td>
|
|
</tr>
|
|
`)}
|
|
</table>
|
|
`;
|
|
|
|
const showRemarksModal = (type, remarks) => {
|
|
showModal("Remarks", remarksModalTemplate(type, remarks));
|
|
};
|
|
const remarksTemplate = ([type, remarks]) => !!remarks.length ? html`
|
|
<a class="showremarks ${type}" @click=${() => showRemarksModal(type, remarks)}></a>
|
|
` : '';
|
|
|
|
const legTemplate = (element) => {
|
|
const allRemarks = element.remarks || [];
|
|
const remarks = {
|
|
"status": allRemarks.filter(r => r.type === 'status'),
|
|
"hint": allRemarks.filter(r => r.type === 'hint'),
|
|
"other": allRemarks.filter(r => r.type !== 'status' && r.type !== 'hint'),
|
|
};
|
|
|
|
return html`
|
|
${element.isWalking ? html`
|
|
<p class="walk">${t('walkinfo', [parseName(element.arrival.point), element.distance])}</p>
|
|
` : html`
|
|
${element.isTransfer ? html`
|
|
<p class="transfer">${t('transferinfo', [parseName(element.arrival.point), element.distance])}</p>
|
|
` : html`
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<td colspan="4">
|
|
${element.line.name} ${element.line.additionalName ? '('+element.line.additionalName+')' : ''} → ${element.direction} ${element.cancelled ? html`<b style="color:red;">${t('cancelled-ride')}</b>` : ''}
|
|
${Object.entries(remarks).map(remarksTemplate)}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>${t('arrival')}</th>
|
|
<th>${t('departure')}</th>
|
|
<th>${t('station')}</th>
|
|
<th>${t('platform')}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
${element.stopovers.map(stop => html`
|
|
<tr class="stop ${stop.cancelled ? 'cancelled' : ''}" @click=${() => {location.href = "https://marudor.de/"+stop.stop.id+"?searchType=hafas"}}>
|
|
<td>${timeTemplate(stop.arrival)}</td>
|
|
<td>${timeTemplate(stop.departure)}</td>
|
|
<td>${stop.stop.name} ${ds100Names(stop.stop.id)}</td>
|
|
<td>${stopPlatformTemplate(stop)}</td>
|
|
</tr>
|
|
`)}
|
|
</tbody>
|
|
</table>
|
|
`}
|
|
`}
|
|
`;
|
|
};
|
|
|
|
const journeyTemplate = (data, requestId, journeyId) => {
|
|
const departure = data.legs[0].departure;
|
|
const arrival = data.legs[data.legs.length - 1].arrival;
|
|
|
|
const departureTime = departure.prognosedTime ? departure.prognosedTime : departure.plannedTime;
|
|
const arrivalTime = arrival.prognosedTime ? arrival.prognosedTime : arrival.plannedTime;
|
|
const duration = arrivalTime - departureTime;
|
|
|
|
const changes = data.legs.filter(leg => !leg.isWalking).length;
|
|
|
|
return html`
|
|
<div id="journeyView">
|
|
<div id="header">
|
|
<a class="back" href="#/${requestId}"></a>
|
|
<p>
|
|
<h2>
|
|
<span id="fromName2">${parseName(departure.point)}</span>
|
|
<span> - </span>
|
|
<span id="toName2">${parseName(arrival.point)}</span>
|
|
</h2>
|
|
</p>
|
|
<p>
|
|
<b>
|
|
<span>${t('duration')}: </span>
|
|
<span id="duration">${formatDuration(duration)}</span>
|
|
<span> | ${t('changes')}: </span>
|
|
<span id="changes">${changes-1}</span>
|
|
<span> | ${t('date')}: </span>
|
|
<span id="date2">${parseDateTime(departure.plannedTime, 'date')}</span>
|
|
</b>
|
|
</p>
|
|
<div class="reload" id="reload-journey" @click=${() => reloadJourney(requestId, journeyId)}></div>
|
|
</div>
|
|
|
|
<div id="connection">
|
|
${data.legs.map(legTemplate)}
|
|
</div>
|
|
</div>
|
|
`;
|
|
};
|
|
|
|
const timeTemplate = (data, mode) => {
|
|
let delay = 0;
|
|
|
|
if (data.prognosedTime !== null) {
|
|
delay = (data.prognosedTime - data.plannedTime)/60;
|
|
}
|
|
|
|
if (!data.plannedTime && !data.prognosedTime) return '-';
|
|
|
|
return html`
|
|
${delay > 0 ? html`
|
|
${parseDateTime(data.prognosedTime)} <b>(+${delay})</b>
|
|
` : html`
|
|
${parseDateTime(data.plannedTime)}
|
|
`}`;
|
|
}
|
|
|
|
const platformTemplate = (data) => html`
|
|
${data.prognosedPlatform ? html`
|
|
<b>${data.prognosedPlatform}</b>
|
|
` : (data.plannedPlatform ? data.plannedPlatform : '-')}
|
|
`;
|
|
|
|
const stopPlatformTemplate = (data) => {
|
|
if (data.departure.plannedPlatform | data.departure.prognosedPlatform) {
|
|
if (!data.departure.prognosedPlatform) {
|
|
return data.departure.plannedPlatform;
|
|
} else {
|
|
return html`<b>${data.departure.prognosedPlatform}</b>`;
|
|
}
|
|
} else if (data.arrival.plannedPlatform | data.arrival.prognosedPlatform) {
|
|
if (!data.arrival.prognosedPlatform) {
|
|
return data.arrival.plannedPlatform;
|
|
} else {
|
|
return html`<b>${data.arrival.prognosedPlatform}</b>`;
|
|
}
|
|
} else {
|
|
return '-'
|
|
}
|
|
};
|
|
|
|
export const journeyView = async (match) => {
|
|
const reqId = match[0];
|
|
const journeyId = match[1];
|
|
|
|
let data;
|
|
let { journeys } = getCache('journeys', reqId)
|
|
if (journeyId in journeys[journeyId]) {
|
|
data = journeys[journeyId];
|
|
} else {
|
|
const request = await get("/journeys", {"reqId": reqId});
|
|
addCache('journeys', request);
|
|
data = request.journeys[journeyId];
|
|
}
|
|
|
|
ConsoleLog(data);
|
|
render(journeyTemplate(data, reqId, journeyId), ElementById('content'));
|
|
|
|
const journeysHistory = getCache('journeysHistory');
|
|
const history_id = journeysHistory.findIndex(obj => obj.reqId === reqId);
|
|
|
|
if (journeysHistory[history_id] !== undefined) {
|
|
journeysHistory[history_id].journeyId = journeyId;
|
|
addCache('journeysHistory', journeysHistory);
|
|
}
|
|
};
|
|
|
|
const reloadJourney = async (reqId, journeyId) => {
|
|
document.querySelector('.reload').classList.add('spinning');
|
|
try {
|
|
let request = await get("/refreshJourney", {"reqId": reqId, "journeyId": journeyId});
|
|
addCache('journeys', request);
|
|
journeyView([reqId, journeyId]);
|
|
} catch(err) {
|
|
ConsoleLog(err);
|
|
}
|
|
document.querySelector('.reload').classList.remove('spinning');
|
|
};
|