🐛📚 "Migrate JavaScript templates to Jinja for better documentation and maintainability"

This commit is contained in:
2025-06-18 09:33:05 +02:00
parent f1e3a2cfea
commit 709a541835
4 changed files with 564 additions and 1570 deletions

File diff suppressed because it is too large Load Diff

View File

@ -1,4 +1,5 @@
{% extends "base.html" %}
{% from 'macros/ui_components.html' import status_indicator, progress_bar, printer_card, clickable_card, dashboard_stat_card, printer_overview_table, filter_tabs %}
{% block title %}Dashboard - Mercedes-Benz MYP Platform{% endblock %}
@ -294,67 +295,39 @@
</div>
</div>
<!-- Stats Overview Cards -->
<!-- Stats Overview Cards mit Jinja-Macros -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Active Jobs Card -->
<div class="dashboard-card p-6">
<div class="flex justify-between">
<div>
<h3 class="stat-label">Aktive Aufträge</h3>
<div class="stat-value">{{ active_jobs_count }}</div>
</div>
<div class="mb-stat-icon text-slate-900 dark:text-white">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
</svg>
</div>
</div>
</div>
<!-- Available Printers Card -->
<div class="dashboard-card p-6">
<div class="flex justify-between">
<div>
<h3 class="stat-label">Verfügbare Drucker</h3>
<div class="stat-value">{{ available_printers_count }}</div>
</div>
<div class="mb-stat-icon text-green-600 dark:text-green-400">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
</svg>
</div>
</div>
</div>
<!-- Total Jobs Card -->
<div class="dashboard-card p-6">
<div class="flex justify-between">
<div>
<h3 class="stat-label">Aufträge (gesamt)</h3>
<div class="stat-value">{{ total_jobs_count }}</div>
</div>
<div class="mb-stat-icon text-purple-600 dark:text-purple-400">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 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" />
</svg>
</div>
</div>
</div>
<!-- Success Rate Card -->
<div class="dashboard-card p-6">
<div class="flex justify-between">
<div>
<h3 class="stat-label">Erfolgsrate</h3>
<div class="stat-value">{{ success_rate }}%</div>
</div>
<div class="mb-stat-icon text-amber-600 dark:text-amber-400">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
</svg>
</div>
</div>
</div>
{{ dashboard_stat_card(
title="Aktive Aufträge",
value=active_jobs_count,
icon="fas fa-clipboard-list",
color="slate",
trend=active_jobs_trend if active_jobs_trend else None
) }}
{{ dashboard_stat_card(
title="Verfügbare Drucker",
value=available_printers_count,
icon="fas fa-print",
color="green",
trend=printer_availability_trend if printer_availability_trend else None
) }}
{{ dashboard_stat_card(
title="Aufträge (gesamt)",
value=total_jobs_count,
icon="fas fa-chart-line",
color="purple",
trend=total_jobs_trend if total_jobs_trend else None
) }}
{{ dashboard_stat_card(
title="Erfolgsrate",
value=success_rate ~ "%",
icon="fas fa-star",
color="amber",
trend=success_rate_trend if success_rate_trend else None
) }}
</div>
<!-- Active Jobs Section -->
@ -376,32 +349,30 @@
{% if active_jobs and active_jobs|length > 0 %}
{% for job in active_jobs %}
<tr class="hover:bg-gray-50 dark:hover:bg-slate-700/50">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="mb-status-indicator {{ job.status_class }}"></div>
<span class="ml-2 text-sm font-medium text-slate-700 dark:text-slate-300">
{{ job.status_text }}
</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm font-medium text-slate-900 dark:text-white">{{ job.name }}</div>
<div class="text-xs text-slate-500 dark:text-slate-400">{{ job.file_name }}</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-slate-700 dark:text-slate-300">{{ job.printer }}</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-slate-700 dark:text-slate-300">{{ job.start_time }}</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="mb-progress-container">
<div class="mb-progress-bar" style="width: {{ job.progress }}%"></div>
</div>
<div class="text-xs text-right mt-1 text-slate-500 dark:text-slate-400">{{ job.progress }}%</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right">
<a href="{{ url_for('jobs_page') }}#job-{{ job.id }}" class="text-slate-900 dark:text-white hover:text-slate-700 dark:hover:text-slate-300 font-medium">Details</a>
<td colspan="6" class="p-0">
<a href="{{ url_for('jobs_page') }}#job-{{ job.id }}" class="block px-6 py-4">
<div class="grid grid-cols-6 gap-4">
<div class="col-span-1">
{{ status_indicator(job.status, job.status_text) }}
</div>
<div class="col-span-1">
<div class="text-sm font-medium text-slate-900 dark:text-white">{{ job.name }}</div>
<div class="text-xs text-slate-500 dark:text-slate-400">{{ job.file_name }}</div>
</div>
<div class="col-span-1">
<div class="text-sm text-slate-700 dark:text-slate-300">{{ job.printer }}</div>
</div>
<div class="col-span-1">
<div class="text-sm text-slate-700 dark:text-slate-300">{{ job.start_time }}</div>
</div>
<div class="col-span-1">
{{ progress_bar(job.progress) }}
</div>
<div class="col-span-1 text-right">
<span class="text-slate-900 dark:text-white hover:text-slate-700 dark:hover:text-slate-300 font-medium">Details</span>
</div>
</div>
</a>
</td>
</tr>
{% endfor %}
@ -436,19 +407,7 @@
<div class="space-y-4">
{% if printers and printers|length > 0 %}
{% for printer in printers %}
<div class="flex items-center justify-between p-4 rounded-xl bg-gray-50 dark:bg-slate-700/30">
<div class="flex items-center">
<div class="mb-status-indicator {{ printer.status_class }} mr-3"></div>
<div>
<div class="text-sm font-medium text-slate-900 dark:text-white">{{ printer.name }}</div>
<div class="text-xs text-slate-500 dark:text-slate-400">{{ printer.model }}</div>
</div>
</div>
<div class="text-right">
<div class="text-sm font-medium text-slate-700 dark:text-slate-300">{{ printer.status_text }}</div>
<div class="text-xs text-slate-500 dark:text-slate-400">{{ printer.location }}</div>
</div>
</div>
{{ printer_card(printer) }}
{% endfor %}
{% else %}
<div class="text-center py-8">
@ -498,52 +457,39 @@
{% endblock %}
{% block extra_js %}
<script>
// Vereinfachtes Dashboard mit minimaler JavaScript-Abhängigkeit
document.addEventListener('DOMContentLoaded', function() {
// Klickbare Drucker-Karten
const printerCards = document.querySelectorAll('[data-printer-id]');
printerCards.forEach(card => {
card.style.cursor = 'pointer';
card.addEventListener('click', () => {
const printerId = card.dataset.printerId;
if (printerId) {
window.location.href = `/printers/${printerId}`;
}
});
});
// Job-Zeilen klickbar machen
const jobRows = document.querySelectorAll('tbody tr[data-job-id]');
jobRows.forEach(row => {
row.style.cursor = 'pointer';
row.addEventListener('click', () => {
const jobId = row.dataset.jobId;
if (jobId) {
window.location.href = `/jobs#job-${jobId}`;
}
});
});
// Einfache Hover-Effekte
const cards = document.querySelectorAll('.dashboard-card');
cards.forEach(card => {
card.addEventListener('mouseenter', () => {
card.style.transform = 'translateY(-2px)';
});
card.addEventListener('mouseleave', () => {
card.style.transform = 'translateY(0)';
});
});
console.log('✅ Vereinfachtes Dashboard geladen');
});
// Auto-Refresh alle 60 Sekunden (optional)
{% if config.get('AUTO_REFRESH_DASHBOARD', False) %}
setTimeout(() => {
window.location.reload();
}, 60000);
{% endif %}
</script>
<!-- Auto-Refresh über Jinja-Macro -->
{% if config.get('AUTO_REFRESH_DASHBOARD', False) %}
{{ auto_refresh(60) }}
{% endif %}
<!-- Minimal CSS für Interaktivität ohne JavaScript -->
<style>
/* CSS-basierte Hover-Effekte für Dashboard-Karten */
.dashboard-card {
transition: transform 0.2s ease-in-out;
}
.dashboard-card:hover {
transform: translateY(-2px);
}
/* Klickbare Drucker-Karten mit CSS-Cursor */
[data-printer-id] {
cursor: pointer;
}
/* Klickbare Job-Zeilen */
tbody tr[data-job-id] {
cursor: pointer;
}
/* Zebra-Streifen für bessere Lesbarkeit */
tbody tr:nth-child(even) {
background-color: rgba(0, 0, 0, 0.02);
}
.dark tbody tr:nth-child(even) {
background-color: rgba(255, 255, 255, 0.02);
}
</style>
{% endblock %}

