Gogs
237 lines
8.3 KiB
PHP
237 lines
8.3 KiB
PHP
<?php
|
||
$tz = new DateTimeZone('Europe/Vienna');
|
||
|
||
$dateObj = new DateTime($selectedDate, $tz);
|
||
$prevDate = (clone $dateObj)->modify('-1 day')->format('Y-m-d');
|
||
$nextDate = (clone $dateObj)->modify('+1 day')->format('Y-m-d');
|
||
$today = (new DateTime('today', $tz))->format('Y-m-d');
|
||
|
||
$wochentage = [
|
||
'Monday' => 'Montag',
|
||
'Tuesday' => 'Dienstag',
|
||
'Wednesday' => 'Mittwoch',
|
||
'Thursday' => 'Donnerstag',
|
||
'Friday' => 'Freitag',
|
||
'Saturday' => 'Samstag',
|
||
'Sunday' => 'Sonntag',
|
||
];
|
||
|
||
$monate = [
|
||
1 => 'Jänner',
|
||
2 => 'Februar',
|
||
3 => 'März',
|
||
4 => 'April',
|
||
5 => 'Mai',
|
||
6 => 'Juni',
|
||
7 => 'Juli',
|
||
8 => 'August',
|
||
9 => 'September',
|
||
10 => 'Oktober',
|
||
11 => 'November',
|
||
12 => 'Dezember',
|
||
];
|
||
|
||
$anzeigeDatum =
|
||
$wochentage[$dateObj->format('l')] . ', ' .
|
||
$dateObj->format('j') . '. ' .
|
||
$monate[(int)$dateObj->format('n')] . ' ' .
|
||
$dateObj->format('Y');
|
||
|
||
$programmeIndex = [];
|
||
|
||
foreach ($dayProgrammes as $channel) {
|
||
foreach ($channel['programmes'] as $programme) {
|
||
$programmeIndex[$programme['id']] = [
|
||
'id' => $programme['id'],
|
||
'channel' => $channel['channel_name'],
|
||
'title' => $programme['title'],
|
||
'subtitle' => $programme['subtitle'],
|
||
'description' => $programme['description'],
|
||
'category' => $programme['category'],
|
||
'start' => date('H:i', $programme['start']),
|
||
'stop' => date('H:i', $programme['stop']),
|
||
];
|
||
}
|
||
}
|
||
?>
|
||
|
||
<section class="page-heading">
|
||
<h2>TV Guide</h2>
|
||
<p><?= htmlspecialchars($anzeigeDatum) ?></p>
|
||
</section>
|
||
|
||
<div class="day-toolbar">
|
||
<div class="day-nav">
|
||
<a class="button-link" href="/?view=day&date=<?= urlencode($prevDate) ?>&channel=<?= urlencode($selectedChannel ?? '') ?>">◀ Vorheriger Tag</a>
|
||
<a class="button-link" href="/?view=day&date=<?= urlencode($today) ?>&channel=<?= urlencode($selectedChannel ?? '') ?>">Heute</a>
|
||
<a class="button-link" href="/?view=day&date=<?= urlencode($nextDate) ?>&channel=<?= urlencode($selectedChannel ?? '') ?>">Nächster Tag ▶</a>
|
||
</div>
|
||
|
||
<form method="get" class="day-filter">
|
||
<input type="hidden" name="view" value="day">
|
||
<input type="date" name="date" value="<?= htmlspecialchars($selectedDate) ?>">
|
||
|
||
<select name="channel">
|
||
<option value="">Alle Sender</option>
|
||
<?php foreach ($channels as $id => $channel): ?>
|
||
<option value="<?= htmlspecialchars($id) ?>" <?= $selectedChannel === $id ? 'selected' : '' ?>>
|
||
<?= htmlspecialchars(($channel['number'] ?? '') . ' · ' . $channel['name']) ?>
|
||
</option>
|
||
<?php endforeach; ?>
|
||
</select>
|
||
|
||
<button type="submit">Anzeigen</button>
|
||
</form>
|
||
</div>
|
||
|
||
<div class="timeline-zoom">
|
||
<button type="button" data-zoom="1.2">Kompakt</button>
|
||
<button type="button" data-zoom="2" class="active">Normal</button>
|
||
<button type="button" data-zoom="3">Groß</button>
|
||
<button type="button" data-zoom="4">Extra</button>
|
||
</div>
|
||
|
||
<div class="guide-search">
|
||
<input
|
||
type="search"
|
||
id="guideSearch"
|
||
placeholder="Sendung suchen …"
|
||
autocomplete="off">
|
||
<div class="guide-search-results" id="guideSearchResults" hidden></div>
|
||
</div>
|
||
|
||
<?php if (!$dayProgrammes): ?>
|
||
<div class="empty">Für diesen Tag wurden keine Sendungen gefunden.</div>
|
||
<?php endif; ?>
|
||
|
||
<?php if ($dayProgrammes): ?>
|
||
<div class="timeline-wrap">
|
||
<div class="timeline">
|
||
<div class="timeline-header">
|
||
<div class="timeline-channel-head">Sender</div>
|
||
|
||
<div class="timeline-hours">
|
||
<?php for ($hour = 0; $hour <= 24; $hour++): ?>
|
||
<div class="timeline-hour" style="left: calc(<?= $hour * 60 ?> * var(--minute-width));">
|
||
<?= str_pad((string)$hour, 2, '0', STR_PAD_LEFT) ?>:00
|
||
</div>
|
||
<?php endfor; ?>
|
||
</div>
|
||
</div>
|
||
|
||
<?php foreach ($dayProgrammes as $channel): ?>
|
||
<div class="timeline-row">
|
||
|
||
<div class="timeline-channel">
|
||
<?php if (!empty($channel['channel_icon'])): ?>
|
||
<img
|
||
class="channel-logo"
|
||
src="<?= htmlspecialchars($channel['channel_icon']) ?>"
|
||
alt="<?= htmlspecialchars($channel['channel_name']) ?>">
|
||
<?php else: ?>
|
||
<span class="channel-number"><?= (int)$channel['channel_number'] ?></span>
|
||
<?php endif; ?>
|
||
|
||
<span class="timeline-channel-name"><?= htmlspecialchars($channel['channel_name']) ?></span>
|
||
|
||
<?php if ($channel['favorite']): ?>
|
||
<span class="favorite-star">⭐</span>
|
||
<?php endif; ?>
|
||
</div>
|
||
|
||
<div class="timeline-programmes">
|
||
<?php if ($isToday): ?>
|
||
<div
|
||
class="timeline-now-line"
|
||
style="left: calc(<?= (int)$nowMinute ?> * var(--minute-width));">
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<?php foreach ($channel['programmes'] as $programme): ?>
|
||
<div
|
||
class="timeline-programme <?= $programme['is_current'] ? 'is-current' : '' ?> <?= $programme['is_past'] ? 'is-past' : '' ?>"
|
||
data-programme-id="<?= htmlspecialchars($programme['id']) ?>"
|
||
style="
|
||
--start: <?= (int)$programme['start_minute'] ?>;
|
||
--duration: <?= (int)$programme['duration_minutes'] ?>;
|
||
"
|
||
title="<?= htmlspecialchars(date('H:i', $programme['start']) . ' - ' . date('H:i', $programme['stop']) . ' · ' . $programme['title']) ?>"
|
||
>
|
||
<strong><?= htmlspecialchars($programme['title']) ?></strong>
|
||
<span><?= date('H:i', $programme['start']) ?> - <?= date('H:i', $programme['stop']) ?></span>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<div class="day-list">
|
||
<?php foreach ($dayProgrammes as $channel): ?>
|
||
<section class="day-channel">
|
||
<div class="day-channel-header">
|
||
<div>
|
||
<span class="channel-number"><?= (int)$channel['channel_number'] ?></span>
|
||
<?php if (!empty($channel['channel_icon'])): ?>
|
||
<img
|
||
class="channel-logo"
|
||
src="<?= htmlspecialchars($channel['channel_icon']) ?>"
|
||
alt="<?= htmlspecialchars($channel['channel_name']) ?>">
|
||
<?php endif; ?>
|
||
|
||
<strong><?= htmlspecialchars($channel['channel_name']) ?></strong>
|
||
<?php if ($channel['favorite']): ?>
|
||
<span class="favorite-star">⭐</span>
|
||
<?php endif; ?>
|
||
</div>
|
||
</div>
|
||
|
||
<?php foreach ($channel['programmes'] as $programme): ?>
|
||
<article class="day-programme <?= $programme['is_current'] ? 'is-current' : '' ?> <?= $programme['is_past'] ? 'is-past' : '' ?>">
|
||
<div class="day-time">
|
||
<span><?= date('H:i', $programme['start']) ?></span>
|
||
<span><?= date('H:i', $programme['stop']) ?></span>
|
||
</div>
|
||
|
||
<div class="day-programme-body">
|
||
<h3><?= htmlspecialchars($programme['title']) ?></h3>
|
||
|
||
<?php if ($programme['subtitle']): ?>
|
||
<div class="now-subtitle"><?= htmlspecialchars($programme['subtitle']) ?></div>
|
||
<?php endif; ?>
|
||
|
||
<?php if ($programme['category']): ?>
|
||
<span class="category"><?= htmlspecialchars($programme['category']) ?></span>
|
||
<?php endif; ?>
|
||
|
||
<?php if ($programme['description']): ?>
|
||
<p><?= htmlspecialchars($programme['description']) ?></p>
|
||
<?php endif; ?>
|
||
</div>
|
||
</article>
|
||
<?php endforeach; ?>
|
||
</section>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
<script>
|
||
window.TVGUIDE_PROGRAMMES = <?= json_encode(
|
||
$programmeIndex,
|
||
JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES
|
||
) ?>;
|
||
</script>
|
||
<div class="programme-modal" id="programmeModal" hidden>
|
||
<div class="programme-modal-backdrop" data-modal-close></div>
|
||
|
||
<div class="programme-modal-card">
|
||
<button class="programme-modal-close" type="button" data-modal-close>×</button>
|
||
|
||
<div class="programme-modal-time" id="modalTime"></div>
|
||
<h2 id="modalTitle"></h2>
|
||
<div class="programme-modal-subtitle" id="modalSubtitle"></div>
|
||
<div class="programme-modal-category" id="modalCategory"></div>
|
||
<p id="modalDescription"></p>
|
||
</div>
|
||
</div>
|