50 lines
1.7 KiB
Vue
50 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import {Flight} from "@/Types/types";
|
|
import FlightToolTip from "@/Components/FlightsGoneBy/FlightToolTip.vue";
|
|
import AirlineLogo from "@/Components/FlightsGoneBy/AirlineLogo.vue";
|
|
import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";
|
|
|
|
defineProps<{
|
|
regionCodes: string[]
|
|
flightsByRegion: Record<string, Flight[]>
|
|
regionNames?: Record<string, string>
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<table>
|
|
<tr v-for="code in regionCodes" :key="code">
|
|
<td>{{ regionNames?.[code] ?? code }}</td>
|
|
<td>
|
|
<template v-if="flightsByRegion[code]?.length">
|
|
<span style="display:inline-flex; align-items:center; gap:0.25em; flex-wrap:wrap;">
|
|
<FlightToolTip
|
|
v-for="(flight, index) in flightsByRegion[code].slice(0, 5)"
|
|
:key="flight.id"
|
|
:flight="flight"
|
|
>
|
|
<InlineBadge style="display:inline-flex; align-items:center; gap:0.25em;">
|
|
<AirlineLogo hideTooltip :airline="flight.airline" />
|
|
{{ flight.flight_number || `${flight.departure_airport.display_code}-${flight.arrival_airport.display_code}` }}
|
|
</InlineBadge>
|
|
</FlightToolTip>
|
|
</span>
|
|
</template>
|
|
<template v-else>
|
|
</template>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</template>
|
|
|
|
<style scoped>
|
|
table {
|
|
border-spacing: 0;
|
|
width: 100%;
|
|
}
|
|
table td {
|
|
border: solid 1px;
|
|
padding: 0.5em;
|
|
}
|
|
</style>
|