dredgy/FlightsAPI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 8 Wiki Activity

Merge pull request 'Allow custom date time formats' (#6) from allow-custom-date-time-formats into main

Browse Source 
Reviewed-on: #6
This commit was merged in pull request #6.
This commit is contained in:
dredgy
2026-07-18 00:47:41 +10:00
parent ae77fec0da 39c0ce1b44
commit 60a3bce3bf
7 changed files with 250 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/Enums/FlightNotificationType.php
+1 -1
View File
@@ -28,7 +28,7 @@ enum FlightNotificationType: string
{
return match ($this) {
self::Booked => "{$user->name} booked a new flight",
self::Logged => "{$user->name} logged a new flight",
self::Logged => "{$user->name} logged a historic flight",
self::Cancelled => "{$user->name} cancelled a flight",
self::Departed => "{$user->name} is taking off!",
self::Arrived => "{$user->name} has landed!",
app/Models/User.php
+20 -1
View File
@@ -153,7 +153,26 @@ class User extends Authenticatable implements MustVerifyEmail
->toJson();
});
$collection = collect(json_decode($json));
$dateFormat = auth()->user()?->resolved_settings['date_format'] ?? 'j M Y';
$timeFormat = auth()->user()?->resolved_settings['time_format'] === '24hr' ? 'Hi' : 'g:iA';
$collection = collect(json_decode($json))
->map(function ($flight) use ($dateFormat, $timeFormat) {
$departure = Carbon::parse($flight->departure_date)
->setTimezone($flight->departure_airport->timezone);
$arrival = Carbon::parse($flight->arrival_date)
->setTimezone($flight->arrival_airport->timezone);
$flight->departure_date_display = $departure->format($dateFormat);
$flight->departure_time_display = $departure->format($timeFormat);
$flight->arrival_date_display = $arrival->format($dateFormat);
$flight->arrival_time_display = $arrival->format($timeFormat);
return $flight;
});
$today = now('UTC')->toDateString();
return match ($filter) {
app/Settings/SettingsRegistry.php
+37 -12
View File
@@ -13,24 +13,13 @@ class SettingsRegistry
'AI Generated Content' => 'Airline tail logos and liveries are AI generated with human cleanup. If you would rather not see any AI, then our blank aircraft templates are human created.',
'Account & Privacy' => 'Everything to do with your account.',
'Notifications' => 'What you want to hear about (or not!)',
'Localization' => 'Units of measurement, date and time preferences.',
];
}
public static function schema(): array
{
return [
[
'key' => 'distance_unit',
'type' => 'select',
'label' => 'Distance Units',
'category' => 'FlightsGoneBy Settings',
'default' => 'km',
'options' => [
['value' => 'km', 'label' => 'Kilometres (km)'],
['value' => 'mi', 'label' => 'Miles (mi)'],
['value' => 'nm', 'label' => 'Nautical miles (nm)'],
],
],
[
'category' => 'Account & Privacy',
'key' => 'profile_privacy',
@@ -42,6 +31,42 @@ class SettingsRegistry
['value' => 'private', 'label' => 'Private Profile Viewable Only By You and Your Approved Followers'],
]
],
[
'key' => 'distance_unit',
'type' => 'select',
'label' => 'Distance Units',
'category' => 'Localization',
'default' => 'km',
'options' => [
['value' => 'km', 'label' => 'Kilometres (km)'],
['value' => 'mi', 'label' => 'Miles (mi)'],
['value' => 'nm', 'label' => 'Nautical miles (nm)'],
],
],
[
'key' => 'time_format',
'type' => 'select',
'label' => 'Time Format',
'category' => 'Localization',
'default' => 'ampm',
'options' => [
['value' => 'ampm', 'label' => 'AM/PM'],
['value' => '24hr', 'label' => '24-Hour'],
],
],
[
'key' => 'date_format',
'type' => 'select',
'label' => 'Date Format',
'category' => 'Localization',
'default' => 'j M Y',
'options' => [
['value' => 'j M Y', 'label' => '20 Feb 2015'],
['value' => 'Y-m-d', 'label' => '2015-02-20'],
['value' => 'd/m/Y', 'label' => '20/02/2015'],
['value' => 'm/d/Y', 'label' => '02/20/2015'],
],
],
[
'key' => 'default_login_page',
'type' => 'select',
resources/js/Components/FlightsGoneBy/DepartureBoardTableRow.vue
+2 -2
View File
@@ -98,12 +98,12 @@ const showColumn = (column: string) => props.columnsToShow.includes(column)
<td v-if="showColumn('departure_time')" class="v-data-table__td">
<span class="time-cell">
<Mono small>{{ flight.departure_time_display }}</Mono>
<Mono small>{{flight.departure_time_display}}</Mono>
</span>
</td>
<td v-if="showColumn('arrival_time')" class="v-data-table__td arrival-time-cell">
<Mono small>{{ flight.arrival_time_display }}</Mono>
<Mono small>{{flight.arrival_time_display}}</Mono>
<DayDifference :value="flight.arrival_day_difference" />
</td>
resources/js/Pages/AddFlight.vue
+188 -66
View File
@@ -1,16 +1,16 @@
<script setup lang="ts">
import MainLayout from '@/Layouts/MainLayout.vue'
import GlassBox from '@/Components/FlightsGoneBy/GlassBox.vue'
import { Head, useForm } from '@inertiajs/vue3'
import {Head, useForm, usePage} 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, CrewType} from '@/Types/types'
import type {SeatType, FlightReason, FlightClass, CrewType, SharedProps} from '@/Types/types'
import { ref, watch, computed } from 'vue'
import { VTimePicker, VDatePicker } from 'vuetify/components'
defineOptions({ layout: MainLayout })
const page = usePage<SharedProps>().props
const props = defineProps<{
flight?: {
@@ -39,6 +39,11 @@ const props = defineProps<{
const isEdit = !!props.flight
// ── User format preferences ─────────────────────────────────────────────────
const timeFormat = computed(() => page.auth?.user?.resolved_settings?.time_format ?? 'ampm')
const pad = (n: number) => String(n).padStart(2, '0')
// ── Flight number lookup ──────────────────────────────────────────────────────
const flightNumber = ref(props.flight?.flight_number ?? '')
@@ -209,8 +214,6 @@ const aircraftOptionsData = ref<{ value: number; title: string }[]>(props.flight
// on. These refs + watchers just give the template two separate pickers while
// keeping those combined strings in sync — no server-side changes needed.
const pad = (n: number) => String(n).padStart(2, '0')
function parseDateTime(dt: string | null | undefined) {
if (!dt) return { date: null as Date | null, time: null as string | null }
const d = new Date(dt)
@@ -227,23 +230,6 @@ function combineDateTime(date: Date | null, time: string | null): string {
return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${(hh ?? '00').padStart(2, '0')}:${(mm ?? '00').padStart(2, '0')}`
}
const formatDateDisplay = (d: Date | null) =>
d ? d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' }) : ''
// Time is stored internally as a 24hr "HH:mm" string (VTimePicker's model
// value is always 24hr regardless of the `format` display prop). This just
// formats it for display in the read-only text fields.
function formatTimeDisplay(t: string | null): string {
if (!t) return ''
const [hStr, mStr] = t.split(':')
let h = parseInt(hStr, 10)
if (isNaN(h)) return ''
const ampm = h >= 12 ? 'PM' : 'AM'
h = h % 12
if (h === 0) h = 12
return `${h}:${mStr} ${ampm}`
}
function clearDepartureDate() { departureDatePart.value = null }
function clearDepartureTime() { departureTimePart.value = null }
function clearArrivalDate() { arrivalDatePart.value = null }
@@ -324,6 +310,124 @@ const arrivalMax = computed(() => getArrivalBound(form, 3))
const arrivalMinDate = computed(() => arrivalMin.value ? new Date(arrivalMin.value) : undefined)
const arrivalMaxDate = computed(() => arrivalMax.value ? new Date(arrivalMax.value) : undefined)
// ── Native date inputs ───────────────────────────────────────────────────────
// departureDatePart / arrivalDatePart stay the source of truth as Date
// objects. These computed get/set pairs are what the native <input type=date>
// elements bind to — the browser handles locale display, typing, and
// validation itself, so no custom format-aware parsing is needed here.
// The Vuetify v-date-picker is still available via a separate calendar icon
// for users who prefer to pick from a calendar rather than type.
function toIsoDateString(d: Date | null): string {
if (!d) return ''
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
}
function fromIsoDateString(value: string): Date | null {
if (!value) return null
const [y, m, d] = value.split('-').map(Number)
if (!y || !m || !d) return null
return new Date(y, m - 1, d)
}
const departureDateValue = computed({
get: () => toIsoDateString(departureDatePart.value),
set: (value: string) => { departureDatePart.value = fromIsoDateString(value) },
})
const arrivalDateValue = computed({
get: () => toIsoDateString(arrivalDatePart.value),
set: (value: string) => { arrivalDatePart.value = fromIsoDateString(value) },
})
// ── Editable, format-aware time text fields ────────────────────────────────
// departureTimePart / arrivalTimePart stay the source of truth as internal
// "HH:mm" (24hr) strings. These input refs are what the text-fields actually
// bind to, so the user can type freely; parsing only commits on blur/enter.
function formatTimeForFormat(t: string | null, format: string): string {
if (!t) return ''
const [hStr, mStr] = t.split(':')
let h = parseInt(hStr, 10)
if (isNaN(h)) return ''
if (format === '24hr') {
return `${pad(h)}:${mStr}`
}
const ampm = h >= 12 ? 'PM' : 'AM'
let h12 = h % 12
if (h12 === 0) h12 = 12
return `${h12}:${mStr} ${ampm}`
}
function parseTimeInput(input: string): string | null {
const trimmed = input.trim()
if (!trimmed) return null
// ampm form: "2:30 PM", "2:30PM", "2 PM", "2PM"
let match = trimmed.match(/^(\d{1,2}):?(\d{2})?\s*([AaPp][Mm])$/)
if (match) {
let h = parseInt(match[1], 10)
const m = match[2] ? parseInt(match[2], 10) : 0
const ampm = match[3].toUpperCase()
if (h >= 1 && h <= 12 && m >= 0 && m <= 59) {
if (ampm === 'PM' && h !== 12) h += 12
if (ampm === 'AM' && h === 12) h = 0
return `${pad(h)}:${pad(m)}`
}
return null
}
// 24hr form: "14:30" or "1430"
match = trimmed.match(/^(\d{1,2}):?(\d{2})$/)
if (match) {
const h = parseInt(match[1], 10)
const m = parseInt(match[2], 10)
if (h >= 0 && h <= 23 && m >= 0 && m <= 59) {
return `${pad(h)}:${pad(m)}`
}
}
return null
}
const departureTimeInput = ref(formatTimeForFormat(departureTimePart.value, timeFormat.value))
const arrivalTimeInput = ref(formatTimeForFormat(arrivalTimePart.value, timeFormat.value))
watch([departureTimePart, timeFormat], () => {
departureTimeInput.value = formatTimeForFormat(departureTimePart.value, timeFormat.value)
})
watch([arrivalTimePart, timeFormat], () => {
arrivalTimeInput.value = formatTimeForFormat(arrivalTimePart.value, timeFormat.value)
})
function commitDepartureTimeInput() {
if (!departureTimeInput.value.trim()) {
departureTimePart.value = null
return
}
const parsed = parseTimeInput(departureTimeInput.value)
if (parsed !== null) {
departureTimePart.value = parsed
} else {
departureTimeInput.value = formatTimeForFormat(departureTimePart.value, timeFormat.value)
}
}
function commitArrivalTimeInput() {
if (!arrivalTimeInput.value.trim()) {
arrivalTimePart.value = null
return
}
const parsed = parseTimeInput(arrivalTimeInput.value)
if (parsed !== null) {
arrivalTimePart.value = parsed
} else {
arrivalTimeInput.value = formatTimeForFormat(arrivalTimePart.value, timeFormat.value)
}
}
</script>
<template>
@@ -368,44 +472,51 @@ const arrivalMaxDate = computed(() => arrivalMax.value ? new Date(arrivalMax.val
<!-- ── Departure date + time ──────────────────────────────── -->
<v-row>
<v-col cols="12" sm="6">
<v-menu v-model="depDateMenu" :close-on-content-click="false">
<template #activator="{ props: menuProps }">
<v-text-field
v-bind="menuProps"
:model-value="formatDateDisplay(departureDatePart)"
label="Departure Date"
readonly
clearable
prepend-inner-icon="mdi-calendar"
:disabled="!lookupComplete"
:error-messages="submitForm.errors.departure_date"
@click:clear="clearDepartureDate"
/>
<v-text-field
v-model="departureDateValue"
type="date"
label="Departure Date"
prepend-inner-icon="mdi-calendar"
:disabled="!lookupComplete"
:error-messages="submitForm.errors.departure_date"
>
<template #append-inner>
<v-menu v-model="depDateMenu" :close-on-content-click="false">
<template #activator="{ props: menuProps }">
<v-icon
v-bind="menuProps"
icon="mdi-calendar-month"
style="cursor: pointer"
/>
</template>
<v-date-picker
v-model="departureDatePart"
@update:model-value="depDateMenu = false"
/>
</v-menu>
</template>
<v-date-picker
v-model="departureDatePart"
@update:model-value="depDateMenu = false"
/>
</v-menu>
</v-text-field>
</v-col>
<v-col cols="12" sm="6">
<v-menu v-model="depTimeMenu" :close-on-content-click="false">
<template #activator="{ props: menuProps }">
<v-text-field
v-bind="menuProps"
:model-value="formatTimeDisplay(departureTimePart)"
v-model="departureTimeInput"
label="Departure Time"
readonly
clearable
prepend-inner-icon="mdi-clock-outline"
:placeholder="timeFormat === '24hr' ? 'e.g. 1430' : 'e.g. 2:30 PM'"
:disabled="!lookupComplete"
@click:clear="clearDepartureTime"
@blur="commitDepartureTimeInput"
@keydown.enter="commitDepartureTimeInput"
/>
</template>
<v-card>
<v-time-picker
v-model="departureTimePart"
format="ampm"
:format="timeFormat"
scrollable
/>
<v-card-actions>
@@ -420,46 +531,53 @@ const arrivalMaxDate = computed(() => arrivalMax.value ? new Date(arrivalMax.val
<!-- ── Arrival date + time ─────────────────────────────────── -->
<v-row>
<v-col cols="12" sm="6">
<v-menu v-model="arrDateMenu" :close-on-content-click="false">
<template #activator="{ props: menuProps }">
<v-text-field
v-bind="menuProps"
:model-value="formatDateDisplay(arrivalDatePart)"
label="Arrival Date"
readonly
clearable
prepend-inner-icon="mdi-calendar"
:disabled="!lookupComplete"
:error-messages="submitForm.errors.arrival_date"
@click:clear="clearArrivalDate"
/>
<v-text-field
v-model="arrivalDateValue"
type="date"
label="Arrival Date"
prepend-inner-icon="mdi-calendar"
:disabled="!lookupComplete"
:error-messages="submitForm.errors.arrival_date"
>
<template #append-inner>
<v-menu v-model="arrDateMenu" :close-on-content-click="false">
<template #activator="{ props: menuProps }">
<v-icon
v-bind="menuProps"
icon="mdi-calendar-month"
style="cursor: pointer"
/>
</template>
<v-date-picker
v-model="arrivalDatePart"
:min="arrivalMinDate"
:max="arrivalMaxDate"
@update:model-value="arrDateMenu = false"
/>
</v-menu>
</template>
<v-date-picker
v-model="arrivalDatePart"
:min="arrivalMinDate"
:max="arrivalMaxDate"
@update:model-value="arrDateMenu = false"
/>
</v-menu>
</v-text-field>
</v-col>
<v-col cols="12" sm="6">
<v-menu v-model="arrTimeMenu" :close-on-content-click="false">
<template #activator="{ props: menuProps }">
<v-text-field
v-bind="menuProps"
:model-value="formatTimeDisplay(arrivalTimePart)"
v-model="arrivalTimeInput"
label="Arrival Time"
readonly
clearable
prepend-inner-icon="mdi-clock-outline"
:placeholder="timeFormat === '24hr' ? 'e.g. 1430' : 'e.g. 2:30 PM'"
:disabled="!lookupComplete"
@click:clear="clearArrivalTime"
@blur="commitArrivalTimeInput"
@keydown.enter="commitArrivalTimeInput"
/>
</template>
<v-card>
<v-time-picker
v-model="arrivalTimePart"
format="ampm"
:format="timeFormat"
scrollable
/>
<v-card-actions>
@@ -650,4 +768,8 @@ const arrivalMaxDate = computed(() => arrivalMax.value ? new Date(arrivalMax.val
</template>
<style scoped>
:deep(input[type="date"]::-webkit-calendar-picker-indicator) {
display: none;
-webkit-appearance: none;
}
</style>
resources/js/Pages/ReconcileFlight.vue
-1
View File
@@ -191,7 +191,6 @@ watch(() => form.flight_reason, (val) => console.log('flight_reason changed:', v
<v-select v-model="form.seat_type" label="Seat Type" :items="flight.seat_types" :error-messages="submitForm.errors.seat_type_id" />
</v-col>
<v-col cols="12" md="6">
{{console.log(form.flight_reason)}}
<v-select v-model="form.flight_reason" label="Reason" :items="flight.flight_reasons" :error-messages="submitForm.errors.flight_reason_id" />
</v-col>
</v-row>
resources/js/Types/types.d.ts
Vendored
+2
View File
@@ -30,6 +30,8 @@ export interface UserSettings {
show_map_legend: boolean
hide_impossible_achievements: boolean
hide_map_filters: boolean
time_format: "ampm" | "24hr"
date_format: string
}