added teams
This commit is contained in:
@@ -21,6 +21,7 @@ func getNavItems() []NavItem {
|
||||
return []NavItem{
|
||||
{Name: "Seasons", Href: "/seasons"},
|
||||
{Name: "Leagues", Href: "/leagues"},
|
||||
{Name: "Teams", Href: "/teams"},
|
||||
}
|
||||
}
|
||||
|
||||
@@ -30,7 +31,7 @@ func getProfileItems(ctx context.Context) []ProfileItem {
|
||||
{Name: "Profile", Href: "/profile"},
|
||||
{Name: "Account", Href: "/account"},
|
||||
}
|
||||
|
||||
|
||||
cache := contexts.Permissions(ctx)
|
||||
if cache != nil && cache.Roles["admin"] {
|
||||
items = append(items, ProfileItem{
|
||||
@@ -38,7 +39,7 @@ func getProfileItems(ctx context.Context) []ProfileItem {
|
||||
Href: "/admin",
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
return items
|
||||
}
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@ templ NewForm() {
|
||||
hx-swap="none"
|
||||
x-data={ templ.JSFuncCall("newLeagueFormData").CallInline }
|
||||
@submit="handleSubmit()"
|
||||
@htmx:after-request="if(submitTimeout) clearTimeout(submitTimeout); const redirect = $event.detail.xhr.getResponseHeader('HX-Redirect'); if(redirect) return; if(!$event.detail.successful) { isSubmitting=false; buttonText='Create League'; generalError='An error occurred. Please try again.'; }"
|
||||
@htmx:after-request="if(submitTimeout) clearTimeout(submitTimeout); const redirect = $event.detail.xhr.getResponseHeader('HX-Redirect'); if(redirect) return; if(!$event.detail.successful && $event.detail.xhr.status !== 409) { isSubmitting=false; buttonText='Create League'; generalError='An error occurred. Please try again.'; }"
|
||||
>
|
||||
<script>
|
||||
function newLeagueFormData() {
|
||||
|
||||
@@ -7,15 +7,15 @@ import "strconv"
|
||||
import "git.haelnorr.com/h/oslstats/internal/permissions"
|
||||
import "git.haelnorr.com/h/oslstats/internal/contexts"
|
||||
|
||||
templ DetailPage(season *db.Season) {
|
||||
templ DetailPage(season *db.Season, leaguesWithTeams []db.LeagueWithTeams) {
|
||||
@baseview.Layout(season.Name) {
|
||||
<div class="max-w-screen-2xl mx-auto px-4 py-8">
|
||||
@SeasonDetails(season)
|
||||
@SeasonDetails(season, leaguesWithTeams)
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
templ SeasonDetails(season *db.Season) {
|
||||
templ SeasonDetails(season *db.Season, leaguesWithTeams []db.LeagueWithTeams) {
|
||||
{{
|
||||
permCache := contexts.Permissions(ctx)
|
||||
canEditSeason := permCache.HasPermission(permissions.SeasonsUpdate)
|
||||
@@ -135,18 +135,41 @@ templ SeasonDetails(season *db.Season) {
|
||||
<div class="px-6 pb-6">
|
||||
<div class="bg-surface0 border border-surface1 rounded-lg p-6">
|
||||
<h2 class="text-2xl font-bold text-text mb-4">Leagues</h2>
|
||||
if len(season.Leagues) == 0 {
|
||||
if len(leaguesWithTeams) == 0 {
|
||||
<p class="text-subtext0 text-sm">No leagues assigned to this season.</p>
|
||||
} else {
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
|
||||
for _, league := range season.Leagues {
|
||||
<a
|
||||
href={ templ.SafeURL("/seasons/" + season.ShortName + "/leagues/" + league.ShortName) }
|
||||
class="bg-mantle border border-surface1 rounded-lg p-4 hover:bg-surface1 transition-colors"
|
||||
>
|
||||
<h3 class="font-semibold text-text mb-1">{ league.Name }</h3>
|
||||
<span class="text-xs text-subtext0 font-mono">{ league.ShortName }</span>
|
||||
</a>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
for _, lwt := range leaguesWithTeams {
|
||||
<div class="bg-mantle border border-surface1 rounded-lg p-4 flex flex-col">
|
||||
<!-- League Header -->
|
||||
<a
|
||||
href={ templ.SafeURL("/seasons/" + season.ShortName + "/leagues/" + lwt.League.ShortName) }
|
||||
class="mb-3 pb-3 border-b border-surface1"
|
||||
>
|
||||
<h3 class="font-semibold text-text text-lg mb-1 hover:text-blue transition-colors">{ lwt.League.Name }</h3>
|
||||
<span class="text-xs text-subtext0 font-mono">{ lwt.League.ShortName }</span>
|
||||
</a>
|
||||
<!-- Teams List -->
|
||||
<div class="flex-1">
|
||||
if len(lwt.Teams) == 0 {
|
||||
<p class="text-sm text-subtext1 italic">No teams yet</p>
|
||||
} else {
|
||||
<div class="space-y-2">
|
||||
for _, team := range lwt.Teams {
|
||||
<div class="flex items-center gap-2 px-3 py-2 bg-surface0 border border-surface1 rounded hover:bg-surface1 transition-colors">
|
||||
if team.Color != "" {
|
||||
<div
|
||||
class="w-3 h-3 rounded-full border border-surface1 shrink-0"
|
||||
style={ "background-color: " + templ.SafeCSS(team.Color) }
|
||||
></div>
|
||||
}
|
||||
<span class="text-sm text-text truncate">{ team.Name }</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -26,7 +26,7 @@ templ EditForm(season *db.Season, allLeagues []*db.League) {
|
||||
hx-swap="none"
|
||||
x-data={ templ.JSFuncCall("editSeasonFormData", startDateStr, endDateStr, finalsStartDateStr, finalsEndDateStr).CallInline }
|
||||
@submit="handleSubmit()"
|
||||
@htmx:after-request="if(submitTimeout) clearTimeout(submitTimeout); const redirect = $event.detail.xhr.getResponseHeader('HX-Redirect'); if(redirect) return; if(!$event.detail.successful) { isSubmitting=false; buttonText='Save Changes'; generalError='An error occurred. Please try again.'; }"
|
||||
@htmx:after-request="if(submitTimeout) clearTimeout(submitTimeout); const redirect = $event.detail.xhr.getResponseHeader('HX-Redirect'); if(redirect) return; if(!$event.detail.successful && $event.detail.xhr.status !== 409) { isSubmitting=false; buttonText='Save Changes'; generalError='An error occurred. Please try again.'; }"
|
||||
>
|
||||
<script>
|
||||
function editSeasonFormData(
|
||||
|
||||
@@ -9,7 +9,7 @@ templ LeaguesSection(season *db.Season, allLeagues []*db.League) {
|
||||
permCache := contexts.Permissions(ctx)
|
||||
canAddLeague := permCache.HasPermission(permissions.SeasonsAddLeague)
|
||||
canRemoveLeague := permCache.HasPermission(permissions.SeasonsRemoveLeague)
|
||||
|
||||
|
||||
// Create a map of assigned league IDs for quick lookup
|
||||
assignedLeagueIDs := make(map[int]bool)
|
||||
for _, league := range season.Leagues {
|
||||
@@ -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/" + league.ShortName }
|
||||
hx-post={ "/seasons/" + season.ShortName + "/leagues/add/" + 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"
|
||||
|
||||
@@ -8,7 +8,7 @@ templ NewForm() {
|
||||
hx-swap="none"
|
||||
x-data={ templ.JSFuncCall("newSeasonFormData").CallInline }
|
||||
@submit="handleSubmit()"
|
||||
@htmx:after-request="if(submitTimeout) clearTimeout(submitTimeout); const redirect = $event.detail.xhr.getResponseHeader('HX-Redirect'); if(redirect) return; if(!$event.detail.successful) { isSubmitting=false; buttonText='Create Season'; generalError='An error occurred. Please try again.'; }"
|
||||
@htmx:after-request="if(submitTimeout) clearTimeout(submitTimeout); const redirect = $event.detail.xhr.getResponseHeader('HX-Redirect'); if(redirect) return; if(!$event.detail.successful && $event.detail.xhr.status !== 409) { isSubmitting=false; buttonText='Create Season'; generalError='An error occurred. Please try again.'; }"
|
||||
>
|
||||
<script>
|
||||
function newSeasonFormData() {
|
||||
|
||||
234
internal/view/seasonsview/season_league_page.templ
Normal file
234
internal/view/seasonsview/season_league_page.templ
Normal file
@@ -0,0 +1,234 @@
|
||||
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>
|
||||
}
|
||||
114
internal/view/teamsview/list_page.templ
Normal file
114
internal/view/teamsview/list_page.templ
Normal file
@@ -0,0 +1,114 @@
|
||||
package teamsview
|
||||
|
||||
import "git.haelnorr.com/h/oslstats/internal/db"
|
||||
import "git.haelnorr.com/h/oslstats/internal/view/baseview"
|
||||
import "git.haelnorr.com/h/oslstats/internal/view/pagination"
|
||||
import "git.haelnorr.com/h/oslstats/internal/view/sort"
|
||||
import "git.haelnorr.com/h/oslstats/internal/contexts"
|
||||
import "git.haelnorr.com/h/oslstats/internal/permissions"
|
||||
import "github.com/uptrace/bun"
|
||||
|
||||
templ ListPage(teams *db.List[db.Team]) {
|
||||
@baseview.Layout("Teams") {
|
||||
<div class="max-w-screen-2xl mx-auto px-2">
|
||||
@TeamsList(teams)
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
templ TeamsList(teams *db.List[db.Team]) {
|
||||
{{
|
||||
permCache := contexts.Permissions(ctx)
|
||||
canAddTeam := permCache.HasPermission(permissions.TeamsCreate)
|
||||
sortOpts := []db.OrderOpts{
|
||||
{
|
||||
Order: bun.OrderAsc,
|
||||
OrderBy: "name",
|
||||
Label: "Name (A-Z)",
|
||||
},
|
||||
{
|
||||
Order: bun.OrderDesc,
|
||||
OrderBy: "name",
|
||||
Label: "Name (Z-A)",
|
||||
},
|
||||
{
|
||||
Order: bun.OrderAsc,
|
||||
OrderBy: "short_name",
|
||||
Label: "Short Name (A-Z)",
|
||||
},
|
||||
{
|
||||
Order: bun.OrderDesc,
|
||||
OrderBy: "short_name",
|
||||
Label: "Short Name (Z-A)",
|
||||
},
|
||||
}
|
||||
}}
|
||||
<div id="teams-list-container">
|
||||
<form
|
||||
id="teams-form"
|
||||
hx-target="#teams-list-container"
|
||||
hx-swap="outerHTML"
|
||||
hx-push-url="true"
|
||||
x-data={ templ.JSFuncCall("paginateData",
|
||||
"teams-form",
|
||||
"/teams",
|
||||
teams.PageOpts.Page,
|
||||
teams.PageOpts.PerPage,
|
||||
teams.PageOpts.Order,
|
||||
teams.PageOpts.OrderBy).CallInline }
|
||||
>
|
||||
<!-- Header with title and sort controls -->
|
||||
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6 px-4">
|
||||
<div class="flex gap-4 items-center">
|
||||
<span class="text-3xl font-bold">Teams</span>
|
||||
if canAddTeam {
|
||||
<a
|
||||
href="/teams/new"
|
||||
class="rounded-lg px-2 py-1 hover:cursor-pointer text-center text-sm
|
||||
bg-green hover:bg-green/75 text-mantle transition"
|
||||
>Add team</a>
|
||||
}
|
||||
</div>
|
||||
@sort.Dropdown(teams.PageOpts, sortOpts)
|
||||
</div>
|
||||
<!-- Results section -->
|
||||
if len(teams.Items) == 0 {
|
||||
<div class="bg-mantle border border-surface1 rounded-lg p-8 text-center">
|
||||
<p class="text-subtext0 text-lg">No teams found</p>
|
||||
</div>
|
||||
} else {
|
||||
<!-- Card grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
for _, t := range teams.Items {
|
||||
<div
|
||||
class="bg-mantle border border-surface1 rounded-lg p-6 hover:bg-surface0 transition-colors flex flex-col"
|
||||
>
|
||||
<!-- Header: Name with color indicator -->
|
||||
<div class="flex justify-between items-start mb-3">
|
||||
<h3 class="text-xl font-bold text-text">{ t.Name }</h3>
|
||||
if t.Color != "" {
|
||||
<div
|
||||
class="w-6 h-6 rounded-full border-2 border-surface1"
|
||||
style={ "background-color: " + templ.SafeCSS(t.Color) }
|
||||
></div>
|
||||
}
|
||||
</div>
|
||||
<!-- Info Row: Short Names -->
|
||||
<div class="flex items-center gap-2 text-sm mb-3 flex-wrap">
|
||||
<span class="px-2 py-1 bg-surface1 rounded text-subtext0 font-mono">
|
||||
{ t.ShortName }
|
||||
</span>
|
||||
<span class="px-2 py-1 bg-surface0 border border-surface1 rounded text-subtext0 font-mono">
|
||||
{ t.AltShortName }
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<!-- Pagination controls -->
|
||||
@pagination.Pagination(teams.PageOpts, teams.Total)
|
||||
}
|
||||
</form>
|
||||
<script src="/static/js/pagination.js"></script>
|
||||
</div>
|
||||
}
|
||||
216
internal/view/teamsview/new_form.templ
Normal file
216
internal/view/teamsview/new_form.templ
Normal file
@@ -0,0 +1,216 @@
|
||||
package teamsview
|
||||
|
||||
templ NewForm() {
|
||||
<form
|
||||
hx-post="/teams/new"
|
||||
hx-swap="none"
|
||||
x-data={ templ.JSFuncCall("newTeamFormData").CallInline }
|
||||
@submit="handleSubmit()"
|
||||
@htmx:after-request="if(submitTimeout) clearTimeout(submitTimeout); const redirect = $event.detail.xhr.getResponseHeader('HX-Redirect'); if(redirect) return; if(!$event.detail.successful && $event.detail.xhr.status !== 409) { isSubmitting=false; buttonText='Create Team'; generalError='An error occurred. Please try again.'; }"
|
||||
>
|
||||
<script>
|
||||
function newTeamFormData() {
|
||||
return {
|
||||
canSubmit: false,
|
||||
buttonText: "Create Team",
|
||||
// Name validation state
|
||||
nameError: "",
|
||||
nameIsChecking: false,
|
||||
nameIsUnique: false,
|
||||
nameIsEmpty: true,
|
||||
// Short names validation state
|
||||
shortNamesError: "",
|
||||
shortNamesIsChecking: false,
|
||||
shortNamesAreUnique: false,
|
||||
shortNameIsEmpty: true,
|
||||
altShortNameIsEmpty: true,
|
||||
// Form state
|
||||
isSubmitting: false,
|
||||
generalError: "",
|
||||
submitTimeout: null,
|
||||
// Reset name errors
|
||||
resetNameErr() {
|
||||
this.nameError = "";
|
||||
this.nameIsChecking = false;
|
||||
this.nameIsUnique = false;
|
||||
},
|
||||
// Reset short names errors
|
||||
resetShortNamesErr() {
|
||||
this.shortNamesError = "";
|
||||
this.shortNamesIsChecking = false;
|
||||
this.shortNamesAreUnique = false;
|
||||
},
|
||||
// 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();
|
||||
if (shortName && altShortName && shortName === altShortName) {
|
||||
this.shortNamesError = 'Short name and alt short name must be different';
|
||||
this.shortNamesAreUnique = false;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
// Check if form can be submitted
|
||||
updateCanSubmit() {
|
||||
this.canSubmit =
|
||||
!this.nameIsEmpty &&
|
||||
this.nameIsUnique &&
|
||||
!this.nameIsChecking &&
|
||||
!this.shortNameIsEmpty &&
|
||||
!this.altShortNameIsEmpty &&
|
||||
this.shortNamesAreUnique &&
|
||||
!this.shortNamesIsChecking;
|
||||
},
|
||||
// Handle form submission
|
||||
handleSubmit() {
|
||||
this.isSubmitting = true;
|
||||
this.buttonText = "Creating...";
|
||||
this.generalError = "";
|
||||
// Set timeout for 10 seconds
|
||||
this.submitTimeout = setTimeout(() => {
|
||||
this.isSubmitting = false;
|
||||
this.buttonText = "Create Team";
|
||||
this.generalError = "Request timed out. Please try again.";
|
||||
}, 10000);
|
||||
},
|
||||
};
|
||||
}
|
||||
</script>
|
||||
<div class="grid gap-y-5">
|
||||
<!-- Name Field -->
|
||||
<div>
|
||||
<label for="name" class="block text-sm font-medium mb-2">Team Name</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
maxlength="50"
|
||||
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': !nameIsUnique && !nameError,
|
||||
'border-green focus:border-green': nameIsUnique && !nameIsChecking && !nameError,
|
||||
'border-red focus:border-red': nameError && !nameIsChecking && !isSubmitting
|
||||
}"
|
||||
required
|
||||
placeholder="e.g. Blueberry FC"
|
||||
@input="resetNameErr(); nameIsEmpty = $el.value.trim() === ''; if(nameIsEmpty) { nameError='Team name is required'; nameIsUnique=false; } updateCanSubmit();"
|
||||
hx-post="/htmx/isteamnameunique"
|
||||
hx-trigger="input changed delay:500ms"
|
||||
hx-swap="none"
|
||||
@htmx:before-request="if($el.value.trim() === '') { nameIsEmpty=true; return; } nameIsEmpty=false; nameIsChecking=true; nameIsUnique=false; nameError=''; updateCanSubmit();"
|
||||
@htmx:after-request="nameIsChecking=false; if($event.detail.successful) { nameIsUnique=true; } else if($event.detail.xhr.status === 409) { nameError='This team name is already taken'; nameIsUnique=false; } updateCanSubmit();"
|
||||
/>
|
||||
<p class="text-xs text-subtext1 mt-1">Maximum 50 characters</p>
|
||||
</div>
|
||||
<p
|
||||
class="text-center text-xs text-red mt-2"
|
||||
x-show="nameError && !isSubmitting"
|
||||
x-cloak
|
||||
x-text="nameError"
|
||||
></p>
|
||||
</div>
|
||||
<!-- Short Name Field -->
|
||||
<div>
|
||||
<label for="short_name" class="block text-sm font-medium mb-2">Short Name</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="text"
|
||||
id="short_name"
|
||||
name="short_name"
|
||||
maxlength="10"
|
||||
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,
|
||||
'border-green focus:border-green': shortNamesAreUnique && !shortNamesIsChecking && !shortNamesError,
|
||||
'border-red focus:border-red': shortNamesError && !shortNamesIsChecking && !isSubmitting
|
||||
}"
|
||||
required
|
||||
placeholder="e.g. BLUE"
|
||||
@input="
|
||||
resetShortNamesErr();
|
||||
shortNameIsEmpty = $el.value.trim() === '';
|
||||
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: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>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Alternative Short Name Field -->
|
||||
<div>
|
||||
<label for="alt_short_name" class="block text-sm font-medium mb-2">Alternative Short Name</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="text"
|
||||
id="alt_short_name"
|
||||
name="alt_short_name"
|
||||
maxlength="10"
|
||||
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,
|
||||
'border-green focus:border-green': shortNamesAreUnique && !shortNamesIsChecking && !shortNamesError,
|
||||
'border-red focus:border-red': shortNamesError && !shortNamesIsChecking && !isSubmitting
|
||||
}"
|
||||
required
|
||||
placeholder="e.g. BFC"
|
||||
@input="
|
||||
resetShortNamesErr();
|
||||
altShortNameIsEmpty = $el.value.trim() === '';
|
||||
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: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>
|
||||
</div>
|
||||
<p
|
||||
class="text-center text-xs text-red mt-2"
|
||||
x-show="shortNamesError && !isSubmitting"
|
||||
x-cloak
|
||||
x-text="shortNamesError"
|
||||
></p>
|
||||
</div>
|
||||
<!-- Color Field (Optional) -->
|
||||
<div>
|
||||
<label for="color" class="block text-sm font-medium mb-2">Team Color (Optional)</label>
|
||||
<div class="flex gap-3 items-center">
|
||||
<input
|
||||
type="color"
|
||||
id="color"
|
||||
name="color"
|
||||
class="h-12 w-20 rounded cursor-pointer border-2 border-overlay0"
|
||||
/>
|
||||
<p class="text-xs text-subtext1">Choose a color to represent this team</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- General Error Message -->
|
||||
<p
|
||||
class="text-center text-sm text-red"
|
||||
x-show="generalError"
|
||||
x-cloak
|
||||
x-text="generalError"
|
||||
></p>
|
||||
<!-- Submit Button -->
|
||||
<button
|
||||
x-bind:disabled="!canSubmit || isSubmitting"
|
||||
x-text="buttonText"
|
||||
type="submit"
|
||||
class="w-full py-3 px-4 inline-flex justify-center items-center
|
||||
gap-x-2 rounded-lg border border-transparent transition font-semibold
|
||||
bg-blue hover:bg-blue/75 text-mantle hover:cursor-pointer
|
||||
disabled:bg-blue/40 disabled:cursor-not-allowed"
|
||||
></button>
|
||||
</div>
|
||||
</form>
|
||||
}
|
||||
23
internal/view/teamsview/new_page.templ
Normal file
23
internal/view/teamsview/new_page.templ
Normal file
@@ -0,0 +1,23 @@
|
||||
package teamsview
|
||||
|
||||
import "git.haelnorr.com/h/oslstats/internal/view/baseview"
|
||||
|
||||
templ NewPage() {
|
||||
@baseview.Layout("New Team") {
|
||||
<div class="max-w-5xl mx-auto px-4 py-8">
|
||||
<div class="bg-mantle border border-surface1 rounded-xl">
|
||||
<div class="p-6 sm:p-8">
|
||||
<div class="text-center mb-8">
|
||||
<h1 class="text-3xl font-bold text-text">Create New Team</h1>
|
||||
<p class="mt-2 text-sm text-subtext0">
|
||||
Add a new team to the system. All fields except color are required.
|
||||
</p>
|
||||
</div>
|
||||
<div class="max-w-md mx-auto">
|
||||
@NewForm()
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user