Projektarbeit-MYP/backend/app/templates/guest_request.html

236 lines
13 KiB
HTML

{% extends "base.html" %}
{% block title %}Gastanfrage - Mercedes-Benz MYP Platform{% endblock %}
{% block head %}
{{ super() }}
<meta name="csrf-token" content="{{ csrf_token() }}">
{% endblock %}
{% block content %}
<div class="space-y-8">
<!-- Page Header -->
<div class="dashboard-card p-6">
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
<div class="flex items-center gap-4">
<div class="w-12 h-12 flex-shrink-0">
<svg class="w-full h-full text-slate-900 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
</svg>
</div>
<div>
<h1 class="text-3xl font-bold text-slate-900 dark:text-white tracking-tight">Gastanfrage</h1>
<p class="text-slate-500 dark:text-slate-400 mt-1">Antrag für 3D-Druckauftrag einreichen</p>
</div>
</div>
<div class="flex flex-wrap gap-3">
<a href="{{ url_for('guest.guest_requests_overview') }}"
class="btn-secondary flex items-center gap-2">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 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>
<span>Anträge Übersicht</span>
</a>
<a href="{{ url_for('index') }}"
class="btn-secondary flex items-center gap-2">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
</svg>
<span>Startseite</span>
</a>
</div>
</div>
</div>
<!-- Info Banner -->
<div class="dashboard-card p-6">
<div class="flex items-start gap-4">
<div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-xl flex items-center justify-center flex-shrink-0">
<svg class="h-6 w-6 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
</svg>
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-slate-900 dark:text-white mb-2">
Wichtige Hinweise
</h3>
<div class="text-slate-600 dark:text-slate-400 space-y-2">
<p>• Alle Anträge werden sorgfältig geprüft und genehmigt</p>
<p>• Die Bearbeitungszeit beträgt in der Regel 24-48 Stunden</p>
<p>• Sie erhalten eine E-Mail-Benachrichtigung über den Status</p>
<p>• Nach Genehmigung können Sie den Druckauftrag starten</p>
</div>
</div>
</div>
</div>
<!-- Antragsformular -->
<div class="dashboard-card p-6">
<div class="mb-6">
<h2 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
Druckantrag einreichen
</h2>
<p class="text-slate-500 dark:text-slate-400">
Füllen Sie alle erforderlichen Felder aus, um Ihren Druckantrag zu stellen
</p>
</div>
<form method="POST" enctype="multipart/form-data" class="space-y-6">
{{ form.hidden_tag() }}
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Name -->
<div>
{{ form.name.label(class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2") }}
{{ form.name(class="block w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500", placeholder="Ihr vollständiger Name") }}
{% if form.name.errors %}
<div class="mt-1 text-sm text-red-600">
{% for error in form.name.errors %}
<p>{{ error }}</p>
{% endfor %}
</div>
{% endif %}
</div>
<!-- E-Mail -->
<div>
{{ form.email.label(class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2") }}
{{ form.email(class="block w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500", placeholder="ihre.email@example.com") }}
{% if form.email.errors %}
<div class="mt-1 text-sm text-red-600">
{% for error in form.email.errors %}
<p>{{ error }}</p>
{% endfor %}
</div>
{% endif %}
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Drucker -->
<div>
{{ form.printer_id.label(class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2") }}
{{ form.printer_id(class="block w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500") }}
{% if form.printer_id.errors %}
<div class="mt-1 text-sm text-red-600">
{% for error in form.printer_id.errors %}
<p>{{ error }}</p>
{% endfor %}
</div>
{% endif %}
</div>
<!-- Geschätzte Dauer -->
<div>
{{ form.duration_min.label(class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2") }}
<div class="relative">
{{ form.duration_min(class="block w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500", placeholder="z.B. 120") }}
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
<span class="text-slate-500 dark:text-slate-400 text-sm">Minuten</span>
</div>
</div>
{% if form.duration_min.errors %}
<div class="mt-1 text-sm text-red-600">
{% for error in form.duration_min.errors %}
<p>{{ error }}</p>
{% endfor %}
</div>
{% endif %}
</div>
</div>
<!-- Projektbeschreibung -->
<div>
{{ form.reason.label(class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2") }}
{{ form.reason(class="block w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none", rows="4", placeholder="Beschreiben Sie Ihr Projekt und den geplanten Verwendungszweck...") }}
{% if form.reason.errors %}
<div class="mt-1 text-sm text-red-600">
{% for error in form.reason.errors %}
<p>{{ error }}</p>
{% endfor %}
</div>
{% endif %}
</div>
<!-- Datei-Upload -->
<div>
{{ form.file.label(class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2") }}
<div class="flex items-center justify-center w-full">
<label for="{{ form.file.id }}" class="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-300 dark:border-slate-600 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:bg-slate-700/30 hover:bg-gray-100 dark:hover:bg-slate-700/50 transition-colors">
<div class="flex flex-col items-center justify-center pt-5 pb-6">
<svg class="w-8 h-8 mb-3 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
</svg>
<p class="mb-2 text-sm text-gray-500 dark:text-gray-400"><span class="font-semibold">Klicken Sie zum Hochladen</span> oder ziehen Sie die Datei hierher</p>
<p class="text-xs text-gray-500 dark:text-gray-400">STL, OBJ oder andere 3D-Dateien (max. 50MB)</p>
</div>
{{ form.file(class="hidden") }}
</label>
</div>
{% if form.file.errors %}
<div class="mt-2 text-sm text-red-600">
{% for error in form.file.errors %}
<p>{{ error }}</p>
{% endfor %}
</div>
{% endif %}
</div>
<!-- Submit Button -->
<div class="flex items-center justify-end pt-6 border-t border-gray-200 dark:border-slate-600">
<button type="submit" class="btn-primary flex items-center gap-2">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
</svg>
<span>Antrag einreichen</span>
</button>
</div>
</form>
</div>
<!-- Status Check Section -->
<div class="dashboard-card p-6">
<div class="text-center">
<h3 class="text-lg font-semibold text-slate-900 dark:text-white mb-2">
Status Ihres Antrags prüfen
</h3>
<p class="text-slate-500 dark:text-slate-400 mb-6">
Haben Sie bereits einen Antrag gestellt? Prüfen Sie hier den aktuellen Status.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="{{ url_for('guest.guest_requests_overview') }}"
class="btn-secondary flex items-center gap-2">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 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>
<span>Alle Anträge ansehen</span>
</a>
<a href="{{ url_for('guest.guest_status') }}"
class="btn-secondary flex items-center gap-2">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m3-6l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2M7 20l4-16m2 16l4-16"/>
</svg>
<span>Status mit Code prüfen</span>
</a>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// File upload preview
const fileInput = document.getElementById('{{ form.file.id }}');
if (fileInput) {
fileInput.addEventListener('change', function(e) {
const file = e.target.files[0];
if (file) {
const label = fileInput.closest('label');
const textElement = label.querySelector('p');
textElement.innerHTML = `<span class="font-semibold">Datei ausgewählt:</span> ${file.name}`;
}
});
}
});
</script>
{% endblock %}