forked from tilderadio/site
Add current time pointer in schedule
This commit is contained in:
parent
8916d836c5
commit
a731a47f1c
|
@ -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,20 @@
|
|||
.calendar tbody tr td.hour span {
|
||||
display: block;
|
||||
}
|
||||
#pointer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-top: 1px solid red;
|
||||
z-index: 1;
|
||||
}
|
||||
.pointer-label {
|
||||
color: red;
|
||||
}
|
||||
.show-title {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
@media (max-width: 60em) {
|
||||
.calendar-wrapper {
|
||||
display: block;
|
||||
|
|
|
@ -49,23 +49,40 @@ 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;
|
||||
}
|
||||
}
|
||||
echo "<td $props>";
|
||||
if ($matchedshow) {
|
||||
echo '<div class="show-title">'.$matchedshow['title'].'</div>';
|
||||
// if no match was found, leave an empty node
|
||||
if (! $match) {
|
||||
echo "<td></td>\n";
|
||||
}
|
||||
if (!$wrotepointer) {
|
||||
// If current time is in this range, draw pointer.
|
||||
$end = DateTimeImmutable::createFromMutable($merge)->add($halfhour);
|
||||
if ($now >= $merge && $now < $end) {
|
||||
// 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>
|
||||
|
|
|
@ -6,7 +6,7 @@ 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">—</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 +33,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) return;
|
||||
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 +69,39 @@ 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;
|
||||
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 = null;
|
||||
}
|
||||
}
|
||||
// Move pointer to different cell if changed cell.
|
||||
if (range !== prevRange) {
|
||||
range.cell.appendChild(pointer);
|
||||
}
|
||||
// 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…
Reference in New Issue