From 537f443cf1faf7edb52f4fe1d982b51ddc756dba Mon Sep 17 00:00:00 2001
From: Mischa <mischa@gorinskat.nl>
Date: Fri, 19 Jun 2026 14:58:25 +0200
Subject: [PATCH] feat: gpx-manager list, upload, delete via Grav API session
 auth

---
 .../templates/gpx-manager.html.twig           | 105 +++++++++++++++++-
 1 file changed, 104 insertions(+), 1 deletion(-)

diff --git a/themes/intotheeast/templates/gpx-manager.html.twig b/themes/intotheeast/templates/gpx-manager.html.twig
index 749ea69..5d8994d 100644
--- a/themes/intotheeast/templates/gpx-manager.html.twig
+++ b/themes/intotheeast/templates/gpx-manager.html.twig
@@ -47,7 +47,110 @@
 </style>
 
 <script>
-/* GPX manager JS — added in Task 3 */
+const API = '/api/v1';
+
+function formatSize(bytes) {
+    if (bytes >= 1048576) return (bytes / 1048576).toFixed(1) + ' MB';
+    return (bytes / 1024).toFixed(0) + ' KB';
+}
+
+function formatDate(iso) {
+    return new Date(iso).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
+}
+
+async function apiFetch(url, options) {
+    const res = await fetch(url, { credentials: 'include', ...options });
+    if (res.status === 401) { window.location.href = '/admin'; return null; }
+    return res;
+}
+
+async function loadFiles(tripRoute) {
+    const res = await apiFetch(`${API}/pages${tripRoute}/media`);
+    if (!res || !res.ok) return [];
+    const data = await res.json();
+    return (data.data || []).filter(f => f.filename.toLowerCase().endsWith('.gpx'));
+}
+
+async function renderTrip(tripEl) {
+    const route = tripEl.dataset.route;
+    const list = tripEl.querySelector('.gpx-file-list');
+    list.innerHTML = '<p class="gpx-loading">Loading…</p>';
+
+    const files = await loadFiles(route);
+
+    if (files.length === 0) {
+        list.innerHTML = '<p class="gpx-empty">No GPX files.</p>';
+        return;
+    }
+
+    const rows = files.map(f =>
+        `<tr>
+            <td>${f.filename}</td>
+            <td>${formatSize(f.size)}</td>
+            <td>${formatDate(f.modified)}</td>
+            <td><button class="gpx-delete" data-filename="${f.filename}">Delete</button></td>
+        </tr>`
+    ).join('');
+
+    list.innerHTML = `<table class="gpx-table">
+        <thead><tr><th>File</th><th>Size</th><th>Modified</th><th></th></tr></thead>
+        <tbody>${rows}</tbody>
+    </table>`;
+
+    list.querySelectorAll('.gpx-delete').forEach(btn => {
+        btn.addEventListener('click', async () => {
+            if (!confirm(`Delete ${btn.dataset.filename}?`)) return;
+            btn.disabled = true;
+            const res = await apiFetch(
+                `${API}/pages${route}/media/${encodeURIComponent(btn.dataset.filename)}`,
+                { method: 'DELETE' }
+            );
+            if (res && (res.ok || res.status === 204)) {
+                await renderTrip(tripEl);
+            } else {
+                btn.disabled = false;
+                alert('Delete failed — check console.');
+            }
+        });
+    });
+}
+
+function initUpload(formEl) {
+    formEl.addEventListener('submit', async e => {
+        e.preventDefault();
+        const route = formEl.dataset.tripRoute;
+        const fileInput = formEl.querySelector('input[type=file]');
+        const file = fileInput.files[0];
+        const status = formEl.querySelector('.gpx-status');
+        const btn = formEl.querySelector('.gpx-upload-btn');
+
+        if (!file) { status.textContent = 'Choose a file first.'; return; }
+
+        status.textContent = 'Uploading…';
+        status.className = 'gpx-status';
+        btn.disabled = true;
+
+        const fd = new FormData();
+        fd.append('file', file);
+
+        const res = await apiFetch(`${API}/pages${route}/media`, { method: 'POST', body: fd });
+        btn.disabled = false;
+
+        if (res && res.ok) {
+            status.textContent = 'Uploaded!';
+            fileInput.value = '';
+            await renderTrip(formEl.closest('.gpx-trip'));
+            setTimeout(() => { status.textContent = ''; }, 3000);
+        } else {
+            const err = res ? await res.json().catch(() => ({})) : {};
+            status.textContent = 'Error: ' + (err.detail || (res ? res.statusText : 'network error'));
+            status.className = 'gpx-status error';
+        }
+    });
+}
+
+document.querySelectorAll('.gpx-trip').forEach(renderTrip);
+document.querySelectorAll('.gpx-upload-form').forEach(initUpload);
 </script>
 
 {% endblock %}