Files
oslstats/internal/view/seasonsview/fixture_upload_result.templ

119 lines
3.9 KiB
Plaintext

package seasonsview
import "git.haelnorr.com/h/oslstats/internal/db"
import "git.haelnorr.com/h/oslstats/internal/view/baseview"
import "fmt"
templ FixtureUploadResultPage(fixture *db.Fixture) {
{{
backURL := fmt.Sprintf("/fixtures/%d", fixture.ID)
}}
@baseview.Layout(fmt.Sprintf("Upload Result — %s vs %s", fixture.HomeTeam.Name, fixture.AwayTeam.Name)) {
<div class="max-w-screen-md mx-auto px-4 py-8">
<!-- Header -->
<div class="bg-mantle border border-surface1 rounded-lg overflow-hidden mb-6">
<div class="bg-surface0 border-b border-surface1 px-6 py-6">
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
<div>
<h1 class="text-2xl font-bold text-text mb-1">Upload Match Logs</h1>
<p class="text-sm text-subtext1">
{ fixture.HomeTeam.Name } vs { fixture.AwayTeam.Name }
<span class="text-subtext0 ml-1">
Round { fmt.Sprint(fixture.Round) }
</span>
</p>
</div>
<a
href={ templ.SafeURL(backURL) }
class="rounded-lg px-4 py-2 hover:cursor-pointer text-center
bg-surface1 hover:bg-surface2 text-text transition"
>
Cancel
</a>
</div>
</div>
</div>
<!-- Upload Form -->
<div class="bg-mantle border border-surface1 rounded-lg overflow-hidden">
<div class="bg-surface0 border-b border-surface1 px-4 py-3">
<h2 class="text-lg font-bold text-text">Match Log Files</h2>
</div>
<div class="p-6">
<p class="text-sm text-subtext1 mb-6">
Upload the 3 period match log JSON files. Each file corresponds to one period of the match.
The files will be validated for consistency.
</p>
<form
hx-post={ fmt.Sprintf("/fixtures/%d/results/upload", fixture.ID) }
hx-swap="none"
hx-encoding="multipart/form-data"
class="space-y-6"
>
<!-- Period 1 -->
<div>
<label class="block text-sm font-medium text-text mb-2">
Period 1
</label>
<input
type="file"
name="period_1"
accept=".json"
required
class="w-full px-3 py-2 bg-base border border-surface1 rounded-lg text-text
file:mr-4 file:py-1 file:px-3 file:rounded file:border-0
file:text-sm file:font-medium file:bg-blue file:text-mantle
file:hover:bg-blue/80 file:hover:cursor-pointer file:transition
focus:border-blue focus:outline-none"
/>
</div>
<!-- Period 2 -->
<div>
<label class="block text-sm font-medium text-text mb-2">
Period 2
</label>
<input
type="file"
name="period_2"
accept=".json"
required
class="w-full px-3 py-2 bg-base border border-surface1 rounded-lg text-text
file:mr-4 file:py-1 file:px-3 file:rounded file:border-0
file:text-sm file:font-medium file:bg-blue file:text-mantle
file:hover:bg-blue/80 file:hover:cursor-pointer file:transition
focus:border-blue focus:outline-none"
/>
</div>
<!-- Period 3 -->
<div>
<label class="block text-sm font-medium text-text mb-2">
Period 3
</label>
<input
type="file"
name="period_3"
accept=".json"
required
class="w-full px-3 py-2 bg-base border border-surface1 rounded-lg text-text
file:mr-4 file:py-1 file:px-3 file:rounded file:border-0
file:text-sm file:font-medium file:bg-blue file:text-mantle
file:hover:bg-blue/80 file:hover:cursor-pointer file:transition
focus:border-blue focus:outline-none"
/>
</div>
<!-- Submit -->
<div class="pt-2">
<button
type="submit"
class="w-full px-4 py-3 bg-blue hover:bg-blue/80 text-mantle rounded-lg
font-medium transition hover:cursor-pointer text-lg"
>
Upload & Validate
</button>
</div>
</form>
</div>
</div>
</div>
}
}