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

add a wizard

Browse Source
This commit is contained in:
Thomas Ruoff
2020-07-06 00:27:02 +02:00
parent 298427b777
commit cbfb421c02
6 changed files with 157 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
components/dateSelect.js
View File

@@ -1,5 +1,5 @@
import { useContext } from 'react'
import { AppContext, ACTIONS } from '../context/appStore'
import { WizardContext, ACTIONS } from '../context/wizardStore'
import Form from 'react-bootstrap/Form'
@@ -8,7 +8,7 @@ import 'react-dates/initialize'
import { DateRangePicker, SingleDatePicker } from 'react-dates'
export default function DateSelect() {
const { state, dispatch } = useContext(AppContext)
const { state, dispatch } = useContext(WizardContext)
const {
multipleDays,
@@ -24,65 +24,88 @@ export default function DateSelect() {
return bookedOn.some((rawDay) => momentDay.isSame(rawDay))
}
if (multipleDays === null || multipleDays === undefined) {
return null
}
return (
<>
<Form.Group>
<Form.Label component="legend" style={{ display: 'block' }}>
Datum
</Form.Label>
{state.multipleDays === false && (
<SingleDatePicker
small={true}
date={startDate && moment(startDate)}
onDateChange={(date) =>
dispatch({
type: ACTIONS.SET_DATE,
payload: { startDate: date.toISOString() },
})
}
focused={typeof focusedInput === 'boolean' && focusedInput}
onFocusChange={({ focused }) =>
dispatch({
type: ACTIONS.SET_FOCUSED_INPUT,
payload: focused,
})
}
isDayBlocked={isDayBlocked}
id="your_unique_id"
/>
)}
{state.multipleDays === true && (
<DateRangePicker
small={true}
startDate={startDate && moment(startDate)}
startDateId="bussle_start_date_id"
endDate={endDate && moment(endDate)}
endDateId="bussle_end_date_id"
onDatesChange={({ startDate, endDate }) => {
dispatch({
type: ACTIONS.SET_DATE,
payload: {
startDate: startDate && startDate.toISOString(),
endDate: endDate && endDate.toISOString(),
},
})
}}
focusedInput={focusedInput}
onFocusChange={(focusedInput) =>
dispatch({
type: ACTIONS.SET_FOCUSED_INPUT,
payload: focusedInput,
})
}
isDayBlocked={isDayBlocked}
minDate={moment()}
/>
)}
<Form.Group controlId="dateSelect">
<Form.Label>Willst du einen odere mehrere Tage buchen?</Form.Label>
<Form.Check
type="radio"
id={'multipleDays-single'}
label="Einen Tag"
name="multipleDays"
value="single"
checked={state.multipleDays === false}
onChange={() =>
dispatch({ type: ACTIONS.SET_MULTIPLE_DAYS, payload: false })
}
/>
<Form.Check
type="radio"
id={'multipleDays-multiple'}
label="Mehrere Tage"
name="multipleDays"
value="multiple"
checked={state.multipleDays === true}
onChange={() =>
dispatch({ type: ACTIONS.SET_MULTIPLE_DAYS, payload: true })
}
/>
</Form.Group>
{multipleDays !== null && (
<Form.Group>
<Form.Label component="legend" style={{ display: 'block' }}>
Datum
</Form.Label>
{state.multipleDays === false && (
<SingleDatePicker
small={true}
date={startDate && moment(startDate)}
onDateChange={(date) =>
dispatch({
type: ACTIONS.SET_DATE,
payload: { startDate: date.toISOString() },
})
}
focused={typeof focusedInput === 'boolean' && focusedInput}
onFocusChange={({ focused }) =>
dispatch({
type: ACTIONS.SET_FOCUSED_INPUT,
payload: focused,
})
}
isDayBlocked={isDayBlocked}
id="your_unique_id"
/>
)}
{state.multipleDays === true && (
<DateRangePicker
small={true}
startDate={startDate && moment(startDate)}
startDateId="bussle_start_date_id"
endDate={endDate && moment(endDate)}
endDateId="bussle_end_date_id"
onDatesChange={({ startDate, endDate }) => {
dispatch({
type: ACTIONS.SET_DATE,
payload: {
startDate: startDate && startDate.toISOString(),
endDate: endDate && endDate.toISOString(),
},
})
}}
focusedInput={focusedInput}
onFocusChange={(focusedInput) =>
dispatch({
type: ACTIONS.SET_FOCUSED_INPUT,
payload: focusedInput,
})
}
isDayBlocked={isDayBlocked}
minDate={moment()}
/>
)}
</Form.Group>
)}
</>
)
}