113 lines
2.8 KiB
Svelte
113 lines
2.8 KiB
Svelte
<script lang="ts">
|
|
import Map from '$lib/components/Map.svelte';
|
|
import StatTile from '$lib/components/StatTile.svelte';
|
|
import ActivityItem from '$lib/components/ActivityItem.svelte';
|
|
import { fmtDistance, fmtElevation } from '$lib/format';
|
|
|
|
let { data } = $props();
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Streba</title>
|
|
</svelte:head>
|
|
|
|
{#if data.user}
|
|
<h1>Dashboard</h1>
|
|
<p class="page-sub">What everyone on Streba has been up to.</p>
|
|
{:else}
|
|
<div class="hero">
|
|
<div>
|
|
<h1>The GPX analyser</h1>
|
|
<p class="page-sub">
|
|
Upload your tracks, analyse every climb - and tick off Alpine peaks along the way.
|
|
</p>
|
|
</div>
|
|
<div class="hero-actions">
|
|
<a class="btn" href="/signup">Sign up</a>
|
|
<a class="btn ghost" href="/login">Sign in</a>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<div class="kpis">
|
|
<StatTile label="Members" value={String(data.totals.users)} />
|
|
<StatTile label="Activities" value={String(data.totals.activities)} />
|
|
<StatTile label="Total distance" value={fmtDistance(data.totals.distance_m)} />
|
|
<StatTile label="Total ascent" value={fmtElevation(data.totals.elev_gain_m)} />
|
|
</div>
|
|
|
|
<h2>Worldmap</h2>
|
|
<Map tracks={data.tracks} height="440px" />
|
|
|
|
<h2>Recent activities</h2>
|
|
{#if data.activities.length === 0}
|
|
<div class="card empty">
|
|
<p>Nothing here yet - be the first to upload a track.</p>
|
|
{#if data.user}<a class="btn" href="/upload">Upload a GPX file</a>{/if}
|
|
</div>
|
|
{:else}
|
|
<div class="card list">
|
|
{#each data.activities.slice(0, 10) as activity (activity.id)}
|
|
<ActivityItem {activity} />
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
|
|
{#if data.mine && data.mine.peaksClimbed > 0}
|
|
<div class="card peak-strip">
|
|
<span>
|
|
⛰ You've reached <strong>{data.mine.peaksClimbed}</strong>
|
|
peak{data.mine.peaksClimbed === 1 ? '' : 's'}{#if data.mine.highestAscent},
|
|
highest: <strong>{data.mine.highestAscent.name}</strong>
|
|
({Math.round(data.mine.highestAscent.elevation_m ?? 0).toLocaleString('en-US')} m){/if}.
|
|
</span>
|
|
<a class="btn ghost" href="/peaks">Peak map</a>
|
|
</div>
|
|
{/if}
|
|
|
|
<style>
|
|
.hero {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 1.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
.hero-actions {
|
|
display: flex;
|
|
gap: 0.6rem;
|
|
padding-top: 0.35rem;
|
|
}
|
|
.kpis {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
gap: 0.75rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.list :global(.item:not(:last-child)) {
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.empty {
|
|
padding: 2rem;
|
|
text-align: center;
|
|
}
|
|
.empty p {
|
|
margin: 0 0 1rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
.peak-strip {
|
|
margin-top: 1.25rem;
|
|
padding: 0.85rem 1.15rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
color: var(--text-secondary);
|
|
font-size: 0.9rem;
|
|
}
|
|
.peak-strip strong {
|
|
color: var(--text-primary);
|
|
}
|
|
</style>
|