Bestenliste: keine Teilnehmer, keine laufende Saison, querying, Konfi…

…guration
LeonardNolting · Aug 27, 2021 · 36455c8 · 36455c8
1 parent 627163c
commit 36455c8
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 17 deletions.
diff --git a/css/inhalt/bestenliste.css b/css/inhalt/bestenliste.css
@@ -4,7 +4,6 @@
 	--gap-track-inhalt: 2.4rem;
 	--gap-fahrrad-inhalt: 0.6rem;
 	--height: 4rem;
-	--anzahl: 0;
 	--strecke-breite: 2.8rem;
 	--track-hoehe: calc(var(--height) * 3 / 7);
 	--rang-breite-max: calc(var(--height) * 2 / 3);
@@ -18,7 +17,11 @@
 	position: relative;
 }
 
-#bestenliste-container > h3, #bestenliste-container > button {
+#bestenliste-container.versteckt {
+	display: none;
+}
+
+#bestenliste-container > h3, #bestenliste-container > button, #bestenliste-container > .keine-teilnehmer {
 	--padding: 1.4rem;
 	/*z-index: 1;*/
 	/*position: relative;*/
@@ -36,7 +39,12 @@
 	font-size: 1.3rem;
 }
 
+#bestenliste-container.keine-teilnehmer #bestenliste-anzeige, #bestenliste-container:not(.keine-teilnehmer) .keine-teilnehmer {
+	display: none;
+}
+
 #bestenliste-anzeige {
+	--anzahl: 0;
 	display: flex;
 	flex-direction: column;
 	height: calc(var(--anzahl) * (var(--gap-vertical) + var(--height)) - var(--gap-vertical));
@@ -83,10 +91,6 @@
 	left: 0;
 }
 
-#bestenliste-anzeige:empty {
-	display: none;
-}
-
 #bestenliste-anzeige li {
 	--left: calc(var(--prozent) * 1%);
 	--top: calc((var(--gap-vertical) + var(--height)) * (var(--rang) - 1));

diff --git a/index.html b/index.html
@@ -131,11 +131,14 @@ <h3>Gymnasium Höchstadt</h3>
 				</div>-->
 			</div>
 
-			<div id="bestenliste-container" class="container">
+			<div id="bestenliste-container" class="container versteckt">
 				<a href="#bestenliste" id="bestenliste"></a>
 				<h3>Aktivste Teilnehmer:</h3>
 				<ul id="bestenliste-anzeige"></ul>
-				<button class="links leer">Mehr laden</button>
+				<div class="keine-teilnehmer">
+					<span>Noch keine Teilnehmer! <a href="#mitmachen">Seien Sie der Erste.</a></span>
+				</div>
+				<button class="links leer" disabled>Mehr laden</button>
 			</div>
 
 			<!--<div class="container">

diff --git a/js/inhalt/bestenliste.ts b/js/inhalt/bestenliste.ts
@@ -19,6 +19,7 @@ import {observer} from "./inhalt";
 
 // @ts-ignore
 import images from "../../img/bicyclists/*.png";
+import {bestenlisteChunkGroesse, bestenlisteErsterChunkGroesse} from "../konfiguration";
 
 const anzeige = document.getElementById("bestenliste-anzeige") as HTMLUListElement
 const container = anzeige.parentElement as HTMLDivElement
@@ -92,19 +93,29 @@ const passeElementAn = (fahrer: string, werte: Werte, element: BestenlisteElemen
 let anzahlFahrer: number | undefined = undefined
 
 export default () => {
+
 	let anzahlFahrerListener: Unsubscribe | undefined
 	onValue(ref(Datenbank.datenbank, "allgemein/saisons/laufend"), snap => {
 		const laufend = snap.val()
-		anzahlFahrerListener?.()
-		anzahlFahrerListener = onValue(ref(Datenbank.datenbank, "allgemein/saisons/details/" + laufend + "/anzahlFahrer"), snap => {
-			anzahlFahrer = snap.val() || 0
-			kannGeladenWerdenUeberpruefen()
-		})
-	})
 
-	mehrLadenKnopf.addEventListener("click", () => laden(10))
+		if (laufend !== null) {
+			anzahlFahrerListener?.()
+			anzahlFahrerListener = onValue(ref(Datenbank.datenbank, "allgemein/saisons/details/" + laufend + "/anzahlFahrer"), snap => {
+				anzahlFahrer = snap.val() || 0
+				kannGeladenWerdenUeberpruefen()
+				if (anzahlFahrer === 0) container.classList.add("keine-teilnehmer")
+			})
+
+			container.style.setProperty("--anzahl", bestenlisteErsterChunkGroesse.toString())
+			anzeige.innerHTML = ""
+			container.classList.remove("versteckt")
+			laden(bestenlisteErsterChunkGroesse)
+		} else {
+			container.classList.add("versteckt")
+		}
+	})
 
-	laden(10)
+	mehrLadenKnopf.addEventListener("click", () => laden(bestenlisteChunkGroesse))
 }
 
 const setze = (fahrer: string, werte: Werte) => {
@@ -118,7 +129,7 @@ const setzeAusSnapshot = (snap: DataSnapshot) => setze(snap.key, snap.val())
 export const laden = (anzahl: number) => {
 	const sortiert = sortieren();
 	const reference = sortiert.length > 0 ?
-		query(ref(Datenbank.datenbank, "spezifisch/fahrer"), limitToLast(anzahl), endAt(sortiert[sortiert.length - 1][1].strecke || 0, sortiert[sortiert.length - 2][0]), orderByChild("strecke")) :
+		query(ref(Datenbank.datenbank, "spezifisch/fahrer"), limitToLast(anzahl), endAt(sortiert[sortiert.length - 1][1].strecke || 0), orderByChild("strecke")) :
 		query(ref(Datenbank.datenbank, "spezifisch/fahrer"), limitToLast(anzahl), orderByChild("strecke"))
 
 	onChildAdded(reference, setzeAusSnapshot)

diff --git a/js/konfiguration.ts b/js/konfiguration.ts
@@ -95,6 +95,10 @@ export const
 	 * Wie viele Einträge der Bestenliste auf einmal geladen werden
 	 */
 	bestenlisteChunkGroesse = 10,
+	/**
+	 * Wie viele Einträge der Bestenliste am Anfang auf einmal geladen werden
+	 */
+	bestenlisteErsterChunkGroesse = bestenlisteChunkGroesse,
 
 	koordinaten = {
 		hoechstadt: {lat: 49.709576321528836, lng: 10.81265000522466},