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

go with react-bootstrap for now

Browse Source
This commit is contained in:
Thomas Ruoff
2020-07-04 00:45:30 +02:00
parent 6b13096709
commit 298427b777
8 changed files with 613 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
components/contact.js
View File

@@ -1,22 +1,50 @@
export default function Contact({}) {
import { useContext } from 'react'
import { AppContext, ACTIONS } from '../context/appStore'
import Form from 'react-bootstrap/Form'
import Col from 'react-bootstrap/Col'
export default function Contact() {
const { state, dispatch } = useContext(AppContext)
const { multipleDays, startDate, endDate } = state
if (!startDate || (multipleDays && !endDate)) {
return null
}
return (
<>
<div>
<label htmlFor="name">Name</label>
<input id="name" name="name" type="text" />
</div>
<div>
<label htmlFor="name">Verein</label>
<input id="org" name="org" type="text" />
</div>
<div>
<label htmlFor="name">Zweck der Fahrt</label>
<input id="purpose" name="purpose" type="text" />
</div>
<div>
<label htmlFor="destination">Fahrtziel</label>
<input id="destination" name="destination" type="text" />
</div>
<Form.Group>
<Form.Label>Name</Form.Label>
<Form.Control type="text" id="name" placeholder="Name" />
</Form.Group>
<Form.Group>
<Form.Label>Straße</Form.Label>
<Form.Control type="text" id="street" placeholder="Straße" />
</Form.Group>
<Form.Row>
<Form.Group as={Col} xs={4}>
<Form.Label>PLZ</Form.Label>
<Form.Control type="text" id="plz" placeholder="PLZ" />
</Form.Group>
<Form.Group as={Col}>
<Form.Label>Stadt</Form.Label>
<Form.Control type="text" id="city" placeholder="Stadt" />
</Form.Group>
</Form.Row>
<Form.Group>
<Form.Label>Verein</Form.Label>
<Form.Control type="text" id="org" placeholder="Verein" />
</Form.Group>
<Form.Group>
<Form.Label>Zweck der Fahrt</Form.Label>
<Form.Control type="text" id="purpose" placeholder="Zweck der Fahrt" />
</Form.Group>
<Form.Group>
<Form.Label>Ziel der Fahrt</Form.Label>
<Form.Control type="text" id="destination" placeholder="Fahrtziel" />
</Form.Group>
</>
)
}

30
components/dateSelect.js
View File

@@ -1,10 +1,9 @@
import { useContext } from 'react'
import { AppContext, ACTIONS } from '../context/appStore'
import TimeSelect from './timeSelect'
import Form from 'react-bootstrap/Form'
import moment from 'moment'
import 'react-dates/initialize'
import { DateRangePicker, SingleDatePicker } from 'react-dates'
@@ -31,9 +30,13 @@ export default function DateSelect() {
return (
<>
<div>
<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({
@@ -54,6 +57,7 @@ export default function DateSelect() {
)}
{state.multipleDays === true && (
<DateRangePicker
small={true}
startDate={startDate && moment(startDate)}
startDateId="bussle_start_date_id"
endDate={endDate && moment(endDate)}
@@ -78,25 +82,7 @@ export default function DateSelect() {
minDate={moment()}
/>
)}
</div>
<TimeSelect
id="pickup"
name="pickupTime"
label="Abholung Uhrzeit"
value={pickupTime}
setValue={(payload) =>
dispatch({ type: ACTIONS.SET_PICKUP_TIME, payload })
}
/>
<TimeSelect
id="dropoff"
name="dropoffTime"
label="Rückgabe Uhrzeit"
value={dropoffTime}
setValue={(payload) =>
dispatch({ type: ACTIONS.SET_DROPOFF_TIME, payload })
}
/>
</Form.Group>
</>
)
}

41
components/rangeSelect.js
View File

@@ -1,31 +1,50 @@
import { useContext } from 'react'
import { AppContext, ACTIONS } from '../context/appStore'
import Form from 'react-bootstrap/Form'
export default function RangeSelect() {
const { state, dispatch } = useContext(AppContext)
function getValue() {
const { multipleDays } = state
if (multipleDays === null || multipleDays === undefined) {
return null
}
if (multipleDays === true) {
return 'multiple'
}
return 'single'
}
return (
<div>
Ich will das Bussle für
<input
<Form.Group controlId="dateSelect">
<Form.Label>Willst du einen odere mehrere Tage buchen?</Form.Label>
<Form.Check
type="radio"
id="single"
name="days"
id={'multipleDays-single'}
label="Einen Tag"
name="multipleDays"
value="single"
checked={state.multipleDays === false}
onChange={() =>
dispatch({ type: ACTIONS.SET_MULTIPLE_DAYS, payload: false })
}
/>
<label htmlFor="single">einen Tag</label>
<input
<Form.Check
type="radio"
id="multiple"
name="days"
id={'multipleDays-multiple'}
label="Mehrere Tage"
name="multipleDays"
value="multiple"
checked={state.multipleDays === true}
onChange={() =>
dispatch({ type: ACTIONS.SET_MULTIPLE_DAYS, payload: true })
}
/>
<label htmlFor="multiple">mehrere Tage</label> mieten
</div>
</Form.Group>
)
}

26
components/timeSelect.js
View File

@@ -1,26 +0,0 @@
export default function TimeSelect({ id, name, label, value = '', setValue }) {
return (
<div>
<label htmlFor={id}>{label}</label>
<select
name={name}
id={id}
onChange={(event) => setValue(event.target.value)}
value={value}
>
<option value="">-- Wähle --</option>
<option value="09:00">09:00</option>
<option value="10:00">10:00</option>
<option value="11:00">11:00</option>
<option value="12:00">12:00</option>
<option value="13:00">13:00</option>
<option value="14:00">14:00</option>
<option value="15:00">15:00</option>
<option value="16:00">16:00</option>
<option value="17:00">17:00</option>
<option value="18:00">18:00</option>
<option value="19:00">19:00</option>
</select>
</div>
)
}