dredgy/FlightsAPI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated Map View

Browse Source
This commit is contained in:
josh
2026-06-16 18:46:46 +10:00
parent badb4dc46f
commit 6fad966b7e
5 changed files with 39 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Components/FlightsGoneBy/AchievementCard.vue
+1
View File
@@ -50,6 +50,7 @@ const unlocked = computed(() => {
:class="{ locked: !unlocked && !inProgress }"
rounded="lg"
elevation="2"
:id = "achievement.internal_name"
>
<v-card-text class="cardLayout">
<div class="achievement-inner">
resources/js/Components/FlightsGoneBy/FlightMap.vue
+3 -3
View File
@@ -14,7 +14,7 @@
</div>
<div v-if="showLegend" class="map-legend" :class="{ 'map-legend--open': legendOpen }">
<button class="map-legend__toggle" @click="legendOpen = !legendOpen">
<span class="mdi mdi-map-legend" />
<span class="mdi mdi-format-list-bulleted" />
<span class="map-legend__toggle-label">Legend</span>
<span class="mdi" :class="legendOpen ? 'mdi-chevron-down' : 'mdi-chevron-up'" />
</button>
@@ -894,14 +894,14 @@ export default defineComponent({
display: flex;
flex-direction: column;
gap: 6px;
padding: 0 10px 10px;
padding: 0 10px 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease, padding 0.2s ease;
}
.map-legend--open .map-legend__body {
max-height: 200px;
padding-top: 2px;
padding: 2px 10px 10px;
}
.map-legend__row {
resources/js/Components/FlightsGoneBy/FlightToolTip.vue
+26 -19
View File
@@ -9,6 +9,7 @@ import ToolTipRow from "@/Components/FlightsGoneBy/Tooltips/ToolTipRow.vue";
import ToolTipRows from "@/Components/FlightsGoneBy/Tooltips/ToolTipRows.vue";
import ToolTipName from "@/Components/FlightsGoneBy/Tooltips/ToolTipName.vue";
import ToolTipHeader from "@/Components/FlightsGoneBy/Tooltips/ToolTipHeader.vue";
import FlightMap from "@/Components/FlightsGoneBy/FlightMap.vue";
defineProps<{
flight: Flight
@@ -23,34 +24,40 @@ defineProps<{
</div>
</template>
<ToolTipHeader>
<template #default="{ isActive }">
<ToolTipHeader>
<span class="designator">
<AirlineLogo hideTooltip :airline="flight.airline" size="24" />
{{ flight.flight_number || `${flight.departure_airport.display_code}-${flight.arrival_airport.display_code}` }}
</span>
</ToolTipHeader>
</ToolTipHeader>
<ToolTipName>
<InlineBadge variant="generic">{{ flight.departure_airport.display_code }}</InlineBadge>
<span class="arrow">→</span>
<InlineBadge variant="generic">{{ flight.arrival_airport.display_code }}</InlineBadge>
</ToolTipName>
<ToolTipName>
<InlineBadge variant="generic">{{ flight.departure_airport.display_code }}</InlineBadge>
<span class="arrow">→</span>
<InlineBadge variant="generic">{{ flight.arrival_airport.display_code }}</InlineBadge>
</ToolTipName>
<ToolTipDivider />
<ToolTipRows v-if="flight.livery_url">
<LiveryImage :flight="flight" />
</ToolTipRows>
<ToolTipRows v-if="isActive.value">
<FlightMap :flights="[flight]" :showLegend="false" />
</ToolTipRows>
<ToolTipDivider v-if="flight.livery_url" />
<ToolTipDivider />
<ToolTipRows>
<ToolTipRow label="From" :value="flight.departure_airport.municipality" />
<ToolTipRow label="To" :value="flight.arrival_airport.municipality" />
<ToolTipRow label="Airline" :value="flight.airline.name" v-if="flight.airline" />
<ToolTipRow label="Aircraft" :value="flight.aircraft?.display_name_short" v-if="flight.aircraft" />
<ToolTipRow label="Date" :value="flight.departure_date_display" />
</ToolTipRows>
<ToolTipRows>
<ToolTipRow label="From" :value="flight.departure_airport.municipality" />
<ToolTipRow label="To" :value="flight.arrival_airport.municipality" />
<ToolTipRow label="Airline" :value="flight.airline.name" v-if="flight.airline" />
<ToolTipRow label="Aircraft" :value="flight.aircraft?.display_name_short" v-if="flight.aircraft" />
<ToolTipRow label="Date" :value="flight.departure_date_display" />
</ToolTipRows>
<ToolTipDivider v-if="flight.livery_url" />
<ToolTipRows v-if="flight.livery_url">
<LiveryImage :flight="flight" />
</ToolTipRows>
</template>
</GlassTooltip>
</template>
resources/js/Components/FlightsGoneBy/GlassTooltip.vue
+8 -2
View File
@@ -1,10 +1,16 @@
<script setup lang="ts">
import {Anchor} from "vuetify";
import {Ref} from "vue";
defineProps<{
location?: Anchor;
openDelay?: number;
}>();
defineSlots<{
activator(props: any): any;
default(props: { isActive: Ref<boolean> }): any;
}>();
</script>
<template>
@@ -13,9 +19,9 @@ defineProps<{
<slot name="activator" v-bind="activatorScope" />
</template>
<template #default>
<template #default="tooltipScope">
<div class="glass-tooltip glass glass-border">
<slot />
<slot v-bind="tooltipScope" />
</div>
</template>
</v-tooltip>
resources/js/Pages/Profile/UserAchievement.vue
+1 -1
View File
@@ -70,7 +70,7 @@ const difficultyVariant = computed(() => {
<ProfileLayout :achievementCount="achievementCount" :user="user" :isFollowing="isFollowing" :loading="flightsLoading">
<Head :title="`${achievement.name}`" />
<div class="innerLayout">
<ButtonLink variant="flat" icon="mdi-arrow-left" :label="`Back to ${user.name}'s Achievements`" :href="route('profile.achievements', { user: user.name })" />
<ButtonLink variant="flat" icon="mdi-arrow-left" :label="`Back to ${user.name}'s Achievements`" :href="`${route('profile.achievements', { user: user.name })}#${achievement.internal_name}`" />
<VAlert type="info" v-if="loggedInUser?.id !== user.id && loggedInUser">