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

🎉 Improved form testing infrastructure with new files: 'simple_form_tester.py', 'ui_components.html' templates, and updated test suite in 'form_test_automator.py'. 📚

Browse Source
This commit is contained in:
Till Tomczak
2025-06-18 08:49:23 +02:00
parent 9a03e52209
commit f1e3a2cfea
5 changed files with 919 additions and 490 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
backend/templates/macros/ui_components.html Normal file
View File

@ -0,0 +1,183 @@
{# Jinja-Makros für UI-Komponenten zur JavaScript-Ersetzung #}
{# Status-Indikator mit CSS-Animation #}
{% macro status_indicator(status, text="") %}
{% set status_classes = {
'online': 'mb-status-online',
'offline': 'mb-status-offline',
'busy': 'mb-status-busy',
'idle': 'mb-status-idle',
'running': 'mb-status-busy',
'completed': 'mb-status-online',
'failed': 'mb-status-offline',
'paused': 'mb-status-idle',
'queued': 'mb-status-idle'
} %}
<div class="flex items-center">
<div class="mb-status-indicator {{ status_classes.get(status, 'mb-status-idle') }}"></div>
{% if text %}
<span class="ml-2 text-sm font-medium text-slate-700 dark:text-slate-300">{{ text }}</span>
{% endif %}
</div>
{% endmacro %}
{# Fortschrittsbalken mit CSS-Animation #}
{% macro progress_bar(progress, show_text=True) %}
<div class="mb-progress-container">
<div class="mb-progress-bar" style="width: {{ progress }}%"></div>
</div>
{% if show_text %}
<div class="text-xs text-right mt-1 text-slate-500 dark:text-slate-400">{{ progress }}%</div>
{% endif %}
{% endmacro %}
{# Klickbare Karte #}
{% macro clickable_card(url, class="dashboard-card p-6") %}
<a href="{{ url }}" class="{{ class }} block hover:transform hover:-translate-y-1 transition-transform">
{{ caller() }}
</a>
{% endmacro %}
{# Tab-Navigation mit serverseitiger Logik #}
{% macro tab_navigation(tabs, active_tab) %}
<div class="border-b border-gray-200 dark:border-slate-700">
<nav class="-mb-px flex space-x-8" aria-label="Tabs">
{% for tab in tabs %}
<a href="{{ tab.url }}"
class="{% if active_tab == tab.id %}border-blue-500 text-blue-600 dark:text-blue-400{% else %}border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-slate-400 dark:hover:text-slate-300{% endif %}
whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm">
{% if tab.icon %}
<i class="{{ tab.icon }} mr-2"></i>
{% endif %}
{{ tab.name }}
</a>
{% endfor %}
</nav>
</div>
{% endmacro %}
{# Drucker-Status-Karte ohne JavaScript #}
{% macro printer_card(printer, show_link=True) %}
{% if show_link %}
<a href="{{ url_for('printers_page') }}#printer-{{ printer.id }}" class="block">
{% endif %}
<div class="flex items-center justify-between p-4 rounded-xl bg-gray-50 dark:bg-slate-700/30 {% if show_link %}hover:bg-gray-100 dark:hover:bg-slate-700/50 transition-colors{% endif %}">
<div class="flex items-center">
{{ status_indicator(printer.status, printer.status_text) }}
<div class="ml-3">
<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>
{% if show_link %}
</a>
{% endif %}
{% endmacro %}
{# Job-Zeile in Tabelle ohne JavaScript #}
{% macro job_row(job, show_link=True) %}
<tr class="hover:bg-gray-50 dark:hover:bg-slate-700/50 {% if show_link %}cursor-pointer{% endif %}">
{% if show_link %}
<td colspan="6" class="p-0">
<a href="{{ url_for('jobs_page') }}#job-{{ job.id }}" class="block px-6 py-4">
{{ job_row_content(job) }}
</a>
</td>
{% else %}
{{ job_row_content(job) }}
{% endif %}
</tr>
{% endmacro %}
{# Job-Zeilen-Inhalt (für Wiederverwendung) #}
{% macro job_row_content(job) %}
<td class="px-6 py-4 whitespace-nowrap">
{{ status_indicator(job.status, job.status_text) }}
</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">
{{ progress_bar(job.progress) }}
</td>
<td class="px-6 py-4 whitespace-nowrap text-right">
<span class="text-slate-900 dark:text-white hover:text-slate-700 dark:hover:text-slate-300 font-medium">Details</span>
</td>
{% endmacro %}
{# Benachrichtigungs-Toast mit Auto-Close via CSS #}
{% macro notification_toast(message, type="info", auto_close=True) %}
{% set type_classes = {
'success': 'border-green-200 bg-green-50 text-green-800 dark:border-green-800 dark:bg-green-900/20 dark:text-green-300',
'error': 'border-red-200 bg-red-50 text-red-800 dark:border-red-800 dark:bg-red-900/20 dark:text-red-300',
'warning': 'border-yellow-200 bg-yellow-50 text-yellow-800 dark:border-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-300',
'info': 'border-blue-200 bg-blue-50 text-blue-800 dark:border-blue-800 dark:bg-blue-900/20 dark:text-blue-300'
} %}
<div class="glass rounded-lg p-4 border {{ type_classes.get(type, type_classes['info']) }} {% if auto_close %}animate-toast{% endif %}">
<div class="flex items-start">
<i class="fas {{ 'fa-check-circle' if type == 'success' else 'fa-exclamation-circle' if type == 'error' else 'fa-exclamation-triangle' if type == 'warning' else 'fa-info-circle' }} mt-0.5 mr-3"></i>
<div class="flex-1">
<p class="text-sm font-medium">{{ message }}</p>
</div>
<form method="POST" class="ml-3">
{{ csrf_token() }}
<button type="submit" name="dismiss_notification" class="hover:opacity-70">
<i class="fas fa-times text-sm"></i>
</button>
</form>
</div>
</div>
{% endmacro %}
{# Formular-Submit-Button mit 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>
<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>
{% endmacro %}
{# Auto-Refresh Meta-Tag für periodische Seitenaktualisierung #}
{% macro auto_refresh(seconds) %}
<meta http-equiv="refresh" content="{{ seconds }}">
{% endmacro %}
{# CSS-only Dropdown-Menu #}
{% macro css_dropdown(button_text, items, button_class="btn-secondary") %}
<div class="relative group">
<button class="{{ button_class }}">
{{ button_text }}
<i class="fas fa-chevron-down ml-2"></i>
</button>
<div class="absolute right-0 mt-2 w-48 glass rounded-xl overflow-hidden opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
{% for item in items %}
<a href="{{ item.url }}" class="block px-4 py-2 text-sm hover:bg-white/10 dark:hover:bg-black/10">
{% if item.icon %}
<i class="{{ item.icon }} w-4 mr-3"></i>
{% endif %}
{{ item.text }}
</a>
{% endfor %}
</div>
</div>
{% endmacro %}