admin/beoanswer_react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ein stück weiter - noch lange nicht fertig !

Browse Source
This commit is contained in:
rxf
2025-10-27 14:21:57 +01:00
parent e3af52a2a0
commit 5a4b4a1db1
11 changed files with 176 additions and 475 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/App.css
View File

@@ -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;

103
src/App.css_claude
View File

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

61
src/App.jsx
View File

@@ -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 = <BesucherBar title="Höhe der Barspende" euro="€" />
// }
// 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(<BesucherBar key='besucher' title='Besucher-Anzahl:' eureo='' onNext={handleNext} isComplete={schritt > 1} />
)
}
// Schritt 2: Spende
if (schritt >= 2) {
components.push(<Spende key='spende' onNext={handleNext} isComplete={schritt > 2} />
)
}
// Schritt 3: Betrag der Spende (nur bei Bar-Spende)
if ((schritt >= 3) && (formData.spendenArt === 'bar')) {
components.push(<BesucherBar key='betrag' title='Höhe der Barspende:' euro='€' onNext={handleNext} isComplete={schritt > 3} />
)
}
// Schritt 3: Betrag der Spende (nur bei Bar-Spende)
if (schritt >= 4) {
components.push(<Bemerkungen key='bemerkungen' onNext={handleNext} isComplete={schritt > 4} />
)
}
}
return components
}
return (
<FormProvider>
<div className="wrapper">
<div>
<h2 className="topline">
Sonderführung vom <br className="umbruch" />{datum}
</h2>
<h4>für {name}</h4>
<h2 className="nachbearbeitung">Nachbearbeitung</h2>
</div>
// Alle Komponenten der Reihe nach anzeigen
{renderCoponents().map(component => component)}
<LastButtons />
<LastLine version={version} vdate={vdate} />
<div className="wrapper">
<div>
<h2 className="topline">
Sonderführung vom <br className="umbruch" />{datum}
</h2>
<h4>für {name}</h4>
<h2 className="nachbearbeitung">Nachbearbeitung</h2>
</div>
{renderCoponents().map(component => component)}
<LastButtons />
<LastLine version={version} vdate={vdate} />
</div>
)
}
function App() {
return (
<FormProvider>
<AppContent />
</FormProvider>
)
}

202
src/App.jsx_claude
View File

@@ -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(
<FandStattVer
key="fandstatt"
left='ja'
right='nein'
onNext={handleFandStattVerNext}
isCompleted={schritt > 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(
<BesucherBar
key="besucher"
title="Besucher-Anzahl"
euro=""
onNext={handleNext}
isCompleted={schritt > 1}
/>
)
}
// Schritt 2: Spende
if (schritt >= 2) {
components.push(
<Spende
key="spende"
onNext={handleNext}
isCompleted={schritt > 2}
/>
)
}
// Schritt 3: BesucherBar (Barspende) - nur wenn isBar true
if (schritt >= 3 && isBar) {
components.push(
<BesucherBar
key="barspende"
title="Höhe der Barspende"
euro="€"
onNext={handleNext}
isCompleted={schritt > 3}
/>
)
}
// Schritt 4: Bemerkungen
if (schritt >= 4) {
components.push(
<Bemerkungen
key="bemerkungen"
onNext={handleNext}
isCompleted={schritt > 4}
/>
)
}
// Schritt 5: LastButtons
if (schritt >= 5) {
components.push(
<LastButtons
key="lastbuttons"
onNext={handleNext}
isCompleted={schritt > 5}
/>
)
}
// Schritt 6: Fertig
if (schritt >= 6) {
components.push(
<Fertig key="fertig" />
)
}
}
// Pfad "NEIN"
if (pfad === 'nein') {
// Schritt 1: Verschoben
if (schritt >= 1) {
components.push(
<Verschoben
key="verschoben"
onNext={handleNext}
isCompleted={schritt > 1}
/>
)
}
// Schritt 2: NeinPfad
if (schritt >= 2) {
components.push(
<NeinPfad
key="neinpfad"
isNein={true}
onNext={handleNext}
isCompleted={schritt > 2}
/>
)
}
// Schritt 3: Bemerkungen
if (schritt >= 3) {
components.push(
<Bemerkungen
key="bemerkungen"
onNext={handleNext}
isCompleted={schritt > 3}
/>
)
}
// Schritt 4: LastButtons
if (schritt >= 4) {
components.push(
<LastButtons
key="lastbuttons"
onNext={handleNext}
isCompleted={schritt > 4}
/>
)
}
// Schritt 5: Fertig
if (schritt >= 5) {
components.push(
<Fertig key="fertig" />
)
}
}
return components
}
return (
<>
<div className="wrapper">
<div>
<h2 className="topline">
Sonderführung vom <br className="umbruch" />{datum}
</h2>
<h4>für {name}</h4>
<h2 className="nachbearbeitung">Nachbearbeitung</h2>
</div>
{/* Zeige alle Komponenten bis zum aktuellen Schritt */}
{renderComponents().map(component => component)}
<LastLine version={version} vdate={vdate} />
</div>
</>
)
}
export default App

