diff options
| -rw-r--r-- | iss/server.py | 3 | ||||
| -rw-r--r-- | 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 %} |