From 70ceb2da251d3db22dbcee81e0d04e33b5d9fbc5 Mon Sep 17 00:00:00 2001
From: Carsten Graf <reptil1990@me.com>
Date: Mon, 8 Sep 2025 19:14:17 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=92=20Add=20privacy=20settings=20for?=
 =?UTF-8?q?=20leaderboard=20visibility?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✨ Features:
- Added show_in_leaderboard column to players table (default: false)
- Replaced Quick Actions with Settings section in dashboard
- Added toggle switch for leaderboard visibility
- Created settings modal with privacy controls

🔧 API Changes:
- Added /api/v1/private/update-player-settings endpoint
- Updated best-times queries to filter by show_in_leaderboard
- Updated times-with-details to respect privacy settings
- Added updated_at column to players table

🎨 UI/UX:
- Modern toggle switch design
- Responsive settings modal
- Success/error notifications
- Clear privacy explanation

🔐 Privacy:
- Default: Times are NOT shown in global leaderboard
- Users can opt-in via settings
- Personal dashboard always shows own times
- Global leaderboard only shows opted-in users
---
 public/css/dashboard.css | 116 +++++++++++++++++++++++++++++++++++++++
 public/dashboard.html    |  43 ++++++++++++++-
 public/js/dashboard.js   |  99 +++++++++++++++++++++++++++++++++
 routes/api.js            |  49 +++++++++++++++++
 4 files changed, 304 insertions(+), 3 deletions(-)

diff --git a/public/css/dashboard.css b/public/css/dashboard.css
index 9d99218..c7898db 100644
--- a/public/css/dashboard.css
+++ b/public/css/dashboard.css
@@ -1380,3 +1380,119 @@ body {
     color: #b3e5fc;
     font-size: 0.85rem;
 }
+
+/* Settings Modal Styles */
+.settings-content {
+    padding: 1.5rem 0;
+}
+
+.setting-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1.5rem;
+    background: #1e293b;
+    border-radius: 0.75rem;
+    margin-bottom: 1rem;
+    border: 1px solid #334155;
+}
+
+.setting-info h3 {
+    color: #ffffff;
+    font-size: 1.1rem;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+}
+
+.setting-info p {
+    color: #8892b0;
+    font-size: 0.9rem;
+    line-height: 1.4;
+}
+
+.setting-control {
+    margin-left: 1rem;
+}
+
+/* Toggle Switch Styles */
+.toggle-switch {
+    position: relative;
+    display: inline-block;
+    width: 60px;
+    height: 34px;
+}
+
+.toggle-switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.toggle-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #334155;
+    transition: 0.3s;
+    border-radius: 34px;
+}
+
+.toggle-slider:before {
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 26px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    transition: 0.3s;
+    border-radius: 50%;
+}
+
+input:checked + .toggle-slider {
+    background-color: #00d4ff;
+}
+
+input:checked + .toggle-slider:before {
+    transform: translateX(26px);
+}
+
+.setting-description {
+    margin-top: 1rem;
+}
+
+.settings-actions {
+    display: flex;
+    gap: 1rem;
+    margin-top: 2rem;
+    justify-content: flex-end;
+}
+
+.settings-actions .btn {
+    min-width: 120px;
+}
+
+/* Responsive Settings */
+@media (max-width: 768px) {
+    .setting-item {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 1rem;
+    }
+    
+    .setting-control {
+        margin-left: 0;
+        align-self: flex-end;
+    }
+    
+    .settings-actions {
+        flex-direction: column;
+    }
+    
+    .settings-actions .btn {
+        width: 100%;
+    }
+}
diff --git a/public/dashboard.html b/public/dashboard.html
index 9e60177..2791969 100644
--- a/public/dashboard.html
+++ b/public/dashboard.html
@@ -101,9 +101,10 @@
                     <p>Verfolge deine Leistung und überwache wichtige Metriken. Dieser Abschnitt wird detaillierte Analysen anzeigen, sobald wir die Funktion implementieren.</p>
                 </div>
 
-                <div class="card">
-                    <h3>⚡ Quick Actions</h3>
-                    <p>Hier findest du häufige Aufgaben und Schnellzugriffe. Wir werden Buttons für das Erstellen neuer Aufzeichnungen, das Verwalten von Einstellungen und mehr hinzufügen.</p>
+                <div class="card" onclick="showSettings()" style="cursor: pointer;">
+                    <h3>⚙️ Settings</h3>
+                    <p>Verwalte deine Privatsphäre-Einstellungen und andere Optionen.</p>
+                    <button class="btn btn-primary" style="margin-top: 1rem;" onclick="event.stopPropagation(); showSettings();">Einstellungen öffnen</button>
                 </div>
 
                 <div class="card" onclick="showRFIDSettings()" style="cursor: pointer;">
