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

updated season league view page

Browse Source
This commit is contained in:
Haelnorr
2026-02-14 21:08:00 +11:00
parent 4a2396bca8
commit 61890ae20b
23 changed files with 791 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
internal/view/teamsview/new_form.templ
View File

@@ -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"