59
src/FormContext.jsx Normal file
View File

@@ -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 (
<FormContext.Provider value={{ formData, updateFormData, resetFormData }}>
{children}
</FormContext.Provider>
)
}
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 <FormProvider> umschlossen ist.')
}
return context
}

58
src/components/BesucherBar.jsx
View File

@@ -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 (
<section id="besucherbar">
<h3>{title}:</h3>
<div className="besadiv">
<input type='number' value={wert} onChange = {(e) => setWert(e.target.value)}
placeholder={euro ? 'Betrag in Euro' : 'Anzahl'} disabled ={isCompleted}
/>
&nbsp;&nbsp;{euro}
<button className="okbutton" onClick={handleOK} disabled = {!wert}>OK</button>
<input type='number' value={wert} onChange={(e) => setWert(e.target.value)}
placeholder={euro ? 'Betrag in Euro' : 'Anzahl'} disabled={isCompleted}
/>
&nbsp;&nbsp;{euro}
<button className="okbutton" onClick={handleOK} disabled={!wert}>OK</button>
</div>
</section>
</section>
)
}

6
src/components/FandStattVer.jsx
View File

@@ -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)

55
src/components/FandStattVer.jsx_claude
View File

@@ -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 (
<div className={`component-box ${isCompleted ? 'completed' : ''}`}>
<h3>Fand die Veranstaltung statt?</h3>
<div className="radio-group">
<label>
<input
type="radio"
name="fandstatt"
value={left}
checked={auswahl === left}
onChange={(e) => setAuswahl(e.target.value)}
disabled={isCompleted}
/>
{left}
</label>
<label>
<input
type="radio"
name="fandstatt"
value={right}
checked={auswahl === right}
onChange={(e) => setAuswahl(e.target.value)}
disabled={isCompleted}
/>
{right}
</label>
</div>
{!isCompleted && (
<button onClick={handleOK} disabled={!auswahl}>
OK
</button>
)}
</div>
)
}
export default FandStattVer

34
src/components/FormContext.jsx
View File

@@ -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 (
<FormContext.Provider value={{ formData, updateFormData }}>
{children}
</FormContext.Provider>
)
}
export function useFormData() {
return useContext(FormContext)
}

59
src/components/Spende.jsx
View File

@@ -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 (
<section>
<h3>Eine Spende</h3>
<div className="selspende">
<div className="radiogroup">
<label>
<input type="radio" name="spende" value="bar"
checked={spende==='bar'} onChange= {(e) => {setSpende(e.target.value)}} disabled={isCompleted}
<input type="radio" name="spende" value="bar"
checked={spendenArt === 'bar'} onChange={handleRadioChange} disabled={isCompleted}
/>
ist in bar eingegangen
</label>
<label>
<input type="radio" name="spende" value="ueber"
checked={spende==='ueber'} onChange= {(e) => {setSpende(e.target.value)}} disabled={isCompleted}
<input type="radio" name="spende" value="ueber"
checked={spendenArt === 'ueber'} onChange={handleRadioChange} disabled={isCompleted}
/>
wird überwiesen
</label>
<label>
<input type="radio" name="spende" value="kasse"
checked={spende==='kasse'} onChange= {(e) => {setSpende(e.target.value)}} disabled={isCompleted}
<input type="radio" name="spende" value="kasse"
checked={spendenArt === 'kasse'} onChange={handleRadioChange} disabled={isCompleted}
/>
ist in der Spendenkasse
</label>
<label>
<input type="radio" name="spende" value="not"
checked={spende==='not'} onChange= {(e) => {setSpende(e.target.value)}} disabled={isCompleted}
<input type="radio" name="spende" value="not"
checked={spendenArt === 'not'} onChange={handleRadioChange} disabled={isCompleted}
/>
ist nicht vorgesehen
</label>
</div>
{(spende === 'bar') && !isCompleted && (
<div style={{ marginTop: '20px' }}>
<label>Betrag (€):</label>
<input
type='number'
value={betrag}
onChange={(e) => setBetrag(e.target.value)}
placeholder='0'
step='1'
disabled={isCompleted}
/>
</div>
)}
{!isCompleted && (
<button onClick={handleOK} disabled={!spende}>OK</button>
)}
</section>
)
}

4
src/main.jsx
View File

@@ -4,7 +4,7 @@ import './index.css'
import App from './App.jsx'
createRoot(document.getElementById('root')).render(
<StrictMode>
// <StrictMode>
<App />
</StrictMode>,
// </StrictMode>,
)