Move out duplicate code

index.html

@@ -110,8 +110,8 @@
         <div class="title"></div>
         <div class="row menu-entry">
             <!-- id, name and for will be made unique when instantiating the template -->
-            <input type="checkbox" id="routes" name="show" value="routes">
-            <label for="routes">Routen hierher</label>
+            <input type="checkbox" id="city-menu-routes" name="city-menu-routes" value="routes">
+            <label for="city-menu-routes">Routen hierher</label>
         </div>
     </div>
 </template>
@@ -125,8 +125,8 @@
         <div class="row">Reisezeit: &nbsp; <strong class="travel-time"></strong></div>
         <!--div class="row menu-entry"-->
         <!-- id, name and for will be made unique when instantiating the template -->
-        <!--input type="checkbox" id="showJourneyCalendar" name="show" value="journey">
-        <label for="showJourneyCalendar">Reisekalender anzeigen</label>
+        <!--input type="checkbox" id="edge-menu-calendar" name="edge-menu-calendar" value="journey">
+        <label for="edge-menu-calendar">Reisekalender anzeigen</label>
     </div-->
     </div>
 </template>

script/components/map/mapObjects.js

@@ -96,26 +96,17 @@ class CityMenu {
   }
 
   #initMenuEntry(element, cityId, cityName) {
-    const input = element.querySelector("input");
-    const label = element.querySelector("label");
-
-    // make unique across document by adding city to strings
-    input.name = `city-menu-${cityId}`;
-    input.id = `city-menu-${cityId}-${input.id}`;
-    label.setAttribute(
-      "for",
-      `city-menu-${cityId}-${label.getAttribute("for")}`,
-    );
+    const result = initInputAndLabel(element, cityId);
 
     // needed for reacting when entry is chosen
-    input.data = {
+    result.input.data = {
       type: "city",
       cityName: cityName,
       cityId: cityId,
-      entry: input.value,
+      entry: result.input.value,
     };
 
-    return input.value; // what is the "name" of this entry?
+    return result.input.value; // what is the "name" of this entry?
   }
 }
 
@@ -155,22 +146,16 @@ class JourneyMenu {
   update(diff) {}
 
   #initMenuEntry(element, id) {
-    const input = element.querySelector("input");
-    const label = element.querySelector("label");
-
-    // make unique across document by adding id to strings
-    input.name = `edge-menu-${id}`;
-    input.id = `edge-menu-${id}-${input.id}`;
-    label.setAttribute("for", `edge-menu-${id}-${label.getAttribute("for")}`);
+    const result = initInputAndLabel(element, id);
 
     // needed for reacting when entry is chosen
-    input.data = {
+    result.input.data = {
       type: "edge",
       id: id,
-      entry: input.value,
+      entry: result.input.value,
     };
 
-    return input.value; // what is the "name" of this entry?
+    return result.input.value; // what is the "name" of this entry?
   }
 
   remove() {

script/util.js

@@ -22,6 +22,17 @@ function updateElement(element, data) {
   }
 }
 
+function initInputAndLabel(container, idSuffix) {
+  const input = container.querySelector("input");
+  const label = container.querySelector("label");
+
+  input.name = `${input.name}-${idSuffix}`;
+  input.id = `${input.id}-${idSuffix}`;
+  label.setAttribute("for", input.id);
+
+  return { input: input, label: label };
+}
+
 function* calculateDiffs(oldObjectOfObjects, newObjectOfObjects) {
   for (let id in oldObjectOfObjects) {
     // this id is not present in the new object