113 lines
3.2 KiB
TypeScript
113 lines
3.2 KiB
TypeScript
import React, { useState } from "react";
|
|
import { FlightEditNotNull, Flight } from "../../Types";
|
|
import { useNavigate, useParams } from "react-router";
|
|
import "./FlightForm.css";
|
|
import { editFlight } from "../../Api";
|
|
|
|
interface Props {
|
|
flight?: Flight;
|
|
}
|
|
|
|
export const EditFlight: React.FC<Props> = (props) => {
|
|
const navigate = useNavigate();
|
|
let { id } = useParams();
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const [flightData, setFlightData] = useState<FlightEditNotNull>({
|
|
status: "",
|
|
departure_time: "",
|
|
arrival_time: "",
|
|
gate: ""
|
|
});
|
|
|
|
const handleSubmit = async (event: React.FormEvent) => {
|
|
event.preventDefault();
|
|
|
|
setError(null);
|
|
|
|
const token = localStorage.getItem("token");
|
|
if (!token) {
|
|
setError("No token!");
|
|
return;
|
|
}
|
|
|
|
let data: any = {}
|
|
if (flightData.arrival_time != "") {
|
|
data["arrival_time"] = flightData.arrival_time
|
|
}
|
|
if (flightData.departure_time != ""){
|
|
data["departure_time"] = flightData.departure_time
|
|
}
|
|
|
|
if (flightData.status != ""){
|
|
data["status"] = flightData.status
|
|
}
|
|
if (flightData.gate != ""){
|
|
data["gate"] = flightData.gate
|
|
}
|
|
|
|
|
|
if (id == null || id == undefined)
|
|
return;
|
|
|
|
editFlight(id, data, token)
|
|
.then((data) => {
|
|
navigate("/home")
|
|
})
|
|
.catch((error) => {
|
|
try {
|
|
setError(JSON.parse(error.response.data)["detail"] as string);
|
|
} catch {}
|
|
});
|
|
};
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit}>
|
|
{error &&
|
|
<div className="form-error">
|
|
<p><strong>Error:</strong> {error}</p>
|
|
</div>
|
|
}
|
|
<label>
|
|
Status:
|
|
<input
|
|
type="text"
|
|
value={flightData?.status}
|
|
onChange={(e) =>
|
|
setFlightData({ ...flightData, status: e.target.value })
|
|
}
|
|
/>
|
|
</label>
|
|
<label>
|
|
Departure Time:
|
|
<input
|
|
type="text"
|
|
value={flightData?.departure_time}
|
|
onChange={(e) =>
|
|
setFlightData({ ...flightData, departure_time: e.target.value })
|
|
}
|
|
/>
|
|
</label>
|
|
<label>
|
|
Arrival Time:
|
|
<input
|
|
type="text"
|
|
value={flightData?.arrival_time}
|
|
onChange={(e) =>
|
|
setFlightData({ ...flightData, arrival_time: e.target.value })
|
|
}
|
|
/>
|
|
</label>
|
|
<label>
|
|
Gate:
|
|
<input
|
|
type="text"
|
|
value={flightData?.gate}
|
|
onChange={(e) => setFlightData({ ...flightData, gate: e.target.value })}
|
|
/>
|
|
</label>
|
|
<button type="submit">Submit</button>
|
|
</form>
|
|
);
|
|
};
|