118 lines
2.9 KiB
Vue
118 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
import {Airline, SharedProps} from "@/Types/types";
|
|
import {computed} from "vue";
|
|
import {usePage} from "@inertiajs/vue3";
|
|
import GlassTooltip from "@/Components/FlightsGoneBy/GlassTooltip.vue";
|
|
import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";
|
|
|
|
const page = usePage<SharedProps>().props;
|
|
|
|
const props = defineProps<{
|
|
airline: Airline | null;
|
|
size?: number | string;
|
|
}>();
|
|
|
|
const logoUrl = computed(() => `url('${props.airline?.logo_url ?? page.logo_api_url+'/airline/undefined/logo/tail'}')`);
|
|
const logoStyle = computed(() => ({
|
|
width: size.value,
|
|
height: size.value,
|
|
backgroundImage: logoUrl.value,
|
|
backgroundSize: 'contain',
|
|
backgroundRepeat: 'no-repeat',
|
|
display: 'inline-block',
|
|
}));
|
|
const size = computed(() => props.size ? props.size + 'px' : '30px');
|
|
</script>
|
|
|
|
<template>
|
|
<GlassTooltip>
|
|
<template #activator="{ props: tooltipProps }">
|
|
<span class="airline-logo" v-bind="tooltipProps"></span>
|
|
</template>
|
|
|
|
<div v-if="airline" class="airline-tooltip-content">
|
|
<div class="tooltip-header">
|
|
<div class="logo-title">
|
|
<span class="airline-logo-tooltip" :style="logoStyle"></span>
|
|
<span class="airline-name">{{ airline.name }}</span>
|
|
</div>
|
|
<div v-if="airline.IATA_code || airline.ICAO_code" class="codes">
|
|
<InlineBadge v-if="airline.IATA_code" variant="generic">{{ airline.IATA_code }}</InlineBadge>
|
|
<InlineBadge v-if="airline.ICAO_code" variant="generic">{{ airline.ICAO_code }}</InlineBadge>
|
|
</div>
|
|
</div>
|
|
<div class="tooltip-divider"></div>
|
|
<div class="tooltip-meta">
|
|
<span
|
|
v-if="airline.country"
|
|
:class="`fi fi-${airline.country.code.toLowerCase()}`"
|
|
class="country-flag"
|
|
></span>
|
|
<span v-if="airline.country" class="country-name">{{ airline.country.name }}</span>
|
|
</div>
|
|
</div>
|
|
</GlassTooltip>
|
|
</template>
|
|
|
|
<style scoped>
|
|
span.airline-logo {
|
|
width: v-bind(size);
|
|
height: v-bind(size);
|
|
background-image: v-bind(logoUrl);
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
display: inline-block;
|
|
}
|
|
|
|
.airline-tooltip-content {
|
|
display: contents;
|
|
}
|
|
|
|
.logo-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.codes{
|
|
width:100%;
|
|
display: flex;
|
|
gap: 4px;
|
|
padding-top:1em;
|
|
justify-content:flex-start;
|
|
}
|
|
|
|
|
|
.airline-name {
|
|
letter-spacing: 0.03em;
|
|
}
|
|
|
|
.tooltip-divider {
|
|
height: 1px;
|
|
background: var(--table-border);
|
|
}
|
|
|
|
.tooltip-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.country-flag {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.country-name {
|
|
flex: 1;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.codes {
|
|
display: flex;
|
|
gap: 4px;
|
|
margin-left: auto;
|
|
}
|
|
|
|
</style>
|