View File

@ -141,20 +141,25 @@
</div>
{% endmacro %}
{# Formular-Submit-Button mit Loading-State #}
{# Formular-Submit-Button mit CSS-basiertem Loading-State #}
{% macro submit_button(text, loading_text="Wird verarbeitet...", class="btn-primary") %}
<button type="submit" class="{{ class }} relative" id="submit-btn">
<span class="submit-text">{{ text }}</span>
<span class="loading-text hidden">{{ loading_text }}</span>
<button type="submit" class="{{ class }} group relative overflow-hidden">
<span class="group-disabled:opacity-0 transition-opacity">{{ text }}</span>
<span class="absolute inset-0 flex items-center justify-center opacity-0 group-disabled:opacity-100 transition-opacity">
<i class="fas fa-spinner fa-spin mr-2"></i>
{{ loading_text }}
</span>
</button>
<script>
document.getElementById('submit-btn').form.addEventListener('submit', function() {
const btn = document.getElementById('submit-btn');
btn.disabled = true;
btn.querySelector('.submit-text').classList.add('hidden');
btn.querySelector('.loading-text').classList.remove('hidden');
});
</script>
<style>
button[type="submit"]:active {
pointer-events: none;
}
button[type="submit"]:active,
form[data-submitting] button[type="submit"] {
opacity: 0.7;
cursor: not-allowed;
}
</style>
{% endmacro %}
{# Auto-Refresh Meta-Tag für periodische Seitenaktualisierung #}
@ -180,4 +185,157 @@ document.getElementById('submit-btn').form.addEventListener('submit', function()
{% endfor %}
</div>
</div>
{% endmacro %}
{# Dashboard-Statistik-Karte ohne JavaScript #}
{% macro dashboard_stat_card(title, value, icon, color="slate", trend=None) %}
<div class="dashboard-card p-6">
<div class="flex justify-between">
<div>
<h3 class="stat-label">{{ title }}</h3>
<div class="stat-value">{{ value }}</div>
{% if trend %}
<div class="flex items-center mt-2 text-sm">
{% if trend.direction == 'up' %}
<i class="fas fa-arrow-up text-green-500 mr-1"></i>
<span class="text-green-600 dark:text-green-400">+{{ trend.value }}%</span>
{% elif trend.direction == 'down' %}
<i class="fas fa-arrow-down text-red-500 mr-1"></i>
<span class="text-red-600 dark:text-red-400">-{{ trend.value }}%</span>
{% else %}
<i class="fas fa-minus text-gray-500 mr-1"></i>
<span class="text-gray-600 dark:text-gray-400">{{ trend.value }}%</span>
{% endif %}
<span class="text-gray-500 dark:text-gray-400 ml-1">{{ trend.period }}</span>
</div>
{% endif %}
</div>
<div class="mb-stat-icon text-{{ color }}-600 dark:text-{{ color }}-400">
<i class="{{ icon }} w-6 h-6"></i>
</div>
</div>
</div>
{% endmacro %}
{# Drucker-Übersicht-Tabelle ohne JavaScript #}
{% macro printer_overview_table(printers) %}
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 dark:divide-slate-700">
<thead>
<tr class="text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">
<th class="px-6 py-3">Status</th>
<th class="px-6 py-3">Name</th>
<th class="px-6 py-3">Modell</th>
<th class="px-6 py-3">Standort</th>
<th class="px-6 py-3">Aktueller Job</th>
<th class="px-6 py-3">Letzte Aktivität</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-slate-800 divide-y divide-gray-200 dark:divide-slate-700">
{% for printer in printers %}
<tr class="hover:bg-gray-50 dark:hover:bg-slate-700/50">
<td class="px-6 py-4 whitespace-nowrap">
{{ status_indicator(printer.status, printer.status_text) }}
</td>
<td class="px-6 py-4">
<div class="text-sm font-medium text-slate-900 dark:text-white">
<a href="{{ url_for('admin_printer_management', printer_id=printer.id) }}" class="hover:text-blue-600 dark:hover:text-blue-400">
{{ printer.name }}
</a>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-slate-700 dark:text-slate-300">{{ printer.model }}</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-slate-700 dark:text-slate-300">{{ printer.location }}</div>
</td>
<td class="px-6 py-4">
{% if printer.current_job %}
<div class="text-sm text-slate-900 dark:text-white">{{ printer.current_job.name }}</div>
{{ progress_bar(printer.current_job.progress, show_text=False) }}
{% else %}
<span class="text-sm text-slate-500 dark:text-slate-400">Kein aktiver Job</span>
{% endif %}
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-slate-700 dark:text-slate-300">{{ printer.last_activity }}</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endmacro %}
{# Formular mit CSRF und serverseitiger Validierung #}
{% macro form_field(field, label=None, help_text=None) %}
<div class="mb-4">
{% if label %}
<label for="{{ field.id }}" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">{{ label }}</label>
{% endif %}
{{ field(class="form-input" + (" border-red-500 dark:border-red-400" if field.errors else "")) }}
{% if field.errors %}
<div class="mt-1 text-sm text-red-600 dark:text-red-400">
{% for error in field.errors %}
<p>{{ error }}</p>
{% endfor %}
</div>
{% endif %}
{% if help_text %}
<p class="mt-1 text-sm text-slate-500 dark:text-slate-400">{{ help_text }}</p>
{% endif %}
</div>
{% endmacro %}
{# Modal-Dialog ohne JavaScript #}
{% macro modal_dialog(id, title, form_action=None) %}
<div id="{{ id }}" class="fixed inset-0 z-50 hidden">
<div class="absolute inset-0 bg-black/50 backdrop-blur-sm" onclick="this.parentElement.classList.add('hidden')"></div>
<div class="flex items-center justify-center min-h-screen p-4">
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 max-w-md w-full shadow-2xl">
<div class="flex justify-between items-center mb-4">
<h2 class="text-lg font-semibold text-slate-900 dark:text-white">{{ title }}</h2>
<button onclick="document.getElementById('{{ id }}').classList.add('hidden')" class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-300">
<i class="fas fa-times"></i>
</button>
</div>
{% if form_action %}
<form method="POST" action="{{ form_action }}">
{{ csrf_token() }}
{{ caller() }}
</form>
{% else %}
{{ caller() }}
{% endif %}
</div>
</div>
</div>
{% endmacro %}
{# URL-basierte Tab-Navigation für Filter #}
{% macro filter_tabs(filters, current_filter, base_url) %}
<div class="flex space-x-4 mb-6">
{% for filter in filters %}
<a href="{{ base_url }}?filter={{ filter.key }}{{ '&' + request.query_string.decode() if request.query_string and 'filter=' not in request.query_string.decode() else '' }}"
class="px-4 py-2 rounded-lg font-medium transition-colors
{% if current_filter == filter.key %}
bg-blue-100 text-blue-700 dark:bg-blue-900/20 dark:text-blue-300
{% else %}
text-slate-600 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-700/50
{% endif %}">
{% if filter.icon %}
<i class="{{ filter.icon }} mr-2"></i>
{% endif %}
{{ filter.name }}
{% if filter.count is defined %}
<span class="ml-2 px-2 py-0.5 text-xs rounded-full bg-slate-200 dark:bg-slate-600">{{ filter.count }}</span>
{% endif %}
</a>
{% endfor %}
</div>
{% endmacro %}