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

Changed to tabs for time

Browse Source
This commit is contained in:
Carsten Graf
2025-09-03 12:27:00 +02:00
parent 1d3d076a1d
commit 5730e0e12f
1 changed files with 133 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
public/index.html
View File

@@ -100,6 +100,106 @@
box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
}
/* Horizontal Time Tabs */
.time-tabs {
display: flex;
background: #1e293b;
border: 2px solid #334155;
border-radius: 0.75rem;
padding: 0.25rem;
gap: 0.25rem;
overflow-x: auto;
}
.time-tab {
flex: 1;
min-width: 0;
padding: 0.75rem 1rem;
background: transparent;
border: none;
border-radius: 0.5rem;
color: #94a3b8;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
white-space: nowrap;
}
.time-tab:hover {
background: #334155;
color: #e2e8f0;
transform: translateY(-1px);
}
.time-tab.active {
background: linear-gradient(135deg, #00d4ff, #0891b2);
color: white;
box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3);
}
.time-tab.active:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0, 212, 255, 0.4);
}
.tab-icon {
font-size: 1rem;
flex-shrink: 0;
}
.tab-text {
font-size: 0.875rem;
font-weight: 500;
}
/* Mobile responsive tabs */
@media (max-width: 768px) {
.time-tabs {
flex-direction: column;
gap: 0.5rem;
padding: 0.5rem;
}
.time-tab {
padding: 1rem;
justify-content: flex-start;
border-radius: 0.75rem;
}
.tab-text {
font-size: 1rem;
}
}
@media (max-width: 480px) {
.time-tabs {
flex-direction: row;
overflow-x: auto;
padding: 0.25rem;
gap: 0.25rem;
}
.time-tab {
min-width: 80px;
padding: 0.5rem 0.75rem;
flex-direction: column;
gap: 0.25rem;
}
.tab-icon {
font-size: 1.2rem;
}
.tab-text {
font-size: 0.75rem;
}
}
.refresh-btn {
width: 100%;
padding: 1rem;
@@ -564,12 +664,24 @@
<div class="control-group">
<label class="control-label">Zeitraum</label>
<select class="custom-select" id="periodSelect">
<option value="today">📅 Heute</option>
<option value="week">📊 Diese Woche</option>
<option value="month">📈 Dieser Monat</option>
<option value="all">♾️ Alle Zeiten</option>
</select>
<div class="time-tabs">
<button class="time-tab active" data-period="today">
<span class="tab-icon">📅</span>
<span class="tab-text">Heute</span>
</button>
<button class="time-tab" data-period="week">
<span class="tab-icon">📊</span>
<span class="tab-text">Diese Woche</span>
</button>
<button class="time-tab" data-period="month">
<span class="tab-icon">📈</span>
<span class="tab-text">Dieser Monat</span>
</button>
<button class="time-tab" data-period="all">
<span class="tab-icon">♾️</span>
<span class="tab-text">Alle Zeiten</span>
</button>
</div>
</div>
<button class="refresh-btn pulse-animation" onclick="loadData()">
@@ -751,7 +863,7 @@
async function loadData() {
try {
const location = document.getElementById('locationSelect').value;
const period = document.getElementById('periodSelect').value;
const period = document.querySelector('.time-tab.active').dataset.period;
// Build query parameters
const params = new URLSearchParams();
@@ -841,7 +953,7 @@
function updateCurrentSelection() {
const location = document.getElementById('locationSelect').value;
const period = document.getElementById('periodSelect').value;
const period = document.querySelector('.time-tab.active').dataset.period;
// Get the display text from the selected option
const locationSelect = document.getElementById('locationSelect');
@@ -919,9 +1031,20 @@
}).join('');
}
// Event Listener
// Event Listeners
document.getElementById('locationSelect').addEventListener('change', loadData);
document.getElementById('periodSelect').addEventListener('change', loadData);
// Time tab event listeners
document.querySelectorAll('.time-tab').forEach(tab => {
tab.addEventListener('click', function() {
// Remove active class from all tabs
document.querySelectorAll('.time-tab').forEach(t => t.classList.remove('active'));
// Add active class to clicked tab
this.classList.add('active');
// Load data with new period
loadData();
});
});
// Initialize page
async function init() {