Add Meta Description to App

dockerfile

@@ -12,9 +12,6 @@ COPY . .
 
 RUN composer install --no-dev --optimize-autoloader
 
-ARG APP_VERSION=Dev
-ENV VITE_APP_VERSION=$APP_VERSION
-
 RUN npm install && npm run build && rm -f public/hot
 
 COPY docker/nginx.conf /etc/nginx/nginx.conf

resources/js/Components/FlightsGoneBy/GlassBox.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 withDefaults(defineProps<{
-    title: string,
+    title?: string,
     wide?: boolean,
     blurb?: string
 }>(), { wide: false })

resources/js/Components/FlightsGoneBy/MainFooter.vue

@@ -4,14 +4,12 @@ import { SharedProps } from "@/Types/types"
 
 const page = usePage<SharedProps>().props
 const year = new Date().getFullYear()
-const version = __APP_VERSION__
 </script>
 
 <template>
     <footer class="glass">
         <span class="footer-copyright">
             &copy; {{ year }} FlightsGoneBy
-            <span class="footer-version">v{{ version }}</span>
         </span>
 
         <span class="footer-links">
@@ -75,9 +73,4 @@ footer {
         font-size: 0.6rem;
     }
 }
-
-.footer-version {
-    opacity: 0.8;
-    margin-left: 0.4em;
-}
 </style>

resources/js/Pages/AddFlight.vue

@@ -7,7 +7,6 @@ import AircraftSearchBox from '@/Components/FlightsGoneBy/AircraftSearchBox.vue'
 import AirportSearchBox from '@/Components/FlightsGoneBy/AirportSearchBox.vue'
 import type {SeatType, FlightReason, FlightClass, CrewType} from '@/Types/types'
 import { ref, watch, computed } from 'vue'
-import { VTimePicker, VDatePicker } from 'vuetify/components'
 
 defineOptions({ layout: MainLayout })
 
@@ -92,20 +91,6 @@ async function lookupFlight() {
             if (!form.aircraft) form.aircraft = data.aircraft_options[0]
         }
 
