minor template and layout fixes
This commit is contained in:
parent
d9a21b53be
commit
af50e0f04d
5 changed files with 75 additions and 30 deletions
49
elevators.js
49
elevators.js
|
@ -249,8 +249,6 @@ function renderData() {
|
|||
let elevatorsTemplate = '';
|
||||
let previewTemplate = '';
|
||||
|
||||
let templateHasOsmButton = false;
|
||||
|
||||
for (const elevator of station.elevators) {
|
||||
let linesTemplate = '<div class="lineList">Linien: ';
|
||||
for (const line of elevator.lines) {
|
||||
|
@ -273,9 +271,14 @@ function renderData() {
|
|||
const tags = nodeInfo['tags'];
|
||||
if (tags['highway'] === 'elevator') {
|
||||
osmTemplate = '<dl>';
|
||||
osmTemplate += `<div><dt><span data-icon="location" class="size-l"></span>Link zur Karte</dt><dd><a href="https://www.openstreetmap.org/node/${elevator.osmNodeId}" target="_blank">
|
||||
Auf Karte anzeigen
|
||||
</a></dd></div>`;
|
||||
osmTemplate += `<div>
|
||||
<dt><span data-icon="location" class="size-l"></span>Link zur Karte</dt>
|
||||
<dd>
|
||||
<a href="https://www.openstreetmap.org/node/${elevator.osmNodeId}" target="_blank">
|
||||
Auf Karte anzeigen
|
||||
</a>
|
||||
</dd>
|
||||
</div>`;
|
||||
if (tags.hasOwnProperty('description')) {
|
||||
osmTemplate += `<div><dt><span data-icon="info" class="size-l"></span>Beschreibung</dt><dd>${tags['description']}</dd></div>`;
|
||||
}
|
||||
|
@ -289,7 +292,7 @@ Auf Karte anzeigen
|
|||
osmTemplate += `<div><dt><span data-icon="bicycle" class="size-l"></span>Fahrräder</dt><dd>${tags['bicycle'] === 'yes' ? 'Ja' : 'Nein'}</dd></div>`;
|
||||
}
|
||||
|
||||
osmTemplate += '<dl>';
|
||||
osmTemplate += '</dl>';
|
||||
} else {
|
||||
console.warn(`OSM Node is not an elevator. At:\t${station.name}\t${elevator.label} (NodeID: ${elevator.osmNodeId})`);
|
||||
}
|
||||
|
@ -346,7 +349,13 @@ Auf Karte anzeigen
|
|||
</dl>
|
||||
<!--<hr>-->
|
||||
${osmTemplate ? `<div class="osm" data-nodeid="${elevator.osmNodeId}">
|
||||
<h4>Daten von OpenStreetMap</h4>
|
||||
<div class="osmHeading">
|
||||
<h4>Daten von OpenStreetMap</h4>
|
||||
<button class="loadOSM size-s">
|
||||
OSM Daten aktualisieren
|
||||
<span data-icon="load" class="size-s spinner hidden"></span>
|
||||
</button>
|
||||
</div>
|
||||
${osmTemplate}
|
||||
</div>` : `<button class="loadOSM">
|
||||
Zusätzliche Daten von OpenStreetMap abrufen
|
||||
|
@ -354,8 +363,6 @@ Auf Karte anzeigen
|
|||
</button>`}
|
||||
</div>
|
||||
</li>`;
|
||||
|
||||
templateHasOsmButton = templateHasOsmButton || !osmTemplate;
|
||||
}
|
||||
|
||||
const template = `<li class="station" id="station_${stationIndex}">
|
||||
|
@ -384,20 +391,18 @@ ${station.state.unavailable ? `Bei ${station.state.unavailable} ${station.state.
|
|||
</li>`;
|
||||
listContainer.insertAdjacentHTML('beforeend', template);
|
||||
|
||||
if (templateHasOsmButton) {
|
||||
//immediate invocation
|
||||
(function () {
|
||||
listContainer.querySelectorAll(`#station_${stationIndex} .loadOSM`).forEach(e => {
|
||||
e.addEventListener('click', (ev) => {
|
||||
ev.target.querySelector('.spinner').classList.remove('hidden');
|
||||
loadOsmData().then(() => {
|
||||
ev.target.classList.add('hidden');
|
||||
renderData();
|
||||
});
|
||||
})
|
||||
//immediate invocation
|
||||
(function () {
|
||||
listContainer.querySelectorAll(`#station_${stationIndex} .loadOSM`).forEach(e => {
|
||||
e.addEventListener('click', (ev) => {
|
||||
ev.target.querySelector('.spinner').classList.remove('hidden');
|
||||
loadOsmData().then(() => {
|
||||
ev.target.classList.add('hidden');
|
||||
renderData();
|
||||
});
|
||||
})
|
||||
}());
|
||||
}
|
||||
})
|
||||
}());
|
||||
|
||||
}
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue