louiswhit/familyHub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI Improvements and TV mode

Browse Source
This commit is contained in:
louiswhit
2026-03-30 17:15:46 -05:00
parent 7eb6160b5a
commit 735db3baf3
8 changed files with 398 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tabs/calendar.php
+60 -24
View File
@@ -53,6 +53,10 @@ $events = hubCalendarAgendaEvents($rangeStart, $rangeEnd, $people, $familySettin
[, $tzLocal] = familyHubCalendarContext($familySettings);
$todayYmd = familyHubTodayYmdInTz($tzLocal);
$twoWayMerge = !empty($familySettings['calendar_two_way_google']);
$isTvView = isset($_GET['view']) && (string) $_GET['view'] === 'tv';
$calendarBaseUrl = '?tab=calendar';
$calendarTvUrl = '?tab=calendar&view=tv';
$lastRefreshedStamp = gmdate('Y-m-d H:i') . ' UTC';
$eventsByDate = [];
foreach ($events as $ev) {
@@ -76,8 +80,31 @@ $iconByType = [
];
?>
<div id="calendar" class="tab-content">
<h2 class="mb-2">Calendar</h2>
<div id="calendar" class="tab-content<?= $isTvView ? ' calendar-tv-view' : '' ?>">
<div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-2">
<h2 class="mb-0">Calendar</h2>
<?php if ($isTvView): ?>
<a href="<?= htmlspecialchars($calendarBaseUrl, ENT_QUOTES, 'UTF-8') ?>" class="btn btn-outline-secondary btn-sm" title="Exit TV view">
<i class="fa fa-xmark me-1" aria-hidden="true"></i>
Exit TV view
</a>
<?php else: ?>
<a href="<?= htmlspecialchars($calendarTvUrl, ENT_QUOTES, 'UTF-8') ?>" class="btn btn-outline-secondary btn-sm" title="Open TV view dashboard">
<i class="fa fa-tv me-1" aria-hidden="true"></i>
Open TV view
</a>
<?php endif; ?>
</div>
<p class="text-muted small mb-3">
<?php if ($isTvView): ?>
TV view auto-refreshes every 10 minutes.
<?php else: ?>
Open TV view for a dedicated dashboard URL that refreshes every 10 minutes.
<?php endif; ?>
</p>
<?php if ($isTvView): ?>
<p class="small text-muted mb-3">Last refreshed: <strong><?= htmlspecialchars($lastRefreshedStamp, ENT_QUOTES, 'UTF-8') ?></strong></p>
<?php endif; ?>
<?php if ($twoWayMerge): ?>
<div class="alert alert-info mb-3" role="status">
@@ -85,8 +112,30 @@ $iconByType = [
</div>
<?php endif; ?>
<div class="row g-4">
<div class="col-12 <?= $embedUrl !== null ? 'col-xl-7' : '' ?>">
<div class="row g-4 calendar-tab-layout<?= $embedUrl !== null ? ' calendar-tab-layout-split' : '' ?>">
<div class="col-12 calendar-tab-google">
<h3 class="h5 mb-3">Google Calendar</h3>
<?php if ($embedUrl === null): ?>
<?php if (!$isTvView): ?>
<p class="text-muted">Connect a shared family calendar by setting <strong>GOOGLE_CALENDAR_EMBED_CODE</strong> (embed URL or full <code>&lt;iframe&gt;</code> from Google Calendar) or <strong>GOOGLE_CALENDAR_ID</strong> in <code>.env</code>. See <a href="https://calendar.google.com/">Google Calendar</a> → calendar menu → <strong>Settings and sharing</strong> → <strong>Integrate calendar</strong>.</p>
<?php endif; ?>
<?php else: ?>
<?php if ($fromIdOnly && !$isTvView): ?>
<p class="small text-muted mb-2">Showing calendar from <code>GOOGLE_CALENDAR_ID</code>. For more control (view, height), paste the embed URL or iframe into <code>GOOGLE_CALENDAR_EMBED_CODE</code> instead.</p>
<?php endif; ?>
<div class="calendar-embed rounded border overflow-hidden bg-white">
<iframe
class="w-100 border-0 d-block"
style="height: 70vh; min-height: 360px;"
src="<?= htmlspecialchars($embedUrl, ENT_QUOTES, 'UTF-8') ?>"
loading="lazy"
title="Family calendar"
allowfullscreen
></iframe>
</div>
<?php endif; ?>
</div>
<div class="col-12 calendar-tab-agenda">
<h3 class="h5 mb-3">Family Hub agenda</h3>
<p class="text-muted small mb-3">
<?= htmlspecialchars($rangeStart, ENT_QUOTES, 'UTF-8') ?> to <?= htmlspecialchars($rangeEnd, ENT_QUOTES, 'UTF-8') ?>
@@ -129,25 +178,12 @@ $iconByType = [
</div>
<?php endif; ?>
</div>
<div class="col-12 <?= $embedUrl !== null ? 'col-xl-5' : '' ?>">
<h3 class="h5 mb-3">Google Calendar</h3>
<?php if ($embedUrl === null): ?>
<p class="text-muted">Connect a shared family calendar by setting <strong>GOOGLE_CALENDAR_EMBED_CODE</strong> (embed URL or full <code>&lt;iframe&gt;</code> from Google Calendar) or <strong>GOOGLE_CALENDAR_ID</strong> in <code>.env</code>. See <a href="https://calendar.google.com/">Google Calendar</a> → calendar menu → <strong>Settings and sharing</strong> → <strong>Integrate calendar</strong>.</p>
<?php else: ?>
<?php if ($fromIdOnly): ?>
<p class="small text-muted mb-2">Showing calendar from <code>GOOGLE_CALENDAR_ID</code>. For more control (view, height), paste the embed URL or iframe into <code>GOOGLE_CALENDAR_EMBED_CODE</code> instead.</p>
<?php endif; ?>
<div class="calendar-embed rounded border overflow-hidden bg-white">
<iframe
class="w-100 border-0 d-block"
style="height: 70vh; min-height: 360px;"
src="<?= htmlspecialchars($embedUrl, ENT_QUOTES, 'UTF-8') ?>"
loading="lazy"
title="Family calendar"
allowfullscreen
></iframe>
</div>
<?php endif; ?>
</div>
</div>
</div>
<?php if ($isTvView): ?>
<script>
window.setTimeout(function () {
window.location.reload();
}, 10 * 60 * 1000);
</script>
<?php endif; ?>