SegmentCreate: prompt after save instead of immediate redirect; update plan
After saving, show "Saved! Add another from this activity?" with two buttons: "Add another" (resets name/handles, keeps map loaded) and "Done" (navigates to /segments/).
This commit is contained in:
@@ -187,3 +187,46 @@ UI-first, so users can start populating the segment collection immediately. Dete
|
|||||||
11. `/segments/{id}/` page — segment detail + effort history table
|
11. `/segments/{id}/` page — segment detail + effort history table
|
||||||
12. Activity detail — show matched segment efforts below stats
|
12. Activity detail — show matched segment efforts below stats
|
||||||
13. Athlete page — segments section
|
13. Athlete page — segments section
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Phase 4 Detail
|
||||||
|
|
||||||
|
### New API endpoints
|
||||||
|
|
||||||
|
| Endpoint | Notes |
|
||||||
|
|---|---|
|
||||||
|
| `GET /api/segments/{id}` | Single segment metadata |
|
||||||
|
| `GET /api/activities/{activity_id}/segment_efforts` | Scans user's effort files; returns `[{segment_id, segment_name, elapsed_s, started_at, ...}]` for hits on this activity. Auth required. |
|
||||||
|
| `GET /api/users/{handle}/segment_summary` | Public. Returns `[{segment: {...}, best_elapsed_s, effort_count}]` — all segments where this user has efforts, best time + count each. |
|
||||||
|
|
||||||
|
### SegmentDetail page (`/segments/{id}/`)
|
||||||
|
|
||||||
|
- Map with segment polyline (reuse MapLibre, same style as `SegmentsView`)
|
||||||
|
- Metadata row: name, sport, distance, created by
|
||||||
|
- Effort history table sorted newest-first; columns: Date, Time, Avg speed, Avg HR, Avg power, NP, Δ vs PR
|
||||||
|
- PR row highlighted; Δ column shows `+N s` / `-N s` in red/green vs best effort
|
||||||
|
- "Retrigger detection" button with loading state (blocks, shows count when done)
|
||||||
|
- Auth-gated: effort table only rendered if logged in
|
||||||
|
|
||||||
|
### Activity detail additions
|
||||||
|
|
||||||
|
Below the laps table: if the user is logged in and this activity has any segment effort hits, show a compact block — segment name (linked to `/segments/{id}/`) + elapsed time + Δ vs PR.
|
||||||
|
|
||||||
|
Fetch: `GET /api/activities/{activity_id}/segment_efforts` (gracefully hidden if 401 or empty).
|
||||||
|
|
||||||
|
### Athlete page additions
|
||||||
|
|
||||||
|
New "Segments" tab in `AthleteView.svelte`. Fetches `GET /api/users/{handle}/segment_summary` (public, no auth needed). Shows a table: Segment name (linked), Sport, Distance, Best time, # efforts. Empty state if no efforts yet.
|
||||||
|
|
||||||
|
### Effort time display
|
||||||
|
|
||||||
|
Use compact `m:ss` format (e.g. "5:23") for segment effort tables — add `formatElapsed(s: number): string` to `format.ts`.
|
||||||
|
|
||||||
|
### Post-save UX in SegmentCreate (updated)
|
||||||
|
|
||||||
|
After a successful save, instead of immediately redirecting to `/segments/`, show an inline prompt:
|
||||||
|
> Segment saved! Add another from this activity? [Yes, add another] [Done]
|
||||||
|
|
||||||
|
- **"Yes, add another"** — clears `segName`, `segSport`; resets handles to full range; keeps the map and activity loaded
|
||||||
|
- **"Done"** — navigates to `/segments/`
|
||||||
|
|||||||
@@ -29,6 +29,8 @@
|
|||||||
let segSport = '';
|
let segSport = '';
|
||||||
let saving = false;
|
let saving = false;
|
||||||
let saveError = '';
|
let saveError = '';
|
||||||
|
let justSaved = false;
|
||||||
|
let lastSavedName = '';
|
||||||
|
|
||||||
// ── Map ───────────────────────────────────────────────────────────────────
|
// ── Map ───────────────────────────────────────────────────────────────────
|
||||||
let mapEl: HTMLDivElement;
|
let mapEl: HTMLDivElement;
|
||||||
@@ -251,14 +253,29 @@
|
|||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
const d = await r.json();
|
const d = await r.json();
|
||||||
if (r.ok) { window.location.href = `${base}segments/`; }
|
if (r.ok) {
|
||||||
else { saveError = d.detail ?? 'Failed to save segment'; saving = false; }
|
lastSavedName = segName.trim();
|
||||||
|
justSaved = true;
|
||||||
|
saving = false;
|
||||||
|
} else {
|
||||||
|
saveError = d.detail ?? 'Failed to save segment';
|
||||||
|
saving = false;
|
||||||
|
}
|
||||||
} catch {
|
} catch {
|
||||||
saveError = 'Could not reach server';
|
saveError = 'Could not reach server';
|
||||||
saving = false;
|
saving = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function addAnother() {
|
||||||
|
justSaved = false;
|
||||||
|
segName = '';
|
||||||
|
segSport = selectedActivity?.sport ?? '';
|
||||||
|
startIdx = 0;
|
||||||
|
endIdx = maxIdx;
|
||||||
|
saveError = '';
|
||||||
|
}
|
||||||
|
|
||||||
// ── Helpers ───────────────────────────────────────────────────────────────
|
// ── Helpers ───────────────────────────────────────────────────────────────
|
||||||
function polylineDistance(pts: [number, number][]): number {
|
function polylineDistance(pts: [number, number][]): number {
|
||||||
let d = 0;
|
let d = 0;
|
||||||
@@ -406,17 +423,36 @@
|
|||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if saveError}
|
{#if justSaved}
|
||||||
<p class="text-red-400 text-sm mb-3">{saveError}</p>
|
<div class="rounded-lg bg-zinc-800 border border-zinc-700 px-4 py-3 flex flex-col gap-3">
|
||||||
{/if}
|
<p class="text-sm text-white">
|
||||||
|
<span class="text-green-400 font-medium">✓ "{lastSavedName}" saved.</span>
|
||||||
|
Add another segment from this activity?
|
||||||
|
</p>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<button
|
||||||
|
on:click={addAnother}
|
||||||
|
class="flex-1 py-2 rounded-lg text-sm font-medium bg-blue-600 hover:bg-blue-500 text-white transition-colors"
|
||||||
|
>Add another</button>
|
||||||
|
<a
|
||||||
|
href="{base}segments/"
|
||||||
|
class="flex-1 py-2 rounded-lg text-sm font-medium text-center bg-zinc-700 hover:bg-zinc-600 text-white transition-colors"
|
||||||
|
>Done</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
{#if saveError}
|
||||||
|
<p class="text-red-400 text-sm mb-3">{saveError}</p>
|
||||||
|
{/if}
|
||||||
|
|
||||||
<button
|
<button
|
||||||
on:click={save}
|
on:click={save}
|
||||||
disabled={!canSave}
|
disabled={!canSave}
|
||||||
class="w-full py-2.5 rounded-lg text-sm font-medium transition-colors
|
class="w-full py-2.5 rounded-lg text-sm font-medium transition-colors
|
||||||
bg-blue-600 hover:bg-blue-500 text-white
|
bg-blue-600 hover:bg-blue-500 text-white
|
||||||
disabled:opacity-40 disabled:cursor-not-allowed"
|
disabled:opacity-40 disabled:cursor-not-allowed"
|
||||||
>{saving ? 'Saving…' : 'Save segment'}</button>
|
>{saving ? 'Saving…' : 'Save segment'}</button>
|
||||||
|
{/if}
|
||||||
{/if}
|
{/if}
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user