Updated Map View
This commit is contained in:
@@ -1,62 +1,115 @@
|
||||
<script setup lang="ts">
|
||||
import MainLayout from "@/Layouts/MainLayout.vue";
|
||||
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 MainLayout from "@/Layouts/MainLayout.vue"
|
||||
import { Head, router } from '@inertiajs/vue3'
|
||||
import { computed, ref, watchEffect } from 'vue'
|
||||
import { Flight, ProfileView, RegionRange, User, FlightRange, FlightScope } 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"
|
||||
import BoardingPasses from "@/Components/FlightsGoneBy/BoardingPasses.vue";
|
||||
import FlightMapAndCharts from "@/Components/FlightsGoneBy/FlightMapAndCharts.vue";
|
||||
import {useFlights} from "@/Composables/useFlights";
|
||||
import BoardingPasses from "@/Components/FlightsGoneBy/BoardingPasses.vue"
|
||||
import FlightMapAndCharts from "@/Components/FlightsGoneBy/FlightMapAndCharts.vue"
|
||||
import FlightFilter from "@/Components/FlightsGoneBy/FlightFilter.vue"
|
||||
import { useFlights } from "@/Composables/useFlights"
|
||||
|
||||
defineOptions({ layout: MainLayout })
|
||||
|
||||
const props = defineProps<{
|
||||
user: User
|
||||
canEdit: boolean
|
||||
canView: boolean
|
||||
selectedFlightId?: number | null
|
||||
initialView?: ProfileView
|
||||
isFollowing: boolean
|
||||
followStatus: string
|
||||
flight_api_url: string
|
||||
flightCount: number,
|
||||
flightCount: number
|
||||
}>()
|
||||
|
||||
// ── Flights state ─────────────────────────────────────────────────────────────
|
||||
|
||||
const { flights, flightsLoading } = useFlights(props.flight_api_url)
|
||||
const localSelectedFlightId = ref(props.selectedFlightId ?? null)
|
||||
|
||||
// ── Filter state ──────────────────────────────────────────────────────────────
|
||||
const selectedYears = ref<number[]>([])
|
||||
const selectedAirlines = ref<number[]>([])
|
||||
const selectedCountries = ref<string[]>([])
|
||||
const selectedContinents = ref<string[]>([])
|
||||
const selectedFlightClasses = ref<number[]>([])
|
||||
const selectedCrewTypes = ref<number[]>([])
|
||||
|
||||
const filtersOpen = ref(window.innerWidth >= 1024)
|
||||
|
||||
const selectedYears = ref<number[]>([])
|
||||
const selectedAirlines = ref<number[]>([])
|
||||
const selectedAlliances = ref<number[]>([])
|
||||
const selectedCountries = ref<string[]>([])
|
||||
const selectedContinents = ref<string[]>([])
|
||||
const selectedFlightClasses = ref<number[]>([])
|
||||
const selectedCrewTypes = ref<number[]>([])
|
||||
const selectedFlightScopes = ref<FlightScope[]>([])
|
||||
const selectedFlightRanges = ref<FlightRange[]>([])
|
||||
const selectedRegionRanges = ref<RegionRange[]>([])
|
||||
const selectedFlightReasons = ref<number[]>([])
|
||||
const selectedSeatTypes = ref<number[]>([])
|
||||
const selectedManufacturers = ref<string[]>([])
|
||||
const selectedAircraftModels = ref<number[]>([])
|
||||
const selectedAirportRegions = ref<number[]>([])
|
||||
|
||||
const activeFilterCount = computed(() =>
|
||||
selectedYears.value.length +
|
||||
selectedAirlines.value.length +
|
||||
selectedAlliances.value.length +
|
||||
selectedCountries.value.length +
|
||||
selectedContinents.value.length +
|
||||
selectedFlightClasses.value.length +
|
||||
selectedCrewTypes.value.length +
|
||||
selectedFlightScopes.value.length +
|
||||
selectedFlightRanges.value.length +
|
||||
selectedRegionRanges.value.length +
|
||||
selectedFlightReasons.value.length +
|
||||
selectedSeatTypes.value.length +
|
||||
selectedManufacturers.value.length +
|
||||
selectedAircraftModels.value.length +
|
||||
selectedAirportRegions.value.length
|
||||
)
|
||||
|
||||
function onFiltersChange(filters: {
|
||||
years: number[]
|
||||
airlines: number[]
|
||||
alliances: number[]
|
||||
countries: string[]
|
||||
continents: string[]
|
||||
flightClasses: number[]
|
||||
crewTypes: number[]
|
||||
flightScopes: FlightScope[]
|
||||
flightRanges: FlightRange[]
|
||||
regionRanges: RegionRange[]
|
||||
flightReasons: number[]
|
||||
seatTypes: number[]
|
||||
manufacturers: string[]
|
||||
aircraftModels: number[]
|
||||
airportRegions: number[]
|
||||
}) {
|
||||
localSelectedFlightId.value = null
|
||||
selectedYears.value = filters.years
|
||||
selectedAirlines.value = filters.airlines
|
||||
selectedCountries.value = filters.countries
|
||||
selectedContinents.value = filters.continents
|
||||
selectedFlightClasses.value = filters.flightClasses
|
||||
selectedCrewTypes.value = filters.crewTypes
|
||||
localSelectedFlightId.value = null
|
||||
selectedYears.value = filters.years
|
||||
selectedAirlines.value = filters.airlines
|
||||
selectedAlliances.value = filters.alliances
|
||||
selectedCountries.value = filters.countries
|
||||
selectedContinents.value = filters.continents
|
||||
selectedFlightClasses.value = filters.flightClasses
|
||||
selectedCrewTypes.value = filters.crewTypes
|
||||
selectedFlightScopes.value = filters.flightScopes
|
||||
selectedFlightRanges.value = filters.flightRanges
|
||||
selectedRegionRanges.value = filters.regionRanges
|
||||
selectedFlightReasons.value = filters.flightReasons
|
||||
selectedSeatTypes.value = filters.seatTypes
|
||||
selectedManufacturers.value = filters.manufacturers
|
||||
selectedAircraftModels.value = filters.aircraftModels
|
||||
selectedAirportRegions.value = filters.airportRegions
|
||||
}
|
||||
|
||||
// ── Filtering ─────────────────────────────────────────────────────────────────
|
||||
|
||||
function matchesFilters(f: Flight): boolean {
|
||||
const date = new Date(f.departure_date)
|
||||
if (selectedYears.value.length && !selectedYears.value.includes(date.getFullYear())) return false
|
||||
if (selectedAirlines.value.length && !selectedAirlines.value.includes(f.airline?.id ?? -1)) return false
|
||||
if (selectedAlliances.value.length && !selectedAlliances.value.includes(f.airline?.alliance?.id ?? -1)) return false
|
||||
if (selectedCountries.value.length) {
|
||||
const depCode = f.departure_airport.region?.country?.code
|
||||
const arrCode = f.arrival_airport.region?.country?.code
|
||||
@@ -69,14 +122,23 @@ function matchesFilters(f: Flight): boolean {
|
||||
}
|
||||
if (selectedFlightClasses.value.length && !selectedFlightClasses.value.includes(f.flight_class?.id ?? -1)) return false
|
||||
if (selectedCrewTypes.value.length && !selectedCrewTypes.value.includes(f.crew_type?.id ?? -1)) return false
|
||||
|
||||
if (selectedFlightScopes.value.length && !selectedFlightScopes.value.includes(f.scope)) return false
|
||||
if (selectedFlightRanges.value.length && !selectedFlightRanges.value.includes(f.range)) return false
|
||||
if (selectedRegionRanges.value.length && !selectedRegionRanges.value.includes(f.region_range)) return false
|
||||
if (selectedFlightReasons.value.length && !selectedFlightReasons.value.includes(f.flight_reason?.id ?? -1)) return false
|
||||
if (selectedSeatTypes.value.length && !selectedSeatTypes.value.includes(f.seat_type?.id ?? -1)) return false
|
||||
if (selectedManufacturers.value.length && !selectedManufacturers.value.includes(f.aircraft?.manufacturer_code ?? '')) return false
|
||||
if (selectedAircraftModels.value.length && !selectedAircraftModels.value.includes(f.aircraft?.id ?? -1)) return false
|
||||
if (selectedAirportRegions.value.length) {
|
||||
const depRegion = f.departure_airport.region?.id
|
||||
const arrRegion = f.arrival_airport.region?.id
|
||||
if (!selectedAirportRegions.value.includes(depRegion ?? -1) &&
|
||||
!selectedAirportRegions.value.includes(arrRegion ?? -1)) return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
const filteredFlights = computed(() => {
|
||||
return flights.value.filter(matchesFilters)
|
||||
})
|
||||
|
||||
const filteredFlights = computed(() => flights.value.filter(matchesFilters))
|
||||
const stats = useFlightStats(filteredFlights)
|
||||
|
||||
watchEffect(() => {
|
||||
@@ -91,6 +153,7 @@ watchEffect(() => {
|
||||
})
|
||||
|
||||
// ── View switching ────────────────────────────────────────────────────────────
|
||||
|
||||
const activeView = ref<ProfileView>(props.initialView ?? 'board')
|
||||
|
||||
const routeNames: Record<Exclude<ProfileView, 'achievements'>, string> = {
|
||||
@@ -99,6 +162,11 @@ const routeNames: Record<Exclude<ProfileView, 'achievements'>, string> = {
|
||||
passes: 'profile.boarding-passes',
|
||||
} as const
|
||||
|
||||
function toggleFilters(e: MouseEvent) {
|
||||
filtersOpen.value = !filtersOpen.value
|
||||
;(e.currentTarget as HTMLButtonElement).blur()
|
||||
}
|
||||
|
||||
function switchView(view: ProfileView) {
|
||||
if (view === 'achievements') {
|
||||
router.visit(route('profile.achievements', { user: props.user.name }))
|
||||
@@ -120,16 +188,97 @@ function switchView(view: ProfileView) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head :title="`${user.name}'s Flights`" />
|
||||
<ProfileLayout :is-following="isFollowing" :flightCount="flightCount" :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" :user="user" />
|
||||
<ProfileLayout :title="`${user.name}'s Flights`" :canView="canView" :followStatus="followStatus" :flightCount="flightCount" :user="user" :loading="flightsLoading">
|
||||
|
||||
<div class="toolbar">
|
||||
<ProfileViewSwitcher :user="user" :active-view="activeView" @update:active-view="switchView" />
|
||||
<button
|
||||
class="filter-toggle"
|
||||
:class="{ active: filtersOpen || activeFilterCount > 0 }"
|
||||
@click="toggleFilters"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/>
|
||||
</svg>
|
||||
Filters
|
||||
<span v-if="activeFilterCount > 0" class="filter-badge">{{ activeFilterCount }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-show="filtersOpen" class="filter-panel">
|
||||
<FlightFilter :flights="flights" @change="onFiltersChange" />
|
||||
</div>
|
||||
|
||||
<DepartureBoard v-if="activeView === 'board'" :flight-id="localSelectedFlightId" :flight-stats="stats" :canEdit="canEdit" :user="user" />
|
||||
<BoardingPasses v-if="activeView === 'passes'" :flight-stats="stats" :canEdit="canEdit" :user="user" />
|
||||
<FlightMapAndCharts
|
||||
v-if="activeView === 'map'"
|
||||
:stats="stats"
|
||||
:canEdit="canEdit"
|
||||
@filters-change="onFiltersChange"
|
||||
/>
|
||||
<FlightMapAndCharts v-if="activeView === 'map'" :stats="stats" :canEdit="canEdit" />
|
||||
|
||||
</ProfileLayout>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.filter-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
background: none;
|
||||
border: 1px solid #334455;
|
||||
border-radius: 6px;
|
||||
color: #778899;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
padding: 6px 12px;
|
||||
transition: color 0.15s, border-color 0.15s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.filter-toggle:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.filter-toggle:hover {
|
||||
border-color: #4da6ff;
|
||||
color: #4da6ff;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-toggle.active {
|
||||
border-color: #4da6ff;
|
||||
color: #4da6ff;
|
||||
}
|
||||
|
||||
.filter-badge {
|
||||
background: #4da6ff;
|
||||
color: #0a1628;
|
||||
border-radius: 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
.filter-panel {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.toolbar {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.filter-toggle {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user