From f3a0223a8579e81fde074a0d764f87ab3832d9a7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Milan=20P=C3=A4ssler?= Date: Fri, 7 Feb 2020 16:41:57 +0100 Subject: [PATCH] client/journey: show remarks in modal --- client/css/style.css | 45 +++++++++- client/js/helpers.js | 3 +- client/js/journeyView.js | 178 ++++++++++++++++++++++---------------- client/js/journeysView.js | 4 +- 4 files changed, 148 insertions(+), 82 deletions(-) diff --git a/client/css/style.css b/client/css/style.css index 38653ef..c3fc179 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -630,11 +630,50 @@ input:focus{ } .modal-content { - -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5); - box-shadow: 0 5px 15px rgba(0, 0, 0, .5); + box-shadow: 0 5px 15px rgba(0, 0, 0, .5); } } .cancelled { text-decoration-line: line-through; -} \ No newline at end of file +} + +.showremarks { + vertical-align: bottom; +} +.remark { + vertical-align: middle; +} +.showremarks.hint, +.remark.hint { + content: url("../img/info-24px.svg"); +} +.showremarks.warning, +.remark.warning { + content: url("../img/warning-24px.svg"); +} +.showremarks.other, +.remark.other { + content: url("../img/help-24px.svg"); +} +.remarks td { + margin: 0 10px; + text-align: left; + display: block; +} +/*.remarks { + display: none; + position: absolute; + z-index: 1; +}*/ +.remarks { + /*background: #000000d0;*/ + border: 1px solid #ddd; + padding: 0; + width: 100%; + margin: 0; + box-shadow: none; +} +/*.showremarks:hover+.remarks { + display: inline-block; +}*/ diff --git a/client/js/helpers.js b/client/js/helpers.js index f706337..16a6bd2 100644 --- a/client/js/helpers.js +++ b/client/js/helpers.js @@ -60,7 +60,8 @@ export const parseDateTime = (timestamp, format) => { } }; -export const convertMinsToHrsMins = (mins) => { +export const formatDuration = (duration) => { + const mins = duration / 60; const h = Math.floor(mins / 60); const m = mins % 60; diff --git a/client/js/journeyView.js b/client/js/journeyView.js index 1fb801f..73f77cc 100644 --- a/client/js/journeyView.js +++ b/client/js/journeyView.js @@ -1,92 +1,118 @@ 'use strict'; -import { showDiv, hideDiv, ElementById, parseDateTime, convertMinsToHrsMins } from './helpers.js'; +import { showDiv, hideDiv, ElementById, parseDateTime, formatDuration } from './helpers.js'; import { getCache, addCache, ConsoleLog, parseName, ds100Names, t } from './app_functions.js'; +import { showModal } from './overlays.js'; import { get } from './api.js'; import { go } from './router.js'; import { html, render } from './lit-html.js'; -const journeyTemplate = (data, requestId, journeyId) => { - let departure = data.legs[0].departure; - let arrival = data.legs[data.legs.length - 1].arrival; - let changes = 0; +const remarksModalTemplate = (type, remarks) => html` + + ${remarks.map(element => html` + + + + `)} +
+ + ${element.text} +
+`; - let departureTime = departure.prognosedTime ? departure.prognosedTime : departure.plannedTime; - let arrivalTime = arrival.prognosedTime ? arrival.prognosedTime : arrival.plannedTime; - let duration = (arrivalTime - departureTime)/60; +const showRemarksModal = (type, remarks) => { + showModal("Remarks", remarksModalTemplate(type, remarks)); +}; +const remarksTemplate = ([type, remarks]) => !!remarks.length ? html` + showRemarksModal(type, remarks)}> +` : ''; - for (let legKey in data.legs) { - let leg = data.legs[legKey]; - - if (leg.isWalking !== false) continue; - - changes = changes+1; - } +const legTemplate = (element) => { + const allRemarks = element.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'), + }; return html` -
- + ${element.isWalking ? html` +

${t('walkinfo', [parseName(element.arrival.point), element.distance])}

+ ` : html` + ${element.isTransfer ? html` +

${t('transferinfo', [parseName(element.arrival.point), element.distance])}

+ ` : html` + + + + + + + + + + + + + + ${element.stopovers.map(stop => html` + {location.href = "https://marudor.de/"+stop.stop.id+"?searchType=hafas"}}> + + + + + + `)} + +
+ ${element.line.name} ${element.line.additionalName ? '('+element.line.additionalName+')' : ''} → ${element.direction} ${element.cancelled ? html`${t('cancelled-ride')}` : ''} + ${Object.entries(remarks).map(remarksTemplate)} +
${t('arrival')}${t('departure')}${t('station')}${t('platform')}
${timeTemplate(stop.arrival)}${timeTemplate(stop.departure)}${stop.stop.name} ${ds100Names(stop.stop.id)}${stopPlatformTemplate(stop)}
+ `} + `} + `; +}; -
- ${data.legs.map(element => html` - ${element.isWalking ? html` -

${t('walkinfo', [parseName(element.arrival.point), element.distance])}

- ` : html` - ${element.isTransfer ? html` -

${t('transferinfo', [parseName(element.arrival.point), element.distance])}

- ` : html` - - - - - - - - - - - - - - ${element.stopovers.map(stop => html` - {location.href = "https://marudor.de/"+stop.stop.id+"?searchType=hafas"}}> - - - - - - `)} - ${(element.remarks || []).map(element => html` - - `)} - -
${element.line.name} ${element.line.additionalName ? '('+element.line.additionalName+')' : ''} → ${element.direction} ${element.cancelled ? html`${t('cancelled-ride')}` : ''}
${t('arrival')}${t('departure')}${t('station')}${t('platform')}
${timeTemplate(stop.arrival)}${timeTemplate(stop.departure)}${stop.stop.name} ${ds100Names(stop.stop.id)}${stopPlatformTemplate(stop)}
${element.text}
- `} - `} - `)} +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 duration = arrivalTime - departureTime; + + const changes = data.legs.filter(leg => !leg.isWalking).length; + + return html` +
+ + +
+ ${data.legs.map(legTemplate)} +
-
-`}; + `; +}; const timeTemplate = (data, mode) => { let delay = 0; diff --git a/client/js/journeysView.js b/client/js/journeysView.js index 6aa8c5d..ae56f6c 100644 --- a/client/js/journeysView.js +++ b/client/js/journeysView.js @@ -53,7 +53,7 @@ const journeyOverviewTemplate = (data, key) => { let departureTime = departure.prognosedTime ? departure.prognosedTime : departure.plannedTime; let arrivalTime = arrival.prognosedTime ? arrival.prognosedTime : arrival.plannedTime; - let duration = (arrivalTime - departureTime)/60; + let duration = arrivalTime - departureTime; for (let legKey in data.journeys[key].legs) { let leg = data.journeys[key].legs[legKey]; @@ -70,7 +70,7 @@ const journeyOverviewTemplate = (data, key) => { go('/'+data.reqId + '/' + key)}"> ${timeTemplate(departure, 'departure')} ${timeTemplate(arrival, 'arrival')} - ${convertMinsToHrsMins(duration)} + ${formatDuration(duration)} ${changes-1} ${products.join(', ')} `;