diff --git a/.idea/jsLibraryMappings.xml b/.idea/jsLibraryMappings.xml
new file mode 100644
index 0000000..d23208f
--- /dev/null
+++ b/.idea/jsLibraryMappings.xml
@@ -0,0 +1,6 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 4183d90..89044ef 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
"cors": "^2.8.5",
"express": "^4.19.2",
"formik": "^2.4.6",
+ "fs": "^0.0.1-security",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-scripts": "5.0.1",
@@ -9535,6 +9536,12 @@
"node": ">= 0.6"
}
},
+ "node_modules/fs": {
+ "version": "0.0.1-security",
+ "resolved": "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz",
+ "integrity": "sha512-3XY9e1pP0CVEUCdj5BmfIZxRBTSDycnbqhIOGec9QYtmVH2fbLpj86CFWkrNOkt/Fvty4KZG5lTglL9j/gJ87w==",
+ "license": "ISC"
+ },
"node_modules/fs-extra": {
"version": "10.1.0",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
diff --git a/package.json b/package.json
index 7ba69e4..185235f 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
"cors": "^2.8.5",
"express": "^4.19.2",
"formik": "^2.4.6",
+ "fs": "^0.0.1-security",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-scripts": "5.0.1",
diff --git a/spenden/2024-09-09T16-52-56.json b/spenden/2024-09-09T16-52-56.json
new file mode 100644
index 0000000..6b3a46d
--- /dev/null
+++ b/spenden/2024-09-09T16-52-56.json
@@ -0,0 +1,8 @@
+{
+ "kleidungsart": "jacke",
+ "krisengebiet": "syrien",
+ "lieferart": "Übergabe",
+ "abholadresse": "N/A",
+ "plz": "N/A",
+ "timestamp": "2024-09-09T16:52:56.753Z"
+}
\ No newline at end of file
diff --git a/spenden/2024-09-09T17-04-56.json b/spenden/2024-09-09T17-04-56.json
new file mode 100644
index 0000000..cde0ba8
--- /dev/null
+++ b/spenden/2024-09-09T17-04-56.json
@@ -0,0 +1,8 @@
+{
+ "kleidungsart": "tshirt",
+ "krisengebiet": "syrien",
+ "lieferart": "Übergabe",
+ "abholadresse": "N/A",
+ "plz": "N/A",
+ "timestamp": "2024-09-09T17:04:56.392Z"
+}
\ No newline at end of file
diff --git a/spenden/Teststrasse_4.json b/spenden/Teststrasse_4.json
new file mode 100644
index 0000000..7068bbb
--- /dev/null
+++ b/spenden/Teststrasse_4.json
@@ -0,0 +1,8 @@
+{
+ "kleidungsart": "jacke",
+ "krisengebiet": "ukraine",
+ "lieferart": "Übergabe",
+ "abholadresse": "Teststrasse 4",
+ "plz": "24159",
+ "timestamp": "2024-09-09T16:48:30.248Z"
+}
\ No newline at end of file
diff --git a/spenden/Teststrasse_44.json b/spenden/Teststrasse_44.json
new file mode 100644
index 0000000..0c451e8
--- /dev/null
+++ b/spenden/Teststrasse_44.json
@@ -0,0 +1,8 @@
+{
+ "kleidungsart": "hose",
+ "krisengebiet": "erdbeben",
+ "lieferart": "Abholung",
+ "abholadresse": "Teststrasse 44",
+ "plz": "24444",
+ "timestamp": "2024-09-09T17:05:45.685Z"
+}
\ No newline at end of file
diff --git a/src/components/ConfimationPage.js b/src/components/ConfimationPage.js
new file mode 100644
index 0000000..354bfea
--- /dev/null
+++ b/src/components/ConfimationPage.js
@@ -0,0 +1,51 @@
+import React from 'react';
+
+const ConfirmationPage = ({ spendenData }) => {
+ if (!spendenData) {
+ return
Lade Daten...
;
+ }
+
+ // Funktion zum Herunterladen der JSON-Datei
+ const downloadJSON = () => {
+ const jsonData = JSON.stringify(spendenData, null, 2); // Pretty-print JSON
+ const blob = new Blob([jsonData], { type: 'application/json' }); // Blob erstellen
+ const url = URL.createObjectURL(blob); // URL erstellen
+
+ // Link erstellen und den Download auslösen
+ const link = document.createElement('a');
+ link.href = url;
+ link.download = `spende_${spendenData.lieferart === 'Abholung' ? spendenData.abholadresse.replace(/\s+/g, '_') : 'uebergabe'}_${spendenData.timestamp}.json`;
+ link.click();
+
+ // URL-Objekt wieder freigeben
+ URL.revokeObjectURL(url);
+ };
+
+ return (
+
+
Spenden Bestätigung
+
Kleidungsart: {spendenData.kleidungsart}
+
Krisengebiet: {spendenData.krisengebiet}
+
Lieferart: {spendenData.lieferart}
+ {spendenData.lieferart === 'Abholung' && (
+ <>
+
Abholadresse: {spendenData.abholadresse}
+
PLZ: {spendenData.plz}
+ >
+ )}
+
Registrierungsdatum: {spendenData.timestamp}
+
Vielen Dank für Ihre Spende!
+
+
+
+
+
+ );
+};
+
+export default ConfirmationPage;
diff --git a/src/components/SpendenForm.js b/src/components/SpendenForm.js
index b91c511..86c8361 100644
--- a/src/components/SpendenForm.js
+++ b/src/components/SpendenForm.js
@@ -1,6 +1,7 @@
-import React from "react";
+import React, {useState} from "react";
import { Formik, Form, Field, ErrorMessage } from "formik";
import axios from "axios";
+import ConfirmationPage from "./ConfimationPage";
// Manuelle Validierung
const validateForm = (values) => {
@@ -34,17 +35,37 @@ const validateForm = (values) => {
};
const SpendenForm = () => {
+ const [isSubmitted, setIsSubmitted] = useState(false);
+ const [spendenData, setSpendenData] = useState(null);
const handleSubmit = (values) => {
axios
- .post("http://localhost:5000/api/spenden", values)
+ .post("http://localhost:2000/api/spenden", values)
.then((response) => {
- alert("Spende erfolgreich registriert!");
+ setSpendenData(response.data.data); // Speichere die Spenden-Daten
+ setIsSubmitted(true); // Zeige die Bestätigungsseite
})
.catch((error) => {
- console.error("Es gab ein Problem bei der Registrierung:", error);
+ if (error.response) {
+ // Die Anfrage wurde gemacht und der Server hat eine Antwort mit Statuscode ungleich 2xx zurückgegeben
+ console.error("Serverantwort:", error.response.data);
+ console.error("Status:", error.response.status);
+ alert(`Fehler bei der Registrierung: ${error.response.data.error || 'Unbekannter Fehler'}`);
+ } else if (error.request) {
+ // Die Anfrage wurde gemacht, aber es gab keine Antwort
+ console.error("Keine Antwort vom Server:", error.request);
+ alert("Es gab keine Antwort vom Server.");
+ } else {
+ // Es gab ein Problem beim Aufbau der Anfrage
+ console.error("Fehler beim Erstellen der Anfrage:", error.message);
+ alert("Ein Fehler ist aufgetreten: " + error.message);
+ }
});
};
+ if (isSubmitted) {
+ return ; // Bestätigungsseite anzeigen
+ }
+
return (
@@ -60,7 +81,18 @@ const SpendenForm = () => {
abholadresse: "",
plz: "",
}}
- validate={validateForm}
+ validate={values => {
+ const errors = {};
+ if (!values.kleidungsart) errors.kleidungsart = "Bitte wählen Sie eine Kleidungsart";
+ if (!values.krisengebiet) errors.krisengebiet = "Bitte wählen Sie ein Krisengebiet";
+ if (!values.lieferart) errors.lieferart = "Bitte wählen Sie eine Lieferart";
+ if (values.lieferart === "Abholung") {
+ if (!values.abholadresse) errors.abholadresse = "Bitte geben Sie Ihre Abholadresse an";
+ if (!values.plz) errors.plz = "Bitte geben Sie eine PLZ an";
+ else if (!/^\d{5}$/.test(values.plz)) errors.plz = "Die PLZ muss genau 5 Ziffern haben";
+ }
+ return errors;
+ }}
onSubmit={handleSubmit}
>
{({ values }) => (
diff --git a/src/start.js b/src/start.js
index f07ce4b..b85f998 100644
--- a/src/start.js
+++ b/src/start.js
@@ -1,27 +1,59 @@
const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');
+const fs = require('fs');
const app = express();
app.use(cors());
app.use(bodyParser.json());
-const PLZ_GESCHAEFTSSTELLE = "10115"; // Beispiel-PLZ
+const PLZ_GESCHAEFTSSTELLE = "24103"; // Beispiel-PLZ
app.post('/api/spenden', (req, res) => {
+ console.log("Anfrage-Daten:", req.body); // Überprüfe die gesendeten Daten
+
const { kleidungsart, krisengebiet, lieferart, abholadresse, plz } = req.body;
// PLZ-Validierung
if (lieferart === "Abholung" && plz.substring(0, 2) !== PLZ_GESCHAEFTSSTELLE.substring(0, 2)) {
- return res.status(400).json({ error: "Die Abholadresse liegt nicht im gleichen PLZ-Gebiet." });
+ return res.status(400).json({ error: "Die Abholadresse liegt nicht im gleichen PLZ-Gebiet. (24***)" });
}
// Spende registrieren (Hier könnte man Daten in einer DB speichern)
console.log("Spende registriert:", req.body);
- res.status(200).json({
- message: "Spende erfolgreich registriert!",
- data: req.body,
+ let filename;
+
+ if (lieferart === "Abholung") {
+ // Abholadresse als Dateiname verwenden
+ filename = `${abholadresse.replace(/\s+/g, '_')}.json`;
+ } else {
+ // Übergabe an Geschäftsstelle: Dateiname ist das aktuelle Datum im Format YYYYMMDD_HHmmss
+ const date = new Date();
+ const formattedDate = date.toISOString().replace(/:/g, '-').split('.')[0]; // Format: YYYY-MM-DDTHH-mm-ss
+ filename = `${formattedDate}.json`;
+ }
+
+ const spendenData = {
+ kleidungsart,
+ krisengebiet,
+ lieferart,
+ abholadresse: abholadresse || "N/A", // Falls keine Abholadresse vorhanden ist (Übergabe an Geschäftsstelle)
+ plz: plz || "N/A", // Falls keine PLZ vorhanden ist (Übergabe an Geschäftsstelle)
+ timestamp: new Date().toISOString(),
+ };
+
+ fs.writeFile(`./spenden/${filename}`, JSON.stringify(spendenData, null, 2), (err) => {
+ if (err) {
+ console.error("Fehler beim Erstellen der Datei:", err);
+ return res.status(500).json({ error: "Fehler beim Erstellen der Spenden-Datei." });
+ }
+
+ console.log(`Spende erfolgreich registriert und Datei ${filename} erstellt.`);
+ res.status(200).json({
+ message: "Spende erfolgreich registriert!",
+ data: spendenData,
+ });
});
});
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..48c27f8
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: ["./src/**/*.{js,jsx,ts,tsx}"],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+}