From 1d5b4f2f7c6efbe6a154268ea5c84872e551296b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Milan=20P=C3=A4ssler?= <milan@petabyte.dev>
Date: Fri, 11 Sep 2020 18:50:19 +0200
Subject: [PATCH] add train type information to journeyView

---
 client/js/journeyView.js | 27 ++++++++++++++++++++++++---
 client/style.css         | 13 +++++++++++++
 2 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/client/js/journeyView.js b/client/js/journeyView.js
index f00101a..c10a032 100644
--- a/client/js/journeyView.js
+++ b/client/js/journeyView.js
@@ -65,11 +65,32 @@ const legTemplate = (element) => {
 				<thead>
 					<tr>
 						<td colspan="4">
-							<span>${element.line.name} ${element.line.additionalName ? '('+element.line.additionalName+')' : ''} → ${element.direction} ${element.cancelled ? html`<b class="cancelled-text">${t('cancelled-ride')}</b>` : ''}
+							<span>${element.line.name}
+							→ ${element.direction}
+							${element.cancelled ? html`<b class="cancelled-text">${t('cancelled-ride')}</b>` : ''}
 							${Object.entries(remarks).map(remarksTemplate)}
 							${travelynxTemplate(element)}</span>
 						</td>
 					</tr>
+					<tr>
+						<td colspan="4">
+							<div class="train-details">
+								${element.line.additionalName ? html`
+									<div class="train-detail">
+										Trip: ${element.line.additionalName}
+									</div>
+								` : ''}
+								${element.line.trainType ? html`
+									<div class="train-detail">
+										Train type: ${element.line.trainType}
+									</div>
+								` : ''}
+								<div class="train-detail">
+									Duration: ${formatDuration((element.arrival.prognosedTime || element.arrival.plannedTime) - (element.departure.prognosedTime || element.departure.plannedTime))}
+								</div>
+							</div>
+						</td>
+					</tr>
 					<tr>
 						<th>${t('arrival')}</th>
 						<th>${t('departure')}</th>
@@ -97,8 +118,8 @@ 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 departureTime = departure.prognosedTime || departure.plannedTime;
+	const arrivalTime   = arrival.prognosedTime   || arrival.plannedTime;
 	const duration      = arrivalTime - departureTime;
 
 	const legs = [];
diff --git a/client/style.css b/client/style.css
index 7d87690..51ccb18 100755
--- a/client/style.css
+++ b/client/style.css
@@ -957,3 +957,16 @@ form>div.history {
 header h3 {
 	margin-right: 1.5em;
 }
+
+.train-details {
+	display: flex;
+	justify-content: center;
+}
+
+.journey thead>tr:nth-child(2) {
+	border-bottom: 2px solid #ccc;
+}
+
+.train-detail {
+	margin: .4em 2em;
+}