Parse and process dates

1 files changed, 38 insertions, 5 deletions

diff --git a/iss/templates/passes.html b/iss/templates/passes.html
index a0ea45e..5e4ce06 100644
--- a/iss/templates/passes.html
+++ b/iss/templates/passes.html
@@ -17,6 +17,7 @@
         </tr>
         <tr class="pa1 f4">
             <th>Length</th>
+            <th>Date</th>
             <th>Time</th>
             <th>Azimuth</th>
             <th>Time</th>
@@ -26,27 +27,59 @@
             <th>Time</th>
             <th>Azimuth</th>
         </tr>
-        <tr class="pa1" v-for="pred in predictions">
+        <tr class="pa1" v-for="pred in localizedPredictions">
             <td>[[ pred.length ]]</td>
+            <td>[[ pred.date ]]</td>
             <td>[[ pred.rise.time ]]</td>
-            <td>[[ pred.rise.azimuth ]] ([[ pred.rise.direction ]])</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>[[ pred.culminate.azimuth ]] ([[ pred.culminate.direction ]])</td>
+            <td>
+                <span class="f4">[[ pred.culminate.direction ]]</span>
+                <span class="f6 mid-gray">[[ pred.culminate.azimuth ]]</span>
+            </td>
             <td>[[ pred.culminate.degrees ]]</td>
             <td>[[ pred.culminate.distance ]]</td>
             <td>[[ pred.set.time ]]</td>
-            <td>[[ pred.set.azimuth ]] ([[ pred.set.direction ]]) </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 }}
+            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>