Added Notifications
This commit is contained in:
@@ -0,0 +1,192 @@
|
||||
<script setup lang="ts">
|
||||
import {Achievement, 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";
|
||||
|
||||
defineOptions({ layout: MainLayout })
|
||||
|
||||
const props = defineProps<{
|
||||
achievement: Achievement
|
||||
userAchievement: UserAchievement
|
||||
user: User
|
||||
isFollowing: boolean
|
||||
flight_api_url: string
|
||||
regions: Region[]
|
||||
}>()
|
||||
|
||||
|
||||
const { flights, flightsLoading } = useFlights(props.flight_api_url)
|
||||
|
||||
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 :user="user" :isFollowing="isFollowing" :loading="flightsLoading">
|
||||
<Head :title="`${achievement.name}`" />
|
||||
<div class="innerLayout">
|
||||
<v-btn
|
||||
prepend-icon="mdi-arrow-left"
|
||||
variant="flat"
|
||||
>
|
||||
<Link :href="route('profile.achievements', { user: user.name })">
|
||||
Back to {{ user.name }}'s Achievements
|
||||
</Link>
|
||||
</v-btn>
|
||||
|
||||
<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" />
|
||||
</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>
|
||||
Reference in New Issue
Block a user