802 lines
31 KiB
HTML
802 lines
31 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Steckdosenschaltzeiten - Admin{% endblock %}
|
|
|
|
{% block head %}
|
|
<!-- FullCalendar CSS -->
|
|
<link href='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/main.min.css' rel='stylesheet' />
|
|
<link href='https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@6.1.10/main.min.css' rel='stylesheet' />
|
|
<link href='https://cdn.jsdelivr.net/npm/@fullcalendar/timegrid@6.1.10/main.min.css' rel='stylesheet' />
|
|
|
|
<!-- Chart.js für Statistiken -->
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
|
|
<style>
|
|
/* ===== DARK MODE CALENDAR OPTIMIERUNG ===== */
|
|
.fc {
|
|
background: transparent;
|
|
}
|
|
|
|
.fc-theme-standard .fc-view-harness {
|
|
background: transparent;
|
|
}
|
|
|
|
.fc-theme-standard .fc-scrollgrid {
|
|
border-color: rgb(148 163 184 / 0.3);
|
|
}
|
|
|
|
.dark .fc-theme-standard .fc-scrollgrid {
|
|
border-color: rgb(71 85 105 / 0.4);
|
|
}
|
|
|
|
.fc-theme-standard td,
|
|
.fc-theme-standard th {
|
|
border-color: rgb(148 163 184 / 0.2);
|
|
}
|
|
|
|
.dark .fc-theme-standard td,
|
|
.dark .fc-theme-standard th {
|
|
border-color: rgb(71 85 105 / 0.3);
|
|
}
|
|
|
|
.fc-col-header-cell {
|
|
background: rgb(248 250 252);
|
|
color: rgb(51 65 85);
|
|
}
|
|
|
|
.dark .fc-col-header-cell {
|
|
background: rgb(15 23 42);
|
|
color: rgb(203 213 225);
|
|
}
|
|
|
|
.fc-daygrid-day {
|
|
background: transparent;
|
|
}
|
|
|
|
.fc-day-today {
|
|
background: rgb(59 130 246 / 0.1) !important;
|
|
}
|
|
|
|
.dark .fc-day-today {
|
|
background: rgb(59 130 246 / 0.2) !important;
|
|
}
|
|
|
|
.fc-button-primary {
|
|
background: rgb(59 130 246);
|
|
border-color: rgb(59 130 246);
|
|
color: white;
|
|
}
|
|
|
|
.fc-button-primary:hover {
|
|
background: rgb(37 99 235);
|
|
border-color: rgb(37 99 235);
|
|
}
|
|
|
|
.fc-button-primary:disabled {
|
|
background: rgb(148 163 184);
|
|
border-color: rgb(148 163 184);
|
|
}
|
|
|
|
.dark .fc-button-primary:disabled {
|
|
background: rgb(71 85 105);
|
|
border-color: rgb(71 85 105);
|
|
}
|
|
|
|
.fc-event {
|
|
font-size: 11px;
|
|
border-radius: 4px;
|
|
padding: 2px 4px;
|
|
font-weight: 500;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.dark .fc-event {
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.fc-h-event {
|
|
border: none !important;
|
|
}
|
|
|
|
/* ===== KALENDER CONTAINER ===== */
|
|
.calendar-container {
|
|
background: rgb(255 255 255);
|
|
border: 1px solid rgb(226 232 240);
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
|
|
.dark .calendar-container {
|
|
background: rgb(15 23 42);
|
|
border-color: rgb(51 65 85);
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
/* ===== STATISTIK KARTEN ===== */
|
|
.stats-card {
|
|
background: linear-gradient(135deg, rgb(59 130 246) 0%, rgb(99 102 241) 100%);
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
color: white;
|
|
margin-bottom: 20px;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.stats-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 25px -8px rgba(59, 130, 246, 0.3);
|
|
}
|
|
|
|
.dark .stats-card {
|
|
background: linear-gradient(135deg, rgb(37 99 235) 0%, rgb(79 70 229) 100%);
|
|
border-color: rgba(255, 255, 255, 0.05);
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
/* ===== KONTROLLPANEL ===== */
|
|
.control-panel {
|
|
background: rgb(255 255 255 / 0.8);
|
|
border: 1px solid rgb(226 232 240);
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
|
|
.dark .control-panel {
|
|
background: rgb(15 23 42 / 0.8);
|
|
border-color: rgb(51 65 85);
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.filter-group {
|
|
display: flex;
|
|
gap: 15px;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* ===== BUTTONS ===== */
|
|
.btn-calendar {
|
|
background: rgb(59 130 246);
|
|
color: white;
|
|
border: none;
|
|
padding: 8px 16px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
font-weight: 500;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.btn-calendar:hover {
|
|
background: rgb(37 99 235);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
|
|
}
|
|
|
|
.btn-calendar.active {
|
|
background: rgb(29 78 216);
|
|
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
|
|
}
|
|
|
|
.dark .btn-calendar {
|
|
background: rgb(37 99 235);
|
|
border-color: rgb(59 130 246);
|
|
}
|
|
|
|
.dark .btn-calendar:hover {
|
|
background: rgb(29 78 216);
|
|
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.6);
|
|
}
|
|
|
|
.dark .btn-calendar.active {
|
|
background: rgb(30 64 175);
|
|
}
|
|
|
|
/* ===== LEGENDE ===== */
|
|
.legend {
|
|
display: flex;
|
|
gap: 20px;
|
|
flex-wrap: wrap;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.legend-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 14px;
|
|
color: rgb(71 85 105);
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.dark .legend-item {
|
|
color: rgb(203 213 225);
|
|
}
|
|
|
|
.legend-color {
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 4px;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.dark .legend-color {
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
/* ===== FORM ELEMENTS ===== */
|
|
select, input {
|
|
background: rgb(255 255 255);
|
|
border: 1px solid rgb(203 213 225);
|
|
color: rgb(51 65 85);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
select:focus, input:focus {
|
|
border-color: rgb(59 130 246);
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
|
outline: none;
|
|
}
|
|
|
|
.dark select, .dark input {
|
|
background: rgb(30 41 59);
|
|
border-color: rgb(71 85 105);
|
|
color: rgb(203 213 225);
|
|
}
|
|
|
|
.dark select:focus, .dark input:focus {
|
|
border-color: rgb(99 102 241);
|
|
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
|
|
}
|
|
|
|
/* ===== MODAL STYLING ===== */
|
|
.modal-overlay {
|
|
background: rgba(0, 0, 0, 0.5);
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
|
|
.dark .modal-overlay {
|
|
background: rgba(0, 0, 0, 0.7);
|
|
}
|
|
|
|
.modal-content {
|
|
background: rgb(255 255 255);
|
|
border: 1px solid rgb(226 232 240);
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.dark .modal-content {
|
|
background: rgb(15 23 42);
|
|
border-color: rgb(51 65 85);
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* ===== RESPONSIVE IMPROVEMENTS ===== */
|
|
@media (max-width: 768px) {
|
|
.calendar-container {
|
|
padding: 15px;
|
|
}
|
|
|
|
.control-panel {
|
|
padding: 15px;
|
|
}
|
|
|
|
.filter-group {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 10px;
|
|
}
|
|
|
|
.legend {
|
|
gap: 15px;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 dark:from-slate-900 dark:to-slate-800 transition-colors duration-300">
|
|
<!-- Header mit Breadcrumb -->
|
|
<div class="border-b border-slate-200 dark:border-slate-700 bg-white/80 dark:bg-slate-900/80 backdrop-blur-md">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="py-6">
|
|
<nav class="text-sm font-medium text-slate-600 dark:text-slate-400 mb-4">
|
|
<ol class="list-none p-0 inline-flex">
|
|
<li class="flex items-center">
|
|
<a href="{{ url_for('admin_page') }}" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Admin-Dashboard</a>
|
|
<svg class="fill-current w-3 h-3 mx-3 text-slate-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
|
|
<path d="m285.476 272.971c4.686 4.686 4.686 12.284 0 16.97l-133.952 133.954c-4.686 4.686-12.284 4.686-16.97 0l-133.952-133.954c-4.686-4.686-4.686-12.284 0-16.97 4.686-4.686 12.284-4.686 16.97 0l125.462 125.463 125.462-125.463c4.686-4.686 12.284-4.686 16.97 0z"/>
|
|
</svg>
|
|
</li>
|
|
<li class="text-slate-900 dark:text-white font-semibold">
|
|
Steckdosenschaltzeiten
|
|
</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4">
|
|
<div>
|
|
<h1 class="text-3xl font-bold text-slate-900 dark:text-white">
|
|
<i class="fas fa-plug text-blue-600 dark:text-blue-400 mr-3"></i>
|
|
Steckdosenschaltzeiten
|
|
</h1>
|
|
<p class="mt-2 text-slate-600 dark:text-slate-400">
|
|
Kalenderübersicht aller Drucker-Steckdosenschaltungen mit detaillierter Analyse
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex gap-3">
|
|
<button id="refreshData" class="btn-calendar flex items-center">
|
|
<i class="fas fa-sync-alt mr-2"></i>
|
|
Aktualisieren
|
|
</button>
|
|
|
|
<button id="cleanupLogs" class="bg-red-600 dark:bg-red-700 text-white px-4 py-2 rounded-lg hover:bg-red-700 dark:hover:bg-red-600 transition-all duration-200 font-medium flex items-center">
|
|
<i class="fas fa-trash mr-2"></i>
|
|
Alte Logs löschen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Haupt-Container -->
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
<!-- Statistik-Karten -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
|
|
<div class="stats-card">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-sm opacity-80 font-medium">Schaltungen (24h)</p>
|
|
<p class="text-2xl font-bold" id="totalLogs">{{ stats.total_logs or 0 }}</p>
|
|
<p class="text-xs opacity-70 mt-1">Gesamte Aktivität</p>
|
|
</div>
|
|
<div class="text-2xl opacity-60">
|
|
<i class="fas fa-chart-line"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stats-card">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-sm opacity-80 font-medium">Erfolgsrate</p>
|
|
<p class="text-2xl font-bold" id="successRate">{{ "%.1f"|format(100 - stats.error_rate) }}%</p>
|
|
<p class="text-xs opacity-70 mt-1">Ohne Fehler</p>
|
|
</div>
|
|
<div class="text-2xl opacity-60">
|
|
<i class="fas fa-check-circle"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stats-card">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-sm opacity-80 font-medium">Ø Antwortzeit</p>
|
|
<p class="text-2xl font-bold" id="avgResponseTime">
|
|
{% if stats.average_response_time_ms %}
|
|
{{ "%.0f"|format(stats.average_response_time_ms) }}ms
|
|
{% else %}
|
|
N/A
|
|
{% endif %}
|
|
</p>
|
|
<p class="text-xs opacity-70 mt-1">Durchschnitt</p>
|
|
</div>
|
|
<div class="text-2xl opacity-60">
|
|
<i class="fas fa-stopwatch"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stats-card">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-sm opacity-80 font-medium">Fehlerzahl</p>
|
|
<p class="text-2xl font-bold" id="errorCount">{{ stats.error_count or 0 }}</p>
|
|
<p class="text-xs opacity-70 mt-1">Letzte 24h</p>
|
|
</div>
|
|
<div class="text-2xl opacity-60">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filter und Steuerung -->
|
|
<div class="control-panel">
|
|
<div class="filter-group">
|
|
<div class="flex items-center gap-3">
|
|
<label for="printerFilter" class="font-medium text-slate-700 dark:text-slate-300 whitespace-nowrap">Drucker filtern:</label>
|
|
<select id="printerFilter" class="border border-slate-300 dark:border-slate-600 rounded-lg px-3 py-2 bg-white dark:bg-slate-800 text-slate-900 dark:text-white min-w-40">
|
|
<option value="">Alle Drucker</option>
|
|
{% for printer in printers %}
|
|
<option value="{{ printer.id }}">{{ printer.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<div class="border-l border-slate-300 dark:border-slate-600 pl-4 ml-4">
|
|
<label class="font-medium text-slate-700 dark:text-slate-300 mr-3">Ansicht:</label>
|
|
<div class="inline-flex gap-1">
|
|
<button id="monthView" class="btn-calendar active">Monat</button>
|
|
<button id="weekView" class="btn-calendar">Woche</button>
|
|
<button id="dayView" class="btn-calendar">Tag</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Legende -->
|
|
<div class="legend">
|
|
<div class="legend-item">
|
|
<div class="legend-color" style="background-color: #10b981;"></div>
|
|
<span>Steckdose EIN</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-color" style="background-color: #f59e0b;"></div>
|
|
<span>Steckdose AUS</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-color" style="background-color: #3b82f6;"></div>
|
|
<span>Verbunden</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-color" style="background-color: #ef4444;"></div>
|
|
<span>Getrennt</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Kalender-Container -->
|
|
<div class="calendar-container">
|
|
<div id="calendar"></div>
|
|
</div>
|
|
|
|
<!-- Detailansicht Modal -->
|
|
<div id="eventDetailModal" class="fixed inset-0 modal-overlay hidden z-50">
|
|
<div class="flex items-center justify-center min-h-screen p-4">
|
|
<div class="modal-content rounded-lg max-w-lg w-full p-6">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 class="text-lg font-semibold text-slate-900 dark:text-white">Schaltung Details</h3>
|
|
<button id="closeModal" class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 transition-colors">
|
|
<i class="fas fa-times text-lg"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div id="modalContent" class="text-slate-700 dark:text-slate-300">
|
|
<!-- Wird dynamisch gefüllt -->
|
|
</div>
|
|
|
|
<div class="mt-6 flex justify-end">
|
|
<button id="closeModalBtn" class="px-4 py-2 bg-slate-300 dark:bg-slate-600 text-slate-700 dark:text-slate-200 rounded-lg hover:bg-slate-400 dark:hover:bg-slate-500 transition-colors font-medium">
|
|
Schließen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FullCalendar JS -->
|
|
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/index.global.min.js'></script>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
let calendar;
|
|
let currentPrinterFilter = '';
|
|
|
|
// Kalender initialisieren
|
|
function initCalendar() {
|
|
const calendarEl = document.getElementById('calendar');
|
|
|
|
calendar = new FullCalendar.Calendar(calendarEl, {
|
|
initialView: 'dayGridMonth',
|
|
locale: 'de',
|
|
headerToolbar: {
|
|
left: 'prev,next today',
|
|
center: 'title',
|
|
right: 'dayGridMonth,timeGridWeek,timeGridDay'
|
|
},
|
|
height: 'auto',
|
|
events: function(info, successCallback, failureCallback) {
|
|
loadCalendarEvents(info.start, info.end, currentPrinterFilter, successCallback, failureCallback);
|
|
},
|
|
eventClick: function(info) {
|
|
showEventDetails(info.event);
|
|
},
|
|
eventDidMount: function(info) {
|
|
// Tooltip hinzufügen
|
|
info.el.title = info.event.title + '\nKlicken für Details';
|
|
}
|
|
});
|
|
|
|
calendar.render();
|
|
}
|
|
|
|
// Events vom Server laden
|
|
function loadCalendarEvents(start, end, printerFilter, successCallback, failureCallback) {
|
|
const params = new URLSearchParams({
|
|
start: start.toISOString(),
|
|
end: end.toISOString()
|
|
});
|
|
|
|
if (printerFilter) {
|
|
params.append('printer_id', printerFilter);
|
|
}
|
|
|
|
fetch(`/api/admin/plug-schedules/calendar?${params}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
successCallback(data);
|
|
})
|
|
.catch(error => {
|
|
console.error('Fehler beim Laden der Kalender-Daten:', error);
|
|
failureCallback(error);
|
|
});
|
|
}
|
|
|
|
// Event-Details anzeigen
|
|
function showEventDetails(event) {
|
|
const props = event.extendedProps;
|
|
const modal = document.getElementById('eventDetailModal');
|
|
const content = document.getElementById('modalContent');
|
|
|
|
const startTime = new Date(event.start).toLocaleString('de-DE');
|
|
|
|
let detailsHtml = `
|
|
<div class="space-y-4">
|
|
<div class="flex items-center p-3 bg-slate-50 dark:bg-slate-800 rounded-lg">
|
|
<span class="w-4 h-4 rounded mr-3 flex-shrink-0" style="background-color: ${event.backgroundColor}"></span>
|
|
<span class="font-medium text-slate-900 dark:text-white">${event.title}</span>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
|
|
<div class="bg-slate-50 dark:bg-slate-800 p-3 rounded-lg">
|
|
<span class="font-medium text-slate-600 dark:text-slate-400 block mb-1">Zeitpunkt:</span>
|
|
<p class="text-slate-900 dark:text-white">${startTime}</p>
|
|
</div>
|
|
|
|
<div class="bg-slate-50 dark:bg-slate-800 p-3 rounded-lg">
|
|
<span class="font-medium text-slate-600 dark:text-slate-400 block mb-1">Drucker:</span>
|
|
<p class="text-slate-900 dark:text-white">${props.printer_name}</p>
|
|
</div>
|
|
|
|
<div class="bg-slate-50 dark:bg-slate-800 p-3 rounded-lg">
|
|
<span class="font-medium text-slate-600 dark:text-slate-400 block mb-1">Status:</span>
|
|
<p class="text-slate-900 dark:text-white capitalize font-medium">${props.status}</p>
|
|
</div>
|
|
|
|
<div class="bg-slate-50 dark:bg-slate-800 p-3 rounded-lg">
|
|
<span class="font-medium text-slate-600 dark:text-slate-400 block mb-1">Quelle:</span>
|
|
<p class="text-slate-900 dark:text-white capitalize">${props.source}</p>
|
|
</div>
|
|
`;
|
|
|
|
if (props.user_name) {
|
|
detailsHtml += `
|
|
<div class="bg-slate-50 dark:bg-slate-800 p-3 rounded-lg">
|
|
<span class="font-medium text-slate-600 dark:text-slate-400 block mb-1">Benutzer:</span>
|
|
<p class="text-slate-900 dark:text-white">${props.user_name}</p>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
if (props.response_time_ms) {
|
|
detailsHtml += `
|
|
<div class="bg-slate-50 dark:bg-slate-800 p-3 rounded-lg">
|
|
<span class="font-medium text-slate-600 dark:text-slate-400 block mb-1">Antwortzeit:</span>
|
|
<p class="text-slate-900 dark:text-white">${props.response_time_ms}ms</p>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
if (props.power_consumption) {
|
|
detailsHtml += `
|
|
<div class="bg-slate-50 dark:bg-slate-800 p-3 rounded-lg">
|
|
<span class="font-medium text-slate-600 dark:text-slate-400 block mb-1">Verbrauch:</span>
|
|
<p class="text-slate-900 dark:text-white">${props.power_consumption}W</p>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
if (props.voltage) {
|
|
detailsHtml += `
|
|
<div class="bg-slate-50 dark:bg-slate-800 p-3 rounded-lg">
|
|
<span class="font-medium text-slate-600 dark:text-slate-400 block mb-1">Spannung:</span>
|
|
<p class="text-slate-900 dark:text-white">${props.voltage}V</p>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
if (props.current) {
|
|
detailsHtml += `
|
|
<div class="bg-slate-50 dark:bg-slate-800 p-3 rounded-lg">
|
|
<span class="font-medium text-slate-600 dark:text-slate-400 block mb-1">Strom:</span>
|
|
<p class="text-slate-900 dark:text-white">${props.current}A</p>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
detailsHtml += `</div></div>`;
|
|
|
|
if (props.notes) {
|
|
detailsHtml += `
|
|
<div class="mt-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-3">
|
|
<span class="font-medium text-blue-800 dark:text-blue-200 block mb-2">Notizen:</span>
|
|
<p class="text-sm text-blue-700 dark:text-blue-300">${props.notes}</p>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
if (props.error_message) {
|
|
detailsHtml += `
|
|
<div class="mt-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-3">
|
|
<span class="font-medium text-red-800 dark:text-red-200 block mb-2">Fehlermeldung:</span>
|
|
<p class="text-sm text-red-700 dark:text-red-300">${props.error_message}</p>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
content.innerHTML = detailsHtml;
|
|
modal.classList.remove('hidden');
|
|
}
|
|
|
|
// Modal schließen
|
|
function closeModal() {
|
|
document.getElementById('eventDetailModal').classList.add('hidden');
|
|
}
|
|
|
|
// Event-Listener
|
|
document.getElementById('closeModal').addEventListener('click', closeModal);
|
|
document.getElementById('closeModalBtn').addEventListener('click', closeModal);
|
|
|
|
// Escape-Taste zum Schließen des Modals
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape') {
|
|
closeModal();
|
|
}
|
|
});
|
|
|
|
// Modal schließen bei Klick außerhalb
|
|
document.getElementById('eventDetailModal').addEventListener('click', function(e) {
|
|
if (e.target === this) {
|
|
closeModal();
|
|
}
|
|
});
|
|
|
|
// Drucker-Filter
|
|
document.getElementById('printerFilter').addEventListener('change', function() {
|
|
currentPrinterFilter = this.value;
|
|
calendar.refetchEvents();
|
|
});
|
|
|
|
// Ansicht-Buttons
|
|
document.getElementById('monthView').addEventListener('click', function() {
|
|
calendar.changeView('dayGridMonth');
|
|
updateActiveViewButton(this);
|
|
});
|
|
|
|
document.getElementById('weekView').addEventListener('click', function() {
|
|
calendar.changeView('timeGridWeek');
|
|
updateActiveViewButton(this);
|
|
});
|
|
|
|
document.getElementById('dayView').addEventListener('click', function() {
|
|
calendar.changeView('timeGridDay');
|
|
updateActiveViewButton(this);
|
|
});
|
|
|
|
function updateActiveViewButton(activeBtn) {
|
|
document.querySelectorAll('.btn-calendar').forEach(btn => {
|
|
btn.classList.remove('active');
|
|
});
|
|
activeBtn.classList.add('active');
|
|
}
|
|
|
|
// Aktualisieren-Button
|
|
document.getElementById('refreshData').addEventListener('click', function() {
|
|
const btn = this;
|
|
const icon = btn.querySelector('i');
|
|
|
|
// Button-State während des Ladens
|
|
btn.disabled = true;
|
|
icon.classList.add('fa-spin');
|
|
|
|
Promise.all([
|
|
calendar.refetchEvents(),
|
|
loadStatistics()
|
|
]).finally(() => {
|
|
btn.disabled = false;
|
|
icon.classList.remove('fa-spin');
|
|
});
|
|
});
|
|
|
|
// Cleanup-Button
|
|
document.getElementById('cleanupLogs').addEventListener('click', function() {
|
|
if (confirm('Möchten Sie wirklich alte Logs löschen? (älter als 30 Tage)\n\nDieser Vorgang kann nicht rückgängig gemacht werden.')) {
|
|
const btn = this;
|
|
btn.disabled = true;
|
|
|
|
fetch('/api/admin/plug-schedules/cleanup', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': '{{ csrf_token() }}'
|
|
},
|
|
body: JSON.stringify({ days: 30 })
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
if (typeof showToast === 'function') {
|
|
showToast(`Erfolgreich ${data.deleted_count} alte Einträge gelöscht`, 'success', 5000, {
|
|
title: 'Bereinigung erfolgreich'
|
|
});
|
|
} else {
|
|
alert(`Erfolgreich ${data.deleted_count} alte Einträge gelöscht`);
|
|
}
|
|
calendar.refetchEvents();
|
|
loadStatistics();
|
|
} else {
|
|
if (typeof showToast === 'function') {
|
|
showToast('Fehler beim Löschen: ' + data.error, 'error', 5000, {
|
|
title: 'Bereinigung fehlgeschlagen'
|
|
});
|
|
} else {
|
|
alert('Fehler beim Löschen: ' + data.error);
|
|
}
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Fehler:', error);
|
|
if (typeof showToast === 'function') {
|
|
showToast('Fehler beim Löschen der Logs', 'error', 5000, {
|
|
title: 'Netzwerkfehler'
|
|
});
|
|
} else {
|
|
alert('Fehler beim Löschen der Logs');
|
|
}
|
|
})
|
|
.finally(() => {
|
|
btn.disabled = false;
|
|
});
|
|
}
|
|
});
|
|
|
|
// Statistiken laden
|
|
function loadStatistics() {
|
|
return fetch('/api/admin/plug-schedules/statistics')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
const stats = data.statistics;
|
|
document.getElementById('totalLogs').textContent = stats.total_logs || 0;
|
|
document.getElementById('successRate').textContent = (100 - (stats.error_rate || 0)).toFixed(1) + '%';
|
|
document.getElementById('avgResponseTime').textContent =
|
|
stats.average_response_time_ms ? Math.round(stats.average_response_time_ms) + 'ms' : 'N/A';
|
|
document.getElementById('errorCount').textContent = stats.error_count || 0;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Fehler beim Laden der Statistiken:', error);
|
|
});
|
|
}
|
|
|
|
// Kalender initialisieren
|
|
initCalendar();
|
|
|
|
// Initial Statistics Load
|
|
loadStatistics();
|
|
});
|
|
</script>
|
|
{% endblock %} |