124 lines
3.8 KiB
TypeScript
124 lines
3.8 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import { FlightCreate, Flight } from "../../Types";
|
|
import { useNavigate } from "react-router";
|
|
import "./FlightForm.css";
|
|
import { createFlight } from "../../Api";
|
|
|
|
export const CreateFlight = () => {
|
|
const navigate = useNavigate();
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [flight, setFlight] = useState<Flight>();
|
|
|
|
const [flightData, setFlightData] = useState<FlightCreate>({
|
|
flight_code: "ABC123",
|
|
status: "Scheduled",
|
|
origin: "Frankfurt",
|
|
destination: "Rome",
|
|
departure_time: "2023-10-09 10:00 AM",
|
|
arrival_time: "2023-10-09 12:00 PM",
|
|
gate: "A1",
|
|
});
|
|
|
|
const handleSubmit = async (event: React.FormEvent) => {
|
|
event.preventDefault();
|
|
|
|
setError(null);
|
|
|
|
const token = localStorage.getItem("token");
|
|
if (!token) {
|
|
setError("No token!");
|
|
return;
|
|
}
|
|
|
|
createFlight(flightData, token)
|
|
.then((data) => {
|
|
setFlight(data);
|
|
navigate("/home")
|
|
})
|
|
.catch((error) => {
|
|
setError(error as string);
|
|
});
|
|
};
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit}>
|
|
<label>
|
|
Flight Code:
|
|
<input
|
|
type="text"
|
|
value={flightData.flight_code}
|
|
name="Code"
|
|
onChange={(e) =>
|
|
setFlightData({ ...flightData, flight_code: e.target.value })
|
|
}
|
|
/>
|
|
</label>
|
|
<label>
|
|
Status:
|
|
<input
|
|
type="text"
|
|
name="Status"
|
|
value={flightData.status}
|
|
onChange={(e) =>
|
|
setFlightData({ ...flightData, status: e.target.value })
|
|
}
|
|
/>
|
|
</label>
|
|
<label>
|
|
Origin:
|
|
<input
|
|
type="text"
|
|
value={flightData.origin}
|
|
name="Origin"
|
|
onChange={(e) =>
|
|
setFlightData({ ...flightData, origin: e.target.value })
|
|
}
|
|
/>
|
|
</label>
|
|
<label>
|
|
Destination:
|
|
<input
|
|
type="text"
|
|
name="Destination"
|
|
value={flightData.destination}
|
|
onChange={(e) =>
|
|
setFlightData({ ...flightData, destination: e.target.value })
|
|
}
|
|
/>
|
|
</label>
|
|
<label>
|
|
Departure Time:
|
|
<input
|
|
type="text"
|
|
name="DepartureTime"
|
|
value={flightData.departure_time}
|
|
onChange={(e) =>
|
|
setFlightData({ ...flightData, departure_time: e.target.value })
|
|
}
|
|
/>
|
|
</label>
|
|
<label>
|
|
Arrival Time:
|
|
<input
|
|
type="text"
|
|
name="ArrivalTime"
|
|
value={flightData.arrival_time}
|
|
onChange={(e) =>
|
|
setFlightData({ ...flightData, arrival_time: e.target.value })
|
|
}
|
|
/>
|
|
</label>
|
|
<label>
|
|
Gate:
|
|
<input
|
|
type="text"
|
|
name="Gate"
|
|
value={flightData.gate}
|
|
onChange={(e) => setFlightData({ ...flightData, gate: e.target.value })}
|
|
/>
|
|
</label>
|
|
<button name="CreateFlightButton" type="submit">Submit</button>
|
|
</form>
|
|
);
|
|
};
|