ctucx.git: trainsearch

trip view: use planned departure if departure=null

this seems to happen in case the first stop was cancelled. The same
might also happen to the arrival time if the last stop is cancelled, but
I haven't found a trip where that is the case to test.

diff --git a/src/languages.js b/src/languages.js
@@ -15,6 +15,7 @@ export const languages = {
 		'de':                 'Deutsch',
 		'departure':          'Abfahrt',
 		'duration':           'Dauer',
+		'planned':            'geplant',
 		'dzug':               'D-Zug',
 		'en':                 'Englisch',
 		'ferry':              'Fähre',

@@ -82,6 +83,7 @@ export const languages = {
 		'de':                 'Duits',
 		'departure':          'Vertrek',
 		'duration':           'Duur',
+		'planned':            'gepland',
 		'dzug':               'Sneltrein',
 		'en':                 'Engels',
 		'ferry':              'Veerboot',

@@ -149,6 +151,7 @@ export const languages = {
 		'de':                'German',
 		'departure':         'Departure',
 		'duration':          'Duration',
+		'planned':           'planned',
 		'dzug':              'D-Zug',
 		'en':                'English',
 		'ferry':             'Ferry',

diff --git a/src/tripView.js b/src/tripView.js
@@ -100,8 +100,8 @@ const tripTemplate = (data, profile) => {
 										Train type: ${data.line.trainType}
 									</div>
 								` : ''}
-								<div class="train-detail">
-									${t('duration')}: ${formatDuration(data.arrival - data.departure)}
+								<div class="train-detail ${data.cancelled ? 'cancelled' : ''}">
+									${t('duration')}: ${formatDuration(data.arrival - (data.departure ? data.departure : data.plannedDeparture))} ${data.departure ? '' : ('(' + t('planned') + ')')}
 								</div>
 								${data.loadFactor ? html`
 									<div class="train-detail">