Highlight current talks on schedule

pinaxcon/templates/symposion/schedule/_grid.html

@@ -28,7 +28,7 @@
     <tr class="calendar-row">
       <th scope="row" class="time" data-time="{{ timetable.day.date|date:'c' }}T{{ row.time|date:'c' }}"><p>{{ row.time|date:"h:iA" }}</p></th>
       {% for slot in row.slots %}
-      <td class="slot slot-{{ slot.kind.label }}" colspan="{{ slot.colspan }}" rowspan="{{ slot.rowspan }}" data-startdatetime="{{ slot.start_datetime }}" data-enddatetime="{{ slot.end_datetime }}">
+      <td class="slot slot-{{ slot.kind.label }}" colspan="{{ slot.colspan }}" rowspan="{{ slot.rowspan }}" data-starttime="{{ slot.start_datetime|date:'c' }}" data-endtime="{{ slot.end_datetime|date:'c' }}">
         {% with slot.kind.label.lower as label %}
         {% if label == "talk" or label == "tutorial" %}
           {% if slot.content.unpublish and not request.user.is_staff %}

pinaxcon/templates/symposion/schedule/schedule_conference.html

@@ -46,7 +46,7 @@
             <span class="clearfix d-sm-block d-md-none"></span>
             <small class="text-muted">{{ timetable.day.date|date:"l" }}, {{ timetable.day.date }}</small>
           </h2>
-          <p class="timezone-info small">Conference times are in {{ settings.LCA_START|date:'T' }} (UTC{{ settings.LCA_START|date:'O' }}).</p>
+          <p class="timezone-info small">Conference times are in {{ settings.LCA_START|date:'T' }} (UTC{{ settings.LCA_START|date:'O' }}). Current talks will be highlighted.</p>
           <div class="table-responsive d-none d-md-block">
             {% include "symposion/schedule/_grid.html" %}
           </div>

pinaxcon/templates/symposion/schedule/schedule_detail.html

@@ -16,7 +16,7 @@
         <h2 class="my-4">
           {{ timetable.day.date|date:"l" }}, {{ timetable.day.date }}
         </h2>
-        <p class="timezone-info small">Conference times are in {{ settings.LCA_START|date:'T' }} (UTC{{ settings.LCA_START|date:'O' }}).</p>
+        <p class="timezone-info small">Conference times are in {{ settings.LCA_START|date:'T' }} (UTC{{ settings.LCA_START|date:'O' }}). Current talks will be highlighted.</p>
         <div class="table-responsive d-none d-md-block">
           {% include "symposion/schedule/_grid.html" %}
         </div>

pinaxcon/templates/symposion/schedule/schedule_edit.html

@@ -24,7 +24,7 @@
       <h2 class="my-4">
         {{ timetable.day.date|date:"l" }}, {{ timetable.day.date }}
       </h2>
-      <p class="timezone-info small">Conference times are in {{ settings.LCA_START|date:'T' }} (UTC{{ settings.LCA_START|date:'O' }}).</p>
+      <p class="timezone-info small">Conference times are in {{ settings.LCA_START|date:'T' }} (UTC{{ settings.LCA_START|date:'O' }}). Current talks will be highlighted.</p>
       <div class="table-responsive d-none d-md-block">
         {% include "symposion/schedule/_grid.html" with edit_schedule=True %}
       </div>

static/src/js/schedule.js

@@ -1,4 +1,6 @@
 $(function() {
+    var SLOT_REFRESH_INTERVAL = 60 * 1000;
+
     /* Schedule display localisation */
     var showCurrentTab = function() {
         var fragment = window.location.hash.toLowerCase().substring(1);
@@ -103,6 +105,25 @@ $(function() {
         }
     }
 
+    var highlightCurrentSlots = function() {
+        var now = luxon.DateTime.local();
+
+        var slots = $('td.slot');
+        for (var i = 0; i < slots.length; ++i) {
+            var slot = $(slots[i]);
+            var startTime = slot.data('starttime');
+            var endTime = slot.data('endtime');
+            var confStartTime = luxon.DateTime.fromISO(startTime, { zone: CONF_TZ });
+            var confEndTime = luxon.DateTime.fromISO(endTime, { zone: CONF_TZ });
+
+            if (confStartTime <= now && confEndTime > now) {
+                slot.addClass("slot-active");
+            } else {
+                slot.removeClass("slot-active");
+            }
+        }
+    }
+
     var embeddedView = function() {
         var urlParams = new URLSearchParams(window.location.search);
         if (urlParams.has('embed')) {
@@ -115,6 +136,8 @@ $(function() {
                 if (path.startsWith('/')) {
                     var separator = path.indexOf('?') === -1 ? '?' : '&';
                     anchor.attr('href', path + separator + 'embed')
+                } else if (path.startsWith('http')) {
+                    anchor.attr('target', '_blank');
                 }
             })
         }
@@ -144,4 +167,6 @@ $(function() {
     showCurrentTab();
     updateScheduleGrid();
     updatePresentationTimes();
+    highlightCurrentSlots();
+    var slotRefresh = setInterval(highlightCurrentSlots, SLOT_REFRESH_INTERVAL);
 });

static/src/scss/app.scss

@@ -84,6 +84,10 @@ h3, .h3 {
     border-bottom: 1px solid $noon-sea;
 }
 
+.slot-active {
+    background-color: $blaze;
+}
+
 /* END LCA BRAND */
 
 .messagelist {