Merge pull request 'Add current time pointer in schedule' (#21) from cel/tilderadio-site:pointer into master

Reviewed-on: #21

css/calendar.css

@@ -53,6 +53,7 @@
   vertical-align: middle;
   border-left: 1px solid #626E7E;
   position: relative;
+  /* Height here should be synced with $cell_height in ../schedule/calendar.php */
   height: 32px;
   cursor: pointer;
 	overflow: hidden;
@@ -72,6 +73,26 @@
 .calendar tbody tr td.hour span {
   display: block;
 }
+.calendar tbody tr td.active {
+  border: 1px solid yellow;
+}
+#pointer {
+  position: absolute;
+  left: 0;
+  right: 0;
+  border-top: 1px solid red;
+  z-index: 1;
+}
+.pointer-label {
+  color: red;
+}
+.pointer-label-wrapper {
+  color: yellow;
+}
+.show-title {
+  position: relative;
+  z-index: 2;
+}
 @media (max-width: 60em) {
   .calendar-wrapper {
     display: block;

schedule/calendar.php

@@ -49,24 +49,46 @@ for ($i = 0; $i < 86400; $i += 1800) {
 ?>
 
 <?php
+  $now = new DateTime();
+  $halfhour = new DateInterval('PT30M');
+  $wrotepointer = false;
   // Loop over each day of the week for this 30 min span
   foreach($daterange as $date){
     // merge date (changing days) and time (incrementing by 30 min) to draw calendar by row.
     $merge = new DateTime($date->format('Y-m-d') .' ' .date('H:i:s', $time + $i));
+    // Set id for this time span, for referencing in JS.
+    $props = 'id="show-'.$merge->getTimestamp().'"';
     // We'll now use $merge to see if any shows are airing at this time
-    $match = false;
+    $matchedshow = null;
     foreach ($schedule as $show) {
       if (check_in_range($show['start'], $show['end'], $merge->format('Y-m-d H:i:s'))) {
-        echo "<td>" . $show['title'] . "</td>\n";
-        $match = true;
+        $matchedshow = $show;
         break;
       }
     }
-    // if no match was found, leave an empty node
-    if (! $match) {
-      echo "<td></td>\n";
+    $active = false;
+    if (!$wrotepointer) {
+      // If current time is in this range, draw pointer.
+      $end = DateTimeImmutable::createFromMutable($merge)->add($halfhour);
+      if ($now >= $merge && $now < $end) {
+        $active = true;
+        $props .= ' class="active"';
       }
     }
+    echo "<td $props>";
+    if ($matchedshow) {
+        echo '<div class="show-title">'.$matchedshow['title'].'</div>';
+        // if no match was found, leave an empty node
+    }
+    if ($active) {
+      // Cell height here should be synced with height of '.calendar tbody tr td' in ../css/calendar.css
+      $height = 32;
+      $top = round(date_diff($merge, $now)->format('%i') / 30 * ($height-1));
+      echo '<div id="pointer" style="top:'.$top.'px"></div>';
+      $wrotepointer = true;
+    }
+    echo "</td>\n";
+  }
 ?>
     </tr>
 <?php

schedule/index.php

@@ -6,7 +6,8 @@ include 'schedule.php';
 
 <h1><a href="https://tilderadio.org"><img style="width:72px;margin-top:-30px;margin-right:5px;" src="../logos/tilderadio.png">tilderadio.org</a></h1>
 <h4>upcoming broadcasts</h4>
-<p>all times in UTC. current time is <span id="utcdate"><?=formatdate("now")?></span>.</p>
+<p>all times in UTC. current time is <span id="utcdate"><?=formatdate("now")?></span>
+<span class="pointer-label-wrapper">(</span><span class="pointer-label">&mdash;</span><span class="pointer-label-wrapper">)</span>.</p>
 <p>this schedule is also available in <a href="https://icalendar.org/validator.html?url=https://tilderadio.org/schedule/ics.php">iCalendar format</a>. point your calendar client at <code>https://tilderadio.org/schedule/ics.php</code>.</p>
 
 <?php
@@ -33,7 +34,35 @@ include 'calendar.php';
 </table>
 
 <script>
-// Update the timer as time passes.
+let halfHour = 1800000;
+// Gather schedule table cells by timestamp
+const cells = document.querySelectorAll('.calendar tbody td');
+let ranges = [];
+for (const cell of Array.from(cells)) {
+    const m = /^show-(\d*)$/.exec(cell.id);
+    if (!m) continue;
+    ranges.push({
+        startTime: m[1]*1000,
+        cell,
+    });
+}
+ranges.sort((a, b) => {
+    return a.startTime - b.startTime;
+});
+let currentRangeI = 0;
+
+function getCurrentRange(now) {
+    for (i = currentRangeI; i < ranges.length; i++) {
+        const range = ranges[i];
+        if (!range) continue;
+        const rangeStart = range.startTime;
+        if (rangeStart <= now && (rangeStart + halfHour) > now) {
+            return range;
+        }
+    }
+}
+
+// Update the timer and pointer as time passes.
 // Because PHP gives the time on page load, people who disable Javascript won't be missing out on much.
 let months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
 let daysOfWeek = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
@@ -41,8 +70,44 @@ function update_date() {
     var d = new Date();
     document.getElementById("utcdate").innerText = daysOfWeek[d.getUTCDay()]+" "+months[d.getUTCMonth()]+" "+d.getUTCDate().toString()+" "+d.getUTCHours().toString().padStart(2,'0')+":"+d.getUTCMinutes().toString().padStart(2,'0');
     setTimeout(update_date,15000);
+    updatePointer(d);
 }
 setTimeout(update_date,15000);
+
+let pointer = document.getElementById("pointer");
+// Create pointer in case it wasn't added in the page generation.
+if (!pointer) {
+    pointer = document.createElement('div');
+    pointer.id = 'pointer';
+}
+
+let prevRange = getCurrentRange(new Date().getTime());
+function updatePointer(d) {
+    // Find current cell
+    const range = getCurrentRange(d.getTime());
+    if (!range) {
+        // Done with schedule. Remove pointer. Need to refresh.
+        if (prevRange) {
+            prevRange.cell.removeChild(pointer);
+            prevRange.cell.classList.remove('active');
+            prevRange = null;
+        }
+        return;
+    }
+    // Move pointer to different cell if changed cell.
+    if (range !== prevRange) {
+        if (prevRange) prevRange.cell.classList.remove('active');
+        range.cell.classList.add('active');
+        range.cell.appendChild(pointer);
+        prevRange = range;
+    }
+    // Move pointer based on time in current cell.
+    const progress = (d.getTime() - range.startTime) / halfHour;
+    pointer.style.top = (progress * (range.cell.offsetHeight-1)).toFixed(0) + 'px';
+}
+// Update pointer immediately
+updatePointer(new Date());
+
 </script>
 
 <?php include '../footer.php'; ?>