Added achievement data
This commit is contained in:
@@ -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 }}
|
||||
<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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -3,17 +3,48 @@ import MainHeader from "@/Components/FlightsGoneBy/MainHeader.vue";
|
||||
import MainFooter from "@/Components/FlightsGoneBy/MainFooter.vue";
|
||||
import Radar from "@/Components/FlightsGoneBy/Radar.vue";
|
||||
import { usePage, router } from "@inertiajs/vue3";
|
||||
import { ref } from "vue";
|
||||
import {SharedProps} from "@/Types/types";
|
||||
import { ref, watch } from "vue";
|
||||
import { SharedProps, Notification } from "@/Types/types";
|
||||
import axios from "axios";
|
||||
|
||||
const page = usePage<SharedProps>().props;
|
||||
const transitionKey = ref(0);
|
||||
|
||||
router.on('success', () => {
|
||||
const seenNotificationIds = ref<Set<number>>(new Set())
|
||||
|
||||
const achievementSound = new Audio('/sounds/seatBelt.wav')
|
||||
|
||||
function handleNewNotifications(notifications: Notification[]) {
|
||||
if (!notifications?.length) return
|
||||
const unseen = notifications.filter(n => !seenNotificationIds.value.has(n.id))
|
||||
if (!unseen.length) return
|
||||
unseen.forEach(n => seenNotificationIds.value.add(n.id))
|
||||
activeToasts.value.push(...unseen)
|
||||
achievementSound.play().catch(() => {})
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ── Toasts ────────────────────────────────────────────────────────────────────
|
||||
const activeToasts = ref<Notification[]>([])
|
||||
|
||||
async function dismissToast(notification: Notification) {
|
||||
activeToasts.value = activeToasts.value.filter(n => n.id !== notification.id)
|
||||
await axios.patch(`/notifications/${notification.id}/read`)
|
||||
}
|
||||
|
||||
console.log(page.achievement_notifications)
|
||||
watch(
|
||||
() => page.achievement_notifications,
|
||||
handleNewNotifications,
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
router.on('success', (event) => {
|
||||
transitionKey.value++;
|
||||
handleNewNotifications(event.detail.page.props.achievement_notifications as Notification[] ?? [])
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Radar>
|
||||
<div class="layoutContainer">
|
||||
@@ -25,9 +56,65 @@ router.on('success', () => {
|
||||
</Transition>
|
||||
<MainFooter :key="transitionKey" />
|
||||
</div>
|
||||
|
||||
<div class="toast-stack">
|
||||
<TransitionGroup name="toast">
|
||||
<v-card
|
||||
v-for="notification in activeToasts"
|
||||
:key="notification.id"
|
||||
class="toast-card glass"
|
||||
rounded="lg"
|
||||
elevation="4"
|
||||
max-width="360"
|
||||
>
|
||||
<v-card-text class="d-flex align-center ga-3">
|
||||
<v-icon icon="mdi-trophy" color="amber" size="32" />
|
||||
<div>
|
||||
<div class="text-subtitle-2 font-weight-bold">{{ notification.title }}</div>
|
||||
<div class="text-body-2 text-medium-emphasis">{{ notification.body }}</div>
|
||||
</div>
|
||||
<v-btn
|
||||
icon="mdi-close"
|
||||
variant="text"
|
||||
size="small"
|
||||
class="ml-auto"
|
||||
@click="dismissToast(notification)"
|
||||
/>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</TransitionGroup>
|
||||
</div>
|
||||
</Radar>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.toast-stack {
|
||||
position: fixed;
|
||||
bottom: 1.5rem;
|
||||
right: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
z-index: 9999;
|
||||
max-height: 50dvh;
|
||||
overflow-y: scroll;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.toast-stack::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toast-card {
|
||||
flex-shrink: 0;
|
||||
background: rgb(var(--v-theme-surface)) !important;
|
||||
}
|
||||
|
||||
.toast-enter-from { opacity: 0; transform: translateX(100%); }
|
||||
.toast-leave-to { opacity: 0; transform: translateX(100%); }
|
||||
.toast-enter-active,
|
||||
.toast-leave-active { transition: all 0.3s ease; }
|
||||
</style>
|
||||
<style scoped>
|
||||
.layoutContainer {
|
||||
display: flex;
|
||||
|
||||
@@ -26,7 +26,7 @@ const props = defineProps<{
|
||||
dep_time: string
|
||||
arr_time: string
|
||||
duration: string
|
||||
airline_options: { value: number, title: string }[]
|
||||
airline_options: { value: number, title: string, logo_url: string }[]
|
||||
from_options: { value: number, title: string, country_code: string}[]
|
||||
to_options: { value: number, title: string, country_code: string }[]
|
||||
aircraft_options: { value: number, title: string }[]
|
||||
|
||||
@@ -0,0 +1,146 @@
|
||||
<script setup lang="ts">
|
||||
import {computed} from "vue"
|
||||
import ProfileLayout from "@/Components/FlightsGoneBy/ProfileLayout.vue"
|
||||
import ProfileViewSwitcher from "@/Components/FlightsGoneBy/ProfileViewSwitcher.vue"
|
||||
import AchievementCard from "@/Components/FlightsGoneBy/AchievementCard.vue"
|
||||
import {Achievement, User, UserAchievement} from "@/Types/types"
|
||||
import { Head } from "@inertiajs/vue3";
|
||||
import MainLayout from "@/Layouts/MainLayout.vue";
|
||||
|
||||
defineOptions({ layout: MainLayout })
|
||||
|
||||
const props = defineProps<{
|
||||
user: User
|
||||
canEdit: boolean
|
||||
isFollowing: boolean
|
||||
achievements: Record<string, Achievement[]>
|
||||
userAchievements: Record<number, UserAchievement>
|
||||
}>()
|
||||
|
||||
const totalAchievements = computed(() =>
|
||||
Object.values(props.achievements).reduce((sum, group) => sum + group.length, 0)
|
||||
)
|
||||
|
||||
const unlockedCount = computed(() =>
|
||||
Object.values(props.achievements)
|
||||
.flat()
|
||||
.filter(a => {
|
||||
const ua = props.userAchievements[a.id]
|
||||
if (!ua) return false
|
||||
if (!a.progressive || !a.threshold) return true
|
||||
return (ua.progress ?? 0) >= a.threshold
|
||||
}).length
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head :title="`${user.name}'s Achievements`" />
|
||||
<ProfileLayout
|
||||
:user="user"
|
||||
:achievementCount="unlockedCount"
|
||||
:is-following="isFollowing"
|
||||
:loading="false"
|
||||
>
|
||||
<ProfileViewSwitcher active-view="achievements" :user="user" />
|
||||
|
||||
<div class="achievements-page">
|
||||
<div class="achievements-summary">
|
||||
<span class="summary-text">
|
||||
{{ unlockedCount }} / {{ totalAchievements }} achievements unlocked
|
||||
</span>
|
||||
<v-progress-linear
|
||||
:model-value="Math.round((unlockedCount / totalAchievements) * 100)"
|
||||
color="amber"
|
||||
rounded
|
||||
height="6"
|
||||
bg-color="rgba(255,255,255,0.1)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-for="(categoryAchievements, categoryName) in achievements"
|
||||
:key="categoryName"
|
||||
class="achievement-category"
|
||||
>
|
||||
<div class="category-header">
|
||||
<h2 class="category-name">{{ categoryName }}</h2>
|
||||
<span class="category-count">
|
||||
{{ categoryAchievements.filter(a => userAchievements[a.id]).length }}
|
||||
/ {{ categoryAchievements.length }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="achievement-grid">
|
||||
<AchievementCard
|
||||
v-for="achievement in categoryAchievements"
|
||||
:key="achievement.id"
|
||||
:achievement="achievement"
|
||||
:user-achievement="userAchievements[achievement.id]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ProfileLayout>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.achievements-page {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2.5rem;
|
||||
}
|
||||
|
||||
.achievements-summary {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.summary-text {
|
||||
font-size: 0.9rem;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.achievement-category {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.category-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.category-name {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.category-count {
|
||||
font-size: 0.85rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.achievement-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.achievement-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,10 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
import MainLayout from "@/Layouts/MainLayout.vue";
|
||||
import { Head } from '@inertiajs/vue3'
|
||||
import {ref, computed, watchEffect} from 'vue'
|
||||
import { Flight, ProfileView, User } from "@/Types/types"
|
||||
import { router } from '@inertiajs/vue3'
|
||||
import { useFlightStats } from "@/Composables/useFlightStats"
|
||||
import {Head, router} from '@inertiajs/vue3'
|
||||
import {computed, onMounted, ref, watchEffect} from 'vue'
|
||||
import axios from 'axios'
|
||||
import {Flight, ProfileView, User} from "@/Types/types"
|
||||
import {useFlightStats} from "@/Composables/useFlightStats"
|
||||
import ProfileViewSwitcher from "@/Components/FlightsGoneBy/ProfileViewSwitcher.vue"
|
||||
import ProfileLayout from "@/Components/FlightsGoneBy/ProfileLayout.vue"
|
||||
import DepartureBoard from "@/Components/FlightsGoneBy/DepartureBoard.vue"
|
||||
@@ -15,13 +15,27 @@ defineOptions({ layout: MainLayout })
|
||||
|
||||
const props = defineProps<{
|
||||
user: User
|
||||
flights: Flight[]
|
||||
canEdit: boolean
|
||||
selectedFlightId?: number | null
|
||||
initialView?: ProfileView
|
||||
isFollowing: boolean
|
||||
flight_api_url: string
|
||||
}>()
|
||||
|
||||
// ── Flights state ─────────────────────────────────────────────────────────────
|
||||
const flights = ref<Flight[]>([])
|
||||
const flightsLoading = ref(true)
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const response = await axios.get(props.flight_api_url)
|
||||
|
||||
flights.value = response.data
|
||||
} finally {
|
||||
flightsLoading.value = false
|
||||
}
|
||||
})
|
||||
|
||||
const localSelectedFlightId = ref(props.selectedFlightId ?? null)
|
||||
|
||||
// ── Filter state ──────────────────────────────────────────────────────────────
|
||||
@@ -70,8 +84,7 @@ function matchesFilters(f: Flight): boolean {
|
||||
}
|
||||
|
||||
const filteredFlights = computed(() => {
|
||||
const result = props.flights.filter(matchesFilters)
|
||||
return result
|
||||
return flights.value.filter(matchesFilters)
|
||||
})
|
||||
|
||||
const stats = useFlightStats(filteredFlights)
|
||||
@@ -92,13 +105,18 @@ watchEffect(() => {
|
||||
// ── View switching ────────────────────────────────────────────────────────────
|
||||
const activeView = ref<ProfileView>(props.initialView ?? 'board')
|
||||
|
||||
const routeNames = {
|
||||
const routeNames: Record<Exclude<ProfileView, 'achievements'>, string> = {
|
||||
map: 'profile.map',
|
||||
board: 'profile.departure-board',
|
||||
passes: 'profile.boarding-passes',
|
||||
} as const
|
||||
|
||||
function switchView(view: ProfileView) {
|
||||
if (view === 'achievements') {
|
||||
router.visit(route('profile.achievements', { user: props.user.name }))
|
||||
return
|
||||
}
|
||||
|
||||
const flightId = view === 'board' ? localSelectedFlightId.value : null
|
||||
localSelectedFlightId.value = null
|
||||
activeView.value = view
|
||||
@@ -115,8 +133,8 @@ function switchView(view: ProfileView) {
|
||||
|
||||
<template>
|
||||
<Head :title="`${user.name}'s Flights`" />
|
||||
<ProfileLayout :is-following="isFollowing" :flights="flights" :user="user">
|
||||
<ProfileViewSwitcher :active-view="activeView" @update:active-view="switchView" />
|
||||
<ProfileLayout :is-following="isFollowing" :flightCount="flights.length" :user="user" :loading="flightsLoading">
|
||||
<ProfileViewSwitcher :user="user" :active-view="activeView" @update:active-view="switchView" />
|
||||
<DepartureBoard v-if="activeView === 'board'" :flight-id="localSelectedFlightId" :flight-stats="stats" :canEdit="canEdit" />
|
||||
<BoardingPasses v-if="activeView === 'passes'" :flight-stats="stats" :canEdit="canEdit" />
|
||||
<FlightMapAndCharts
|
||||
|
||||
Vendored
+70
-3
@@ -8,9 +8,9 @@ declare module '@vue/runtime-core' {
|
||||
}
|
||||
}
|
||||
|
||||
export type ProfileView = 'map' | 'board' | 'passes' ;
|
||||
export type ProfileView = 'map' | 'board' | 'passes' | 'achievements' ;
|
||||
export type ChartType = "line" | "area" | "bar" | "pie" | "donut" | "radialBar" | "scatter" | "bubble" | "heatmap" | "candlestick" | "boxPlot" | "radar" | "polarArea" | "rangeBar" | "rangeArea" | "treemap" | undefined
|
||||
export type BadgeVariant = 'first' | 'business' | 'premium' | 'economy' | 'private' | 'unspecified' | 'generic' | 'general_aviation' | 'crew'
|
||||
export type BadgeVariant = 'first' | 'business' | 'premium' | 'economy' | 'private' | 'unspecified' | 'generic' | 'general_aviation' | 'crew' | "easy" | "moderate" | "hard" | "expensive" | "near-impossible" | "impossible"
|
||||
|
||||
export interface User {
|
||||
id: number
|
||||
@@ -19,7 +19,7 @@ export interface User {
|
||||
email_verified_at: string | null
|
||||
}
|
||||
|
||||
export type UserActionType = "flight_cancelled" | "flight_booked" | "flight_updated" | "flight_logged" | "flight_deleted"
|
||||
export type UserActionType = "flight_cancelled" | "flight_booked" | "flight_updated" | "flight_logged" | "flight_deleted" | "flight_imported"
|
||||
export type UserActionDataKey = "field" | "from" | "to"
|
||||
|
||||
export type UserActionFlightBookedData = {
|
||||
@@ -39,6 +39,12 @@ export type UserActionFlightUpdatedData = {
|
||||
export type UserActionChange = {field: string, from: string, to: string}
|
||||
export type UserActionData = UserActionFlightBookedData | UserActionFlightCancelledData | UserActionFlightUpdatedData
|
||||
|
||||
export interface Alliance {
|
||||
id: number
|
||||
name: string
|
||||
internal_name: string
|
||||
}
|
||||
|
||||
export interface UserAction {
|
||||
id: number
|
||||
user_id: number
|
||||
@@ -57,6 +63,65 @@ export type SharedProps = import('@inertiajs/core').PageProps & {
|
||||
isLoggedIn: boolean
|
||||
},
|
||||
logo_api_url: string
|
||||
achievement_notifications: Notification[]
|
||||
}
|
||||
export interface AchievementDifficulty {
|
||||
id: number
|
||||
internal_name: string
|
||||
name: string
|
||||
description: string
|
||||
created_at: string | null
|
||||
updated_at: string | null
|
||||
}
|
||||
|
||||
export interface AchievementCategory {
|
||||
id: number
|
||||
internal_name: string
|
||||
name: string
|
||||
description: string
|
||||
created_at: string | null
|
||||
updated_at: string | null
|
||||
}
|
||||
|
||||
export interface Achievement {
|
||||
id: number
|
||||
name: string
|
||||
internal_name: string
|
||||
icon: string
|
||||
short_description: string
|
||||
long_description: string
|
||||
progressive: boolean
|
||||
difficulty_description: string | null
|
||||
threshold: number | null
|
||||
achievement_category_id: number
|
||||
achievement_difficulty_id: number
|
||||
category?: AchievementCategory
|
||||
difficulty?: AchievementDifficulty
|
||||
}
|
||||
|
||||
export interface UserAchievement {
|
||||
id: number
|
||||
user_id: number
|
||||
achievement_id: number
|
||||
progress: number | null
|
||||
achievement?: Achievement
|
||||
created_at: string | null
|
||||
updated_at: string | null
|
||||
}
|
||||
|
||||
export interface Notification {
|
||||
id: number
|
||||
user_id: number
|
||||
title: string
|
||||
body: string
|
||||
url: string | null
|
||||
is_achievement: boolean
|
||||
achievement_id: number | null
|
||||
achievement?: Achievement | null
|
||||
read_at: string | null
|
||||
expires_at: string | null
|
||||
created_at: string | null
|
||||
updated_at: string | null
|
||||
}
|
||||
|
||||
export interface Region {
|
||||
@@ -121,6 +186,8 @@ export interface Airline {
|
||||
country?: Country
|
||||
display_name: string
|
||||
logo_url: string
|
||||
alliance_id: number | null,
|
||||
alliance?: Alliance,
|
||||
}
|
||||
|
||||
export interface Aircraft {
|
||||
|
||||
Reference in New Issue
Block a user