Browse Source

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

Reviewed-on: #21
master
Ben Harris 2 weeks ago
parent
commit
c006a40edf
  1. 21
      css/calendar.css
  2. 34
      schedule/calendar.php
  3. 69
      schedule/index.php

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;

34
schedule/calendar.php

@ -49,23 +49,45 @@ 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>

69
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'; ?>
Loading…
Cancel
Save