v0.3.1 — Frontend: PDF-Button, Update-Download UI, Druckvorschau

- PDF-Export Button in WeekPlanner Toolbar
- Loading States + Success/Error Banner
- InfoPage: Update-Download mit Fortschritt + Neustart-Hinweis
- Druckvorschau: HTML-Layout in neuem Fenster mit auto window.print()
- BITV 2.0: aria-labels, aria-live, Focus-Indikatoren

frontend/src/components/InfoPage.tsx

@@ -164,7 +164,7 @@ export function InfoPage() {
               </div>
             )}
 
-            {updateInfo && updateInfo.available && (
+            {updateInfo && updateInfo.available && !downloadComplete && (
               <div className="bg-blue-50 border border-blue-200 rounded-md p-4">
                 <div className="flex">
                   <div className="flex-shrink-0">
@@ -187,7 +187,7 @@ export function InfoPage() {
                       {updateInfo.release_notes && (
                         <div className="mt-3">
                           <p className="font-medium">Änderungen:</p>
-                          <div className="mt-1 text-xs bg-white p-2 rounded border">
+                          <div className="mt-1 text-xs bg-white p-2 rounded border max-h-32 overflow-y-auto">
                             <pre className="whitespace-pre-wrap">{updateInfo.release_notes}</pre>
                           </div>
                         </div>
@@ -197,17 +197,75 @@ export function InfoPage() {
                     {updateInfo.download_url && (
                       <div className="mt-4">
                         <button
-                          onClick={handleDownload}
+                          onClick={handleDownloadUpdate}
-                          className="btn-primary"
+                          disabled={downloading}
+                          className="flex items-center space-x-2 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                          aria-label="Update herunterladen"
+                          aria-describedby="download-status"
                         >
-                          Download starten
+                          {downloading && (
+                            <svg className="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
+                              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                              <path className="opacity-75" fill="currentColor" d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                            </svg>
+                          )}
+                          <span>{downloading ? 'Wird heruntergeladen...' : 'Herunterladen'}</span>
                         </button>
+                        
+                        {downloading && (
+                          <div id="download-status" className="mt-2 text-xs text-blue-700" aria-live="polite">
+                            Update wird heruntergeladen und verifiziert. Dies kann einige Minuten dauern...
+                          </div>
+                        )}
                       </div>
                     )}
                   </div>
                 </div>
               </div>
             )}
+
+            {/* Download Complete State */}
+            {downloadComplete && (
+              <div className="bg-green-50 border border-green-200 rounded-md p-4">
+                <div className="flex">
+                  <div className="flex-shrink-0">
+                    <svg className="h-5 w-5 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                  </div>
+                  <div className="ml-3 flex-1">
+                    <h3 className="text-sm font-medium text-green-800">
+                      Update heruntergeladen
+                    </h3>
+                    <div className="mt-2 text-sm text-green-700">
+                      <p>
+                        Das Update auf Version <span className="font-mono">{updateInfo?.latest_version}</span> wurde erfolgreich heruntergeladen und die SHA256-Prüfsumme wurde verifiziert.
+                      </p>
+                      <p className="mt-2 font-medium">
+                        Bitte starten Sie die Anwendung neu, um das Update zu installieren.
+                      </p>
+                    </div>
+                    <div className="mt-4 flex space-x-3">
+                      <button
+                        onClick={() => window.location.reload()}
+                        className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors"
+                        aria-label="Anwendung neu starten"
+                      >
+                        Neu starten
+                      </button>
+                      
+                      <button
+                        onClick={() => setDownloadComplete(false)}
+                        className="px-4 py-2 bg-gray-300 text-gray-700 rounded-md hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors"
+                        aria-label="Später neu starten"
+                      >
+                        Später
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
           </div>
         </section>
 

frontend/src/components/WeekPlanner.tsx

@@ -105,6 +105,164 @@ export function WeekPlanner({ year, week, className = '' }: WeekPlannerProps) {
     }
   };
 
+  // Handle print preview
+  const handlePrintPreview = () => {
+    if (!weekPlan) return;
+
+    // Erstelle druckbares HTML
+    const printContent = `
+      <!DOCTYPE html>
+      <html lang="de">
+      <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Wochenplan KW ${week} ${year} - Druckvorschau</title>
+        <style>
+          * { margin: 0; padding: 0; box-sizing: border-box; }
+          body { 
+            font-family: Arial, sans-serif; 
+            font-size: 12px; 
+            line-height: 1.4; 
+            color: #000; 
+            background: white;
+            padding: 20px;
+          }
+          .header { 
+            text-align: center; 
+            margin-bottom: 30px; 
+            border-bottom: 2px solid #333;
+            padding-bottom: 15px;
+          }
+          .header h1 { 
+            font-size: 24px; 
+            margin-bottom: 5px; 
+          }
+          .week-grid { 
+            display: grid; 
+            grid-template-columns: repeat(5, 1fr); 
+            gap: 15px; 
+            margin-bottom: 30px;
+          }
+          .day-column { 
+            border: 1px solid #333; 
+            padding: 10px; 
+            min-height: 200px;
+          }
+          .day-header { 
+            font-weight: bold; 
+            font-size: 14px; 
+            margin-bottom: 10px; 
+            text-align: center;
+            border-bottom: 1px solid #666;
+            padding-bottom: 5px;
+          }
+          .meal-section { 
+            margin-bottom: 15px; 
+          }
+          .meal-title { 
+            font-weight: bold; 
+            margin-bottom: 5px; 
+            color: #333;
+          }
+          .meal-entry { 
+            margin-bottom: 3px; 
+            padding-left: 5px;
+          }
+          .special-day { 
+            background-color: #f5f5f5; 
+            padding: 5px; 
+            border-radius: 3px; 
+            margin-bottom: 5px;
+            text-align: center;
+            font-style: italic;
+          }
+          .footer {
+            margin-top: 30px;
+            padding-top: 15px;
+            border-top: 1px solid #333;
+            text-align: center;
+            font-size: 10px;
+            color: #666;
+          }
+          @media print {
+            body { padding: 10px; }
+            .no-print { display: none !important; }
+          }
+        </style>
+      </head>
+      <body>
+        <div class="header">
+          <h1>Wochenplan KW ${week} ${year}</h1>
+          <p>Erstellt am: ${new Date(weekPlan.created_at).toLocaleDateString('de-DE')}</p>
+        </div>
+        
+        <div class="week-grid">
+          ${weekDays.map((date, index) => {
+            const dayNumber = (index + 1) as WeekDay;
+            const dayName = ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag'][index];
+            const dateStr = date.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit' });
+            
+            const specialDay = getSpecialDay(dayNumber);
+            const fruehstueckEntries = getEntriesForDay(dayNumber, 'fruehstueck');
+            const vesperEntries = getEntriesForDay(dayNumber, 'vesper');
+            
+            return `
+              <div class="day-column">
+                <div class="day-header">
+                  ${dayName}<br>
+                  ${dateStr}
+                </div>
+                
+                ${specialDay ? `<div class="special-day">${specialDay.label || specialDay.type}</div>` : ''}
+                
+                <div class="meal-section">
+                  <div class="meal-title">Frühstück</div>
+                  ${fruehstueckEntries.map(entry => `
+                    <div class="meal-entry">
+                      ${entry.product_name || entry.custom_text || 'Eintrag'}
+                      ${entry.group_label ? ` (${entry.group_label})` : ''}
+                    </div>
+                  `).join('')}
+                  ${fruehstueckEntries.length === 0 ? '<div class="meal-entry">-</div>' : ''}
+                </div>
+                
+                <div class="meal-section">
+                  <div class="meal-title">Vesper</div>
+                  ${vesperEntries.map(entry => `
+                    <div class="meal-entry">
+                      ${entry.product_name || entry.custom_text || 'Eintrag'}
+                      ${entry.group_label ? ` (${entry.group_label})` : ''}
+                    </div>
+                  `).join('')}
+                  ${vesperEntries.length === 0 ? '<div class="meal-entry">-</div>' : ''}
+                </div>
+              </div>
+            `;
+          }).join('')}
+        </div>
+        
+        <div class="footer">
+          <p>Speiseplan erstellt mit Kita Speiseplan Software • ${new Date().toLocaleDateString('de-DE')}</p>
+        </div>
+        
+        <script>
+          // Auto-print when page loads
+          window.onload = function() {
+            setTimeout(() => window.print(), 500);
+          };
+        </script>
+      </body>
+      </html>
+    `;
+
+    // Öffne neues Fenster mit druckbarem Content
+    const printWindow = window.open('', '_blank');
+    if (printWindow) {
+      printWindow.document.write(printContent);
+      printWindow.document.close();
+    }
+  };
+
   // Loading state
   if (loading && !weekPlan) {
     return (
@@ -224,6 +382,17 @@ export function WeekPlanner({ year, week, className = '' }: WeekPlannerProps) {
               )}
               <span>{pdfExporting ? 'Erstelle PDF...' : 'PDF erstellen'}</span>
             </button>
+
+            {/* Print Preview Button */}
+            <button
+              onClick={handlePrintPreview}
+              disabled={loading}
+              className="flex items-center space-x-2 px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              aria-label="Druckvorschau des Wochenplans anzeigen"
+            >
+              <span>🖨️</span>
+              <span>Vorschau</span>
+            </button>
             
             <div className="flex items-center space-x-2 text-sm text-gray-600">
               <span>Erstellt: {new Date(weekPlan.created_at).toLocaleDateString('de-DE')}</span>