dynamic race tracks

app.js

@@ -149,17 +149,17 @@ function renderRennplan() {
                     </div>
 
                     <div class="p-5 flex flex-wrap gap-2 text-sm">
+                        ${[
+                            ["Bahn 1", race.bahn1],
+                            ["Bahn 2", race.bahn2],
+                            ["Bahn 3", race.bahn3]
+                        ]
+                            .filter(([, value]) => value !== undefined && value !== null && value !== "")
+                            .map(([label, value]) => `
                                 <span class="bg-slate-100 px-3 py-1 rounded-full">
-                            Bahn 1 · ${race.bahn1}
+                                    ${label} · ${value}
-                        </span>
-
-                        <span class="bg-slate-100 px-3 py-1 rounded-full">
-                            Bahn 2 · ${race.bahn2}
-                        </span>
-
-                        <span class="bg-slate-100 px-3 py-1 rounded-full">
-                            Bahn 3 · ${race.bahn3}
                                 </span>
+                            `).join("")}
                     </div>
 
                 </div>
@@ -178,7 +178,7 @@ function renderResults() {
 
     races.forEach(([_, race]) => {
 
-        const lane = (key, data, winner) => {
+        const lane = (key, data) => {
             const isWinner = race.winner === key;
 
             return `
@@ -205,6 +205,8 @@ function renderResults() {
             </div>`;
         };
 
+        const lanes = ["bahn1", "bahn2", "bahn3"]
+            .filter(key => race[key] !== undefined && race[key] !== null);
         container.innerHTML += `
         <div class="bg-white rounded-3xl shadow-sm overflow-hidden">
 
@@ -226,9 +228,7 @@ function renderResults() {
             </div>
 
             <div class="p-5 grid gap-3 md:grid-cols-3">
-                ${lane("bahn1", race.bahn1)}
+                ${lanes.map(key => lane(key, race[key])).join("")}
-                ${lane("bahn2", race.bahn2)}
-                ${lane("bahn3", race.bahn3)}
             </div>
 
         </div>`;