zotan/oeffisearch
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

client/journey: show remarks in modal

Browse source
This commit is contained in:
Milan Pässler 2020-02-07 16:41:57 +01:00
parent aa6e400d2b
commit f3a0223a85
4 changed files with 148 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
client/css/style.css
View file

@ -630,11 +630,50 @@ input:focus{
} }
.modal-content { .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 { .cancelled {
text-decoration-line: line-through; text-decoration-line: line-through;
} }
.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;
}*/

3
client/js/helpers.js
View file

@ -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 h = Math.floor(mins / 60);
const m = mins % 60; const m = mins % 60;

178
client/js/journeyView.js
View file

@ -1,92 +1,118 @@
'use strict'; '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 { getCache, addCache, ConsoleLog, parseName, ds100Names, t } from './app_functions.js';
import { showModal } from './overlays.js';
import { get } from './api.js'; import { get } from './api.js';
import { go } from './router.js'; import { go } from './router.js';
import { html, render } from './lit-html.js'; import { html, render } from './lit-html.js';
const journeyTemplate = (data, requestId, journeyId) => { const remarksModalTemplate = (type, remarks) => html`
let departure = data.legs[0].departure; <table class="remarks">
let arrival = data.legs[data.legs.length - 1].arrival; ${remarks.map(element => html`
let changes = 0; <tr>
<td>
<span class="remark ${type}"></span>
<span>${element.text}</span>
</td>
</tr>
`)}
</table>
`;
let departureTime = departure.prognosedTime ? departure.prognosedTime : departure.plannedTime; const showRemarksModal = (type, remarks) => {
let arrivalTime = arrival.prognosedTime ? arrival.prognosedTime : arrival.plannedTime; showModal("Remarks", remarksModalTemplate(type, remarks));
let duration = (arrivalTime - departureTime)/60; };
const remarksTemplate = ([type, remarks]) => !!remarks.length ? html`
<a class="showremarks ${type}" @click=${() => showRemarksModal(type, remarks)}></a>
` : '';
for (let legKey in data.legs) { const legTemplate = (element) => {
let leg = data.legs[legKey]; const allRemarks = element.remarks || [];
const remarks = {
if (leg.isWalking !== false) continue; "status": allRemarks.filter(r => r.type === 'status'),
"hint": allRemarks.filter(r => r.type === 'hint'),
changes = changes+1; "other": allRemarks.filter(r => r.type !== 'status' && r.type !== 'hint'),
} };
return html` return html`
<div id="journeyView"> ${element.isWalking ? html`
<div id="header"> <p class="walk">${t('walkinfo', [parseName(element.arrival.point), element.distance])}</p>
<a class="back" href="#/${requestId}"></a> ` : html`
<p> ${element.isTransfer ? html`
<h2> <p class="transfer">${t('transferinfo', [parseName(element.arrival.point), element.distance])}</p>
<span id="fromName2">${parseName(departure.point)}</span> ` : html`
<span> - </span> <table>
<span id="toName2">${parseName(arrival.point)}</span> <thead>
</h2> <tr>
</p> <td colspan="4">
<p> ${element.line.name} ${element.line.additionalName ? '('+element.line.additionalName+')' : ''} → ${element.direction} ${element.cancelled ? html`<b style="color:red;">${t('cancelled-ride')}</b>` : ''}
<b> ${Object.entries(remarks).map(remarksTemplate)}
<span>${t('duration')}: </span> </td>
<span id="duration">${convertMinsToHrsMins(duration)}</span> </tr>
<span> | ${t('changes')}: </span> <tr>
<span id="changes">${changes-1}</span> <th>${t('arrival')}</th>
<span> | ${t('date')}: </span> <th>${t('departure')}</th>
<span id="date2">${parseDateTime(departure.plannedTime, 'date')}</span> <th>${t('station')}</th>
</b> <th>${t('platform')}</th>
</p> </tr>
<div class="reload" id="reload-journey" @click=${() => reloadJourney(requestId, journeyId)}></div> </thead>
</div> <tbody>
${element.stopovers.map(stop => html`
<tr class="stop ${stop.cancelled ? 'cancelled' : ''}" @click=${() => {location.href = "https://marudor.de/"+stop.stop.id+"?searchType=hafas"}}>
<td>${timeTemplate(stop.arrival)}</td>
<td>${timeTemplate(stop.departure)}</td>
<td>${stop.stop.name} ${ds100Names(stop.stop.id)}</td>
<td>${stopPlatformTemplate(stop)}</td>
</tr>
`)}
</tbody>
</table>
`}
`}
`;
};
<div id="connection"> const journeyTemplate = (data, requestId, journeyId) => {
${data.legs.map(element => html` const departure = data.legs[0].departure;
${element.isWalking ? html` const arrival = data.legs[data.legs.length - 1].arrival;
<p class="walk">${t('walkinfo', [parseName(element.arrival.point), element.distance])}</p>
` : html` const departureTime = departure.prognosedTime ? departure.prognosedTime : departure.plannedTime;
${element.isTransfer ? html` const arrivalTime = arrival.prognosedTime ? arrival.prognosedTime : arrival.plannedTime;
<p class="transfer">${t('transferinfo', [parseName(element.arrival.point), element.distance])}</p> const duration = arrivalTime - departureTime;
` : html`
<table> const changes = data.legs.filter(leg => !leg.isWalking).length;
<thead>
<tr> return html`
<td colspan="4">${element.line.name} ${element.line.additionalName ? '('+element.line.additionalName+')' : ''} → ${element.direction} ${element.cancelled ? html`<b style="color:red;">${t('cancelled-ride')}</b>` : ''}</td> <div id="journeyView">
</tr> <div id="header">
<tr> <a class="back" href="#/${requestId}"></a>
<th>${t('arrival')}</th> <p>
<th>${t('departure')}</th> <h2>
<th>${t('station')}</th> <span id="fromName2">${parseName(departure.point)}</span>
<th>${t('platform')}</th> <span> - </span>
</tr> <span id="toName2">${parseName(arrival.point)}</span>
</thead> </h2>
<tbody> </p>
${element.stopovers.map(stop => html` <p>
<tr class="stop ${stop.cancelled ? 'cancelled' : ''}" @click=${() => {location.href = "https://marudor.de/"+stop.stop.id+"?searchType=hafas"}}> <b>
<td>${timeTemplate(stop.arrival)}</td> <span>${t('duration')}: </span>
<td>${timeTemplate(stop.departure)}</td> <span id="duration">${formatDuration(duration)}</span>
<td>${stop.stop.name} ${ds100Names(stop.stop.id)}</td> <span> | ${t('changes')}: </span>
<td>${stopPlatformTemplate(stop)}</td> <span id="changes">${changes-1}</span>
</tr> <span> | ${t('date')}: </span>
`)} <span id="date2">${parseDateTime(departure.plannedTime, 'date')}</span>
${(element.remarks || []).map(element => html` </b>
<tr><td colspan="4"><smal>${element.text}</small></td></tr> </p>
`)} <div class="reload" id="reload-journey" @click=${() => reloadJourney(requestId, journeyId)}></div>
</tbody> </div>
</table>
`} <div id="connection">
`} ${data.legs.map(legTemplate)}
`)} </div>
</div> </div>
</div> `;
`}; };
const timeTemplate = (data, mode) => { const timeTemplate = (data, mode) => {
let delay = 0; let delay = 0;

4
client/js/journeysView.js
View file

@ -53,7 +53,7 @@ const journeyOverviewTemplate = (data, key) => {
let departureTime = departure.prognosedTime ? departure.prognosedTime : departure.plannedTime; let departureTime = departure.prognosedTime ? departure.prognosedTime : departure.plannedTime;
let arrivalTime = arrival.prognosedTime ? arrival.prognosedTime : arrival.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) { for (let legKey in data.journeys[key].legs) {
let leg = data.journeys[key].legs[legKey]; let leg = data.journeys[key].legs[legKey];
@ -70,7 +70,7 @@ const journeyOverviewTemplate = (data, key) => {
<tr class="connection ${cancelled ? 'cancelled' : ''}" @click=${() => go('/'+data.reqId + '/' + key)}"> <tr class="connection ${cancelled ? 'cancelled' : ''}" @click=${() => go('/'+data.reqId + '/' + key)}">
<td>${timeTemplate(departure, 'departure')}</td> <td>${timeTemplate(departure, 'departure')}</td>
<td>${timeTemplate(arrival, 'arrival')}</td> <td>${timeTemplate(arrival, 'arrival')}</td>
<td title="${changesDuration > 0 ? 'Davon '+convertMinsToHrsMins(changesDuration)+' Umstiegsdauer' : ''}">${convertMinsToHrsMins(duration)}</td> <td title="${changesDuration > 0 ? 'Davon '+formatDuration(changesDuration)+' Umstiegsdauer' : ''}">${formatDuration(duration)}</td>
<td>${changes-1}</td> <td>${changes-1}</td>
<td>${products.join(', ')}</td> <td>${products.join(', ')}</td>
</tr>`; </tr>`;