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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
{% extends "base.html" %}
{% block extrahead %}
<script src="/static/js/vue.min.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>Length</th>
<th>Date</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>
<tr class="pa1" v-for="pred in localizedPredictions">
<td class="f5">[[ pred.length_mins ]]</td>
<td>[[ pred.date ]]</td>
<td>[[ pred.rise.time ]]</td>
<td>
<span class="f4">[[ pred.rise.direction ]]</span>
<span class="f6 mid-gray">[[ pred.rise.azimuth ]]</span>
</td>
<td>[[ pred.culminate.time ]]</td>
<td>
<span class="f4">[[ pred.culminate.direction ]]</span>
<span class="f6 mid-gray">[[ pred.culminate.azimuth ]]</span>
</td>
<td class="f4">[[ pred.culminate.degrees ]]</td>
<td>[[ pred.culminate.distance ]]</td>
<td>[[ pred.set.time ]]</td>
<td>
<span class="f4">[[ pred.set.direction ]]</span>
<span class="f6 mid-gray">[[ pred.set.azimuth ]]</span>
</td>
</tr>
</table>
</div>
<script>
var groupBy = function(xs, key) {
return xs.reduce(function(rv, x) {
(rv[x[key]] = rv[x[key]] || []).push(x);
return rv;
}, {});
};
var passes = new Vue({
el: "#passes",
delimiters: ["[[","]]"],
data: {
text: "hello",
predictions: {{ predictions_json|safe }},
hour12: false
},
computed: {
localizedPredictions: function() {
var hour12 = this.hour12;
var preds = this.predictions.map(function(p) {
p.date = new Date(p.rise.time).toLocaleDateString();
p.rise.time = new Date(p.rise.time).toLocaleTimeString([], { hour12 });
p.culminate.time = new Date(p.culminate.time).toLocaleTimeString([], { hour12 });
p.set.time = new Date(p.set.time).toLocaleTimeString([], { hour12 });
return p;
});
return preds;
}
}
});
</script>
{% endblock %}
|
