feat: mobile UI card layout for players and courses (#16)

2026-05-22 21:07:00 +02:00
parent e25f66c5d3
commit cc9d8eb4cd
14 changed files with 1007 additions and 56 deletions
@@ -31,8 +31,21 @@ function initChartsIn(rootEl) {
        if (container.dataset.charted === 'true') return;
        if (!container.dataset.history) return;
        try {
-            const history = JSON.parse(container.dataset.history);
-            createRatingChart(container, history);
+            var history = JSON.parse(container.dataset.history);
+            var isMobile = container.dataset.variant === 'mobile';
+            if (isMobile) {
+                createRatingChart(container, history, {
+                    w: 360,
+                    h: 160,
+                    padding: { left: 36, right: 12, top: 14, bottom: 24 },
+                    tickCount: 3,
+                    xLabelCount: 3,
+                    dotR: 2,
+                    lastDotR: 3
+                });
+            } else {
+                createRatingChart(container, history);
+            }
            container.dataset.charted = 'true';
        } catch (e) {
            console.error('Error rendering chart:', e);
@@ -516,18 +529,34 @@ function closeAddPlayerModal(event) {

 // ── Sparkline toggle ───────────────────────────────
 document.addEventListener('DOMContentLoaded', function() {
-    const btn = document.getElementById('trendchart-toggle');
-    if (!btn) return;
+    var SPARKLINE_KEY = 'ratingtracker.sparklines';

-    const state = localStorage.getItem('ratingtracker.sparklines') || 'on';
+    function syncSparklineButtons(state) {
+        var btns = document.querySelectorAll('#trendchart-toggle, #trendchart-toggle-mobile');
+        btns.forEach(function(b) {
+            b.setAttribute('aria-pressed', state === 'on' ? 'true' : 'false');
+        });
+    }
+
+    var state = localStorage.getItem(SPARKLINE_KEY) || 'on';
    document.body.dataset.sparklines = state;
-    btn.setAttribute('aria-pressed', state === 'on' ? 'true' : 'false');
+    syncSparklineButtons(state);

-    btn.addEventListener('click', function() {
-        const next = document.body.dataset.sparklines === 'on' ? 'off' : 'on';
+    document.body.addEventListener('click', function(e) {
+        var target = e.target.closest('#trendchart-toggle, #trendchart-toggle-mobile');
+        if (!target) return;
+        var next = document.body.dataset.sparklines === 'on' ? 'off' : 'on';
        document.body.dataset.sparklines = next;
-        btn.setAttribute('aria-pressed', next === 'on' ? 'true' : 'false');
-        localStorage.setItem('ratingtracker.sparklines', next);
+        localStorage.setItem(SPARKLINE_KEY, next);
+        syncSparklineButtons(next);
+    });
+
+    // Re-sync after HTMX table swap (mobile button is inside the swapped partial)
+    document.body.addEventListener('htmx:afterSwap', function(event) {
+        var target = event.detail.target;
+        if (target.id === 'ratings-table') {
+            syncSparklineButtons(document.body.dataset.sparklines || 'on');
+        }
    });
 });

@@ -751,3 +780,75 @@ async function refreshHistoryThenCalculate(pdgaNumber) {
        _targetResultMsg(result, 'error', 'Network error during refresh. Please try again.');
    }
 }
+
+// ── Mobile player card toggle ──────────────────────
+var openMobilePdgaNumber = null;
+
+function toggleMobilePlayerCard(pdgaNumber) {
+    var card = document.getElementById('m-card-' + pdgaNumber);
+    if (!card) return;
+
+    var isOpen = card.classList.contains('is-open');
+
+    // Close previously open card
+    if (openMobilePdgaNumber !== null && openMobilePdgaNumber !== pdgaNumber) {
+        var prevCard = document.getElementById('m-card-' + openMobilePdgaNumber);
+        if (prevCard) prevCard.classList.remove('is-open');
+        openMobilePdgaNumber = null;
+    }
+
+    if (isOpen) {
+        card.classList.remove('is-open');
+        openMobilePdgaNumber = null;
+        return;
+    }
+
+    card.classList.add('is-open');
+    openMobilePdgaNumber = pdgaNumber;
+
+    // Init charts inside the expand panel
+    var expand = card.querySelector('.m-card__expand');
+    if (expand) {
+        initChartsIn(expand);
+    }
+}
+
+// ── Mobile add player ──────────────────────────────
+async function searchAndAddPlayerMobile(event) {
+    if (event) event.preventDefault();
+    var input = document.getElementById('pdga-number-input-mobile');
+    var pdgaNumber = input ? input.value.trim() : '';
+
+    if (!pdgaNumber) {
+        alert('Please enter a PDGA number');
+        return;
+    }
+
+    var button = event && event.target ? event.target.querySelector('button[type="submit"]') : null;
+    if (button) { button.disabled = true; button.textContent = 'Searching...'; }
+
+    try {
+        var response = await fetch('/api/search-player/' + pdgaNumber);
+        var data = await response.json();
+
+        if (!response.ok) {
+            showErrorModal(data.error || 'Player not found');
+            return;
+        }
+
+        if (data.alreadyExists) {
+            showInfoModal(data.player.name + ' is already being tracked!');
+            return;
+        }
+
+        pendingPlayerData = data.player;
+        showConfirmationModal(data.player);
+
+    } catch (error) {
+        console.error('Error searching for player:', error);
+        showErrorModal('Failed to search for player. Please try again.');
+    } finally {
+        if (button) { button.disabled = false; button.textContent = 'Add'; }
+        if (input) input.value = '';
+    }
+}