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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
{% 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.dlat }}, {{ location.dlng }}</p>
<p class="f4">Times localized for <span class="light-gray">[[ tz.name ]]</span> (UTC[[ tz.offset ]])</p>
<div>
<input type="checkbox" id="degrees" v-model="display.degrees">
<label for="degrees">Azimuth Degrees</label>
<input type="checkbox" id="hour12" v-model="display.hour12">
<label for="hour12">24-hour Times</label>
</div>
<table class="tl pa1 w-100">
<tr class="pa1 f3">
<th colspan="1">Total</th>
<th colspan="2">Rise</th>
<th colspan="5">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, index) in localizedPredictions" v-bind:class="[ index % 2 == 0 ? 'light-silver' : 'light-gray' ]">
<td class="f5">[[ pred.length_mins ]]</td>
<td>[[ pred.date ]]</td>
<td>[[ pred.rise.time ]]</td>
<td>
<span class="f4" v-if="!display.degrees">[[ pred.rise.direction ]]</span>
<span class="f4" v-if="display.degrees">[[ pred.rise.azimuth ]]<span class="mid-gray">°</span></span>
</td>
<td>[[ pred.culminate.time ]]</td>
<td>
<span class="f4" v-if="!display.degrees">[[ pred.culminate.direction ]]</span>
<span class="f4" v-if="display.degrees">[[ pred.culminate.azimuth ]]<span class="mid-gray">°</span></span>
</td>
<td class="f4">[[ pred.culminate.degrees ]]<span class="mid-gray">°</span></td>
<td>[[ pred.culminate.distance ]]</td>
<td>[[ pred.set.time ]]</td>
<td>
<span class="f4" v-if="!display.degrees">[[ pred.set.direction ]]</span>
<span class="f4" v-if="display.degrees">[[ pred.set.azimuth ]]<span class="mid-gray">°</span></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: {
predictions: {{ predictions_json|safe }},
display: {
hour12: true,
degrees: true
},
},
computed: {
tz: function() {
var offset = new Date().getTimezoneOffset() / -60;
return {
"name": Intl.DateTimeFormat().resolvedOptions().timeZone,
"offset": offset >= 0 ? "+" + offset : offset
}
},
localizedPredictions: function() {
var hour12 = !this.display.hour12;
var preds = JSON.parse(JSON.stringify(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 %}
|
