From 3fce9ad75004f7fbfe14f80a6368f7d6fd0bf266 Mon Sep 17 00:00:00 2001 From: Rhaven Date: Mon, 9 Sep 2024 19:12:55 +0200 Subject: [PATCH] add confirm site + add save JSON + add download JSON --- .idea/jsLibraryMappings.xml | 6 ++++ package-lock.json | 7 +++++ package.json | 1 + spenden/2024-09-09T16-52-56.json | 8 +++++ spenden/2024-09-09T17-04-56.json | 8 +++++ spenden/Teststrasse_4.json | 8 +++++ spenden/Teststrasse_44.json | 8 +++++ src/components/ConfimationPage.js | 51 +++++++++++++++++++++++++++++++ src/components/SpendenForm.js | 42 ++++++++++++++++++++++--- src/start.js | 42 ++++++++++++++++++++++--- tailwind.config.js | 8 +++++ 11 files changed, 179 insertions(+), 10 deletions(-) create mode 100644 .idea/jsLibraryMappings.xml create mode 100644 spenden/2024-09-09T16-52-56.json create mode 100644 spenden/2024-09-09T17-04-56.json create mode 100644 spenden/Teststrasse_4.json create mode 100644 spenden/Teststrasse_44.json create mode 100644 src/components/ConfimationPage.js create mode 100644 tailwind.config.js 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: [], +}