live tracking and filter

api/templates/route.html

@@ -68,18 +68,19 @@ document.addEventListener("DOMContentLoaded", () => {
 });
 </script>
 
-<div style="background-color: #ff0000; color: #ffffff; padding: 15px; margin-bottom: 15px; margin-top: 15px;">
-   This website is not run by SEPTA. As such, schedules may not be 
-   completely accurate. 
-</div>
-
 <div style="display: flex; align-items: center;">
     {% call scope::route_symbol(route) %}
     <h1 style="margin-left: 15px;">{{ route.name }}</h1>
 </div>
 
 {% for timetable in timetables %}
-  <h2>{{ timetable.direction.direction | capitalize }} to {{ timetable.direction.direction_destination }}</h2>
+<details style="margin-top: 15px;">
+    <summary>
+        <div style="display: inline-block;">
+        <h3>{{ timetable.direction.direction | capitalize }} to</h3> 
+        <h2>{{ timetable.direction.direction_destination }}</h2>
+        </div>
+    </summary>
   <div class="tscroll">
   <table class="train-direction-table" style="margin-top: 5px;">
     <thead>
@@ -92,20 +93,37 @@ document.addEventListener("DOMContentLoaded", () => {
     </thead>
     <tbody>
       {% for row in timetable.rows %}
+        {% if let Some(filter_stop_v) = filter_stops %}
+            {% if !filter_stop_v.contains(&row.stop_id) %}
+                {% continue %}
+            {% endif %}
+        {% endif %}
         <tr>
           <td>{{ row.stop_name }}</td>
           {% for time in row.times %}
-            <td>
+
+
               {% if let Some(t) = time %}
-                {{ t | format_time }}
+                {% let live_o = timetable.tracking_data[loop.index0] %}
+                {% if let Tracked(live) = live_o %}
+                    {% let time =  (t + (live.delay * 60.0) as i64) %}
+                    <td style="background-color: #003300">
+                        <span style="color: #22bb22"> {{ time | format_time }} </span>
+                    </td>
+                {% elif let TripTracking::Cancelled = live_o %}
+                    <td style="color: #ff0000"><s>{{ t | format_time }}</s></td>
+                {% else %}
+                    <td>{{ t | format_time }}</td>
+                {% endif %}
               {% else %}
-                -- 
-              {% endif %}
+            <td>
             </td>
+              {% endif %}
           {% endfor %}
         </tr>
       {% endfor %}
     </tbody>
   </table>
   </div>
+</details>
 {% endfor %}