🔒 Add privacy settings for leaderboard visibility
✨ 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
This commit is contained in:
@@ -1380,3 +1380,119 @@ body {
|
|||||||
color: #b3e5fc;
|
color: #b3e5fc;
|
||||||
font-size: 0.85rem;
|
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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -101,9 +101,10 @@
|
|||||||
<p>Verfolge deine Leistung und überwache wichtige Metriken. Dieser Abschnitt wird detaillierte Analysen anzeigen, sobald wir die Funktion implementieren.</p>
|
<p>Verfolge deine Leistung und überwache wichtige Metriken. Dieser Abschnitt wird detaillierte Analysen anzeigen, sobald wir die Funktion implementieren.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card">
|
<div class="card" onclick="showSettings()" style="cursor: pointer;">
|
||||||
<h3>⚡ Quick Actions</h3>
|
<h3>⚙️ Settings</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>
|
<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>
|
||||||
|
|
||||||
<div class="card" onclick="showRFIDSettings()" style="cursor: pointer;">
|
<div class="card" onclick="showRFIDSettings()" style="cursor: pointer;">
|
||||||
@@ -296,6 +297,42 @@
|
|||||||
</div>
|
</div>
|
||||||
</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')">×</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 -->
|
||||||
<footer class="footer">
|
<footer class="footer">
|
||||||
<div class="footer-content">
|
<div class="footer-content">
|
||||||
|
|||||||
@@ -941,6 +941,105 @@ setInterval(() => {
|
|||||||
checkAchievementNotifications();
|
checkAchievementNotifications();
|
||||||
}, 30000);
|
}, 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() {
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
// Add cookie settings button functionality
|
// Add cookie settings button functionality
|
||||||
const cookieSettingsBtn = document.getElementById('cookie-settings-footer');
|
const cookieSettingsBtn = document.getElementById('cookie-settings-footer');
|
||||||
|
|||||||
@@ -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)
|
// 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(`
|
const result = await pool.query(`
|
||||||
SELECT
|
SELECT
|
||||||
t.id,
|
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 players p ON t.player_id = p.id
|
||||||
LEFT JOIN locations l ON t.location_id = l.id
|
LEFT JOIN locations l ON t.location_id = l.id
|
||||||
WHERE 1=1 ${locationFilter} ${dateFilter}
|
WHERE 1=1 ${locationFilter} ${dateFilter}
|
||||||
|
AND p.show_in_leaderboard = true
|
||||||
ORDER BY t.recorded_time ASC
|
ORDER BY t.recorded_time ASC
|
||||||
LIMIT 50
|
LIMIT 50
|
||||||
`);
|
`);
|
||||||
@@ -2397,6 +2399,7 @@ router.get('/v1/public/best-times', async (req, res) => {
|
|||||||
FROM times t
|
FROM times t
|
||||||
JOIN players p ON t.player_id = p.id
|
JOIN players p ON t.player_id = p.id
|
||||||
WHERE DATE(t.created_at AT TIME ZONE 'Europe/Berlin') = $1
|
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
|
GROUP BY t.player_id, p.firstname, p.lastname
|
||||||
)
|
)
|
||||||
SELECT
|
SELECT
|
||||||
@@ -2419,6 +2422,7 @@ router.get('/v1/public/best-times', async (req, res) => {
|
|||||||
JOIN players p ON t.player_id = p.id
|
JOIN players p ON t.player_id = p.id
|
||||||
WHERE DATE(t.created_at AT TIME ZONE 'Europe/Berlin') >= $1
|
WHERE DATE(t.created_at AT TIME ZONE 'Europe/Berlin') >= $1
|
||||||
AND DATE(t.created_at AT TIME ZONE 'Europe/Berlin') <= $2
|
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
|
GROUP BY t.player_id, p.firstname, p.lastname
|
||||||
)
|
)
|
||||||
SELECT
|
SELECT
|
||||||
@@ -2441,6 +2445,7 @@ router.get('/v1/public/best-times', async (req, res) => {
|
|||||||
JOIN players p ON t.player_id = p.id
|
JOIN players p ON t.player_id = p.id
|
||||||
WHERE DATE(t.created_at AT TIME ZONE 'Europe/Berlin') >= $1
|
WHERE DATE(t.created_at AT TIME ZONE 'Europe/Berlin') >= $1
|
||||||
AND DATE(t.created_at AT TIME ZONE 'Europe/Berlin') <= $2
|
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
|
GROUP BY t.player_id, p.firstname, p.lastname
|
||||||
)
|
)
|
||||||
SELECT
|
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 };
|
module.exports = { router, requireApiKey };
|
||||||
|
|||||||
Reference in New Issue
Block a user