Merge pull request #70 from krasch/minor-fixes

Minor fixes
krasch · Jan 1, 2025 · 57e0414 · 57e0414
2 parents ee1a36b + d96abd5
commit 57e0414
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 45 deletions.
diff --git a/index.html b/index.html
@@ -96,19 +96,6 @@
     </div>
 </template>
 
-
-<template id="template-perlschnur-summary">
-    <div class="perlschnur-summary">
-        <h3>
-            Von <span class="from">London</span>
-            nach <span class="to">Berlin</span>
-            <span class="via">via x, y</span>
-        </h3>
-        <div>Gesamte Reisezeit: <span class="total-time"></span></div>
-        <h3>Reiseverlauf:</h3>
-    </div>
-</template>
-
 <template id="template-perlschnur-connection">
     <div class="card perlschnur-connection">
         <h3>
@@ -235,12 +222,22 @@ <h3><label for="date-picker-input">Abreisedatum: </label></h3>
     <input type="radio" name="tab" id="tab1" checked>
     <label for="tab1">🛈 &nbsp;Reiseübersicht</label>
     <div id="tab1-content">
+        <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>
+        </div>
+        <h3>Reiseverlauf:</h3>
         <div id="perlschnur"></div>
+        <div id="bottom-buttons">
+            <button onclick="alert('coming soon');">🔗 Teilen</button>
+            <button onclick="alert('coming soon');">🎫 Buchen</button>
+        </div>
     </div>
 
     <input type="radio" name="tab" id="tab2">
     <label for="tab2">🖉 &nbsp;Reise anpassen</label>
     <div id="tab2-content">
+        <button id="help-calendar" onclick="alert('coming soon');">❓ Was kann ich hier machen?</button>
         <calendar-grid id="calendar" start="2024-12-01" num-days="3" resolution="4"></calendar-grid>
     </div>
 </div>
@@ -275,7 +272,7 @@ <h3><label for="date-picker-input">Abreisedatum: </label></h3>
         const views = {
             map: new MapWrapper('map', [10.0821932, 49.786322], 4.3), // starts async loading map
             calendar: document.getElementById("calendar"),
-            perlschnur: new Perlschnur(document.getElementById("perlschnur")),
+            perlschnur: new Perlschnur(document.getElementById("tab1-content")),
             datepicker: new Datepicker(document.getElementById("date-picker")),
             layout: new Layout(document.body)
         }

diff --git a/script/components/perlschnur.js b/script/components/perlschnur.js
@@ -15,27 +15,21 @@ class Perlschnur {
   }
 
   updateView(data) {
-    const elements = [];
-
-    elements.push(this.#createSummary(data.summary));
+    updateElement(this.#container, {
+      ".total-time": { innerText: data.summary.totalTime },
+      ".from": { innerText: data.summary.from },
+      ".to": { innerText: data.summary.to },
+      ".via": { innerText: data.summary.via },
+    });
 
+    const elements = [];
     for (let i in data.connections) {
       elements.push(this.#createConnection(data.connections[i]));
       if (Number(i) < data.connections.length - 1)
         elements.push(this.#createTransfer(data.transfers[i]));
     }
 
-    this.#container.replaceChildren(...elements);
-  }
-
-  #createSummary(summary) {
-    const element = createElementFromTemplate("template-perlschnur-summary", {
-      ".total-time": { innerText: summary.totalTime },
-      ".from": { innerText: summary.from },
-      ".to": { innerText: summary.to },
-      ".via": { innerText: summary.via },
-    });
-    return element;
+    this.#container.querySelector("#perlschnur").replaceChildren(...elements);
   }
 
   #createConnection(connection) {

diff --git a/style/calendar.css b/style/calendar.css
@@ -1,3 +1,21 @@
+#tab2-content {
+    padding-top: 1rem;
+    gap: 0.5rem;
+}
+
+#help-calendar {
+    align-self: end;
+    color: var(--color-dark);
+    background-color: var(--color-light);
+    border: 1px solid var(--color-dark);
+    border-radius: 5px;
+    padding: 0.2rem;
+}
+
+#help-calendar:hover {
+    cursor: pointer;
+}
+
 calendar-grid {
     width: 100%;
     display: grid;
@@ -18,8 +36,6 @@ calendar-grid {
     color: #2e210d;
 }
 
-
-
 /* line to the left of each day */
 calendar-grid > .calendar-grid-cell {
     border-left: 1px dashed lightgrey;

diff --git a/style/layout.css b/style/layout.css
@@ -178,7 +178,16 @@ a#hide-sidebar {
  Layout for perlschnur
 ************************************************/
 
+#tab1-content {
+    align-items: start;
+    padding: 1rem;
+    gap: 1rem;
+}
+
 #perlschnur {
+    padding: 0.5rem;
+    align-self: center;
+
     height: 100%;
     width: 100%;
 
@@ -187,20 +196,6 @@ a#hide-sidebar {
     gap: 0.5rem;
 }
 
-.perlschnur-summary {
-    padding-top: 2rem;
-}
-
-.perlschnur-summary > *:last-child {
-    padding-top: 2rem;
-    padding-bottom: 1rem;
-}
-
-.perlschnur-connection {
-    margin-left: 1rem;
-    margin-right: 1rem;
-}
-
 .perlschnur-connection h3 {
     height: 2rem;
     font-size: 1rem;
@@ -258,6 +253,13 @@ a#hide-sidebar {
     padding-left: 2rem;
 }
 
+#bottom-buttons {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    gap: 2rem;
+}
+
 
 /***********************************************
  Layout for footer

diff --git a/style/style.css b/style/style.css
@@ -119,10 +119,27 @@ a#show-sidebar:hover {
  Perlschnur
 ************************************************/
 
-#perlschnur {
+#tab1-content {
     background-color: var(--color-light);
 }
 
+#tab1-content 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 {
+    cursor: pointer;
+}
+
+#perlschnur {
+    border: 1px solid lightgrey;
+    border-radius: 5px;
+}
+
 .perlschnur-connection {
     --color: 0, 0, 0; /* will be set by Javascript */
     background-color: rgba(var(--color), 0.4);