Move text describing number of connections out of javascript and into…

… template
krasch · Jan 30, 2025 · 3ff9679 · 3ff9679
1 parent f8c3e4d
commit 3ff9679
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 20 deletions.
diff --git a/data/text.js b/data/text.js
diff --git a/index.html b/index.html
@@ -113,7 +113,13 @@ <h3>
     <div class="card city-menu" data-city-id="to-be-filled">
         <h3></h3> <!-- title -->
         <menu>
-            <li class="hidden"><em class="num-transfers"></em></li>
+            <li class="hidden">
+                <em class="num-transfers">
+                    <span class="transfers0">Direkt erreichbar</span>
+                    <span class="transfers1">Mit 1 Umstieg erreichbar</span>
+                    <span class="transfersX">Mit <span class="count"></span> Umstiegen erreichbar</span>
+                </em>
+            </li>
             <li class="hidden">
                 <button value="showRoutes">
                     <img src="images/icons/eye.svg" alt="icon of eye"/>

diff --git a/script/components/map/cities.js b/script/components/map/cities.js
@@ -9,13 +9,6 @@ import {
 } from "./util.js";
 import { createElementFromTemplate } from "../../util.js";
 
-// todo should be in template
-function getNumTransfersText(numTransfers) {
-  if (numTransfers === 0) return "Direkt erreichbar";
-  if (numTransfers === 1) return "Mit 1 Umstieg erreichbar";
-  else return `Mit ${numTransfers} Umstiegen erreichbar`;
-}
-
 function initHomeMarker(id, lngLat) {
   const element = createElementFromTemplate("template-city-marker-home", {
     $root$: { "data-city-id": id },
@@ -39,11 +32,22 @@ function initDestinationMarker(lngLat) {
 }
 
 function initCityMenu(id, name, numTransfer, lngLat) {
-  const element = createElementFromTemplate("template-city-menu", {
+  const data = {
     $root$: { "data-city-id": id },
     h3: { innerText: name },
-    ".num-transfers": { innerText: getNumTransfersText(numTransfer) },
-  });
+    ".count": { innerText: numTransfer },
+  };
+
+  const element = createElementFromTemplate("template-city-menu", data);
+
+  const textNumTransfers = element.querySelector(".num-transfers");
+  const buttonShowRoutes = element.querySelector("button[value='showRoutes']");
+  const buttonMakeCut = element.querySelector("button[value='makeCut']");
+
+  // choose which text will be shown
+  if (numTransfer === 0) textNumTransfers.classList.add("transfers0");
+  else if (numTransfer === 1) textNumTransfers.classList.add("transfers1");
+  else textNumTransfers.classList.add("transfersX");
 
   const popup = new maplibregl.Popup({
     anchor: "left",
@@ -52,10 +56,6 @@ function initCityMenu(id, name, numTransfer, lngLat) {
   });
   popup.setDOMContent(element).setLngLat(lngLat);
 
-  const textNumTransfers = element.querySelector(".num-transfers");
-  const buttonShowRoutes = element.querySelector("button[value='showRoutes']");
-  const buttonMakeCut = element.querySelector("button[value='makeCut']");
-
   popup.updateElement = (state) => {
     if (state.isDestination !== undefined) {
       updateVisibility(buttonShowRoutes.parentElement, state.isDestination);