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

added teams

Browse Source
This commit is contained in:
Haelnorr
2026-02-12 21:10:49 +11:00
parent ba6929629d
commit c92c722ad5
25 changed files with 1327 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
internal/view/teamsview/list_page.templ Normal file
View 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
View 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
View 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>
}
}