Fixed Bug With Shared Flights

resources/js/Components/FlightsGoneBy/DepartureBoardTableRow.vue

@@ -12,6 +12,7 @@ import { usePage } from "@inertiajs/vue3";
 import { User } from "@/Types/types";
 import Mono from "@/Components/FlightsGoneBy/Mono.vue";
 import DayDifference from "@/Components/FlightsGoneBy/DayDifference.vue";
+import Time from "@/Components/FlightsGoneBy/Time.vue";
 
 const props = defineProps<{
     flight: Flight
@@ -98,12 +99,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><Time :value="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><Time :value="flight.arrival_time_display" /></Mono>
             <DayDifference :value="flight.arrival_day_difference" />
         </td>
 

resources/js/Components/FlightsGoneBy/Time.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import {computed} from "vue";
+import {usePage} from "@inertiajs/vue3";
+import {SharedProps} from "@/Types/types";
+
+const props = defineProps<{
+    value: string; //Time in g:iA format
+}>()
+
+const page = usePage<SharedProps>().props;
+const timeFormatString = page.auth.user?.resolved_settings?.time_format
+
+const formattedTime = computed(() => {
+    if (timeFormatString !== "24hr") {
+        return props.value;
+    }
+
+    const match = props.value.match(/^(\d{1,2}):(\d{2})(AM|PM)$/i);
+    if (!match) {
+        return props.value;
+    }
+
+    let [, hourStr, minuteStr, meridiem] = match;
+    let hour = parseInt(hourStr, 10);
+
+    if (meridiem.toUpperCase() === "PM" && hour !== 12) {
+        hour += 12;
+    } else if (meridiem.toUpperCase() === "AM" && hour === 12) {
+        hour = 0;
+    }
+
+    return `${hour.toString().padStart(2, "0")}${minuteStr}`;
+});
+</script>
+
+<template>
+    <span>{{ formattedTime }}</span>
+</template>
+
+<style scoped>
+
+</style>