core/Projektarbeit-MYP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

"Refactor template files for calendar and guest status"

Browse Source
This commit is contained in:
Till Tomczak
2025-05-29 15:44:20 +02:00
parent b916cdaca3
commit 1c466b199a
4 changed files with 996 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
backend/app/templates/calendar.html
View File

@@ -10,30 +10,90 @@
{% endblock %}
{% block content %}
<div class="bg-professional">
<div class="bg-professional" style="background: #f8fafc !important;">
<!-- Dark Mode Override -->
<style>
.dark .bg-professional {
background: #000000 !important;
}
.dark .professional-hero {
background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%) !important;
border-color: #333333 !important;
}
.dark .professional-container {
background: #111111 !important;
border-color: #333333 !important;
}
.dark .mb-glass {
background: rgba(17, 17, 17, 0.95) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}
.dark .input-professional {
background: #1a1a1a !important;
border-color: #333333 !important;
color: #ffffff !important;
}
.dark .input-professional:focus {
border-color: #3b82f6 !important;
background: #222222 !important;
}
/* FullCalendar Dark Mode Anpassungen */
.dark .fc {
background: #111111 !important;
color: #ffffff !important;
}
.dark .fc-theme-standard td,
.dark .fc-theme-standard th {
border-color: #333333 !important;
}
.dark .fc-button {
background: #1a1a1a !important;
border-color: #333333 !important;
color: #ffffff !important;
}
.dark .fc-button:hover {
background: #333333 !important;
}
.dark .fc-button-primary:not(:disabled).fc-button-active {
background: #3b82f6 !important;
border-color: #3b82f6 !important;
}
.dark .fc-col-header-cell {
background: #1a1a1a !important;
}
.dark .fc-daygrid-day {
background: #111111 !important;
}
.dark .fc-timegrid-slot {
border-color: #333333 !important;
}
.dark .fc-timegrid-axis {
background: #1a1a1a !important;
}
</style>
<!-- Professional Hero Header -->
<div class="professional-hero hero-pattern animate-fade-in">
<div class="absolute inset-0 bg-gradient-to-r from-black/10 to-black/20 dark:from-black/20 dark:to-black/40"></div>
<div class="professional-hero hero-pattern animate-fade-in" style="margin: 2rem; margin-bottom: 3rem;">
<div class="absolute inset-0 bg-gradient-to-r from-black/10 to-black/20 dark:from-black/40 dark:to-black/60"></div>
<!-- Status Indicator -->
<div class="absolute top-6 right-6 flex items-center space-x-3 z-10">
<div class="mb-glass rounded-full px-4 py-2 animate-scale-in">
<div class="flex items-center space-x-2">
<div class="absolute top-6 right-6 flex items-center space-x-4 z-10">
<div class="mb-glass rounded-full px-6 py-3 animate-scale-in">
<div class="flex items-center space-x-3">
<div class="status-dot status-online"></div>
<span class="text-sm font-semibold text-professional-primary">Live</span>
</div>
</div>
<div class="mb-glass rounded-full px-4 py-2 animate-scale-in">
<div class="mb-glass rounded-full px-6 py-3 animate-scale-in">
<span id="live-time" class="text-sm font-semibold text-professional-primary"></span>
</div>
</div>
<div class="relative max-w-7xl mx-auto px-6 lg:px-8 py-16 z-10">
<div class="relative max-w-7xl mx-auto px-6 lg:px-8 py-20 z-10">
<div class="text-center animate-slide-up">
<!-- Mercedes-Benz Logo -->
<div class="inline-flex items-center justify-center w-24 h-24 mb-glass rounded-full mb-8 professional-shadow">
<svg class="w-12 h-12 text-professional-primary" viewBox="0 0 80 80" fill="currentColor">
<div class="inline-flex items-center justify-center w-28 h-28 mb-glass rounded-full mb-10 professional-shadow">
<svg class="w-14 h-14 text-professional-primary" viewBox="0 0 80 80" fill="currentColor">
<path d="M58.6,4.5C53,1.6,46.7,0,40,0c-6.7,0-13,1.6-18.6,4.5v0C8.7,11.2,0,24.6,0,40c0,15.4,8.7,28.8,21.5,35.5
C27,78.3,33.3,80,40,80c6.7,0,12.9-1.7,18.5-4.6C71.3,68.8,80,55.4,80,40C80,24.6,71.3,11.2,58.6,4.5z M4,40
c0-13.1,7-24.5,17.5-30.9v0C26.6,6,32.5,4.2,39,4l-4.5,32.7L21.5,46.8v0L8.3,57.1C5.6,52,4,46.2,4,40z M58.6,70.8
@@ -43,18 +103,18 @@
</svg>
</div>
<h1 class="title-professional text-5xl md:text-6xl font-bold mb-6 tracking-tight">
<h1 class="title-professional text-6xl md:text-7xl font-bold mb-8 tracking-tight">
Intelligenter Schichtplan
</h1>
<p class="subtitle-professional text-xl md:text-2xl max-w-4xl mx-auto leading-relaxed mb-8">
<p class="subtitle-professional text-2xl md:text-3xl max-w-5xl mx-auto leading-relaxed mb-12">
Fortschrittliche Planung und Überwachung Ihrer 3D-Druckprozesse mit Mercedes-Benz Präzision
</p>
<!-- Action Buttons -->
<div class="flex flex-wrap justify-center gap-4">
<div class="flex flex-wrap justify-center gap-6">
{% if can_edit %}
<button onclick="openCreateEventModal()"
class="btn-professional group">
class="btn-professional group px-8 py-4">
<svg class="w-6 h-6 mr-3 group-hover:rotate-90 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
</svg>
@@ -62,14 +122,14 @@
</button>
{% endif %}
<button onclick="refreshCalendar()"
class="btn-secondary-professional group">
class="btn-professional group px-8 py-4">
<svg class="w-6 h-6 mr-3 group-hover:rotate-180 transition-transform duration-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
</svg>
<span>Aktualisieren</span>
</button>
<button onclick="exportCalendar()"
class="btn-secondary-professional group">
class="btn-professional group px-8 py-4">
<svg class="w-6 h-6 mr-3 group-hover:scale-110 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
</svg>
@@ -80,27 +140,27 @@
</div>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 -mt-8 relative z-10">
<div class="max-w-7xl mx-auto px-6 lg:px-8 -mt-12 relative z-10" style="margin-bottom: 4rem;">
<!-- Filter Section -->
<div class="professional-container p-8 mb-8 animate-slide-up">
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between space-y-6 lg:space-y-0">
<div class="flex flex-col sm:flex-row sm:items-center sm:space-x-6 space-y-4 sm:space-y-0">
<div class="professional-container animate-slide-up" style="padding: 3rem; border-radius: 2rem; margin-bottom: 3rem;">
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between space-y-8 lg:space-y-0">
<div class="flex flex-col sm:flex-row sm:items-center sm:space-x-8 space-y-6 sm:space-y-0">
<!-- Drucker Filter -->
<div class="group">
<label for="printerFilter" class="block text-sm font-semibold text-professional-primary mb-2">
<label for="printerFilter" class="block text-base font-bold text-professional-primary mb-4">
Drucker auswählen
</label>
<div class="relative">
<select id="printerFilter"
class="input-professional appearance-none pr-12 cursor-pointer">
class="input-professional appearance-none pr-12 cursor-pointer w-full text-base py-4 px-5" style="border-radius: 1rem;">
<option value="">Alle Produktionseinheiten</option>
{% for printer in printers %}
<option value="{{ printer.id }}">{{ printer.name }} {% if printer.location %}({{ printer.location }}){% endif %}</option>
{% endfor %}
</select>
<div class="absolute inset-y-0 right-0 flex items-center pr-4 pointer-events-none">
<svg class="h-5 w-5 text-professional-muted group-hover:text-professional-primary transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="absolute inset-y-0 right-0 flex items-center pr-5 pointer-events-none">
<svg class="h-6 w-6 text-professional-muted group-hover:text-professional-primary transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</div>
@@ -109,20 +169,20 @@
<!-- Status Filter -->
<div class="group">
<label for="statusFilter" class="block text-sm font-semibold text-professional-primary mb-2">
<label for="statusFilter" class="block text-base font-bold text-professional-primary mb-4">
Status-Filter
</label>
<div class="relative">
<select id="statusFilter"
class="input-professional appearance-none pr-12 cursor-pointer">
class="input-professional appearance-none pr-12 cursor-pointer w-full text-base py-4 px-5" style="border-radius: 1rem;">
<option value="">Alle Status</option>
<option value="running">Aktiv</option>
<option value="queued">Warteschlange</option>
<option value="completed">Abgeschlossen</option>
<option value="cancelled">Abgebrochen</option>
</select>
<div class="absolute inset-y-0 right-0 flex items-center pr-4 pointer-events-none">
<svg class="h-5 w-5 text-professional-muted group-hover:text-professional-primary transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="absolute inset-y-0 right-0 flex items-center pr-5 pointer-events-none">
<svg class="h-6 w-6 text-professional-muted group-hover:text-professional-primary transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</div>
@@ -131,30 +191,30 @@
</div>
<!-- Quick Stats -->
<div class="flex flex-wrap gap-4">
<div class="status-professional status-approved">
<div class="flex flex-wrap gap-6">
<div class="status-professional status-approved" style="min-width: 160px; padding: 1.5rem;">
<div class="status-dot status-online"></div>
<span id="active-jobs">0 Aktiv</span>
<span id="active-jobs" class="text-lg font-bold">0 Aktiv</span>
</div>
<div class="status-professional" style="background: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.3); color: var(--mb-primary);">
<div class="w-3 h-3 bg-blue-500 rounded-full"></div>
<span id="queued-jobs">0 Wartend</span>
<div class="status-professional" style="background: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.3); color: var(--mb-primary); min-width: 160px; padding: 1.5rem;">
<div class="w-4 h-4 bg-blue-500 rounded-full"></div>
<span id="queued-jobs" class="text-lg font-bold">0 Wartend</span>
</div>
<div class="status-professional" style="background: rgba(251, 146, 60, 0.1); border-color: rgba(251, 146, 60, 0.3); color: #ea580c;">
<div class="w-3 h-3 bg-orange-500 rounded-full"></div>
<span id="total-time">0h Heute</span>
<div class="status-professional" style="background: rgba(251, 146, 60, 0.1); border-color: rgba(251, 146, 60, 0.3); color: #ea580c; min-width: 160px; padding: 1.5rem;">
<div class="w-4 h-4 bg-orange-500 rounded-full"></div>
<span id="total-time" class="text-lg font-bold">0h Heute</span>
</div>
</div>
</div>
</div>
<!-- Calendar Container -->
<div class="professional-container p-6 animate-slide-up">
<div class="professional-container animate-slide-up" style="padding: 3rem; border-radius: 2rem; margin-bottom: 3rem;">
<div id="calendar"></div>
</div>
<!-- Legend Section -->
<div class="professional-container p-8 mt-8 animate-slide-up">
<div class="professional-container animate-slide-up" style="padding: 3rem; border-radius: 2rem;">
<div class="text-center mb-6">
<h3 class="text-xl font-bold text-professional-primary mb-2">
Status-Legende