admin/raceplaner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Wiederherstellung von Funktionalität

Browse Source
This commit is contained in:
Thomas Arnold
2026-01-23 23:24:42 +01:00
parent 744a84663e
commit b22df1dc56
3 changed files with 242 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
app/templates/index.html
View File

@@ -1,81 +1,82 @@
<!DOCTYPE html>
<html lang="de" class="{% if current_user.theme == 'dark' %}dark{% endif %}">
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RACEPLANNER 2026</title>
<script>
tailwind.config = {
darkMode: 'class',
}
</script>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap');
body { font-family: 'Inter', sans-serif; transition: background-color 0.3s, color 0.3s; }
.glass { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(12px); border: 1px solid rgba(0,0,0,0.05); }
.dark .glass { background: rgba(15, 23, 42, 0.8); border: 1px solid rgba(255,255,255,0.05); }
.stint-card { transition: all 0.2s ease; border-left: 4px solid transparent; }
.stint-card:hover { transform: translateX(4px); }
.dark .stint-card:hover { background: rgba(30, 41, 59, 0.7); }
.light .stint-card:hover { background: rgba(241, 245, 249, 1); }
:root {
--bg-body: {{ '#0a0e17' if current_user.theme == 'dark' else '#f8fafc' }};
--bg-card: {{ '#0f172a' if current_user.theme == 'dark' else '#ffffff' }};
--text-main: {{ '#e2e8f0' if current_user.theme == 'dark' else '#1e293b' }};
--text-muted: {{ '#64748b' if current_user.theme == 'dark' else '#94a3b8' }};
--border-color: {{ 'rgba(255,255,255,0.05)' if current_user.theme == 'dark' else '#e2e8f0' }};
}
body { font-family: 'Inter', sans-serif; background-color: var(--bg-body); color: var(--text-main); transition: background 0.3s ease; }
.glass { background: var(--bg-card); border: 1px solid var(--border-color); box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); }
.stint-card { transition: all 0.2s ease; border-left: 4px solid transparent; background: {{ 'rgba(30, 41, 59, 0.5)' if current_user.theme == 'dark' else '#f1f5f9' }}; }
.stint-card:hover { transform: translateX(4px); background: {{ 'rgba(30, 41, 59, 0.8)' if current_user.theme == 'dark' else '#e2e8f0' }}; }
.handle { cursor: grab; }
select { background: {{ '#1e293b' if current_user.theme == 'dark' else '#ffffff' }}; border: 1px solid var(--border-color); color: var(--text-main); outline: none; }
</style>
</head>
<body class="bg-slate-50 text-slate-900 dark:bg-[#0a0e17] dark:text-e2e8f0 min-h-screen">
<nav class="glass sticky top-0 z-50 px-6 py-4 flex justify-between items-center mb-8 border-b dark:border-white/5">
<div class="flex items-center gap-4">
<h1 class="text-2xl font-black italic tracking-tighter text-blue-600 dark:text-blue-500">RACEPLANNER <span class="text-slate-400">2026</span></h1>
</div>
<div class="flex items-center gap-4">
<!-- Theme Toggle -->
<button onclick="toggleTheme()" class="p-2 rounded-full bg-slate-200 dark:bg-slate-800 hover:ring-2 ring-blue-500 transition-all">
<span id="theme-icon-light" class="hidden dark:block">☀️</span>
<span id="theme-icon-dark" class="block dark:hidden">🌙</span>
</button>
<div class="text-right">
<div class="text-[10px] font-bold uppercase opacity-50">User</div>
<div class="text-sm font-bold">{{ current_user.username }}</div>
<body class="p-4 md:p-8">
<div class="max-w-7xl mx-auto">
<!-- Header -->
<header class="flex flex-col md:flex-row justify-between items-center mb-10 gap-4">
<div>
<h1 class="text-4xl font-black italic tracking-tighter text-blue-600">RACEPLANNER <span class="text-slate-400 not-italic font-light">2026</span></h1>
<p class="text-xs font-bold uppercase tracking-widest text-slate-500">Endurance Strategy Engine</p>
</div>
<a href="/logout" class="bg-red-500/10 text-red-500 px-4 py-2 rounded-lg text-xs font-bold uppercase hover:bg-red-500 hover:text-white transition-all">Logout</a>
</div>
</nav>
<div class="flex flex-wrap items-center gap-4 justify-center">
<!-- Scenario Actions -->
<button onclick="saveScenarioPrompt()" class="bg-emerald-600 hover:bg-emerald-700 text-white text-[10px] font-black px-4 py-2 rounded-full uppercase tracking-widest">Sichern</button>
<button onclick="loadScenarioList()" class="bg-slate-600 hover:bg-slate-700 text-white text-[10px] font-black px-4 py-2 rounded-full uppercase tracking-widest">Laden</button>
<div class="flex bg-slate-200 dark:bg-slate-800 p-1 rounded-lg">
<button onclick="setTheme('light')" class="px-3 py-1 rounded {{ 'bg-white shadow-sm' if current_user.theme == 'light' else '' }} text-xs font-bold uppercase">Light</button>
<button onclick="setTheme('dark')" class="px-3 py-1 rounded {{ 'bg-blue-600 text-white shadow-sm' if current_user.theme == 'dark' else '' }} text-xs font-bold uppercase">Dark</button>
</div>
<a href="/logout" class="text-xs font-bold uppercase px-4 py-2 border border-red-500/50 text-red-500 rounded hover:bg-red-500 transition-all">Logout</a>
</div>
</header>
<div class="max-w-[1400px] mx-auto px-6 pb-20">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
{% for car_num in [1, 2] %}
{% set schedule = car1 if car_num == 1 else car2 %}
<div class="space-y-6">
<div class="flex justify-between items-end border-b-2 border-blue-600 pb-2">
<h2 class="text-4xl font-black italic">CAR <span class="text-blue-600">#{{ car_num }}</span></h2>
<a href="/export_pdf/{{ car_num }}" class="bg-blue-600 text-white px-4 py-2 rounded font-bold text-xs uppercase tracking-widest hover:bg-blue-700">PDF Export</a>
<div class="glass rounded-3xl overflow-hidden p-6">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-black italic">CAR <span class="text-blue-600">#{{ car_num }}</span></h2>
<a href="/export_pdf/{{ car_num }}" class="bg-blue-600 hover:bg-blue-700 text-white text-[10px] font-black px-4 py-2 rounded-full uppercase tracking-widest">PDF Export</a>
</div>
<div id="stints-car-{{ car_num }}" class="space-y-3">
{% set schedule = car1 if car_num == 1 else car2 %}
{% for s in schedule %}
<div data-id="{{ s.id }}" class="stint-card glass p-4 rounded-xl flex items-center gap-4 border-l-4 {% if s.is_finish %}border-l-blue-500{% else %}border-l-slate-300 dark:border-l-slate-700{% endif %}">
<div class="handle text-slate-400 hover:text-blue-500">⠿</div>
<div class="w-12 text-center">
<div class="text-[10px] font-bold text-slate-500">STINT</div>
<div class="text-xl font-black">#{{ s.number }}</div>
<div class="stint-card p-4 rounded-xl flex items-center gap-4 group {{ 'border-blue-600' if s.is_finish else 'border-slate-400/20' }}" data-id="{{ s.id }}">
<div class="handle text-slate-500 opacity-20 group-hover:opacity-100">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M7 10l5-5 5 5M7 14l5 5 5-5"/></svg>
</div>
<div class="w-16">
<div class="text-[10px] font-bold text-slate-500 uppercase">{{ s.date }}</div>
<div class="text-lg font-black">{{ s.start }}</div>
</div>
<div class="flex-1">
<div class="flex items-center gap-2 mb-1">
<span class="text-[10px] font-mono bg-slate-200 dark:bg-slate-800 px-2 py-0.5 rounded">{{ s.date }}</span>
<span class="text-sm font-black">{{ s.start }} — {{ s.end }}</span>
</div>
<select onchange="updateStintDriver({{ s.id }}, this.value)" class="w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded px-2 py-1 text-sm font-bold focus:ring-2 ring-blue-500 outline-none">
<select onchange="updateStintDriver({{ s.id }}, this.value)" class="text-sm font-bold p-1 rounded">
{% for d in drivers %}
<option value="{{ d.id }}" {% if d.id == s.driver_id %}selected{% endif %}>{{ d.name }}</option>
<option value="{{ d.id }}" {{ 'selected' if d.id == s.driver_id else '' }}>{{ d.name }}</option>
{% endfor %}
</select>
<div class="text-[10px] font-bold text-slate-500 uppercase mt-1">
{{ s.laps }} Runden · <span class="text-green-500">{{ s.fuel }}L</span>
</div>
</div>
<div class="text-right min-w-[80px]">
<div class="text-[10px] font-bold text-green-600 dark:text-green-500">{{ s.fuel }}L</div>
<div class="text-lg font-black">{{ s.laps }} <span class="text-[10px] text-slate-500 uppercase">Laps</span></div>
{% if s.is_finish %}<span class="bg-blue-600 text-white text-[8px] font-black px-2 py-1 rounded uppercase">Finish</span>
{% elif s.change_tires %}<span class="bg-green-600/20 text-green-600 dark:text-green-500 text-[8px] font-black px-2 py-1 rounded border border-green-500/30 uppercase">Tires</span>{% endif %}
<div class="text-right">
<div class="text-lg font-black">{{ s.end }}</div>
{% if s.is_finish %}<span class="bg-blue-600 text-white text-[8px] font-black px-2 py-1 rounded uppercase">Finish</span>{% endif %}
</div>
</div>
{% endfor %}
@@ -85,32 +86,50 @@
</div>
</div>
<script>
function toggleTheme() {
const isDark = document.documentElement.classList.contains('dark');
const newTheme = isDark ? 'light' : 'dark';
if (newTheme === 'dark') {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
<!-- Modals (Simple Replacement for alert/prompt) -->
<div id="scenario-modal" class="hidden fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50">
<div class="glass max-w-md w-full p-8 rounded-3xl">
<h3 id="modal-title" class="text-xl font-black mb-4 uppercase italic">Szenario</h3>
<div id="modal-content" class="space-y-4"></div>
<div class="flex justify-end gap-4 mt-6">
<button onclick="closeModal()" class="text-xs font-bold uppercase text-slate-500">Abbrechen</button>
</div>
</div>
</div>
fetch('/update_theme', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({theme: newTheme})
});
<script>
function setTheme(theme) {
fetch('/update_theme', {method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({theme: theme})}).then(() => window.location.reload());
}
function updateStintDriver(stintId, driverId) {
fetch('/update_stint_driver', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({stint_id: stintId, driver_id: driverId})
}).then(() => window.location.reload());
fetch('/update_stint_driver', {method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({stint_id: stintId, driver_id: driverId})}).then(() => window.location.reload());
}
function saveScenarioPrompt() {
const name = prompt("Name für das Szenario:");
if(name) {
fetch('/save_scenario', {method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({name: name})})
.then(r => r.json()).then(() => alert("Gespeichert!"));
}
}
function loadScenarioList() {
fetch('/list_scenarios').then(r => r.json()).then(files => {
const list = files.map(f => `<button onclick="loadScenario('${f}')" class="w-full text-left p-3 hover:bg-blue-600 rounded-lg text-sm font-bold border border-white/5 mb-2">${f}</button>`).join('');
document.getElementById('modal-title').innerText = "Szenario Laden";
document.getElementById('modal-content').innerHTML = list || "Keine Szenarien gefunden.";
document.getElementById('scenario-modal').classList.remove('hidden');
});
}
function loadScenario(file) {
fetch('/load_scenario', {method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({filename: file})})
.then(() => window.location.reload());
}
function closeModal() { document.getElementById('scenario-modal').classList.add('hidden'); }
[1, 2].forEach(num => {
const el = document.getElementById('stints-car-' + num);
if(el) {
@@ -118,11 +137,7 @@
handle: '.handle', animation: 150,
onEnd: function() {
const order = Array.from(el.children).map(item => item.dataset.id);
fetch('/reorder_stints', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({order: order})
}).then(() => window.location.reload());
fetch('/reorder_stints', {method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({order: order})}).then(() => window.location.reload());
}
});
}