🐛📚 "Migrate JavaScript templates to Jinja for better documentation and maintainability"
This commit is contained in:
@ -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 %}
|
||||
Reference in New Issue
Block a user