diff --git a/.idea/misc.xml b/.idea/misc.xml index 1342930..9c9b300 100644 --- a/.idea/misc.xml +++ b/.idea/misc.xml @@ -1,4 +1,3 @@ - diff --git a/spenden/2024-09-14T14-27-54.json b/spenden/2024-09-14T14-27-54.json new file mode 100644 index 0000000..3faa865 --- /dev/null +++ b/spenden/2024-09-14T14-27-54.json @@ -0,0 +1,8 @@ +{ + "kleidungsart": "hose", + "krisengebiet": "syrien", + "lieferart": "Übergabe", + "abholadresse": "N/A", + "plz": "N/A", + "timestamp": "2024-09-14T14:27:54.077Z" +} \ No newline at end of file diff --git a/spenden/2024-09-14T14-32-47.json b/spenden/2024-09-14T14-32-47.json new file mode 100644 index 0000000..d58d52d --- /dev/null +++ b/spenden/2024-09-14T14-32-47.json @@ -0,0 +1,8 @@ +{ + "kleidungsart": "tshirt", + "krisengebiet": "syrien", + "lieferart": "Übergabe", + "abholadresse": "N/A", + "plz": "N/A", + "timestamp": "2024-09-14T14:32:47.870Z" +} \ No newline at end of file diff --git a/spenden/2024-09-14T14-33-23.json b/spenden/2024-09-14T14-33-23.json new file mode 100644 index 0000000..3955eeb --- /dev/null +++ b/spenden/2024-09-14T14-33-23.json @@ -0,0 +1,8 @@ +{ + "kleidungsart": "hose", + "krisengebiet": "ukraine", + "lieferart": "Übergabe", + "abholadresse": "N/A", + "plz": "N/A", + "timestamp": "2024-09-14T14:33:23.627Z" +} \ No newline at end of file diff --git a/spenden/Teststrasse_4.json b/spenden/Teststrasse_4.json index 7068bbb..bf2a5e3 100644 --- a/spenden/Teststrasse_4.json +++ b/spenden/Teststrasse_4.json @@ -1,8 +1,8 @@ { - "kleidungsart": "jacke", - "krisengebiet": "ukraine", - "lieferart": "Übergabe", + "kleidungsart": "hose", + "krisengebiet": "erdbeben", + "lieferart": "Abholung", "abholadresse": "Teststrasse 4", "plz": "24159", - "timestamp": "2024-09-09T16:48:30.248Z" + "timestamp": "2024-09-12T09:02:11.386Z" } \ No newline at end of file diff --git a/src/components/ConfimationPage.js b/src/components/ConfimationPage.js index 354bfea..aec06fb 100644 --- a/src/components/ConfimationPage.js +++ b/src/components/ConfimationPage.js @@ -1,51 +1,96 @@ import React from 'react'; +import Logo from '../tshirt.png'; -const ConfirmationPage = ({ spendenData }) => { - if (!spendenData) { - return

Lade Daten...

; - } +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 + // 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(); + // 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); - }; + // 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!

+ return ( +
+
+
+ Logo +

Kleiderspende Registrierung

+
+
+
+
+

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! +

-
- -
-
- ); +
+ +
+
+ +
+

© 2024 Lokaler Verein. Alle Rechte vorbehalten.

+
+
+ ); }; export default ConfirmationPage; diff --git a/src/components/SpendenForm.js b/src/components/SpendenForm.js index d53fcea..dcb21b2 100644 --- a/src/components/SpendenForm.js +++ b/src/components/SpendenForm.js @@ -2,6 +2,7 @@ import React, {useState} from "react"; import { Formik, Form, Field, ErrorMessage } from "formik"; import axios from "axios"; import ConfirmationPage from "./ConfimationPage"; +import Logo from '../tshirt.png'; const SpendenForm = () => { const [isSubmitted, setIsSubmitted] = useState(false); @@ -38,7 +39,10 @@ const SpendenForm = () => { return (
-

Kleiderspende Registrierung

+
+ Logo +

Kleiderspende Registrierung

+
diff --git a/src/tshirt.png b/src/tshirt.png new file mode 100644 index 0000000..5480552 Binary files /dev/null and b/src/tshirt.png differ