Merge remote-tracking branch 'origin/main' into feat/show-excluded-rounds-count-21

2026-05-25 11:01:53 +02:00
parent f2e30c62aa 3275241aa7
commit 9138299ae0
12 changed files with 1048 additions and 315 deletions
@@ -1,33 +1,97 @@
-function toggleAccordion(accordionId) {
-    const content = document.getElementById(accordionId);
-    const icon = document.getElementById(`${accordionId}-icon`);
+// ── Tab switching ──────────────────────────────────
+function initCourseTabs() {
+    const tabs = document.querySelectorAll('.action-tab');
+    tabs.forEach(function(tab) {
+        tab.addEventListener('click', function() {
+            tabs.forEach(function(t) {
+                t.classList.remove('is-active');
+                t.setAttribute('aria-selected', 'false');
+            });
+            tab.classList.add('is-active');
+            tab.setAttribute('aria-selected', 'true');

-    if (content.classList.contains('expanded')) {
-        content.classList.remove('expanded');
-        icon.classList.remove('expanded');
-    } else {
-        content.classList.add('expanded');
-        icon.classList.add('expanded');
-    }
+            document.querySelectorAll('.action-pane').forEach(function(pane) {
+                pane.hidden = true;
+                pane.classList.remove('is-active');
+            });
+
+            const targetId = 'tab-pane-' + tab.dataset.tab;
+            const pane = document.getElementById(targetId);
+            if (pane) {
+                pane.hidden = false;
+                pane.classList.add('is-active');
+            }
+        });
+    });
 }

+// ── Live filter ────────────────────────────────────
+function initCourseLiveFilter() {
+    const input = document.getElementById('course-filter-input');
+    if (!input) return;
+
+    input.addEventListener('input', function() {
+        const q = input.value.toLowerCase().trim();
+        const rows = document.querySelectorAll('.course-row');
+        let visible = 0;
+
+        rows.forEach(function(row) {
+            const name = row.dataset.courseName || '';
+            const city = row.dataset.courseCity || '';
+            const match = !q || name.includes(q) || city.includes(q);
+
+            row.hidden = !match;
+
+            // Keep the expanded content sibling in sync
+            const next = row.nextElementSibling;
+            if (next && next.classList.contains('expanded-content')) {
+                next.hidden = !match;
+            }
+
+            if (match) visible++;
+        });
+
+        const visibleEl = document.getElementById('visible-count');
+        if (visibleEl) visibleEl.textContent = visible;
+    });
+}
+
+// ── Count display ──────────────────────────────────
+function initCourseCounts() {
+    const grid = document.querySelector('.course-grid');
+    const total = grid ? parseInt(grid.dataset.totalCount || '0', 10) : 0;
+    const rows = document.querySelectorAll('.course-row');
+    let visible = 0;
+    rows.forEach(function(r) { if (!r.hidden) visible++; });
+
+    const totalEl = document.getElementById('total-count');
+    const visibleEl = document.getElementById('visible-count');
+    if (totalEl) totalEl.textContent = total;
+    if (visibleEl) visibleEl.textContent = visible || total;
+}
+
+// ── Course row expand/collapse ─────────────────────
 function toggleCourseLayouts(courseId) {
-    const layoutsRow = document.getElementById(`layouts-${courseId}`);
-    const layoutsContainer = document.getElementById(`layouts-container-${courseId}`);
+    const row = document.querySelector('.course-row[data-course-id="' + courseId + '"]');
+    const content = document.getElementById('course-layouts-' + courseId);
+    if (!row || !content) return;

-    if (layoutsRow.style.display === 'table-row') {
-        layoutsRow.style.display = 'none';
-        return;
+    const isOpen = content.classList.contains('is-open');
+
+    if (isOpen) {
+        content.classList.remove('is-open');
+        row.classList.remove('row-open');
+    } else {
+        content.classList.add('is-open');
+        row.classList.add('row-open');
+
+        // Lazy-load layouts on first expand
+        const cell = content.querySelector('.expanded-cell');
+        if (cell && cell.dataset.loaded !== 'true') {
+            cell.dataset.loaded = 'true';
+            htmx.ajax('GET', '/partials/course-layouts/' + courseId, { target: cell, swap: 'innerHTML' });
+        }
    }
-
-    layoutsRow.style.display = 'table-row';
-
-    if (layoutsContainer.dataset.loaded === 'true') {
-        return;
-    }
-
-    htmx.ajax('GET', `/partials/course-layouts/${courseId}`, {target: `#layouts-container-${courseId}`, swap: 'innerHTML'});
-    layoutsContainer.dataset.loaded = 'true';
 }

 // ── Mobile course card toggle ──────────────────────
@@ -68,10 +132,24 @@ function toggleMobileCourseLayouts(courseId) {
    }
 }

+// ── Inactive layouts toggle ────────────────────────
+function toggleInactiveLayouts(btn) {
+    const body = btn.nextElementSibling;
+    if (!body) return;
+
+    const isOpen = btn.classList.contains('is-open');
+    btn.classList.toggle('is-open', !isOpen);
+    btn.setAttribute('aria-expanded', String(!isOpen));
+    body.hidden = isOpen;
+}
+
+// ── Scrape courses ─────────────────────────────────
 async function scrapeCourses() {
    const btn = document.getElementById('scrape-courses-btn');
-    btn.disabled = true;
-    btn.textContent = 'Scraping...';
+    if (btn) {
+        btn.disabled = true;
+        btn.textContent = 'Scraping...';
+    }

    try {
        const response = await fetch('/api/scrape-courses', { method: 'POST' });
@@ -79,7 +157,7 @@ async function scrapeCourses() {

        if (data.success) {
            alert(data.message);
-            htmx.ajax('GET', '/partials/course-table', '#courses-table');
+            htmx.trigger(document.body, 'refresh');
        } else {
            alert('Failed to scrape courses');
        }
@@ -87,31 +165,33 @@ async function scrapeCourses() {
        console.error('Error scraping courses:', error);
        alert('Error scraping courses');
    } finally {
-        btn.disabled = false;
-        btn.textContent = 'Scrape Courses';
+        if (btn) {
+            btn.disabled = false;
+            btn.textContent = 'Scrape Courses';
+        }
    }
 }

-async function scrapeLayouts(courseId, courseName) {
-    const icon = document.querySelector(`#row-${courseId} .refresh-icon`);
-    icon.classList.add('spinning');
+// ── Scrape layouts for a course ────────────────────
+async function scrapeLayouts(courseId, btn) {
+    if (btn) btn.classList.add('spinning');

    try {
-        const response = await fetch(`/api/scrape-layouts/${courseId}`, { method: 'POST' });
+        const response = await fetch('/api/scrape-layouts/' + courseId, { method: 'POST' });
        const data = await response.json();

        if (response.status === 409) {
            alert(data.message || 'Scrape already in progress for this course. Please wait.');
        } else if (data.success) {
-            const layoutsContainer = document.getElementById(`layouts-container-${courseId}`);
-            layoutsContainer.dataset.loaded = 'false';
-
-            const layoutsRow = document.getElementById(`layouts-${courseId}`);
-            if (layoutsRow.style.display === 'table-row') {
-                htmx.ajax('GET', `/partials/course-layouts/${courseId}`, {target: `#layouts-container-${courseId}`, swap: 'innerHTML'});
-                layoutsContainer.dataset.loaded = 'true';
+            // Reload expanded layout content if currently open
+            const content = document.getElementById('course-layouts-' + courseId);
+            if (content && content.classList.contains('is-open')) {
+                const cell = content.querySelector('.expanded-cell');
+                if (cell) {
+                    cell.dataset.loaded = 'true';
+                    htmx.ajax('GET', '/partials/course-layouts/' + courseId, { target: cell, swap: 'innerHTML' });
+                }
            }
-
            alert(data.message);
        } else {
            alert('Failed to scrape layouts');
@@ -120,6 +200,141 @@ async function scrapeLayouts(courseId, courseName) {
        console.error('Error scraping layouts:', error);
        alert('Error scraping layouts');
    } finally {
-        icon.classList.remove('spinning');
+        if (btn) btn.classList.remove('spinning');
    }
 }
+
+// ── Tjing search ───────────────────────────────────
+async function searchTjing() {
+    const input = document.getElementById('tjing-search-input');
+    const btn = document.getElementById('tjing-search-btn');
+    const container = document.getElementById('tjing-results');
+    if (!input || !container) return;
+
+    const q = input.value.trim();
+    if (!q) return;
+
+    btn.disabled = true;
+
+    // Clear previous results safely
+    while (container.firstChild) {
+        container.removeChild(container.firstChild);
+    }
+
+    try {
+        const response = await fetch('/api/tjing/search?q=' + encodeURIComponent(q));
+        let data;
+        try {
+            data = await response.json();
+        } catch (e) {
+            const errP = document.createElement('p');
+            errP.className = 'tjing-error';
+            errP.textContent = 'Invalid response from server.';
+            container.appendChild(errP);
+            return;
+        }
+
+        if (!response.ok || data.error) {
+            const errP2 = document.createElement('p');
+            errP2.className = 'tjing-error';
+            errP2.textContent = 'Error: ' + (data.error || 'Search failed');
+            container.appendChild(errP2);
+            return;
+        }
+
+        const results = data.results || [];
+        if (results.length === 0) {
+            const noResults = document.createElement('p');
+            noResults.className = 'tjing-error';
+            noResults.textContent = 'No courses found on Tjing.';
+            container.appendChild(noResults);
+            return;
+        }
+
+        results.forEach(function(course) {
+            const item = document.createElement('div');
+            item.className = 'tjing-result';
+
+            const info = document.createElement('div');
+            info.className = 'tjing-result-info';
+
+            const nameSpan = document.createElement('span');
+            nameSpan.className = 'tjing-result-name';
+            nameSpan.textContent = course.name || '';
+
+            const addrSpan = document.createElement('span');
+            addrSpan.className = 'tjing-result-address';
+            addrSpan.textContent = course.address || '';
+
+            info.appendChild(nameSpan);
+            info.appendChild(addrSpan);
+
+            const importBtn = document.createElement('button');
+            importBtn.className = 'btn-pill';
+            importBtn.textContent = 'Import';
+            (function(id, b) {
+                b.addEventListener('click', function() { importFromTjing(id, b); });
+            })(course.id, importBtn);
+
+            item.appendChild(info);
+            item.appendChild(importBtn);
+            container.appendChild(item);
+        });
+    } catch (error) {
+        console.error('Error searching Tjing:', error);
+        const errFallback = document.createElement('p');
+        errFallback.className = 'tjing-error';
+        errFallback.textContent = 'Failed to search Tjing.';
+        container.appendChild(errFallback);
+    } finally {
+        btn.disabled = false;
+    }
+}
+
+// ── Tjing import ───────────────────────────────────
+async function importFromTjing(tjingId, btn) {
+    btn.disabled = true;
+    btn.textContent = 'Importing…';
+
+    try {
+        const response = await fetch('/api/tjing/import/' + encodeURIComponent(tjingId), { method: 'POST' });
+        let data;
+        try {
+            data = await response.json();
+        } catch (e) {
+            btn.textContent = 'Error';
+            btn.disabled = false;
+            return;
+        }
+
+        if (!response.ok || data.error) {
+            btn.textContent = 'Error: ' + (data.error || 'Import failed');
+            btn.disabled = false;
+            return;
+        }
+
+        btn.textContent = 'Imported ✓';
+        // Trigger table reload
+        htmx.trigger(document.body, 'refresh');
+    } catch (error) {
+        console.error('Error importing from Tjing:', error);
+        btn.textContent = 'Failed';
+        btn.disabled = false;
+    }
+}
+
+// ── Init ───────────────────────────────────────────
+function initAll() {
+    initCourseTabs();
+    initCourseLiveFilter();
+    initCourseCounts();
+}
+
+document.addEventListener('DOMContentLoaded', initAll);
+
+document.addEventListener('htmx:afterSwap', function(evt) {
+    if (evt.detail && evt.detail.target && evt.detail.target.id === 'course-table-region') {
+        initCourseLiveFilter();
+        initCourseCounts();
+    }
+});