Rhaven/FSWeboberflaechen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add Logo + Header & Footer Confirmsite

Browse Source
This commit is contained in:
Michaela Grabke 2024-09-14 16:34:45 +02:00
parent c4abbc7ef7
commit 715d25a35e
8 changed files with 119 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.idea/misc.xml
View File

@ -1,4 +1,3 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ComposerSettings">
<execution />

8
spenden/2024-09-14T14-27-54.json Normal file
View File

@ -0,0 +1,8 @@
{
"kleidungsart": "hose",
"krisengebiet": "syrien",
"lieferart": "Übergabe",
"abholadresse": "N/A",
"plz": "N/A",
"timestamp": "2024-09-14T14:27:54.077Z"
}

8
spenden/2024-09-14T14-32-47.json Normal file
View File

@ -0,0 +1,8 @@
{
"kleidungsart": "tshirt",
"krisengebiet": "syrien",
"lieferart": "Übergabe",
"abholadresse": "N/A",
"plz": "N/A",
"timestamp": "2024-09-14T14:32:47.870Z"
}

8
spenden/2024-09-14T14-33-23.json Normal file
View File

@ -0,0 +1,8 @@
{
"kleidungsart": "hose",
"krisengebiet": "ukraine",
"lieferart": "Übergabe",
"abholadresse": "N/A",
"plz": "N/A",
"timestamp": "2024-09-14T14:33:23.627Z"
}

8
spenden/Teststrasse_4.json
View File

@ -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"
}

127
src/components/ConfimationPage.js
View File

@ -1,51 +1,96 @@
import React from 'react';
import Logo from '../tshirt.png';
const ConfirmationPage = ({ spendenData }) => {
if (!spendenData) {
return <p>Lade Daten...</p>;
}
const ConfirmationPage = ({spendenData}) => {
if (!spendenData) {
return <p>Lade Daten...</p>;
}
// 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 (
<div className="max-w-lg mx-auto p-6 bg-white shadow-lg rounded-lg">
<h2 className="text-2xl font-bold text-center mb-4">Spenden Bestätigung</h2>
<p><strong>Kleidungsart:</strong> {spendenData.kleidungsart}</p>
<p><strong>Krisengebiet:</strong> {spendenData.krisengebiet}</p>
<p><strong>Lieferart:</strong> {spendenData.lieferart}</p>
{spendenData.lieferart === 'Abholung' && (
<>
<p><strong>Abholadresse:</strong> {spendenData.abholadresse}</p>
<p><strong>PLZ:</strong> {spendenData.plz}</p>
</>
)}
<p><strong>Registrierungsdatum:</strong> {spendenData.timestamp}</p>
<p className="text-center mt-4"><strong>Vielen Dank für Ihre Spende!</strong></p>
return (
<div className="flex flex-col min-h-screen">
<header className="bg-purple-600 text-white p-4 text-center">
<div className="flex items-center justify-center">
<img src={Logo} alt="Logo" className="h-12 w-12 mr-4" />
<h1 className="text-3xl font-bold">Kleiderspende Registrierung</h1>
</div>
</header>
<main className="flex-grow p-4 bg-gray-100">
<div className="max-w-lg mx-auto p-6 bg-white shadow-lg rounded-lg">
<h2 className="text-2xl font-bold text-center mb-4">Spenden Bestätigung</h2>
<p>
<strong>Kleidungsart:</strong>
{
spendenData.kleidungsart
}</p>
<p>
<strong>Krisengebiet:</strong>
{
spendenData.krisengebiet
}</p>
<p>
<strong>Lieferart:</strong>
{
spendenData.lieferart
}</p>
{
spendenData.lieferart === 'Abholung' && (
<>
<p>
<strong>Abholadresse:</strong>
{
spendenData.abholadresse
}</p>
<p>
<strong>PLZ:</strong>
{
spendenData.plz
}</p>
</>
)
}
<p>
<strong>Registrierungsdatum:</strong>
{
spendenData.timestamp
}</p>
<p className="text-center mt-4">
<strong>Vielen Dank für Ihre Spende!</strong>
</p>
<div className="text-center mt-6">
<button
onClick={downloadJSON}
className="bg-purple-600 text-white px-4 py-2 rounded-md hover:bg-purple-800 focus:outline-none focus:ring-2 focus:ring-purple-500"
>
Bestätigungs-Datei herunterladen
</button>
</div>
</div>
);
<div className="text-center mt-6">
<button onClick={downloadJSON}
className="bg-purple-600 text-white px-4 py-2 rounded-md hover:bg-purple-800 focus:outline-none focus:ring-2 focus:ring-purple-500">
Bestätigungs-Datei herunterladen
</button>
</div>
</div>
</main>
<footer className="bg-gray-800 text-white text-center p-4">
<p>&copy; 2024 Lokaler Verein. Alle Rechte vorbehalten.</p>
</footer>
</div>
);
};
export default ConfirmationPage;

6
src/components/SpendenForm.js
View File

@ -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 (
<div className="flex flex-col min-h-screen">
<header className="bg-purple-600 text-white p-4 text-center">
<h1 className="text-3xl font-bold">Kleiderspende Registrierung</h1>
<div className="flex items-center justify-center">
<img src={Logo} alt="Logo" className="h-12 w-12 mr-4" />
<h1 className="text-3xl font-bold">Kleiderspende Registrierung</h1>
</div>
</header>
<main className="flex-grow p-4 bg-gray-100">

BIN
src/tshirt.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 253 KiB