tomru/pfadi-bussle
1
0
Fork 0
mirror of https://github.com/tomru/pfadi-bussle.git synced 2026-03-03 06:27:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

move rest into pages

Browse Source
This commit is contained in:
Thomas Ruoff
2020-08-01 16:05:58 +02:00
parent 528f46a533
commit 793b499c76
9 changed files with 32 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
components/contact.js
View File

@@ -1,84 +0,0 @@
import { useContext } from 'react'
import { WizardContext, ACTIONS } from '../context/wizardStore'
import Required from './required'
import Form from 'react-bootstrap/Form'
import Col from 'react-bootstrap/Col'
export default function Contact() {
const { state, onChangeEvent } = useContext(WizardContext)
const { name, email, street, zip, city } = state.formData
return (
<>
<Form.Group>
<Form.Label>
Name <Required />
</Form.Label>
<Form.Control
type="text"
name="name"
placeholder="Name"
value={name}
onChange={onChangeEvent}
required
/>
</Form.Group>
<Form.Group>
<Form.Label>
E-Mail <Required />
</Form.Label>
<Form.Control
type="email"
name="email"
placeholder="E-Mail"
value={email}
onChange={onChangeEvent}
required
/>
</Form.Group>
<Form.Group>
<Form.Label>
Straße <Required />
</Form.Label>
<Form.Control
type="text"
name="street"
placeholder="Straße"
value={street}
onChange={onChangeEvent}
required
/>
</Form.Group>
<Form.Row>
<Form.Group as={Col} xs={4}>
<Form.Label>
PLZ <Required />
</Form.Label>
<Form.Control
type="text"
name="zip"
placeholder="PLZ"
value={zip}
onChange={onChangeEvent}
required
/>
</Form.Group>
<Form.Group as={Col}>
<Form.Label>
Stadt <Required />
</Form.Label>
<Form.Control
type="text"
name="city"
placeholder="Stadt"
value={city}
onChange={onChangeEvent}
required
/>
</Form.Group>
</Form.Row>
</>
)
}

131
components/dateSelect.js
View File

@@ -1,131 +0,0 @@
import { useContext, useState } from 'react'
import useSWR from 'swr'
import { WizardContext, ACTIONS } from '../context/wizardStore'
import Form from 'react-bootstrap/Form'
import moment from 'moment'
import 'react-dates/initialize'
import { DateRangePicker, SingleDatePicker } from 'react-dates'
import Required from './required'
import { dateFormat } from '../lib/dateHelper'
const fetcher = (path) => fetch(path).then((r) => r.json())
export default function DateSelect() {
const [focusedInput, setFocusedInput] = useState(null)
const { state, onChange } = useContext(WizardContext)
const { data: daysBooked, error: fetchBookedOnError } = useSWR(
'/api/daysbooked',
fetcher
)
const { multipleDays, startDate, endDate } = state.formData
function isDayBlocked(momentDay) {
return (
daysBooked && daysBooked.some((rawDay) => momentDay.isSame(rawDay, 'day'))
)
}
if (fetchBookedOnError) {
return (
<div>
Entschuldige, aber die Buchungszeiten konnten nicht geladen werden.
Versuchen Sie es später nochmals.
</div>
)
}
return (
<>
<Form.Group controlId="dateSelect">
<Form.Label>
Willst du einen odere mehrere Tage buchen? <Required />
</Form.Label>
<Form.Check
type="radio"
id={'multipleDays-single'}
label="Einen Tag"
name="multipleDays"
value="single"
checked={multipleDays === false}
onChange={() => {
setFocusedInput(null)
onChange({
multipleDays: false,
startDate: null,
endDate: null,
})
}}
/>
<Form.Check
type="radio"
id={'multipleDays-multiple'}
label="Mehrere Tage"
name="multipleDays"
value="multiple"
checked={multipleDays === true}
onChange={() => {
setFocusedInput(null)
onChange({
multipleDays: true,
startDate: null,
endDate: null,
})
}}
/>
</Form.Group>
{multipleDays !== null && (
<Form.Group>
<Form.Label component="legend" style={{ display: 'block' }}>
Datum <Required />
</Form.Label>
{multipleDays === false && (
<SingleDatePicker
small={true}
date={startDate && moment(startDate)}
placeholder="Datum"
numberOfMonths={1}
required
onDateChange={(date) =>
onChange({
startDate: date && dateFormat(date),
})
}
focused={typeof focusedInput === 'boolean' && focusedInput}
onFocusChange={({ focused }) => setFocusedInput(focused)}
isDayBlocked={isDayBlocked}
id="startDate"
/>
)}
{multipleDays === true && (
<DateRangePicker
small={true}
startDate={startDate && moment(startDate)}
startDateId="startDate"
startDatePlaceholderText="Start"
endDatePlaceholderText="Ende"
required
numberOfMonths={1}
endDate={endDate && moment(endDate)}
endDateId="endDate"
onDatesChange={({ startDate, endDate }) => {
onChange({
startDate: startDate && dateFormat(startDate),
endDate: endDate && dateFormat(endDate),
})
}}
focusedInput={focusedInput}
onFocusChange={(focusedInput) => setFocusedInput(focusedInput)}
isDayBlocked={isDayBlocked}
minDate={moment()}
/>
)}
</Form.Group>
)}
</>
)
}

