From 14aec20be3cc97f25692ebbe14ce36de69eeceba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Milan=20P=C3=A4ssler?= <me@pbb.lc>
Date: Sat, 8 Feb 2020 00:01:48 +0100
Subject: [PATCH] client/journey: show change duration

---
 client/js/journeyView.js | 95 ++++++++++++++++++++++++++--------------
 client/js/languages.js   |  2 +
 2 files changed, 64 insertions(+), 33 deletions(-)

diff --git a/client/js/journeyView.js b/client/js/journeyView.js
index cd1bbca..459b13a 100644
--- a/client/js/journeyView.js
+++ b/client/js/journeyView.js
@@ -12,7 +12,7 @@ const remarksModalTemplate = (type, remarks) => html`
 		${remarks.map(element => html`
 			<tr>
 			<td>
-			  <span class="remark ${type}"></span>
+				<span class="remark ${type}"></span>
 				<span>${element.text}</span>
 			</td>
 			</tr>
@@ -37,38 +37,38 @@ const legTemplate = (element) => {
 
 	return html`
 		${element.isWalking ? html`
-		<p class="walk">${t('walkinfo', [parseName(element.arrival.point), element.distance])}</p>
+			<p class="walk">${t('walkinfo', [parseName(element.arrival.point), element.distance])}</p>
+		` : 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`
-			${element.isTransfer ? html`
-				<p class="transfer">${t('transferinfo', [parseName(element.arrival.point)])}</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>
+			<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>
-						<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>
-			`}
+					`)}
+				</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>
 	`;
diff --git a/client/js/languages.js b/client/js/languages.js
index b38d5a7..6a4aec4 100644
--- a/client/js/languages.js
+++ b/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',