iss/templates/passes.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

{% extends "base.html" %}

{% block extrahead %}
<script src="/static/js/vue.min.js"></script>
<script src="/static/js/core.js"></script>
{% endblock %}

{% block content %}
<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 %}
    </table>
</div>

<script>
    var passes = new Vue({
        el: "#passes",
        delimiters: ["[[","]]"],
        data: {
            text: "hello",
            predictions: {{ predictions_json|safe }}
        }
    });
</script>
{% endblock %}