149 lines
3.7 KiB
TypeScript
149 lines
3.7 KiB
TypeScript
import { createAirport } from "@/api/airport";
|
|
import { Airport, AirportCategory } from "@/api/airport.types";
|
|
import { Card, TextInput, Select, Group, Flex, Space, Button } from "@mantine/core";
|
|
import { useForm } from "@mantine/form";
|
|
import { useEffect } from "react";
|
|
|
|
export default function CreateAirportPanel() {
|
|
const form = useForm<Airport>({
|
|
initialValues: {
|
|
icao: '',
|
|
category: AirportCategory.SMALL,
|
|
full_name: '',
|
|
elevation_ft: 0,
|
|
continent: '',
|
|
iso_country: '',
|
|
iso_region: '',
|
|
municipality: '',
|
|
gps_code: '',
|
|
iata_code: '',
|
|
local_code: '',
|
|
point: {
|
|
x: 0,
|
|
y: 0,
|
|
srid: 4326
|
|
}
|
|
}
|
|
});
|
|
|
|
return <Card shadow={'sm'} padding={'lg'} radius={'md'} withBorder>
|
|
Create Airport
|
|
<form onSubmit={form.onSubmit(async (values) => {
|
|
const response = await createAirport({ airport: values });
|
|
if (response.success) {
|
|
form.reset();
|
|
}
|
|
})}>
|
|
<TextInput
|
|
required
|
|
label='ICAO'
|
|
placeholder='KHEF'
|
|
{...form.getInputProps('icao')}
|
|
/>
|
|
<Select
|
|
required
|
|
label='Category'
|
|
placeholder='Select category'
|
|
data={[
|
|
{ value: AirportCategory.SMALL, label: 'Small' },
|
|
{ value: AirportCategory.MEDIUM, label: 'Medium' },
|
|
{ value: AirportCategory.LARGE, label: 'Large' },
|
|
]}
|
|
{...form.getInputProps('category')}
|
|
/>
|
|
<TextInput
|
|
required
|
|
label='Full Name'
|
|
placeholder='Manassas Regional Airport/Harry P. Davis Field'
|
|
{...form.getInputProps('full_name')}
|
|
/>
|
|
<TextInput
|
|
required
|
|
label='Elevation (ft)'
|
|
placeholder='192'
|
|
{...form.getInputProps('elevation_ft')}
|
|
/>
|
|
<Group>
|
|
<TextInput
|
|
required
|
|
label='Continent'
|
|
placeholder='NA'
|
|
{...form.getInputProps('continent')}
|
|
/>
|
|
<TextInput
|
|
required
|
|
label='ISO Country'
|
|
placeholder='US'
|
|
{...form.getInputProps('iso_country')}
|
|
/>
|
|
<TextInput
|
|
required
|
|
label='ISO Region'
|
|
placeholder='US-VA'
|
|
{...form.getInputProps('iso_region')}
|
|
/>
|
|
</Group>
|
|
<TextInput
|
|
required
|
|
label='Municipality'
|
|
placeholder='Manassas'
|
|
{...form.getInputProps('municipality')}
|
|
/>
|
|
<Group>
|
|
<TextInput
|
|
required
|
|
label='GPS Code'
|
|
placeholder='KHEF'
|
|
{...form.getInputProps('gps_code')}
|
|
/>
|
|
<TextInput
|
|
label='IATA Code'
|
|
placeholder='MNZ'
|
|
{...form.getInputProps('iata_code')}
|
|
/>
|
|
<TextInput
|
|
label='Local Code'
|
|
placeholder='HEF'
|
|
{...form.getInputProps('local_code')}
|
|
/>
|
|
</Group>
|
|
<Group>
|
|
<TextInput
|
|
required
|
|
label='Latitude'
|
|
placeholder='38.72140121'
|
|
{...form.getInputProps('point.x')}
|
|
/>
|
|
<TextInput
|
|
required
|
|
label='Longitude'
|
|
placeholder='-77.51540375'
|
|
{...form.getInputProps('point.y')}
|
|
/>
|
|
</Group>
|
|
<Flex justify={'end'} mt={'sm'}>
|
|
<Space mr={'sm'}>
|
|
<Button
|
|
type='submit'
|
|
variant='light'
|
|
color='blue'
|
|
radius={'md'}
|
|
>
|
|
Create
|
|
</Button>
|
|
</Space>
|
|
<Space>
|
|
<Button
|
|
type='button'
|
|
variant='light'
|
|
color='red'
|
|
radius={'md'}
|
|
onClick={() => form.reset()}
|
|
>
|
|
Reset
|
|
</Button>
|
|
</Space>
|
|
</Flex>
|
|
</form>
|
|
</Card>
|
|
} |