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 }" :class="{ locked: !unlocked && !inProgress }"
rounded="lg" rounded="lg"
elevation="2" elevation="2"
:id = "achievement.internal_name"
> >
<v-card-text class="cardLayout"> <v-card-text class="cardLayout">
<div class="achievement-inner"> <div class="achievement-inner">
resources/js/Components/FlightsGoneBy/FlightMap.vue
+3 -3
View File
@@ -14,7 +14,7 @@
</div> </div>
<div v-if="showLegend" class="map-legend" :class="{ 'map-legend--open': legendOpen }"> <div v-if="showLegend" class="map-legend" :class="{ 'map-legend--open': legendOpen }">
<button class="map-legend__toggle" @click="legendOpen = !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="map-legend__toggle-label">Legend</span>
<span class="mdi" :class="legendOpen ? 'mdi-chevron-down' : 'mdi-chevron-up'" /> <span class="mdi" :class="legendOpen ? 'mdi-chevron-down' : 'mdi-chevron-up'" />
</button> </button>
@@ -894,14 +894,14 @@ export default defineComponent({
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 6px; gap: 6px;
padding: 0 10px 10px; padding: 0 10px 0;
max-height: 0; max-height: 0;
overflow: hidden; overflow: hidden;
transition: max-height 0.2s ease, padding 0.2s ease; transition: max-height 0.2s ease, padding 0.2s ease;
} }
.map-legend--open .map-legend__body { .map-legend--open .map-legend__body {
max-height: 200px; max-height: 200px;
padding-top: 2px; padding: 2px 10px 10px;
} }
.map-legend__row { .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 ToolTipRows from "@/Components/FlightsGoneBy/Tooltips/ToolTipRows.vue";
import ToolTipName from "@/Components/FlightsGoneBy/Tooltips/ToolTipName.vue"; import ToolTipName from "@/Components/FlightsGoneBy/Tooltips/ToolTipName.vue";
import ToolTipHeader from "@/Components/FlightsGoneBy/Tooltips/ToolTipHeader.vue"; import ToolTipHeader from "@/Components/FlightsGoneBy/Tooltips/ToolTipHeader.vue";
import FlightMap from "@/Components/FlightsGoneBy/FlightMap.vue";
defineProps<{ defineProps<{
flight: Flight flight: Flight
@@ -23,34 +24,40 @@ defineProps<{
</div> </div>
</template> </template>
<ToolTipHeader> <template #default="{ isActive }">
<ToolTipHeader>
<span class="designator"> <span class="designator">
<AirlineLogo hideTooltip :airline="flight.airline" size="24" /> <AirlineLogo hideTooltip :airline="flight.airline" size="24" />
{{ flight.flight_number || `${flight.departure_airport.display_code}-${flight.arrival_airport.display_code}` }} {{ flight.flight_number || `${flight.departure_airport.display_code}-${flight.arrival_airport.display_code}` }}
</span> </span>
</ToolTipHeader> </ToolTipHeader>
<ToolTipName> <ToolTipName>
<InlineBadge variant="generic">{{ flight.departure_airport.display_code }}</InlineBadge> <InlineBadge variant="generic">{{ flight.departure_airport.display_code }}</InlineBadge>
<span class="arrow">→</span> <span class="arrow">→</span>
<InlineBadge variant="generic">{{ flight.arrival_airport.display_code }}</InlineBadge> <InlineBadge variant="generic">{{ flight.arrival_airport.display_code }}</InlineBadge>
</ToolTipName> </ToolTipName>
<ToolTipDivider />
<ToolTipRows v-if="flight.livery_url"> <ToolTipRows v-if="isActive.value">
<LiveryImage :flight="flight" /> <FlightMap :flights="[flight]" :showLegend="false" />
</ToolTipRows> </ToolTipRows>
<ToolTipDivider v-if="flight.livery_url" /> <ToolTipDivider />
<ToolTipRows> <ToolTipRows>
<ToolTipRow label="From" :value="flight.departure_airport.municipality" /> <ToolTipRow label="From" :value="flight.departure_airport.municipality" />
<ToolTipRow label="To" :value="flight.arrival_airport.municipality" /> <ToolTipRow label="To" :value="flight.arrival_airport.municipality" />
<ToolTipRow label="Airline" :value="flight.airline.name" v-if="flight.airline" /> <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="Aircraft" :value="flight.aircraft?.display_name_short" v-if="flight.aircraft" />
<ToolTipRow label="Date" :value="flight.departure_date_display" /> <ToolTipRow label="Date" :value="flight.departure_date_display" />
</ToolTipRows> </ToolTipRows>
<ToolTipDivider v-if="flight.livery_url" />
<ToolTipRows v-if="flight.livery_url">
<LiveryImage :flight="flight" />
</ToolTipRows>
</template>
</GlassTooltip> </GlassTooltip>
</template> </template>
resources/js/Components/FlightsGoneBy/GlassTooltip.vue
+8 -2
View File
@@ -1,10 +1,16 @@
<script setup lang="ts"> <script setup lang="ts">
import {Anchor} from "vuetify"; import {Anchor} from "vuetify";
import {Ref} from "vue";
defineProps<{ defineProps<{
location?: Anchor; location?: Anchor;
openDelay?: number; openDelay?: number;
}>(); }>();
defineSlots<{
activator(props: any): any;
default(props: { isActive: Ref<boolean> }): any;
}>();
</script> </script>
<template> <template>
@@ -13,9 +19,9 @@ defineProps<{
<slot name="activator" v-bind="activatorScope" /> <slot name="activator" v-bind="activatorScope" />
</template> </template>
<template #default> <template #default="tooltipScope">
<div class="glass-tooltip glass glass-border"> <div class="glass-tooltip glass glass-border">
<slot /> <slot v-bind="tooltipScope" />
</div> </div>
</template> </template>
</v-tooltip> </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"> <ProfileLayout :achievementCount="achievementCount" :user="user" :isFollowing="isFollowing" :loading="flightsLoading">
<Head :title="`${achievement.name}`" /> <Head :title="`${achievement.name}`" />
<div class="innerLayout"> <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"> <VAlert type="info" v-if="loggedInUser?.id !== user.id && loggedInUser">