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

more funky commits

Browse Source
This commit is contained in:
Thomas Ruoff
2020-06-30 00:44:35 +02:00
parent 788ae303e7
commit 96c62e3e9f
8 changed files with 208 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
.prettierrc Normal file
View File

@@ -0,0 +1,6 @@
{
"trailingComma": "es5",
"tabWidth": 2,
"semi": false,
"singleQuote": true
}

34
components/contact.js Normal file
View File

@@ -0,0 +1,34 @@
export default function Contact({}) {
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>
<div>
<label htmlFor="driver1">Fahrer 1</label>
<input id="driver1" name="driver1" type="text" />
<label htmlFor="driver">Alter</label>
<input id="ageDriver1" name="ageDriver1" type="number" min="20" />
</div>
<div>
<label htmlFor="driver">Fahrer 2</label>
<input id="driver2" name="driver2" type="text" />
<label htmlFor="driver">Alter</label>
<input id="ageDriver2" name="ageDriver2" type="number" min="20" />
</div>
</>
)
}

80
components/dateSelect.js Normal file
View File

@@ -0,0 +1,80 @@
import moment from 'moment'
import 'react-dates/initialize'
import { DateRangePicker, SingleDatePicker } from 'react-dates'
import TimeSelect from './timeSelect'
export default function DateSelect({
multipleDays,
startDate,
setStartDate,
endDate,
setEndDate,
focusedInput,
setFocusedInput,
pickupTime,
setPickupTime,
dropoffTime,
setDropoffTime,
}) {
const timeSelect = (
<>
<TimeSelect
id="pickup"
name="pickupTime"
label="Abholung Uhrzeit"
value={pickupTime}
setValue={setPickupTime}
/>
<TimeSelect
id="dropoff"
name="dropoffTime"
label="Rückgabe Uhrzeit"
value={dropoffTime}
setValue={setDropoffTime}
/>
</>
)
if (multipleDays === false) {
return (
<>
<div>
<SingleDatePicker
date={startDate}
onDateChange={(date) => setStartDate(date)}
focused={typeof focusedInput === 'boolean' && focusedInput}
onFocusChange={({ focused }) => setFocusedInput(focused)}
id="your_unique_id"
/>
</div>
{timeSelect}
</>
)
}
if (multipleDays === true) {
return (
<>
<div>
<DateRangePicker
startDate={startDate}
startDateId="bussle_start_date_id"
endDate={endDate}
endDateId="bussle_end_date_id"
onDatesChange={({ startDate, endDate }) => {
setStartDate(startDate)
setEndDate(endDate)
}}
focusedInput={focusedInput}
onFocusChange={(focusedInput) => setFocusedInput(focusedInput)}
minDate={moment()}
/>
</div>
{timeSelect}
</>
)
}
return null
}

23
components/rangeSelect.js Normal file
View File

@@ -0,0 +1,23 @@
export default function RangeSelect({ multipleDays, setMultipleDays }) {
return (
<div>
Ich will das Bussle für
<input
type="radio"
id="single"
name="days"
value="singleDay"
onChange={() => setMultipleDays(false)}
/>
<label htmlFor="single">einen Tag</label>
<input
type="radio"
id="multiple"
name="days"
value="multipleDays"
onChange={() => setMultipleDays(true)}
/>
<label htmlFor="multiple">mehrere Tage</label> mieten
</div>
)
}

26
components/timeSelect.js Normal file
View File

@@ -0,0 +1,26 @@
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>
)
}

5
pages/_app.js
View File

@@ -1,9 +1,8 @@
import 'react-dates/lib/css/_datepicker.css' import 'react-dates/lib/css/_datepicker.css'
import moment from 'moment' import moment from 'moment'
import deLocale from 'moment/locale/de'; import deLocale from 'moment/locale/de'
export default function MyApp({ Component, pageProps }) { export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} /> return <Component {...pageProps} />
} }

91
pages/index.js
View File

