oeffisearch/client/js/journeyView.js

'use strict';

import { showDiv, hideDiv, ElementById, parseDateTime, convertMinsToHrsMins } from './helpers.js';
import { getCache, addCache, ConsoleLog, parseName, ds100Names, t } from './app_functions.js';
import { get } from './api.js';
import { go } from './router.js';
import { html, render } from './lit-html.js';

const journeyTemplate = (data, requestId, journeyId) => {
	let departure       = data.legs[0].departure;
	let arrival         = data.legs[data.legs.length - 1].arrival;
	var changes         = 0;

	let departureTime = departure.prognosedTime ? departure.prognosedTime : departure.plannedTime;
	let arrivalTime   = arrival.prognosedTime   ? arrival.prognosedTime   : arrival.plannedTime;
	let duration      = (arrivalTime - departureTime)/60;

	for (let legKey in data.legs) {
		let leg = data.legs[legKey];

		if (leg.isWalking !== false) continue;

		changes = changes+1;
	}

	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">${convertMinsToHrsMins(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(element => 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>` : ''}</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>
								`)}
								${(element.remarks || []).map(element => html`
									<tr><td colspan="4"><smal>${element.text}</small></td></tr>
								`)}
							</tbody>
						</table>
					`}
				`}
			`)}
		</div>
	</div>
`};

const timeTemplate = (data, mode) => {
	var 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');
};