Proper naming for tab and tab-content

krasch · Jan 27, 2025 · 9f35382 · 9f35382
1 parent 68f592c
commit 9f35382
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 35 deletions.
diff --git a/index.html b/index.html
@@ -175,7 +175,7 @@ <h1>Wo soll die Reise starten?</h1>
     <h3><label for="date-picker-input">Abreisedatum: </label></h3>
     <div>
         <a id="decrease-date" title="One day earlier">◀</a>
-        <input type="date" id="date-picker-input"/>
+        <input type="date" id="date-picker-input" value="2025-02-01"/>
         <a id="increase-date" title="One day later">▶</a>
     </div>
 </div>
@@ -190,9 +190,9 @@ <h3><label for="date-picker-input">Abreisedatum: </label></h3>
         </button>
     </div>
 
-    <input type="radio" name="tab" id="tab1" checked>
-    <label for="tab1">🛈 &nbsp;Reiseübersicht</label>
-    <div id="tab1-content">
+    <input type="radio" name="tab" id="tab-overview" checked>
+    <label for="tab-overview">🛈 &nbsp;Reiseübersicht</label>
+    <div id="journey-overview">
         <div>
             <h3>Von <span class="from"></span> nach <span class="to"></span></h3> <span class="via"></span>
             <div>Gesamte Reisezeit: <span class="total-time"></span></div>
@@ -201,9 +201,9 @@ <h3>Reiseverlauf:</h3>
         <div id="perlschnur"></div>
     </div>
 
-    <input type="radio" name="tab" id="tab2">
-    <label for="tab2">🖉 &nbsp;Reise anpassen &nbsp;&nbsp;</label>
-    <div id="tab2-content">
+    <input type="radio" name="tab" id="tab-calendar">
+    <label for="tab-calendar">🖉 &nbsp;Reise anpassen &nbsp;&nbsp;</label>
+    <div id="calendar-container">
         <travel-calendar id="calendar" start-date="2025-01-01"></travel-calendar>
     </div>
 
@@ -258,7 +258,7 @@ <h3>Reiseverlauf:</h3>
         const views = {
             map: new MapWrapper('map', [10.0821932, 49.786322], 4.3), // starts async loading map
             calendar: new CalendarWrapper(document.getElementById("calendar")),
-            perlschnur: new Perlschnur(document.getElementById("tab1-content")),
+            perlschnur: new Perlschnur(document.getElementById("journey-overview")),
             datepicker: new Datepicker(document.getElementById("date-picker")),
             layout: new Layout(document.body)
         }

diff --git a/script/main.js b/script/main.js
@@ -134,5 +134,19 @@ export async function main(home, views) {
   // now have done all we can do without having the map ready
   await mapLoadedPromise;
 
+  const itineraries = routeDatabase.getItineraries(
+    home,
+    "London",
+    state.date,
+    database,
+  );
+  const journeys = itineraries.map((i) => new Journey(i));
+
+  state.journeys.reset();
+  for (let j of journeys) state.journeys.addJourney(j);
+  state.journeys.setActive(journeys[0].id); // first journey is the one with the fewest transfers
+
+  updateViews(state);
+
   updateViews(state);
 }
diff --git a/style/layout.css b/style/layout.css
@@ -131,10 +131,10 @@ a#hide-sidebar {
   grid-template-columns: 50% 50%;
   grid-template-rows: 2rem 2.5rem 1fr 2rem;
   grid-template-areas:
-    "warning warning"
-    "tab1 tab2"
-    "content content"
-    "buttons buttons";
+    "warning      warning"
+    "tab-calendar tab-overview"
+    "content      content"
+    "buttons      buttons";
 }
 
 #warning {
@@ -144,16 +144,16 @@ a#hide-sidebar {
   padding-bottom: 0.5rem;
 }
 
-#tab1 {
-  grid-area: tab1;
+#tab-overview + label {
+  grid-area: tab-overview;
 }
 
-#tab2 {
-  grid-area: tab2;
+#tab-calendar + label {
+  grid-area: tab-calendar;
 }
 
-#tab1-content,
-#tab2-content {
+#journey-overview,
+#calendar-container {
   grid-area: content;
   display: none;
 
@@ -163,13 +163,13 @@ a#hide-sidebar {
   padding: 0.5rem;
 }
 
-#tab1:checked + label + #tab1-content,
-#tab2:checked + label + #tab2-content {
+#tab-overview:checked + label + #journey-overview,
+#tab-calendar:checked + label + #calendar-container {
   display: flex;
 }
 
-#tab1 + label,
-#tab2 + label {
+#tab-overview + label,
+#tab-calendar + label {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -185,7 +185,7 @@ a#hide-sidebar {
  Layout for perlschnur
 ************************************************/
 
-#tab1-content {
+#journey-overview {
   align-items: start;
   padding: 1rem;
   gap: 1rem;

diff --git a/style/style.css b/style/style.css
@@ -92,32 +92,32 @@ body {
   padding: 0;
 }
 
-#tab1 + label,
-#tab2 + label {
+#tab-overview + label,
+#tab-calendar + label {
   border: 1px solid var(--color-dark);
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
 
   color: var(--color-dark);
 }
 
-#tab1 + label {
+#tab-calendar + label {
   border-right: 0; /* no double borders */
 }
 
-#tab1:checked + label,
-#tab2:checked + label {
+#tab-overview:checked + label,
+#tab-calendar:checked + label {
   border-bottom: 0; /* no border between tab and content when checked */
 }
 
-#tab1:not(:checked) + label:hover,
-#tab2:not(:checked) + label:hover {
+#tab-overview:not(:checked) + label:hover,
+#tab-calendar:not(:checked) + label:hover {
   cursor: pointer;
   text-shadow: 2px 2px 3px lightgrey;
 }
 
-#tab1-content,
-#tab2-content {
+#journey-overview,
+#calendar-container {
   border: 1px solid var(--color-dark);
   border-top: 0; /* no double borders */
   border-bottom-left-radius: 5px;
@@ -128,19 +128,19 @@ body {
  Perlschnur
 ************************************************/
 
-#tab1-content {
+#journey-overview {
   background-color: var(--color-light);
 }
 
-#tab1-content button {
+#journey-overview button {
   color: var(--color-dark);
   background-color: var(--color-light);
   border: 1px solid var(--color-dark);
   border-radius: 5px;
   padding: 0.2rem;
 }
 
-#tab1-content button:hover {
+#journey-overview button:hover {
   cursor: pointer;
 }