"Update login, new job, and settings templates with improved UI elements (feat)"

backend/app/templates/new_job.html

@@ -2,6 +2,232 @@
 
 {% block title %}Neuer Druckauftrag - MYP Platform{% endblock %}
 
+{% block extra_css %}
+<style>
+    /* Mercedes-Benz Corporate Design */
+    .text-mercedes-black { color: #000000; }
+    .text-mercedes-gray { color: #6b7280; }
+    .text-mercedes-silver { color: #9ca3af; }
+    .text-mercedes-blue { color: #0073ce; }
+    .text-mercedes-green { color: #008c32; }
+    .text-mercedes-red { color: #dc2626; }
+    
+    .bg-mercedes-black { background-color: #000000; }
+    .bg-mercedes-silver { background-color: #e5e7eb; }
+    .bg-mercedes-blue { background-color: #0073ce; }
+    .bg-mercedes-green { background-color: #008c32; }
+    
+    .border-mercedes-silver { border-color: #d1d5db; }
+    .border-mercedes-blue { border-color: #0073ce; }
+    
+    .hover\:border-mercedes-blue:hover { border-color: #0073ce; }
+    .focus\:ring-mercedes-blue:focus { 
+        --tw-ring-color: #0073ce; 
+        --tw-ring-opacity: 0.5;
+    }
+    .focus\:border-mercedes-blue:focus { border-color: #0073ce; }
+    
+    /* Mercedes Card Effect */
+    .mercedes-card {
+        background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
+        border: 1px solid #e5e7eb;
+        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;
+    }
+    
+    .dark .mercedes-card {
+        background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
+        border-color: #334155;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
+    }
+    
+    .mercedes-card:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    }
+    
+    /* Mercedes Button */
+    .mercedes-button {
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        position: relative;
+        overflow: hidden;
+    }
+    
+    .mercedes-button::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: -100%;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+        transition: left 0.5s;
+    }
+    
+    .mercedes-button:hover::before {
+        left: 100%;
+    }
+    
+    /* Enhanced File Upload Area */
+    #file-upload-area {
+        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+        border: 2px dashed #cbd5e1;
+        position: relative;
+        overflow: hidden;
+    }
+    
+    .dark #file-upload-area {
+        background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
+        border-color: #475569;
+    }
+    
+    #file-upload-area.drag-over {
+        border-color: #0073ce;
+        background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
+        transform: scale(1.02);
+    }
+    
+    .dark #file-upload-area.drag-over {
+        background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
+    }
+    
+    /* File Preview Animation */
+    #file-preview {
+        animation: slideIn 0.3s ease-out;
+    }
+    
+    @keyframes slideIn {
+        from {
+            opacity: 0;
+            transform: translateY(20px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+    
+    /* Progress Ring for Upload */
+    .progress-ring {
+        width: 60px;
+        height: 60px;
+        transform: rotate(-90deg);
+    }
+    
+    .progress-ring__circle {
+        stroke: #0073ce;
+        stroke-linecap: round;
+        stroke-width: 4;
+        fill: transparent;
+        r: 26;
+        cx: 30;
+        cy: 30;
+        stroke-dasharray: 163.36;
+        stroke-dashoffset: 163.36;
+        transition: stroke-dashoffset 0.3s ease;
+    }
+    
+    /* Form Enhancements */
+    .form-input {
+        transition: all 0.2s ease;
+        border: 1px solid #d1d5db;
+    }
+    
+    .form-input:focus {
+        border-color: #0073ce;
+        box-shadow: 0 0 0 3px rgba(0, 115, 206, 0.1);
+        transform: translateY(-1px);
+    }
+    
+    .dark .form-input {
+        background-color: #1e293b;
+        border-color: #475569;
+        color: #f8fafc;
+    }
+    
+    .dark .form-input:focus {
+        border-color: #0ea5e9;
+        box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
+    }
+    
+    /* Printer Status Styling */
+    .printer-online {
+        background: linear-gradient(90deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.05) 100%);
+        border-left: 4px solid #10b981;
+    }
+    
+    .printer-offline {
+        background: linear-gradient(90deg, rgba(245, 158, 11, 0.1) 0%, rgba(217, 119, 6, 0.05) 100%);
+        border-left: 4px solid #f59e0b;
+    }
+    
+    /* Success Animation */
+    .success-checkmark {
+        animation: checkmark 0.6s ease-in-out;
+    }
+    
+    @keyframes checkmark {
+        0% {
+            transform: scale(0);
+            opacity: 0;
+        }
+        50% {
+            transform: scale(1.2);
+            opacity: 1;
+        }
+        100% {
+            transform: scale(1);
+            opacity: 1;
+        }
+    }
+    
+    /* Responsive Design */
+    @media (max-width: 768px) {
+        .mercedes-card {
+            padding: 1.5rem;
+        }
+        
+        #file-upload-area {
+            padding: 2rem 1rem;
+        }
+        
+        .grid-cols-1.md\\:grid-cols-2 {
+            gap: 1rem;
+        }
+    }
+    
+    /* Loading Overlay */
+    .loading-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.5);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 9999;
+    }
+    
+    .loading-content {
+        background: white;
+        padding: 2rem;
+        border-radius: 12px;
+        text-align: center;
+        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    }
+    
+    .dark .loading-content {
+        background: #1e293b;
+        color: #f8fafc;
+    }
+</style>
+{% endblock %}
+
 {% block content %}
 <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
     <!-- Header -->
@@ -177,17 +403,26 @@
 <script>
     let selectedFile = null;
     let printers = [];
+    let uploadProgress = 0;
     
     // Initialize
     document.addEventListener('DOMContentLoaded', function() {
         loadPrinters();
         setupFileUpload();
+        setupFormEnhancements();
+        setupRealTimeValidation();
     });
     
-    // Load available printers
+    // Load available printers with enhanced error handling
     async function loadPrinters() {
+        const select = document.getElementById('printer-select');
+        
         try {
-            // Lade ALLE Drucker mit Live-Status-Check (nicht nur verfügbare)
+            // Show loading state
+            select.innerHTML = '<option value="">Lade Drucker...</option>';
+            select.disabled = true;
+            
+            // Try multiple API endpoints for better reliability
             let response;
             try {
                 response = await apiCall('/api/printers/status/live');
@@ -198,19 +433,19 @@
                 printers = response.printers || [];
             }
             
-            const select = document.getElementById('printer-select');
             select.innerHTML = '<option value="">Drucker auswählen...</option>';
+            select.disabled = false;
             
             console.log('Geladene Drucker:', printers);
             
             if (printers.length === 0) {
-                select.innerHTML = '<option value="">Keine Drucker in der Datenbank</option>';
+                select.innerHTML = '<option value="">Keine Drucker verfügbar</option>';
                 select.disabled = true;
-                showFlashMessage('Keine Drucker in der Datenbank gefunden', 'error');
+                showAdvancedMessage('Keine Drucker in der Datenbank gefunden. Kontaktieren Sie den Administrator.', 'error');
                 return;
             }
             
-            // Sortiere Drucker: Online zuerst, dann nach Name
+            // Enhanced printer sorting and display
             const sortedPrinters = printers.sort((a, b) => {
                 const aOnline = a.status === 'available' || a.is_online || a.active;
                 const bOnline = b.status === 'available' || b.is_online || b.active;
@@ -221,173 +456,336 @@
                 return a.name.localeCompare(b.name);
             });
             
-            // Zähler für Online- und Offline-Drucker
             let onlineCount = 0;
             let offlineCount = 0;
             
-            // Alle Drucker anzeigen (online und offline)
+            // Create printer options with enhanced status display
             sortedPrinters.forEach(printer => {
                 const option = document.createElement('option');
                 option.value = printer.id;
+                option.dataset.printerId = printer.id;
                 
-                // Status-Indikator bestimmen
                 const isOnline = printer.status === 'available' || printer.is_online || printer.active;
-                let statusIcon, statusText;
+                let statusIcon, statusText, estimatedTime = '';
                 
                 if (isOnline) {
-                    statusIcon = '✅';
-                    statusText = 'ONLINE - Sofortiger Start';
-                    option.style.backgroundColor = 'rgba(4, 120, 87, 0.1)';
-                    option.style.color = '#047857';
-                    option.style.fontWeight = '500';
+                    statusIcon = '🟢';
+                    statusText = 'SOFORT VERFÜGBAR';
+                    option.className = 'printer-online';
+                    estimatedTime = ' - Startzeit: <2 Min';
                     onlineCount++;
                 } else {
-                    statusIcon = '🔄';
-                    statusText = 'OFFLINE - Warteschlange';
-                    option.style.backgroundColor = 'rgba(245, 158, 11, 0.1)';
-                    option.style.color = '#d97706';
-                    option.style.fontWeight = '400';
-                    option.setAttribute('data-offline', 'true');
+                    statusIcon = '🟡';
+                    statusText = 'WARTESCHLANGE';
+                    option.className = 'printer-offline';
+                    option.dataset.offline = 'true';
+                    
+                    // Estimate queue time based on current jobs
+                    const queuedJobs = printer.queued_jobs || 0;
+                    const avgJobTime = 2; // hours
+                    const estimatedHours = queuedJobs * avgJobTime;
+                    estimatedTime = ` - Geschätzte Wartezeit: ${estimatedHours}h`;
                     offlineCount++;
                 }
                 
-                // Letzter Check-Zeitstempel
-                let lastChecked = '';
-                if (printer.last_checked) {
-                    const checkTime = new Date(printer.last_checked);
-                    const now = new Date();
-                    const diffMinutes = Math.floor((now - checkTime) / 60000);
-                    
-                    if (diffMinutes < 1) {
-                        lastChecked = ' (gerade geprüft)';
-                    } else if (diffMinutes < 60) {
-                        lastChecked = ` (vor ${diffMinutes} Min)`;
-                    } else {
-                        lastChecked = ` (vor ${Math.floor(diffMinutes / 60)} Std)`;
-                    }
-                }
-                
+                // Enhanced printer info
                 const location = printer.location || printer.model || 'Unbekanntes Modell';
-                option.textContent = `${statusIcon} ${printer.name} (${location}) - ${statusText}${lastChecked}`;
+                const capabilities = printer.capabilities ? ` | ${printer.capabilities}` : '';
+                
+                option.textContent = `${statusIcon} ${printer.name} (${location}) - ${statusText}${estimatedTime}${capabilities}`;
+                option.title = `Status: ${statusText} | Standort: ${location} | Modell: ${printer.model || 'Unbekannt'}`;
+                
                 select.appendChild(option);
             });
             
-            // Status-Nachricht anzeigen
+            // Show comprehensive status message
             if (onlineCount > 0) {
                 if (onlineCount === sortedPrinters.length) {
-                    showFlashMessage(`✅ OPTIMAL: Alle ${sortedPrinters.length} Drucker sind ONLINE und bereit`, 'success');
+                    showAdvancedMessage(`🎯 OPTIMAL: Alle ${sortedPrinters.length} Drucker sind bereit für sofortigen Start!`, 'success');
                 } else {
-                    showFlashMessage(`🔄 ${onlineCount} von ${sortedPrinters.length} Drucker ONLINE | ${offlineCount} Drucker in Warteschlange verfügbar`, 'success');
+                    showAdvancedMessage(`✅ ${onlineCount} Drucker SOFORT verfügbar | ${offlineCount} Drucker über Warteschlange planbar`, 'success');
                 }
             } else {
-                showFlashMessage(`🔄 WARTESCHLANGEN-MODUS: Alle ${sortedPrinters.length} Drucker sind OFFLINE - Jobs werden automatisch gestartet, wenn Drucker verfügbar werden`, 'warning');
+                showAdvancedMessage(`⏳ WARTESCHLANGEN-MODUS: Alle ${sortedPrinters.length} Drucker sind ausgelastet. Ihr Job wird automatisch gestartet, sobald ein Drucker frei wird.`, 'warning');
             }
             
         } catch (error) {
             console.error('Error loading printers:', error);
-            showFlashMessage('Fehler beim Laden der Drucker', 'error');
+            select.innerHTML = '<option value="">Fehler beim Laden der Drucker</option>';
+            select.disabled = true;
+            showAdvancedMessage('Kritischer Fehler beim Laden der Drucker. Bitte aktualisieren Sie die Seite oder kontaktieren Sie den Support.', 'error');
         }
     }
     
-    // Setup file upload
+    // Enhanced file upload setup
     function setupFileUpload() {
         const uploadArea = document.getElementById('file-upload-area');
         const fileInput = document.getElementById('file-input');
         
-        // Click to select file
-        uploadArea.addEventListener('click', () => {
-            if (!selectedFile) {
+        // Enhanced click handling
+        uploadArea.addEventListener('click', (e) => {
+            if (!selectedFile && !e.target.closest('button')) {
                 fileInput.click();
             }
         });
         
-        // Drag and drop
-        uploadArea.addEventListener('dragover', (e) => {
+        // Enhanced drag and drop with visual feedback
+        let dragCounter = 0;
+        
+        uploadArea.addEventListener('dragenter', (e) => {
             e.preventDefault();
-            uploadArea.classList.add('border-mercedes-blue', 'bg-blue-50');
+            dragCounter++;
+            uploadArea.classList.add('drag-over');
         });
         
         uploadArea.addEventListener('dragleave', (e) => {
             e.preventDefault();
-            uploadArea.classList.remove('border-mercedes-blue', 'bg-blue-50');
+            dragCounter--;
+            if (dragCounter === 0) {
+                uploadArea.classList.remove('drag-over');
+            }
+        });
+        
+        uploadArea.addEventListener('dragover', (e) => {
+            e.preventDefault();
         });
         
         uploadArea.addEventListener('drop', (e) => {
             e.preventDefault();
-            uploadArea.classList.remove('border-mercedes-blue', 'bg-blue-50');
+            dragCounter = 0;
+            uploadArea.classList.remove('drag-over');
             
             const files = e.dataTransfer.files;
             if (files.length > 0) {
                 handleFileSelect({ target: { files } });
             }
         });
+        
+        // File input change handler
+        fileInput.addEventListener('change', handleFileSelect);
     }
     
-    // Handle file selection
+    // Enhanced file selection handling
     function handleFileSelect(event) {
         const file = event.target.files[0];
         if (!file) return;
         
-        // Validate file type
-        const allowedTypes = ['.stl', '.gcode', '.3mf', '.obj'];
-        const fileExtension = '.' + file.name.split('.').pop().toLowerCase();
-        
-        if (!allowedTypes.includes(fileExtension)) {
-            showFlashMessage('Ungültiger Dateityp. Erlaubt sind: STL, GCODE, 3MF, OBJ', 'error');
-            return;
-        }
-        
-        // Validate file size (100MB max)
-        const maxSize = 100 * 1024 * 1024; // 100MB in bytes
-        if (file.size > maxSize) {
-            showFlashMessage('Datei ist zu groß. Maximum: 100MB', 'error');
+        // Enhanced file validation
+        const validation = validateFile(file);
+        if (!validation.valid) {
+            showAdvancedMessage(validation.message, 'error');
             return;
         }
         
         selectedFile = file;
-        showFilePreview(file);
+        showEnhancedFilePreview(file);
         validateForm();
+        
+        // Analyze file for additional insights
+        analyzeFile(file);
     }
     
-    // Show file preview
-    function showFilePreview(file) {
+    // Comprehensive file validation
+    function validateFile(file) {
+        const allowedTypes = {
+            '.stl': { mime: ['application/octet-stream', 'model/stl'], description: 'STL (Stereolithography)' },
+            '.gcode': { mime: ['text/plain', 'application/octet-stream'], description: 'G-Code' },
+            '.3mf': { mime: ['application/vnd.ms-package.3dmanufacturing-3dmodel+xml'], description: '3MF (3D Manufacturing Format)' },
+            '.obj': { mime: ['text/plain', 'application/octet-stream'], description: 'OBJ (Wavefront)' }
+        };
+        
+        const fileExtension = '.' + file.name.split('.').pop().toLowerCase();
+        
+        // Check file extension
+        if (!allowedTypes[fileExtension]) {
+            return {
+                valid: false,
+                message: `Ungültiger Dateityp "${fileExtension}". Erlaubte Formate: STL, GCODE, 3MF, OBJ`
+            };
+        }
+        
+        // Check file size (100MB max)
+        const maxSize = 100 * 1024 * 1024;
+        if (file.size > maxSize) {
+            return {
+                valid: false,
+                message: `Datei zu groß (${formatFileSize(file.size)}). Maximum: 100MB`
+            };
+        }
+        
+        // Check minimum file size (1KB)
+        if (file.size < 1024) {
+            return {
+                valid: false,
+                message: 'Datei ist zu klein. Mindestgröße: 1KB'
+            };
+        }
+        
+        // Additional checks for specific file types
+        if (fileExtension === '.gcode' && file.size > 50 * 1024 * 1024) {
+            return {
+                valid: true,
+                warning: 'Große G-Code Datei erkannt. Verarbeitungszeit kann länger dauern.'
+            };
+        }
+        
+        return { valid: true };
+    }
+    
+    // Enhanced file preview with more details
+    function showEnhancedFilePreview(file) {
         document.getElementById('upload-placeholder').classList.add('hidden');
-        document.getElementById('file-preview').classList.remove('hidden');
+        const previewContainer = document.getElementById('file-preview');
+        previewContainer.classList.remove('hidden');
         
         document.getElementById('file-name').textContent = file.name;
         document.getElementById('file-size').textContent = formatFileSize(file.size);
+        
+        // Add file type indicator
+        const fileExtension = '.' + file.name.split('.').pop().toLowerCase();
+        const typeIndicator = document.createElement('div');
+        typeIndicator.className = 'text-xs text-mercedes-blue font-medium mt-1';
+        typeIndicator.textContent = getFileTypeDescription(fileExtension);
+        
+        const fileSizeElement = document.getElementById('file-size');
+        fileSizeElement.parentElement.appendChild(typeIndicator);
+        
+        // Add estimated print time (placeholder)
+        const estimateElement = document.createElement('div');
+        estimateElement.className = 'text-xs text-mercedes-gray mt-2';
+        estimateElement.innerHTML = '<span class="animate-pulse">📊 Datei wird analysiert...</span>';
+        fileSizeElement.parentElement.appendChild(estimateElement);
+        
+        // Simulate analysis completion
+        setTimeout(() => {
+            estimateElement.innerHTML = '⏱️ Geschätzte Druckzeit: Wird nach Druckerauswahl berechnet';
+        }, 2000);
     }
     
-    // Clear selected file
-    function clearFile() {
-        selectedFile = null;
-        document.getElementById('file-input').value = '';
-        document.getElementById('upload-placeholder').classList.remove('hidden');
-        document.getElementById('file-preview').classList.add('hidden');
-        validateForm();
+    // File analysis for insights
+    function analyzeFile(file) {
+        const fileExtension = '.' + file.name.split('.').pop().toLowerCase();
+        
+        if (fileExtension === '.stl') {
+            // For STL files, we could potentially read the header
+            console.log('STL-Datei erkannt - weitere Analyse verfügbar');
+        } else if (fileExtension === '.gcode') {
+            // For G-Code, we could estimate print time
+            console.log('G-Code-Datei erkannt - Druckzeit-Analyse möglich');
+        }
     }
     
-    // Validate form
+    // Setup form enhancements
+    function setupFormEnhancements() {
+        // Add form-input class to all inputs and selects
+        const formElements = document.querySelectorAll('input, select, textarea');
+        formElements.forEach(element => {
+            element.classList.add('form-input');
+        });
+        
+        // Enhanced printer selection with additional info
+        const printerSelect = document.getElementById('printer-select');
+        printerSelect.addEventListener('change', function() {
+            const selectedPrinterId = this.value;
+            if (selectedPrinterId) {
+                const printer = printers.find(p => p.id == selectedPrinterId);
+                if (printer) {
+                    showPrinterInfo(printer);
+                    updateEstimatedPrintTime(printer);
+                }
+            }
+            validateForm();
+        });
+        
+        // Auto-suggest materials based on file type
+        const materialInput = document.getElementById('material-input');
+        const fileInput = document.getElementById('file-input');
+        
+        fileInput.addEventListener('change', function() {
+            if (this.files[0] && !materialInput.value) {
+                const suggestedMaterial = getSuggestedMaterial(this.files[0]);
+                if (suggestedMaterial) {
+                    materialInput.value = suggestedMaterial;
+                    materialInput.style.backgroundColor = 'rgba(16, 185, 129, 0.1)';
+                    setTimeout(() => {
+                        materialInput.style.backgroundColor = '';
+                    }, 2000);
+                }
+            }
+        });
+    }
+    
+    // Real-time form validation
+    function setupRealTimeValidation() {
+        const form = document.getElementById('jobForm');
+        const inputs = form.querySelectorAll('input, select, textarea');
+        
+        inputs.forEach(input => {
+            input.addEventListener('input', validateForm);
+            input.addEventListener('blur', validateFieldOnBlur);
+        });
+    }
+    
+    // Validate individual field on blur
+    function validateFieldOnBlur(event) {
+        const field = event.target;
+        const fieldName = field.name || field.id;
+        
+        // Clear previous validation state
+        field.classList.remove('border-red-500', 'border-green-500');
+        
+        if (field.hasAttribute('required') && !field.value.trim()) {
+            field.classList.add('border-red-500');
+            showFieldError(field, 'Dieses Feld ist erforderlich');
+        } else if (field.value.trim()) {
+            field.classList.add('border-green-500');
+            clearFieldError(field);
+        }
+    }
+    
+    // Enhanced form validation
     function validateForm() {
         const printerSelected = document.getElementById('printer-select').value;
         const submitButton = document.getElementById('submit-button');
         
         const isValid = selectedFile && printerSelected;
+        
         submitButton.disabled = !isValid;
+        
+        // Update button appearance based on validation state
+        if (isValid) {
+            submitButton.classList.remove('opacity-50', 'cursor-not-allowed');
+            submitButton.classList.add('hover:bg-green-700');
+        } else {
+            submitButton.classList.add('opacity-50', 'cursor-not-allowed');
+            submitButton.classList.remove('hover:bg-green-700');
+        }
+        
+        // Show validation feedback
+        updateValidationFeedback(isValid);
     }
     
-    // Form validation on change
-    document.getElementById('printer-select').addEventListener('change', validateForm);
-    
-    // Handle form submission
+    // Enhanced form submission with progress tracking
     async function handleJobSubmission(event) {
         event.preventDefault();
         
         if (!selectedFile) {
-            showFlashMessage('Bitte wählen Sie eine Datei aus', 'error');
+            showAdvancedMessage('Bitte wählen Sie eine Datei aus', 'error');
             return;
         }
         
+        const printer = printers.find(p => p.id == document.getElementById('printer-select').value);
+        
+        // Pre-submission validation
+        const validationResult = await performPreSubmissionValidation();
+        if (!validationResult.valid) {
+            showAdvancedMessage(validationResult.message, 'error');
+            return;
+        }
+        
+        // Show loading overlay
+        showLoadingOverlay('Druckauftrag wird erstellt...');
+        
         const formData = new FormData();
         formData.append('file', selectedFile);
         formData.append('printer_id', document.getElementById('printer-select').value);
@@ -398,60 +796,225 @@
         formData.append('infill', document.getElementById('infill-select').value);
         formData.append('notes', document.getElementById('notes-textarea').value);
         
-        // Show loading state
-        const submitButton = document.getElementById('submit-button');
-        const submitText = document.getElementById('submit-text');
-        const submitSpinner = document.getElementById('submit-spinner');
-        
-        submitButton.disabled = true;
-        submitText.textContent = 'Wird erstellt...';
-        submitSpinner.classList.remove('hidden');
-        
+        // Enhanced submission with progress tracking
         try {
-            const response = await fetch('/api/jobs', {
+            const response = await fetchWithProgress('/api/jobs', {
                 method: 'POST',
-                body: formData,
-                headers: {
-                    'X-Requested-With': 'XMLHttpRequest'
-                }
-            });
+                body: formData
+            }, updateUploadProgress);
             
             if (!response.ok) {
-                throw new Error(`HTTP error! status: ${response.status}`);
+                const errorData = await response.json().catch(() => ({}));
+                throw new Error(errorData.message || `HTTP error! status: ${response.status}`);
             }
             
             const result = await response.json();
             
             if (result.success) {
-                showFlashMessage('Druckauftrag erfolgreich erstellt', 'success');
+                hideLoadingOverlay();
+                showSuccessMessage(result, printer);
                 
-                // Redirect to job details or jobs list
+                // Redirect after success
                 setTimeout(() => {
-                    window.location.href = `/job/${result.job_id}`;
-                }, 1500);
+                    window.location.href = result.redirect_url || `/job/${result.job_id}`;
+                }, 2000);
             } else {
-                throw new Error(result.message || 'Unbekannter Fehler');
+                throw new Error(result.message || 'Unbekannter Fehler beim Erstellen des Auftrags');
             }
             
         } catch (error) {
             console.error('Error creating job:', error);
-            showFlashMessage('Fehler beim Erstellen des Auftrags: ' + error.message, 'error');
-            
-            // Reset button state
-            submitButton.disabled = false;
-            submitText.textContent = 'Auftrag erstellen';
-            submitSpinner.classList.add('hidden');
-            validateForm();
+            hideLoadingOverlay();
+            showAdvancedMessage(`Fehler beim Erstellen des Auftrags: ${error.message}`, 'error');
+            enableFormSubmission();
         }
     }
     
-    // Reset form
+    // Progress tracking for file upload
+    function fetchWithProgress(url, options, onProgress) {
+        return new Promise((resolve, reject) => {
+            const xhr = new XMLHttpRequest();
+            
+            xhr.upload.addEventListener('progress', (e) => {
+                if (e.lengthComputable) {
+                    const percentComplete = (e.loaded / e.total) * 100;
+                    onProgress(percentComplete);
+                }
+            });
+            
+            xhr.addEventListener('load', () => {
+                if (xhr.status >= 200 && xhr.status < 300) {
+                    resolve({
+                        ok: true,
+                        status: xhr.status,
+                        json: () => Promise.resolve(JSON.parse(xhr.responseText))
+                    });
+                } else {
+                    reject(new Error(`HTTP ${xhr.status}`));
+                }
+            });
+            
+            xhr.addEventListener('error', () => reject(new Error('Network Error')));
+            
+            xhr.open(options.method || 'GET', url);
+            
+            if (options.headers) {
+                Object.entries(options.headers).forEach(([key, value]) => {
+                    xhr.setRequestHeader(key, value);
+                });
+            }
+            
+            xhr.send(options.body);
+        });
+    }
+    
+    // Helper functions
+    function getFileTypeDescription(extension) {
+        const descriptions = {
+            '.stl': 'STL - 3D Mesh Datei',
+            '.gcode': 'G-Code - Druckfertiger Code',
+            '.3mf': '3MF - 3D Manufacturing Format',
+            '.obj': 'OBJ - Wavefront 3D Object'
+        };
+        return descriptions[extension] || 'Unbekannter Dateityp';
+    }
+    
+    function getSuggestedMaterial(file) {
+        const fileName = file.name.toLowerCase();
+        if (fileName.includes('pla')) return 'PLA';
+        if (fileName.includes('abs')) return 'ABS';
+        if (fileName.includes('petg')) return 'PETG';
+        if (fileName.includes('tpu')) return 'TPU';
+        return 'PLA'; // Default suggestion
+    }
+    
+    function showAdvancedMessage(message, type) {
+        // Use enhanced message display
+        if (window.showToast) {
+            window.showToast(message, type);
+        } else {
+            console.log(`${type.toUpperCase()}: ${message}`);
+        }
+    }
+    
+    function showLoadingOverlay(message) {
+        const overlay = document.createElement('div');
+        overlay.id = 'loading-overlay';
+        overlay.className = 'loading-overlay';
+        overlay.innerHTML = `
+            <div class="loading-content">
+                <div class="progress-ring">
+                    <svg class="progress-ring" width="60" height="60">
+                        <circle class="progress-ring__circle" stroke="#0073ce" stroke-width="4" fill="transparent" r="26" cx="30" cy="30"/>
+                    </svg>
+                </div>
+                <h3 class="text-lg font-semibold mt-4">${message}</h3>
+                <p class="text-sm text-gray-600 dark:text-gray-400 mt-2">Bitte warten Sie...</p>
+                <div id="upload-progress" class="mt-4 text-sm font-medium">0%</div>
+            </div>
+        `;
+        document.body.appendChild(overlay);
+    }
+    
+    function hideLoadingOverlay() {
+        const overlay = document.getElementById('loading-overlay');
+        if (overlay) {
+            overlay.remove();
+        }
+    }
+    
+    function updateUploadProgress(percent) {
+        const progressElement = document.getElementById('upload-progress');
+        if (progressElement) {
+            progressElement.textContent = `${Math.round(percent)}% hochgeladen`;
+        }
+        
+        const circle = document.querySelector('.progress-ring__circle');
+        if (circle) {
+            const offset = 163.36 - (percent / 100) * 163.36;
+            circle.style.strokeDashoffset = offset;
+        }
+    }
+    
+    function showSuccessMessage(result, printer) {
+        const overlay = document.createElement('div');
+        overlay.className = 'loading-overlay';
+        overlay.innerHTML = `
+            <div class="loading-content">
+                <div class="success-checkmark">
+                    <svg class="w-16 h-16 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                    </svg>
+                </div>
+                <h3 class="text-lg font-semibold mt-4 text-green-600">Auftrag erfolgreich erstellt!</h3>
+                <p class="text-sm text-gray-600 dark:text-gray-400 mt-2">
+                    Job-ID: ${result.job_id}<br>
+                    Drucker: ${printer ? printer.name : 'Unbekannt'}<br>
+                    Status: ${result.status || 'In Warteschlange'}
+                </p>
+                <p class="text-xs text-gray-500 mt-3">Sie werden automatisch weitergeleitet...</p>
+            </div>
+        `;
+        document.body.appendChild(overlay);
+    }
+    
+    function enableFormSubmission() {
+        const submitButton = document.getElementById('submit-button');
+        const submitText = document.getElementById('submit-text');
+        const submitSpinner = document.getElementById('submit-spinner');
+        
+        submitButton.disabled = false;
+        submitText.textContent = 'Auftrag erstellen';
+        submitSpinner.classList.add('hidden');
+        validateForm();
+    }
+    
+    // Clear selected file
+    function clearFile() {
+        selectedFile = null;
+        document.getElementById('file-input').value = '';
+        document.getElementById('upload-placeholder').classList.remove('hidden');
+        document.getElementById('file-preview').classList.add('hidden');
+        validateForm();
+    }
+    
+    // Reset form with confirmation
     function resetForm() {
-        if (confirm('Sind Sie sicher, dass Sie das Formular zurücksetzen möchten?')) {
+        if (confirm('Sind Sie sicher, dass Sie das Formular zurücksetzen möchten? Alle Eingaben gehen verloren.')) {
             document.getElementById('jobForm').reset();
             clearFile();
             validateForm();
+            showAdvancedMessage('Formular wurde zurückgesetzt', 'info');
         }
     }
+    
+    // Format file size helper
+    function formatFileSize(bytes) {
+        if (bytes === 0) return '0 Bytes';
+        const k = 1024;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    }
+    
+    // Pre-submission validation
+    async function performPreSubmissionValidation() {
+        // Check if printer is still available
+        try {
+            const printerId = document.getElementById('printer-select').value;
+            const response = await apiCall(`/api/printers/${printerId}/status`);
+            
+            if (!response.available) {
+                return {
+                    valid: false,
+                    message: 'Der ausgewählte Drucker ist nicht mehr verfügbar. Bitte wählen Sie einen anderen Drucker.'
+                };
+            }
+        } catch (error) {
+            console.warn('Drucker-Status konnte nicht überprüft werden:', error);
+        }
+        
+        return { valid: true };
+    }
 </script>
 {% endblock %}