planning
This commit is contained in:
Davide Scaini
@@ -0,0 +1,326 @@
|
||||
---
|
||||
import Base from '../../layouts/Base.astro';
|
||||
const editUrl = import.meta.env.PUBLIC_EDIT_URL ?? '';
|
||||
const baseUrl = import.meta.env.BASE_URL ?? '/';
|
||||
---
|
||||
<Base title="Convert activity — BincioActivity">
|
||||
<div class="max-w-lg mx-auto">
|
||||
<h1 class="text-xl font-bold text-white mb-1">Convert activity</h1>
|
||||
<p class="text-sm text-zinc-400 mb-6">
|
||||
Convert a GPX, FIT, or TCX file to BAS format — entirely in your browser, nothing uploaded.
|
||||
</p>
|
||||
|
||||
<!-- Step 1: pick file -->
|
||||
<div id="step-pick">
|
||||
<div
|
||||
id="conv-drop"
|
||||
class="border-2 border-dashed border-zinc-700 rounded-xl p-10 text-center text-zinc-500 text-sm cursor-pointer hover:border-zinc-500 hover:text-zinc-300 transition-colors"
|
||||
>
|
||||
<div class="text-4xl mb-3">📁</div>
|
||||
<div id="conv-drop-label">Drop a FIT, GPX, or TCX file<br/>or tap to browse</div>
|
||||
<input id="conv-input" type="file" accept=".fit,.gpx,.tcx,.fit.gz,.gpx.gz,.tcx.gz" class="hidden" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 2: loading / converting -->
|
||||
<div id="step-loading" style="display:none" class="text-center py-12">
|
||||
<div id="conv-spinner" class="text-4xl mb-4 animate-spin inline-block">⚙</div>
|
||||
<p id="conv-loading-msg" class="text-zinc-400 text-sm">Loading converter…</p>
|
||||
<div class="mt-4 w-full bg-zinc-800 rounded-full h-1.5">
|
||||
<div id="conv-progress-bar" class="bg-blue-500 h-1.5 rounded-full transition-all duration-300" style="width:0%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 3: result -->
|
||||
<div id="step-result" style="display:none">
|
||||
<div class="bg-zinc-900 border border-zinc-800 rounded-xl p-5 mb-4">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<span id="res-sport-icon" class="text-2xl"></span>
|
||||
<div>
|
||||
<h2 id="res-title" class="font-semibold text-white"></h2>
|
||||
<p id="res-date" class="text-xs text-zinc-500"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-3 text-center mb-4">
|
||||
<div>
|
||||
<p id="res-dist" class="text-lg font-bold text-white">—</p>
|
||||
<p class="text-xs text-zinc-500">Distance</p>
|
||||
</div>
|
||||
<div>
|
||||
<p id="res-time" class="text-lg font-bold text-white">—</p>
|
||||
<p class="text-xs text-zinc-500">Duration</p>
|
||||
</div>
|
||||
<div>
|
||||
<p id="res-elev" class="text-lg font-bold text-white">—</p>
|
||||
<p class="text-xs text-zinc-500">Elevation</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<button id="btn-download-json" class="w-full py-2 px-4 rounded-lg text-sm font-medium bg-zinc-700 hover:bg-zinc-600 text-white transition-colors">
|
||||
⬇ Download BAS JSON
|
||||
</button>
|
||||
<button id="btn-download-geojson" class="w-full py-2 px-4 rounded-lg text-sm font-medium bg-zinc-700 hover:bg-zinc-600 text-white transition-colors" style="display:none">
|
||||
⬇ Download GeoJSON track
|
||||
</button>
|
||||
{editUrl && (
|
||||
<button id="btn-save" class="w-full py-2 px-4 rounded-lg text-sm font-medium text-white transition-colors" style="background:#3b82f6">
|
||||
☁ Save to my bincio
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<p id="conv-save-status" class="mt-2 text-xs text-center" style="min-height:1.25rem"></p>
|
||||
</div>
|
||||
<button id="btn-convert-another" class="text-sm text-zinc-500 hover:text-white transition-colors">
|
||||
← Convert another file
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Step 4: error -->
|
||||
<div id="step-error" style="display:none" class="text-center py-12">
|
||||
<div class="text-4xl mb-3">⚠</div>
|
||||
<p id="conv-error-msg" class="text-red-400 text-sm mb-4"></p>
|
||||
<button id="btn-retry" class="text-sm text-zinc-500 hover:text-white transition-colors">← Try another file</button>
|
||||
</div>
|
||||
</div>
|
||||
</Base>
|
||||
|
||||
<script define:vars={{ editUrl, baseUrl }}>
|
||||
// ── DOM refs ────────────────────────────────────────────────────────────────
|
||||
const stepPick = document.getElementById('step-pick');
|
||||
const stepLoading = document.getElementById('step-loading');
|
||||
const stepResult = document.getElementById('step-result');
|
||||
const stepError = document.getElementById('step-error');
|
||||
const drop = document.getElementById('conv-drop');
|
||||
const input = document.getElementById('conv-input');
|
||||
const dropLabel = document.getElementById('conv-drop-label');
|
||||
const loadingMsg = document.getElementById('conv-loading-msg');
|
||||
const progressBar = document.getElementById('conv-progress-bar');
|
||||
const errorMsg = document.getElementById('conv-error-msg');
|
||||
const saveStatus = document.getElementById('conv-save-status');
|
||||
|
||||
function showStep(name) {
|
||||
stepPick.style.display = name === 'pick' ? '' : 'none';
|
||||
stepLoading.style.display = name === 'loading' ? '' : 'none';
|
||||
stepResult.style.display = name === 'result' ? '' : 'none';
|
||||
stepError.style.display = name === 'error' ? '' : 'none';
|
||||
}
|
||||
|
||||
function setProgress(pct, msg) {
|
||||
progressBar.style.width = pct + '%';
|
||||
if (msg) loadingMsg.textContent = msg;
|
||||
}
|
||||
|
||||
// ── Auto-load from recorder (sessionStorage handoff) ───────────────────────
|
||||
window.addEventListener('load', () => {
|
||||
const pending = sessionStorage.getItem('pending_convert');
|
||||
if (pending) {
|
||||
sessionStorage.removeItem('pending_convert');
|
||||
try {
|
||||
const { name, dataUrl } = JSON.parse(pending);
|
||||
fetch(dataUrl).then(r => r.blob()).then(blob => {
|
||||
startConversion(new File([blob], name, { type: 'application/gpx+xml' }));
|
||||
});
|
||||
} catch (_) {}
|
||||
}
|
||||
});
|
||||
|
||||
// ── File picking ────────────────────────────────────────────────────────────
|
||||
drop.addEventListener('click', () => input.click());
|
||||
drop.addEventListener('dragover', e => { e.preventDefault(); drop.style.borderColor = 'var(--accent)'; });
|
||||
drop.addEventListener('dragleave', () => { drop.style.borderColor = ''; });
|
||||
drop.addEventListener('drop', e => {
|
||||
e.preventDefault(); drop.style.borderColor = '';
|
||||
if (e.dataTransfer?.files[0]) startConversion(e.dataTransfer.files[0]);
|
||||
});
|
||||
input.addEventListener('change', () => { if (input.files?.[0]) startConversion(input.files[0]); });
|
||||
document.getElementById('btn-retry').addEventListener('click', reset);
|
||||
document.getElementById('btn-convert-another').addEventListener('click', reset);
|
||||
|
||||
function reset() {
|
||||
input.value = '';
|
||||
dropLabel.innerHTML = 'Drop a FIT, GPX, or TCX file<br/>or tap to browse';
|
||||
showStep('pick');
|
||||
}
|
||||
|
||||
// ── Pyodide state ───────────────────────────────────────────────────────────
|
||||
let pyodide = null;
|
||||
let pyodideReady = false;
|
||||
let pyodideLoading = false;
|
||||
|
||||
async function ensurePyodide() {
|
||||
if (pyodideReady) return;
|
||||
if (pyodideLoading) {
|
||||
// Wait for the ongoing load
|
||||
while (!pyodideReady) await new Promise(r => setTimeout(r, 100));
|
||||
return;
|
||||
}
|
||||
pyodideLoading = true;
|
||||
|
||||
setProgress(5, 'Loading Python runtime…');
|
||||
const script = document.createElement('script');
|
||||
script.src = 'https://cdn.jsdelivr.net/pyodide/v0.26.4/full/pyodide.js';
|
||||
await new Promise((resolve, reject) => {
|
||||
script.onload = resolve; script.onerror = reject;
|
||||
document.head.appendChild(script);
|
||||
});
|
||||
|
||||
setProgress(20, 'Initialising Python…');
|
||||
pyodide = await window.loadPyodide({ indexURL: 'https://cdn.jsdelivr.net/pyodide/v0.26.4/full/' });
|
||||
|
||||
setProgress(40, 'Loading packages (lxml, pyyaml)…');
|
||||
await pyodide.loadPackage(['lxml', 'pyyaml']);
|
||||
|
||||
setProgress(60, 'Installing fitdecode, gpxpy, rdp…');
|
||||
await pyodide.runPythonAsync(`
|
||||
import micropip
|
||||
await micropip.install(['fitdecode', 'gpxpy', 'rdp'])
|
||||
`);
|
||||
|
||||
setProgress(80, 'Loading bincio extract pipeline…');
|
||||
const wheelUrl = new URL('/bincio.whl', window.location.origin).href;
|
||||
await pyodide.runPythonAsync(`
|
||||
import micropip
|
||||
await micropip.install('${wheelUrl}', deps=False)
|
||||
`);
|
||||
|
||||
setProgress(100, 'Ready.');
|
||||
pyodideReady = true;
|
||||
pyodideLoading = false;
|
||||
}
|
||||
|
||||
// ── Conversion ──────────────────────────────────────────────────────────────
|
||||
let lastResult = null;
|
||||
|
||||
async function startConversion(file) {
|
||||
showStep('loading');
|
||||
setProgress(0, 'Loading converter…');
|
||||
|
||||
let arrayBuffer;
|
||||
try {
|
||||
arrayBuffer = await file.arrayBuffer();
|
||||
} catch (e) {
|
||||
showError('Could not read file: ' + e.message);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await ensurePyodide();
|
||||
} catch (e) {
|
||||
showError('Failed to load Python runtime: ' + e.message);
|
||||
return;
|
||||
}
|
||||
|
||||
setProgress(100, 'Converting…');
|
||||
|
||||
try {
|
||||
// Write file to Pyodide virtual filesystem
|
||||
const fname = file.name;
|
||||
pyodide.FS.writeFile('/tmp/' + fname, new Uint8Array(arrayBuffer));
|
||||
|
||||
const resultJson = await pyodide.runPythonAsync(`
|
||||
import json, os, shutil
|
||||
from pathlib import Path
|
||||
from bincio.extract.parsers.factory import parse_file
|
||||
from bincio.extract.metrics import compute
|
||||
from bincio.extract.writer import build_summary, make_activity_id, write_activity
|
||||
|
||||
outdir = Path('/tmp/bincio_out')
|
||||
if outdir.exists(): shutil.rmtree(outdir)
|
||||
outdir.mkdir()
|
||||
|
||||
activity = parse_file(Path('/tmp/${fname.replace(/'/g, "\\'")}'))
|
||||
metrics = compute(activity)
|
||||
act_id = make_activity_id(activity)
|
||||
write_activity(activity, metrics, outdir, privacy='public', rdp_epsilon=0.0001)
|
||||
|
||||
detail_path = outdir / 'activities' / f'{act_id}.json'
|
||||
geojson_path = outdir / 'activities' / f'{act_id}.geojson'
|
||||
|
||||
detail = json.loads(detail_path.read_text())
|
||||
geojson = json.loads(geojson_path.read_text()) if geojson_path.exists() else None
|
||||
|
||||
json.dumps({'id': act_id, 'detail': detail, 'geojson': geojson})
|
||||
`);
|
||||
|
||||
lastResult = JSON.parse(resultJson);
|
||||
showResult(lastResult);
|
||||
} catch (e) {
|
||||
showError(e.message || String(e));
|
||||
}
|
||||
}
|
||||
|
||||
// ── Result display ──────────────────────────────────────────────────────────
|
||||
const SPORT_ICONS = { cycling: '🚴', running: '🏃', hiking: '🥾', walking: '🚶', swimming: '🏊', skiing: '⛷️', other: '⚡' };
|
||||
|
||||
function showResult(r) {
|
||||
const d = r.detail;
|
||||
document.getElementById('res-sport-icon').textContent = SPORT_ICONS[d.sport] ?? '⚡';
|
||||
document.getElementById('res-title').textContent = d.title || 'Untitled';
|
||||
document.getElementById('res-date').textContent = d.started_at ? new Date(d.started_at).toLocaleString() : '';
|
||||
|
||||
const distKm = d.distance_m ? (d.distance_m / 1000).toFixed(1) + ' km' : '—';
|
||||
const dur = d.moving_time_s ?? d.duration_s;
|
||||
const durStr = dur ? `${Math.floor(dur/3600)}h ${Math.floor((dur%3600)/60)}m` : '—';
|
||||
const elevStr = d.elevation_gain_m ? Math.round(d.elevation_gain_m) + ' m' : '—';
|
||||
document.getElementById('res-dist').textContent = distKm;
|
||||
document.getElementById('res-time').textContent = durStr;
|
||||
document.getElementById('res-elev').textContent = elevStr;
|
||||
|
||||
document.getElementById('btn-download-geojson').style.display = r.geojson ? '' : 'none';
|
||||
showStep('result');
|
||||
}
|
||||
|
||||
function showError(msg) {
|
||||
errorMsg.textContent = msg;
|
||||
showStep('error');
|
||||
}
|
||||
|
||||
// ── Downloads ───────────────────────────────────────────────────────────────
|
||||
function downloadJson(data, filename) {
|
||||
const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url; a.download = filename; a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
document.getElementById('btn-download-json').addEventListener('click', () => {
|
||||
if (lastResult) downloadJson(lastResult.detail, lastResult.id + '.json');
|
||||
});
|
||||
|
||||
document.getElementById('btn-download-geojson').addEventListener('click', () => {
|
||||
if (lastResult?.geojson) downloadJson(lastResult.geojson, lastResult.id + '.geojson');
|
||||
});
|
||||
|
||||
// ── Save to bincio ──────────────────────────────────────────────────────────
|
||||
const saveBtn = document.getElementById('btn-save');
|
||||
if (saveBtn) {
|
||||
saveBtn.addEventListener('click', async () => {
|
||||
if (!lastResult) return;
|
||||
saveBtn.disabled = true;
|
||||
saveStatus.textContent = 'Saving…';
|
||||
saveStatus.style.color = 'var(--text-4)';
|
||||
|
||||
// Reconstruct a file blob from the detail JSON and POST as a virtual upload
|
||||
// The edit server expects a raw activity file, so we use a dedicated endpoint instead
|
||||
const target = (localStorage.getItem('bincio_edit_url') || editUrl).replace(/\/$/, '');
|
||||
try {
|
||||
const r = await fetch(`${target}/api/import-bas`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ detail: lastResult.detail, geojson: lastResult.geojson }),
|
||||
});
|
||||
if (!r.ok) throw new Error(await r.text());
|
||||
const data = await r.json();
|
||||
saveStatus.textContent = 'Saved!';
|
||||
saveStatus.style.color = '#4ade80';
|
||||
setTimeout(() => { window.location.href = `${baseUrl}activity/${data.id}/`; }, 800);
|
||||
} catch (e) {
|
||||
saveStatus.textContent = 'Error: ' + e.message;
|
||||
saveStatus.style.color = '#f87171';
|
||||
saveBtn.disabled = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user