more funky commits

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