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

journeyView: add link to marudor

Browse source
This commit is contained in:
Leah 2021-01-22 16:22:01 +01:00
parent 5520fbf0c4
commit 4fc48f9a92
2 changed files with 45 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
client/js/journeyView.js
View file

@ -44,49 +44,67 @@ const remarksTemplate = ([type, remarks]) => !!remarks.length ? html`
<a class="link icon-${type}" @click=${() => showRemarksModal(type, remarks)}></a>
` : '';
const legTemplate = (element) => {
const allRemarks = element.remarks || [];
const legTemplate = (leg) => {
const allRemarks = leg.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'),
};
let hasMarudorURL = false;
let marudorUrl = '';
if (!leg.isWalking && !leg.isTransfer && !leg.isChange) {
if (leg.line.product == "nationalExp" || leg.line.product == "national" || leg.line.product == "regionalExp" || leg.line.product == "regional") {
hasMarudorURL = true;
}
if (!leg.line.additionalName) {
marudorUrl = 'https://marudor.de/details/' + leg.line.name + '/' + (leg.departure.plannedTime*1000)
} else {
marudorUrl = 'https://marudor.de/details/' + leg.line.additionalName + "/" + (leg.departure.plannedTime*1000)
}
}
return html`
${element.isWalking ? html`
<p class="walk">${t('walkinfo', [parseName(element.arrival.point), element.distance])}</p>
` : element.isTransfer ? html`
<p class="transfer">${t('transferinfo', [parseName(element.arrival.point)])}</p>
` : element.isChange ? html`
<p class="change">${t('changeinfo', [formatDuration(element.duration)])}</p>
${leg.isWalking ? html`
<p class="walk">${t('walkinfo', [parseName(leg.arrival.point), leg.distance])}</p>
` : leg.isTransfer ? html`
<p class="transfer">${t('transferinfo', [parseName(leg.arrival.point)])}</p>
` : leg.isChange ? html`
<p class="change">${t('changeinfo', [formatDuration(leg.duration)])}</p>
` : html`
<div class="card">
<table>
<thead>
<tr>
<td colspan="4">
<span>${element.line.name}
→ ${element.direction}
${element.cancelled ? html`<b class="cancelled-text">${t('cancelled-ride')}</b>` : ''}
<span>${hasMarudorURL ? html`
<a href="${marudorUrl}">${leg.line.name} → ${leg.direction}</a>
` : html `
${leg.line.name} → ${leg.direction}
`}
${leg.cancelled ? html`<b class="cancelled-text">${t('cancelled-ride')}</b>` : ''}
${Object.entries(remarks).map(remarksTemplate)}
${travelynxTemplate(element)}</span>
${travelynxTemplate(leg)}</span>
</td>
</tr>
<tr>
<td colspan="4">
<div class="train-details">
${element.line.additionalName ? html`
${leg.line.additionalName ? html`
<div class="train-detail">
Trip: ${element.line.additionalName}
Trip: ${leg.line.additionalName}
</div>
` : ''}
${element.line.trainType ? html`
${leg.line.trainType ? html`
<div class="train-detail">
Train type: ${element.line.trainType}
Train type: ${leg.line.trainType}
</div>
` : ''}
<div class="train-detail">
Duration: ${formatDuration((element.arrival.prognosedTime || element.arrival.plannedTime) - (element.departure.prognosedTime || element.departure.plannedTime))}
Duration: ${formatDuration((leg.arrival.prognosedTime || leg.arrival.plannedTime) - (leg.departure.prognosedTime || leg.departure.plannedTime))}
</div>
</div>
</td>
@ -99,7 +117,7 @@ const legTemplate = (element) => {
</tr>
</thead>
<tbody>
${element.stopovers.map(stop => html`
${leg.stopovers.map(stop => html`
<tr class="stop ${stop.cancelled ? 'cancelled' : ''}" @click=${() => {location.href = "https://marudor.de/"+stop.stop.id+"?searchType=hafas"}}>
<td><span>${timeTemplate(stop.arrival)}</span></td>
<td><span>${timeTemplate(stop.departure)}</span></td>

10
client/style.css
View file

@ -367,7 +367,6 @@ tbody tr:hover td {
}
.journeys table a,
.journey table a,
.journey table span {
padding: 5px 3px;
display: flex;
@ -378,6 +377,15 @@ tbody tr:hover td {
color: black;
}
.journey table a {
padding: 5px 3px;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
color: black;
}
.journeys a.details-button {
height: 30px;
padding: 0;