Add ongoing contest countdown timers.

server/vb/templates/components/ongoing_contest.dhtml

@@ -65,6 +65,7 @@
       font-weight: 600;
       line-height: 100%;
       letter-spacing: 4%;
+      min-width: 30%;
       padding: 0.25rem;
       text-transform: uppercase;
     }
@@ -92,5 +93,47 @@
       {% include "components/button.dhtml" with text="Visit event" href=contest.school.relative_url bg_color="black" color="white" %}
     </div>
   </div>
-  <div class="box">Ends in 04:12:45</div>
+  <div class="box" data-end-at="{{ contest.end_at|date:'c' }}">
+    <script>
+        (function(self) {
+            function countdown(self) {
+                // compute the deadline
+                const deadline = new Date(self.dataset.endAt);
+                const deadlineTime = deadline.getTime();
+
+                /** Update the countdown. */
+                function updateCountdown() {
+                    const now = new Date().getTime();
+                    const diff = deadlineTime - now;
+
+                    if (diff <= 0) {
+                        clearInterval(interval);
+                        self.innerText = "Just ended!";
+                        return;
+                    }
+
+                    const hours = Math.floor(diff / (1000 * 60 * 60));
+                    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+                    const seconds = Math.floor((diff % (1000 * 60)) / 1000);
+
+                    const h0digit = Math.floor(hours / 10);
+                    const h1digit = hours % 10;
+                    const m0digit = Math.floor(minutes / 10);
+                    const m1digit = minutes % 10;
+                    const s0digit = Math.floor(seconds / 10);
+                    const s1digit = seconds % 10;
+
+                    const endsIn = `Ends in ${h0digit}${h1digit}:${m0digit}${m1digit}:${s0digit}${s1digit}`;
+                    self.innerText = endsIn;
+                }
+
+                updateCountdown();
+                const interval = setInterval(updateCountdown, 1000);
+            }
+
+            onloadAdd(() => countdown(self));
+        })(me());
+    </script>
+    Ends in ...
+  </div>
 </div>

server/vb/views.py

@@ -23,8 +23,8 @@
 @require_GET
 def home(request: HttpRequest) -> HttpResponse:
     """Render the voterbowl homepage."""
-    ongoing_contests = list(Contest.objects.ongoing())
-    upcoming_contests = list(Contest.objects.upcoming())
+    ongoing_contests = list(Contest.objects.ongoing().order_by("end_at"))
+    upcoming_contests = list(Contest.objects.upcoming().order_by("start_at"))
     return render(
         request,
         "home.dhtml",