Liste mit dazu

frontend/src/App.jsx

@@ -25,6 +25,20 @@ function App() {
   const [editingAppointment, setEditingAppointment] = useState(null); 
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [appointmentToDeleteId, setAppointmentToDeleteId] = useState(null);
+  
+  // Helfer: Start des heutigen Tages für Filter "aktuelle Termine"
+  const startOfToday = new Date();
+  startOfToday.setHours(0, 0, 0, 0);
+  
+  // Gefilterte Liste: nur nicht erledigte Termine ab heute
+  const currentAppointments = appointments
+    .filter(a => !a.erledigt && a.termin >= startOfToday)
+    .sort((a, b) => a.termin - b.termin);
+  
+  // Drucken triggern
+  const handlePrintCurrent = () => {
+    window.print();
+  };
 
   // NEU: Lädt Termine vom Backend beim Start
   useEffect(() => {
@@ -188,29 +202,68 @@ function App() {
 
   return (
     <div className="app-container">
-      {/* ... (Header und Formular-Einbindung) ... */}
+      <div className="screen-only">
-      <AppointmentForm 
+        {/* Druck-Button für aktuelle Termine */}
-        onAddAppointment={addAppointment} 
+        <div className="print-controls">
-        editingAppointment={editingAppointment}
+          <button className="print-button" onClick={handlePrintCurrent}>
-        onUpdateAppointment={updateAppointment}
+            Aktuelle Termine drucken
-        onCancelEdit={() => setEditingAppointment(null)}
+          </button>
-      />
+        </div>
-      {/* ... */}
+
-      <AppointmentList 
+        {/* Formular */}
-        appointments={appointments} 
+        <AppointmentForm 
-        onToggleDone={toggleDone} 
+          onAddAppointment={addAppointment} 
-        onEdit={(app) => setEditingAppointment(app)}
+          editingAppointment={editingAppointment}
-        onDelete={openDeleteModal}
+          onUpdateAppointment={updateAppointment}
+          onCancelEdit={() => setEditingAppointment(null)}
         />
+
+        {/* Gesamte Liste */}
+        <AppointmentList 
+          appointments={appointments} 
+          onToggleDone={toggleDone} 
+          onEdit={(app) => setEditingAppointment(app)}
+          onDelete={openDeleteModal}
+        />
+
         {/* NEU: MODAL KOMPONENTE */}
-      <ConfirmationModal
+        <ConfirmationModal
-        isOpen={isModalOpen}
+          isOpen={isModalOpen}
-        title="Termin löschen bestätigen"
+          title="Termin löschen bestätigen"
-        message="Möchten Sie diesen Termin wirklich unwiderruflich löschen? Diese Aktion kann nicht rückgängig gemacht werden."
+          message="Möchten Sie diesen Termin wirklich unwiderruflich löschen? Diese Aktion kann nicht rückgängig gemacht werden."
-        onConfirm={handleConfirmDelete}
+          onConfirm={handleConfirmDelete}
-        onCancel={handleCancelDelete}
+          onCancel={handleCancelDelete}
-      />
+        />
-      {/* Debug Output kann nun entfernt werden */}
+      </div>
+
+      {/* Druckansicht: nur aktuelle (offene) Termine ab heute */}
+      <div className="print-only">
+        <h1>Aktuelle Arzt-Termine</h1>
+        {currentAppointments.length === 0 ? (
+          <p>Keine aktuellen Termine vorhanden.</p>
+        ) : (
+          <table className="print-table">
+            <thead>
+              <tr>
+                <th>Arzt</th>
+                <th>Fachrichtung</th>
+                <th>Datum</th>
+                <th>Bemerkungen</th>
+              </tr>
+            </thead>
+            <tbody>
+              {currentAppointments.map(app => (
+                <tr key={app.id}>
+                  <td>{app.arztName}</td>
+                  <td>{app.arztArt || ''}</td>
+                  <td>{app.termin.toLocaleString('de-DE')}</td>
+                  <td>{app.bemerkungen || ''}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </div>
     </div>
   );
 }

frontend/src/AppStyles.css

@@ -207,4 +207,72 @@ body {
 
 .cancel-button:hover {
     background-color: #c82333;
+}
+
+/* Druck-Funktionalität */
+.print-controls {
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: 20px;
+}
+
+.print-button {
+    background-color: #007bff;
+    color: white;
+    padding: 10px 16px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 14px;
+}
+
+.print-button:hover {
+    background-color: #0069d9;
+}
+
+/* Standard: Druckbereich ausblenden, Bildschirm-Inhalte anzeigen */
+.print-only {
+    display: none;
+}
+
+@media print {
+    /* Bildschirm-UI ausblenden */
+    .screen-only, .screen-only * {
+        display: none !important;
+    }
+
+    /* Nur Druckbereich anzeigen */
+    .print-only {
+        display: block !important;
+    }
+
+    body {
+        background: #ffffff;
+        margin: 10mm;
+        color: #000;
+    }
+
+    .print-only h1 {
+        margin-top: 0;
+        font-size: 20px;
+    }
+
+    .print-table {
+        width: 100%;
+        border-collapse: collapse;
+        font-size: 12px;
+    }
+
+    .print-table th,
+    .print-table td {
+        border: 1px solid #000;
+        padding: 6px;
+        text-align: left;
+    }
+
+    .print-table thead th {
+        background: #eee;
+        -webkit-print-color-adjust: exact;
+        print-color-adjust: exact;
+    }
 }