brut/bincio-activity
1
0
Fork 0
Code Issues Pull Requests Actions 6 Packages Projects Releases Wiki Activity

upload external files

Browse Source
This commit is contained in:
Davide Scaini
2026-03-30 13:06:20 +02:00
parent fa08988471
commit 0865159cca
3 changed files with 160 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/layouts/Base.astro
+93 -1
View File
@@ -4,6 +4,7 @@ interface Props {
description?: string;
}
const { title = 'BincioActivity', description = 'Your personal activity stats' } = Astro.props;
const editUrl = import.meta.env.PUBLIC_EDIT_URL ?? '';
---
<!doctype html>
<html lang="en" data-theme="dark">
@@ -103,7 +104,15 @@ const { title = 'BincioActivity', description = 'Your personal activity stats' }
<a href="/stats/" class="text-sm text-zinc-400 hover:text-white transition-colors">Stats</a>
<a href="/athlete/" class="text-sm text-zinc-400 hover:text-white transition-colors">Athlete</a>
<div class="ml-auto">
<div class="ml-auto flex items-center gap-1">
{editUrl && (
<button
id="upload-btn"
class="text-zinc-400 hover:text-white transition-colors w-8 h-8 flex items-center justify-center rounded-md hover:bg-zinc-800 text-base"
aria-label="Upload activity"
title="Upload activity"
>↑</button>
)}
<button
id="theme-toggle"
class="text-zinc-400 hover:text-white transition-colors w-8 h-8 flex items-center justify-center rounded-md hover:bg-zinc-800 text-base"
@@ -112,6 +121,34 @@ const { title = 'BincioActivity', description = 'Your personal activity stats' }
</div>
</div>
</nav>
{editUrl && (
<!-- Upload 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"
>
<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>
<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" />
</div>
<p id="upload-status" class="mt-3 text-xs text-center" style="color: var(--text-5); min-height: 1.25rem"></p>
</div>
</div>
)}
<main class="max-w-7xl mx-auto px-4 py-6">
<slot />
</main>
@@ -135,5 +172,60 @@ const { title = 'BincioActivity', description = 'Your personal activity stats' }
applyTheme(next);
});
</script>
{editUrl && (
<script define:vars={{ editUrl }}>
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');
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 = ''; }
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(); });
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 = ''; });
drop.addEventListener('drop', e => {
e.preventDefault();
drop.style.borderColor = '';
drop.style.color = '';
if (e.dataTransfer?.files[0]) doUpload(e.dataTransfer.files[0]);
});
input.addEventListener('change', () => { if (input.files?.[0]) doUpload(input.files[0]); });
async function doUpload(file) {
label.textContent = file.name;
status.textContent = 'Uploading…';
status.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';
setTimeout(() => { window.location.href = `/activity/${d.id}/`; }, 600);
} catch (e) {
status.textContent = 'Error: ' + e.message;
status.style.color = '#f87171';
drop.style.pointerEvents = '';
input.value = '';
}
}
</script>
)}
</body>
</html>