-        // Populate scheduled times if the API returned them and the user
-        // hasn't already entered a time themselves. Suppress the +1hr
-        // auto-fill guess while doing this, since we have real data.
-        suppressArrivalAutoFill = true
-        const scheduledDep = normalizeTimeString(data.scheduled_departure_time)
-        if (scheduledDep && !departureTimePart.value) {
-            departureTimePart.value = scheduledDep
-        }
-        const scheduledArr = normalizeTimeString(data.scheduled_arrival_time)
-        if (scheduledArr && !arrivalTimePart.value) {
-            arrivalTimePart.value = scheduledArr
-        }
-        suppressArrivalAutoFill = false
-
         lookupKey.value++
     } catch (e) {
         lookupError.value = String(e)
@@ -203,117 +188,19 @@ const fromOptionsData     = ref<{ value: number; title: string; country_code: st
 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 ?? [])
 
-// ── Split date/time pickers ───────────────────────────────────────────────────
-// form.departure_date / form.arrival_date stay as the single source of truth
-// (YYYY-MM-DDTHH:mm strings) that the rest of the component and submit() rely
-// 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')
+watch(() => form.departure_date, (newVal) => {
-
+    if (!newVal || form.arrival_date) return
-function parseDateTime(dt: string | null | undefined) {
+    const dep = new Date(newVal)
-    if (!dt) return { date: null as Date | null, time: null as string | null }
-    const d = new Date(dt)
-    if (isNaN(d.getTime())) return { date: null as Date | null, time: null as string | null }
-    return {
-        date: new Date(d.getFullYear(), d.getMonth(), d.getDate()),
-        time: `${pad(d.getHours())}:${pad(d.getMinutes())}`,
-    }
-}
-
-function combineDateTime(date: Date | null, time: string | null): string {
-    if (!date) return ''
-    const [hh, mm] = (time ?? '00:00').split(':')
-    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 }
-function clearArrivalTime()   { arrivalTimePart.value = null }
-
-// Normalizes whatever shape the API sends a scheduled time in ("14:30",
-// "14:30:00", or a full datetime string) down to the internal "HH:mm" format.
-function normalizeTimeString(t: string | null | undefined): string | null {
-    if (!t) return null
-    const match = t.match(/(\d{1,2}):(\d{2})/)
-    if (match) {
-        return `${match[1].padStart(2, '0')}:${match[2]}`
-    }
-    const d = new Date(t)
-    if (!isNaN(d.getTime())) {
-        return `${pad(d.getHours())}:${pad(d.getMinutes())}`
-    }
-    return null
-}
-
-const depInit = parseDateTime(form.departure_date)
-const arrInit = parseDateTime(form.arrival_date)
-
-const departureDatePart = ref<Date | null>(depInit.date)
-const departureTimePart = ref<string | null>(depInit.time)
-const arrivalDatePart   = ref<Date | null>(arrInit.date)
-const arrivalTimePart   = ref<string | null>(arrInit.time)
-
-const depDateMenu = ref(false)
-const depTimeMenu = ref(false)
-const arrDateMenu = ref(false)
-const arrTimeMenu = ref(false)
-
-// A short guard so programmatic updates (e.g. auto-fill of arrival) don't
-// fight with the "only auto-fill once" behaviour below.
-let suppressArrivalAutoFill = false
-
-// Keep form.departure_date in sync whenever either split piece changes
-watch([departureDatePart, departureTimePart], () => {
-    form.departure_date = combineDateTime(departureDatePart.value, departureTimePart.value)
-})
-
-// Keep form.arrival_date in sync whenever either split piece changes
-watch([arrivalDatePart, arrivalTimePart], () => {
-    if (suppressArrivalAutoFill) return
-    form.arrival_date = combineDateTime(arrivalDatePart.value, arrivalTimePart.value)
-})
-
-// Auto-fill arrival (+1hr) the first time a departure TIME is chosen (and a
-// departure date is already set) and arrival is still empty. Picking the
-// departure date alone no longer triggers this — only setting the time does.
-watch(departureTimePart, (newTime) => {
-    if (suppressArrivalAutoFill) return
-    if (!newTime || !departureDatePart.value || arrivalDatePart.value) return
-
-    const dep = new Date(departureDatePart.value)
-    const [h, m] = newTime.split(':').map(Number)
-    dep.setHours(h, m)
     const arr = new Date(dep.getTime() + 60 * 60 * 1000)
 
-    suppressArrivalAutoFill = true
+    const pad = (n: number) => String(n).padStart(2, '0')
-    arrivalDatePart.value = new Date(arr.getFullYear(), arr.getMonth(), arr.getDate())
+    form.arrival_date = `${arr.getFullYear()}-${pad(arr.getMonth() + 1)}-${pad(arr.getDate())}T${pad(arr.getHours())}:${pad(arr.getMinutes())}`
-    arrivalTimePart.value = `${pad(arr.getHours())}:${pad(arr.getMinutes())}`
+})
-    suppressArrivalAutoFill = false
-
-    form.arrival_date = combineDateTime(arrivalDatePart.value, arrivalTimePart.value)
-}, { flush: 'sync' })
 
 const getArrivalBound = (form: any, offsetDays: number) => {
     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() + offsetDays)
     return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`
@@ -321,9 +208,6 @@ const getArrivalBound = (form: any, offsetDays: number) => {
 
 const arrivalMin = computed(() => getArrivalBound(form, -2))
 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)
 </script>
 
 <template>
@@ -365,109 +249,27 @@ const arrivalMaxDate = computed(() => arrivalMax.value ? new Date(arrivalMax.val
                     </v-col>
                 </v-row>
 
-                <!-- ── Departure date + time ──────────────────────────────── -->
+                <!-- ── Departure + Arrival datetime ──────────────────────── -->
                 <v-row>
-                    <v-col cols="12" sm="6">
+                    <v-col cols="12" md="6">
-                        <v-menu v-model="depDateMenu" :close-on-content-click="false">
+                        <v-text-field
-                            <template #activator="{ props: menuProps }">
+                            v-model="form.departure_date"
-                                <v-text-field
+                            label="Departure Date & Time"
-                                    v-bind="menuProps"
+                            type="datetime-local"
-                                    :model-value="formatDateDisplay(departureDatePart)"
+                            :disabled="!lookupComplete"
-                                    label="Departure Date"
+                            :error-messages="submitForm.errors.departure_date"
-                                    readonly
+                        />
-                                    clearable
-                                    prepend-inner-icon="mdi-calendar"
-                                    :disabled="!lookupComplete"
-                                    :error-messages="submitForm.errors.departure_date"
-                                    @click:clear="clearDepartureDate"
-                                />
-                            </template>
-                            <v-date-picker
-                                v-model="departureDatePart"
-                                @update:model-value="depDateMenu = false"
-                            />
-                        </v-menu>
                     </v-col>
-                    <v-col cols="12" sm="6">
+                    <v-col cols="12" md="6">
-                        <v-menu v-model="depTimeMenu" :close-on-content-click="false">
+                        <v-text-field
-                            <template #activator="{ props: menuProps }">
+                            v-model="form.arrival_date"
-                                <v-text-field
+                            label="Arrival Date & Time"
-                                    v-bind="menuProps"
+                            type="datetime-local"
-                                    :model-value="formatTimeDisplay(departureTimePart)"
+                            :disabled="!lookupComplete"
-                                    label="Departure Time"
+                            :error-messages="submitForm.errors.arrival_date"
-                                    readonly
+                            :min="arrivalMin"
-                                    clearable
+                            :max="arrivalMax"
-                                    prepend-inner-icon="mdi-clock-outline"
+                        />
-                                    :disabled="!lookupComplete"
-                                    @click:clear="clearDepartureTime"
-                                />
-                            </template>
-                            <v-card>
-                                <v-time-picker
-                                    v-model="departureTimePart"
-                                    format="ampm"
-                                    scrollable
-                                />
-                                <v-card-actions>
-                                    <v-spacer />
-                                    <v-btn variant="text" @click="depTimeMenu = false">OK</v-btn>
-                                </v-card-actions>
-                            </v-card>
-                        </v-menu>
-                    </v-col>
-                </v-row>
-
-                <!-- ── 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"
-                                />
-                            </template>
-                            <v-date-picker
-                                v-model="arrivalDatePart"
-                                :min="arrivalMinDate"
-                                :max="arrivalMaxDate"
-                                @update:model-value="arrDateMenu = false"
-                            />
-                        </v-menu>
-                    </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)"
-                                    label="Arrival Time"
-                                    readonly
-                                    clearable
-                                    prepend-inner-icon="mdi-clock-outline"
-                                    :disabled="!lookupComplete"
-                                    @click:clear="clearArrivalTime"
-                                />
-                            </template>
-                            <v-card>
-                                <v-time-picker
-                                    v-model="arrivalTimePart"
-                                    format="ampm"
-                                    scrollable
-                                />
-                                <v-card-actions>
-                                    <v-spacer />
-                                    <v-btn variant="text" @click="arrTimeMenu = false">OK</v-btn>
-                                </v-card-actions>
-                            </v-card>
-                        </v-menu>
                     </v-col>
                 </v-row>
 

resources/js/vite-env.d.ts

@@ -2,4 +2,3 @@
 /// <reference types="vite-plugin-pwa/client" />
 
 declare module '*.css'
-declare const __APP_VERSION__: string

resources/views/app.blade.php

@@ -9,6 +9,7 @@
         <link rel="icon" type="image/x-icon" href="{{ asset('img/favicons/favicon.png') }}">
         <!-- Fonts -->
 
+        <meta name="description" content="FlightsGoneBy is the ultimate flight diary — log every flight, earn achievements, visualise your travels on an interactive map, and share your stats with friends.">
         <link rel="preconnect" href="https://fonts.bunny.net">
         <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
         <!-- Apple Touch Icons -->

vite.config.ts

@@ -4,22 +4,8 @@ import vue from '@vitejs/plugin-vue';
 import path from 'path';
 import vuetify from "vite-plugin-vuetify";
 import { VitePWA } from 'vite-plugin-pwa';
-import { execSync } from 'child_process'
-
-
-function getAppVersion(): string {
-    try {
-        // Prefer a tag if one points at HEAD, else fall back to short hash
-        return execSync('git describe --tags --always --dirty').toString().trim()
-    } catch {
-        return 'Unknown'
-    }
-}
 
 export default defineConfig({
-    define: {
-        __APP_VERSION__: JSON.stringify(process.env.VITE_APP_VERSION ?? 'Dev'),
-    },
     plugins: [
         laravel({
             input: 'resources/js/app.ts',