From a731a47f1c8df49bd3b624ccac5aca8568bc8a3a Mon Sep 17 00:00:00 2001 From: "Charles E. Lehner" Date: Sun, 30 May 2021 00:14:46 -0400 Subject: [PATCH 1/3] Add current time pointer in schedule --- css/calendar.css | 15 +++++++++++ schedule/calendar.php | 29 +++++++++++++++----- schedule/index.php | 63 +++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 99 insertions(+), 8 deletions(-) diff --git a/css/calendar.css b/css/calendar.css index 4b2326f..8ef57ce 100644 --- a/css/calendar.css +++ b/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,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; diff --git a/schedule/calendar.php b/schedule/calendar.php index 10ccf57..a549aff 100644 --- a/schedule/calendar.php +++ b/schedule/calendar.php @@ -49,23 +49,40 @@ for ($i = 0; $i < 86400; $i += 1800) { ?> 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 "" . $show['title'] . "\n"; - $match = true; + $matchedshow = $show; break; } } - // if no match was found, leave an empty node - if (! $match) { - echo "\n"; + echo ""; + if ($matchedshow) { + echo '
'.$matchedshow['title'].'
'; + // if no match was found, leave an empty node } + 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 '
'; + } + $wrotepointer = true; + } + echo "\n"; } ?> diff --git a/schedule/index.php b/schedule/index.php index 78ac97f..a6fcd76 100644 --- a/schedule/index.php +++ b/schedule/index.php @@ -6,7 +6,7 @@ include 'schedule.php';

tilderadio.org

upcoming broadcasts

-

all times in UTC. current time is .

+

all times in UTC. current time is (—).

this schedule is also available in iCalendar format. point your calendar client at https://tilderadio.org/schedule/ics.php.

From 1e68d971c84c8e975d4d5424e518e01d507e7ce6 Mon Sep 17 00:00:00 2001 From: "Charles E. Lehner" Date: Mon, 7 Jun 2021 20:39:30 -0400 Subject: [PATCH 2/3] Highlight active half-hour cell --- css/calendar.css | 6 ++++++ schedule/calendar.php | 25 +++++++++++++++---------- schedule/index.php | 6 +++++- 3 files changed, 26 insertions(+), 11 deletions(-) diff --git a/css/calendar.css b/css/calendar.css index 8ef57ce..637dead 100644 --- a/css/calendar.css +++ b/css/calendar.css @@ -73,6 +73,9 @@ .calendar tbody tr td.hour span { display: block; } +.calendar tbody tr td.active { + border: 1px solid yellow; +} #pointer { position: absolute; left: 0; @@ -83,6 +86,9 @@ .pointer-label { color: red; } +.pointer-label-wrapper { + color: yellow; +} .show-title { position: relative; z-index: 2; diff --git a/schedule/calendar.php b/schedule/calendar.php index a549aff..bc90c08 100644 --- a/schedule/calendar.php +++ b/schedule/calendar.php @@ -66,21 +66,26 @@ for ($i = 0; $i < 86400; $i += 1800) { break; } } + $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 ""; if ($matchedshow) { echo '
'.$matchedshow['title'].'
'; // if no match was found, leave an empty node } - 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 '
'; - } - $wrotepointer = true; + 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 '
'; + $wrotepointer = true; } echo "\n"; } diff --git a/schedule/index.php b/schedule/index.php index a6fcd76..cd9d6b5 100644 --- a/schedule/index.php +++ b/schedule/index.php @@ -6,7 +6,8 @@ include 'schedule.php';

tilderadio.org

upcoming broadcasts

-

all times in UTC. current time is (—).

+

all times in UTC. current time is +(—).

this schedule is also available in iCalendar format. point your calendar client at https://tilderadio.org/schedule/ics.php.

Date: Mon, 7 Jun 2021 22:29:04 -0400 Subject: [PATCH 3/3] Misc fixes for time pointer --- schedule/index.php | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/schedule/index.php b/schedule/index.php index cd9d6b5..2fd3dac 100644 --- a/schedule/index.php +++ b/schedule/index.php @@ -54,7 +54,7 @@ let currentRangeI = 0; function getCurrentRange(now) { for (i = currentRangeI; i < ranges.length; i++) { const range = ranges[i]; - if (!range) return; + if (!range) continue; const rangeStart = range.startTime; if (rangeStart <= now && (rangeStart + halfHour) > now) { return range; @@ -81,7 +81,7 @@ if (!pointer) { pointer.id = 'pointer'; } -let prevRange; +let prevRange = getCurrentRange(new Date().getTime()); function updatePointer(d) { // Find current cell const range = getCurrentRange(d.getTime()); @@ -89,15 +89,17 @@ function updatePointer(d) { // 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) { - const prevCell = prevRange && prevRange.cell - if (prevCell) prevCell.classList.remove('active'); + 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;