139 lines
3.5 KiB
Vue
139 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
import {Airline, SharedProps} from "@/Types/types";
|
|
import {computed} from "vue";
|
|
import {usePage} from "@inertiajs/vue3";
|
|
|
|
const props = defineProps<{
|
|
airline: Airline | null;
|
|
size?: number | string;
|
|
}>();
|
|
|
|
const page = usePage<SharedProps>().props;
|
|
const logoUrl = computed(() => `url('${page.logo_api_url}/airlines/logos/tail/id/${props.airline?.id}')`);
|
|
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>
|
|
<v-tooltip location="top" :open-delay="200">
|
|
<template #activator="{ props: tooltipProps }">
|
|
<span class="airline-logo" v-bind="tooltipProps"></span>
|
|
</template>
|
|
|
|
<template #default>
|
|
<div v-if="airline" class="airline-tooltip glass glass-border">
|
|
<div class="tooltip-header">
|
|
<span class="airline-logo-tooltip" :style="logoStyle"></span>
|
|
<span class="airline-name">{{ airline.name }}</span>
|
|
<span v-if="airline.IATA_code || airline.ICAO_code" class="codes">
|
|
<span v-if="airline.IATA_code" class="code-badge">{{ airline.IATA_code }}</span>
|
|
<span v-if="airline.ICAO_code" class="code-badge">{{ airline.ICAO_code }}</span>
|
|
</span>
|
|
</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>
|
|
<span v-else class="airline-tooltip muted">Unknown airline</span>
|
|
</template>
|
|
</v-tooltip>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
:deep(.v-overlay__content) {
|
|
background: transparent !important;
|
|
box-shadow: none !important;
|
|
filter: none !important;
|
|
}
|
|
|
|
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 {
|
|
background: var(--surface);
|
|
border: 1px solid var(--table-border);
|
|
border-radius: 8px;
|
|
padding: 10px 14px;
|
|
min-width: 180px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
color: var(--text);
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.tooltip-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.airline-name {
|
|
font-weight: 600;
|
|
color: var(--muted);
|
|
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;
|
|
}
|
|
|
|
.code-badge {
|
|
background: var(--accent-glow);
|
|
border: 1px solid var(--accent-soft);
|
|
color: var(--accent);
|
|
border-radius: 4px;
|
|
padding: 1px 6px;
|
|
font-size: 0.72rem;
|
|
font-family: monospace;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.muted {
|
|
color: var(--muted);
|
|
}
|
|
</style>
|