client/journey: show change duration

client/js/journeyView.js

@@ -38,9 +38,10 @@ const legTemplate = (element) => {
 	return html`
 		${element.isWalking ? html`
 			<p class="walk">${t('walkinfo', [parseName(element.arrival.point), element.distance])}</p>
-		` : html`
-			${element.isTransfer ? html`
+		` : element.isTransfer ? html`
 			<p class="transfer">${t('transferinfo', [parseName(element.arrival.point)])}</p>
+		` : element.isChange ? html`
+			<p class="change">${t('changeinfo', [formatDuration(element.duration)])}</p>
 		` : html`
 			<table>
 				<thead>
@@ -69,7 +70,6 @@ const legTemplate = (element) => {
 				</tbody>
 			</table>
 		`}
-		`}
 	`;
 };
 
@@ -81,7 +81,36 @@ const journeyTemplate = (data, requestId, journeyId) => {
 	const arrivalTime   = arrival.prognosedTime   ? arrival.prognosedTime   : arrival.plannedTime;
 	const duration      = arrivalTime - departureTime;
 
-	const changes = data.legs.filter(leg => !leg.isWalking).length;
+	const legs = [];
+	let changes = 0;
+	let lastArrival;
+	for (let leg of data.legs) {
+		if (!leg.isWalking && !leg.isTransfer) {
+
+			// add change
+			if (lastArrival) {
+				const departure = leg.departure;
+				const arrival = lastArrival;
+				const departureTime = departure.prognosedTime ? departure.prognosedTime : departure.plannedTime;
+				const arrivalTime   = arrival.prognosedTime   ? arrival.prognosedTime   : arrival.plannedTime;
+				const duration      = departureTime - arrivalTime;
+
+				legs.push({
+					isChange: true,
+					duration: duration,
+				});
+			}
+			changes++;
+
+			lastArrival = leg.arrival;
+		} else if (legs.length) {
+
+			// if this is a walking leg and it is the first one, we don't want to
+			// insert a 0 minutes change entry for this
+			lastArrival = leg.arrival;
+		}
+		legs.push(leg);
+	}
 
 	return html`
 		<div id="journeyView">
@@ -108,7 +137,7 @@ const journeyTemplate = (data, requestId, journeyId) => {
 			</div>
 	
 			<div id="connection">
-				${data.legs.map(legTemplate)}
+				${legs.map(legTemplate)}
 			</div>
 		</div>
 	`;

client/js/languages.js

@@ -12,6 +12,7 @@ export const languages = {
 		'station':            'Station',
 		'platform':           'Gleis',
 		'walkinfo':           'Laufe nach %s (ca. %s Meter)',
+		'changeinfo':         '%s Umstiegsdauer',
 		'transferinfo':       'Reise nach %s',
 		'swap':               'Von/Nach tauschen',
 		'settings':           'Einstellungen',
@@ -59,6 +60,7 @@ export const languages = {
 		'station':           'Station',
 		'platform':          'Platform',
 		'walkinfo':          'Walk to %s (apprx. %s meters)',
+		'changeinfo':        '%s change duration',
 		'transferinfo':      'Travel to %s',
 		'swap':              'Swap from/to',
 		'settings':          'Settings',