81 lines
2.9 KiB
Vue
81 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";
|
|
import AllianceLogo from "@/Components/FlightsGoneBy/AllianceLogo.vue";
|
|
import ToolTipHeader from "@/Components/FlightsGoneBy/Tooltips/ToolTipHeader.vue";
|
|
import ToolTipDivider from "@/Components/FlightsGoneBy/Tooltips/ToolTipDivider.vue";
|
|
import ToolTipName from "@/Components/FlightsGoneBy/Tooltips/ToolTipName.vue";
|
|
import ToolTipRows from "@/Components/FlightsGoneBy/Tooltips/ToolTipRows.vue";
|
|
import ToolTipRow from "@/Components/FlightsGoneBy/Tooltips/ToolTipRow.vue";
|
|
|
|
const page = usePage<SharedProps>().props;
|
|
|
|
const props = defineProps<{
|
|
airline: Airline | null;
|
|
size?: number | string;
|
|
hideTooltip?: boolean;
|
|
}>();
|
|
|
|
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 v-if="airline && !hideTooltip">
|
|
<template #activator="{ props: tooltipProps }">
|
|
<span class="airline-logo" v-bind="tooltipProps"></span>
|
|
</template>
|
|
|
|
<div class="airline-tooltip-content">
|
|
<ToolTipHeader>
|
|
<div class="logo-title">
|
|
<span class="airline-logo-tooltip" :style="logoStyle"></span>
|
|
<span class="airline-name">{{ airline.name }}</span>
|
|
</div>
|
|
</ToolTipHeader>
|
|
<ToolTipName v-if="airline.iata_code || airline.icao_code">
|
|
<InlineBadge v-if="airline.iata_code" variant="generic">{{ airline.iata_code }}</InlineBadge>
|
|
<InlineBadge v-if="airline.icao_code" variant="generic">{{ airline.icao_code }}</InlineBadge>
|
|
<AllianceLogo v-if="airline?.alliance" :alliance="airline?.alliance" size="24" />
|
|
</ToolTipName>
|
|
<ToolTipDivider />
|
|
<ToolTipRows v-if="airline.country">
|
|
<ToolTipRow label="Country" :value="airline.country.name" :countryCode="airline.country.code" />
|
|
</ToolTipRows>
|
|
</div>
|
|
</GlassTooltip>
|
|
<span v-else class="airline-logo"></span>
|
|
</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;
|
|
}
|
|
</style>
|