From 4fc48f9a9218421a6b765499512764d4fcb86086 Mon Sep 17 00:00:00 2001
From: "Leah (ctucx)" <leah@ctu.cx>
Date: Fri, 22 Jan 2021 16:22:01 +0100
Subject: [PATCH] journeyView: add link to marudor

---
 client/js/journeyView.js | 54 ++++++++++++++++++++++++++--------------
 client/style.css         | 10 +++++++-
 2 files changed, 45 insertions(+), 19 deletions(-)

diff --git a/client/js/journeyView.js b/client/js/journeyView.js
index c10a032..e504018 100644
--- a/client/js/journeyView.js
+++ b/client/js/journeyView.js
@@ -44,49 +44,67 @@ const remarksTemplate = ([type, remarks]) => !!remarks.length ? html`
 	<a class="link icon-${type}" @click=${() => showRemarksModal(type, remarks)}></a>
 ` : '';
 
-const legTemplate = (element) => {
-	const allRemarks = element.remarks || [];
+const legTemplate = (leg) => {
+	const allRemarks = leg.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'),
 	};
 
+	let hasMarudorURL = false;
+	let marudorUrl    = '';
+
+	if (!leg.isWalking && !leg.isTransfer && !leg.isChange) {
+		if (leg.line.product == "nationalExp" || leg.line.product == "national" || leg.line.product == "regionalExp" || leg.line.product == "regional") {
+			hasMarudorURL = true;
+		}
+
+		if (!leg.line.additionalName) {
+			marudorUrl = 'https://marudor.de/details/' + leg.line.name + '/' + (leg.departure.plannedTime*1000)
+		} else {
+			marudorUrl = 'https://marudor.de/details/' + leg.line.additionalName + "/" + (leg.departure.plannedTime*1000)
+		}
+	}
+
 	return html`
-		${element.isWalking ? html`
-			<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>
+		${leg.isWalking ? html`
+			<p class="walk">${t('walkinfo', [parseName(leg.arrival.point), leg.distance])}</p>
+		` : leg.isTransfer ? html`
+			<p class="transfer">${t('transferinfo', [parseName(leg.arrival.point)])}</p>
+		` : leg.isChange ? html`
+			<p class="change">${t('changeinfo', [formatDuration(leg.duration)])}</p>
 		` : html`
 			<div class="card">
 			<table>
 				<thead>
 					<tr>
 						<td colspan="4">
-							<span>${element.line.name}
-							→ ${element.direction}
-							${element.cancelled ? html`<b class="cancelled-text">${t('cancelled-ride')}</b>` : ''}
+							<span>${hasMarudorURL ? html`
+							<a href="${marudorUrl}">${leg.line.name} → ${leg.direction}</a>
+							` : html `
+							${leg.line.name} → ${leg.direction}
+							`}
+							${leg.cancelled ? html`<b class="cancelled-text">${t('cancelled-ride')}</b>` : ''}
 							${Object.entries(remarks).map(remarksTemplate)}
-							${travelynxTemplate(element)}</span>
+							${travelynxTemplate(leg)}</span>
 						</td>
 					</tr>
 					<tr>
 						<td colspan="4">
 							<div class="train-details">
-								${element.line.additionalName ? html`
+								${leg.line.additionalName ? html`
 									<div class="train-detail">
-										Trip: ${element.line.additionalName}
+										Trip: ${leg.line.additionalName}
 									</div>
 								` : ''}
-								${element.line.trainType ? html`
+								${leg.line.trainType ? html`
 									<div class="train-detail">
-										Train type: ${element.line.trainType}
+										Train type: ${leg.line.trainType}
 									</div>
 								` : ''}
 								<div class="train-detail">
-									Duration: ${formatDuration((element.arrival.prognosedTime || element.arrival.plannedTime) - (element.departure.prognosedTime || element.departure.plannedTime))}
+									Duration: ${formatDuration((leg.arrival.prognosedTime || leg.arrival.plannedTime) - (leg.departure.prognosedTime || leg.departure.plannedTime))}
 								</div>
 							</div>
 						</td>
@@ -99,7 +117,7 @@ const legTemplate = (element) => {
 					</tr>
 				</thead>
 				<tbody>
-					${element.stopovers.map(stop => html`
+					${leg.stopovers.map(stop => html`
 						<tr class="stop ${stop.cancelled ? 'cancelled' : ''}" @click=${() => {location.href = "https://marudor.de/"+stop.stop.id+"?searchType=hafas"}}>
 							<td><span>${timeTemplate(stop.arrival)}</span></td>
 							<td><span>${timeTemplate(stop.departure)}</span></td>
diff --git a/client/style.css b/client/style.css
index 04fb040..bc0cacb 100755
--- a/client/style.css
+++ b/client/style.css
@@ -367,7 +367,6 @@ tbody tr:hover td {
 }
 
 .journeys table a,
-.journey table a,
 .journey table span {
 	padding: 5px 3px;
 	display: flex;
@@ -378,6 +377,15 @@ tbody tr:hover td {
 	color: black;
 }
 
+.journey table a {
+	padding: 5px 3px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	text-decoration: none;
+	color: black;
+}
+
 .journeys a.details-button {
 	height: 30px;
 	padding: 0;