Updated Map View
This commit is contained in:
@@ -1,109 +1,8 @@
|
||||
<template>
|
||||
<div class="stats-bar glass">
|
||||
<div class="stat">
|
||||
<template v-if="flights.length">
|
||||
<div class="stat-primary">
|
||||
<span class="stat-num">{{ flights.length.toLocaleString() }}</span>
|
||||
<span class="unit">flights</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="upcomingFlights.length">
|
||||
<div :class="flights.length ? 'stat-upcoming' : 'stat-primary'">
|
||||
<span :class="flights.length ? 'stat-upcoming-num' : 'stat-num'">{{ upcomingFlights.length.toLocaleString() }}</span>
|
||||
<span :class="flights.length ? 'stat-upcoming-lbl' : 'unit'">{{ flights.length ? 'upcoming' : 'flights' }}</span>
|
||||
<span v-if="!flights.length" class="upcoming-badge">upcoming</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="stat">
|
||||
<template v-if="uniqueRoutes">
|
||||
<div class="stat-primary">
|
||||
<span class="stat-num">{{ uniqueRoutes.toLocaleString() }}</span>
|
||||
<span class="unit">routes</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="uniqueUpcomingRoutes">
|
||||
<div :class="uniqueRoutes ? 'stat-upcoming' : 'stat-primary'">
|
||||
<span :class="uniqueRoutes ? 'stat-upcoming-num' : 'stat-num'">{{ uniqueUpcomingRoutes.toLocaleString() }}</span>
|
||||
<span :class="uniqueRoutes ? 'stat-upcoming-lbl' : 'unit'">{{ uniqueRoutes ? 'upcoming' : 'routes' }}</span>
|
||||
<span v-if="!uniqueRoutes" class="upcoming-badge">upcoming</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="stat">
|
||||
<template v-if="totalDistanceKm">
|
||||
<div class="stat-primary">
|
||||
<span class="stat-num"><Distance :unit="page.auth?.user?.resolved_settings?.distance_unit" includeSpace :value="totalDistanceKm" /></span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="upcomingDistanceKm">
|
||||
<div :class="totalDistanceKm ? 'stat-upcoming' : 'stat-primary'">
|
||||
<span :class="totalDistanceKm ? 'stat-upcoming-num' : 'stat-num'"><Distance :unit="page.auth?.user?.resolved_settings?.distance_unit" includeSpace :value="upcomingDistanceKm"/>
|
||||
<span :class="upcomingDistanceKm ? 'stat-upcoming-lbl' : 'unit'"> upcoming</span>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="stat">
|
||||
<template v-if="uniqueCountries">
|
||||
<div class="stat-primary">
|
||||
<span class="stat-num">{{ uniqueCountries }}</span>
|
||||
<span class="unit">countries</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="uniqueUpcomingCountries">
|
||||
<div :class="uniqueCountries ? 'stat-upcoming' : 'stat-primary'">
|
||||
<span :class="uniqueCountries ? 'stat-upcoming-num' : 'stat-num'">{{ uniqueUpcomingCountries }}</span>
|
||||
<span :class="uniqueCountries ? 'stat-upcoming-lbl' : 'unit'">{{ uniqueCountries ? 'upcoming' : 'countries' }}</span>
|
||||
<span v-if="!uniqueCountries" class="upcoming-badge">upcoming</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="stat">
|
||||
<template v-if="uniqueAirports">
|
||||
<div class="stat-primary">
|
||||
<span class="stat-num">{{ uniqueAirports }}</span>
|
||||
<span class="unit">airports</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="uniqueUpcomingAirports">
|
||||
<div :class="uniqueAirports ? 'stat-upcoming' : 'stat-primary'">
|
||||
<span :class="uniqueAirports ? 'stat-upcoming-num' : 'stat-num'">{{ uniqueUpcomingAirports }}</span>
|
||||
<span :class="uniqueAirports ? 'stat-upcoming-lbl' : 'unit'">{{ uniqueAirports ? 'upcoming' : 'airports' }}</span>
|
||||
<span v-if="!uniqueAirports" class="upcoming-badge">upcoming</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="stat">
|
||||
<template v-if="durationDisplay.hours">
|
||||
<div class="stat-primary">
|
||||
<span class="stat-num">{{ durationDisplay.hours.toLocaleString() }}</span>
|
||||
<span class="unit">hours in the air</span>
|
||||
</div>
|
||||
<div class="stat-sub">{{ durationDisplay.days }} days · {{ durationDisplay.weeks }} weeks</div>
|
||||
</template>
|
||||
<template v-if="upcomingDurationDisplay.hours">
|
||||
<div :class="durationDisplay.hours ? 'stat-upcoming' : 'stat-primary'">
|
||||
<span :class="durationDisplay.hours ? 'stat-upcoming-num' : 'stat-num'">{{ upcomingDurationDisplay.hours.toLocaleString() }}</span>
|
||||
<span :class="durationDisplay.hours ? 'stat-upcoming-lbl' : 'unit'">{{ durationDisplay.hours ? 'hrs upcoming' : 'hours in the air' }}</span>
|
||||
<span v-if="!durationDisplay.hours" class="upcoming-badge">upcoming</span>
|
||||
</div>
|
||||
<div v-if="!durationDisplay.hours" class="stat-sub">{{ upcomingDurationDisplay.days }} days · {{ upcomingDurationDisplay.weeks }} weeks</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import type {Flight, SharedProps} from '@/Types/types'
|
||||
import Distance from "@/Components/Distance.vue";
|
||||
import {usePage} from "@inertiajs/vue3";
|
||||
import type { Flight, SharedProps } from '@/Types/types'
|
||||
import StatItem from "@/Components/StatItem.vue"
|
||||
import { usePage } from "@inertiajs/vue3"
|
||||
|
||||
const props = defineProps<{
|
||||
flights: Flight[]
|
||||
@@ -197,8 +96,63 @@ const upcomingDurationDisplay = computed(() => {
|
||||
weeks: Math.floor(totalHours / 24 / 7),
|
||||
}
|
||||
})
|
||||
|
||||
const distanceUnit = computed(() => page.auth?.user?.resolved_settings?.distance_unit)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="stats-bar glass">
|
||||
<StatItem
|
||||
:primary="flights.length || null"
|
||||
unit="flights"
|
||||
:upcoming="upcomingFlights.length || null"
|
||||
:upcoming-label="flights.length ? 'upcoming' : 'flights'"
|
||||
:show-upcoming-badge="!flights.length"
|
||||
/>
|
||||
|
||||
<StatItem
|
||||
:primary="uniqueRoutes || null"
|
||||
unit="routes"
|
||||
:upcoming="uniqueUpcomingRoutes || null"
|
||||
:upcoming-label="uniqueRoutes ? 'upcoming' : 'routes'"
|
||||
:show-upcoming-badge="!uniqueRoutes"
|
||||
/>
|
||||
|
||||
<StatItem
|
||||
:primary="totalDistanceKm || null"
|
||||
:upcoming="upcomingDistanceKm || null"
|
||||
:upcoming-label="totalDistanceKm ? 'upcoming' : undefined"
|
||||
is-distance
|
||||
:distance-unit="distanceUnit"
|
||||
/>
|
||||
|
||||
<StatItem
|
||||
:primary="uniqueCountries || null"
|
||||
unit="countries"
|
||||
:upcoming="uniqueUpcomingCountries || null"
|
||||
:upcoming-label="uniqueCountries ? 'upcoming' : 'countries'"
|
||||
:show-upcoming-badge="!uniqueCountries"
|
||||
/>
|
||||
|
||||
<StatItem
|
||||
:primary="uniqueAirports || null"
|
||||
unit="airports"
|
||||
:upcoming="uniqueUpcomingAirports || null"
|
||||
:upcoming-label="uniqueAirports ? 'upcoming' : 'airports'"
|
||||
:show-upcoming-badge="!uniqueAirports"
|
||||
/>
|
||||
|
||||
<StatItem
|
||||
:primary="durationDisplay.hours || null"
|
||||
unit="hours in the air"
|
||||
:upcoming="upcomingDurationDisplay.hours || null"
|
||||
:upcoming-label="durationDisplay.hours ? 'hrs upcoming' : 'hours in the air'"
|
||||
:show-upcoming-badge="!durationDisplay.hours"
|
||||
:sub="!durationDisplay.hours ? `${upcomingDurationDisplay.days} days · ${upcomingDurationDisplay.weeks} weeks` : undefined"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.stats-bar {
|
||||
display: grid;
|
||||
@@ -209,94 +163,11 @@ const upcomingDurationDisplay = computed(() => {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.stat {
|
||||
padding: 18px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.stat-primary {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.stat-num {
|
||||
font-size: 26px;
|
||||
font-weight: 500;
|
||||
color: #e0e6f0;
|
||||
letter-spacing: -0.5px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #3a5566;
|
||||
}
|
||||
|
||||
.stat-sub {
|
||||
font-size: 11px;
|
||||
color: #334455;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.stat-upcoming {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 5px;
|
||||
margin-top: 5px;
|
||||
padding-top: 5px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.stat-upcoming-num {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #4a8fa8;
|
||||
}
|
||||
|
||||
.stat-upcoming-lbl {
|
||||
font-size: 12px;
|
||||
color: #335566;
|
||||
}
|
||||
|
||||
.upcoming-badge {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
color: #4a8fa8;
|
||||
background: rgba(74, 143, 168, 0.12);
|
||||
border: 1px solid rgba(74, 143, 168, 0.2);
|
||||
border-radius: 4px;
|
||||
padding: 1px 6px;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.stats-bar {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.stat {
|
||||
padding: 14px 16px;
|
||||
}
|
||||
.stats-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.stats-bar {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.stat {
|
||||
padding: 12px 14px;
|
||||
}
|
||||
|
||||
.stat-num {
|
||||
font-size: 22px;
|
||||
}
|
||||
.stats-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user