kritzl/hvvstuhl.de
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity

reposition some buttons

Browse source
This commit is contained in:
kritzl 2024-06-05 11:08:32 +02:00
parent 470b3e2336
commit 0639aeae6f
6 changed files with 120 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

57
elevators.js
View file

@ -4,6 +4,7 @@ const internalData = {
};
let geolocationPermission = false;
let geolocation = [null, null];
const openStations = new Set();
Object.defineProperty(String.prototype, 'capitalize', {
@ -229,7 +230,10 @@ function renderData() {
return;
}
document.querySelector('#loadElevators').innerHTML = 'Daten aktualisieren';
document.querySelector('#updateInfo').classList.remove('hidden');
document.querySelector('#loadElevators').classList.remove('hidden');
document.querySelector('#filters').classList.remove('hidden');
document.querySelector('#initialLoad').classList.add('hidden');
const dateContainer = document.querySelector('#lastUpdated');
dateContainer.innerHTML = dateTimeStyle.format(new Date(internalData.lastUpdate));
@ -245,6 +249,8 @@ 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) {
@ -342,9 +348,14 @@ Auf Karte anzeigen
${osmTemplate ? `<div class="osm" data-nodeid="${elevator.osmNodeId}">
<h4>Daten von OpenStreetMap</h4>
${osmTemplate}
</div>` : ''}
</div>` : `<button class="loadOSM">
Zusätzliche Daten von OpenStreetMap abrufen
<span data-icon="load" class="size-s spinner hidden"></span>
</button>`}
</div>
</li>`;
templateHasOsmButton = templateHasOsmButton || !osmTemplate;
}
const template = `<li class="station" id="station_${stationIndex}">
@ -362,7 +373,7 @@ ${station.state.unavailable ? `Bei ${station.state.unavailable} ${station.state.
</div>
</div>
</div>
<details>
<details data-stationid="${stationIndex}" ${openStations.has(stationIndex) ? 'open' : ''}>
<summary>
Aufzüge anzeigen
</summary>
@ -373,28 +384,52 @@ ${station.state.unavailable ? `Bei ${station.state.unavailable} ${station.state.
</li>`;
listContainer.insertAdjacentHTML('beforeend', template);
// immediate invocation
// (function () {
// const stationId = stationIndex;
// listContainer.querySelector(`#station_${stationIndex}`)
// .addEventListener('click', () => toggleElevatorList(stationId))
// }());
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();
});
})
})
}());
}
}
listContainer.querySelectorAll(`details`).forEach(e => {
e.addEventListener("toggle", (event) => {
const stationId = event.target.dataset['stationid'];
if (event.target.open) {
openStations.add(stationId);
} else {
openStations.delete(stationId);
}
});
})
}
document.querySelector('#loadElevators')
.addEventListener('click', (e) => {
e.target.querySelector('.spinner').classList.remove('hidden');
loadElevators().then(() => {
e.target.querySelector('.spinner').classList.add('hidden');
renderData();
filterData();
});
})
document.querySelector('#loadOSM')
document.querySelector('#initialLoad')
.addEventListener('click', (e) => {
loadOsmData().then(() => {
e.target.querySelector('.spinner').classList.remove('hidden');
loadElevators().then(() => {
e.target.classList.add('hidden');
renderData();
filterData();
});
})

15
index.html
View file

@ -26,14 +26,16 @@
</nav>
<main>
<h2>Station List</h2>
<div>
<div id="updateInfo" class="hidden">
<span>Last Updated: <b id="lastUpdated"></b></span>
<button id="loadElevators">Daten vom HVV abrufen</button>
<button id="loadOSM">OSM Daten abrufen</button>
<button id="loadElevators" class="hidden">
Daten aktualisieren
<span data-icon="load" class="size-s spinner hidden"></span>
</button>
</div>
<br>
<div class="filters">
<div class="hidden" id="filters">
<input placeholder="Station suchen" id="searchStation">
<button id="stationsNearMe">
<span data-icon="location-searching" class="size-m"></span>
@ -41,6 +43,11 @@
</button>
</div>
<button id="initialLoad">
Daten vom HVV abrufen
<span data-icon="load" class="size-m spinner hidden"></span>
</button>
<ul id="stationList">
</ul>
</main>

1
md_icons/load.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M202-279q-32-45-48.5-96T137-480q0-140 98-241.5T470-823h8l-49-49 67-66 178 178-178 178-67-66 49-49h-5q-87 0-148.5 63.5T263-480q0 29 7.5 56.5T293-370l-91 91ZM464-21 286-199l178-179 67 67-49 49h5q87 0 148.5-64T697-480q0-29-7.5-56.5T667-590l91-90q32 45 48.5 95.5T823-480q0 140-98 242T490-136h-8l49 48-67 67Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 428 B

33
style.css
View file

@ -56,7 +56,7 @@
}
.hidden {
display: none;
display: none !important;
}
.text-red {
@ -143,15 +143,23 @@ button:hover {
border-color: var(--station-border-hover);
}
div.filters {
div#filters {
display: flex;
gap: var(--space-m);
justify-items: stretch;
}
div.filters button, div.filters input {
div#filters button, div#filters input {
font-size: 1.5rem;
}
button#initialLoad {
font-size: 1.5rem;
}
button.loadOSM {
width: fit-content;
}
ul#stationList {
padding: 0;
list-style: none;
@ -559,5 +567,24 @@ span[data-icon][data-icon=up-down] {
span[data-icon][data-icon=location-searching] {
mask-image: url(/md_icons/location-searching.svg);
}
span[data-icon][data-icon=load] {
mask-image: url(/md_icons/load.svg);
}
span[data-icon].spinner {
animation-delay: 0s;
animation-direction: normal;
animation-duration: 1s;
animation-fill-mode: none;
animation-iteration-count: infinite;
animation-name: spinner;
animation-play-state: running;
animation-timing-function: linear;
}
@keyframes spinner {
to {
transform: rotate(360deg);
}
}
/*# sourceMappingURL=style.css.map */

2
style.css.map
View file

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAmBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAzBA;EA/BF;IAgCI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;;AAcJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EAGA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAOV;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAIF;EACE;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;EACA;EAEA;;AAEA;EAPF;IAQI;;;AAIJ;EACE;EAEA;EACA;EACA;EACA;;AAEA;EARF;IASI;IACA;IACA;;;AAMR;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EA1BF;IA2BI;;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EAEA;EAKA;;AAJA;EATF;IAUI;;;AAMF;EACE;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EAEA;;AACA;EARF;IASI;;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAKE;EACE;;AAMR;EACE;EACA;EACA;EAEA;EACA;;AAEA;EACE;EAEA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EACE;;AAKF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;;;AAIJ;EACE;EACA;EAEA;;AAEA;EANF;IAOI;;;;AAYpB;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;;AAGF;EACE;EACA;;AAEA;EAJF;IAKI;;;;AAKN;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EAMA;EACA;EACA;EACA;EACA;EACA;EACA;;AAVA;EACE;;AAWF;EAIE;EACA;;;AAMJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE","file":"style.css"}
{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAmBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAzBA;EA/BF;IAgCI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;;AAcJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EAGA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAOV;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAIF;EACE;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;EACA;EAEA;;AAEA;EAPF;IAQI;;;AAIJ;EACE;EAEA;EACA;EACA;EACA;;AAEA;EARF;IASI;IACA;IACA;;;AAMR;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EA1BF;IA2BI;;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EAEA;EAKA;;AAJA;EATF;IAUI;;;AAMF;EACE;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EAEA;;AACA;EARF;IASI;;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAKE;EACE;;AAMR;EACE;EACA;EACA;EAEA;EACA;;AAEA;EACE;EAEA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EACE;;AAKF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;;;AAIJ;EACE;EACA;EAEA;;AAEA;EANF;IAOI;;;;AAYpB;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;;AAGF;EACE;EACA;;AAEA;EAJF;IAKI;;;;AAKN;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EAMA;EACA;EACA;EACA;EACA;EACA;EACA;;AAVA;EACE;;AAWF;EAIE;EACA;;;AAMJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;IACE","file":"style.css"}

33
style.scss
View file

@ -61,7 +61,7 @@ $mediumBreakpoint: 800px;
}
.hidden {
display: none;
display: none !important;
}
.text-red {
@ -161,7 +161,7 @@ button {
}
}
div.filters {
div#filters {
display: flex;
gap: var(--space-m);
justify-items: stretch;
@ -171,6 +171,14 @@ div.filters {
}
}
button#initialLoad {
font-size: 1.5rem;
}
button.loadOSM {
width: fit-content;
}
ul#stationList {
padding: 0;
list-style: none;
@ -662,4 +670,25 @@ span[data-icon] {
&[data-icon="location-searching"] {
mask-image: url(/md_icons/location-searching.svg);
}
&[data-icon="load"] {
mask-image: url(/md_icons/load.svg);
}
&.spinner {
animation-delay: 0s;
animation-direction: normal;
animation-duration: 1s;
animation-fill-mode: none;
animation-iteration-count: infinite;
animation-name: spinner;
animation-play-state: running;
animation-timing-function: linear
}
}
@keyframes spinner {
to {
transform: rotate(360deg);
}
}