ok, bad idea. moving everything that is not a page out of pages

2026-03-03 14:37:13 +01:00 · 2020-08-01 16:38:03 +02:00
parent 95242403c5
commit e4c8b7ceba
11 changed files with 6 additions and 6 deletions
--- a/components/dateSelect.js
+++ b/components/dateSelect.js
@@ -0,0 +1,131 @@
+import { useContext, useState } from 'react'
+import useSWR from 'swr'
+
+import { WizardContext, ACTIONS } from '../context/wizardStore'
+
+import Form from 'react-bootstrap/Form'
+
+import moment from 'moment'
+import 'react-dates/initialize'
+import { DateRangePicker, SingleDatePicker } from 'react-dates'
+
+import Required from './required'
+import { dateFormat } from '../helpers/date'
+
+const fetcher = (path) => fetch(path).then((r) => r.json())
+
+export default function DateSelect() {
+  const [focusedInput, setFocusedInput] = useState(null)
+  const { state, onChange } = useContext(WizardContext)
+  const { data: daysBooked, error: fetchBookedOnError } = useSWR(
+    '/api/daysbooked',
+    fetcher
+  )
+
+  const { multipleDays, startDate, endDate } = state.formData
+
+  function isDayBlocked(momentDay) {
+    return (
+      daysBooked && daysBooked.some((rawDay) => momentDay.isSame(rawDay, 'day'))
+    )
+  }
+
+  if (fetchBookedOnError) {
+    return (
+      <div>
+        Entschuldige, aber die Buchungszeiten konnten nicht geladen werden.
+        Versuchen Sie es später nochmals.
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <Form.Group controlId="dateSelect">
+        <Form.Label>
+          Willst du einen odere mehrere Tage buchen? <Required />
+        </Form.Label>
+        <Form.Check
+          type="radio"
+          id={'multipleDays-single'}
+          label="Einen Tag"
+          name="multipleDays"
+          value="single"
+          checked={multipleDays === false}
+          onChange={() => {
+            setFocusedInput(null)
+            onChange({
+              multipleDays: false,
+              startDate: null,
+              endDate: null,
+            })
+          }}
+        />
+        <Form.Check
+          type="radio"
+          id={'multipleDays-multiple'}
+          label="Mehrere Tage"
+          name="multipleDays"
+          value="multiple"
+          checked={multipleDays === true}
+          onChange={() => {
+            setFocusedInput(null)
+            onChange({
+              multipleDays: true,
+              startDate: null,
+              endDate: null,
+            })
+          }}
+        />
+      </Form.Group>
+      {multipleDays !== null && (
+        <Form.Group>
+          <Form.Label component="legend" style={{ display: 'block' }}>
+            Datum <Required />
+          </Form.Label>
+          {multipleDays === false && (
+            <SingleDatePicker
+              small={true}
+              date={startDate && moment(startDate)}
+              placeholder="Datum"
+              numberOfMonths={1}
+              required
+              onDateChange={(date) =>
+                onChange({
+                  startDate: date && dateFormat(date),
+                })
+              }
+              focused={typeof focusedInput === 'boolean' && focusedInput}
+              onFocusChange={({ focused }) => setFocusedInput(focused)}
+              isDayBlocked={isDayBlocked}
+              id="startDate"
+            />
+          )}
+          {multipleDays === true && (
+            <DateRangePicker
+              small={true}
+              startDate={startDate && moment(startDate)}
+              startDateId="startDate"
+              startDatePlaceholderText="Start"
+              endDatePlaceholderText="Ende"
+              required
+              numberOfMonths={1}
+              endDate={endDate && moment(endDate)}
+              endDateId="endDate"
+              onDatesChange={({ startDate, endDate }) => {
+                onChange({
+                  startDate: startDate && dateFormat(startDate),
+                  endDate: endDate && dateFormat(endDate),
+                })
+              }}
+              focusedInput={focusedInput}
+              onFocusChange={(focusedInput) => setFocusedInput(focusedInput)}
+              isDayBlocked={isDayBlocked}
+              minDate={moment()}
+            />
+          )}
+        </Form.Group>
+      )}
+    </>
+  )
+}