174 lines
4.2 KiB
Svelte
174 lines
4.2 KiB
Svelte
<script lang="ts">
|
||
import { enhance } from '$app/forms';
|
||
import MapSlot from '$lib/components/MapSlot.svelte';
|
||
import StatTile from '$lib/components/StatTile.svelte';
|
||
import { mapState } from '$lib/map-state.svelte';
|
||
import { fmtDate, fmtDistance, fmtElapsed, fmtElevation } from '$lib/format';
|
||
|
||
let { data } = $props();
|
||
const s = $derived(data.segment);
|
||
|
||
// show the segment on the persistent map: synthetic negative id so it can
|
||
// be highlighted without colliding with activity ids
|
||
$effect(() => {
|
||
mapState.setDetailTrack({
|
||
id: -s.id,
|
||
name: s.name,
|
||
type: 'segment',
|
||
latlngs: data.latlngs
|
||
});
|
||
mapState.setHighlight(-s.id);
|
||
mapState.setFocus(JSON.parse(s.bounds));
|
||
return () => mapState.reset();
|
||
});
|
||
</script>
|
||
|
||
<svelte:head>
|
||
<title>{s.name} · Streba</title>
|
||
</svelte:head>
|
||
|
||
<MapSlot />
|
||
|
||
<a class="back" href="/segments">← Segments</a>
|
||
|
||
<div class="head">
|
||
<div>
|
||
<h1>{s.name}</h1>
|
||
<p class="page-sub">Segment · created {fmtDate(s.created_at.slice(0, 10))}</p>
|
||
</div>
|
||
{#if data.canDelete}
|
||
<form
|
||
method="POST"
|
||
action="?/delete"
|
||
use:enhance={({ cancel }) => {
|
||
if (!confirm('Delete this segment and all its efforts?')) cancel();
|
||
}}
|
||
>
|
||
<button class="btn danger" type="submit">Delete</button>
|
||
</form>
|
||
{/if}
|
||
</div>
|
||
|
||
<div class="kpis">
|
||
<StatTile label="Distance" value={fmtDistance(s.distance_m)} />
|
||
<StatTile label="Ascent" value={fmtElevation(s.elev_gain_m)} />
|
||
<StatTile
|
||
label="Record"
|
||
value={data.leaderboard[0] ? fmtElapsed(data.leaderboard[0].best_s) : '–'}
|
||
detail={data.leaderboard[0]?.username ?? 'no timed efforts yet'}
|
||
/>
|
||
</div>
|
||
|
||
<h2>Leaderboard</h2>
|
||
{#if data.leaderboard.length === 0}
|
||
<div class="card empty">No timed efforts yet - ride or run it with a GPS track.</div>
|
||
{:else}
|
||
<div class="card table-wrap">
|
||
<table>
|
||
<thead>
|
||
<tr><th>#</th><th>Athlete</th><th>Best time</th><th>Attempts</th><th>Date</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
{#each data.leaderboard as row, i (row.user_id)}
|
||
<tr class:me={row.user_id === data.myUserId}>
|
||
<td>{i + 1}</td>
|
||
<td><a href="/users/{row.username}">{row.username}</a></td>
|
||
<td class="time">{fmtElapsed(row.best_s)}</td>
|
||
<td>{row.attempts}</td>
|
||
<td>{row.date ? fmtDate(row.date) : '–'}</td>
|
||
</tr>
|
||
{/each}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
{/if}
|
||
|
||
{#if data.efforts.length > 0}
|
||
<h2>All efforts ({data.efforts.length})</h2>
|
||
<div class="card table-wrap">
|
||
<table>
|
||
<thead>
|
||
<tr><th>Athlete</th><th>Time</th><th>Date</th><th>Activity</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
{#each data.efforts as effort (effort.id)}
|
||
<tr class:me={effort.user_id === data.myUserId}>
|
||
<td><a href="/users/{effort.username}">{effort.username}</a></td>
|
||
<td class="time">{effort.elapsed_s !== null ? fmtElapsed(effort.elapsed_s) : '–'}</td>
|
||
<td>{effort.date ? fmtDate(effort.date) : '–'}</td>
|
||
<td><a href="/activities/{effort.activity_id}">{effort.activity_name}</a></td>
|
||
</tr>
|
||
{/each}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
{/if}
|
||
|
||
<style>
|
||
.back {
|
||
display: inline-block;
|
||
margin-bottom: 0.75rem;
|
||
font-size: 0.85rem;
|
||
font-weight: 500;
|
||
color: var(--text-secondary);
|
||
text-decoration: none;
|
||
padding: 0.25rem 0.6rem;
|
||
margin-left: -0.6rem;
|
||
border-radius: 0.45rem;
|
||
}
|
||
.back:hover {
|
||
background: var(--wash);
|
||
color: var(--text-primary);
|
||
}
|
||
.head {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
gap: 1rem;
|
||
}
|
||
.kpis {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
|
||
gap: 0.75rem;
|
||
}
|
||
.table-wrap {
|
||
overflow-x: auto;
|
||
}
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 0.88rem;
|
||
}
|
||
th {
|
||
text-align: left;
|
||
font-weight: 500;
|
||
font-size: 0.78rem;
|
||
color: var(--text-muted);
|
||
padding: 0.6rem 1rem 0.35rem;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
td {
|
||
padding: 0.5rem 1rem;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
tbody tr:not(:last-child) td {
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
tr.me td {
|
||
background: var(--accent-wash);
|
||
}
|
||
td a {
|
||
color: var(--accent-strong);
|
||
text-decoration: none;
|
||
font-weight: 600;
|
||
}
|
||
.time {
|
||
font-weight: 600;
|
||
}
|
||
.empty {
|
||
padding: 1.75rem;
|
||
text-align: center;
|
||
color: var(--text-secondary);
|
||
}
|
||
</style>
|