updated season league view page
This commit is contained in:
@@ -16,7 +16,7 @@ templ DashboardLayout(activeSection string) {
|
||||
<!-- Single cohesive panel with tabs and content -->
|
||||
<div class="border border-surface1 rounded-lg overflow-hidden">
|
||||
<!-- Tab Navigation -->
|
||||
<nav class="bg-surface0 border-b border-surface1">
|
||||
<nav class="bg-surface0 border-b border-surface1" data-tab-nav="admin-content">
|
||||
<ul class="flex flex-wrap">
|
||||
@navItem("users", "Users", activeSection)
|
||||
@navItem("roles", "Roles", activeSection)
|
||||
@@ -30,6 +30,7 @@ templ DashboardLayout(activeSection string) {
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/static/js/tabs.js" defer></script>
|
||||
<script src="/static/js/admin.js" defer></script>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -66,7 +66,7 @@ templ LeaguesSection(season *db.Season, allLeagues []*db.League) {
|
||||
for _, league := range availableLeagues {
|
||||
<button
|
||||
type="button"
|
||||
hx-post={ "/seasons/" + season.ShortName + "/leagues/add/" + league.ShortName }
|
||||
hx-post={ "/seasons/" + season.ShortName + "/add-league/" + league.ShortName }
|
||||
hx-target="#leagues-section"
|
||||
hx-swap="outerHTML"
|
||||
class="flex items-center gap-2 bg-surface1 hover:bg-surface2 border border-overlay0 rounded-lg px-3 py-2 transition hover:cursor-pointer"
|
||||
|
||||
15
internal/view/seasonsview/season_league_finals.templ
Normal file
15
internal/view/seasonsview/season_league_finals.templ
Normal file
@@ -0,0 +1,15 @@
|
||||
package seasonsview
|
||||
|
||||
import "git.haelnorr.com/h/oslstats/internal/db"
|
||||
|
||||
templ SeasonLeagueFinalsPage(season *db.Season, league *db.League) {
|
||||
@SeasonLeagueLayout("finals", season, league) {
|
||||
@SeasonLeagueFinals()
|
||||
}
|
||||
}
|
||||
|
||||
templ SeasonLeagueFinals() {
|
||||
<div class="bg-surface0 border border-surface1 rounded-lg p-8 text-center">
|
||||
<p class="text-subtext0 text-lg">Coming Soon...</p>
|
||||
</div>
|
||||
}
|
||||
15
internal/view/seasonsview/season_league_fixtures.templ
Normal file
15
internal/view/seasonsview/season_league_fixtures.templ
Normal file
@@ -0,0 +1,15 @@
|
||||
package seasonsview
|
||||
|
||||
import "git.haelnorr.com/h/oslstats/internal/db"
|
||||
|
||||
templ SeasonLeagueFixturesPage(season *db.Season, league *db.League) {
|
||||
@SeasonLeagueLayout("fixtures", season, league) {
|
||||
@SeasonLeagueFixtures()
|
||||
}
|
||||
}
|
||||
|
||||
templ SeasonLeagueFixtures() {
|
||||
<div class="bg-surface0 border border-surface1 rounded-lg p-8 text-center">
|
||||
<p class="text-subtext0 text-lg">Coming Soon...</p>
|
||||
</div>
|
||||
}
|
||||
129
internal/view/seasonsview/season_league_layout.templ
Normal file
129
internal/view/seasonsview/season_league_layout.templ
Normal file
@@ -0,0 +1,129 @@
|
||||
package seasonsview
|
||||
|
||||
import "git.haelnorr.com/h/oslstats/internal/view/baseview"
|
||||
import "git.haelnorr.com/h/oslstats/internal/db"
|
||||
import "fmt"
|
||||
|
||||
templ SeasonLeagueLayout(activeSection string, season *db.Season, league *db.League) {
|
||||
@baseview.Layout(fmt.Sprintf("%s - %s", season.Name, league.Name)) {
|
||||
<div class="max-w-screen-2xl mx-auto px-4 py-8">
|
||||
<div class="bg-mantle border border-surface1 rounded-lg overflow-hidden">
|
||||
<!-- 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)
|
||||
@StatusBadge(season, false, false)
|
||||
</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>
|
||||
<!-- Tab Navigation -->
|
||||
<nav class="bg-surface0 border-b border-surface1" data-tab-nav="season-league-content">
|
||||
<ul class="flex flex-wrap">
|
||||
@leagueNavItem("table", "Table", activeSection, season, league)
|
||||
@leagueNavItem("fixtures", "Fixtures", activeSection, season, league)
|
||||
@leagueNavItem("teams", "Teams", activeSection, season, league)
|
||||
@leagueNavItem("stats", "Stats", activeSection, season, league)
|
||||
@leagueNavItem("finals", "Finals", activeSection, season, league)
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- Content Area -->
|
||||
<main class="bg-crust p-6" id="season-league-content">
|
||||
{ children... }
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/static/js/tabs.js" defer></script>
|
||||
}
|
||||
}
|
||||
|
||||
templ leagueNavItem(section string, label string, activeSection string, season *db.Season, league *db.League) {
|
||||
{{
|
||||
isActive := section == activeSection
|
||||
baseClasses := "inline-block px-6 py-3 transition-colors cursor-pointer border-b-2"
|
||||
activeClasses := "border-blue text-blue font-semibold"
|
||||
inactiveClasses := "border-transparent text-subtext0 hover:text-text hover:border-surface2"
|
||||
url := fmt.Sprintf("/seasons/%s/leagues/%s/%s", season.ShortName, league.ShortName, section)
|
||||
}}
|
||||
<li class="inline-block">
|
||||
<a
|
||||
href={ templ.SafeURL(url) }
|
||||
hx-post={ url }
|
||||
hx-target="#season-league-content"
|
||||
hx-swap="innerHTML"
|
||||
hx-push-url={ url }
|
||||
class={ baseClasses, templ.KV(activeClasses, isActive), templ.KV(inactiveClasses, !isActive) }
|
||||
>
|
||||
{ label }
|
||||
</a>
|
||||
</li>
|
||||
}
|
||||
@@ -1,234 +0,0 @@
|
||||
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>
|
||||
}
|
||||
15
internal/view/seasonsview/season_league_stats.templ
Normal file
15
internal/view/seasonsview/season_league_stats.templ
Normal file
@@ -0,0 +1,15 @@
|
||||
package seasonsview
|
||||
|
||||
import "git.haelnorr.com/h/oslstats/internal/db"
|
||||
|
||||
templ SeasonLeagueStatsPage(season *db.Season, league *db.League) {
|
||||
@SeasonLeagueLayout("stats", season, league) {
|
||||
@SeasonLeagueStats()
|
||||
}
|
||||
}
|
||||
|
||||
templ SeasonLeagueStats() {
|
||||
<div class="bg-surface0 border border-surface1 rounded-lg p-8 text-center">
|
||||
<p class="text-subtext0 text-lg">Coming Soon...</p>
|
||||
</div>
|
||||
}
|
||||
15
internal/view/seasonsview/season_league_table.templ
Normal file
15
internal/view/seasonsview/season_league_table.templ
Normal file
@@ -0,0 +1,15 @@
|
||||
package seasonsview
|
||||
|
||||
import "git.haelnorr.com/h/oslstats/internal/db"
|
||||
|
||||
templ SeasonLeagueTablePage(season *db.Season, league *db.League) {
|
||||
@SeasonLeagueLayout("table", season, league) {
|
||||
@SeasonLeagueTable()
|
||||
}
|
||||
}
|
||||
|
||||
templ SeasonLeagueTable() {
|
||||
<div class="bg-surface0 border border-surface1 rounded-lg p-8 text-center">
|
||||
<p class="text-subtext0 text-lg">Coming Soon...</p>
|
||||
</div>
|
||||
}
|
||||
151
internal/view/seasonsview/season_league_teams.templ
Normal file
151
internal/view/seasonsview/season_league_teams.templ
Normal file
@@ -0,0 +1,151 @@
|
||||
package seasonsview
|
||||
|
||||
import "git.haelnorr.com/h/oslstats/internal/db"
|
||||
import "git.haelnorr.com/h/oslstats/internal/permissions"
|
||||
import "git.haelnorr.com/h/oslstats/internal/contexts"
|
||||
import "fmt"
|
||||
|
||||
templ SeasonLeagueTeamsPage(season *db.Season, league *db.League, teams []*db.Team, allTeams []*db.Team) {
|
||||
@SeasonLeagueLayout("teams", season, league) {
|
||||
@SeasonLeagueTeams(season, league, teams, allTeams)
|
||||
}
|
||||
}
|
||||
|
||||
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">No teams available to select</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 hover:cursor-pointer"
|
||||
>
|
||||
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 hover:cursor-pointer"
|
||||
>
|
||||
Add Team
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
templ SeasonLeagueTeams(season *db.Season, league *db.League, teams []*db.Team, allTeams []*db.Team) {
|
||||
{{
|
||||
permCache := contexts.Permissions(ctx)
|
||||
canAddTeam := permCache.HasPermission(permissions.TeamsAddToLeague)
|
||||
}}
|
||||
<div x-data="{ showAddTeamModal: false, selectedTeamId: '' }">
|
||||
<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>
|
||||
}
|
||||
if canAddTeam {
|
||||
@addTeamModal(season, league, teams, allTeams)
|
||||
}
|
||||
</div>
|
||||
}
|
||||
@@ -22,12 +22,16 @@ templ NewForm() {
|
||||
shortNamesError: "",
|
||||
shortNamesIsChecking: false,
|
||||
shortNamesAreUnique: false,
|
||||
shortNameIsEmpty: true,
|
||||
altShortNameIsEmpty: true,
|
||||
shortNameIsValid: false,
|
||||
altShortNameIsValid: false,
|
||||
// Form state
|
||||
isSubmitting: false,
|
||||
generalError: "",
|
||||
submitTimeout: null,
|
||||
// Check if a short name value is valid (exactly 3 uppercase letters)
|
||||
isValidShortName(val) {
|
||||
return /^[A-Z]{3}$/.test(val);
|
||||
},
|
||||
// Reset name errors
|
||||
resetNameErr() {
|
||||
this.nameError = "";
|
||||
@@ -42,23 +46,32 @@ templ NewForm() {
|
||||
},
|
||||
// Check if short names are the same
|
||||
checkShortNamesSame() {
|
||||
const shortName = document.getElementById('short_name').value.trim();
|
||||
const altShortName = document.getElementById('alt_short_name').value.trim();
|
||||
const shortName = document
|
||||
.getElementById("short_name")
|
||||
.value.trim();
|
||||
const altShortName = document
|
||||
.getElementById("alt_short_name")
|
||||
.value.trim();
|
||||
if (shortName && altShortName && shortName === altShortName) {
|
||||
this.shortNamesError = 'Short name and alt short name must be different';
|
||||
this.shortNamesError =
|
||||
"Short name and alt short name must be different";
|
||||
this.shortNamesAreUnique = false;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
// Check if both short names are valid and ready for unique check
|
||||
bothShortNamesReady() {
|
||||
return this.shortNameIsValid && this.altShortNameIsValid;
|
||||
},
|
||||
// Check if form can be submitted
|
||||
updateCanSubmit() {
|
||||
this.canSubmit =
|
||||
!this.nameIsEmpty &&
|
||||
this.nameIsUnique &&
|
||||
!this.nameIsChecking &&
|
||||
!this.shortNameIsEmpty &&
|
||||
!this.altShortNameIsEmpty &&
|
||||
this.shortNameIsValid &&
|
||||
this.altShortNameIsValid &&
|
||||
this.shortNamesAreUnique &&
|
||||
!this.shortNamesIsChecking;
|
||||
},
|
||||
@@ -119,7 +132,10 @@ templ NewForm() {
|
||||
type="text"
|
||||
id="short_name"
|
||||
name="short_name"
|
||||
maxlength="10"
|
||||
minlength="3"
|
||||
maxlength="3"
|
||||
pattern="[A-Z]{3}"
|
||||
class="uppercase"
|
||||
x-bind:class="{
|
||||
'py-3 px-4 block w-full rounded-lg text-sm bg-base disabled:opacity-50 disabled:pointer-events-none border-2 outline-none': true,
|
||||
'border-overlay0 focus:border-blue': !shortNamesAreUnique && !shortNamesError,
|
||||
@@ -127,20 +143,21 @@ templ NewForm() {
|
||||
'border-red focus:border-red': shortNamesError && !shortNamesIsChecking && !isSubmitting
|
||||
}"
|
||||
required
|
||||
placeholder="e.g. BLUE"
|
||||
placeholder="e.g. BLU"
|
||||
@input="
|
||||
$el.value = $el.value.toUpperCase().replace(/[^A-Z]/g, '');
|
||||
resetShortNamesErr();
|
||||
shortNameIsEmpty = $el.value.trim() === '';
|
||||
shortNameIsValid = isValidShortName($el.value);
|
||||
updateCanSubmit();
|
||||
"
|
||||
hx-post="/htmx/isteamshortnamesunique"
|
||||
hx-trigger="input changed delay:500ms from:#short_name, input changed delay:500ms from:#alt_short_name"
|
||||
hx-include="[name='alt_short_name']"
|
||||
hx-swap="none"
|
||||
@htmx:before-request="if($el.value.trim() === '' || document.getElementById('alt_short_name').value.trim() === '') { return; } if(checkShortNamesSame()) { updateCanSubmit(); return; } shortNamesIsChecking=true; shortNamesAreUnique=false; shortNamesError=''; updateCanSubmit();"
|
||||
@htmx:before-request="if(!bothShortNamesReady()) { $event.preventDefault(); return; } if(checkShortNamesSame()) { updateCanSubmit(); return; } shortNamesIsChecking=true; shortNamesAreUnique=false; shortNamesError=''; updateCanSubmit();"
|
||||
@htmx:after-request="shortNamesIsChecking=false; if($event.detail.successful) { shortNamesAreUnique=true; } else if($event.detail.xhr.status === 409) { shortNamesError='This combination of short names is already taken or they are the same'; shortNamesAreUnique=false; } updateCanSubmit();"
|
||||
/>
|
||||
<p class="text-xs text-subtext1 mt-1">Maximum 10 characters</p>
|
||||
<p class="text-xs text-subtext1 mt-1">Exactly 3 uppercase letters</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Alternative Short Name Field -->
|
||||
@@ -151,7 +168,10 @@ templ NewForm() {
|
||||
type="text"
|
||||
id="alt_short_name"
|
||||
name="alt_short_name"
|
||||
maxlength="10"
|
||||
minlength="3"
|
||||
maxlength="3"
|
||||
pattern="[A-Z]{3}"
|
||||
class="uppercase"
|
||||
x-bind:class="{
|
||||
'py-3 px-4 block w-full rounded-lg text-sm bg-base disabled:opacity-50 disabled:pointer-events-none border-2 outline-none': true,
|
||||
'border-overlay0 focus:border-blue': !shortNamesAreUnique && !shortNamesError,
|
||||
@@ -161,18 +181,19 @@ templ NewForm() {
|
||||
required
|
||||
placeholder="e.g. BFC"
|
||||
@input="
|
||||
$el.value = $el.value.toUpperCase().replace(/[^A-Z]/g, '');
|
||||
resetShortNamesErr();
|
||||
altShortNameIsEmpty = $el.value.trim() === '';
|
||||
altShortNameIsValid = isValidShortName($el.value);
|
||||
updateCanSubmit();
|
||||
"
|
||||
hx-post="/htmx/isteamshortnamesunique"
|
||||
hx-trigger="input changed delay:500ms from:#short_name, input changed delay:500ms from:#alt_short_name"
|
||||
hx-include="[name='short_name']"
|
||||
hx-swap="none"
|
||||
@htmx:before-request="if($el.value.trim() === '' || document.getElementById('short_name').value.trim() === '') { return; } if(checkShortNamesSame()) { updateCanSubmit(); return; } shortNamesIsChecking=true; shortNamesAreUnique=false; shortNamesError=''; updateCanSubmit();"
|
||||
@htmx:before-request="if(!bothShortNamesReady()) { $event.preventDefault(); return; } if(checkShortNamesSame()) { updateCanSubmit(); return; } shortNamesIsChecking=true; shortNamesAreUnique=false; shortNamesError=''; updateCanSubmit();"
|
||||
@htmx:after-request="shortNamesIsChecking=false; if($event.detail.successful) { shortNamesAreUnique=true; } else if($event.detail.xhr.status === 409) { shortNamesError='This combination of short names is already taken or they are the same'; shortNamesAreUnique=false; } updateCanSubmit();"
|
||||
/>
|
||||
<p class="text-xs text-subtext1 mt-1">Maximum 10 characters. Must be different from short name.</p>
|
||||
<p class="text-xs text-subtext1 mt-1">Exactly 3 uppercase letters. Must be different from short name.</p>
|
||||
</div>
|
||||
<p
|
||||
class="text-center text-xs text-red mt-2"
|
||||
|
||||
Reference in New Issue
Block a user