tomru/pfadi-bussle
1
0
Fork 0
mirror of https://github.com/tomru/pfadi-bussle.git synced 2026-03-04 06:57:12 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Thomas Ruoff
2020-08-01 16:38:03 +02:00
parent 95242403c5
commit e4c8b7ceba
11 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pages/api/booking.js
View File

@@ -1,4 +1,4 @@
import { createBooking } from './db/index'
import { createBooking } from '../../db/index'
import { Error } from 'mongoose'
export default async function userHandler(req, res) {

2
pages/api/daysbooked.js
View File

@@ -1,6 +1,6 @@
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import { getBookedDays } from './db/index'
import { getBookedDays } from '../../db/index'
export default async function useHandler(req, res) {
const { method } = req

66
pages/api/db/index.js
View File

@@ -1,66 +0,0 @@
import mongoose from 'mongoose'
import { BookingSchema, BookerSchema } from './schema'
mongoose.connect(process.env.MONGO_URI, {
useNewUrlParser: true,
useUnifiedTopology: true,
connectTimeoutMS: 1000,
serverSelectionTimeoutMS: 5000,
})
if (process.env.NODE_ENV !== 'production') {
mongoose.modelNames().includes('Booker') && mongoose.deleteModel('Booker')
mongoose.modelNames().includes('Booking') && mongoose.deleteModel('Booking')
}
export const Booker =
mongoose.models.Booker || mongoose.model('Booker', BookerSchema)
export const Booking =
mongoose.models.Booking || mongoose.model('Booking', BookingSchema)
export async function getBookedDays() {
const bookings = await Booking.find(
{
status: { $ne: 'rejected' },
$or: [
{ endDate: { $gt: new Date() } },
{ startDate: { $gt: new Date() } },
],
},
'startDate endDate'
).exec()
return bookings.map((booking) => booking.days).flat()
}
export async function createBooking({
startDate,
endDate,
purpose,
org,
destination,
name,
email,
street,
zip,
city,
}) {
const booking = new Booking({ startDate, endDate, purpose, org, destination })
const bookedDays = await getBookedDays()
if (booking.days.some((day) => bookedDays.includes(day))) {
throw new mongoose.Error.ValidationError(booking)
}
const ignoreCaseEmailMatcher = new RegExp(email, 'i')
let booker = await Booker.findOne({ email: ignoreCaseEmailMatcher }).exec()
if (!booker) {
booker = new Booker({ name, email, street, zip, city })
await booker.save()
}
booking.booker = booker._id
await booking.save()
await booking.populate('booker').execPopulate()
return booking.toJSON()
}

45
pages/api/db/schema.js
View File

@@ -1,45 +0,0 @@
import { Schema } from 'mongoose'
import { getDays, dateFormat } from '../../../helpers/date'
export const BookerSchema = new Schema(
{
name: { type: String, required: true },
email: { type: String, required: true, unique: true, minlength: 5 },
street: { type: String, required: true },
zip: { type: String, required: true },
city: { type: String, required: true },
},
{ timestamps: true }
)
export const BookingSchema = new Schema(
{
booker: { type: Schema.Types.ObjectId, ref: 'Booker', required: true },
startDate: {
type: Date,
required: true,
get: dateFormat,
min: new Date(),
},
endDate: { type: Date, required: false, get: dateFormat, min: new Date() },
status: {
type: String,
enum: ['requested', 'confirmed', 'rejected'],
required: true,
default: 'requested',
},
purpose: { type: String, required: false },
org: { type: String, required: false },
destination: { type: String, required: false },
},
{
timestamps: true,
toJSON: { virtuals: true, getters: true },
toObject: { virtuals: true, getters: true },
}
)
BookingSchema.virtual('days').get(function () {
return getDays({ startDate: this.startDate, endDate: this.endDate })
})

84
pages/components/contact.js
View File

@@ -1,84 +0,0 @@
import { useContext } from 'react'
import { WizardContext, ACTIONS } from '../context/wizardStore'
import Required from './required'
import Form from 'react-bootstrap/Form'
import Col from 'react-bootstrap/Col'
export default function Contact() {
const { state, onChangeEvent } = useContext(WizardContext)
const { name, email, street, zip, city } = state.formData
return (
<>
<Form.Group>
<Form.Label>
Name <Required />
</Form.Label>
<Form.Control
type="text"
name="name"
placeholder="Name"
value={name}
onChange={onChangeEvent}
required
/>
</Form.Group>
<Form.Group>
<Form.Label>
E-Mail <Required />
</Form.Label>
<Form.Control
type="email"
name="email"
placeholder="E-Mail"
value={email}
onChange={onChangeEvent}
required
/>
</Form.Group>
<Form.Group>
<Form.Label>
Straße <Required />
</Form.Label>
<Form.Control
type="text"
name="street"
placeholder="Straße"
value={street}
onChange={onChangeEvent}
required
/>
</Form.Group>
<Form.Row>
<Form.Group as={Col} xs={4}>
<Form.Label>
PLZ <Required />
</Form.Label>
<Form.Control
type="text"
name="zip"
placeholder="PLZ"
value={zip}
onChange={onChangeEvent}
required
/>
</Form.Group>
<Form.Group as={Col}>
<Form.Label>
Stadt <Required />
</Form.Label>
<Form.Control
type="text"
name="city"
placeholder="Stadt"
value={city}
onChange={onChangeEvent}
required
/>
</Form.Group>
</Form.Row>
</>
)
}

131
pages/components/dateSelect.js
View File

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

52
pages/components/reason.js
View File

@@ -1,52 +0,0 @@
import { useContext } from 'react'
import { WizardContext, ACTIONS } from '../context/wizardStore'
import Required from './required'
import Form from 'react-bootstrap/Form'
export default function Contact() {
const { state, onChangeEvent } = useContext(WizardContext)
const { purpose, destination, org } = state.formData
return (
<>
<Form.Group>
<Form.Label>
Zweck der Fahrt <Required />
</Form.Label>
<Form.Control
type="text"
name="purpose"
placeholder="Zweck der Fahrt"
value={purpose}
onChange={onChangeEvent}
required
/>
</Form.Group>
<Form.Group>
<Form.Label>Verein</Form.Label>
<Form.Control
type="text"
name="org"
placeholder="Verein"
value={org}
onChange={onChangeEvent}
/>
</Form.Group>
<Form.Group>
<Form.Label>
Ziel der Fahrt <Required />
</Form.Label>
<Form.Control
type="text"
name="destination"
placeholder="Fahrtziel"
value={destination}
onChange={onChangeEvent}
required
/>
</Form.Group>
</>
)
}

2
pages/components/required.js
View File

@@ -1,2 +0,0 @@
const Required = () => <span>*</span>
export default Required

58
pages/components/wizard.js
View File

@@ -1,58 +0,0 @@
import { useContext } from 'react'
import Button from 'react-bootstrap/Button'
import Form from 'react-bootstrap/Form'
import WizardStore, { WizardContext, ACTIONS } from '../context/wizardStore'
import DateSelect from './dateSelect'
import Reason from './reason'
import Contact from './contact'
//import Driver from './driver'
function WizardInternal() {
const { onSubmit, state, storeData } = useContext(WizardContext)
const { postData, postDataSuccess, postDataError } = state
if (postDataSuccess) {
return (
<>
<h3>Danke, die Buchung ist in Bearbeitung!</h3>
<p>Wir melden uns per E-Mail sobald die Buchung bestätigt ist.</p>
<p>
Sollen die eingegebenen Daten in Deinem Browser für die nächste
Buchung gespeichert werden?
</p>
<Button onClick={storeData}>Ja, bitte speichern</Button>
</>
)
}
const onChange = (payload) =>
dispatch({ action: ACTIONS.SET_FORM_DATA, payload })
return (
<Form
onSubmit={(event) => {
event.preventDefault()
onSubmit()
}}
>
<DateSelect />
<Reason />
<Contact />
<div>{postDataError}</div>
<Button type="submit" disabled={postData}>
{postData ? 'Speichern...' : 'Absenden'}
</Button>
</Form>
)
}
export default function Wizard() {
return (
<WizardStore>
<WizardInternal />
</WizardStore>
)
}

140
pages/context/wizardStore.js
View File

@@ -1,140 +0,0 @@
import React, { useReducer, useEffect } from 'react'
import { storeFormData, loadFormData } from '../../helpers/storage'
export const WizardContext = React.createContext()
export const ACTIONS = {
SET_FORM_DATA: 'setFormData',
POST_DATA: 'postData',
POST_DATA_ERROR: 'postDataError',
POST_DATA_SUCCESS: 'postDataSuccess',
}
function reducer(state, action) {
switch (action.type) {
case ACTIONS.SET_FORM_DATA:
return {
...state,
formData: {
...state.formData,
...action.payload,
},
}
case ACTIONS.POST_DATA:
return {
...state,
postData: true,
postDataError: null,
postDataSuccess: null,
}
case ACTIONS.POST_DATA_ERROR:
return {
...state,
postData: false,
postDataError: action.payload,
postDataSuccess: null,
}
case ACTIONS.POST_DATA_SUCCESS:
return {
...state,
formData: {
...state.formData,
...action.payload,
},
postData: false,
postDataError: null,
postDataSuccess: true,
}
default:
throw new Error(`Unkown Action type ${action.type}`)
}
}
function debugReducer(state, action) {
console.debug('applying action', action)
const newState = reducer(state, action)
console.debug(newState)
return newState
}
const initialState = {
postData: false,
postDataError: null,
postDataSuccess: null,
formData: {
multipleDays: true,
//startDate: '2020-08-10',
//endDate: '2020-08-17',
//purpose: 'Sommerlager 2021',
//org: 'VCP Rosenfeld',
//destination: 'Lüneburger Heide',
//name: 'Thomas Ruoff',
//email: 'thomasruoff@gmail.com',
//street: 'Mömpelgardgasse 25',
//zip: '72348',
//city: 'Rosenfeld',
},
}
async function createBooking(formData) {
const response = await fetch('/api/booking', {
method: 'POST',
mode: 'cors',
cache: 'no-cache',
credentials: 'same-origin',
headers: {
'Content-Type': 'application/json',
},
referrerPolicy: 'no-referrer',
body: JSON.stringify(formData),
})
return response.json()
}
export default function WizardStore({ children }) {
const [state, dispatch] = useReducer(debugReducer, initialState)
useEffect(() => {
const data = loadFormData()
dispatch({ type: ACTIONS.SET_FORM_DATA, payload: data })
}, [])
const onChangeEvent = (event) => {
const { name, value } = event.target
dispatch({
type: ACTIONS.SET_FORM_DATA,
payload: { [name]: value },
})
}
const onChange = (data) => {
dispatch({
type: ACTIONS.SET_FORM_DATA,
payload: data,
})
}
const onSubmit = async () => {
dispatch({ type: ACTIONS.POST_DATA })
try {
const bookingData = await createBooking(state.formData)
dispatch({ type: ACTIONS.POST_DATA_SUCCESS, payload: bookingData })
} catch (error) {
console.error(error)
dispatch({ type: ACTIONS.POST_DATA_ERROR, payload: error.message })
}
}
const storeData = () => storeFormData(state.formData)
return (
<WizardContext.Provider
value={{ state, dispatch, onChangeEvent, onChange, onSubmit, storeData }}
>
{children}
</WizardContext.Provider>
)
}

2
pages/index.js
View File

@@ -1,6 +1,6 @@
import Head from 'next/head'
import Wizard from './components/wizard'
import Wizard from '../components/wizard'
export default function Home() {
return (