- ().props
diff --git a/resources/js/Components/FlightsGoneBy/Charts/TopAirportsChart.vue b/resources/js/Components/FlightsGoneBy/Charts/TopAirportsChart.vue
index c2fafb3..f7f402b 100644
--- a/resources/js/Components/FlightsGoneBy/Charts/TopAirportsChart.vue
+++ b/resources/js/Components/FlightsGoneBy/Charts/TopAirportsChart.vue
@@ -4,7 +4,7 @@
-
+import { ref } from 'vue'
+import PlaneLoader from "@/Components/FlightsGoneBy/PlaneLoader.vue";
+import VueApexCharts from 'vue3-apexcharts'
+import {ChartType} from "@/Types/types";
+
+defineProps<{
+ type: ChartType
+ title: string
+ height: number | string
+ options: object
+ series: unknown[]
+}>()
+
+const ready = ref(false)
+
+
+
+
+
+
+
+
diff --git a/resources/js/Components/FlightsGoneBy/ProfileMap.vue b/resources/js/Components/FlightsGoneBy/FlightFillter.vue
similarity index 63%
rename from resources/js/Components/FlightsGoneBy/ProfileMap.vue
rename to resources/js/Components/FlightsGoneBy/FlightFillter.vue
index 9d855c6..ec4792d 100644
--- a/resources/js/Components/FlightsGoneBy/ProfileMap.vue
+++ b/resources/js/Components/FlightsGoneBy/FlightFillter.vue
@@ -1,170 +1,45 @@
-
- {{title}}
+
-
-
-
- {{ item }},
-
- +{{ selectedYears.length - 2 }}
-
-
-
-
-
-
-
- ![]()
- {{ (item as any).name }}
-
-
-
-
-
- {{ (item as any).name }},
-
- +{{ selectedAirlines.length - 2 }}
-
-
-
-
-
-
-
-
-
-
-
-
- {{ (item as any).name }},
-
- +{{ selectedCountries.length - 2 }}
-
-
-
-
-
-
- {{ (item as any).name }},
-
- +{{ selectedContinents.length - 2 }}
-
-
-
-
-
-
- {{ (item as any).name }},
-
- +{{ selectedFlightClasses.length - 2 }}
-
-
-
-
-
+
+
+
+ {{ item }},
+
+ +{{ selectedYears.length - 2 }}
+
+
+
+
+
+
+
+ ![]()
+ {{ (item as any).name }}
+
+
+
+
+
+ {{ (item as any).name }},
+
+ +{{ selectedAirlines.length - 2 }}
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ (item as any).name }},
+
+ +{{ selectedCountries.length - 2 }}
+
+
+
+
+
+
+ {{ (item as any).name }},
+
+ +{{ selectedContinents.length - 2 }}
+
+
+
+
+
+
+ {{ (item as any).name }},
+
+ +{{ selectedFlightClasses.length - 2 }}
+
+
+
+
+
diff --git a/resources/js/Components/FlightsGoneBy/FlightMap.vue b/resources/js/Components/FlightsGoneBy/FlightMap.vue
index 92cbf87..d87898f 100644
--- a/resources/js/Components/FlightsGoneBy/FlightMap.vue
+++ b/resources/js/Components/FlightsGoneBy/FlightMap.vue
@@ -1,6 +1,7 @@
-
+
}
+const logoApiUrl = usePage().props.logo_api_url
+
+function greatCircleGeoJSON(from: LngLat, to: LngLat, steps?: number): LngLat[] {
+ const dist = Math.sqrt((to[0] - from[0]) ** 2 + (to[1] - from[1]) ** 2)
+ const s = steps ?? (dist > 60 ? 64 : dist > 20 ? 32 : 16)
-function greatCircleGeoJSON(from: LngLat, to: LngLat, steps = 64): LngLat[] {
const toRad = (d: number): number => d * Math.PI / 180
const toDeg = (r: number): number => r * 180 / Math.PI
const lat1 = toRad(from[1]), lng1 = toRad(from[0])
@@ -51,8 +57,8 @@ function greatCircleGeoJSON(from: LngLat, to: LngLat, steps = 64): LngLat[] {
))
if (d === 0) return [[from[0], from[1]], [to[0], to[1]]]
const points: LngLat[] = []
- for (let i = 0; i <= steps; i++) {
- const f = i / steps
+ for (let i = 0; i <= s; i++) {
+ const f = i / s
const A = Math.sin((1 - f) * d) / Math.sin(d)
const B = Math.sin(f * d) / Math.sin(d)
const x = A * Math.cos(lat1) * Math.cos(lng1) + B * Math.cos(lat2) * Math.cos(lng2)
@@ -96,7 +102,6 @@ function airportPopupHTML(airport: Airport): string {
}
function routePopupHTML(historical: Flight[], future: Flight[]): string {
- const logoApiUrl = usePage().props.logo_api_url
interface DirectionGroup {
label: string
airlines: string[]
@@ -140,6 +145,7 @@ function routePopupHTML(historical: Flight[], future: Flight[]): string {
export default defineComponent({
name: 'FlightMap',
+ components: {PlaneLoader},
props: {
flights: {
@@ -158,6 +164,7 @@ export default defineComponent({
const TOUCH_RADIUS = 20
const airportById = new Map()
const routeFlights = new Map()
+ const arcCache = new Map()
let selectedAirportId: number | null = null
const isTouchDevice = (): boolean => window.matchMedia('(pointer: coarse)').matches
@@ -170,22 +177,23 @@ export default defineComponent({
const applyFilter = (): void => {
if (!map || !map.isStyleLoaded()) return
const id = selectedAirportId
- const filter: maplibregl.FilterSpecification | null = id
+
+ const routeFilter: maplibregl.FilterSpecification | null = id
? ['any', ['==', ['get', 'depId'], id], ['==', ['get', 'arrId'], id]]
: null
- map.setFilter('routes-line', filter)
- map.setFilter('routes-hit', filter)
- map.setFilter('routes-future-line', filter)
- map.setFilter('routes-future-hit', filter)
+ map.setFilter('routes-line', routeFilter)
+ map.setFilter('routes-hit', routeFilter)
+ map.setFilter('routes-future-line', routeFilter)
+ map.setFilter('routes-future-hit', routeFilter)
+ // Use setFilter on airport layers — GPU-side, no style recompilation
for (let i = 0; i < PULSE_PHASES; i++) {
- map.setPaintProperty(`airports-dot-${i}`, 'circle-opacity',
- id ? ['case', ['==', ['get', 'id'], id], 1, 0.25] : 1)
- map.setPaintProperty(`airports-dot-${i}`, 'circle-stroke-opacity',
- id ? ['case', ['==', ['get', 'id'], id], 1, 0.25] : 1)
- map.setPaintProperty(`airports-pulse-${i}`, 'circle-stroke-opacity',
- id ? ['case', ['==', ['get', 'id'], id], 0.6, 0] : 0.6)
+ const airportFilter: maplibregl.FilterSpecification | null = id
+ ? ['==', ['get', 'id'], id]
+ : null
+ map.setFilter(`airports-dot-${i}`, airportFilter)
+ map.setFilter(`airports-pulse-${i}`, airportFilter)
}
}
@@ -200,6 +208,18 @@ export default defineComponent({
})
}
+ // ── Arc cache helper ──────────────────────────────────────────────────
+ const getArc = (flight: Flight): LngLat[] => {
+ const key = [flight.departure_airport.id, flight.arrival_airport.id].sort().join('-')
+ if (!arcCache.has(key)) {
+ arcCache.set(key, greatCircleGeoJSON(
+ [flight.departure_airport.longitude_deg, flight.departure_airport.latitude_deg],
+ [flight.arrival_airport.longitude_deg, flight.arrival_airport.latitude_deg],
+ ))
+ }
+ return arcCache.get(key)!
+ }
+
// ── GeoJSON builders ──────────────────────────────────────────────────
const buildRoutesGeoJSON = (): RoutesGeoJSON => {
buildRouteFlights()
@@ -219,51 +239,45 @@ export default defineComponent({
return '#a150d5'
}
- const historicalFeatures: GeoJSON.Feature[] =
- props.flights
- .filter(f => new Date(f.departure_date) <= now)
- .map((flight) => {
- const key = [flight.departure_airport.id, flight.arrival_airport.id].sort().join('-')
- const count = routeCounts.get(key) ?? 1
- return {
- type: 'Feature',
- properties: {
- color: routeColor(count), routeKey: key,
- depId: flight.departure_airport.id,
- arrId: flight.arrival_airport.id,
- },
- geometry: {
- type: 'LineString',
- coordinates: greatCircleGeoJSON(
- [flight.departure_airport.longitude_deg, flight.departure_airport.latitude_deg],
- [flight.arrival_airport.longitude_deg, flight.arrival_airport.latitude_deg],
- ),
- },
- }
+ const seenHistorical = new Set()
+ const historicalFeatures: GeoJSON.Feature[] = []
+ props.flights
+ .filter(f => new Date(f.departure_date) <= now)
+ .forEach((flight) => {
+ const key = [flight.departure_airport.id, flight.arrival_airport.id].sort().join('-')
+ if (seenHistorical.has(key)) return
+ seenHistorical.add(key)
+ const count = routeCounts.get(key) ?? 1
+ historicalFeatures.push({
+ type: 'Feature',
+ properties: {
+ color: routeColor(count), routeKey: key,
+ depId: flight.departure_airport.id,
+ arrId: flight.arrival_airport.id,
+ },
+ geometry: { type: 'LineString', coordinates: getArc(flight) },
})
+ })
const historicalKeys = new Set(routeCounts.keys())
- const futureFeatures: GeoJSON.Feature[] =
- props.flights
- .filter((flight) => {
- if (new Date(flight.departure_date) <= now) return false
- const key = [flight.departure_airport.id, flight.arrival_airport.id].sort().join('-')
- return !historicalKeys.has(key)
- })
- .map((flight) => {
- const key = [flight.departure_airport.id, flight.arrival_airport.id].sort().join('-')
- return {
- type: 'Feature',
- properties: { routeKey: key, depId: flight.departure_airport.id, arrId: flight.arrival_airport.id },
- geometry: {
- type: 'LineString',
- coordinates: greatCircleGeoJSON(
- [flight.departure_airport.longitude_deg, flight.departure_airport.latitude_deg],
- [flight.arrival_airport.longitude_deg, flight.arrival_airport.latitude_deg],
- ),
- },
- }
+ const seenFuture = new Set()
+ const futureFeatures: GeoJSON.Feature[] = []
+ props.flights
+ .filter((flight) => {
+ if (new Date(flight.departure_date) <= now) return false
+ const key = [flight.departure_airport.id, flight.arrival_airport.id].sort().join('-')
+ return !historicalKeys.has(key)
+ })
+ .forEach((flight) => {
+ const key = [flight.departure_airport.id, flight.arrival_airport.id].sort().join('-')
+ if (seenFuture.has(key)) return
+ seenFuture.add(key)
+ futureFeatures.push({
+ type: 'Feature',
+ properties: { routeKey: key, depId: flight.departure_airport.id, arrId: flight.arrival_airport.id },
+ geometry: { type: 'LineString', coordinates: getArc(flight) },
})
+ })
return {
historical: { type: 'FeatureCollection', features: historicalFeatures },
@@ -384,9 +398,8 @@ export default defineComponent({
})
}
- // ── Unified click handler — airports take priority over routes ────
+ // ── Unified click handler ─────────────────────────────────────────
map!.on('click', (e) => {
- // Query airports with a larger bounding box on touch for easier tapping
const airportQuery = isTouch
? [[e.point.x - TOUCH_RADIUS, e.point.y - TOUCH_RADIUS], [e.point.x + TOUCH_RADIUS, e.point.y + TOUCH_RADIUS]] as [maplibregl.PointLike, maplibregl.PointLike]
: e.point as maplibregl.PointLike
@@ -408,7 +421,6 @@ export default defineComponent({
return
}
- // Then check routes
const routeFeatures = map!.queryRenderedFeatures(e.point, {
layers: ['routes-hit', 'routes-future-hit'],
})
@@ -419,7 +431,6 @@ export default defineComponent({
return
}
- // Empty map click — deselect everything
selectedAirportId = null
applyFilter()
popup!.remove()
@@ -443,12 +454,14 @@ export default defineComponent({
const fitBounds = (): void => {
if (!props.flights.length) return
- const lngs = props.flights.flatMap(f => [f.departure_airport.longitude_deg, f.arrival_airport.longitude_deg])
- const lats = props.flights.flatMap(f => [f.departure_airport.latitude_deg, f.arrival_airport.latitude_deg])
- map!.fitBounds(
- [[Math.min(...lngs), Math.min(...lats)], [Math.max(...lngs), Math.max(...lats)]],
- { padding: 60, duration: 0 },
- )
+ let minLng = Infinity, maxLng = -Infinity, minLat = Infinity, maxLat = -Infinity
+ props.flights.forEach(f => {
+ minLng = Math.min(minLng, f.departure_airport.longitude_deg, f.arrival_airport.longitude_deg)
+ maxLng = Math.max(maxLng, f.departure_airport.longitude_deg, f.arrival_airport.longitude_deg)
+ minLat = Math.min(minLat, f.departure_airport.latitude_deg, f.arrival_airport.latitude_deg)
+ maxLat = Math.max(maxLat, f.departure_airport.latitude_deg, f.arrival_airport.latitude_deg)
+ })
+ map!.fitBounds([[minLng, minLat], [maxLng, maxLat]], { padding: 60, duration: 0 })
}
// ── Map init ──────────────────────────────────────────────────────────
@@ -479,13 +492,18 @@ export default defineComponent({
renderWorldCopies: true,
})
map.addControl(new maplibregl.NavigationControl({ showCompass: false }), 'top-right')
- map.on('load', () => { addLayers(); fitBounds() })
+ map.on('load', () => {
+ addLayers()
+ fitBounds()
+ mapReady.value = true // ← add this
+ })
})
}
// ── Data updates ──────────────────────────────────────────────────────
const updateData = (): void => {
if (!map || !map.isStyleLoaded()) return
+ arcCache.clear()
airportById.clear()
props.flights.forEach(({ departure_airport: dep, arrival_airport: arr }) => {
airportById.set(dep.id, dep)
@@ -508,14 +526,16 @@ export default defineComponent({
initMap()
})
- watch(() => props.flights, updateData, { deep: true })
+ watch(() => props.flights, updateData)
onBeforeUnmount(() => {
if (pulseFrame !== null) cancelAnimationFrame(pulseFrame)
if (map) { map.remove(); map = null }
})
- return { mapContainer }
+ const mapReady = ref(false)
+
+ return { mapContainer, mapReady }
},
})
@@ -525,11 +545,22 @@ export default defineComponent({
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
.map-container {
- width: 100%;
- height: 100%;
+ position: absolute;
+ inset: 0;
+}
+
+.map-loader {
+ z-index: 10;
+}
+
+.map-hidden {
+ visibility: hidden;
}
.empty-state {
@@ -547,6 +578,8 @@ export default defineComponent({
.empty-state .mdi { font-size: 48px; }
.empty-state p { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; margin: 0; }
+
+
diff --git a/resources/js/Components/FlightsGoneBy/FlightMapAndCharts.vue b/resources/js/Components/FlightsGoneBy/FlightMapAndCharts.vue
new file mode 100644
index 0000000..d6de377
--- /dev/null
+++ b/resources/js/Components/FlightsGoneBy/FlightMapAndCharts.vue
@@ -0,0 +1,85 @@
+
+
+
+
+
+
diff --git a/resources/js/Pages/ProfileMap.vue b/resources/js/Pages/ProfileMap.vue
new file mode 100644
index 0000000..957e728
--- /dev/null
+++ b/resources/js/Pages/ProfileMap.vue
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+
+
+
diff --git a/resources/js/Pages/UserProfile.vue b/resources/js/Pages/UserProfile.vue
new file mode 100644
index 0000000..f882b67
--- /dev/null
+++ b/resources/js/Pages/UserProfile.vue
@@ -0,0 +1,55 @@
+
+
+
+
+
+
+
diff --git a/resources/js/Types/types.d.ts b/resources/js/Types/types.d.ts
index 0d0e4b4..9903217 100644
--- a/resources/js/Types/types.d.ts
+++ b/resources/js/Types/types.d.ts
@@ -8,6 +8,9 @@ declare module '@vue/runtime-core' {
}
}
+export type ProfileView = 'map' | 'board' | 'passes';
+export type ChartType = "line" | "area" | "bar" | "pie" | "donut" | "radialBar" | "scatter" | "bubble" | "heatmap" | "candlestick" | "boxPlot" | "radar" | "polarArea" | "rangeBar" | "rangeArea" | "treemap" | undefined
+
export interface User {
id: number
name: string
diff --git a/routes/web.php b/routes/web.php
index 4d13ae6..79128ce 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -72,6 +72,9 @@ Route::domain(config('app.domain'))->group(
Route::get('/u/{username}', [FlightProfileController::class, 'view'])->name('profile.view');
+ Route::get('/u/{username}/map', [FlightProfileController::class, 'map'])->name('profile.map');
+ Route::get('/u/{username}/departure-board', [FlightProfileController::class, 'departureBoard'])->name('profile.departure-board');
+ Route::get('/u/{username}/boarding-passes', [FlightProfileController::class, 'boardingPasses'])->name('profile.boarding-passes');
require __DIR__.'/auth.php';
No flight data available
@@ -15,6 +16,7 @@ import 'maplibre-gl/dist/maplibre-gl.css' import { SharedProps } from '@/Types/types' import { usePage } from '@inertiajs/vue3' import { Flight, Airport } from '@/Types/types' +import PlaneLoader from "@/Components/FlightsGoneBy/PlaneLoader.vue"; interface RouteFlightBucket { historical: Flight[] @@ -39,8 +41,12 @@ interface RoutesGeoJSON { future: GeoJSON.FeatureCollection
+
+
+
+
diff --git a/resources/js/Components/FlightsGoneBy/ProfileLayout.vue b/resources/js/Components/FlightsGoneBy/ProfileLayout.vue
new file mode 100644
index 0000000..f3e4e0f
--- /dev/null
+++ b/resources/js/Components/FlightsGoneBy/ProfileLayout.vue
@@ -0,0 +1,25 @@
+
+
+
+
+ FLIGHT HISTORY
+
+ {{ user.name }}
+
+ {{ flights.length }}
+ FLIGHTS
+
+
+
+
+
+
diff --git a/resources/js/Components/FlightsGoneBy/ProfileViewSwitcher.vue b/resources/js/Components/FlightsGoneBy/ProfileViewSwitcher.vue
new file mode 100644
index 0000000..516422a
--- /dev/null
+++ b/resources/js/Components/FlightsGoneBy/ProfileViewSwitcher.vue
@@ -0,0 +1,89 @@
+
+
+
+
+
+
+
diff --git a/resources/js/Components/FlightsGoneBy/UnstyledFlightChart.vue b/resources/js/Components/FlightsGoneBy/UnstyledFlightChart.vue
new file mode 100644
index 0000000..c93b2c6
--- /dev/null
+++ b/resources/js/Components/FlightsGoneBy/UnstyledFlightChart.vue
@@ -0,0 +1,31 @@
+
+
+
+
-
-
-
-
diff --git a/resources/js/Pages/ProfileBoardingPasses.vue b/resources/js/Pages/ProfileBoardingPasses.vue
new file mode 100644
index 0000000..0ac7db2
--- /dev/null
+++ b/resources/js/Pages/ProfileBoardingPasses.vue
@@ -0,0 +1,30 @@
+
+
+
+
+
-
-
-
-
-
-
- FLIGHT HISTORY
-
- {{ user.name }}
-
- {{ flights.length }}
- FLIGHTS
-
-