Added Imported Flights Table

2026-04-03 23:59:40 +10:00
parent 6a88d0cdfb
commit 877caa3291
16 changed files with 622 additions and 21 deletions
@@ -1,24 +1,98 @@
 <script setup lang="ts">
 import MainLayout from "@/Layouts/MainLayout.vue";
 import GlassBox from "@/Components/FlightsGoneBy/GlassBox.vue";
-import {Head} from "@inertiajs/vue3";
+import { Head } from "@inertiajs/vue3";
+import { ref } from "vue";
+import {VFileInput} from "vuetify/components";
+import {getCsrfToken} from "@/utils/helpers";

-defineOptions({
-    layout: MainLayout
-})
+
+defineOptions({ layout: MainLayout });
+
+const status = ref<"idle" | "uploading" | "success" | "error">("idle");
+const importedCount = ref(0);
+const errors = ref<string[]>([]);
+const fileInput = ref<InstanceType<typeof VFileInput> | null>(null);
+const selectedFile = ref<File | null>(null);
+
+async function onFileChange(e: Event) {
+    const input = e.target as HTMLInputElement;
+    const file = input.files?.[0];
+    const actualFile = Array.isArray(file) ? file[0] : file;
+    if (!actualFile) return;
+    if (!file) return;
+
+    status.value = "uploading";
+    errors.value = [];
+
+    const form = new FormData();
+    form.append("csv", file);
+
+    try {
+        const response = await fetch(route("flights.import.store"), {
+            method: "POST",
+            headers: {
+                "X-CSRF-TOKEN": getCsrfToken(),
+                Accept: "application/json",
+            },
+            body: form,
+        });
+
+        const data = await response.json();
+
+        if (!response.ok) {
+            errors.value = data.errors ?? [data.message ?? "Import failed."];
+            status.value = "error";
+        } else {
+            importedCount.value = data.imported;
+            status.value = "success";
+        }
+    }  catch (e) {
+        console.error("Fetch error:", e);
+        errors.value = [String(e)];
+        status.value = "error";
+    }
+}
 </script>

 <template>
    <Head title="Import" />
-    <GlassBox>
+    <GlassBox style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
        <h2>Import Your Flights</h2>
-        <p>
-            Import a CSV export from MyFlightRadar24. You will then be guided to reconcile any data mismatches.
+        <p v-if="status !== 'success'">
+            Import a CSV export from MyFlightRadar24. You will then be guided
+            to reconcile any data mismatches.
        </p>
-        <v-file-input style="width:100%; flex:0" label="Select CSV File" accept=".csv" />
+        <p v-else-if="status === 'success'" type="success" >
+            Successfully imported {{ importedCount }} flight{{ importedCount !== 1 ? 's' : '' }}. You will just need to reconcile some mismatched airlines and airports.
+        </p>
+        <div style="flex:0;width: 100%;display:flex;flex-direction:column;align-items: center;justify-content: center;gap:2em;">
+            <v-file-input
+                style="flex:0;width:100%"
+                prepend-icon=""
+                v-if="status !== 'uploading' && status !== 'success'"
+                label="Select CSV File"
+                accept=".csv"
+                @change="onFileChange"
+                ref="fileInput"
+                v-model="selectedFile"
+            />
+
+            <div v-else-if="status === 'uploading'" class="d-flex align-center ga-3 mt-2">
+                <v-progress-circular indeterminate color="primary" />
+                <span>Importing your flights…</span>
+            </div>
+
+
+
+            <v-alert closable v-if="status === 'error'" type="error">
+                <div v-for="(err, i) in errors" :key="i">{{ err }}</div>
+            </v-alert>
+
+            <v-btn :href="route('reconcile')" v-if="status === 'success'" variant="tonal" size="x-large" block >Reconcile Your Data</v-btn>
+        </div>
    </GlassBox>
 </template>
-
 <style scoped>
 h2{
    font-size: 2rem;