From 5a4b4a1db1fb18f938fdd1ba2fff094703d417f7 Mon Sep 17 00:00:00 2001 From: rxf Date: Mon, 27 Oct 2025 14:21:57 +0100 Subject: [PATCH] =?UTF-8?q?ein=20st=C3=BCck=20weiter=20-=20noch=20lange=20?= =?UTF-8?q?nicht=20fertig=20!?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.css | 10 +- src/App.css_claude | 103 ------------- src/App.jsx | 61 +++++--- src/App.jsx_claude | 202 ------------------------- src/FormContext.jsx | 59 ++++++++ src/components/BesucherBar.jsx | 58 +++++-- src/components/FandStattVer.jsx | 6 +- src/components/FandStattVer.jsx_claude | 55 ------- src/components/FormContext.jsx | 34 ----- src/components/Spende.jsx | 59 +++----- src/main.jsx | 4 +- 11 files changed, 176 insertions(+), 475 deletions(-) delete mode 100644 src/App.css_claude delete mode 100644 src/App.jsx_claude create mode 100644 src/FormContext.jsx delete mode 100644 src/components/FandStattVer.jsx_claude delete mode 100644 src/components/FormContext.jsx diff --git a/src/App.css b/src/App.css index 622ee60..88ffeb0 100644 --- a/src/App.css +++ b/src/App.css @@ -49,12 +49,20 @@ section { margin-left: 2em; } -.selspende { +.radiogroup { display: flex; flex-direction: column; gap: 10px; } +.selspende { + display: flex; + align-items: center; +} + +.spendeok { + margin-left: 2em; +} .bemerkdiv { display: flex; align-items: center; diff --git a/src/App.css_claude b/src/App.css_claude deleted file mode 100644 index 36791d3..0000000 --- a/src/App.css_claude +++ /dev/null @@ -1,103 +0,0 @@ -.App { - max-width: 600px; - margin: 50px auto; - padding: 20px; - font-family: Arial, sans-serif; -} - -h1 { - text-align: center; - color: #333; -} - -.progress { - text-align: center; - margin-bottom: 20px; - padding: 10px; - background-color: #e9ecef; - border-radius: 5px; - font-weight: bold; - color: #495057; -} - -.component-box { - background-color: #f8f9fa; - border: 2px solid #dee2e6; - border-radius: 10px; - padding: 30px; - margin-bottom: 20px; - box-shadow: 0 2px 4px rgba(0,0,0,0.1); - transition: all 0.3s ease; -} - -.component-box.completed { - background-color: #e8f5e9; - border-color: #4caf50; - opacity: 0.85; -} - -.completed-marker { - color: #4caf50; - font-weight: bold; - margin-top: 15px; - padding: 10px; - background-color: rgba(76, 175, 80, 0.1); - border-radius: 5px; - text-align: center; -} - -.component-box h2 { - margin-top: 0; - color: #0056b3; -} - -.radio-group { - margin: 20px 0; - display: flex; - gap: 20px; -} - -.radio-group label { - display: flex; - align-items: center; - gap: 8px; - cursor: pointer; - font-size: 16px; -} - -.radio-group input[type="radio"] { - width: 18px; - height: 18px; - cursor: pointer; -} - -button { - background-color: #0056b3; - color: white; - border: none; - padding: 12px 30px; - font-size: 16px; - border-radius: 5px; - cursor: pointer; - transition: background-color 0.3s; - margin-top: 15px; -} - -button:hover:not(:disabled) { - background-color: #004494; -} - -button:disabled { - background-color: #6c757d; - cursor: not-allowed; - opacity: 0.6; -} - -.back-button { - background-color: #6c757d; - margin-top: 10px; -} - -.back-button:hover { - background-color: #5a6268; -} \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index df8193a..c4cf018 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,5 +1,5 @@ import { useState } from 'react' -import { FormProvider } from './components/FormContext.jsx' +import { FormProvider, useFormData } from './FormContext' import './App.css' import FandStattVer from './components/FandStattVer.jsx' import BesucherBar from './components/BesucherBar.jsx' @@ -10,22 +10,20 @@ import LastButtons from './components/LastButtons.jsx' import NeinPfad from './components/NeinPfad.jsx' -function App() { +function AppContent() { const datum = "2025-10-23" const name = "Meiehofer" const version = "1.0.0" const vdate = "2025-11-23" //const isBar = true - // let withBar = null - // if (isBar) { - // withBar = - // } - // States const [schritt, setSchritt] = useState(0) const [pfad, setPfad] = useState('') + // Hole formData aus dem Context + const { formData } = useFormData() + // Callbacks: const handleFandStattVerNext = (auswahl) => { @@ -34,7 +32,7 @@ function App() { } const handleNext = () => { - setSchritt(schritt + 1) + setSchritt((schritt) => schritt + 1) } // Welche Komponeneten werden angezeigt: @@ -55,31 +53,52 @@ function App() { components.push( 1} /> ) } + // Schritt 2: Spende if (schritt >= 2) { components.push( 2} /> ) } + // Schritt 3: Betrag der Spende (nur bei Bar-Spende) + if ((schritt >= 3) && (formData.spendenArt === 'bar')) { + + components.push( 3} /> + ) + } + + + // Schritt 3: Betrag der Spende (nur bei Bar-Spende) + if (schritt >= 4) { + components.push( 4} /> + ) + } + + } return components } return ( - -
-
-

- Sonderführung vom
{datum} -

-

für {name}

-

Nachbearbeitung

-
- // Alle Komponenten der Reihe nach anzeigen - {renderCoponents().map(component => component)} - - +
+
+

+ Sonderführung vom
{datum} +

+

für {name}

+

Nachbearbeitung

+ {renderCoponents().map(component => component)} + + +
+ ) +} + +function App() { + return ( + + ) } diff --git a/src/App.jsx_claude b/src/App.jsx_claude deleted file mode 100644 index 342fba3..0000000 --- a/src/App.jsx_claude +++ /dev/null @@ -1,202 +0,0 @@ -import { useState } from 'react' -import './App.css' -import FandStattVer from './components/FandStattVer.jsx' -import BesucherBar from './components/BesucherBar.jsx' -import Spende from './components/Spende.jsx' -import LastLine from './components/LastLine.jsx' -import Bemerkungen from './components/Bemerkungen.jsx' -import Fertig from './components/Fertig.jsx' -import LastButtons from './components/LastButtons.jsx' -import Verschoben from "./components/Verschoben.jsx" -import NeinPfad from './components/NeinPfad.jsx' - -function App() { - const datum = "2025-10-23" - const name = "Meiehofer" - const version = "1.0.0" - const vdate = "2025-11-23" - const isBar = true - - // State für die Navigation - const [schritt, setSchritt] = useState(0) - const [pfad, setPfad] = useState('') // 'ja' oder 'nein' - - // Callback für FandStattVer, wenn OK geklickt wird - const handleFandStattVerNext = (auswahl) => { - setPfad(auswahl) - setSchritt(1) - } - - // Callback für alle anderen Komponenten - const handleNext = () => { - setSchritt(schritt + 1) - } - - // Bestimme, welche Komponenten angezeigt werden sollen - const renderComponents = () => { - const components = [] - - // Schritt 0: FandStattVer (immer zuerst) - components.push( - 0} - /> - ) - - // Wenn noch bei Schritt 0, zeige nur FandStattVer - if (schritt === 0) { - return components - } - - // Pfad "JA" - if (pfad === 'ja') { - // Schritt 1: BesucherBar (Anzahl) - if (schritt >= 1) { - components.push( - 1} - /> - ) - } - - // Schritt 2: Spende - if (schritt >= 2) { - components.push( - 2} - /> - ) - } - - // Schritt 3: BesucherBar (Barspende) - nur wenn isBar true - if (schritt >= 3 && isBar) { - components.push( - 3} - /> - ) - } - - // Schritt 4: Bemerkungen - if (schritt >= 4) { - components.push( - 4} - /> - ) - } - - // Schritt 5: LastButtons - if (schritt >= 5) { - components.push( - 5} - /> - ) - } - - // Schritt 6: Fertig - if (schritt >= 6) { - components.push( - - ) - } - } - - // Pfad "NEIN" - if (pfad === 'nein') { - // Schritt 1: Verschoben - if (schritt >= 1) { - components.push( - 1} - /> - ) - } - - // Schritt 2: NeinPfad - if (schritt >= 2) { - components.push( - 2} - /> - ) - } - - // Schritt 3: Bemerkungen - if (schritt >= 3) { - components.push( - 3} - /> - ) - } - - // Schritt 4: LastButtons - if (schritt >= 4) { - components.push( - 4} - /> - ) - } - - // Schritt 5: Fertig - if (schritt >= 5) { - components.push( - - ) - } - } - - return components - } - - return ( - <> -
-
-

- Sonderführung vom
{datum} -

-

für {name}

-

Nachbearbeitung

-
- - {/* Zeige alle Komponenten bis zum aktuellen Schritt */} - {renderComponents().map(component => component)} - - -
- - ) -} - -export default App diff --git a/src/FormContext.jsx b/src/FormContext.jsx new file mode 100644 index 0000000..77ce06c --- /dev/null +++ b/src/FormContext.jsx @@ -0,0 +1,59 @@ +// ======================================== +// FormContext.jsx - Globaler State für alle Formulardaten +// ======================================== +import { createContext, useContext, useState } from 'react' + +const FormContext = createContext() + +export function FormProvider({ children }) { +// console.log('🚀 FormProvider initialisiert') + + const [formData, setFormData] = useState({ + stattgefunden: '', + besucherAnzahl: '', + spendenArt: '', + barspende: '', + bemerkungen: '', + neuertermin: '1900-01-01' + // Weitere Felder können hier hinzugefügt werden + }) + + const updateFormData = (field, value) => { + //console.log('📝 FormContext UPDATE:', field, '=', value) + setFormData(prev => { + const newData = { + ...prev, + [field]: value + } + //console.log('📊 FormContext NEU:', newData) + return newData + }) + } + + const resetFormData = () => { + //console.log('🔄 FormContext RESET') + + setFormData({ + stattgefunden: '', + besucherAnzahl: '', + spendenArt: '', + barspende: '', + bemerkungen: '', + neuertermin: '1900-01-01' + }) + } + + return ( + + {children} + + ) +} + +export function useFormData() { + const context = useContext(FormContext) + if (!context) { + throw new Error('useFormData muss innerhalb von FormProvider verwendet werden. Stelle sicher, dass deine Komponente von umschlossen ist.') + } + return context +} diff --git a/src/components/BesucherBar.jsx b/src/components/BesucherBar.jsx index b76714a..5889456 100644 --- a/src/components/BesucherBar.jsx +++ b/src/components/BesucherBar.jsx @@ -1,26 +1,52 @@ -import { useState, useSyncExternalStore } from 'react' +import { useState, useEffect } from 'react' +import { useFormData } from '../FormContext' -export default function BesucherBar({title, euro, onNext, isCompleted}) { +export default function BesucherBar({ title, euro, onNext, isCompleted }) { -const [wert, setWert] = useState('') -const handleOK = () => { - if (wert) { - onNext() - } else { - alert('Bitte einen Wert eingeben') + const { formData, updateFormData } = useFormData() + + // Bestimme das Feld basierend auf dem Titel + const fieldName = title.includes('Barspende') ? 'barspende' : 'besucherAnzahl' + + // DEBUG: Zeige formData beim Laden + console.log('🔍 BesucherBar geladen:', title) + console.log('📊 Aktuelles formData:', formData) + console.log('🔑 Verwende Feld:', fieldName) + console.log('💾 Gespeicherter Wert:', formData[fieldName]) + + + + const [wert, setWert] = useState(formData[fieldName] || '') + + // DEBUG: Zeige State-Änderungen + useEffect(() => { + console.log('✏️ Wert geändert für', fieldName, ':', wert) + }, [wert, fieldName]) + + + const handleOK = () => { + if (wert) { + updateFormData(fieldName, wert) + + console.log('✅ Gespeichert! Neues formData:', formData) + + + onNext() + } else { + alert('Bitte einen Wert eingeben') + } } -} -return( + return (