@@ -296,6 +297,42 @@
         </div>
     </div>
 
+    <!-- Settings Modal -->
+    <div id="settingsModal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2 class="modal-title">⚙️ Einstellungen</h2>
+                <span class="close" onclick="closeModal('settingsModal')">&times;</span>
+            </div>
+            
+            <div class="settings-content">
+                <div class="setting-item">
+                    <div class="setting-info">
+                        <h3>🏆 Leaderboard Sichtbarkeit</h3>
+                        <p>Bestimme, ob deine Zeiten im globalen Leaderboard angezeigt werden sollen.</p>
+                    </div>
+                    <div class="setting-control">
+                        <label class="toggle-switch">
+                            <input type="checkbox" id="showInLeaderboard" onchange="updateLeaderboardSetting()">
+                            <span class="toggle-slider"></span>
+                        </label>
+                    </div>
+                </div>
+                
+                <div class="setting-description">
+                    <p style="color: #8892b0; font-size: 0.9rem; margin-top: 1rem; padding: 1rem; background: #1e293b; border-radius: 0.5rem;">
+                        <strong>Hinweis:</strong> Wenn diese Option deaktiviert ist, werden deine Zeiten nur in deinem persönlichen Dashboard angezeigt, aber nicht im öffentlichen Leaderboard. Du kannst diese Einstellung jederzeit ändern.
+                    </p>
+                </div>
+                
+                <div class="settings-actions">
+                    <button class="btn btn-primary" onclick="saveSettings()">Einstellungen speichern</button>
+                    <button class="btn btn-secondary" onclick="closeModal('settingsModal')">Abbrechen</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <!-- Footer -->
     <footer class="footer">
         <div class="footer-content">
diff --git a/public/js/dashboard.js b/public/js/dashboard.js
index 24c6987..4e4bbbb 100644
--- a/public/js/dashboard.js
+++ b/public/js/dashboard.js
@@ -941,6 +941,105 @@ setInterval(() => {
     checkAchievementNotifications();
 }, 30000);
 
