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

extract select element

Browse Source
This commit is contained in:
Thomas Ruoff
2020-10-07 23:31:44 +02:00
parent f78b8ea772
commit e4082353e3
2 changed files with 71 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
pages/booking/[uuid]/bill.tsx
View File

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react'
import Footer from '../../../components/footer'
import Header from '../../../components/header'
import Input from '../../../components/input'
import Select from '../../../components/select'
import { AdditionalCosts, BillDocument } from '../../../db/bill'
import { BookingDocument } from '../../../db/booking'
import {
@@ -13,6 +14,22 @@ import {
import { getBookingByUUID } from '../../../db/index'
import { dateFormatFrontend } from '../../../helpers/date'
const milageRateOptions = Object.values(MILAGE_RATES).map((rate) => {
return (
<option value={rate} key={rate}>
{getRateLabel(rate)} ({getMilageRateValue(rate)} EUR)
</option>
)
})
const bookingStatusOptions = Object.values(BILL_STATUS).map((status) => {
return (
<option value={status} key={status}>
{getBillStatusLabel(status)}
</option>
)
})
export const getServerSideProps: GetServerSideProps = async (context) => {
const {
res,
@@ -177,73 +194,20 @@ export default function BillPage({
}
/>
<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"
value={rate}
onChange={(
e: React.ChangeEvent<React.ElementRef<'select'>>
) => {
setRate(e.target.value as MILAGE_RATES)
}}
>
{Object.values(MILAGE_RATES).map((rate) => {
return (
<option value={rate} key={rate}>
{getRateLabel(rate)} ({getMilageRateValue(rate)} EUR)
</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 className="fsw">
<div className="fs">
<label className="flabel">Status</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"
value={status}
onChange={(
e: React.ChangeEvent<React.ElementRef<'select'>>
) => setStatus(e.target.value as BILL_STATUS)}
>
{Object.values(BILL_STATUS).map((status) => {
return (
<option value={status} key={status}>
{getBillStatusLabel(status)}
</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>
<Select
label="Rate"
value={rate}
onChange={(e) => setRate(e.target.value as MILAGE_RATES)}
>
{milageRateOptions}
</Select>
<Select
label="Status"
value={status}
onChange={(e) => setStatus(e.target.value as BILL_STATUS)}
>
{bookingStatusOptions}
</Select>
<Input label="Summe" name="milage" readOnly value={total} />
</div>
{storingError && (