minor template and layout fixes

This commit is contained in:
kritzl 2024-06-05 11:49:38 +02:00
parent d9a21b53be
commit af50e0f04d
5 changed files with 75 additions and 30 deletions

View file

@ -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();
});
})
}());
}
})
}());
}