more funky commits

.prettierrc

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

components/contact.js

@@ -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>
+    </>
+  )
+}

components/dateSelect.js

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

components/rangeSelect.js

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

components/timeSelect.js

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

pages/_app.js

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

pages/index.js

@@ -1,8 +1,19 @@
+import { useState } from 'react'
 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() {
+  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 (
     <div className="container">
@@ -18,8 +29,29 @@ export default function Home() {
           Du willst das Pfadi Bussle buchen? Hier bist du richtig!
         </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>
 
       <footer>
@@ -96,57 +128,8 @@ export default function Home() {
           font-size: 1.5rem;
         }
 
-        code {
-          background: #fafafa;
-          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;
+        .bookingForm {
+          width: 80%;
         }
 
         @media (max-width: 600px) {

pages/step1.js

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