52
components/reason.js
View File

@@ -1,52 +0,0 @@
import { useContext } from 'react'
import { WizardContext, ACTIONS } from '../context/wizardStore'
import Required from './required'
import Form from 'react-bootstrap/Form'
export default function Contact() {
const { state, onChangeEvent } = useContext(WizardContext)
const { purpose, destination, org } = state.formData
return (
<>
<Form.Group>
<Form.Label>
Zweck der Fahrt <Required />
</Form.Label>
<Form.Control
type="text"
name="purpose"
placeholder="Zweck der Fahrt"
value={purpose}
onChange={onChangeEvent}
required
/>
</Form.Group>
<Form.Group>
<Form.Label>Verein</Form.Label>
<Form.Control
type="text"
name="org"
placeholder="Verein"
value={org}
onChange={onChangeEvent}
/>
</Form.Group>
<Form.Group>
<Form.Label>
Ziel der Fahrt <Required />
</Form.Label>
<Form.Control
type="text"
name="destination"
placeholder="Fahrtziel"
value={destination}
onChange={onChangeEvent}
required
/>
</Form.Group>
</>
)
}

4
components/required.js
View File

@@ -1,4 +0,0 @@
import react from 'react'
const Required = () => <span>*</span>
export default Required

58
components/wizard.js
View File

@@ -1,58 +0,0 @@
import { useContext } from 'react'
import Button from 'react-bootstrap/Button'
import Form from 'react-bootstrap/Form'
import WizardStore, { WizardContext, ACTIONS } from '../context/wizardStore'
import DateSelect from './dateSelect'
import Reason from './reason'
import Contact from './contact'
//import Driver from './driver'
function WizardInternal() {
const { onSubmit, state } = useContext(WizardContext)
const { postData, postDataSuccess, postDataError } = state
if (postDataSuccess) {
return (
<>
<h3>Danke, die Buchung ist in Bearbeitung!</h3>
<p>Wir melden uns per E-Mail sobald die Buchung bestätigt ist.</p>
<p>
Sollen die eingegebenen Daten in Deinem Browser für die nächste
Buchung gespeichert werden?
</p>
<Button>Ja, bitte speichern</Button>
</>
)
}
const onChange = (payload) =>
dispatch({ action: ACTIONS.SET_FORM_DATA, payload })
return (
<Form
onSubmit={(event) => {
event.preventDefault()
onSubmit()
}}
>
<DateSelect />
<Reason />
<Contact />
<div>{postDataError}</div>
<Button type="submit" disabled={postData}>
{postData ? 'Speichern...' : 'Absenden'}
</Button>
</Form>
)
}
export default function Wizard() {
return (
<WizardStore>
<WizardInternal />
</WizardStore>
)
}