[32788f42] feat(list-generator): create React app and FastAPI backend for PDF list generation

2026-03-18 19:20:59 +00:00
parent 16cd760dac
commit 21c8ff66fd
30 changed files with 4525 additions and 0 deletions
--- a/list-generator/frontend/src/App.tsx
+++ b/list-generator/frontend/src/App.tsx
@@ -0,0 +1,83 @@
+import { useState } from "react";
+import "./App.css";
+
+function App() {
+  const [institution, setInstitution] = useState("");
+  const [dateInfo, setDateInfo] = useState("");
+  const [listType, setListType] = useState("k");
+  const [studentsFile, setStudentsFile] = useState<File | null>(null);
+  const [familiesFile, setFamiliesFile] = useState<File | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleGenerate = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!studentsFile) return alert("Bitte Namensliste (CSV) hochladen!");
+    setIsLoading(true);
+
+    const formData = new FormData();
+    formData.append("institution", institution);
+    formData.append("date_info", dateInfo);
+    formData.append("list_type", listType);
+    formData.append("students_file", studentsFile);
+    if (familiesFile) formData.append("families_file", familiesFile);
+
+    try {
+      const API_URL = "";
+      const response = await fetch(`${API_URL}/api/generate-list`, {
+        method: "POST",
+        body: formData,
+      });
+
+      if (!response.ok) throw new Error("Fehler bei der Generierung");
+
+      const blob = await response.blob();
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `Listen_${institution.replace(/\s+/g, "_")}_${listType}.pdf`;
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+    } catch (err) {
+      alert("Es gab einen Fehler: " + err);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-xl mx-auto">
+        <div className="bg-white py-8 px-6 shadow rounded-lg sm:px-10">
+          <div className="mb-6">
+            <h1 className="text-2xl font-bold text-gray-900">Listentool</h1>
+            <p className="mt-1 text-sm text-gray-500">Generiere Fotoauftragslisten aus CSV Dateien.</p>
+          </div>
+
+          <form className="space-y-6" onSubmit={handleGenerate}>
+            <div>
+              <label className="block text-sm font-medium text-gray-700">Einrichtung / Event</label>
+              <input type="text" required value={institution} onChange={(e) => setInstitution(e.target.value)} placeholder="Grundschule Klettham, Erding" className="mt-1 block w-full border-gray-300 rounded-md shadow-sm border p-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700">Datum (Anzeige auf PDF)</label>
+              <input type="text" required value={dateInfo} onChange={(e) => setDateInfo(e.target.value)} placeholder="07.+09.07.2025" className="mt-1 block w-full border-gray-300 border p-2 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700">Namensliste (CSV)</label>
+              <input type="file" required accept=".csv" onChange={(e) => setStudentsFile(e.target.files?.[0] || null)} className="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100" />
+            </div>
+
+            <button type="submit" disabled={isLoading} className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50">
+              {isLoading ? "Generiere..." : "PDF Generieren & Herunterladen"}
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default App;