mirror of
https://github.com/tomru/pfadi-bussle.git
synced 2026-03-04 15:07:13 +01:00
enable bill storing
This commit is contained in:
Thomas Ruoff
committed by
Thomas Ruoff
Thomas Ruoff
parent
df6ec51af9
commit
ec1b2e9629
@@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react'
|
||||
import Footer from '../../../components/footer'
|
||||
import Header from '../../../components/header'
|
||||
import Input from '../../../components/wizard/input'
|
||||
import { BillDocument } from '../../../db/bill'
|
||||
import { BookingDocument } from '../../../db/booking'
|
||||
import { BOOKING_STATUS, MILAGE_RATES } from '../../../db/enums'
|
||||
import { getBookingByUUID } from '../../../db/index'
|
||||
@@ -44,9 +45,9 @@ function getBookingStatus(booking: BookingDocument) {
|
||||
}
|
||||
}
|
||||
|
||||
async function cancelBooking(booking: BookingDocument) {
|
||||
const response = await fetch(`/api/booking/${booking.uuid}`, {
|
||||
method: 'PATCH',
|
||||
async function saveBill(booking: BookingDocument, bill: BillDocument) {
|
||||
const response = await fetch(`/api/booking/${booking.uuid}/bill/`, {
|
||||
method: 'POST',
|
||||
mode: 'cors',
|
||||
cache: 'no-cache',
|
||||
credentials: 'same-origin',
|
||||
@@ -54,7 +55,7 @@ async function cancelBooking(booking: BookingDocument) {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
referrerPolicy: 'no-referrer',
|
||||
body: JSON.stringify({ status: BOOKING_STATUS.CANCELED }),
|
||||
body: JSON.stringify(bill),
|
||||
})
|
||||
return response.json()
|
||||
}
|
||||
@@ -69,122 +70,118 @@ export default function Bill({
|
||||
const [milageEnd, setMilageEnd] = useState(0)
|
||||
const [rate, setRate] = useState(MILAGE_RATES.EXTERN_UP_TO_200)
|
||||
const milage =
|
||||
(0 < milageEnd &&
|
||||
0 < milageStart &&
|
||||
milageStart < milageEnd &&
|
||||
milageEnd - milageStart) ||
|
||||
0
|
||||
const total = milage && rate && milage * rate
|
||||
(0 < milageStart && milageStart < milageEnd && milageEnd - milageStart) || 0
|
||||
const total = (milage && rate && milage * rate) || 0
|
||||
|
||||
// in case the props change, update the internal state
|
||||
useEffect(() => setBooking(bookingProp), [bookingProp])
|
||||
|
||||
const onCancelBooking = async () => {
|
||||
if (!confirm('Soll die Buchung wirklich storniert werden?')) {
|
||||
return
|
||||
}
|
||||
try {
|
||||
const updatedBooking = await cancelBooking(booking)
|
||||
setBooking(updatedBooking)
|
||||
} catch (e) {
|
||||
alert(
|
||||
'Die Buchung konnte nicht storniert werden. Kontaktieren Sie uns bitt per E-Mail!'
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mx-3 flex flex-col min-h-screen">
|
||||
<Header />
|
||||
<main className="flex-grow">
|
||||
<h2 className="text-3xl">Pfadi Bussle Buchung</h2>
|
||||
<div>
|
||||
<strong>Buchungsstatus:</strong> {getBookingStatus(booking)}
|
||||
</div>
|
||||
<div>
|
||||
<strong>Buchungszeitraum:</strong>{' '}
|
||||
{dateFormatFrontend(new Date(booking.startDate))} -{' '}
|
||||
{dateFormatFrontend(new Date(booking.endDate))}
|
||||
</div>
|
||||
<div>
|
||||
<strong>Bucher:</strong> {booking.booker.name}
|
||||
</div>
|
||||
<div>
|
||||
<Input
|
||||
label="Anfangskilometer"
|
||||
name="milageStart"
|
||||
required
|
||||
value={milageStart}
|
||||
type="number"
|
||||
onChange={(e: React.ChangeEvent<React.ElementRef<'input'>>) =>
|
||||
setMilageStart(Number(e.target.value))
|
||||
}
|
||||
/>
|
||||
<Input
|
||||
label="Endkilometer"
|
||||
name="milageEnd"
|
||||
required
|
||||
value={milageEnd}
|
||||
type="number"
|
||||
onChange={(e: React.ChangeEvent<React.ElementRef<'input'>>) =>
|
||||
setMilageEnd(Number(e.target.value))
|
||||
}
|
||||
/>
|
||||
<Input label="Gefahren" name="milage" readOnly value={milage} />
|
||||
<div className="fsw">
|
||||
<div className="fs">
|
||||
<label className="flabel">Rate</label>
|
||||
<div className="relative">
|
||||
<select
|
||||
className="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
|
||||
id="rate"
|
||||
onChange={(
|
||||
e: React.ChangeEvent<React.ElementRef<'select'>>
|
||||
) => setRate(Number(e.target.value))}
|
||||
>
|
||||
<option value={MILAGE_RATES.INTERN_UP_TO_200}>
|
||||
Intern bis 200 ({MILAGE_RATES.INTERN_UP_TO_200})
|
||||
</option>
|
||||
<option value={MILAGE_RATES.INTERN_200_1000}>
|
||||
Intern 200-1000 ({MILAGE_RATES.INTERN_200_1000})
|
||||
</option>
|
||||
<option value={MILAGE_RATES.INTERN_1001_2000}>
|
||||
Intern 1001-2000 ({MILAGE_RATES.INTERN_1001_2000})
|
||||
</option>
|
||||
<option value={MILAGE_RATES.INTERN_OVER_2000}>
|
||||
Intern ab 2001 ({MILAGE_RATES.INTERN_OVER_2000})
|
||||
</option>
|
||||
<option value={MILAGE_RATES.EXTERN_UP_TO_200}>
|
||||
Extern bis 200 ({MILAGE_RATES.EXTERN_UP_TO_200})
|
||||
</option>
|
||||
<option value={MILAGE_RATES.EXTERN_200_1000}>
|
||||
Extern 200-1000 ({MILAGE_RATES.EXTERN_200_1000})
|
||||
</option>
|
||||
<option value={MILAGE_RATES.EXTERN_1001_2000}>
|
||||
Extern 1001-2000 ({MILAGE_RATES.EXTERN_1001_2000})
|
||||
</option>
|
||||
<option value={MILAGE_RATES.EXTERN_OVER_2000}>
|
||||
Extern ab 2001 ({MILAGE_RATES.EXTERN_OVER_2000})
|
||||
</option>
|
||||
</select>
|
||||
<div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
|
||||
<svg
|
||||
className="fill-current h-4 w-4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
<form
|
||||
className="form"
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault()
|
||||
saveBill(booking, {
|
||||
milageStart,
|
||||
milageEnd,
|
||||
milage,
|
||||
total,
|
||||
rate: MILAGE_RATES[rate],
|
||||
})
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<strong>Buchungsstatus:</strong> {getBookingStatus(booking)}
|
||||
</div>
|
||||
<div>
|
||||
<strong>Buchungszeitraum:</strong>{' '}
|
||||
{dateFormatFrontend(new Date(booking.startDate))} -{' '}
|
||||
{dateFormatFrontend(new Date(booking.endDate))}
|
||||
</div>
|
||||
<div>
|
||||
<strong>Bucher:</strong> {booking.booker.name}
|
||||
</div>
|
||||
<div>
|
||||
<Input
|
||||
label="Anfangskilometer"
|
||||
name="milageStart"
|
||||
required
|
||||
value={milageStart}
|
||||
type="number"
|
||||
onChange={(e: React.ChangeEvent<React.ElementRef<'input'>>) =>
|
||||
setMilageStart(Number(e.target.value))
|
||||
}
|
||||
/>
|
||||
<Input
|
||||
label="Endkilometer"
|
||||
name="milageEnd"
|
||||
required
|
||||
value={milageEnd}
|
||||
type="number"
|
||||
onChange={(e: React.ChangeEvent<React.ElementRef<'input'>>) =>
|
||||
setMilageEnd(Number(e.target.value))
|
||||
}
|
||||
/>
|
||||
<Input label="Gefahren" name="milage" readOnly value={milage} />
|
||||
<div className="fsw">
|
||||
<div className="fs">
|
||||
<label className="flabel">Rate</label>
|
||||
<div className="relative">
|
||||
<select
|
||||
className="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
|
||||
id="rate"
|
||||
onChange={(
|
||||
e: React.ChangeEvent<React.ElementRef<'select'>>
|
||||
) => setRate(Number(e.target.value))}
|
||||
>
|
||||
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
|
||||
</svg>
|
||||
<option value={MILAGE_RATES.INTERN_UP_TO_200}>
|
||||
Intern bis 200 ({MILAGE_RATES.INTERN_UP_TO_200})
|
||||
</option>
|
||||
<option value={MILAGE_RATES.INTERN_200_1000}>
|
||||
Intern 200-1000 ({MILAGE_RATES.INTERN_200_1000})
|
||||
</option>
|
||||
<option value={MILAGE_RATES.INTERN_1001_2000}>
|
||||
Intern 1001-2000 ({MILAGE_RATES.INTERN_1001_2000})
|
||||
</option>
|
||||
<option value={MILAGE_RATES.INTERN_OVER_2000}>
|
||||
Intern ab 2001 ({MILAGE_RATES.INTERN_OVER_2000})
|
||||
</option>
|
||||
<option value={MILAGE_RATES.EXTERN_UP_TO_200}>
|
||||
Extern bis 200 ({MILAGE_RATES.EXTERN_UP_TO_200})
|
||||
</option>
|
||||
<option value={MILAGE_RATES.EXTERN_200_1000}>
|
||||
Extern 200-1000 ({MILAGE_RATES.EXTERN_200_1000})
|
||||
</option>
|
||||
<option value={MILAGE_RATES.EXTERN_1001_2000}>
|
||||
Extern 1001-2000 ({MILAGE_RATES.EXTERN_1001_2000})
|
||||
</option>
|
||||
<option value={MILAGE_RATES.EXTERN_OVER_2000}>
|
||||
Extern ab 2001 ({MILAGE_RATES.EXTERN_OVER_2000})
|
||||
</option>
|
||||
</select>
|
||||
<div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
|
||||
<svg
|
||||
className="fill-current h-4 w-4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Input label="Summe" name="milage" readOnly value={total} />
|
||||
</div>
|
||||
<button onClick={onCancelBooking} className="btn btn-blue">
|
||||
Rechnung Erstellen
|
||||
</button>
|
||||
<Input label="Summe" name="milage" readOnly value={total} />
|
||||
</div>
|
||||
<button type="submit" className="btn btn-blue">
|
||||
Rechnung Erstellen
|
||||
</button>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
|
||||
Reference in New Issue
Block a user