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

Added achievement data

Browse Source
This commit is contained in:
josh
2026-04-28 22:16:21 +10:00
parent 14aed7bf6e
commit b94b1d8ec2
43 changed files with 1559 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Components/FlightsGoneBy/AchievementCard.vue
+198
View File
@@ -0,0 +1,198 @@
<!-- AchievementCard.vue -->
<script setup lang="ts">
import {Achievement, BadgeVariant, UserAchievement} from "@/Types/types";
import {computed} from "vue";
import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";
import GlassTooltip from "@/Components/FlightsGoneBy/GlassTooltip.vue";
const props = defineProps<{
achievement: Achievement
userAchievement?: UserAchievement
}>()
const progress = computed(() => {
if (!props.achievement.progressive || !props.achievement.threshold) return null
const current = props.userAchievement?.progress ?? 0
return {
current,
threshold: props.achievement.threshold,
percentage: Math.min(Math.round((current / props.achievement.threshold) * 100), 100)
}
})
const unlocked = computed(() => {
if (!props.userAchievement) return false
if (props.achievement.progressive) return (progress.value?.percentage ?? 0) >= 100
return true
})
const difficultyVariant = computed(() => {
switch (props.achievement.difficulty?.internal_name) {
case 'easy': return 'easy'
case 'moderate': return 'moderate'
case 'hard': return 'hard'
case 'expensive': return 'expensive'
case 'near_impossible': return 'near-impossible'
case 'impossible': return 'impossible'
default: return 'economy'
}
})
</script>
<template>
<v-card
class="achievement-card"
:class="{ locked: !unlocked }"
rounded="lg"
elevation="2"
>
<v-card-text>
<div class="achievement-inner">
<div class="achievement-icon-wrap" :class="{ unlocked }">
<v-icon
icon="mdi-trophy"
:color="unlocked ? 'amber' : 'grey'"
size="28"
/>
</div>
<div class="achievement-content">
<div class="achievement-header">
<span class="achievement-name">{{ achievement.name }}</span>
<GlassTooltip>
<template #activator="{ props: tooltipProps }">
<span v-bind="tooltipProps" style="display:inline-flex">
<InlineBadge type="difficulty" :variant="difficultyVariant">
{{ achievement.difficulty?.name }}&nbsp;
<v-icon icon="mdi-help-circle-outline" size="12" />
</InlineBadge>
</span>
</template>
<div class="difficulty-tooltip">
<InlineBadge type="difficulty" :variant="difficultyVariant">
{{ achievement.difficulty?.name }}
</InlineBadge>
<p class="difficulty-description">{{ achievement.difficulty?.description }}</p>
<p v-if="achievement.difficulty_description" class="difficulty-description specific">
{{ achievement.difficulty_description }}
</p>
</div>
</GlassTooltip>
</div>
<p class="achievement-description">{{ achievement.short_description }}</p>
<template v-if="achievement.progressive && progress">
<div class="progress-label">
<span>{{ Math.min(progress.current, progress.threshold) }} / {{ progress.threshold }}</span>
<span>{{ progress.percentage }}%</span>
</div>
<v-progress-linear
:model-value="progress.percentage"
:color="unlocked ? 'amber' : 'grey'"
rounded
height="6"
bg-color="rgba(255,255,255,0.1)"
/>
</template>
</div>
</div>
</v-card-text>
</v-card>
</template>
<style scoped>
.achievement-card {
transition: opacity 0.2s ease, transform 0.2s ease;
}
.achievement-card.locked {
opacity: 0.45;
}
.achievement-card:hover {
opacity: 1;
transform: translateY(-1px);
}
.achievement-inner {
display: flex;
gap: 1rem;
align-items: flex-start;
}
.achievement-icon-wrap {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
flex-shrink: 0;
}
.achievement-icon-wrap.unlocked {
background: rgba(255, 193, 7, 0.15);
}
.achievement-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.achievement-header {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.achievement-name {
font-weight: 600;
font-size: 0.95rem;
}
.achievement-description {
font-size: 0.82rem;
opacity: 0.75;
margin: 0;
}
.progress-label {
display: flex;
justify-content: space-between;
font-size: 0.75rem;
opacity: 0.6;
}
.difficulty-tooltip {
display: flex;
flex-direction: column;
gap: 0.4rem;
max-width: 240px;
}
.difficulty-description {
margin: 0;
font-size: 0.78rem;
line-height: 1.4;
opacity: 0.8;
}
.difficulty-description.specific {
display: flex;
align-items: flex-start;
gap: 0.3rem;
opacity: 0.65;
font-style: italic;
padding-top: 0.25rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
</style>
resources/js/Components/FlightsGoneBy/AirlineLogo.vue
+2
View File
@@ -4,6 +4,7 @@ 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";
const page = usePage<SharedProps>().props;
@@ -39,6 +40,7 @@ const size = computed(() => props.size ? props.size + 'px' : '30px');
<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>
<AllianceLogo v-if="airline?.alliance" :alliance="airline?.alliance" size="24" />
</div>
</div>
<div class="tooltip-divider"></div>
resources/js/Components/FlightsGoneBy/AllianceLogo.vue
+32
View File
@@ -0,0 +1,32 @@
<script setup lang="ts">
import {Airline, Alliance, 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<{
alliance: Alliance;
size?: number | string;
}>();
const logoUrl = computed(() => `url('/img/alliances/${props.alliance.internal_name}.svg')`);
const size = computed(() => props.size ? props.size + 'px' : '30px');
</script>
<template>
<span class="alliance-logo"></span>
</template>
<style scoped>
span.alliance-logo {
width: v-bind(size);
height: v-bind(size);
background-image: v-bind(logoUrl);
background-size: contain;
background-repeat: no-repeat;
display: inline-block;
}
</style>
resources/js/Components/FlightsGoneBy/DepartureBoard.vue
+1
View File
@@ -12,6 +12,7 @@ import {FlightStats} from "@/Composables/useFlightStats";
import GlassTooltip from "@/Components/FlightsGoneBy/GlassTooltip.vue";
import CrewTooltip from "@/Components/FlightsGoneBy/CrewTooltip.vue";
import {Link, router} from "@inertiajs/vue3";
import AllianceLogo from "@/Components/FlightsGoneBy/AllianceLogo.vue";
const props = defineProps<{
flightStats: FlightStats
resources/js/Components/FlightsGoneBy/Feed/FeedItem.vue
+3
View File
@@ -11,6 +11,7 @@ import {computed} from "vue";
import {Link} from "@inertiajs/vue3";
import FlightUpdatedFeedItem from "@/Components/FlightsGoneBy/Feed/FlightUpdatedFeedItem.vue";
import FlightCancelledFeedItem from "@/Components/FlightsGoneBy/Feed/FlightCancelledFeedItem.vue";
import FlightImportedFeedItem from "@/Components/FlightsGoneBy/Feed/FlightImportedFeedItem.vue";
const props = defineProps<{
action: UserAction
@@ -30,6 +31,7 @@ const badgeVariant = computed(() => {
switch (props.action.type) {
case 'flight_booked': return 'generic'
case 'flight_logged': return 'generic'
case 'flight_imported': return 'economy'
case 'flight_updated': return 'economy'
case 'flight_cancelled': return 'crew'
default: return 'economy'
@@ -69,6 +71,7 @@ function timeAgo(dateStr: string): string {
</div>
<div class="card-content">
<FlightBookedFeedItem v-if="action.type == 'flight_booked' || action.type == 'flight_logged'" :flight="(action.data as UserActionFlightBookedData).flight" ></FlightBookedFeedItem>
<FlightImportedFeedItem v-if="action.type == 'flight_imported'" :flight="(action.data as UserActionFlightBookedData).flight" ></FlightImportedFeedItem>
<FlightUpdatedFeedItem v-if="action.type == 'flight_updated'" :data="(action.data as UserActionFlightUpdatedData)" ></FlightUpdatedFeedItem>
<FlightCancelledFeedItem v-if="action.type == 'flight_cancelled'" :data="(action.data as UserActionFlightCancelledData)" flight=""></FlightCancelledFeedItem>
</div>
resources/js/Components/FlightsGoneBy/Feed/FlightImportedFeedItem.vue
+48
View File
@@ -0,0 +1,48 @@
<script setup lang="ts">
import {Flight, UserActionFlightCancelledData} from "@/Types/types";
import AirportToolTip from "@/Components/FlightsGoneBy/AirportToolTip.vue";
import AirlineLogo from "@/Components/FlightsGoneBy/AirlineLogo.vue";
import FlightClassBadge from "@/Components/FlightsGoneBy/FlightClassBadge.vue";
import AircraftToolTip from "@/Components/FlightsGoneBy/AircraftToolTip.vue";
import BoardingPass from "@/Components/FlightsGoneBy/BoardingPass.vue";
const props = defineProps<{
flight: Flight
}>()
</script>
<template>
<div class="flight-booked">
<div class="imported-flight">
<span v-if="flight.flight_number" class="flight-summary">
<AirlineLogo :airline="flight.airline" />
<span>Historical flight <strong>{{ flight.flight_number }}</strong> on {{ flight.departure_date_display }} at {{ flight.departure_time_display }} imported from MyFlightRadar24</span>
</span>
<span v-else class="flight-summary">
<AirlineLogo :airline="flight.airline" />
<span>Historical flight from <b>{{ flight.departure_airport.municipality }} ({{ flight.departure_airport.display_code }}) → {{ flight.arrival_airport.municipality }} ({{ flight.arrival_airport.display_code }})</b> on {{ flight.departure_date_display }} at {{ flight.departure_time_display }} imported from MyFlightRadar24</span>
</span>
</div>
</div>
</template>
<style scoped>
.imported-flight {
padding: 0.75rem 1.25rem;
}
.flight-summary {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: #9ca3af;
}
.flight-summary strong {
color: #f9fafb;
font-weight: 600;
}
</style>
resources/js/Components/FlightsGoneBy/InlineBadge.vue
+6 -3
View File
@@ -1,13 +1,16 @@
<script setup lang="ts">
import {BadgeVariant} from "@/Types/types";
defineProps<{
withDefaults(defineProps<{
variant?: BadgeVariant
}>();
type?: 'class' | 'difficulty'
}>(), {
type: 'class'
})
</script>
<template>
<span v-if="variant !== 'unspecified'" class="class-badge" :class="variant ? `class-${variant}-global` : 'class-economy-global'">
<span v-if="variant !== 'unspecified'" class="class-badge" :class="variant ? `${type}-${variant}-global` : 'class-economy-global'">
<slot />
</span>
</template>
resources/js/Components/FlightsGoneBy/ProfileHeader.vue
+5 -3
View File
@@ -5,7 +5,8 @@ import type { Flight, User, SharedProps } from "@/Types/types";
const props = defineProps<{
user: User
flights: Flight[]
flightCount?: number
achievementCount?: number
isFollowing?: boolean
}>()
@@ -55,8 +56,8 @@ const follow = async () => {
</div>
<div class="board-count">
<span class="count-number">{{ flights.length }}</span>
<span class="count-label">FLIGHTS</span>
<span class="count-number">{{ flightCount ?? achievementCount }}</span>
<span class="count-label">{{flightCount ? 'Flights' : 'Achievements'}}</span>
</div>
</div>
@@ -149,5 +150,6 @@ const follow = async () => {
font-size: 0.65rem;
letter-spacing: 0.18em;
color: #556;
text-transform: uppercase;
}
</style>
resources/js/Components/FlightsGoneBy/ProfileLayout.vue
+30 -3
View File
@@ -1,18 +1,24 @@
<script setup lang="ts">
import {Flight, User} from "@/Types/types";
import ProfileHeader from "@/Components/FlightsGoneBy/ProfileHeader.vue";
import PlaneLoader from "@/Components/FlightsGoneBy/PlaneLoader.vue";
defineProps<{
user: User
flights: Flight[]
flightCount?: number
achievementCount? : number
isFollowing: boolean
loading: boolean
}>()
</script>
<template>
<div class="board-wrapper">
<ProfileHeader :is-following="isFollowing" :user="user" :flights="flights" />
<slot />
<ProfileHeader :is-following="isFollowing" :user="user" :flightCount="flightCount" />
<div v-if="loading" class="loading-state">
<PlaneLoader />
</div>
<slot v-else />
</div>
</template>
@@ -24,6 +30,27 @@ defineProps<{
width: 100%;
}
.loading-state {
display: flex;
justify-content: center;
align-items: center;
min-height: 50dvh;
}
.spinner {
display: block;
width: 2.5rem;
height: 2.5rem;
border: 3px solid rgba(255, 255, 255, 0.2);
border-top-color: white;
border-radius: 50%;
animation: spin 0.7s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
@media (max-width: 1200px) {
.board-wrapper {
padding: 1em 0.25em;
resources/js/Components/FlightsGoneBy/ProfileViewSwitcher.vue
+40 -9
View File
@@ -1,22 +1,41 @@
<script setup lang="ts">
import {ProfileView} from "@/Types/types";
import {ProfileView, User} from "@/Types/types";
import {router, usePage} from "@inertiajs/vue3";
import {computed} from "vue";
defineProps<{
activeView: string;
const props = defineProps<{
activeView: ProfileView;
user: User
}>()
const emit = defineEmits<{
'update:activeView': [view: ProfileView]
}>()
const page = usePage()
const isAchievementsPage = computed(() => page.component === 'UserAchievements'
)
function navigateTo(view: ProfileView) {
if (isAchievementsPage.value) {
const routeMap: Record<string, string> = {
map: route('profile.map', { user: props.user.name }),
board: route('profile.departure-board', { user: props.user.name }),
passes: route('profile.boarding-passes', { user: props.user.name }),
}
router.visit(routeMap[view])
} else {
emit('update:activeView', view)
}
}
</script>
<template>
<div class="view-toolbar">
<button
class="view-btn"
:class="{ active: activeView === 'map' }"
@click="emit('update:activeView', 'map')"
@click="navigateTo('map')"
>
<span class="view-btn-icon mdi mdi-earth"></span>
<span class="view-btn-label">MAP</span>
@@ -24,18 +43,26 @@ const emit = defineEmits<{
<button
class="view-btn"
:class="{ active: activeView === 'board' }"
@click="emit('update:activeView', 'board')"
@click="navigateTo('board')"
>
<span class="view-btn-icon mdi mdi-table"></span>
<span class="view-btn-label">DEPARTURE BOARD</span>
<span class="view-btn-label">Departure Board</span>
</button>
<button
class="view-btn"
:class="{ active: activeView === 'passes' }"
@click="emit('update:activeView', 'passes')"
@click="navigateTo('passes')"
>
<span class="view-btn-icon mdi mdi-ticket"></span>
<span class="view-btn-label">BOARDING PASSES</span>
<span class="view-btn-label">Boarding Passes</span>
</button>
<button
class="view-btn"
:class="{ active: activeView === 'achievements' }"
@click="router.visit(route('profile.achievements', { user: user.name }))"
>
<span class="view-btn-icon mdi mdi-trophy"></span>
<span class="view-btn-label">Achievements</span>
</button>
</div>
</template>
@@ -87,4 +114,8 @@ const emit = defineEmits<{
font-size: 0.8rem;
opacity: 0.8;
}
.view-btn-label {
text-transform: uppercase;
}
</style>