73 lines
1.8 KiB
Vue
73 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import GlassBox from "@/Components/FlightsGoneBy/GlassBox.vue";
|
|
import { Head } from "@inertiajs/vue3";
|
|
import { MissingAirline } from "@/Types/types";
|
|
import MissingAirlineCard from "@/Components/Admin/MissingAirlineCard.vue";
|
|
import AdminLayout from "@/Pages/Admin/AdminLayout.vue";
|
|
import Panel from "@/Components/FlightsGoneBy/Panels/Panel.vue";
|
|
|
|
defineOptions({ layout: AdminLayout });
|
|
|
|
defineProps<{
|
|
missingAirlines: MissingAirline[]
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<Head title="Missing Airlines" />
|
|
|
|
<Panel>
|
|
<template #header>
|
|
<h1 class="panel-title">Missing Airlines</h1>
|
|
<span class="panel-subtitle">
|
|
{{ missingAirlines.length }} unmatched code{{ missingAirlines.length === 1 ? '' : 's' }}
|
|
</span>
|
|
</template>
|
|
|
|
<div v-if="missingAirlines.length === 0" class="empty-state">
|
|
No missing airlines 🎉
|
|
</div>
|
|
|
|
<div v-else class="missing-airlines-grid">
|
|
<MissingAirlineCard
|
|
v-for="airline in missingAirlines"
|
|
:key="airline.code"
|
|
:airline="airline"
|
|
/>
|
|
</div>
|
|
</Panel>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.panel-title {
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 1.25rem;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
color: #e6e9ef;
|
|
}
|
|
|
|
.panel-subtitle {
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: #778;
|
|
}
|
|
|
|
.missing-airlines-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: 1rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.empty-state {
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 0.85rem;
|
|
color: #778;
|
|
padding: 2rem 0;
|
|
text-align: center;
|
|
}
|
|
</style>
|