sync strava data from web ui
This commit is contained in:
Davide Scaini
+208
-27
@@ -124,28 +124,80 @@ const baseUrl = import.meta.env.BASE_URL ?? '/';
|
||||
</nav>
|
||||
|
||||
{editUrl && (
|
||||
<!-- Upload modal -->
|
||||
<!-- Add activity modal -->
|
||||
<div
|
||||
id="upload-modal"
|
||||
style="display:none"
|
||||
class="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-center justify-center"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="Upload activity"
|
||||
aria-label="Add activity"
|
||||
>
|
||||
<div class="bg-zinc-900 border border-zinc-800 rounded-xl p-6 w-full max-w-sm mx-4 shadow-2xl">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="font-semibold text-white text-sm">Upload activity</h2>
|
||||
<h2 id="upload-title" class="font-semibold text-white text-sm">Add activity</h2>
|
||||
<button id="upload-close" class="text-zinc-500 hover:text-white transition-colors text-xl leading-none" aria-label="Close">×</button>
|
||||
</div>
|
||||
<div
|
||||
id="upload-drop"
|
||||
class="border-2 border-dashed border-zinc-700 rounded-lg p-8 text-center text-zinc-500 text-sm cursor-pointer hover:border-zinc-500 hover:text-zinc-300 transition-colors"
|
||||
>
|
||||
<div id="upload-label">Drop a FIT, GPX, or TCX file<br/>or click to browse</div>
|
||||
<input id="upload-input" type="file" accept=".fit,.gpx,.tcx,.fit.gz,.gpx.gz,.tcx.gz" class="hidden" />
|
||||
|
||||
<!-- View: choose source -->
|
||||
<div id="upload-view-choose">
|
||||
<div class="flex flex-col gap-3">
|
||||
<button
|
||||
id="upload-choose-file"
|
||||
class="flex items-center gap-3 p-4 rounded-lg border border-zinc-700 hover:border-zinc-500 hover:bg-zinc-800 transition-colors text-left"
|
||||
>
|
||||
<span class="text-2xl">📁</span>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-white">Upload file</p>
|
||||
<p class="text-xs text-zinc-500">FIT, GPX, or TCX</p>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
id="upload-choose-strava"
|
||||
class="flex items-center gap-3 p-4 rounded-lg border border-zinc-700 hover:border-zinc-500 hover:bg-zinc-800 transition-colors text-left"
|
||||
>
|
||||
<span class="text-2xl">🟠</span>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-white">Sync from Strava</p>
|
||||
<p id="strava-choose-sub" class="text-xs text-zinc-500">Checking…</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- View: file upload -->
|
||||
<div id="upload-view-file" style="display:none">
|
||||
<button id="upload-back-file" class="text-xs text-zinc-500 hover:text-white mb-3 transition-colors">← Back</button>
|
||||
<div
|
||||
id="upload-drop"
|
||||
class="border-2 border-dashed border-zinc-700 rounded-lg p-8 text-center text-zinc-500 text-sm cursor-pointer hover:border-zinc-500 hover:text-zinc-300 transition-colors"
|
||||
>
|
||||
<div id="upload-label">Drop a FIT, GPX, or TCX file<br/>or click to browse</div>
|
||||
<input id="upload-input" type="file" accept=".fit,.gpx,.tcx,.fit.gz,.gpx.gz,.tcx.gz" class="hidden" />
|
||||
</div>
|
||||
<p id="upload-status" class="mt-3 text-xs text-center" style="color: var(--text-5); min-height: 1.25rem"></p>
|
||||
</div>
|
||||
|
||||
<!-- View: Strava sync -->
|
||||
<div id="upload-view-strava" style="display:none">
|
||||
<button id="upload-back-strava" class="text-xs text-zinc-500 hover:text-white mb-3 transition-colors">← Back</button>
|
||||
<div id="strava-connect-area" style="display:none">
|
||||
<p class="text-sm text-zinc-400 mb-4">Connect your Strava account to sync activities automatically.</p>
|
||||
<button
|
||||
id="strava-connect-btn"
|
||||
class="w-full py-2 px-4 rounded-lg font-medium text-sm transition-colors"
|
||||
style="background:#fc4c02; color:white;"
|
||||
>Connect Strava</button>
|
||||
</div>
|
||||
<div id="strava-sync-area" style="display:none">
|
||||
<p class="text-xs text-zinc-500 mb-1">Last sync: <span id="strava-last-sync">never</span></p>
|
||||
<button
|
||||
id="strava-sync-btn"
|
||||
class="w-full py-2 px-4 rounded-lg font-medium text-sm bg-zinc-700 hover:bg-zinc-600 text-white transition-colors mt-2"
|
||||
>Sync now</button>
|
||||
</div>
|
||||
<p id="strava-status" class="mt-3 text-xs text-center" style="min-height: 1.25rem"></p>
|
||||
</div>
|
||||
<p id="upload-status" class="mt-3 text-xs text-center" style="color: var(--text-5); min-height: 1.25rem"></p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@@ -176,22 +228,56 @@ const baseUrl = import.meta.env.BASE_URL ?? '/';
|
||||
|
||||
{editUrl && (
|
||||
<script define:vars={{ editUrl, baseUrl }}>
|
||||
const modal = document.getElementById('upload-modal');
|
||||
const drop = document.getElementById('upload-drop');
|
||||
const input = document.getElementById('upload-input');
|
||||
const label = document.getElementById('upload-label');
|
||||
const status = document.getElementById('upload-status');
|
||||
const openBtn = document.getElementById('upload-btn');
|
||||
const closeBtn = document.getElementById('upload-close');
|
||||
const modal = document.getElementById('upload-modal');
|
||||
const openBtn = document.getElementById('upload-btn');
|
||||
const closeBtn = document.getElementById('upload-close');
|
||||
const viewChoose = document.getElementById('upload-view-choose');
|
||||
const viewFile = document.getElementById('upload-view-file');
|
||||
const viewStrava = document.getElementById('upload-view-strava');
|
||||
const chooseFile = document.getElementById('upload-choose-file');
|
||||
const chooseStrava = document.getElementById('upload-choose-strava');
|
||||
const backFile = document.getElementById('upload-back-file');
|
||||
const backStrava = document.getElementById('upload-back-strava');
|
||||
const drop = document.getElementById('upload-drop');
|
||||
const input = document.getElementById('upload-input');
|
||||
const label = document.getElementById('upload-label');
|
||||
const fileStatus = document.getElementById('upload-status');
|
||||
const stravaStatus = document.getElementById('strava-status');
|
||||
const stravaConnect = document.getElementById('strava-connect-area');
|
||||
const stravaSync = document.getElementById('strava-sync-area');
|
||||
const stravaConnBtn = document.getElementById('strava-connect-btn');
|
||||
const stravaSyncBtn = document.getElementById('strava-sync-btn');
|
||||
const stravaLastSync = document.getElementById('strava-last-sync');
|
||||
const stravaChooseSub = document.getElementById('strava-choose-sub');
|
||||
|
||||
function openModal() { modal.style.display = 'flex'; }
|
||||
function closeModal() { modal.style.display = 'none'; label.innerHTML = 'Drop a FIT, GPX, or TCX file<br>or click to browse'; status.textContent = ''; status.style.color = ''; }
|
||||
// ── view helpers ──────────────────────────────────────────────────────
|
||||
function showView(name) {
|
||||
viewChoose.style.display = name === 'choose' ? '' : 'none';
|
||||
viewFile.style.display = name === 'file' ? '' : 'none';
|
||||
viewStrava.style.display = name === 'strava' ? '' : 'none';
|
||||
}
|
||||
|
||||
function openModal() {
|
||||
showView('choose');
|
||||
fileStatus.textContent = '';
|
||||
label.innerHTML = 'Drop a FIT, GPX, or TCX file<br>or click to browse';
|
||||
modal.style.display = 'flex';
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
modal.style.display = 'none';
|
||||
}
|
||||
|
||||
openBtn.addEventListener('click', openModal);
|
||||
closeBtn.addEventListener('click', closeModal);
|
||||
modal.addEventListener('click', e => { if (e.target === modal) closeModal(); });
|
||||
document.addEventListener('keydown', e => { if (e.key === 'Escape' && modal.style.display !== 'none') closeModal(); });
|
||||
|
||||
chooseFile.addEventListener('click', () => showView('file'));
|
||||
backFile.addEventListener('click', () => showView('choose'));
|
||||
backStrava.addEventListener('click', () => showView('choose'));
|
||||
|
||||
// ── file upload ───────────────────────────────────────────────────────
|
||||
drop.addEventListener('click', () => input.click());
|
||||
drop.addEventListener('dragover', e => { e.preventDefault(); drop.style.borderColor = 'var(--accent)'; drop.style.color = 'var(--text-primary)'; });
|
||||
drop.addEventListener('dragleave', () => { drop.style.borderColor = ''; drop.style.color = ''; });
|
||||
@@ -205,27 +291,122 @@ const baseUrl = import.meta.env.BASE_URL ?? '/';
|
||||
|
||||
async function doUpload(file) {
|
||||
label.textContent = file.name;
|
||||
status.textContent = 'Uploading…';
|
||||
status.style.color = 'var(--text-4)';
|
||||
fileStatus.textContent = 'Uploading…';
|
||||
fileStatus.style.color = 'var(--text-4)';
|
||||
drop.style.pointerEvents = 'none';
|
||||
|
||||
const fd = new FormData();
|
||||
fd.append('file', file);
|
||||
|
||||
try {
|
||||
const r = await fetch(`${editUrl}/api/upload`, { method: 'POST', body: fd });
|
||||
if (!r.ok) throw new Error(await r.text());
|
||||
const d = await r.json();
|
||||
status.textContent = 'Done! Opening activity…';
|
||||
status.style.color = '#4ade80';
|
||||
fileStatus.textContent = 'Done! Opening activity…';
|
||||
fileStatus.style.color = '#4ade80';
|
||||
setTimeout(() => { window.location.href = `${baseUrl}activity/${d.id}/`; }, 600);
|
||||
} catch (e) {
|
||||
status.textContent = 'Error: ' + e.message;
|
||||
status.style.color = '#f87171';
|
||||
fileStatus.textContent = 'Error: ' + e.message;
|
||||
fileStatus.style.color = '#f87171';
|
||||
drop.style.pointerEvents = '';
|
||||
input.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
// ── Strava ────────────────────────────────────────────────────────────
|
||||
let stravaConfigured = false;
|
||||
|
||||
async function loadStravaStatus() {
|
||||
try {
|
||||
const r = await fetch(`${editUrl}/api/strava/status`);
|
||||
if (!r.ok) return;
|
||||
const d = await r.json();
|
||||
stravaConfigured = d.configured;
|
||||
if (!d.configured) {
|
||||
stravaChooseSub.textContent = 'Not configured';
|
||||
chooseStrava.disabled = true;
|
||||
chooseStrava.classList.add('opacity-40', 'cursor-not-allowed');
|
||||
return;
|
||||
}
|
||||
stravaChooseSub.textContent = d.connected
|
||||
? (d.last_sync ? 'Connected · tap to sync' : 'Connected · never synced')
|
||||
: 'Tap to connect';
|
||||
stravaConnect.style.display = d.connected ? 'none' : '';
|
||||
stravaSync.style.display = d.connected ? '' : 'none';
|
||||
if (d.last_sync) {
|
||||
stravaLastSync.textContent = new Date(d.last_sync * 1000).toLocaleString();
|
||||
}
|
||||
} catch (_) {}
|
||||
}
|
||||
|
||||
loadStravaStatus();
|
||||
|
||||
chooseStrava.addEventListener('click', () => {
|
||||
if (!stravaConfigured) return;
|
||||
showView('strava');
|
||||
});
|
||||
|
||||
stravaConnBtn.addEventListener('click', async () => {
|
||||
stravaStatus.textContent = 'Opening Strava…';
|
||||
stravaStatus.style.color = 'var(--text-4)';
|
||||
try {
|
||||
const r = await fetch(`${editUrl}/api/strava/auth-url`);
|
||||
if (!r.ok) throw new Error(await r.text());
|
||||
const { url } = await r.json();
|
||||
|
||||
const popup = window.open(url, 'strava-auth', 'width=600,height=700,left=200,top=100');
|
||||
stravaStatus.textContent = 'Waiting for Strava authorisation…';
|
||||
|
||||
// Listen for the callback redirect closing the popup
|
||||
const poll = setInterval(() => {
|
||||
try {
|
||||
if (popup && popup.location.href.includes('strava=connected')) {
|
||||
clearInterval(poll);
|
||||
popup.close();
|
||||
stravaStatus.textContent = 'Connected!';
|
||||
stravaStatus.style.color = '#4ade80';
|
||||
stravaConnect.style.display = 'none';
|
||||
stravaSync.style.display = '';
|
||||
stravaLastSync.textContent = 'never';
|
||||
} else if (popup && popup.location.href.includes('strava=error')) {
|
||||
clearInterval(poll);
|
||||
popup.close();
|
||||
stravaStatus.textContent = 'Authorisation failed.';
|
||||
stravaStatus.style.color = '#f87171';
|
||||
}
|
||||
} catch (_) {}
|
||||
if (popup && popup.closed) clearInterval(poll);
|
||||
}, 500);
|
||||
} catch (e) {
|
||||
stravaStatus.textContent = 'Error: ' + e.message;
|
||||
stravaStatus.style.color = '#f87171';
|
||||
}
|
||||
});
|
||||
|
||||
stravaSyncBtn.addEventListener('click', async () => {
|
||||
stravaSyncBtn.disabled = true;
|
||||
stravaSyncBtn.textContent = 'Syncing…';
|
||||
stravaStatus.textContent = '';
|
||||
try {
|
||||
const r = await fetch(`${editUrl}/api/strava/sync`, { method: 'POST' });
|
||||
if (!r.ok) throw new Error(await r.text());
|
||||
const d = await r.json();
|
||||
stravaLastSync.textContent = new Date().toLocaleString();
|
||||
stravaStatus.textContent = `Done — ${d.imported} imported, ${d.skipped} already up to date.`;
|
||||
stravaStatus.style.color = '#4ade80';
|
||||
if (d.imported > 0) setTimeout(() => window.location.reload(), 1500);
|
||||
} catch (e) {
|
||||
stravaStatus.textContent = 'Error: ' + e.message;
|
||||
stravaStatus.style.color = '#f87171';
|
||||
} finally {
|
||||
stravaSyncBtn.disabled = false;
|
||||
stravaSyncBtn.textContent = 'Sync now';
|
||||
}
|
||||
});
|
||||
|
||||
// Handle ?strava= param set by the callback redirect (popup scenario)
|
||||
const sp = new URLSearchParams(window.location.search);
|
||||
if (sp.has('strava')) {
|
||||
history.replaceState(null, '', window.location.pathname);
|
||||
}
|
||||
</script>
|
||||
)}
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user