211 lines
6.7 KiB
Vue
211 lines
6.7 KiB
Vue
<script setup lang="ts">
|
|
import {Achievement, Airline, Continent, Region, User, UserAchievement} from "@/Types/types";
|
|
import ProfileLayout from "@/Components/FlightsGoneBy/ProfileLayout.vue";
|
|
import Panel from "@/Components/FlightsGoneBy/Panels/Panel.vue";
|
|
import {computed, defineAsyncComponent} from 'vue';
|
|
import AchievementCard from "@/Components/FlightsGoneBy/AchievementCard.vue";
|
|
import PanelHeader from "@/Components/FlightsGoneBy/Panels/PanelHeader.vue";
|
|
import PanelSubHeader from "@/Components/FlightsGoneBy/Panels/PanelSubHeader.vue";
|
|
import {Head, Link} from '@inertiajs/vue3';
|
|
import MainLayout from "@/Layouts/MainLayout.vue";
|
|
import {useFlights} from "@/Composables/useFlights";
|
|
import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";
|
|
import GlassTooltip from "@/Components/FlightsGoneBy/GlassTooltip.vue";
|
|
import ButtonLink from "@/Components/FlightsGoneBy/ButtonLink.vue";
|
|
|
|
defineOptions({ layout: MainLayout })
|
|
|
|
const props = defineProps<{
|
|
achievement: Achievement
|
|
userAchievement: UserAchievement
|
|
user: User
|
|
loggedInUser: User | null
|
|
isFollowing: boolean
|
|
flight_api_url: string
|
|
regions: Region[]
|
|
alliance: string | null
|
|
airlines: Airline[]
|
|
continents: Continent[]
|
|
aircraft_families: Record<string, string[]>
|
|
achievementCount: number
|
|
}>()
|
|
|
|
|
|
const { flights, flightsLoading } = useFlights(props.flight_api_url, true)
|
|
|
|
const AchievementDetail = defineAsyncComponent(
|
|
() => import(`./Achievements/${props.achievement.internal_name}.vue`)
|
|
)
|
|
|
|
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>
|
|
<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 })}#${achievement.internal_name}`" />
|
|
|
|
|
|
<VAlert type="info" v-if="loggedInUser?.id !== user.id && loggedInUser">
|
|
You are viewing {{user.name}}'s progress in this achievement. If you would like to see your progress,
|
|
<Link :href="route('profile.achievement', {user: loggedInUser.name, achievement: achievement.internal_name})">please click here</Link>.
|
|
</VAlert>
|
|
|
|
|
|
<Panel>
|
|
<div class="achievement-hero">
|
|
<div class="achievement-icon-wrap" :class="{ unlocked }">
|
|
<v-icon
|
|
icon="mdi-trophy"
|
|
:color="unlocked ? 'amber' : 'grey'"
|
|
size="48"
|
|
/>
|
|
</div>
|
|
|
|
<div class="achievement-titles">
|
|
<div class="name-row">
|
|
<PanelHeader centered>{{ achievement.name }}</PanelHeader>
|
|
</div>
|
|
|
|
<PanelSubHeader>{{ achievement.short_description }}</PanelSubHeader>
|
|
|
|
<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="8"
|
|
bg-color="white"
|
|
/>
|
|
</template>
|
|
|
|
<div v-else-if="unlocked" class="achieved-label">
|
|
<v-icon icon="mdi-check-circle" color="amber" size="16" /> Achieved
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Panel>
|
|
|
|
<component
|
|
:is="AchievementDetail"
|
|
:regions="regions"
|
|
:flights="flights"
|
|
:achievement="achievement"
|
|
:user="user"
|
|
:isFollowing="isFollowing"
|
|
:airlines="airlines"
|
|
:alliance="alliance"
|
|
:continents="continents"
|
|
:families="aircraft_families"
|
|
/>
|
|
</div>
|
|
</ProfileLayout>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.innerLayout{
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2em;
|
|
width: 60%;
|
|
max-width: 1000px;
|
|
margin: auto;
|
|
}
|
|
|
|
/* Tablet portrait */
|
|
@media (max-width: 1024px) {
|
|
.innerLayout {
|
|
width: 90%;
|
|
}
|
|
}
|
|
|
|
/* Mobile */
|
|
@media (max-width: 700px) {
|
|
.innerLayout {
|
|
width: 100%;
|
|
padding: 0 0.1rem; /* optional so content doesn't touch edges */
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
.achievement-hero {
|
|
display: flex;
|
|
gap: 1.5rem;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.achievement-icon-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 64px;
|
|
height: 64px;
|
|
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-titles {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
align-items: center; /* add this */
|
|
text-align: center; /* add this */
|
|
}
|
|
|
|
.name-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.progress-label {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 0.8rem;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.progress-label,
|
|
.v-progress-linear {
|
|
width: 100%;
|
|
}
|
|
</style>
|