garmin sync first attempt
This commit is contained in:
Davide Scaini
@@ -276,6 +276,16 @@ try {
|
||||
<p class="text-xs text-zinc-500">Import your full Strava archive</p>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
id="upload-choose-garmin"
|
||||
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 Garmin Connect</p>
|
||||
<p id="garmin-choose-sub" class="text-xs text-zinc-500">Checking…</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -356,6 +366,47 @@ try {
|
||||
</label>
|
||||
<p id="zip-status" class="mt-3 text-xs text-center leading-relaxed" style="min-height: 1.25rem"></p>
|
||||
</div>
|
||||
|
||||
<!-- View: Garmin Connect sync -->
|
||||
<div id="upload-view-garmin" style="display:none">
|
||||
<button id="upload-back-garmin" class="text-xs text-zinc-500 hover:text-white mb-3 transition-colors">← Back</button>
|
||||
<div class="rounded-lg border border-amber-800/50 bg-amber-950/30 p-3 mb-4 text-xs text-amber-300 leading-relaxed">
|
||||
⚠ Garmin Connect has no official API. Your credentials are encrypted at rest and used to log in on your behalf. <a href={`${baseUrl}about/`} class="underline hover:text-amber-100">Learn more</a>.
|
||||
</div>
|
||||
<!-- Not connected -->
|
||||
<div id="garmin-connect-area" style="display:none">
|
||||
<p class="text-sm text-zinc-400 mb-3">Enter your Garmin Connect credentials to sync activities.</p>
|
||||
<input
|
||||
id="garmin-email"
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
class="w-full mb-2 px-3 py-2 rounded-lg bg-zinc-800 border border-zinc-700 text-sm text-white placeholder-zinc-500 focus:outline-none focus:border-zinc-500"
|
||||
/>
|
||||
<input
|
||||
id="garmin-password"
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
class="w-full mb-3 px-3 py-2 rounded-lg bg-zinc-800 border border-zinc-700 text-sm text-white placeholder-zinc-500 focus:outline-none focus:border-zinc-500"
|
||||
/>
|
||||
<button
|
||||
id="garmin-connect-btn"
|
||||
class="w-full py-2 px-4 rounded-lg font-medium text-sm bg-blue-600 hover:bg-blue-500 text-white transition-colors"
|
||||
>Connect</button>
|
||||
</div>
|
||||
<!-- Connected -->
|
||||
<div id="garmin-sync-area" style="display:none">
|
||||
<p class="text-xs text-zinc-500 mb-1">Last sync: <span id="garmin-last-sync">never</span></p>
|
||||
<button
|
||||
id="garmin-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>
|
||||
<button
|
||||
id="garmin-disconnect-btn"
|
||||
class="w-full mt-2 py-1.5 px-3 rounded-lg text-xs bg-zinc-800 hover:bg-zinc-700 text-zinc-400 hover:text-zinc-200 transition-colors"
|
||||
>Disconnect</button>
|
||||
</div>
|
||||
<p id="garmin-status" class="mt-3 text-xs text-center" style="min-height: 1.25rem"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@@ -476,12 +527,15 @@ try {
|
||||
const viewFile = document.getElementById('upload-view-file');
|
||||
const viewStrava = document.getElementById('upload-view-strava');
|
||||
const viewZip = document.getElementById('upload-view-zip');
|
||||
const viewGarmin = document.getElementById('upload-view-garmin');
|
||||
const chooseFile = document.getElementById('upload-choose-file');
|
||||
const chooseStrava = document.getElementById('upload-choose-strava');
|
||||
const chooseZip = document.getElementById('upload-choose-zip');
|
||||
const chooseGarmin = document.getElementById('upload-choose-garmin');
|
||||
const backFile = document.getElementById('upload-back-file');
|
||||
const backStrava = document.getElementById('upload-back-strava');
|
||||
const backZip = document.getElementById('upload-back-zip');
|
||||
const backGarmin = document.getElementById('upload-back-garmin');
|
||||
const zipDrop = document.getElementById('zip-drop');
|
||||
const zipInput = document.getElementById('zip-input');
|
||||
const zipLabel = document.getElementById('zip-label');
|
||||
@@ -501,6 +555,16 @@ try {
|
||||
const stravaResetHardBtn = document.getElementById('strava-reset-hard-btn');
|
||||
const stravaLastSync = document.getElementById('strava-last-sync');
|
||||
const stravaChooseSub = document.getElementById('strava-choose-sub');
|
||||
const garminStatus = document.getElementById('garmin-status');
|
||||
const garminConnect = document.getElementById('garmin-connect-area');
|
||||
const garminSync = document.getElementById('garmin-sync-area');
|
||||
const garminEmail = document.getElementById('garmin-email');
|
||||
const garminPassword = document.getElementById('garmin-password');
|
||||
const garminConnBtn = document.getElementById('garmin-connect-btn');
|
||||
const garminSyncBtn = document.getElementById('garmin-sync-btn');
|
||||
const garminDisconnBtn = document.getElementById('garmin-disconnect-btn');
|
||||
const garminLastSync = document.getElementById('garmin-last-sync');
|
||||
const garminChooseSub = document.getElementById('garmin-choose-sub');
|
||||
|
||||
// ── view helpers ──────────────────────────────────────────────────────
|
||||
function showView(name) {
|
||||
@@ -508,6 +572,7 @@ try {
|
||||
viewFile.style.display = name === 'file' ? '' : 'none';
|
||||
viewStrava.style.display = name === 'strava' ? '' : 'none';
|
||||
viewZip.style.display = name === 'zip' ? '' : 'none';
|
||||
viewGarmin.style.display = name === 'garmin' ? '' : 'none';
|
||||
}
|
||||
|
||||
function openModal() {
|
||||
@@ -531,6 +596,7 @@ try {
|
||||
backFile.addEventListener('click', () => showView('choose'));
|
||||
backStrava.addEventListener('click', () => showView('choose'));
|
||||
backZip.addEventListener('click', () => showView('choose'));
|
||||
backGarmin.addEventListener('click', () => showView('choose'));
|
||||
|
||||
// ── file upload ───────────────────────────────────────────────────────
|
||||
drop.addEventListener('click', () => input.click());
|
||||
@@ -845,6 +911,137 @@ try {
|
||||
doZipUpload(e.dataTransfer?.files?.[0]);
|
||||
});
|
||||
|
||||
// ── Garmin Connect ────────────────────────────────────────────────────
|
||||
async function loadGarminStatus() {
|
||||
try {
|
||||
const r = await fetch(`${editUrl}/api/garmin/status`, { credentials: 'include' });
|
||||
if (!r.ok) throw new Error();
|
||||
const d = await r.json();
|
||||
garminChooseSub.textContent = d.connected ? 'Connected' : 'Not connected';
|
||||
garminConnect.style.display = d.connected ? 'none' : '';
|
||||
garminSync.style.display = d.connected ? '' : 'none';
|
||||
if (d.last_sync) garminLastSync.textContent = new Date(d.last_sync).toLocaleString();
|
||||
} catch (_) {
|
||||
garminChooseSub.textContent = 'Unavailable';
|
||||
}
|
||||
}
|
||||
loadGarminStatus();
|
||||
|
||||
chooseGarmin.addEventListener('click', () => {
|
||||
garminStatus.textContent = '';
|
||||
showView('garmin');
|
||||
});
|
||||
|
||||
garminConnBtn.addEventListener('click', async () => {
|
||||
const email = garminEmail.value.trim();
|
||||
const password = garminPassword.value;
|
||||
if (!email || !password) {
|
||||
garminStatus.textContent = 'Enter email and password.';
|
||||
garminStatus.style.color = '#f87171';
|
||||
return;
|
||||
}
|
||||
garminConnBtn.disabled = true;
|
||||
garminConnBtn.textContent = 'Connecting…';
|
||||
garminStatus.textContent = 'Contacting Garmin — this may take up to a minute…';
|
||||
garminStatus.style.color = '#a1a1aa';
|
||||
try {
|
||||
const controller = new AbortController();
|
||||
const timeout = setTimeout(() => controller.abort(), 90_000);
|
||||
const r = await fetch(`${editUrl}/api/garmin/connect`, {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ email, password }),
|
||||
signal: controller.signal,
|
||||
});
|
||||
clearTimeout(timeout);
|
||||
const d = await r.json();
|
||||
if (!r.ok) {
|
||||
garminStatus.textContent = 'Error: ' + (d.detail || 'Login failed');
|
||||
garminStatus.style.color = '#f87171';
|
||||
} else {
|
||||
garminPassword.value = '';
|
||||
garminStatus.textContent = `Connected as ${d.display_name || email}!`;
|
||||
garminStatus.style.color = '#4ade80';
|
||||
garminConnect.style.display = 'none';
|
||||
garminSync.style.display = '';
|
||||
garminLastSync.textContent = 'never';
|
||||
garminChooseSub.textContent = 'Connected';
|
||||
}
|
||||
} catch (e) {
|
||||
const msg = e.name === 'AbortError'
|
||||
? 'Timed out — Garmin login is taking too long. Try again later.'
|
||||
: 'Error: ' + e.message;
|
||||
garminStatus.textContent = msg;
|
||||
garminStatus.style.color = '#f87171';
|
||||
} finally {
|
||||
garminConnBtn.disabled = false;
|
||||
garminConnBtn.textContent = 'Connect';
|
||||
}
|
||||
});
|
||||
|
||||
garminSyncBtn.addEventListener('click', () => {
|
||||
garminSyncBtn.disabled = true;
|
||||
garminSyncBtn.textContent = 'Syncing…';
|
||||
garminStatus.textContent = '';
|
||||
garminStatus.style.color = '';
|
||||
|
||||
const es = new EventSource(`${editUrl}/api/garmin/sync/stream`, { withCredentials: true });
|
||||
es.onmessage = e => {
|
||||
try {
|
||||
const d = JSON.parse(e.data);
|
||||
if (d.type === 'fetching') {
|
||||
garminStatus.textContent = 'Fetching activity list from Garmin…';
|
||||
} else if (d.type === 'progress') {
|
||||
const pct = Math.round((d.n / d.total) * 100);
|
||||
const icon = d.status === 'imported' ? '↓' : d.status === 'error' ? '✗' : '·';
|
||||
garminStatus.textContent = `${icon} ${d.n}/${d.total} (${pct}%) — ${d.name}`;
|
||||
} else if (d.type === 'done') {
|
||||
es.close();
|
||||
garminLastSync.textContent = new Date().toLocaleString();
|
||||
const errNote = d.error_count ? `, ${d.error_count} errors` : '';
|
||||
garminStatus.textContent = `Done — ${d.imported} imported, ${d.skipped} already up to date${errNote}.`;
|
||||
garminStatus.style.color = '#4ade80';
|
||||
garminSyncBtn.disabled = false;
|
||||
garminSyncBtn.textContent = 'Sync now';
|
||||
} else if (d.type === 'error') {
|
||||
es.close();
|
||||
garminStatus.textContent = 'Error: ' + d.message;
|
||||
garminStatus.style.color = '#f87171';
|
||||
garminSyncBtn.disabled = false;
|
||||
garminSyncBtn.textContent = 'Sync now';
|
||||
}
|
||||
} catch (_) {}
|
||||
};
|
||||
es.onerror = () => {
|
||||
if (garminSyncBtn.disabled) {
|
||||
garminStatus.textContent = 'Connection lost. Check logs.';
|
||||
garminStatus.style.color = '#f87171';
|
||||
garminSyncBtn.disabled = false;
|
||||
garminSyncBtn.textContent = 'Sync now';
|
||||
}
|
||||
es.close();
|
||||
};
|
||||
});
|
||||
|
||||
garminDisconnBtn.addEventListener('click', async () => {
|
||||
garminDisconnBtn.disabled = true;
|
||||
garminStatus.textContent = '';
|
||||
try {
|
||||
await fetch(`${editUrl}/api/garmin/disconnect`, { method: 'POST', credentials: 'include' });
|
||||
garminSync.style.display = 'none';
|
||||
garminConnect.style.display = '';
|
||||
garminStatus.textContent = 'Disconnected.';
|
||||
garminStatus.style.color = '#a1a1aa';
|
||||
garminChooseSub.textContent = 'Not connected';
|
||||
} catch (e) {
|
||||
garminStatus.textContent = 'Error: ' + e.message;
|
||||
garminStatus.style.color = '#f87171';
|
||||
} finally {
|
||||
garminDisconnBtn.disabled = false;
|
||||
}
|
||||
});
|
||||
|
||||
// Handle ?strava= param set by the callback redirect (popup scenario)
|
||||
const sp = new URLSearchParams(window.location.search);
|
||||
if (sp.has('strava')) {
|
||||
|
||||
Reference in New Issue
Block a user