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` +
+ + ${element.text} + | +
-
- - ${t('duration')}: - ${convertMinsToHrsMins(duration)} - | ${t('changes')}: - ${changes-1} - | ${t('date')}: - ${parseDateTime(departure.plannedTime, 'date')} - -
-${t('walkinfo', [parseName(element.arrival.point), element.distance])}
+ ` : html` + ${element.isTransfer ? html` +${t('transferinfo', [parseName(element.arrival.point), element.distance])}
+ ` : html` ++ ${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)} | +
${t('walkinfo', [parseName(element.arrival.point), element.distance])}
- ` : html` - ${element.isTransfer ? html` -${t('transferinfo', [parseName(element.arrival.point), element.distance])}
- ` : 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)} | -
+
+ + ${t('duration')}: + ${formatDuration(duration)} + | ${t('changes')}: + ${changes-1} + | ${t('date')}: + ${parseDateTime(departure.plannedTime, 'date')} + +
+