katja's git: oeffisearch

journeysView/tripView: fix cancelled ride display

diff --git a/src/journeyView.js b/src/journeyView.js
@@ -114,14 +114,14 @@ class JourneyView extends BaseView {
 		} else {
 			return html`
 				<div class="card">
-					<div class="head flex-center nowrap train-info">
+					<div class="train-info flex-center nowrap">
 						<a href="#/t/${this.profile}/${leg.tripId}">${formatLineDisplayName(leg.line)}${!leg.direction ? nothing : html` → ${leg.direction}`}</a>
-						${!leg.cancelled ? nothing : html`<b class="cancelled-text">${t('cancelled')}</b>`}
 						${leg.remarks.length === 0 ? nothing : html`
 							<a class="${leg.remarksIcon}" @click=${() => remarksModal(this, leg.remarks)}></a>
 						`}
 					</div>
-					<div class="head flex-center train-info">
+					<div class="train-info flex-center">
+						${!leg.cancelled                              ? nothing : html`<span class="cancelled-text">${t('cancelled')}</span>`}
 						${formatLineAdditionalName(leg.line) === null ? nothing : html`<span>Trip: ${formatLineAdditionalName(leg.line)}</span>`}
 						${!leg.line.trainType                         ? nothing : html`<span>${t('trainType')}: ${leg.line.trainType}</span>`}
 						${(!leg.arrival && !leg.departure)            ? nothing : html`<span>${t('duration')}: ${formatDuration(leg.arrival - leg.departure)}</span>`}

@@ -136,10 +136,10 @@ class JourneyView extends BaseView {
 						</div>
 						${(leg.stopovers || []).map(stop => html`
 						<div class="row">
-							<span>${timeTemplate(stop, 'arrival')}</span>
-							<span>${timeTemplate(stop, 'departure')}</span>
-							<span class="station">${stopTemplate(this.profile, stop.stop)}</span>
-							<span>${platformTemplate(stop)}</span>
+							<span class="${!stop.cancelled ? nothing : 'cancelled'}">${timeTemplate(stop, 'arrival')}</span>
+							<span class="${!stop.cancelled ? nothing : 'cancelled'}">${timeTemplate(stop, 'departure')}</span>
+							<span class="station ${!stop.cancelled ? '' : 'cancelled'}">${stopTemplate(this.profile, stop.stop)}</span>
+							<span class="${!stop.cancelled ? nothing : 'cancelled'}">${platformTemplate(stop)}</span>
 						</div>
 						`)}
 					</div>

diff --git a/src/tripView.js b/src/tripView.js
@@ -1,4 +1,5 @@
 import { html, nothing } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { BaseView } from './baseView.js';
 
 import { sleep, queryBackgroundColor, setThemeColor } from './helpers.js';

@@ -66,6 +67,9 @@ class TripView extends BaseView {
 
 			processLeg(viewState.trip);
 
+			// needed fix for bug/typo in vendo-client
+			if (viewState.trip.canceled === true) viewState.trip.cancelled = true;
+
 			if (!viewState.trip.remarks) viewState.trip.remarks = [];
 
 			const remarksStatus  = viewState.trip.remarks.some((obj) => obj.type === 'status');

@@ -82,7 +86,7 @@ class TripView extends BaseView {
 
 			if (this.viewState.trip.line && this.viewState.trip.line.name) {
 				const [category, number] = this.viewState.trip.line.name.split(' ');
-				const info               = await cachedCoachSequence(category, this.viewState.trip.line.fahrtNr || number, this.viewState.trip.origin.id, this.viewState.trip.plannedDeparture);
+				const info               = cachedCoachSequence(category, this.viewState.trip.line.fahrtNr || number, this.viewState.trip.origin.id, this.viewState.trip.plannedDeparture);
 
 				if (info) this.viewState.trip.line.trainType = formatTrainTypes(info);
 				this.requestUpdate();

@@ -102,13 +106,13 @@ class TripView extends BaseView {
 				<header>
 					<a id="back" class="icon-back ${history.length !== 1 ? '': 'invisible'}" title="${t('back')}" @click=${() => history.back()}></a>
 					<div class="container">
-						${this.viewState !== null ? html`
-							<h3>Trip of ${formatLineDisplayName(this.viewState.trip.line)} to ${this.viewState.trip.direction}</h3>
-						` : html`
+						${!this.viewState ? html`
 							<h3>Trip of ...</h3>
+						` : html`
+							<h3>Trip of ${formatLineDisplayName(this.viewState.trip.line)} to ${this.viewState.trip.direction}</h3>
 						`}
 					</div>
-					<a class="icon-reload ${this.isUpdating ? 'spinning' : ''} ${!this.isOffline ? '' : 'invisible'}" title="${t("refresh")}" @click=${this.updateViewState}></a>
+					<a class="icon-reload ${!this.isUpdating ? '' : 'spinning'} ${!this.isOffline ? '' : 'invisible'}" title="${t("refresh")}" @click=${this.updateViewState}></a>
 				</header>
 			</div>
 		`,

@@ -116,30 +120,36 @@ class TripView extends BaseView {
 		this.viewState !== null ? html`
 		<div class="container">
 			<div class="card">
-				<div class="head flex-center nowrap train-info">
-					${!this.viewState.trip.bahnExpertUrl ? nothing : html`<a href="${this.viewState.trip.bahnExpertUrl}">`}
-					${formatLineDisplayName(this.viewState.trip.line)}${this.viewState.trip.direction ? html` → ${this.viewState.trip.direction}` : ''}
-					${!this.viewState.trip.bahnExpertUrl ? nothing : html`</a>`}
-
-					${!this.viewState.trip.cancelled ? nothing : html`<b class="cancelled-text">${t('cancelled')}</b>`}
-
+				<div class="train-info flex-center nowrap">
+					<a href="${ifDefined(this.viewState.trip.bahnExpertUrl)}">
+					${formatLineDisplayName(this.viewState.trip.line)} ${!this.viewState.trip.direction ? '' : html` → ${this.viewState.trip.direction}`}
+					</a>
 					${this.viewState.trip.remarks.length === 0 ? nothing : html`
 					<a class="${this.viewState.trip.remarksIcon}" @click=${() => remarksModal(this, this.viewState.trip.remarks)}></a>
 					`}
 				</div>
 
-				<div class="head flex-center train-info">
+				<div class="train-info flex-center">
+					${!this.viewState.trip.cancelled ? nothing : html`
+					<span class="cancelled-text">${t('cancelled')}</span>
+					`}
+
 					${formatLineAdditionalName(this.viewState.trip.line) !== "" ? nothing : html`
-						<span>Trip: ${formatLineAdditionalName(this.viewState.trip.line)}</span>
+					<span>Trip: ${formatLineAdditionalName(this.viewState.trip.line)}</span>
 					`}
+
 					${!this.viewState.trip.line.trainType ? nothing : html`
-						<span>Train type: ${this.viewState.trip.line.trainType}</span>
+					<span>Train type: ${this.viewState.trip.line.trainType}</span>
 					`}
-					<span class="${!this.viewState.trip.cancelled ? nothing : 'cancelled'}">
+
+					${this.viewState.trip.cancelled ? nothing : html`
+					<span>
 						${t('duration')}:
 						${formatDuration(this.viewState.trip.arrival - (this.viewState.trip.departure ? this.viewState.trip.departure : this.viewState.trip.plannedDeparture))}
 						${this.viewState.trip.departure ? '' : ('(' + t('planned') + ')')}
 					</span>
+					`}
+
 					${!this.viewState.trip.loadFactor ? nothing : html`
 					<span>${t("load-"+this.viewState.trip.loadFactor)}</span>
 					`}

@@ -153,11 +163,11 @@ class TripView extends BaseView {
 						<span>${t('platform')}</span>
 					</div>
 					${(this.viewState.trip.stopovers || []).map(stop => html`
-					<div class="row ${!stop.cancelled ? '' : 'cancelled'}">
-						<span>${timeTemplate(stop, 'arrival')}</span>
-						<span>${timeTemplate(stop, 'departure')}</span>
-						<span class="station">${stopTemplate(this.profile, stop.stop)}</span>
-						<span>${platformTemplate(stop)}</span>
+					<div class="row">
+						<span class="${!stop.cancelled ? nothing : 'cancelled'}">${timeTemplate(stop, 'arrival')}</span>
+						<span class="${!stop.cancelled ? nothing : 'cancelled'}">${timeTemplate(stop, 'departure')}</span>
+						<span class="station ${!stop.cancelled ? '' : 'cancelled'}">${stopTemplate(this.profile, stop.stop)}</span>
+						<span class="${!stop.cancelled ? nothing : 'cancelled'}">${platformTemplate(stop)}</span>
 					</div>
 					`)}
 				</div>