ctucx.git: trainsearch

journeyView.js,tripView.js: show all remarks in one modal

diff --git a/src/journeyView.js b/src/journeyView.js
@@ -1,6 +1,6 @@
 import { cachedCoachSequence } from './reihung';
 import { settings } from './settings.js';
-import { remarksTemplate, platformTemplate, stopTemplate, timeTemplate } from './templates.js';
+import { remarksModalTemplate, platformTemplate, stopTemplate, timeTemplate } from './templates.js';
 import { ElementById } from './helpers.js';
 import { t, getJourney, refreshJourney } from './app_functions.js';
 import { formatName, formatDateTime, formatDuration, formatPrice, formatTrainTypes, formatLineAdditionalName, formatLineDisplayName } from './formatters.js';

@@ -9,12 +9,7 @@ import { go } from './router.js';
 import { html, render } from 'lit-html';
 
 const legTemplate = (leg, profile) => {
-	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'),
-	};
+	const remarks = leg.remarks || [];
 
 	return html`
 		${leg.walking ? html`

@@ -31,7 +26,9 @@ const legTemplate = (leg, profile) => {
 						<td colspan="4">
 							<div class="center"><a href="#/t/${profile}/${leg.tripId}">${formatLineDisplayName(leg.line)}${leg.direction ? html` → ${leg.direction}` : ''}</a>
 							${leg.cancelled ? html`<b class="cancelled-text">${t('cancelled-ride')}</b>` : ''}
-							${Object.entries(remarks).map(remarksTemplate)}</div>
+							${!!remarks.length ? html`
+								<a class="link icon-hint" @click=${() => showModal(t('remarks'), remarksModalTemplate(remarks))}></a>
+							` : ''}</div>
 						</td>
 					</tr>
 					<tr>

diff --git a/src/templates.js b/src/templates.js
@@ -4,27 +4,17 @@ import { html } from 'lit-html';
 import { settings } from './settings.js';
 import { t, ds100Names } from './app_functions.js';
 
-export const remarksModalTemplate = (type, remarks) => html`
-	<table class="remarks">
-		${remarks.map(element => html`
-			<tr>
-			<td>
-				<span class="icon-${type}"></span>
-				<span>${element.text}</span>
-			</td>
-			</tr>
+export const remarksModalTemplate = (remarks) => html`
+	<div class="remarksView">
+		${remarks.map(remark => html`
+			<div class="row">
+				<span class="icon-${remark.type}"></span>
+				<span>${remark.text}</span>
+			</div>
 		`)}
-	</table>
+	</div>
 `;
 
-export const showRemarksModal = (type, remarks) => {
-	showModal(t('remarks'), remarksModalTemplate(type, remarks));
-};
-
-export const remarksTemplate = ([type, remarks]) => !!remarks.length ? html`
-	<a class="link icon-${type}" @click=${() => showRemarksModal(type, remarks)}></a>
-` : '';
-
 export const stopTemplate = (profile, stop) => {
 	return html`<a class="center" href="#/d/${profile}/${stop.id}">${stop.name} ${ds100Names(stop.id)}</a>`;
 }

diff --git a/src/tripView.js b/src/tripView.js
@@ -1,5 +1,5 @@
 import { settings } from './settings.js';
-import { remarksTemplate, platformTemplate, stopTemplate, timeTemplate } from './templates.js';
+import { remarksModalTemplate, platformTemplate, stopTemplate, timeTemplate } from './templates.js';
 import { ElementById, showElement } from './helpers.js';
 import { t, processLeg } from './app_functions.js';
 import { formatDateTime, formatDuration, formatPrice, formatLineAdditionalName, formatLineDisplayName } from './formatters.js';

@@ -12,12 +12,7 @@ const tripTemplate = (data, profile) => {
 	let changes = 0;
 	let lastArrival;
 
-	const allRemarks = data.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'),
-	};
+	const remarks = data.remarks || [];
 
 	let bahnExpertUrl = null;
 	if (data.line && (data.line.product == 'nationalExpress' || data.line.product == 'national' || data.line.product == 'regionalExpress' || data.line.product == 'regional')) {

@@ -48,7 +43,9 @@ const tripTemplate = (data, profile) => {
 								${formatLineDisplayName(data.line)}${data.direction ? html` → ${data.direction}` : ''}
 							`}
 							${data.cancelled ? html`<b class="cancelled-text">${t('cancelled-ride')}</b>` : ''}
-							${Object.entries(remarks).map(remarksTemplate)}</div>
+							${!!remarks.length ? html`
+								<a class="link icon-hint" @click=${() => showModal(t('remarks'), remarksModalTemplate(remarks))}></a>
+							` : ''}</div>
 						</td>
 					</tr>
 					<tr>

diff --git a/static/style.css b/static/style.css
@@ -457,22 +457,6 @@ header {
 		max-inline-size: 22px;
 		margin: 0 .3em;
 	}
-
-	.remarks {
-		padding: 0;
-		width: 100%;
-		margin: 0;
-	
-		td {
-			margin: 0 10px;
-			text-align: left;
-			display: block;
-		}
-	
-		span {
-			vertical-align: middle;
-		}
-	}
 }
 
 .departuresView {

@@ -485,6 +469,23 @@ header {
 	}
 }
 
+.remarksView {
+	.row {
+		align-items: center;
+		flex-wrap: nowrap;
+		padding: .5em;
+		border-bottom: 1px solid rgba(0, 0, 0, .4);
+	}
+
+	.row:last-child {
+		border-bottom: unset;
+	}
+
+	span[class^="icon-"] {
+		align-self: start;
+		padding-right: .3em;
+	}
+}
 
 .modal {
 	z-index: 1050;