Software/platform
1
1
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases 4 Wiki Activity

Usability improvements for players tab and more api hookups

Browse Source
This commit is contained in:
Dominic Ferrando
2026-08-22 13:01:45 -04:00
parent 564a18cfcb
commit 8a847cf965
1 changed files with 259 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/portal/src/lib/components/PlayersTable.svelte
+170 -76
View File
@@ -29,6 +29,8 @@
activityPerformances: ActivityPerformance[]; activityPerformances: ActivityPerformance[];
/** JSON snapshot of {player, activityPerformances} as of the last successful save/load. "" means never saved. */ /** JSON snapshot of {player, activityPerformances} as of the last successful save/load. "" means never saved. */
savedSnapshot: string; savedSnapshot: string;
/** whether the metrics/performance editing panel is open — collapsed by default, since levels are the primary thing being compared */
expanded?: boolean;
saving?: boolean; saving?: boolean;
saveError?: string; saveError?: string;
deleting?: boolean; deleting?: boolean;
@@ -59,6 +61,9 @@
const levelCalculator = $derived(new LevelCalculator(allStandards)); const levelCalculator = $derived(new LevelCalculator(allStandards));
// toggle + name + overall + one column per attribute + actions
const TABLE_COLUMNS = 4 + Object.keys(Attribute).length;
let calculations = $state<CalcData[]>([]); let calculations = $state<CalcData[]>([]);
let loading = $state(true); let loading = $state(true);
let loadError = $state<string | null>(null); let loadError = $state<string | null>(null);
@@ -121,12 +126,22 @@
calculation.saving = true; calculation.saving = true;
calculation.saveError = undefined; calculation.saveError = undefined;
try { try {
if (calculation.id) {
const res = await api
.assessments({ id: calculation.id })
.put({
player: calculation.player,
activityPerformances: calculation.activityPerformances,
});
if (res.error) throw res.error;
} else {
const res = await api.assessments.me.post({ const res = await api.assessments.me.post({
player: calculation.player, player: calculation.player,
activityPerformances: calculation.activityPerformances, activityPerformances: calculation.activityPerformances,
}); });
if (res.error) throw res.error; if (res.error) throw res.error;
calculation.id = res.data?.id; calculation.id = res.data?.id;
}
calculation.savedSnapshot = snapshotOf( calculation.savedSnapshot = snapshotOf(
calculation.player, calculation.player,
calculation.activityPerformances, calculation.activityPerformances,
@@ -190,6 +205,7 @@
return { return {
key: crypto.randomUUID(), key: crypto.randomUUID(),
savedSnapshot: "", // never saved — always dirty until the first save savedSnapshot: "", // never saved — always dirty until the first save
expanded: true, // a brand new player needs its details filled in right away
player: { player: {
name: name, name: name,
metrics: { metrics: {
@@ -223,7 +239,7 @@
const formatSeconds = (ms: number) => (ms / 1000).toFixed(2) + " seconds"; const formatSeconds = (ms: number) => (ms / 1000).toFixed(2) + " seconds";
const performanceOptionsFromActivity = function (activity: Activity) { const performanceOptionsFromActivity = function (activity: Activity) {
const options: { name: string; value: string }[] = []; const options: { name: string; value: number }[] = [];
switch (activity) { switch (activity) {
case Activity.BackSquat: case Activity.BackSquat:
case Activity.Deadlift: case Activity.Deadlift:
@@ -231,7 +247,7 @@
for (let i = 0; i < 600; ++i) { for (let i = 0; i < 600; ++i) {
options.push({ options.push({
name: String(i) + " lb", name: String(i) + " lb",
value: String(lbToKg(i)), value: lbToKg(i),
}); });
} }
break; break;
@@ -239,7 +255,7 @@
case Activity.Run: { case Activity.Run: {
const MAX_MIN = 30; const MAX_MIN = 30;
for (let ms = 0; ms <= MAX_MIN * 60_000; ms += 1_000) { for (let ms = 0; ms <= MAX_MIN * 60_000; ms += 1_000) {
options.push({ name: formatMs(ms), value: String(ms) }); options.push({ name: formatMs(ms), value: ms });
} }
break; break;
} }
@@ -250,7 +266,7 @@
const inches = halfStep / 2; const inches = halfStep / 2;
options.push({ options.push({
name: inchesToFeetInches(inches), name: inchesToFeetInches(inches),
value: (inches * 2.54).toFixed(1), value: Number((inches * 2.54).toFixed(1)),
}); });
} }
break; break;
@@ -262,7 +278,7 @@
for (let ms = MIN_MS; ms <= MAX_MS; ms += 10) { for (let ms = MIN_MS; ms <= MAX_MS; ms += 10) {
options.push({ options.push({
name: formatSeconds(ms), name: formatSeconds(ms),
value: String(ms), value: ms,
}); });
} }
break; break;
@@ -298,97 +314,157 @@
</div> </div>
{/if} {/if}
<section <div class="w-full overflow-x-auto">
class="w-full px-3 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4" <table class="table">
> <thead>
<tr>
<th class="w-8"></th>
<th>Name</th>
<th>Overall</th>
{#each Object.values(Attribute) as attribute (attribute)}
<th>{attribute}</th>
{/each}
<th class="w-40"></th>
</tr>
</thead>
<tbody>
{#each calculations as calculation, index (calculation.key)} {#each calculations as calculation, index (calculation.key)}
<div <tr class="hover:bg-base-300">
class="card card-compact bg-base-200 p-4 shadow-lg max-w-sm w-full" <td>
<button
onclick={() =>
(calculation.expanded = !calculation.expanded)}
class="btn btn-ghost btn-xs"
aria-label={calculation.expanded
? "Collapse details"
: "Expand details"}
> >
<div class="card-body gap-4 p-4"> {calculation.expanded ? "▾" : "▸"}
</button>
</td>
<td>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<input <input
class="input input-bordered input-sm w-full" class="input input-bordered input-sm w-full min-w-32"
type="text" type="text"
bind:value={calculation.player.name} bind:value={calculation.player.name}
placeholder="Player name" placeholder="Player name"
/> />
{#if isDirty(calculation)} {#if isDirty(calculation)}
<div class="badge badge-warning badge-sm shrink-0"> <div class="badge badge-warning badge-xs shrink-0">
Unsaved Unsaved
</div> </div>
{/if} {/if}
</div> </div>
</td>
<ul <td>
class="bg-base-100 rounded-box shadow-xs divide-y divide-base-300" <div class="badge badge-neutral font-semibold">
> {calculation?.levels?.player ?? "N/A"}
<li class="p-3">
<div class="flex items-center justify-between">
<div class="font-semibold text-sm">OVERALL</div>
<div class="badge badge-neutral badge-xs">
{calculation?.levels?.player || "N/A"}
</div> </div>
</div> </td>
</li>
{#each Object.values(Attribute) as attribute (attribute)} {#each Object.values(Attribute) as attribute (attribute)}
<li class="p-3"> <td>
<div class="flex items-center justify-between"> <div class="badge badge-ghost">
<div class="opacity-80 text-sm">
{attribute}
</div>
<div class="badge badge-ghost badge-xs">
{calculation?.levels?.attributes?.[ {calculation?.levels?.attributes?.[
attribute attribute
] || "N/A"} ] ?? "N/A"}
</div> </div>
</div> </td>
</li>
{/each} {/each}
</ul> <td>
<div class="flex gap-2 justify-end">
<button
onclick={() => saveCalculation(calculation)}
disabled={calculation.saving ||
!isDirty(calculation)}
class="btn btn-primary btn-xs"
>
{calculation.saving ? "Saving..." : "Save"}
</button>
<button
onclick={() =>
confirm(
`Remove ${calculation.player.name}?`,
) && deleteCalculation(calculation, index)}
disabled={calculation.deleting}
class="btn btn-error btn-xs"
>
{calculation.deleting ? "..." : "Delete"}
</button>
</div>
</td>
</tr>
{#if calculation.expanded}
<tr>
<td colspan={TABLE_COLUMNS}>
<div
class="bg-base-200/60 rounded-lg p-4 flex flex-col gap-4"
>
<fieldset <fieldset
class="fieldset bg-base-200/60 rounded-lg" class="fieldset"
onchange={() => onchange={() =>
(calculation.levels = levelCalculator.calculate( (calculation.levels =
levelCalculator.calculate(
calculation.player, calculation.player,
calculation.activityPerformances, calculation.activityPerformances,
))} ))}
> >
<legend
class="fieldset-legend text-xs font-semibold opacity-70"
>
Metrics
</legend>
<div class="grid grid-cols-1 md:grid-cols-3 gap-3"> <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
<label class="form-control"> <label class="form-control">
<span class="label mb-1 text-xs">Gender</span> <span class="label mb-1 text-xs"
>Gender</span
>
<select <select
class="select select-bordered select-sm w-full" class="select select-bordered select-sm w-full"
bind:value={calculation.player.metrics.gender} bind:value={
calculation.player.metrics
.gender
}
> >
{#each Object.values(Gender) as gender (gender)} {#each Object.values(Gender) as gender (gender)}
<option value={gender}>{gender}</option> <option value={gender}
>{gender}</option
>
{/each} {/each}
</select> </select>
</label> </label>
<label class="form-control"> <label class="form-control">
<span class="label mb-1 text-xs">Age</span> <span class="label mb-1 text-xs"
>Age</span
>
<input <input
class="input input-bordered input-sm w-full" class="input input-bordered input-sm w-full"
type="number" type="number"
min="1" min="1"
max="100" max="100"
step="1" step="1"
bind:value={calculation.player.metrics.age} bind:value={
calculation.player.metrics
.age
}
/> />
</label> </label>
<label class="form-control"> <label class="form-control">
<span class="label mb-1 text-xs">Weight</span> <span class="label mb-1 text-xs"
>Weight</span
>
<select <select
class="select select-bordered select-sm w-full" class="select select-bordered select-sm w-full"
bind:value={calculation.player.metrics.weight} bind:value={
calculation.player.metrics
.weight
}
> >
{#each range(400) as weight (weight)} {#each range(400) as weight (weight)}
<option value={lbToKg(weight)} <option
value={lbToKg(weight)}
>{weight}</option >{weight}</option
> >
{/each} {/each}
@@ -398,25 +474,38 @@
</fieldset> </fieldset>
<fieldset <fieldset
class="fieldset bg-base-200/60 rounded-lg" class="fieldset"
onchange={() => onchange={() =>
(calculation.levels = levelCalculator.calculate( (calculation.levels =
levelCalculator.calculate(
calculation.player, calculation.player,
calculation.activityPerformances, calculation.activityPerformances,
))} ))}
> >
<div class="grid grid-cols-2 gap-3"> <legend
class="fieldset-legend text-xs font-semibold opacity-70"
>
Activity performances
</legend>
<div class="grid grid-cols-2 md:grid-cols-3 gap-3">
{#each calculation.activityPerformances as activityPerformance (activityPerformance.activity)} {#each calculation.activityPerformances as activityPerformance (activityPerformance.activity)}
<label class="form-control space-y-1"> <label
<span class="label mb-1 text-xs"> class="form-control space-y-1"
>
<span
class="label mb-1 text-xs"
>
{activityPerformance.activity} {activityPerformance.activity}
</span> </span>
<select <select
class="select select-bordered select-sm w-full" class="select select-bordered select-sm w-full"
bind:value={activityPerformance.performance} bind:value={
activityPerformance.performance
}
> >
{#each performanceOptionsFromActivity(activityPerformance.activity) as option (option.value)} {#each performanceOptionsFromActivity(activityPerformance.activity) as option (option.value)}
<option value={option.value} <option
value={option.value}
>{option.name}</option >{option.name}</option
> >
{/each} {/each}
@@ -427,34 +516,39 @@
</fieldset> </fieldset>
{#if calculation.saveError} {#if calculation.saveError}
<div role="alert" class="alert alert-error alert-sm"> <div
<span class="text-xs">{calculation.saveError}</span> role="alert"
class="alert alert-error alert-sm"
>
<span class="text-xs"
>{calculation.saveError}</span
>
</div> </div>
{/if} {/if}
{#if calculation.deleteError} {#if calculation.deleteError}
<div role="alert" class="alert alert-error alert-sm"> <div
<span class="text-xs">{calculation.deleteError}</span> role="alert"
class="alert alert-error alert-sm"
>
<span class="text-xs"
>{calculation.deleteError}</span
>
</div> </div>
{/if} {/if}
</div> </div>
<div class="flex gap-2"> </td>
<button </tr>
onclick={() => saveCalculation(calculation)} {/if}
disabled={calculation.saving || !isDirty(calculation)} {:else}
class="btn btn-primary btn-sm flex-1" <tr>
<td
colspan={TABLE_COLUMNS}
class="text-center opacity-60"
> >
{calculation.saving ? "Saving..." : "Save"} {loading ? "Loading..." : "No players yet"}
</button> </td>
<button </tr>
onclick={() =>
confirm(`Remove ${calculation.player.name}?`) &&
deleteCalculation(calculation, index)}
disabled={calculation.deleting}
class="btn btn-error btn-sm w-1/4"
>
{calculation.deleting ? "..." : "Delete"}
</button>
</div>
</div>
{/each} {/each}
</section> </tbody>
</table>
</div>