add load time and autofocus

api/templates/layout.html

@@ -18,6 +18,17 @@
   <link rel="icon" type="image/x-icon" href="/assets/favicon.ico">
   <meta name="viewport" content="width=device-width, initial-scale=1" />
 </head>
+<script>
+window.onload = function () {
+    setTimeout(() => {
+        const perfData = window.performance.timing;
+        const pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;
+
+        const loadTimeElement = document.getElementById('js_load_time');
+        loadTimeElement.textContent += ` ${pageLoadTime}ms`;
+    }, 0); // Minimal delay to wait for `loadEventEnd` to be populated
+};
+</script>
 <noscript>
 <style>
     .js-only {
@@ -67,6 +78,7 @@
             {% if let Some(load_time) = load_time_ms %}
                 <p style="marin-top: 5px; color: #555555;"><small><i>Data loaded in {{ *load_time | format_load_time }}</i></small></p>
             {% endif %}
+            <p class="js-only" style="marin-top: 5px; color: #555555;"><small><i id="js_load_time">Total load time</i></small></p>
         </div>
         <div>
             {% if widescreen %}

api/templates/route.html

@@ -31,7 +31,22 @@
 </style>
 
 <script>
+
 document.addEventListener("DOMContentLoaded", () => {
+document.querySelectorAll("details[data-direction-id]").forEach(details => {
+    details.addEventListener("toggle", () => {
+      if (details.open) {
+        // Delay scroll until DOM is expanded/rendered
+        setTimeout(() => {
+          const directionId = details.getAttribute("data-direction-id");
+          const target = document.getElementById("next-col-" + directionId);
+          if (target) {
+            target.scrollIntoView({ behavior: "smooth", inline: "start", block: "nearest" });
+          }
+        }, 50); // Short delay to allow rendering
+      }
+    });
+  });
   document.querySelectorAll(".train-direction-table").forEach((table) => {
     table.addEventListener("click", (e) => {
       const cell = e.target.closest("td, th");
@@ -74,7 +89,7 @@ document.addEventListener("DOMContentLoaded", () => {
 </div>
 
 {% for timetable in timetables %}
-<details style="margin-top: 15px;">
+<details style="margin-top: 15px;" data-direction-id="{{ timetable.direction.direction_id }}">
     <summary>
         <div style="display: inline-block;">
         <h3>{{ timetable.direction.direction | capitalize }} to</h3> 
@@ -87,7 +102,17 @@ document.addEventListener("DOMContentLoaded", () => {
       <tr>
         <th>Stop</th>
         {% for trip_id in timetable.trip_ids %}
-          <th>{{ trip_id }}</th>
+          {% if let Some(next_id_v) = timetable.next_id %}
+            {% if next_id_v == trip_id %}
+            <th class="next-col" id="next-col-{{ timetable.direction.direction_id }}">
+            {% else %}
+            <th>
+            {% endif %}
+          {% else %}
+          <th>
+          {% endif %}
+              {{ trip_id }}
+          </th>
         {% endfor %}
       </tr>
     </thead>