Files
oslstats/internal/view/playersview/player_stats_tab.templ

131 lines
4.1 KiB
Plaintext

package playersview
import "git.haelnorr.com/h/oslstats/internal/db"
import "fmt"
templ PlayerStatsTab(player *db.Player, stats *db.PlayerAllTimeStats, seasons []*db.Season, teams []*db.Team, activeFilter string, activeFilterID int) {
<div class="space-y-6" data-filter-url={ fmt.Sprintf("/players/%d/stats/filter", player.ID) }>
<!-- Filter Controls -->
<div class="flex flex-col sm:flex-row gap-4">
<!-- Season Filter -->
<div class="flex-1">
<label class="block text-xs text-subtext0 uppercase font-medium mb-1">Filter by Season</label>
<select
name="season_id"
class="w-full px-3 py-2 bg-mantle border border-surface1 rounded text-text focus:border-blue focus:outline-none hover:cursor-pointer"
onchange={ handleFilterChange("season") }
>
<option value="">All Seasons</option>
for _, s := range seasons {
<option
value={ fmt.Sprint(s.ID) }
selected?={ activeFilter == "season" && activeFilterID == s.ID }
>
{ s.Name }
</option>
}
</select>
</div>
<!-- Team Filter -->
<div class="flex-1">
<label class="block text-xs text-subtext0 uppercase font-medium mb-1">Filter by Team</label>
<select
name="team_id"
class="w-full px-3 py-2 bg-mantle border border-surface1 rounded text-text focus:border-blue focus:outline-none hover:cursor-pointer"
onchange={ handleFilterChange("team") }
>
<option value="">All Teams</option>
for _, t := range teams {
<option
value={ fmt.Sprint(t.ID) }
selected?={ activeFilter == "team" && activeFilterID == t.ID }
>
{ t.Name }
</option>
}
</select>
</div>
</div>
<!-- Filter Label -->
<div class="text-sm text-subtext0">
if activeFilter == "" {
Showing <span class="text-text font-medium">All-Time</span> stats
} else if activeFilter == "season" {
Showing stats for season:
<span class="text-text font-medium">
{ getSeasonName(seasons, activeFilterID) }
</span>
} else if activeFilter == "team" {
Showing stats for team:
<span class="text-text font-medium">
{ getTeamName(teams, activeFilterID) }
</span>
}
</div>
<!-- Stats Grid -->
@playerStatsGrid(stats)
</div>
}
templ playerStatsGrid(stats *db.PlayerAllTimeStats) {
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
@statCard("Games Played", fmt.Sprint(stats.GamesPlayed), "text-blue")
@statCard("Goals", fmt.Sprint(stats.Goals), "text-green")
@statCard("Assists", fmt.Sprint(stats.Assists), "text-teal")
@statCard("Saves", fmt.Sprint(stats.Saves), "text-yellow")
@statCard("Shots", fmt.Sprint(stats.Shots), "text-peach")
@statCard("Blocks", fmt.Sprint(stats.Blocks), "text-mauve")
@statCard("Passes", fmt.Sprint(stats.Passes), "text-sky")
@statCard("Periods Played", fmt.Sprint(stats.PeriodsPlayed), "text-subtext0")
</div>
}
templ statCard(label string, value string, colorClass string) {
<div class="bg-surface0 border border-surface1 rounded-lg p-4 text-center">
<p class="text-xs text-subtext0 uppercase font-medium mb-1">{ label }</p>
<p class={ "text-2xl font-bold", colorClass }>{ value }</p>
</div>
}
script handleFilterChange(filterType string) {
var container = event.target.closest("[data-filter-url]")
if (!container) return
var baseUrl = container.getAttribute("data-filter-url")
var seasonSelect = container.querySelector("select[name='season_id']")
var teamSelect = container.querySelector("select[name='team_id']")
// Reset the other filter when one is selected
if (filterType === "season" && teamSelect) {
teamSelect.value = ""
} else if (filterType === "team" && seasonSelect) {
seasonSelect.value = ""
}
var value = event.target.value
var url = baseUrl
if (value) {
url += "?filter=" + filterType + "&filter_id=" + value
}
htmx.ajax("POST", url, {target: "#player-content", swap: "innerHTML"})
}
func getSeasonName(seasons []*db.Season, id int) string {
for _, s := range seasons {
if s.ID == id {
return s.Name
}
}
return "Unknown"
}
func getTeamName(teams []*db.Team, id int) string {
for _, t := range teams {
if t.ID == id {
return t.Name
}
}
return "Unknown"
}