eff62b0fd9
- TablosDashboard: add pageTitle, breadcrumb params; pass through to AppLayout - TabloDetailPage: add pageTitle, breadcrumb params; pass through to AppLayout - TabloNotFoundPage: pass hardcoded 'Not found' values to AppLayout - PlanningPage: add pageTitle, breadcrumb params; pass through to AppLayout - AccountProvidersPage: add pageTitle, breadcrumb params; pass through to AppLayout
77 lines
3 KiB
Text
77 lines
3 KiB
Text
package templates
|
|
|
|
import (
|
|
"backend/internal/auth"
|
|
"backend/internal/db/sqlc"
|
|
)
|
|
|
|
templ PlanningPage(user *auth.User, csrfToken string, activePath string, tablos []sqlc.Tablo, agenda PlanningAgenda, pageTitle string, breadcrumb []BreadcrumbItem) {
|
|
@AppLayout("Planning - Xtablo", user, csrfToken, activePath, tablos, pageTitle, breadcrumb, nil) {
|
|
<section class="overview-section">
|
|
<div class="overview-section-heading">
|
|
<div>
|
|
<h1>Planning</h1>
|
|
<p class="mt-1 text-sm text-slate-600">{ agenda.RangeLabel }</p>
|
|
</div>
|
|
<nav class="flex flex-wrap items-center gap-2" aria-label="Planning navigation">
|
|
<a href={ templ.SafeURL(agenda.PrevURL) } class="ui-button ui-button-soft ui-button-neutral ui-button-md">Previous 14 days</a>
|
|
<a
|
|
href={ templ.SafeURL(agenda.TodayURL) }
|
|
if agenda.ShowingToday {
|
|
class="ui-button ui-button-soft ui-button-neutral ui-button-md"
|
|
} else {
|
|
class="ui-button ui-button-solid ui-button-default ui-button-md"
|
|
}
|
|
>Today</a>
|
|
<a href={ templ.SafeURL(agenda.NextURL) } class="ui-button ui-button-soft ui-button-neutral ui-button-md">Next 14 days</a>
|
|
</nav>
|
|
</div>
|
|
if len(agenda.Events) == 0 {
|
|
<div class="ui-card ui-card-body py-12 text-center">
|
|
<h2 class="text-xl font-semibold leading-snug text-slate-800">No events in this range</h2>
|
|
<p class="mt-2 text-base text-slate-600">Use the navigation controls to browse another 14-day window.</p>
|
|
</div>
|
|
} else {
|
|
<ul class="border-y border-slate-200" aria-label="Planning agenda">
|
|
for i, event := range agenda.Events {
|
|
if PlanningShowDaySeparator(agenda.Events, i) {
|
|
@PlanningDaySeparator(event.DateLabel)
|
|
}
|
|
@PlanningEventListItem(event)
|
|
}
|
|
</ul>
|
|
}
|
|
</section>
|
|
}
|
|
}
|
|
|
|
templ PlanningDaySeparator(label string) {
|
|
<li class="bg-slate-50 px-4 py-2 text-sm font-semibold text-slate-600 border-t border-slate-200" data-day-separator="true">
|
|
{ label }
|
|
</li>
|
|
}
|
|
|
|
templ PlanningEventListItem(event PlanningEventRow) {
|
|
<li class="bg-white px-4 py-3 hover:bg-slate-50 border-t border-slate-200">
|
|
<a href={ templ.SafeURL(event.URL) } class="block focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2" aria-label={ "Open event in tablo: " + event.Title }>
|
|
<div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
|
|
<div class="flex min-w-0 flex-col gap-1 sm:flex-row sm:items-center sm:gap-3">
|
|
<span class="text-sm font-medium text-slate-700">{ event.TimeRange }</span>
|
|
<span class="text-base font-semibold text-slate-900">{ event.Title }</span>
|
|
</div>
|
|
<div class="flex flex-wrap items-center gap-2 text-sm text-slate-600">
|
|
<span class="inline-flex items-center gap-1">
|
|
if event.HasColor {
|
|
<span class="inline-block h-2.5 w-2.5 rounded-full" style={ "background-color: " + event.TabloColor }></span>
|
|
}
|
|
<span>{ event.TabloTitle }</span>
|
|
</span>
|
|
if event.HasLocation {
|
|
<span aria-hidden="true">·</span>
|
|
<span>{ event.Location }</span>
|
|
}
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
}
|