@@ -1,8 +1,19 @@
import { useState } from 'react'
import Head from 'next/head' import Head from 'next/head'
import Step1 from './step1'; import RangeSelect from '../components/rangeSelect'
import DateSelect from '../components/dateSelect'
import Contact from '../components/contact'
export default function Home() { export default function Home() {
const [multipleDays, setMultipleDays] = useState(null)
const [startDate, setStartDate] = useState(null)
const [endDate, setEndDate] = useState(null)
const [focusedInput, setFocusedInput] = useState(null)
const [pickupTime, setPickupTime] = useState('')
const [dropoffTime, setDropoffTime] = useState('')
return ( return (
<div className="container"> <div className="container">
@@ -18,8 +29,29 @@ export default function Home() {
Du willst das Pfadi Bussle buchen? Hier bist du richtig! Du willst das Pfadi Bussle buchen? Hier bist du richtig!
</p> </p>
<Step1/> <form className="bookingForm">
<RangeSelect
multipleDay={multipleDays}
setMultipleDays={setMultipleDays}
/>
<DateSelect
multipleDays={multipleDays}
startDate={startDate}
setStartDate={setStartDate}
endDate={endDate}
setEndDate={setEndDate}
focusedInput={focusedInput}
setFocusedInput={setFocusedInput}
pickupTime={pickupTime}
setPickupTime={setPickupTime}
dropoffTime={dropoffTime}
setDropoffTime={setDropoffTime}
/>
<Contact />
<input type="submit" />
</form>
</main> </main>
<footer> <footer>
@@ -96,57 +128,8 @@ export default function Home() {
font-size: 1.5rem; font-size: 1.5rem;
} }
code { .bookingForm {
background: #fafafa; width: 80%;
border-radius: 5px;
padding: 0.75rem;
font-size: 1.1rem;
font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
}
.grid {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
max-width: 800px;
margin-top: 3rem;
}
.card {
margin: 1rem;
flex-basis: 45%;
padding: 1.5rem;
text-align: left;
color: inherit;
text-decoration: none;
border: 1px solid #eaeaea;
border-radius: 10px;
transition: color 0.15s ease, border-color 0.15s ease;
}
.card:hover,
.card:focus,
.card:active {
color: #0070f3;
border-color: #0070f3;
}
.card h3 {
margin: 0 0 1rem 0;
font-size: 1.5rem;
}
.card p {
margin: 0;
font-size: 1.25rem;
line-height: 1.5;
}
.logo {
height: 1em;
} }
@media (max-width: 600px) { @media (max-width: 600px) {

62
pages/step1.js
View File

@@ -1,62 +0,0 @@
import { useState } from 'react'
import moment from 'moment'
import 'react-dates/initialize'
import { DateRangePicker, SingleDatePicker } from 'react-dates'
export default function Home() {
const [multipleDays, setMultipleDays] = useState(null);
const [startDate, setStartDate] = useState(null);
const [endDate, setEndDate] = useState(null);
const [focusedInput, setFocusedInput ] = useState(null);
return (
<form>
<div>
Ich will das Bussle für
<div>
<input type="radio" id="single" name="days" value="singleDay" onChange={() => setMultipleDays(false)} />
<label for="single">einen Tag</label>
</div>
<div>
<input type="radio" id="multiple" name="days" value="multipleDays" onChange={() => setMultipleDays(true)}/>
<label for="multiple">mehrere Tage</label>
</div>
{' '}mieten
</div>
{ multipleDays === false && (
<div>
<SingleDatePicker
date={startDate}
onDateChange={date => setStartDate(date)}
focused={typeof focusedInput === 'boolean' && focusedInput}
onFocusChange={({ focused }) => setFocusedInput(focused)}
id="your_unique_id"
/>
</div>
) }
{ multipleDays === true && (
<div>
<DateRangePicker
startDate={startDate}
startDateId="bussle_start_date_id"
endDate={endDate}
endDateId="bussle_end_date_id"
onDatesChange={({ startDate, endDate }) => {
setStartDate(startDate)
setEndDate(endDate)
}}
focusedInput={focusedInput}
onFocusChange={focusedInput => setFocusedInput(focusedInput)}
minDate={moment()}
/>
</div>
)}
</form>
)
}