Merge branch 'registerFlight' into 'main'

Register flight form

See merge request ma03081/COM3014!22

client/src/components/FlightCreationForm/FlightCreationForm.scss

+.flightCreationForm {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.register-card {
+  width: 20vw;
+  min-width: 350px;
+}

client/src/components/FlightCreationForm/FlightCreationForm.tsx

+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+
+interface IFlightCreationForm {
+    origin: string;
+    destination: string;
+    departure: string;
+    arrival: string;
+    economyCapacity: number;
+    businessCapacity: number;
+    economyPrice: number;
+    businessPrice: number;
+}
+
+function FlightCreationForm() {
+  const [error, setError] = useState('');
+  const { register, handleSubmit } = useForm<IFlightCreationForm>({mode: 'onChange'});
+
+  const onSubmit = (formValue : IFlightCreationForm) => {
+    if (!Number.isInteger(formValue.businessCapacity) || !Number.isInteger(formValue.economyCapacity)) {
+        setError('Please enter an integer for the capacity.')
+        return;
+    }
+  }
+
+  return (
+    <>
+      <div className='flightCreationForm'>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <div className='card register-card'>
+
+            <div className='form-group'>
+              <label>Origin</label>
+              <input type='text' placeholder='Enter origin' {...register('origin', { required: true })} />
+            </div>
+            
+            <div className='form-group'>
+              <label>Destination</label>
+              <input type='text' placeholder='Enter destination' {...register('destination', { required: true })} />
+            </div>
+
+            <div className='form-group'>
+              <label>Departure Time</label>
+              <input type='datetime-local' placeholder='Enter departure time' {...register('departure', { required: true })} />
+            </div>
+
+            <div className='form-group'>
+              <label>Arrival Time</label>
+              <input type='datetime-local' placeholder='Enter arrival time' {...register('arrival', { required: true })} />
+            </div>
+
+            <div className='form-group'>
+              <label>Economy Class Capacity</label>
+              <input type='number' placeholder='Enter capacity' {...register('economyCapacity', { required: true })} />
+            </div>
+
+            <div className='form-group'>
+              <label>Business Class Capacity</label>
+              <input type='number' placeholder='Enter capacity' {...register('businessCapacity', { required: true })} />
+            </div>
+
+            <div className='form-group'>
+              <label>Economy Class Price</label>
+              <input type='number' placeholder='Enter price' {...register('economyPrice', { required: true })} />
+            </div>
+
+            <div className='form-group'>
+              <label>Business Class Price</label>
+              <input type='number' placeholder='Enter price' {...register('businessPrice', { required: true })} />
+            </div>
+
+            <div className='form-group'>
+              <button type='submit'>Submit</button>
+            </div>
+
+            <div className='form-group'>
+              {error && <span>{error}</span>}
+            </div>
+          </div>
+        </form>
+      </div>
+    </>
+  )
+}
+
+export default FlightCreationForm;