{title}:

- setWert(e.target.value)} - placeholder={euro ? 'Betrag in Euro' : 'Anzahl'} disabled ={isCompleted} - /> -   {euro} - + setWert(e.target.value)} + placeholder={euro ? 'Betrag in Euro' : 'Anzahl'} disabled={isCompleted} + /> +   {euro} +
-
+ ) } diff --git a/src/components/FandStattVer.jsx b/src/components/FandStattVer.jsx index 31aeb7f..b1b21bf 100644 --- a/src/components/FandStattVer.jsx +++ b/src/components/FandStattVer.jsx @@ -1,12 +1,12 @@ import { useState } from 'react' -import { useFormData } from './FormContext.jsx' +import { useFormData } from '../FormContext' -export default function FandStattVer({left, right, onNext, isCompleted}) { +export default function FandStattVer({left, right, onNext}) { const { formData, updateFormData } = useFormData() const [auswahl, setAuswahl] = useState(formData.stattgefunden || '') const handleOK = () => { if(!auswahl) { - alert('Bitte ja/nein wäölen') + alert('Bitte ja/nein wählen') return } updateFormData('stattgefunden', auswahl) diff --git a/src/components/FandStattVer.jsx_claude b/src/components/FandStattVer.jsx_claude deleted file mode 100644 index 9914d0c..0000000 --- a/src/components/FandStattVer.jsx_claude +++ /dev/null @@ -1,55 +0,0 @@ -import { useState } from 'react' - -function FandStattVer({ left, right, onNext, isCompleted }) { - const [auswahl, setAuswahl] = useState('') - - const handleOK = () => { - if (auswahl) { - // Rufe onNext mit der Auswahl ('ja' oder 'nein') auf - onNext(auswahl) - } else { - alert('Bitte eine Option auswählen') - } - } - - return ( -
-

Fand die Veranstaltung statt?

- -
- - - -
- - {!isCompleted && ( - - )} - -
- ) -} - -export default FandStattVer diff --git a/src/components/FormContext.jsx b/src/components/FormContext.jsx deleted file mode 100644 index f402e29..0000000 --- a/src/components/FormContext.jsx +++ /dev/null @@ -1,34 +0,0 @@ -// ======================================== -// FormContext.jsx - Globaler State für alle Formulardaten -// ======================================== -import { createContext, useContext, useState } from 'react' - -const FormContext = createContext() - -export function FormProvider({ children }) { - const [formData, setFormData] = useState({ - stattgefunden: '', - anzahl: '', - spende: '', - betrag: '', - bemerkungen: '', - neuertermin: '' - }) - - const updateFormData = (field, value) => { - setFormData(prev => ({ - ...prev, - [field]: value - })) - } - - return ( - - {children} - - ) -} - -export function useFormData() { - return useContext(FormContext) -} diff --git a/src/components/Spende.jsx b/src/components/Spende.jsx index 1e8ec48..6089b1d 100644 --- a/src/components/Spende.jsx +++ b/src/components/Spende.jsx @@ -1,67 +1,50 @@ import { useState } from 'react' -import { useFormData } from './FormContext' +import { useFormData } from '../FormContext' export default function Spende({ onNext, isCompleted }) { - const { formData, updateFormData } = useFormData() - const [spende, setSpende] = useState(formData.spendenArt || '') - const [betrag, setBetrag] = useState(formData.spendenBetrag || '') - const handleOK = () => { - if (!spende) { - alert('Bitte wähle eine Spendenart aus') - return - } - updateFormData('spende', spende) - updateFormData('betrag', betrag) - onNext() + const { formData, updateFormData } = useFormData() + // Initialisiere State mit dem Wert aus formData (falls vorhanden) + const [spendenArt, setSpendenArt] = useState(formData.spendenArt || '') + + const handleRadioChange = (e) => { + const art = e.target.value + setSpendenArt(art) + updateFormData('spendenArt', art) + if (art !== 'bar') { + onNext() + } } return (

Eine Spende

-
+
- - {(spende === 'bar') && !isCompleted && ( -
- - setBetrag(e.target.value)} - placeholder='0' - step='1' - disabled={isCompleted} - /> -
- )} - {!isCompleted && ( - - )}
) } \ No newline at end of file diff --git a/src/main.jsx b/src/main.jsx index b9a1a6d..2ac0028 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -4,7 +4,7 @@ import './index.css' import App from './App.jsx' createRoot(document.getElementById('root')).render( - +// - , +// , )