424 lines
19 KiB
Vue
424 lines
19 KiB
Vue
<script setup lang="ts">
|
|
import MainLayout from '@/Layouts/MainLayout.vue'
|
|
import GlassBox from '@/Components/FlightsGoneBy/GlassBox.vue'
|
|
import { Head, useForm } from '@inertiajs/vue3'
|
|
import AirlineSearchBox from '@/Components/FlightsGoneBy/AirlineSearchBox.vue'
|
|
import AircraftSearchBox from '@/Components/FlightsGoneBy/AircraftSearchBox.vue'
|
|
import AirportSearchBox from '@/Components/FlightsGoneBy/AirportSearchBox.vue'
|
|
import type { SeatType, FlightReason, FlightClass} from '@/Types/types'
|
|
import { ref, watch, computed } from 'vue'
|
|
|
|
defineOptions({ layout: MainLayout })
|
|
|
|
|
|
const props = defineProps<{
|
|
flight?: {
|
|
id: number
|
|
flight_number: string
|
|
departure_date: string
|
|
arrival_date: string
|
|
aircraft_registration: string
|
|
seat_number: string
|
|
note: string
|
|
auto_update: boolean
|
|
seat_type: SeatType | null
|
|
flight_class: FlightClass | null
|
|
flight_reason: FlightReason | null
|
|
airline_options: { value: number; title: string }[]
|
|
from_options: { value: number; title: string; country_code: string }[]
|
|
to_options: { value: number; title: string; country_code: string }[]
|
|
aircraft_options: { value: number; title: string }[]
|
|
}
|
|
seat_types: SeatType[]
|
|
flight_classes: FlightClass[]
|
|
flight_reasons: FlightReason[]
|
|
}>()
|
|
|
|
const isEdit = !!props.flight
|
|
|
|
// ── Flight number lookup ──────────────────────────────────────────────────────
|
|
|
|
const flightNumber = ref(props.flight?.flight_number ?? '')
|
|
const lookupLoading = ref(false)
|
|
const lookupError = ref<string | null>(null)
|
|
const lookupComplete = ref(true)
|
|
|
|
interface LookupResult {
|
|
airline_options: { value: number; title: string }[]
|
|
from_options: { value: number; title: string; country_code: string }[]
|
|
to_options: { value: number; title: string; country_code: string }[]
|
|
aircraft_options: { value: number; title: string }[]
|
|
}
|
|
|
|
const lookupResult = ref<LookupResult | null>(null)
|
|
const lookupKey = ref(0)
|
|
|
|
async function lookupFlight() {
|
|
if (!flightNumber.value.trim()) return
|
|
lookupLoading.value = true
|
|
lookupError.value = null
|
|
lookupResult.value = null
|
|
|
|
try {
|
|
const response = await fetch(`${route('flights.lookup')}?number=${encodeURIComponent(flightNumber.value.trim())}`, {
|
|
headers: { Accept: 'application/json' },
|
|
})
|
|
const data = await response.json()
|
|
if (!response.ok) {
|
|
lookupError.value = data.message ?? 'Lookup failed.'
|
|
return
|
|
}
|
|
lookupResult.value = data
|
|
lookupComplete.value = true
|
|
|
|
if (data.airline_options?.length) {
|
|
airlineOptionsData.value = data.airline_options
|
|
if (!form.airline) form.airline = data.airline_options[0]
|
|
}
|
|
if (data.from_options?.length) {
|
|
fromOptionsData.value = data.from_options
|
|
if (data.from_options.length === 1 && !form.from) form.from = data.from_options[0]
|
|
}
|
|
if (data.to_options?.length) {
|
|
toOptionsData.value = data.to_options
|
|
if (data.to_options.length === 1 && !form.to) form.to = data.to_options[0]
|
|
}
|
|
if (data.aircraft_options?.length) {
|
|
aircraftOptionsData.value = data.aircraft_options
|
|
if (data.aircraft_options.length === 1 && !form.aircraft) form.aircraft = data.aircraft_options[0]
|
|
}
|
|
|
|
lookupKey.value++
|
|
} catch (e) {
|
|
lookupError.value = String(e)
|
|
} finally {
|
|
lookupLoading.value = false
|
|
}
|
|
}
|
|
|
|
// ── Display form (drives the template) ───────────────────────────────────────
|
|
|
|
const form = useForm({
|
|
flight_number: props.flight?.flight_number ?? '',
|
|
departure_date: props.flight?.departure_date ?? '',
|
|
arrival_date: props.flight?.arrival_date ?? '',
|
|
from: props.flight?.from_options[0] ?? null as { value: number; title: string; country_code: string } | null,
|
|
to: props.flight?.to_options[0] ?? null as { value: number; title: string; country_code: string } | null,
|
|
airline: props.flight?.airline_options[0] ?? null as { value: number; title: string } | null,
|
|
aircraft: props.flight?.aircraft_options[0] ?? null as { value: number; title: string } | null,
|
|
aircraft_registration: props.flight?.aircraft_registration ?? '',
|
|
seat_number: props.flight?.seat_number ?? '',
|
|
seat_type: props.flight?.seat_type ?? props.seat_types[0] ?? null as SeatType | null,
|
|
flight_class: props.flight?.flight_class ?? props.flight_classes[0] ?? null as FlightClass | null,
|
|
flight_reason: props.flight?.flight_reason ?? props.flight_reasons[0] ?? null as FlightReason | null,
|
|
note: props.flight?.note ?? '',
|
|
auto_update: props.flight?.auto_update ?? false,
|
|
})
|
|
|
|
// ── Submit form (ID-based, what actually gets sent) ───────────────────────────
|
|
|
|
const submitForm = useForm({
|
|
flight_number: '' as string | null,
|
|
departure_date: '' as string | null,
|
|
arrival_date: '' as string | null,
|
|
from_id: null as number | null,
|
|
to_id: null as number | null,
|
|
airline_id: null as number | null,
|
|
aircraft_id: null as number | null,
|
|
aircraft_registration: '' as string | null,
|
|
seat_number: '' as string | null,
|
|
seat_type_id: null as number | null,
|
|
flight_class_id: null as number | null,
|
|
flight_reason_id: null as number | null,
|
|
note: '' as string | null,
|
|
auto_update: false,
|
|
})
|
|
|
|
function submit() {
|
|
submitForm.flight_number = form.flight_number
|
|
submitForm.departure_date = form.departure_date
|
|
submitForm.arrival_date = form.arrival_date
|
|
submitForm.from_id = form.from?.value ?? null
|
|
submitForm.to_id = form.to?.value ?? null
|
|
submitForm.airline_id = form.airline?.value ?? null
|
|
submitForm.aircraft_id = form.aircraft?.value ?? null
|
|
submitForm.aircraft_registration = form.aircraft_registration
|
|
submitForm.seat_number = form.seat_number
|
|
submitForm.seat_type_id = form.seat_type?.id
|
|
submitForm.flight_class_id = form.flight_class?.id
|
|
submitForm.flight_reason_id = form.flight_reason?.id
|
|
submitForm.note = form.note
|
|
submitForm.auto_update = form.auto_update
|
|
|
|
if (isEdit) {
|
|
submitForm.put(route('flights.update', { flight: props.flight!.id }))
|
|
} else {
|
|
submitForm.post(route('flights.store'))
|
|
}
|
|
}
|
|
|
|
// ── Prefilled options ─────────────────────────────────────────────────────────
|
|
|
|
const airlineOptionsData = ref<{ value: number; title: string }[]>(props.flight?.airline_options ?? [])
|
|
const fromOptionsData = ref<{ value: number; title: string; country_code: string }[]>(props.flight?.from_options ?? [])
|
|
const toOptionsData = ref<{ value: number; title: string; country_code: string }[]>(props.flight?.to_options ?? [])
|
|
const aircraftOptionsData = ref<{ value: number; title: string }[]>(props.flight?.aircraft_options ?? [])
|
|
|
|
|
|
watch(() => form.departure_date, (newVal) => {
|
|
if (!newVal) return
|
|
const dep = new Date(newVal)
|
|
const arr = new Date(dep.getTime() + 60 * 60 * 1000)
|
|
|
|
// Format in local time, not UTC
|
|
const pad = (n: number) => String(n).padStart(2, '0')
|
|
form.arrival_date = `${arr.getFullYear()}-${pad(arr.getMonth() + 1)}-${pad(arr.getDate())}T${pad(arr.getHours())}:${pad(arr.getMinutes())}`
|
|
})
|
|
|
|
const arrivalMin = computed(() => {
|
|
if (!form.departure_date) return undefined
|
|
const pad = (n: number) => String(n).padStart(2, '0')
|
|
const d = new Date(form.departure_date)
|
|
d.setDate(d.getDate() - 2)
|
|
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`
|
|
})
|
|
|
|
const arrivalMax = computed(() => {
|
|
if (!form.departure_date) return undefined
|
|
const pad = (n: number) => String(n).padStart(2, '0')
|
|
const d = new Date(form.departure_date)
|
|
d.setDate(d.getDate() + 3)
|
|
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<Head :title="isEdit ? 'Edit Flight' : 'Add Flight'" />
|
|
|
|
<GlassBox
|
|
:title="isEdit ? 'Edit Flight' : 'Add Flight'"
|
|
:blurb="isEdit
|
|
? 'Update the details for this flight.'
|
|
: 'Enter a flight number then press Look Up to continue.'"
|
|
>
|
|
<v-form style="width: 100%">
|
|
<v-container>
|
|
|
|
<!-- ── Flight number + lookup ────────────────────────────── -->
|
|
<v-row>
|
|
<v-col cols="12">
|
|
<div class="d-flex ga-3 align-start">
|
|
<v-text-field
|
|
v-model="flightNumber"
|
|
label="Flight Number"
|
|
placeholder="e.g. QF1"
|
|
hide-details
|
|
@keydown.enter="lookupFlight"
|
|
/>
|
|
<v-btn
|
|
:loading="lookupLoading"
|
|
:disabled="!flightNumber.trim()"
|
|
size="large"
|
|
style="height: 56px"
|
|
@click="lookupFlight"
|
|
>
|
|
Look Up
|
|
</v-btn>
|
|
</div>
|
|
<div v-if="lookupError" class="text-error text-caption mt-1">
|
|
{{ lookupError }}
|
|
</div>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- ── Departure + Arrival datetime ──────────────────────── -->
|
|
<v-row>
|
|
<v-col cols="12" md="6">
|
|
<v-text-field
|
|
v-model="form.departure_date"
|
|
label="Departure Date & Time"
|
|
type="datetime-local"
|
|
:disabled="!lookupComplete"
|
|
:error-messages="submitForm.errors.departure_date"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" md="6">
|
|
<v-text-field
|
|
v-model="form.arrival_date"
|
|
label="Arrival Date & Time"
|
|
type="datetime-local"
|
|
:disabled="!lookupComplete"
|
|
:error-messages="submitForm.errors.arrival_date"
|
|
:min="arrivalMin"
|
|
:max="arrivalMax"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- ── From ──────────────────────────────────────────────── -->
|
|
<v-row>
|
|
<v-col cols="12">
|
|
<AirportSearchBox
|
|
v-model="form.from"
|
|
label="From"
|
|
:prefilled-options="fromOptionsData"
|
|
:error-messages="submitForm.errors.from_id"
|
|
:disabled="!lookupComplete"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- ── To ────────────────────────────────────────────────── -->
|
|
<v-row>
|
|
<v-col cols="12">
|
|
<AirportSearchBox
|
|
v-model="form.to"
|
|
label="To"
|
|
:prefilled-options="toOptionsData"
|
|
:error-messages="submitForm.errors.to_id"
|
|
:disabled="!lookupComplete"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- ── Airline ────────────────────────────────────────────── -->
|
|
<v-row>
|
|
<v-col cols="12">
|
|
<AirlineSearchBox
|
|
:key="`airline-${lookupKey}`"
|
|
v-model="form.airline"
|
|
:prefilled-options="airlineOptionsData"
|
|
:error-messages="submitForm.errors.airline_id"
|
|
:disabled="!lookupComplete"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- ── Aircraft ───────────────────────────────────────────── -->
|
|
<v-row>
|
|
<v-col cols="12">
|
|
<AircraftSearchBox
|
|
:key="`aircraft-${lookupKey}`"
|
|
v-model="form.aircraft"
|
|
:prefilled-options="aircraftOptionsData"
|
|
:error-messages="submitForm.errors.aircraft_id"
|
|
:disabled="!lookupComplete"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
<!-- ── Registration + Flight class ────────────────────────── -->
|
|
<v-row>
|
|
<v-col cols="12" md="6">
|
|
<v-text-field
|
|
v-model="form.aircraft_registration"
|
|
label="Aircraft Registration"
|
|
placeholder="e.g. VH-OQA"
|
|
:disabled="!lookupComplete"
|
|
:error-messages="submitForm.errors.aircraft_registration"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" md="6">
|
|
<v-select
|
|
v-model="form.flight_class"
|
|
label="Flight Class"
|
|
:items="flight_classes"
|
|
item-title="name"
|
|
item-value="id"
|
|
:return-object="true"
|
|
:disabled="!lookupComplete"
|
|
:error-messages="submitForm.errors.flight_class_id"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- ── Seat number + Seat type ────────────────────────────── -->
|
|
<v-row>
|
|
<v-col cols="12" md="6">
|
|
<v-text-field
|
|
v-model="form.seat_number"
|
|
label="Seat Number"
|
|
placeholder="e.g. 12A"
|
|
:disabled="!lookupComplete"
|
|
:error-messages="submitForm.errors.seat_number"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" md="6">
|
|
<v-select
|
|
v-model="form.seat_type"
|
|
label="Seat Type"
|
|
:items="seat_types"
|
|
item-title="name"
|
|
item-value="id"
|
|
:return-object="true"
|
|
:disabled="!lookupComplete"
|
|
:error-messages="submitForm.errors.seat_type_id"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- ── Flight reason ──────────────────────────────────────── -->
|
|
<v-row>
|
|
<v-col cols="12" md="6">
|
|
<v-select
|
|
v-model="form.flight_reason"
|
|
label="Flight Reason"
|
|
:items="flight_reasons"
|
|
item-title="name"
|
|
item-value="id"
|
|
:return-object="true"
|
|
:disabled="!lookupComplete"
|
|
:error-messages="submitForm.errors.flight_reason_id"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- ── Note ──────────────────────────────────────────────── -->
|
|
<v-row>
|
|
<v-col cols="12">
|
|
<v-textarea
|
|
v-model="form.note"
|
|
label="Note"
|
|
placeholder="Any additional notes…"
|
|
:disabled="!lookupComplete"
|
|
:error-messages="submitForm.errors.note"
|
|
rows="3"
|
|
auto-grow
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- ── Auto update ────────────────────────────────────────── -->
|
|
<v-row>
|
|
<v-col cols="12">
|
|
<v-checkbox
|
|
v-model="form.auto_update"
|
|
label="Automatically update aircraft details within 24 hours of flight departure."
|
|
:disabled="!lookupComplete"
|
|
hide-details
|
|
density="compact"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
<!-- ── Submit ─────────────────────────────────────────────── -->
|
|
<v-row>
|
|
<v-col cols="12">
|
|
<v-btn
|
|
block
|
|
size="large"
|
|
:loading="submitForm.processing"
|
|
:disabled="!lookupComplete || submitForm.processing"
|
|
@click="submit"
|
|
>
|
|
{{ isEdit ? 'Save Changes' : 'Add Flight' }}
|
|
</v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
</v-container>
|
|
</v-form>
|
|
</GlassBox>
|
|
</template>
|
|
|
|
<style scoped>
|
|
</style>
|