+
@@ -496,18 +667,61 @@ function renderDayCard(d) {
}
body.hidden = false;
state.archiveExpanded.add(d.day);
- body.innerHTML = "${d.day}
Loading…
"; - await renderDayBody(body, d.day); + await loadDayBody(el); }); + wireDayCheck(el); // Restore a remembered-open day: populate its body immediately. Async; the // card is returned synchronously and fills in when the fetch resolves. if (open) { - body.innerHTML = "Loading…
"; - renderDayBody(body, d.day); + loadDayBody(el); } return el; } +// Load (or reload) a day's body, then sync its select-all checkbox. Centralised +// so the day-header toggle, a remembered-open day, and the day-level select-all +// all populate the body the same way and mark it loaded for refreshDayCheck. +async function loadDayBody(dayEl) { + const body = dayEl.querySelector(".day-body"); + // Only show the placeholder on a body that has never rendered; a refresh + // of an already-populated day keeps the old content on screen until the + // new payload arrives (renderDayBody swaps it in one go). + if (!body.dataset.loaded) body.innerHTML = "Loading…
"; + await renderDayBody(body, dayEl.dataset.day); + body.dataset.loaded = "1"; + refreshDayCheck(dayEl); +} + +// A pair carries GPS if it's a remote tile (already gated to gps_points>0) or +// any downloaded camera slot has a sidecar. Used to decide whether a clip that +// snaps to no journey/stop is worth an Ungrouped card or should be dropped. +function pairHasGps(pair) { + if (pair.remote) return true; + return CAMERAS.some((c) => pair[c.channel] && pair[c.channel].has_gpx); +} + +// True if a timeline event involves the named location: a journey whose start +// OR end is that place, or a stop at that place. Matches on the server's +// `named` flag + the place name, so a coincidental geocoded label can't match. +function eventMatchesLocation(ev, name) { + if (ev.kind === "journey") { + const j = ev.data; + return (j.start_named && j.start_label === name) || + (j.end_named && j.end_label === name); + } + const s = ev.data; + return !!(s.named && s.label === name); +} + +// Placeholder shown in an expanded day that has nothing to/from the filtered +// location (uses textContent — `name` is user-supplied). +function renderNoLocationActivity(name) { + const note = document.createElement("p"); + note.style.cssText = "color:var(--muted);font-size:12px"; + note.textContent = `No activity to/from ${name} on this day.`; + return note; +} + async function renderDayBody(body, date) { const q = new URLSearchParams(); archiveKindParams(q); @@ -521,7 +735,8 @@ async function renderDayBody(body, date) { const promises = [api(`/api/archive/day/${date}?` + q)]; if (state.showMaps) { promises.push( - api(`/api/archive/day/${date}/route`) + api(`/api/archive/day/${date}/route` + + (state.filters.geofenced ? "?show_geofenced=true" : "")) .catch((e) => { console.warn("route failed", e); return null; }), ); } else { @@ -534,13 +749,23 @@ async function renderDayBody(body, date) { return; } + // FLIP: snapshot keyed positions before the swap, animate after (below). + const flipPrev = flipCapture(body); + destroyJourneyMaps(body); body.innerHTML = ""; const journeys = (route && route.journeys) || []; const stops = (route && route.stops) || []; const hasGps = journeys.length > 0 || stops.length > 0; + const locFilter = state.filters.location; if (!hasGps) { + // With a location filter active, a day with no journeys/stops has nothing + // to/from that place — show the note rather than an unfiltered flat grid. + if (locFilter) { + body.appendChild(renderNoLocationActivity(locFilter)); + return; + } // No journeys and no stops — fall back to a flat grid. const grid = document.createElement("div"); grid.className = "clip-grid"; @@ -552,6 +777,7 @@ async function renderDayBody(body, date) { note.textContent = "No GPS data for this day."; body.appendChild(note); } + flipPlay(body, flipPrev); return; } @@ -561,43 +787,79 @@ async function renderDayBody(body, date) { // there directly; the rest snap to whichever event is // closest in time, so everything is anchored to *some* // visible context instead of a flat "other" pile. - const events = [ - ...journeys.map((j, idx) => ({ - kind: "journey", data: j, clips: [], idx, - start: j.start_ts, end: j.end_ts, - })), - ...stops.map((s, idx) => ({ - kind: "stop", data: s, clips: [], idx, - start: s.start_ts, end: s.end_ts, - })), - ]; - // Newest first — most recent activity at the top of the day. - events.sort((a, b) => b.start - a.start); + // Journeys group with a PADDED window (group_start_ts/group_end_ts from the + // server — the same _expand_journey_window the timeline uses) so the pull-away + // and pull-in clips that sit just outside the raw GPS journey (the stop + // boundary lands ~50 m inside the real drive) land on the journey card. Fall + // back to the raw window for older payloads. + const journeyEvents = journeys.map((j, idx) => ({ + kind: "journey", data: j, clips: [], idx, + start: j.group_start_ts ?? j.start_ts, + end: j.group_end_ts ?? j.end_ts, + })); + const stopEvents = stops.map((s, idx) => ({ + kind: "stop", data: s, clips: [], idx, + start: s.start_ts, end: s.end_ts, + })); + // Newest first — most recent activity at the top of the day. Render order and + // the snap fallback below scan this combined list. + const events = [...journeyEvents, ...stopEvents].sort((a, b) => b.start - a.start); + + // A loose clip (no event contains its timestamp) snaps to the nearest event + // only if it's within this gap; otherwise it collects in an "Ungrouped" card + // so a not-yet-skipped home clip can't drag across the whole day onto a journey. + const SNAP_MAX_GAP_S = 1800; // 30 min — matches the GPS session-gap splitter + const ungrouped = []; for (const pair of data.clips) { const ts = pair.timestamp; - let target = events.find((e) => ts >= e.start && ts <= e.end); + // Journeys win over an overlapping stop at the boundary: a pull-in clip that + // falls inside both the padded journey and the following stop belongs to the + // drive, not the dwell. + let target = + journeyEvents.find((e) => ts >= e.start && ts <= e.end) || + stopEvents.find((e) => ts >= e.start && ts <= e.end); if (!target) { - // Snap to the closest event by time gap. let best = null, bestGap = Infinity; for (const e of events) { const gap = ts < e.start ? e.start - ts : ts - e.end; if (gap < bestGap) { bestGap = gap; best = e; } } - target = best; + target = bestGap <= SNAP_MAX_GAP_S ? best : null; } if (target) target.clips.push(pair); + else if (pairHasGps(pair)) ungrouped.push(pair); + // A no-GPS pair with nothing within snap range has no place in the + // journey-organised view (its real context — e.g. a home dwell built from + // skipped clips — is invisible here), so drop it rather than float it in an + // Ungrouped card. Extends the trace-gate principle to downloaded clips. A + // no-GPS clip that DID snap to a journey/stop is kept (handled above). } - for (const ev of events) { + const shown = locFilter + ? events.filter((ev) => eventMatchesLocation(ev, locFilter)) + : events; + + for (const ev of shown) { if (ev.kind === "journey") { - body.appendChild(renderJourneyCard(ev.data, ev.clips, ev.idx, date)); + body.appendChild(renderJourneyCard( + ev.data, ev.clips, ev.idx, date, + (route && route.geofenced_tracks) || [], + )); } else { - body.appendChild(renderStopCard(ev.data, ev.clips, ev.idx)); + body.appendChild(renderStopCard(ev.data, ev.clips, ev.idx, date)); } } + if (locFilter) { + // The Ungrouped pile isn't tied to a place, so it's hidden while filtering. + if (!shown.length) body.appendChild(renderNoLocationActivity(locFilter)); + } else if (ungrouped.length) { + body.appendChild(renderUngroupedCard(ungrouped, date)); + } + wireClipPairMapClicks(body); + flipPlay(body, flipPrev); } // Clicking anywhere on a clip-pair (except the thumbnail image, @@ -687,7 +949,7 @@ function fmtEta(seconds) { return fmtDuration(seconds); } -function renderStopCard(stop, clips, idx) { +function renderStopCard(stop, clips, idx, date) { const startT = new Date(stop.start_time).toLocaleTimeString(); const endT = new Date(stop.end_time).toLocaleTimeString(); const hasClips = clips && clips.length > 0; @@ -698,10 +960,11 @@ function renderStopCard(stop, clips, idx) { if (!hasClips) { const el = document.createElement("div"); el.className = "stop-banner"; + el.dataset.flipKey = `${date}|sb|${stop.start_ts}`; el.innerHTML = ` Stopped for ${fmtDuration(stop.duration_s)} - at ${escHtml(placeLabel)} + at ${placeGlyph(stop.home, stop.named)}${escHtml(placeLabel)} ${startT} – ${endT} `; if (!stop.label) { @@ -722,14 +985,14 @@ function renderStopCard(stop, clips, idx) { ${startT} – ${endT} - - ${escHtml(placeLabel)} + ${placeGlyph(stop.home, stop.named)}${escHtml(placeLabel)} +
@@ -744,6 +1007,8 @@ function renderStopCard(stop, clips, idx) {
const grid = el.querySelector(".clip-grid");
for (const pair of clips) grid.appendChild(renderClipPair(pair));
+ const cardKey = `${date}|s|${stop.start_ts}`;
+ el.dataset.flipKey = cardKey;
let mapInited = false;
const initMap = () => {
if (mapInited) return;
@@ -763,18 +1028,64 @@ function renderStopCard(stop, clips, idx) {
}).addTo(map).bindTooltip(
`Parked ${fmtDuration(stop.duration_s)}`
);
- map.setView(center, 16);
+ // Restore the pre-re-render view (see the journey card's initMap for
+ // why the save listener is attached before the initial view is set).
+ map.on("moveend zoomend", () => {
+ state.journeyMapViews.set(cardKey,
+ { center: map.getCenter(), zoom: map.getZoom() });
+ });
+ const saved = state.journeyMapViews.get(cardKey);
+ if (saved) map.setView(saved.center, saved.zoom, { animate: false });
+ else map.setView(center, 16, { animate: false });
mapDiv._journeyMap = { map };
};
- wireJourneyToggle(el, initMap);
+ wireJourneyToggle(el, initMap, cardKey);
wireJourneyCheck(el);
return el;
}
-function renderJourneyCard(j, clips, idx, date) {
+function renderUngroupedCard(clips, date) {
const el = document.createElement("div");
- el.className = "journey-card collapsible";
+ el.className = "journey-card stop-card collapsible";
+ el.dataset.flipKey = `${date}|u`;
+ el.innerHTML = `
+ .
-for (const c of CAMERAS) {
- const ch = c.channel;
- document.getElementById(`dl-orig-${ch}`)
- .addEventListener("click", () => downloadOriginals(ch));
- document.getElementById(`export-join-${ch}`)
- .addEventListener("click", () => submitExport(`join_${ch}`));
- document.getElementById(`export-pip-${ch}`)
- .addEventListener("click", () =>
- submitExport(ch === "front" ? "pip" : `pip_${ch}`));
-}
-document.getElementById("clear-selection")
- .addEventListener("click", clearSelection);
+// ---- Consolidated "Clip actions" control (sticky toolbar) ----
+
+const CAMERA_LABEL_BY_CHANNEL = Object.fromEntries(CAMERAS.map((c) => [c.channel, c.label]));
+const EXPORT_CAMERAS_ALWAYS = ["front", "rear"];
+
+// Rebuild the Export optgroup: Front/Rear always; Tele/Interior only when the
+// current selection contains such clips. Originals first, then Joined (the order
+// the user reads top-to-bottom). Preserves the current selection if still valid.
+function rebuildClipActionMenu() {
+ const sel = document.getElementById("clip-action");
+ const grp = document.getElementById("clip-action-export");
+ if (!sel || !grp) return;
+ const present = new Set();
+ for (const v of state.archiveSelected.values()) {
+ for (const c of EXTRA_CAMERAS) if (v[c.channel]) present.add(c.channel);
+ }
+ const cams = [
+ ...EXPORT_CAMERAS_ALWAYS,
+ ...EXTRA_CAMERAS.filter((c) => present.has(c.channel)).map((c) => c.channel),
+ ];
+ // Only rewrite the optgroup when the camera set actually changed — avoids
+ // churning the DOM (and closing an open dropdown) on every checkbox tick.
+ const newValues = cams.flatMap((cam) => [`originals-${cam}`, `join-${cam}`]);
+ // grp is an
+ ▸
+
+ Ungrouped
+
+
+
+
+
+ `;
+ const grid = el.querySelector(".clip-grid");
+ for (const pair of clips) grid.appendChild(renderClipPair(pair));
+ wireJourneyToggle(el, () => {}, `${date}|u`);
+ wireJourneyCheck(el);
+ return el;
+}
+
+function renderCompletionPie(j) {
+ if (j.completion == null) return "";
+ const p = Math.round(j.completion * 100);
+ const done = p >= 100;
+ const d = j.completion_detail || {};
+ const dlMin = Math.round((d.downloaded_s || 0) / 60);
+ const totMin = Math.round((d.total_s || 0) / 60);
+ const tip = done
+ ? `Journey complete — ${totMin} min · ${d.total_clips || 0} clips downloaded`
+ : `${dlMin} of ${totMin} min · ${d.downloaded_clips || 0} of ${d.total_clips || 0} clips downloaded`;
+ return ``;
+}
+
+function renderJourneyCard(j, clips, idx, date, extraTracks) {
+ const el = document.createElement("div");
+ el.className = "journey-card collapsible drive";
const mapId = `journey-map-${j.start_ts}-${idx}`;
const distance = fmtDistance(j.distance_m);
const startT = new Date(j.start_time).toLocaleTimeString();
@@ -792,12 +1103,12 @@ function renderJourneyCard(j, clips, idx, date) {
title="Select all clips in this journey" />
${startT} – ${endT}
- ${escHtml(startLabel)}
+ ${placeGlyph(j.start_home, j.start_named)}${escHtml(startLabel)}
→
- ${escHtml(endLabel)}
+ ${placeGlyph(j.end_home, j.end_named)}${escHtml(endLabel)}
@@ -837,6 +1148,8 @@ function renderJourneyCard(j, clips, idx, date) {
// Lazy Leaflet init: defer until the journey is first opened.
// With many journeys per day this saves mounting a dozen maps
// upfront.
+ const cardKey = `${date}|j|${j.start_ts}`;
+ el.dataset.flipKey = cardKey;
let mapInited = false;
const initMap = () => {
if (mapInited) return;
@@ -857,6 +1170,25 @@ function renderJourneyCard(j, clips, idx, date) {
const err = cssVar("--err");
const errText = cssVar("--err-text");
const line = L.polyline(coords, { color: accent, weight: 5 }).addTo(map);
+ // Recovered (geofence-skipped) stretches: dashed and muted so they read
+ // apart from downloaded track. extraTracks is the WHOLE day's list, so
+ // each is clipped to THIS journey's padded window (same window that
+ // buckets clips to the card) via its per-point times — otherwise every
+ // journey map would draw every day's recovered stretch.
+ const gStart = j.group_start_ts ?? j.start_ts;
+ const gEnd = j.group_end_ts ?? j.end_ts;
+ for (const t of extraTracks || []) {
+ const tt = t.times || [];
+ const g = t.geojson.geometry.coordinates
+ .map(([lon, lat], i) => [lat, lon, tt[i]])
+ .filter(([, , ts]) => ts == null || (ts >= gStart && ts <= gEnd))
+ .map(([lat, lon]) => [lat, lon]);
+ if (g.length < 2) continue;
+ L.polyline(g, {
+ color: cssVar("--muted"), weight: 3,
+ dashArray: "6 6", opacity: 0.85,
+ }).addTo(map);
+ }
L.circleMarker([j.start_lat, j.start_lon], {
radius: 6, color: ok, fillColor: ok, fillOpacity: 1,
}).addTo(map).bindTooltip("Start");
@@ -888,7 +1220,24 @@ function renderJourneyCard(j, clips, idx, date) {
if (pairEl) flashClip(pairEl);
});
- map.fitBounds(line.getBounds(), { padding: [20, 20] });
+ // Restore the view a re-render tore down (day-body refresh after a
+ // queue action) — an animated re-fit reads as an unprompted zoom jump
+ // and loses the user's pan/zoom. Fresh cards fit the trace as before.
+ // The save listener is attached BEFORE the initial view is set:
+ // fitBounds fires moveend synchronously, and capturing that first fit
+ // is what lets an untouched map survive a re-render (otherwise the
+ // fallback re-fit runs against a not-yet-laid-out container and lands
+ // on a garbage zoom).
+ map.on("moveend zoomend", () => {
+ state.journeyMapViews.set(cardKey,
+ { center: map.getCenter(), zoom: map.getZoom() });
+ });
+ const saved = state.journeyMapViews.get(cardKey);
+ if (saved) {
+ map.setView(saved.center, saved.zoom, { animate: false });
+ } else {
+ map.fitBounds(line.getBounds(), { padding: [20, 20], animate: false });
+ }
mapDiv._journeyMap = {
map, coords, times, showPin,
@@ -897,7 +1246,7 @@ function renderJourneyCard(j, clips, idx, date) {
};
};
- wireJourneyToggle(el, initMap);
+ wireJourneyToggle(el, initMap, cardKey);
wireJourneyCheck(el);
const tlBtn = el.querySelector(".journey-open-tl");
if (tlBtn) {
@@ -913,13 +1262,14 @@ function renderJourneyCard(j, clips, idx, date) {
// First expansion triggers Leaflet init; subsequent expansions
// call invalidateSize() so the map re-measures after the body
// goes from display:none back to visible.
-function wireJourneyToggle(el, initMap) {
+// ``key`` (optional) persists the expansion in state.journeyExpanded so a
+// day-body re-render (queue refresh, stale reload on tab return) restores
+// the card instead of collapsing it.
+function wireJourneyToggle(el, initMap, key) {
const header = el.querySelector(".journey-header");
const body = el.querySelector(".journey-body");
const caret = el.querySelector(".caret");
- header.addEventListener("click", (e) => {
- if (e.target.closest("input, a, button")) return;
- const opening = body.hidden;
+ const setOpen = (opening) => {
body.hidden = !opening;
caret.textContent = opening ? "▾" : "▸";
if (opening) {
@@ -931,7 +1281,25 @@ function wireJourneyToggle(el, initMap) {
requestAnimationFrame(() => bundle.map.invalidateSize());
}
}
+ };
+ header.addEventListener("click", (e) => {
+ if (e.target.closest("input, a, button")) return;
+ const opening = body.hidden;
+ if (key) {
+ if (opening) state.journeyExpanded.add(key);
+ else state.journeyExpanded.delete(key);
+ }
+ setOpen(opening);
});
+ // Restore an expansion remembered across re-renders. Unhide immediately
+ // (no visual pop-in), but defer the map init a frame: this runs while the
+ // card is still detached (the renderer hasn't appended it yet), and
+ // Leaflet reading a zero-size container computes a garbage zoom.
+ if (key && state.journeyExpanded.has(key)) {
+ body.hidden = false;
+ caret.textContent = "▾";
+ requestAnimationFrame(() => setOpen(true));
+ }
}
function nearestCoordIdx(coords, latlng) {
@@ -987,20 +1355,70 @@ function flashClip(el) {
});
}
+// House glyph (SVG, no emoji) for the Home location — settings marker + labels.
+const HOME_GLYPH =
+ '';
+
+// Generic map-pin glyph (SVG, no emoji) for non-Home named places.
+const PIN_GLYPH =
+ '';
+
+// Label glyph: house for the designated Home, pin for any other named place,
+// nothing for a plain geocoded label.
+function placeGlyph(isHome, isNamed) {
+ return isHome ? HOME_GLYPH : (isNamed ? PIN_GLYPH : "");
+}
+
+// Small inline SVG status icons for not-yet-downloaded clips (no emoji).
+const TRIAGE_STATE_ICON = {
+ pending: '',
+ downloading: '',
+ failed: '',
+ skipped: '',
+ geofence: '',
+};
+const TRIAGE_STATE_TITLE = {
+ pending: "Queued for download",
+ downloading: "Downloading",
+ failed: "Download failed",
+ skipped: "Skipped (excluded from download)",
+ geofence: "Skipped: parked at home",
+};
+
function renderClipPair(pair) {
const el = document.createElement("div");
el.className = "clip-pair";
el.dataset.pairId = `${pair.timestamp}_${pair.sequence}`;
+ el.dataset.flipKey = `p|${el.dataset.pairId}`;
el.dataset.ts = pair.timestamp;
const time = new Date(pair.iso).toLocaleTimeString();
- const thumb = (c, cam) =>
- c ? ` {
+ if (c && c.remote) {
+ const st = c.state || "pending";
+ // A geofence auto-skip gets a distinct house glyph + accent so it
+ // reads apart from a manual skip.
+ const geo = st === "skipped" && c.skip_reason === "geofence";
+ const key = geo ? "geofence" : st;
+ const icon = TRIAGE_STATE_ICON[key] || TRIAGE_STATE_ICON.pending;
+ const title = TRIAGE_STATE_TITLE[key] || TRIAGE_STATE_TITLE.pending;
+ const unskipBtn = geo
+ ? ``
+ : "";
+ return `
` : ``;
+ };
// Kind badge: shown for parking / read-only pairs only. Driving
// pairs are the common case so we leave them un-badged to keep
// the grid quiet — absence of a chip reads as "driving".
@@ -1008,7 +1426,8 @@ function renderClipPair(pair) {
if (pair.event_type === "parking") {
return `Parking`;
}
- if (pair.event_type === "ro") {
+ if (pair.event_type === "ro" || pair.locked) {
+ // Dashcam-locked (ro) OR user-pinned (locked) both read as "retained".
return `Read-only`;
}
return "";
@@ -1027,6 +1446,16 @@ function renderClipPair(pair) {
: pair[c.channel] ? thumb(pair[c.channel], c.letter) : ""
).join("")}
`;
+ el.querySelectorAll(".unskip-btn").forEach((btn) => {
+ btn.addEventListener("click", async (e) => {
+ e.stopPropagation();
+ btn.disabled = true;
+ // On success the day re-renders (this button is gone); on failure
+ // runQueueAction swallows the error, so re-enable to allow a retry.
+ try { await runQueueAction("retry", [btn.dataset.filename]); }
+ finally { btn.disabled = false; }
+ });
+ });
el.querySelectorAll(".thumb img").forEach((img) => {
img.addEventListener("click", (e) => {
const thumbEl = e.currentTarget.closest(".thumb");
@@ -1060,6 +1489,9 @@ function renderClipPair(pair) {
};
state.archiveSelected.set(pairId, {
ts: Number(el.dataset.ts),
+ filenames: CAMERAS
+ .map((c) => pair[c.channel] && pair[c.channel].basename)
+ .filter(Boolean),
...Object.fromEntries(
CAMERAS.map((c) => [c.channel, clipId(c.letter)]),
),
@@ -1073,6 +1505,9 @@ function renderClipPair(pair) {
// unchecked as appropriate.
const card = el.closest(".journey-card");
if (card) refreshCardCheck(card);
+ // Also reflect up to the day-level "select all" header checkbox.
+ const dayEl = el.closest(".day");
+ if (dayEl) refreshDayCheck(dayEl);
});
return el;
@@ -1083,6 +1518,7 @@ function renderClipPair(pair) {
function setCardSelection(cardEl, select) {
cardEl.querySelectorAll('.clip-pair input[type="checkbox"]')
.forEach((cb) => {
+ if (cb.disabled) return; // skip any explicitly-disabled checkbox
if (cb.checked !== select) {
cb.checked = select;
// Reuse the per-clip change handler to update
@@ -1097,7 +1533,8 @@ function setCardSelection(cardEl, select) {
function refreshCardCheck(cardEl) {
const headerCb = cardEl.querySelector(".journey-check");
if (!headerCb) return;
- const pairs = cardEl.querySelectorAll('.clip-pair input[type="checkbox"]');
+ const pairs = cardEl.querySelectorAll(
+ '.clip-pair input[type="checkbox"]:not([disabled])');
const total = pairs.length;
if (total === 0) {
headerCb.disabled = true;
@@ -1128,6 +1565,58 @@ function wireJourneyCheck(cardEl) {
refreshCardCheck(cardEl);
}
+// ---- Day-level "select all" ----
+
+function refreshDayCheck(dayEl) {
+ const cb = dayEl.querySelector(".day-check");
+ if (!cb) return;
+ const body = dayEl.querySelector(".day-body");
+ // A collapsed / not-yet-loaded day keeps its checkbox actionable — clicking
+ // it loads the body and selects everything. We just can't reflect counts yet.
+ if (!body || body.dataset.loaded !== "1" || body.hidden) {
+ cb.disabled = false;
+ cb.indeterminate = false;
+ return;
+ }
+ const pairs = dayEl.querySelectorAll(
+ '.day-body .clip-pair input[type="checkbox"]:not([disabled])');
+ const total = pairs.length;
+ if (total === 0) { // loaded but nothing selectable (e.g. remote-only)
+ cb.disabled = true;
+ cb.checked = false;
+ cb.indeterminate = false;
+ return;
+ }
+ let checked = 0;
+ pairs.forEach((p) => { if (p.checked) checked++; });
+ cb.disabled = false;
+ cb.checked = checked === total;
+ cb.indeterminate = checked > 0 && checked < total;
+}
+
+function wireDayCheck(dayEl) {
+ const cb = dayEl.querySelector(".day-check");
+ if (!cb) return;
+ // Keep the tick from also toggling the day's expand/collapse (same header).
+ cb.addEventListener("click", (e) => e.stopPropagation());
+ cb.addEventListener("change", async (e) => {
+ const body = dayEl.querySelector(".day-body");
+ if (e.target.checked) {
+ // Selecting a whole day needs its clips in the DOM, so expand + load
+ // first if it hasn't been opened yet, then tick every clip.
+ if (body.hidden) {
+ body.hidden = false;
+ state.archiveExpanded.add(dayEl.dataset.day);
+ }
+ if (body.dataset.loaded !== "1") await loadDayBody(dayEl);
+ setCardSelection(body, true);
+ } else {
+ setCardSelection(body, false);
+ }
+ refreshDayCheck(dayEl);
+ });
+}
+
function updateArchiveActions() {
const n = state.archiveSelected.size;
const label = document.getElementById("selection-count");
@@ -1139,45 +1628,10 @@ function updateArchiveActions() {
label.textContent = `${n} selected`;
bar.classList.add("has-selection");
}
- // Per-camera selection counts, plus front+partner pair counts
- // for the PiP buttons.
- const count = Object.fromEntries(CAMERAS.map((c) => [c.channel, 0]));
- const withFront = Object.fromEntries(
- CAMERAS.map((c) => [c.channel, 0]),
- );
- for (const v of state.archiveSelected.values()) {
- for (const c of CAMERAS) {
- if (v[c.channel]) count[c.channel]++;
- if (v.front && v[c.channel]) withFront[c.channel]++;
- }
- }
- const hasFront = count.front > 0, hasRear = count.rear > 0;
- const hasPair = withFront.rear > 0;
- document.getElementById("dl-orig-front").disabled = !hasFront;
- document.getElementById("dl-orig-rear").disabled = !hasRear;
- document.getElementById("export-join-front").disabled = !hasFront;
- document.getElementById("export-join-rear").disabled = !hasRear;
- document.getElementById("export-pip-front").disabled = !hasPair;
- document.getElementById("export-pip-rear").disabled = !hasPair;
- // Third-camera actions: the whole button group stays hidden until
- // the selection contains a clip from that camera, so 2-camera
- // setups see the original action bar unchanged.
- for (const c of EXTRA_CAMERAS) {
- const group = document.getElementById(`actions-${c.channel}`);
- if (!group) continue;
- const present = count[c.channel] > 0;
- group.hidden = !present;
- if (!present) continue;
- document.getElementById(`dl-orig-${c.channel}`).disabled = false;
- document.getElementById(`export-join-${c.channel}`).disabled = false;
- document.getElementById(`export-pip-${c.channel}`).disabled =
- withFront[c.channel] === 0;
- }
- document.getElementById("clear-selection").disabled = n === 0;
-}
-
-// Call once on load so the disabled buttons render correctly.
-updateArchiveActions();
+ document.getElementById("clip-action-apply").disabled = n === 0;
+ document.getElementById("clip-action-clear").disabled = n === 0;
+ rebuildClipActionMenu();
+}
function clearSelection() {
state.archiveSelected.clear();
@@ -1188,6 +1642,11 @@ function clearSelection() {
// checkbox so it goes back to unchecked too.
document.querySelectorAll("#view-archive .journey-card")
.forEach(refreshCardCheck);
+ // And every day-level "select all" header checkbox.
+ document.querySelectorAll("#view-archive .day-check").forEach((cb) => {
+ cb.checked = false;
+ cb.indeterminate = false;
+ });
updateArchiveActions();
}
@@ -1295,21 +1754,147 @@ document.getElementById("exports-toggle").addEventListener("click", () => {
setExportsPanelOpen(!open);
});
-// One originals/join/pip button trio per camera. "pip" is the
-// legacy name of the front-main job; every other camera's PiP is
-// pip_
+
`;
+ }
+ return c ? `${icon}
+ ${escHtml(c.basename)}
+ ${unskipBtn}
+ ${escHtml(c.basename)}
—
-
- Originals:
-
-
-
-
- Joined:
-
-
-
-
- PIP:
-
-
-
-
-
- Tele:
-
-
-
-
-
- Interior:
-
-
-
+
+
+
+
+
-
@@ -190,21 +163,26 @@
diff --git a/web/static/styles.css b/web/static/styles.css
index 484af08..5ca05ee 100644
--- a/web/static/styles.css
+++ b/web/static/styles.css
@@ -179,12 +179,17 @@ input[type="radio"] {
/* Waiting: match the sync-status badge's amber so the button and badge
* read as the same state. */
.icon-btn.waiting { color: var(--warn); border-color: var(--warn); }
+.icon-btn.triaging { color: var(--accent); border-color: var(--accent); }
/* When the syncing icon is the visible one, give it a gentle
* continuous spin so the button reads as "in progress". */
.icon-btn.active #sync-icon-sync:not([hidden]) {
animation: vfs-spin 1.6s linear infinite;
transform-origin: 50% 50%;
}
+.icon-btn.triaging #sync-icon-sync:not([hidden]) {
+ animation: vfs-spin 1.6s linear infinite;
+ transform-origin: 50% 50%;
+}
@keyframes vfs-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
@@ -309,6 +314,7 @@ nav a.active { background: var(--panel-2); }
* dark/light themes stay coherent — extend the palette only if a
* future revision adds new accent tokens. */
.status.downloading { color: var(--ok); border-color: var(--ok); }
+.status.triaging { color: var(--accent); border-color: var(--accent); }
.status.waiting { color: var(--warn); border-color: var(--warn); }
.status.paused { color: var(--err-text); border-color: var(--err); }
.status.error {
@@ -337,6 +343,8 @@ main {
}
.archive-filters .spacer { flex: 1; }
.archive-filters .kind-label { flex-direction: row; }
+.archive-filters .loc-filter { align-items: center; gap: 6px; }
+.archive-filters .loc-filter select { max-width: 170px; }
.archive-actions {
display: flex; align-items: center; gap: 8px;
@@ -550,6 +558,13 @@ main {
align-items: baseline;
}
.day-header:hover { background: rgba(255, 255, 255, 0.015); }
+.day-header .day-check {
+ flex: 0 0 auto;
+ align-self: center;
+ margin: 0;
+ cursor: pointer;
+ accent-color: var(--accent);
+}
/* The date is the strongest landmark on the archive page;
* it deserves more weight than the metadata that follows it.
* Pre-bolder this was 15px/600 (≈1.07× the 14px body — flat).
@@ -636,16 +651,47 @@ main {
/* Filenames are debug-y data; fade them and clip to one line.
* Hover reveals the full string via the title attribute on the
* label element (set in the renderer). */
-.clip-pair .label {
- font-size: 10px;
- color: var(--muted);
- font-family: "SF Mono", "Menlo", monospace;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- opacity: 0.75;
+/* Per-clip filename labels are noise in the archive grid — the new
+ * Download Actions selection + journey context identify clips instead. */
+.clip-pair .label { display: none; }
+.clip-pair .thumb.remote {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ aspect-ratio: 16 / 9; /* match a real thumb's footprint */
+ background: repeating-linear-gradient(
+ 45deg, var(--panel), var(--panel) 8px, var(--bg) 8px, var(--bg) 16px);
+ opacity: 0.85;
+}
+.clip-pair .thumb.remote .remote-badge {
+ position: absolute;
+ top: 4px;
+ right: 6px;
+ font-size: 14px;
+ opacity: 0.8;
+}
+.clip-pair .thumb.remote .remote-badge svg { display: block; }
+.clip-pair .thumb.remote.state-pending .remote-badge { color: var(--accent); }
+.clip-pair .thumb.remote.state-downloading .remote-badge { color: var(--accent); }
+.clip-pair .thumb.remote.state-failed .remote-badge { color: var(--err); }
+.clip-pair .thumb.remote.state-skipped .remote-badge { color: var(--muted); }
+.clip-pair .thumb.remote.state-skipped { opacity: 0.5; }
+.clip-pair .thumb.remote.geofence .remote-badge { color: var(--accent); }
+.clip-pair .thumb.remote .remote-badge .spin { animation: vfs-spin 1.6s linear infinite; transform-origin: 50% 50%; }
+.clip-pair .thumb.remote .unskip-btn {
+ position: absolute;
+ bottom: 6px;
+ right: 6px;
+ font-size: 11px;
+ padding: 2px 8px;
+ background: var(--panel);
+ color: var(--text);
+ border: 1px solid var(--muted);
+ border-radius: 4px;
+ cursor: pointer;
}
-.clip-pair:hover .label { opacity: 1; }
+.clip-pair .thumb.remote .unskip-btn:hover { border-color: var(--accent); }
+.clip-pair .thumb.remote .unskip-btn:disabled { opacity: 0.5; cursor: default; }
.clip-pair.flash {
outline: 2px solid var(--accent);
animation: flash-pulse 1.5s ease-out;
@@ -656,6 +702,11 @@ main {
}
#map { height: 340px; border-radius: 8px; margin: 16px 0; }
+.home-marker { color: var(--accent); display: block; }
+.home-marker-wrap { display: flex; align-items: center; justify-content: center; }
+.journey-title .start-label svg,
+.journey-title .end-label svg,
+.stop-label svg { vertical-align: -2px; margin-right: 3px; color: var(--accent); }
.journey-table {
width: 100%; border-collapse: collapse;
@@ -680,6 +731,11 @@ main {
display: flex; align-items: center; gap: 12px;
padding: 10px 14px;
flex-wrap: wrap;
+ /* Reserve the Timeline button's row height (only drive cards carry it) so a
+ button-less stop / ungrouped header is the same height as a drive's. With
+ box-sizing: border-box this clamps every header — whatever its padding — to
+ one height; align-items: center keeps the content vertically centred. */
+ min-height: 50px;
}
.journey-card.collapsible .journey-header {
cursor: pointer;
@@ -715,7 +771,13 @@ main {
.start-label, .end-label, .stop-label {
overflow-wrap: anywhere;
}
-.journey-header .journey-times { color: var(--text); font-size: 13px; }
+/* tabular-nums keeps every HH:MM:SS range the same width, so the journey-title
+ column starts at the same x on drive and stop cards. */
+.journey-header .journey-times {
+ color: var(--text); font-size: 13px;
+ font-variant-numeric: tabular-nums;
+ flex: 0 0 auto;
+}
.journey-header .journey-meta {
color: var(--muted); font-size: 12px;
margin-left: auto;
@@ -728,9 +790,24 @@ main {
.journey-card .clip-grid { padding: 12px; }
.stop-card .journey-header { background: rgba(241, 196, 15, 0.05); }
-.stop-card .stop-icon { font-size: 14px; color: var(--warn); }
+/* In the stop-card header the icon sits in the right-hand action slot — the
+ same place the Timeline button occupies on drive cards (8px past the meta,
+ matching the button's margin). */
+.stop-card .journey-header .stop-icon {
+ font-size: 14px; color: var(--warn);
+ flex: 0 0 auto; margin-left: 8px;
+}
.stop-card .journey-map { height: 200px; }
+/* Drives are the spine of the day: accent rail + graded header wash + bold title.
+ Stops recede (the existing faint amber header stays; just dim + tighten it). */
+.journey-card.drive { border-left: 3px solid var(--accent); }
+.journey-card.drive .journey-header {
+ background: linear-gradient(to right, var(--accent-18), transparent 55%), var(--panel-2);
+}
+.journey-card.drive .journey-title { font-weight: 700; }
+.stop-card .journey-header { opacity: 0.85; padding: 6px 14px; }
+
.stop-banner {
display: flex; align-items: center; gap: 10px;
padding: 8px 14px;
@@ -1483,6 +1560,7 @@ main {
.queue-filters,
.archive-actions { padding: 10px; }
.filters .spacer,
+ .queue-filters .spacer,
.archive-actions .spacer,
.archive-filters .spacer { display: none; }
@@ -1670,6 +1748,7 @@ main {
border: none;
}
.status.downloading { background: var(--ok); }
+ .status.triaging { background: var(--accent); }
.status.waiting { background: var(--warn); }
.status.paused { background: var(--err); }
.status.error { background: #7f1d1d; }
@@ -2417,4 +2496,103 @@ main {
.switch:checked { background: var(--accent-45); border-color: var(--accent); }
.switch:checked::before { transform: translateX(20px); background: var(--on-accent); }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+
+/* --- Named locations list (Settings → GPS) --- */
+.loc-list { margin: 8px 0 4px; }
+.loc {
+ border: 1px solid var(--border);
+ border-radius: 8px;
+ margin: 7px 0;
+ background: var(--panel);
+ overflow: hidden;
+}
+.loc.open { border-color: var(--accent); }
+.loc-row {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 10px 12px;
+ cursor: pointer;
+}
+.loc-ico { color: var(--accent); display: inline-flex; }
+.loc-name { font-weight: 600; color: var(--text); }
+.loc-badge {
+ font-size: 10px;
+ padding: 1px 7px;
+ border-radius: 10px;
+ border: 1px solid transparent;
+}
+.loc-badge.home { color: var(--warn); border-color: var(--warn); }
+.loc-badge.excl { color: var(--accent); border-color: var(--accent-45); }
+.loc-meta {
+ margin-left: auto;
+ color: var(--muted);
+ font-size: 12px;
+ font-variant-numeric: tabular-nums;
+}
+.loc-caret { color: var(--muted); }
+.loc-editor {
+ border-top: 1px solid var(--border);
+ padding: 12px;
+ background: var(--panel-2);
+}
+.loc-map { height: 220px; border-radius: 8px; margin: 0 0 10px; }
+.loc-actions { display: flex; gap: 8px; margin-top: 12px; }
+.loc-del-btn { margin-left: auto; color: var(--err-text); border-color: var(--err); }
+.loc-add {
+ width: 100%;
+ border: 1px dashed var(--border-hover);
+ border-radius: 8px;
+ padding: 11px;
+ margin-top: 9px;
+ background: transparent;
+ color: var(--muted);
+}
+.loc-add:hover { background: var(--panel-2); color: var(--text); }
+.loc-empty { margin: 8px 2px; }
.switch:disabled { opacity: 0.5; cursor: default; }
+.clip-action-group { display: flex; align-items: center; gap: 6px; }
+.clip-action-group select { max-width: 190px; }
+/* The Downloads bar reuses .clip-action-group; give its label the same muted
+ treatment as the archive action label so the two bars read identically. */
+.queue-filters .action-label {
+ font-size: 12px; color: var(--muted);
+ font-weight: 500; margin-right: 2px;
+}
+
+/* GPS triage badge — per-file indicator in the Downloads queue table. */
+.gps-badge {
+ display: inline-block;
+ min-width: 1.2em;
+ text-align: center;
+ font-weight: 600;
+ border-radius: 4px;
+ padding: 0 4px;
+}
+.gps-badge.gps-ok { color: var(--ok); }
+.gps-badge.gps-none { color: var(--muted); }
+.gps-badge.gps-pending { color: var(--muted); opacity: 0.7; }
+.queue-items td.gps-cell { text-align: center; }
+
+/* Journey completion pie — small conic-gradient circle in the journey header. */
+.journey-pie {
+ display: inline-block;
+ width: 14px;
+ height: 14px;
+ border-radius: 50%;
+ vertical-align: -2px;
+ margin-right: 8px;
+ background: var(--panel);
+ box-shadow: inset 0 0 0 1px var(--border);
+}
+.journey-pie::before {
+ content: "";
+ display: block;
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ background: conic-gradient(var(--muted) calc(var(--pp) * 1%), transparent 0);
+}
+.journey-pie.is-complete::before {
+ background: var(--ok);
+}
Downloads
Read-only - - - + +
+
+
+
+
+