+// Settings Functions
+function showSettings() {
+    const modal = document.getElementById('settingsModal');
+    if (modal) {
+        modal.style.display = 'block';
+        loadSettings();
+    }
+}
+
+async function loadSettings() {
+    try {
+        if (!currentPlayerId) {
+            console.error('No player ID available');
+            return;
+        }
+        
+        // Load current player settings
+        const response = await fetch(`/api/v1/public/user-player/${currentUser.id}`);
+        const result = await response.json();
+        
+        if (result.success && result.data) {
+            const showInLeaderboard = result.data.show_in_leaderboard || false;
+            document.getElementById('showInLeaderboard').checked = showInLeaderboard;
+        }
+    } catch (error) {
+        console.error('Error loading settings:', error);
+    }
+}
+
+function updateLeaderboardSetting() {
+    const checkbox = document.getElementById('showInLeaderboard');
+    console.log('Leaderboard setting changed:', checkbox.checked);
+}
+
+async function saveSettings() {
+    try {
+        if (!currentPlayerId) {
+            console.error('No player ID available');
+            return;
+        }
+        
+        const showInLeaderboard = document.getElementById('showInLeaderboard').checked;
+        
+        // Update player settings
+        const response = await fetch(`/api/v1/private/update-player-settings`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${localStorage.getItem('apiKey')}`
+            },
+            body: JSON.stringify({
+                player_id: currentPlayerId,
+                show_in_leaderboard: showInLeaderboard
+            })
+        });
+        
+        const result = await response.json();
+        
+        if (result.success) {
+            showNotification('Einstellungen erfolgreich gespeichert!', 'success');
+            closeModal('settingsModal');
+        } else {
+            showNotification('Fehler beim Speichern der Einstellungen: ' + result.message, 'error');
+        }
+    } catch (error) {
+        console.error('Error saving settings:', error);
+        showNotification('Fehler beim Speichern der Einstellungen', 'error');
+    }
+}
+
+function showNotification(message, type = 'info') {
+    // Create notification element
+    const notification = document.createElement('div');
+    notification.className = `notification notification-${type}`;
+    notification.style.cssText = `
+        position: fixed;
+        top: 20px;
+        right: 20px;
+        background: ${type === 'success' ? '#10b981' : type === 'error' ? '#ef4444' : '#3b82f6'};
+        color: white;
+        padding: 1rem 1.5rem;
+        border-radius: 0.5rem;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        z-index: 10000;
+        max-width: 300px;
+        font-weight: 500;
+    `;
+    notification.textContent = message;
+    
+    document.body.appendChild(notification);
+    
+    // Remove notification after 3 seconds
+    setTimeout(() => {
+        if (notification.parentNode) {
+            notification.parentNode.removeChild(notification);
+        }
+    }, 3000);
+}
+
 document.addEventListener('DOMContentLoaded', function() {
     // Add cookie settings button functionality
     const cookieSettingsBtn = document.getElementById('cookie-settings-footer');
diff --git a/routes/api.js b/routes/api.js
index 6a240ee..e72d571 100644
--- a/routes/api.js
+++ b/routes/api.js
@@ -1851,6 +1851,7 @@ router.get('/v1/public/times-with-details', async (req, res) => {
         }
         
         // Get all times with player and location details, ordered by time (fastest first)
+        // Only show times from players who have opted into leaderboard visibility
         const result = await pool.query(`
             SELECT 
                 t.id,
@@ -1872,6 +1873,7 @@ router.get('/v1/public/times-with-details', async (req, res) => {
             LEFT JOIN players p ON t.player_id = p.id
             LEFT JOIN locations l ON t.location_id = l.id
             WHERE 1=1 ${locationFilter} ${dateFilter}
+            AND p.show_in_leaderboard = true
             ORDER BY t.recorded_time ASC
             LIMIT 50
         `);
@@ -2397,6 +2399,7 @@ router.get('/v1/public/best-times', async (req, res) => {
                 FROM times t
                 JOIN players p ON t.player_id = p.id
                 WHERE DATE(t.created_at AT TIME ZONE 'Europe/Berlin') = $1
+                AND p.show_in_leaderboard = true
                 GROUP BY t.player_id, p.firstname, p.lastname
             )
             SELECT 
@@ -2419,6 +2422,7 @@ router.get('/v1/public/best-times', async (req, res) => {
                 JOIN players p ON t.player_id = p.id
                 WHERE DATE(t.created_at AT TIME ZONE 'Europe/Berlin') >= $1
                 AND DATE(t.created_at AT TIME ZONE 'Europe/Berlin') <= $2
+                AND p.show_in_leaderboard = true
                 GROUP BY t.player_id, p.firstname, p.lastname
             )
             SELECT 
@@ -2441,6 +2445,7 @@ router.get('/v1/public/best-times', async (req, res) => {
                 JOIN players p ON t.player_id = p.id
                 WHERE DATE(t.created_at AT TIME ZONE 'Europe/Berlin') >= $1
                 AND DATE(t.created_at AT TIME ZONE 'Europe/Berlin') <= $2
+                AND p.show_in_leaderboard = true
                 GROUP BY t.player_id, p.firstname, p.lastname
             )
             SELECT 
@@ -2906,4 +2911,48 @@ router.get('/achievements/leaderboard', async (req, res) => {
     }
 });
 
+// Update player settings (privacy settings)
+router.post('/v1/private/update-player-settings', requireApiKey, async (req, res) => {
+    try {
+        const { player_id, show_in_leaderboard } = req.body;
+        
+        if (!player_id) {
+            return res.status(400).json({
+                success: false,
+                message: 'Player ID ist erforderlich'
+            });
+        }
+        
+        // Update player settings
+        const updateQuery = `
+            UPDATE players 
+            SET show_in_leaderboard = $1, updated_at = NOW()
+            WHERE id = $2
+            RETURNING id, firstname, lastname, show_in_leaderboard
+        `;
+        
+        const result = await pool.query(updateQuery, [show_in_leaderboard || false, player_id]);
+        
+        if (result.rows.length === 0) {
+            return res.status(404).json({
+                success: false,
+                message: 'Spieler nicht gefunden'
+            });
+        }
+        
+        res.json({
+            success: true,
+            message: 'Einstellungen erfolgreich aktualisiert',
+            data: result.rows[0]
+        });
+        
+    } catch (error) {
+        console.error('Error updating player settings:', error);
+        res.status(500).json({
+            success: false,
+            message: 'Fehler beim Aktualisieren der Einstellungen'
+        });
+    }
+});
+
 module.exports = { router, requireApiKey };