From 6f522f855cbf3f698abdac5bed7005d5c8fd1705 Mon Sep 17 00:00:00 2001
From: Yuval Adam <_@yuv.al>
Date: Mon, 28 Sep 2020 23:08:23 +0300
Subject: Initial Vue component

---
 iss/server.py             |  3 ++
 iss/templates/passes.html | 84 +++++++++++++++++++++++++++--------------------
 2 files changed, 51 insertions(+), 36 deletions(-)

diff --git a/iss/server.py b/iss/server.py
index e6e59b7..e8486ea 100644
--- a/iss/server.py
+++ b/iss/server.py
@@ -1,3 +1,5 @@
+import json
+
 from fastapi import FastAPI, Request, Header
 from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
@@ -31,6 +33,7 @@ async def passes(request: Request, lat: float, lng: float):
         {
             "request": request,
             "predictions": preds,
+            "predictions_json": json.dumps(preds),
             "location": {"lat": lat, "lng": lng},
         },
     )
diff --git a/iss/templates/passes.html b/iss/templates/passes.html
index c89aef7..10fb52b 100644
--- a/iss/templates/passes.html
+++ b/iss/templates/passes.html
@@ -6,43 +6,55 @@
 {% endblock %}
 
 {% block content %}
-<p class="f3">Passes for {{ location.lat }}, {{ location.lng }}</p>
-<table class="tl pa1 w-100">
-    <tr class=" tc pa1 f3">
-        <th colspan="1">Total</th>
-        <th colspan="2">Rise</th>
-        <th colspan="4">Culminate</th>
-        <th colspan="2">Set</th>
-    </tr>
-    <tr class="pa1 f4">
-        <th>Date</th>
-        <th>Length</th>
-        <th>Time</th>
-        <th>Azimuth</th>
-        <th>Time</th>
-        <th>Azimuth</th>
-        <th>Elevation</th>
-        <th>Distance</th>
-        <th>Time</th>
-        <th>Azimuth</th>
-    </tr>
-    {% for date, preds in predictions.items() %}
-        {% set date_loop = loop %}
-        {% for pred in preds %}
-        <tr class="pa1 {{ date_loop.cycle('light-silver', 'light-gray') }}">
-            {% if loop.first %}<td rowspan="{{ preds|length }}">{{ date }}</td>{% endif %}
-            <td>{{ pred.length }}</td>
-            <td>{{ pred.rise.time }}</td>
-            <td>{{ pred.rise.azimuth }} ({{ pred.rise.direction }})</td>
-            <td>{{ pred.culminate.time }}</td>
-            <td>{{ pred.culminate.azimuth }} ({{ pred.culminate.direction }})</td>
-            <td>{{ pred.culminate.degrees }}</td>
-            <td>{{ pred.culminate.distance }}</td>
-            <td>{{ pred.set.time }}</td>
-            <td>{{ pred.set.azimuth }} ({{ pred.set.direction }}) </td>
+<div id="passes">
+    <p class="f3">Passes for {{ location.lat }}, {{ location.lng }}</p>
+    <table class="tl pa1 w-100">
+        <tr class=" tc pa1 f3">
+            <th colspan="1">Total</th>
+            <th colspan="2">Rise</th>
+            <th colspan="4">Culminate</th>
+            <th colspan="2">Set</th>
         </tr>
+        <tr class="pa1 f4">
+            <th>Date</th>
+            <th>Length</th>
+            <th>Time</th>
+            <th>Azimuth</th>
+            <th>Time</th>
+            <th>Azimuth</th>
+            <th>Elevation</th>
+            <th>Distance</th>
+            <th>Time</th>
+            <th>Azimuth</th>
+        </tr>
+        {% for date, preds in predictions.items() %}
+            {% set date_loop = loop %}
+            {% for pred in preds %}
+            <tr class="pa1 {{ date_loop.cycle('light-silver', 'light-gray') }}">
+                {% if loop.first %}<td rowspan="{{ preds|length }}">{{ date }}</td>{% endif %}
+                <td>{{ pred.length }}</td>
+                <td>{{ pred.rise.time }}</td>
+                <td>{{ pred.rise.azimuth }} ({{ pred.rise.direction }})</td>
+                <td>{{ pred.culminate.time }}</td>
+                <td>{{ pred.culminate.azimuth }} ({{ pred.culminate.direction }})</td>
+                <td>{{ pred.culminate.degrees }}</td>
+                <td>{{ pred.culminate.distance }}</td>
+                <td>{{ pred.set.time }}</td>
+                <td>{{ pred.set.azimuth }} ({{ pred.set.direction }}) </td>
+            </tr>
+            {% endfor %}
         {% endfor %}
-    {% endfor %}
+    </table>
+</div>
 
-</table>
+<script>
+    var passes = new Vue({
+        el: "#passes",
+        delimiters: ["[[","]]"],
+        data: {
+            text: "hello",
+            predictions: {{ predictions_json|safe }}
+        }
+    });
+</script>
 {% endblock %}
-- 
cgit v1.3.1