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> <a class="link icon-${type}" @click=${() => showRemarksModal(type, remarks)}></a>
` : ''; ` : '';
const legTemplate = (element) => { const legTemplate = (leg) => {
const allRemarks = element.remarks || []; const allRemarks = leg.remarks || [];
const remarks = { const remarks = {
"status": allRemarks.filter(r => r.type === 'status'), "status": allRemarks.filter(r => r.type === 'status'),
"hint": allRemarks.filter(r => r.type === 'hint'), "hint": allRemarks.filter(r => r.type === 'hint'),
"other": allRemarks.filter(r => r.type !== 'status' && 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` return html`
${element.isWalking ? html` ${leg.isWalking ? html`
<p class="walk">${t('walkinfo', [parseName(element.arrival.point), element.distance])}</p> <p class="walk">${t('walkinfo', [parseName(leg.arrival.point), leg.distance])}</p>
` : element.isTransfer ? html` ` : leg.isTransfer ? html`
<p class="transfer">${t('transferinfo', [parseName(element.arrival.point)])}</p> <p class="transfer">${t('transferinfo', [parseName(leg.arrival.point)])}</p>
` : element.isChange ? html` ` : leg.isChange ? html`
<p class="change">${t('changeinfo', [formatDuration(element.duration)])}</p> <p class="change">${t('changeinfo', [formatDuration(leg.duration)])}</p>
` : html` ` : html`
<div class="card"> <div class="card">
<table> <table>
<thead> <thead>
<tr> <tr>
<td colspan="4"> <td colspan="4">
<span>${element.line.name} <span>${hasMarudorURL ? html`
→ ${element.direction} <a href="${marudorUrl}">${leg.line.name} → ${leg.direction}</a>
${element.cancelled ? html`<b class="cancelled-text">${t('cancelled-ride')}</b>` : ''} ` : html `
${leg.line.name} → ${leg.direction}
`}
${leg.cancelled ? html`<b class="cancelled-text">${t('cancelled-ride')}</b>` : ''}
${Object.entries(remarks).map(remarksTemplate)} ${Object.entries(remarks).map(remarksTemplate)}
${travelynxTemplate(element)}</span> ${travelynxTemplate(leg)}</span>
</td> </td>
</tr> </tr>
<tr> <tr>
<td colspan="4"> <td colspan="4">
<div class="train-details"> <div class="train-details">
${element.line.additionalName ? html` ${leg.line.additionalName ? html`
<div class="train-detail"> <div class="train-detail">
Trip: ${element.line.additionalName} Trip: ${leg.line.additionalName}
</div> </div>
` : ''} ` : ''}
${element.line.trainType ? html` ${leg.line.trainType ? html`
<div class="train-detail"> <div class="train-detail">
Train type: ${element.line.trainType} Train type: ${leg.line.trainType}
</div> </div>
` : ''} ` : ''}
<div class="train-detail"> <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>
</div> </div>
</td> </td>
@ -99,7 +117,7 @@ const legTemplate = (element) => {
</tr> </tr>
</thead> </thead>
<tbody> <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"}}> <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.arrival)}</span></td>
<td><span>${timeTemplate(stop.departure)}</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, .journeys table a,
.journey table a,
.journey table span { .journey table span {
padding: 5px 3px; padding: 5px 3px;
display: flex; display: flex;
@ -378,6 +377,15 @@ tbody tr:hover td {
color: black; 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 { .journeys a.details-button {
height: 30px; height: 30px;
padding: 0; padding: 0;