h/oslstats
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added leagues

Browse Source
This commit is contained in:
Haelnorr
2026-02-10 23:32:48 +11:00
parent ac5e38d82b
commit 2a3f4e4861
28 changed files with 1544 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
internal/view/leaguesview/list_page.templ Normal file
View File

@@ -0,0 +1,73 @@
package leaguesview
import "git.haelnorr.com/h/oslstats/internal/db"
import "git.haelnorr.com/h/oslstats/internal/view/baseview"
import "git.haelnorr.com/h/oslstats/internal/contexts"
import "git.haelnorr.com/h/oslstats/internal/permissions"
import "fmt"
templ ListPage(leagues []*db.League) {
@baseview.Layout("Leagues") {
<div class="max-w-screen-2xl mx-auto px-2">
@LeaguesList(leagues)
</div>
}
}
templ LeaguesList(leagues []*db.League) {
{{
permCache := contexts.Permissions(ctx)
canAddLeague := permCache.HasPermission(permissions.LeaguesCreate)
}}
<div id="leagues-list-container">
<!-- Header with title -->
<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">Leagues</span>
if canAddLeague {
<a
href="/leagues/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 league</a>
}
</div>
</div>
<!-- Results section -->
if len(leagues) == 0 {
<div class="bg-mantle border border-surface1 rounded-lg p-8 text-center">
<p class="text-subtext0 text-lg">No leagues found</p>
</div>
} else {
<!-- Card grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
for _, l := range leagues {
<a
class="bg-mantle border border-surface1 rounded-lg p-6 hover:bg-surface0 transition-colors"
href={ fmt.Sprintf("/leagues/%s", l.ShortName) }
>
<!-- Header: Name -->
<div class="flex justify-between items-start mb-3">
<h3 class="text-xl font-bold text-text">{ l.Name }</h3>
</div>
<!-- Info Row: Short Name -->
<div class="flex items-center gap-3 text-sm mb-3">
<span class="px-2 py-1 bg-surface1 rounded text-subtext0 font-mono">
{ l.ShortName }
</span>
</div>
<!-- Description -->
if l.Description != "" {
<p class="text-subtext0 text-sm line-clamp-2">
{ l.Description }
</p>
}
</a>
}
</div>
}
</div>
}

174
internal/view/leaguesview/new_form.templ Normal file
View File

@@ -0,0 +1,174 @@
package leaguesview
templ NewForm() {
<form
hx-post="/leagues/new"
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.'; }"
>
<script>
function newLeagueFormData() {
return {
canSubmit: false,
buttonText: "Create League",
// Name validation state
nameError: "",
nameIsChecking: false,
nameIsUnique: false,
nameIsEmpty: true,
// Short name validation state
shortNameError: "",
shortNameIsChecking: false,
shortNameIsUnique: false,
shortNameIsEmpty: true,
// Form state
isSubmitting: false,
generalError: "",
submitTimeout: null,
// Reset name errors
resetNameErr() {
this.nameError = "";
this.nameIsChecking = false;
this.nameIsUnique = false;
},
// Reset short name errors
resetShortNameErr() {
this.shortNameError = "";
this.shortNameIsChecking = false;
this.shortNameIsUnique = false;
},
// Check if form can be submitted
updateCanSubmit() {
this.canSubmit =
!this.nameIsEmpty &&
this.nameIsUnique &&
!this.nameIsChecking &&
!this.shortNameIsEmpty &&
this.shortNameIsUnique &&
!this.shortNameIsChecking;
},
// 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 League";
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">League 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. Pro League"
@input="resetNameErr(); nameIsEmpty = $el.value.trim() === ''; if(nameIsEmpty) { nameError='League name is required'; nameIsUnique=false; } updateCanSubmit();"
hx-post="/htmx/isleaguenameunique"
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 league 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': !shortNameIsUnique && !shortNameError,
'border-green focus:border-green': shortNameIsUnique && !shortNameIsChecking && !shortNameError,
'border-red focus:border-red': shortNameError && !shortNameIsChecking && !isSubmitting
}"
required
placeholder="e.g. PL"
@input="
resetShortNameErr();
shortNameIsEmpty = $el.value.trim() === '';
if(shortNameIsEmpty) {
shortNameError='Short name is required';
shortNameIsUnique=false;
}
updateCanSubmit();
"
hx-post="/htmx/isleagueshortnameunique"
hx-trigger="input changed delay:500ms"
hx-swap="none"
@htmx:before-request="if($el.value.trim() === '') { shortNameIsEmpty=true; return; } shortNameIsEmpty=false; shortNameIsChecking=true; shortNameIsUnique=false; shortNameError=''; updateCanSubmit();"
@htmx:after-request="shortNameIsChecking=false; if($event.detail.successful) { shortNameIsUnique=true; } else if($event.detail.xhr.status === 409) { shortNameError='This short name is already taken'; shortNameIsUnique=false; } updateCanSubmit();"
/>
<p class="text-xs text-subtext1 mt-1">Maximum 10 characters</p>
</div>
<p
class="text-center text-xs text-red mt-2"
x-show="shortNameError && !isSubmitting"
x-cloak
x-text="shortNameError"
></p>
</div>
<!-- Description Field (Optional) -->
<div>
<label for="description" class="block text-sm font-medium mb-2">Description (Optional)</label>
<textarea
id="description"
name="description"
rows="3"
maxlength="500"
class="py-3 px-4 block w-full rounded-lg text-sm bg-base border-2 border-overlay0 focus:border-blue outline-none resize-none"
placeholder="e.g. The top tier league for competitive play"
></textarea>
<p class="text-xs text-subtext1 mt-1">Maximum 500 characters</p>
</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/leaguesview/new_page.templ Normal file
View File

@@ -0,0 +1,23 @@
package leaguesview
import "git.haelnorr.com/h/oslstats/internal/view/baseview"
templ NewPage() {
@baseview.Layout("New League") {
<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 League</h1>
<p class="mt-2 text-sm text-subtext0">
Add a new league to the system. Name and short name are required.
</p>
</div>
<div class="max-w-md mx-auto">
@NewForm()
</div>
</div>
</div>
</div>
}
}