Files
oslstats/internal/view/seasonsview/season_league_page.templ
2026-02-12 21:10:49 +11:00

235 lines
8.0 KiB
Plaintext

package seasonsview
import "git.haelnorr.com/h/oslstats/internal/db"
import "git.haelnorr.com/h/oslstats/internal/view/baseview"
import "git.haelnorr.com/h/oslstats/internal/permissions"
import "git.haelnorr.com/h/oslstats/internal/contexts"
import "fmt"
templ SeasonLeaguePage(season *db.Season, league *db.League, teams []*db.Team, allTeams []*db.Team) {
@baseview.Layout(fmt.Sprintf("%s - %s", season.Name, league.Name)) {
<div class="max-w-screen-2xl mx-auto px-4 py-8">
@SeasonLeagueDetails(season, league, teams, allTeams)
</div>
}
}
templ SeasonLeagueDetails(season *db.Season, league *db.League, teams []*db.Team, allTeams []*db.Team) {
{{
permCache := contexts.Permissions(ctx)
canAddTeam := permCache.HasPermission(permissions.TeamsAddToLeague)
}}
<div class="bg-mantle border border-surface1 rounded-lg overflow-hidden" x-data="{ showAddTeamModal: false, selectedTeamId: '' }">
<!-- Header Section -->
<div class="bg-surface0 border-b border-surface1 px-6 py-8">
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-4">
<div>
<h1 class="text-4xl font-bold text-text mb-2">{ season.Name } - { league.Name }</h1>
<div class="flex items-center gap-2 flex-wrap">
<span class="inline-block bg-surface1 px-3 py-1 rounded text-sm text-subtext0 font-mono">
{ season.ShortName }
</span>
<span class="inline-block bg-blue px-3 py-1 rounded-full text-sm font-semibold text-mantle">
{ league.ShortName }
</span>
@SlapVersionBadge(season.SlapVersion)
</div>
</div>
<div class="flex gap-2">
<a
href={ templ.SafeURL("/seasons/" + season.ShortName) }
class="rounded-lg px-4 py-2 hover:cursor-pointer text-center
bg-surface1 hover:bg-surface2 text-text transition"
>
Back to Season
</a>
</div>
</div>
<!-- Season Dates -->
<div class="mt-4 pt-4 border-t border-surface1">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Regular Season -->
<div class="bg-mantle border border-surface1 rounded-lg p-4">
<h3 class="text-sm font-semibold text-text mb-3 flex items-center justify-center gap-2">
<span class="text-blue">●</span>
Regular Season
</h3>
<div class="grid grid-cols-2 gap-4">
<div class="text-center">
<div class="text-xs text-subtext0 uppercase mb-1">Start</div>
<div class="text-sm text-text font-medium">{ formatDateLong(season.StartDate) }</div>
</div>
<div class="text-center">
<div class="text-xs text-subtext0 uppercase mb-1">Finish</div>
if !season.EndDate.IsZero() {
<div class="text-sm text-text font-medium">{ formatDateLong(season.EndDate.Time) }</div>
} else {
<div class="text-sm text-subtext1 italic">Not set</div>
}
</div>
</div>
</div>
<!-- Finals -->
<div class="bg-mantle border border-surface1 rounded-lg p-4">
<h3 class="text-sm font-semibold text-text mb-3 flex items-center justify-center gap-2">
<span class="text-yellow">★</span>
Finals
</h3>
<div class="grid grid-cols-2 gap-4">
<div class="text-center">
<div class="text-xs text-subtext0 uppercase mb-1">Start</div>
if !season.FinalsStartDate.IsZero() {
<div class="text-sm text-text font-medium">{ formatDateLong(season.FinalsStartDate.Time) }</div>
} else {
<div class="text-sm text-subtext1 italic">Not set</div>
}
</div>
<div class="text-center">
<div class="text-xs text-subtext0 uppercase mb-1">Finish</div>
if !season.FinalsEndDate.IsZero() {
<div class="text-sm text-text font-medium">{ formatDateLong(season.FinalsEndDate.Time) }</div>
} else {
<div class="text-sm text-subtext1 italic">Not set</div>
}
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Teams Section -->
<div class="p-6">
<div class="flex justify-between items-center mb-4">
<h2 class="text-2xl font-bold text-text">Teams ({ fmt.Sprint(len(teams)) })</h2>
if canAddTeam {
<button
@click="showAddTeamModal = true"
class="rounded-lg px-4 py-2 hover:cursor-pointer text-center text-sm
bg-green hover:bg-green/75 text-mantle transition"
>
Add Team
</button>
}
</div>
if len(teams) == 0 {
<div class="bg-surface0 border border-surface1 rounded-lg p-8 text-center">
<p class="text-subtext0 text-lg">No teams in this league yet.</p>
if canAddTeam {
<p class="text-subtext1 text-sm mt-2">Click "Add Team" to get started.</p>
}
</div>
} else {
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
for _, team := range teams {
<div class="bg-surface0 border border-surface1 rounded-lg p-6 hover:bg-surface1 transition-colors">
<div class="flex justify-between items-start mb-3">
<h3 class="text-xl font-bold text-text">{ team.Name }</h3>
if team.Color != "" {
<div
class="w-6 h-6 rounded-full border-2 border-surface1"
style={ "background-color: " + templ.SafeCSS(team.Color) }
></div>
}
</div>
<div class="flex items-center gap-2 text-sm flex-wrap">
<span class="px-2 py-1 bg-mantle rounded text-subtext0 font-mono">
{ team.ShortName }
</span>
<span class="px-2 py-1 bg-mantle rounded text-subtext0 font-mono">
{ team.AltShortName }
</span>
</div>
</div>
}
</div>
}
</div>
if canAddTeam {
@AddTeamModal(season, league, teams, allTeams)
}
</div>
}
templ AddTeamModal(season *db.Season, league *db.League, existingTeams []*db.Team, allTeams []*db.Team) {
{{
// Filter out teams already in this league
existingTeamIDs := make(map[int]bool)
for _, t := range existingTeams {
existingTeamIDs[t.ID] = true
}
availableTeams := []*db.Team{}
for _, t := range allTeams {
if !existingTeamIDs[t.ID] {
availableTeams = append(availableTeams, t)
}
}
}}
<div
x-show="showAddTeamModal"
@keydown.escape.window="showAddTeamModal = false"
class="fixed inset-0 z-50 overflow-y-auto"
style="display: none;"
>
<!-- Backdrop -->
<div
class="fixed inset-0 bg-crust/80 transition-opacity"
@click="showAddTeamModal = false"
></div>
<!-- Modal -->
<div class="flex min-h-full items-center justify-center p-4">
<div
class="relative bg-mantle border-2 border-surface1 rounded-xl shadow-xl max-w-md w-full p-6"
@click.stop
>
<h3 class="text-2xl font-bold text-text mb-4">Add Team to League</h3>
<form
hx-post={ fmt.Sprintf("/seasons/%s/leagues/%s/teams/add", season.ShortName, league.ShortName) }
hx-swap="none"
>
if len(availableTeams) == 0 {
<p class="text-subtext0 mb-4">All teams are already in this league.</p>
} else {
<div class="mb-4">
<label for="team_id" class="block text-sm font-medium mb-2">Select Team</label>
<select
id="team_id"
name="team_id"
x-model="selectedTeamId"
required
class="w-full py-3 px-4 rounded-lg text-sm bg-base border-2 border-overlay0
focus:border-blue outline-none"
>
<option value="">Choose a team...</option>
for _, team := range availableTeams {
<option value={ fmt.Sprint(team.ID) }>
{ team.Name } ({ team.ShortName })
</option>
}
</select>
</div>
}
<div class="flex gap-3 justify-end">
<button
type="button"
@click="showAddTeamModal = false"
class="px-4 py-2 rounded-lg bg-surface0 hover:bg-surface1 text-text transition"
>
Cancel
</button>
if len(availableTeams) > 0 {
<button
type="submit"
:disabled="!selectedTeamId"
class="px-4 py-2 rounded-lg bg-green hover:bg-green/75 text-mantle transition
disabled:bg-green/40 disabled:cursor-not-allowed"
>
Add Team
</button>
}
</div>
</form>
</div>
</div>
</div>
}