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
This commit is contained in:
clawd
@@ -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}
|
||||
className="btn-primary"
|
||||
onClick={handleDownloadUpdate}
|
||||
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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user