reptil1990/Ninjaserver
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add bilingual support (German/English) with language selector

Browse Source 
- Added language selector in top-left corner
- Implemented data attributes for all translatable text
- Created language management system with localStorage persistence
- Updated all JavaScript functions to support both languages
- Added translations for notifications, error messages, and UI elements
- Maintained existing functionality while adding language switching
This commit is contained in:
Carsten Graf
2025-09-10 18:42:56 +02:00
parent c84d38b48f
commit 936db67ba4
6 changed files with 239 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
public/css/generator.css
View File

@@ -21,7 +21,7 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: flex-start;
padding: 20px; padding: 20px;
background-image: background-image:
radial-gradient(circle at 20% 80%, #1a1a2e 0%, transparent 50%), radial-gradient(circle at 20% 80%, #1a1a2e 0%, transparent 50%),
@@ -38,11 +38,10 @@ body {
max-width: 700px; max-width: 700px;
width: 100%; width: 100%;
position: relative; position: relative;
overflow: hidden; overflow: visible;
flex-grow: 1; margin-bottom: 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);
} }

32
public/css/leaderboard.css
View File

@@ -24,6 +24,38 @@ body {
min-height: 100vh; min-height: 100vh;
} }
/* Language Selector */
.language-selector {
position: fixed;
top: 2rem;
left: 2rem;
z-index: 1000;
}
.language-selector select {
padding: 0.5rem 1rem;
background: rgba(15, 23, 42, 0.9);
border: 1px solid #334155;
border-radius: 0.5rem;
color: #ffffff;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
backdrop-filter: blur(10px);
}
.language-selector select:hover {
border-color: #00d4ff;
box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.1);
}
.language-selector select:focus {
outline: none;
border-color: #00d4ff;
box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.2);
}
.header-section { .header-section {
text-align: center; text-align: center;
margin-bottom: 3rem; margin-bottom: 3rem;

14
public/generator.html
View File

@@ -67,5 +67,19 @@
<script src="/js/cookie-consent.js"></script> <script src="/js/cookie-consent.js"></script>
<script src="/js/generator.js"></script> <script src="/js/generator.js"></script>
<script>
// Verhindert Enter-Taste in Eingabefeldern
document.addEventListener('DOMContentLoaded', function() {
const inputs = document.querySelectorAll('input, textarea');
inputs.forEach(input => {
input.addEventListener('keydown', function(e) {
if (e.key === 'Enter') {
e.preventDefault();
return false;
}
});
});
});
</script>
</body> </body>
</html> </html>

58
public/index.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -15,13 +15,21 @@
<div class="notification-content"> <div class="notification-content">
<div class="notification-icon">🏁</div> <div class="notification-icon">🏁</div>
<div class="notification-text"> <div class="notification-text">
<div class="notification-title" id="notificationTitle">Neue Zeit!</div> <div class="notification-title" id="notificationTitle" data-de="Neue Zeit!" data-en="New Time!">New Time!</div>
<div class="notification-subtitle" id="notificationSubtitle">Ein neuer Rekord wurde erstellt</div> <div class="notification-subtitle" id="notificationSubtitle" data-de="Ein neuer Rekord wurde erstellt" data-en="A new record has been created">A new record has been created</div>
</div> </div>
</div> </div>
</div> </div>
<div class="main-container"> <div class="main-container">
<!-- Language Selector -->
<div class="language-selector">
<select id="languageSelect" onchange="changeLanguage()">
<option value="de">🇩🇪 Deutsch</option>
<option value="en">🇺🇸 English</option>
</select>
</div>
<!-- Admin Login Button --> <!-- Admin Login Button -->
<div class="mobile-nav-buttons"> <div class="mobile-nav-buttons">
<a href="/login" class="admin-login-btn" id="adminLoginBtn">🔐 Login</a> <a href="/login" class="admin-login-btn" id="adminLoginBtn">🔐 Login</a>
@@ -31,47 +39,47 @@
<div class="header-section"> <div class="header-section">
<h1 class="main-title">NINJACROSS LEADERBOARD</h1> <h1 class="main-title">NINJACROSS LEADERBOARD</h1>
<p class="tagline">Die ultimative NinjaCross-Rangliste</p> <p class="tagline" data-de="Die ultimative NinjaCross-Rangliste" data-en="The ultimate NinjaCross leaderboard">The ultimate NinjaCross leaderboard</p>
</div> </div>
<div class="dashboard-grid"> <div class="dashboard-grid">
<div class="control-panel"> <div class="control-panel">
<div class="control-group"> <div class="control-group">
<label class="control-label">Standort</label> <label class="control-label" data-de="Standort" data-en="Location">Location</label>
<div class="location-control"> <div class="location-control">
<select class="custom-select location-select" id="locationSelect"> <select class="custom-select location-select" id="locationSelect">
<option value="">📍 Bitte Standort auswählen</option> <option value="">📍 Please select location</option>
<!-- Standorte werden dynamisch geladen --> <!-- Locations are loaded dynamically -->
</select> </select>
<button class="location-btn" id="findLocationBtn" onclick="findNearestLocation()" title="Nächstgelegenen Standort finden"> <button class="location-btn" id="findLocationBtn" onclick="findNearestLocation()" title="Find nearest location" data-de="📍 Mein Standort" data-en="📍 My Location">
📍 Mein Standort 📍 My Location
</button> </button>
</div> </div>
</div> </div>
<div class="control-group"> <div class="control-group">
<label class="control-label">Zeitraum</label> <label class="control-label" data-de="Zeitraum" data-en="Time Period">Time Period</label>
<div class="time-tabs"> <div class="time-tabs">
<button class="time-tab" data-period="today"> <button class="time-tab" data-period="today">
<span class="tab-icon">📅</span> <span class="tab-icon">📅</span>
<span class="tab-text">Heute</span> <span class="tab-text" data-de="Heute" data-en="Today">Today</span>
</button> </button>
<button class="time-tab" data-period="week"> <button class="time-tab" data-period="week">
<span class="tab-icon">📊</span> <span class="tab-icon">📊</span>
<span class="tab-text">Diese Woche</span> <span class="tab-text" data-de="Diese Woche" data-en="This Week">This Week</span>
</button> </button>
<button class="time-tab" data-period="month"> <button class="time-tab" data-period="month">
<span class="tab-icon">📈</span> <span class="tab-icon">📈</span>
<span class="tab-text">Dieser Monat</span> <span class="tab-text" data-de="Dieser Monat" data-en="This Month">This Month</span>
</button> </button>
<button class="time-tab active" data-period="all"> <button class="time-tab active" data-period="all">
<span class="tab-icon">♾️</span> <span class="tab-icon">♾️</span>
<span class="tab-text">Alle Zeiten</span> <span class="tab-text" data-de="Alle Zeiten" data-en="All Times">All Times</span>
</button> </button>
</div> </div>
</div> </div>
<button class="refresh-btn pulse-animation" onclick="loadData()"> <button class="refresh-btn pulse-animation" onclick="loadData()" data-de="⚡ Live Update" data-en="⚡ Live Update">
⚡ Live Update ⚡ Live Update
</button> </button>
</div> </div>
@@ -80,15 +88,15 @@
<div class="stats-grid"> <div class="stats-grid">
<div class="stat-card"> <div class="stat-card">
<div class="stat-value" id="totalPlayers">0</div> <div class="stat-value" id="totalPlayers">0</div>
<div class="stat-label">Teilnehmer</div> <div class="stat-label" data-de="Teilnehmer" data-en="Participants">Participants</div>
</div> </div>
<div class="stat-card"> <div class="stat-card">
<div class="stat-value" id="bestTime">--:--</div> <div class="stat-value" id="bestTime">--:--</div>
<div class="stat-label">Rekordzeit</div> <div class="stat-label" data-de="Rekordzeit" data-en="Record Time">Record Time</div>
</div> </div>
<div class="stat-card"> <div class="stat-card">
<div class="stat-value" id="totalRecords">0</div> <div class="stat-value" id="totalRecords">0</div>
<div class="stat-label">Läufe</div> <div class="stat-label" data-de="Läufe" data-en="Runs">Runs</div>
</div> </div>
</div> </div>
</div> </div>
@@ -97,15 +105,15 @@
<div class="leaderboard-container"> <div class="leaderboard-container">
<div class="leaderboard-header"> <div class="leaderboard-header">
<div class="active-filters" id="currentSelection"> <div class="active-filters" id="currentSelection">
📍 Bitte Standort auswählen • ♾️ Alle Zeiten 📍 Please select location • ♾️ All Times
</div> </div>
<div class="last-sync" id="lastUpdated"> <div class="last-sync" id="lastUpdated">
Letzter Sync: Loading... Last Sync: Loading...
</div> </div>
</div> </div>
<div class="rankings-list" id="rankingList"> <div class="rankings-list" id="rankingList">
<!-- Rankings werden hier eingefügt --> <!-- Rankings will be inserted here -->
</div> </div>
</div> </div>
</div> </div>
@@ -114,12 +122,12 @@
<footer class="footer"> <footer class="footer">
<div class="footer-content"> <div class="footer-content">
<div class="footer-links"> <div class="footer-links">
<a href="/impressum.html" class="footer-link">Impressum</a> <a href="/impressum.html" class="footer-link" data-de="Impressum" data-en="Imprint">Imprint</a>
<a href="/datenschutz.html" class="footer-link">Datenschutz</a> <a href="/datenschutz.html" class="footer-link" data-de="Datenschutz" data-en="Privacy">Privacy</a>
<button id="cookie-settings-footer" class="footer-link cookie-settings-btn">Cookie-Einstellungen</button> <button id="cookie-settings-footer" class="footer-link cookie-settings-btn" data-de="Cookie-Einstellungen" data-en="Cookie Settings">Cookie Settings</button>
</div> </div>
<div class="footer-text"> <div class="footer-text">
<p>&copy; 2024 NinjaCross. Alle Rechte vorbehalten.</p> <p data-de="&copy; 2024 NinjaCross. Alle Rechte vorbehalten." data-en="&copy; 2024 NinjaCross. All rights reserved.">&copy; 2024 NinjaCross. All rights reserved.</p>
</div> </div>
</div> </div>
</footer> </footer>

188
public/js/leaderboard.js
View File

@@ -65,15 +65,15 @@ function saveLocationSelection(locationId, locationName) {
// WebSocket Event Handlers // WebSocket Event Handlers
socket.on('connect', () => { socket.on('connect', () => {
console.log('🔌 WebSocket verbunden'); console.log('🔌 WebSocket connected');
}); });
socket.on('disconnect', () => { socket.on('disconnect', () => {
console.log('🔌 WebSocket getrennt'); console.log('🔌 WebSocket disconnected');
}); });
socket.on('newTime', (data) => { socket.on('newTime', (data) => {
console.log('🏁 Neue Zeit empfangen:', data); console.log('🏁 New time received:', data);
showNotification(data); showNotification(data);
// Reload data to show the new time // Reload data to show the new time
loadData(); loadData();
@@ -86,12 +86,13 @@ function showNotification(timeData) {
const notificationSubtitle = document.getElementById('notificationSubtitle'); const notificationSubtitle = document.getElementById('notificationSubtitle');
// Format the time data // Format the time data
const playerName = timeData.player_name || 'Unbekannter Spieler'; const playerName = timeData.player_name || (currentLanguage === 'de' ? 'Unbekannter Spieler' : 'Unknown Player');
const locationName = timeData.location_name || 'Unbekannter Standort'; const locationName = timeData.location_name || (currentLanguage === 'de' ? 'Unbekannter Standort' : 'Unknown Location');
const timeString = timeData.recorded_time || '--:--'; const timeString = timeData.recorded_time || '--:--';
// Update notification content // Update notification content
notificationTitle.textContent = `🏁 Neue Zeit von ${playerName}!`; const newTimeText = currentLanguage === 'de' ? 'Neue Zeit von' : 'New time from';
notificationTitle.textContent = `🏁 ${newTimeText} ${playerName}!`;
notificationSubtitle.textContent = `${timeString} • ${locationName}`; notificationSubtitle.textContent = `${timeString} • ${locationName}`;
// Show notification // Show notification
@@ -171,7 +172,8 @@ async function loadLocations() {
locationsData = locations; locationsData = locations;
// Clear existing options and set default placeholder // Clear existing options and set default placeholder
locationSelect.innerHTML = '<option value="">📍 Bitte Standort auswählen</option>'; const placeholderText = currentLanguage === 'de' ? '📍 Bitte Standort auswählen' : '📍 Please select location';
locationSelect.innerHTML = `<option value="">${placeholderText}</option>`;
// Add locations from database // Add locations from database
locations.forEach(location => { locations.forEach(location => {
@@ -230,14 +232,17 @@ async function findNearestLocation() {
// Check if geolocation is supported // Check if geolocation is supported
if (!navigator.geolocation) { if (!navigator.geolocation) {
showLocationError('Geolocation wird von diesem Browser nicht unterstützt.'); const errorMsg = currentLanguage === 'de' ?
'Geolocation wird von diesem Browser nicht unterstützt.' :
'Geolocation is not supported by this browser.';
showLocationError(errorMsg);
return; return;
} }
// Update button state to loading // Update button state to loading
btn.disabled = true; btn.disabled = true;
btn.classList.add('loading'); btn.classList.add('loading');
btn.textContent = '🔍 Suche...'; btn.textContent = currentLanguage === 'de' ? '🔍 Suche...' : '🔍 Searching...';
try { try {
// Get user's current position // Get user's current position
@@ -283,18 +288,24 @@ async function findNearestLocation() {
} catch (error) { } catch (error) {
console.error('Error getting location:', error); console.error('Error getting location:', error);
let errorMessage = 'Standort konnte nicht ermittelt werden.'; let errorMessage = currentLanguage === 'de' ? 'Standort konnte nicht ermittelt werden.' : 'Location could not be determined.';
if (error.code) { if (error.code) {
switch(error.code) { switch(error.code) {
case error.PERMISSION_DENIED: case error.PERMISSION_DENIED:
errorMessage = 'Standortzugriff wurde verweigert. Bitte erlaube den Standortzugriff in den Browser-Einstellungen.'; errorMessage = currentLanguage === 'de' ?
'Standortzugriff wurde verweigert. Bitte erlaube den Standortzugriff in den Browser-Einstellungen.' :
'Location access was denied. Please allow location access in browser settings.';
break; break;
case error.POSITION_UNAVAILABLE: case error.POSITION_UNAVAILABLE:
errorMessage = 'Standortinformationen sind nicht verfügbar.'; errorMessage = currentLanguage === 'de' ?
'Standortinformationen sind nicht verfügbar.' :
'Location information is not available.';
break; break;
case error.TIMEOUT: case error.TIMEOUT:
errorMessage = 'Zeitüberschreitung beim Abrufen des Standorts.'; errorMessage = currentLanguage === 'de' ?
'Zeitüberschreitung beim Abrufen des Standorts.' :
'Timeout while retrieving location.';
break; break;
} }
} }
@@ -304,7 +315,7 @@ async function findNearestLocation() {
// Reset button state // Reset button state
btn.disabled = false; btn.disabled = false;
btn.classList.remove('loading'); btn.classList.remove('loading');
btn.textContent = '📍 Mein Standort'; btn.textContent = currentLanguage === 'de' ? '📍 Mein Standort' : '📍 My Location';
} }
} }
@@ -315,8 +326,10 @@ function showLocationSuccess(locationName, distance) {
const notificationSubtitle = document.getElementById('notificationSubtitle'); const notificationSubtitle = document.getElementById('notificationSubtitle');
// Update notification content // Update notification content
notificationTitle.textContent = `📍 Standort gefunden!`; const locationFoundText = currentLanguage === 'de' ? 'Standort gefunden!' : 'Location found!';
notificationSubtitle.textContent = `${locationName} (${distance.toFixed(1)} km entfernt)`; const distanceText = currentLanguage === 'de' ? 'km entfernt' : 'km away';
notificationTitle.textContent = `📍 ${locationFoundText}`;
notificationSubtitle.textContent = `${locationName} (${distance.toFixed(1)} ${distanceText})`;
// Show notification // Show notification
notificationBubble.classList.remove('hide'); notificationBubble.classList.remove('hide');
@@ -338,7 +351,8 @@ function showLocationError(message) {
notificationBubble.style.background = 'linear-gradient(135deg, #dc3545, #c82333)'; notificationBubble.style.background = 'linear-gradient(135deg, #dc3545, #c82333)';
// Update notification content // Update notification content
notificationTitle.textContent = '❌ Fehler'; const errorText = currentLanguage === 'de' ? 'Fehler' : 'Error';
notificationTitle.textContent = `❌ ${errorText}`;
notificationSubtitle.textContent = message; notificationSubtitle.textContent = message;
// Show notification // Show notification
@@ -356,15 +370,16 @@ function showLocationError(message) {
// Show prompt when no location is selected // Show prompt when no location is selected
function showLocationSelectionPrompt() { function showLocationSelectionPrompt() {
const rankingList = document.getElementById('rankingList'); const rankingList = document.getElementById('rankingList');
const emptyTitle = currentLanguage === 'de' ? 'Standort auswählen' : 'Select Location';
const emptyDescription = currentLanguage === 'de' ?
'Bitte wähle einen Standort aus dem Dropdown-Menü aus<br>oder nutze den "📍 Mein Standort" Button, um automatisch<br>den nächstgelegenen Standort zu finden.' :
'Please select a location from the dropdown menu<br>or use the "📍 My Location" button to automatically<br>find the nearest location.';
rankingList.innerHTML = ` rankingList.innerHTML = `
<div class="empty-state"> <div class="empty-state">
<div class="empty-icon">📍</div> <div class="empty-icon">📍</div>
<div class="empty-title">Standort auswählen</div> <div class="empty-title">${emptyTitle}</div>
<div class="empty-description"> <div class="empty-description">${emptyDescription}</div>
Bitte wähle einen Standort aus dem Dropdown-Menü aus<br>
oder nutze den "📍 Mein Standort" Button, um automatisch<br>
den nächstgelegenen Standort zu finden.
</div>
</div> </div>
`; `;
@@ -410,10 +425,11 @@ async function loadData() {
const leaderboardData = times.map(time => { const leaderboardData = times.map(time => {
const { minutes, seconds, milliseconds } = time.recorded_time; const { minutes, seconds, milliseconds } = time.recorded_time;
const timeString = `${minutes}:${seconds.toString().padStart(2, '0')}.${milliseconds}`; const timeString = `${minutes}:${seconds.toString().padStart(2, '0')}.${milliseconds}`;
const playerName = time.player ? const playerName = time.player ?
`${time.player.firstname} ${time.player.lastname}` : `${time.player.firstname} ${time.player.lastname}` :
'Unknown Player'; (currentLanguage === 'de' ? 'Unbekannter Spieler' : 'Unknown Player');
const locationName = time.location ? time.location.name : 'Unknown Location'; const locationName = time.location ? time.location.name :
(currentLanguage === 'de' ? 'Unbekannter Standort' : 'Unknown Location');
const date = new Date(time.created_at).toISOString().split('T')[0]; const date = new Date(time.created_at).toISOString().split('T')[0];
return { return {
@@ -482,34 +498,43 @@ function updateCurrentSelection() {
// Get the display text from the selected option // Get the display text from the selected option
const locationSelect = document.getElementById('locationSelect'); const locationSelect = document.getElementById('locationSelect');
const selectedLocationOption = locationSelect.options[locationSelect.selectedIndex]; const selectedLocationOption = locationSelect.options[locationSelect.selectedIndex];
const locationDisplay = selectedLocationOption ? selectedLocationOption.textContent : '📍 Bitte Standort auswählen'; const locationDisplay = selectedLocationOption ? selectedLocationOption.textContent :
(currentLanguage === 'de' ? '📍 Bitte Standort auswählen' : '📍 Please select location');
const periodIcons = { const periodIcons = currentLanguage === 'de' ? {
'today': '📅 Heute', 'today': '📅 Heute',
'week': '📊 Diese Woche', 'week': '📊 Diese Woche',
'month': '📈 Dieser Monat', 'month': '📈 Dieser Monat',
'all': '♾️ Alle Zeiten' 'all': '♾️ Alle Zeiten'
} : {
'today': '📅 Today',
'week': '📊 This Week',
'month': '📈 This Month',
'all': '♾️ All Times'
}; };
document.getElementById('currentSelection').textContent = document.getElementById('currentSelection').textContent =
`${locationDisplay} • ${periodIcons[period]}`; `${locationDisplay} • ${periodIcons[period]}`;
const lastSyncText = currentLanguage === 'de' ? 'Letzter Sync' : 'Last Sync';
document.getElementById('lastUpdated').textContent = document.getElementById('lastUpdated').textContent =
`Letzter Sync: ${new Date().toLocaleTimeString('de-DE')}`; `${lastSyncText}: ${new Date().toLocaleTimeString(currentLanguage === 'de' ? 'de-DE' : 'en-US')}`;
} }
function updateLeaderboard(data) { function updateLeaderboard(data) {
const rankingList = document.getElementById('rankingList'); const rankingList = document.getElementById('rankingList');
if (data.length === 0) { if (data.length === 0) {
const emptyTitle = currentLanguage === 'de' ? 'Keine Rekorde gefunden' : 'No records found';
const emptyDescription = currentLanguage === 'de' ?
'Für diese Filtereinstellungen liegen noch keine Zeiten vor.<br>Versuche es mit einem anderen Zeitraum oder Standort.' :
'No times available for these filter settings.<br>Try a different time period or location.';
rankingList.innerHTML = ` rankingList.innerHTML = `
<div class="empty-state"> <div class="empty-state">
<div class="empty-icon">🏁</div> <div class="empty-icon">🏁</div>
<div class="empty-title">Keine Rekorde gefunden</div> <div class="empty-title">${emptyTitle}</div>
<div class="empty-description"> <div class="empty-description">${emptyDescription}</div>
Für diese Filtereinstellungen liegen noch keine Zeiten vor.<br>
Versuche es mit einem anderen Zeitraum oder Standort.
</div>
</div> </div>
`; `;
return; return;
@@ -533,7 +558,7 @@ function updateLeaderboard(data) {
trophy = '⭐'; trophy = '⭐';
} }
const formatDate = new Date(player.date).toLocaleDateString('de-DE', { const formatDate = new Date(player.date).toLocaleDateString(currentLanguage === 'de' ? 'de-DE' : 'en-US', {
day: '2-digit', day: '2-digit',
month: 'short' month: 'short'
}); });
@@ -600,8 +625,99 @@ function startAutoRefresh() {
setInterval(loadData, 45000); setInterval(loadData, 45000);
} }
// Language Management
let currentLanguage = 'en'; // Default to English
// Translation function
function translateElement(element, language) {
if (element.dataset[language]) {
element.textContent = element.dataset[language];
}
}
// Change language function
function changeLanguage() {
const languageSelect = document.getElementById('languageSelect');
currentLanguage = languageSelect.value;
// Save language preference
localStorage.setItem('ninjacross_language', currentLanguage);
// Translate all elements with data attributes
const elementsToTranslate = document.querySelectorAll('[data-de][data-en]');
elementsToTranslate.forEach(element => {
translateElement(element, currentLanguage);
});
// Update dynamic content
updateDynamicContent();
console.log(`🌐 Language changed to: ${currentLanguage}`);
}
// Update dynamic content that's not in HTML
function updateDynamicContent() {
// Update location select placeholder
const locationSelect = document.getElementById('locationSelect');
if (locationSelect && locationSelect.options[0]) {
locationSelect.options[0].textContent = currentLanguage === 'de' ?
'📍 Bitte Standort auswählen' : '📍 Please select location';
}
// Update find location button
const findLocationBtn = document.getElementById('findLocationBtn');
if (findLocationBtn) {
findLocationBtn.textContent = currentLanguage === 'de' ?
'📍 Mein Standort' : '📍 My Location';
findLocationBtn.title = currentLanguage === 'de' ?
'Nächstgelegenen Standort finden' : 'Find nearest location';
}
// Update refresh button
const refreshBtn = document.querySelector('.refresh-btn');
if (refreshBtn) {
refreshBtn.textContent = currentLanguage === 'de' ?
'⚡ Live Update' : '⚡ Live Update';
}
// Update notification elements
const notificationTitle = document.getElementById('notificationTitle');
const notificationSubtitle = document.getElementById('notificationSubtitle');
if (notificationTitle) {
notificationTitle.textContent = currentLanguage === 'de' ? 'Neue Zeit!' : 'New Time!';
}
if (notificationSubtitle) {
notificationSubtitle.textContent = currentLanguage === 'de' ?
'Ein neuer Rekord wurde erstellt' : 'A new record has been created';
}
// Update current selection display
updateCurrentSelection();
// Reload data to update any dynamic content
if (document.getElementById('locationSelect').value) {
loadData();
} else {
showLocationSelectionPrompt();
}
}
// Load saved language preference
function loadLanguagePreference() {
const savedLanguage = localStorage.getItem('ninjacross_language');
if (savedLanguage && (savedLanguage === 'de' || savedLanguage === 'en')) {
currentLanguage = savedLanguage;
const languageSelect = document.getElementById('languageSelect');
if (languageSelect) {
languageSelect.value = currentLanguage;
}
}
}
// Start the application when DOM is loaded // Start the application when DOM is loaded
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
loadLanguagePreference();
changeLanguage(); // Apply saved language
init(); init();
startAutoRefresh(); startAutoRefresh();

6
public/js/login.js
View File

@@ -9,7 +9,11 @@ const supabase = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
async function checkAuth() { async function checkAuth() {
const { data: { session } } = await supabase.auth.getSession(); const { data: { session } } = await supabase.auth.getSession();
if (session) { if (session) {
window.location.href = '/'; // Show a message that user is already logged in
showMessage('Sie sind bereits eingeloggt! Weiterleitung zum Dashboard...', 'success');
setTimeout(() => {
window.location.href = '/';
}, 2000);
} }
} }