Urgent add carto API key

Reviewed-on: #20

app/Http/Controllers/SearchController.php

@@ -58,12 +58,17 @@ class SearchController extends Controller
     {
         $q = request('q', '');
         $len = strlen($q);
-        $includeInactive = request()->boolean('include_inactive');
+        $showClosed = request()->boolean('show_closed');
+        $showNoCode = request()->boolean('show_no_code');
 
         if ($len < 3) return [];
 
         return Airport::with('region.country')
-            ->when(!$includeInactive, fn($query) => $query->where('active', true))
+            ->when(!$showClosed, fn($query) => $query->where('active', true))
+            ->when(!$showNoCode, fn($query) => $query->where(function ($sub) {
+                $sub->whereNotNull('iata_code')
+                    ->orWhereNotNull('icao_code');
+            }))
             ->when($len === 3, fn($query) => $query->where('iata_code', 'ilike', $q))
             ->when($len >= 4, fn($query) => $query->where(function ($sub) use ($q, $len) {
                 $sub->when($len === 4, fn($s) => $s->where('icao_code', 'ilike', $q))
@@ -71,18 +76,25 @@ class SearchController extends Controller
                     ->orWhere('municipality', 'ilike', "%{$q}%");
             }))
             ->orderByRaw("
-        CASE
+                    CASE
-            WHEN active THEN 0
+                        WHEN active THEN 0
-            ELSE 1
+                        ELSE 1
-        END
+                    END
-    ")
+                ")
-            ->orderByRaw("
+                            ->orderByRaw("
-        CASE
+                    CASE
-            WHEN icao_code = ? THEN 0
+                        WHEN iata_code IS NOT NULL AND icao_code IS NOT NULL THEN 0
-            WHEN iata_code = ? THEN 1
+                        WHEN iata_code IS NOT NULL OR icao_code IS NOT NULL THEN 1
-            ELSE 2
+                        ELSE 2
-        END
+                    END
-    ", [$q, $q])
+                ")
+                            ->orderByRaw("
+                    CASE
+                        WHEN icao_code = ? THEN 0
+                        WHEN iata_code = ? THEN 1
+                        ELSE 2
+                    END
+                ", [$q, $q])
             ->limit(15)
             ->get(['id', 'name', 'municipality', 'iata_code', 'icao_code', 'region_id', 'active'])
             ->map(fn(Airport $airport) => [

app/Http/Middleware/HandleInertiaRequests.php

@@ -58,6 +58,7 @@ class HandleInertiaRequests extends Middleware
                 ->whereNull('expires_at')
                 ->orWhere('expires_at', '>', now())
                 ->count(),
+            'carto_api_key' => config('services.carto.key'),
         ];
     }
 }

config/services.php

@@ -18,6 +18,10 @@ return [
         'key' => env('POSTMARK_API_KEY'),
     ],
 
+    'carto' => [
+      'key' => env('CARTO_API_KEY'),
+    ],
+
     'resend' => [
         'key' => env('RESEND_API_KEY'),
     ],

resources/js/Components/FlightsGoneBy/AirportSearchBox.vue

@@ -12,10 +12,14 @@ const model = defineModel<{ value: number, title: string, country_code: string }
 
 const airportOptions = ref(props.prefilledOptions ?? [])
 const autocompleteRef = ref<any>(null)
-const includeInactive = ref(true)
+const showClosed = ref(false)
+const showNoCode = ref(false)
 const lastQuery = ref('')
+const menuOpen = ref(false)
 
 const onFocus = () => {
+    menuOpen.value = true
+
     nextTick(() => {
         const input = autocompleteRef.value?.$el?.querySelector('input')
         input?.select()
@@ -35,14 +39,15 @@ const searchAirports = async (query: string) => {
     const { data } = await axios.get('/search/airports', {
         params: {
             q: query,
-            include_inactive: includeInactive.value ? 1 : undefined,
+            show_closed: showClosed.value ? 1 : undefined,
+            show_no_code: showNoCode.value ? 1 : undefined,
         },
     })
     airportOptions.value = data
 }
 
-// Re-run the last search when the checkbox is toggled, so results update immediately
+// Re-run the last search when either checkbox is toggled, so results update immediately
-watch(includeInactive, () => {
+watch([showClosed, showNoCode], () => {
     if (lastQuery.value) searchAirports(lastQuery.value)
 })
 </script>
@@ -51,6 +56,7 @@ watch(includeInactive, () => {
     <v-autocomplete
         ref="autocompleteRef"
         v-model="model"
+        v-model:menu="menuOpen"
         :label="label ?? 'Airport'"
         :items="airportOptions"
         :error-messages="errorMessages"
@@ -62,6 +68,7 @@ watch(includeInactive, () => {
         clearable
         hide-no-data
         return-object
+        autocomplete="off"
         :custom-filter="() => true"
     >
         <template #prepend-inner>
@@ -69,6 +76,27 @@ watch(includeInactive, () => {
             <span v-if="model" :class="`fi fi-${model.country_code}`"></span>
             </span>
         </template>
+
+        <template #prepend-item>
+            <div class="px-4 py-1 d-flex align-center" style="gap: 16px;" @mousedown.prevent>
+                <v-checkbox
+                    v-model="showClosed"
+                    label="Show Closed Airports"
+                    density="compact"
+                    hide-details
+                    style="flex: none; transform: scale(0.65); transform-origin: left center;"
+                />
+                <v-checkbox
+                    v-model="showNoCode"
+                    label="Show Airports with No Code"
+                    density="compact"
+                    hide-details
+                    style="flex: none; transform: scale(0.65); transform-origin: left center;"
+                />
+            </div>
+            <v-divider class="mt-1" />
+        </template>
+
         <template #item="{ item, props: itemProps }">
             <v-list-item v-bind="itemProps">
                 <template #prepend>

resources/js/Components/FlightsGoneBy/FlightMap.vue

@@ -50,6 +50,7 @@ import {useUpdateSetting} from "@/Composables/useUpdateSetting";
 import {usePage} from "@inertiajs/vue3";
 
 
+
 type LngLat = [number, number]
 
 interface RouteFlightBucket {
@@ -290,6 +291,7 @@ export default defineComponent({
         const { updateSetting } = useUpdateSetting()
         const page = usePage<SharedProps>().props
 
+        const carto_key = page.carto_api_key
 
         let map:        maplibregl.Map    | null = null
         let popup:      maplibregl.Popup  | null = null
@@ -370,13 +372,37 @@ export default defineComponent({
             link.click()
         }
 
+        function loopPoints(origin: LngLat, radiusDeg = 0.2, steps = 48): LngLat[] {
+            const [lng, lat] = origin
+
+            // Widen the longitude radius to compensate for mercator distortion at this latitude
+            const lngRadius = radiusDeg / Math.max(Math.cos(lat * Math.PI / 180), 0.15)
+
+            // Center the loop above the origin so the airport point sits at the bottom of the loop
+            const centerLat = lat + radiusDeg
+
+            const points: LngLat[] = []
+            for (let i = 0; i <= steps; i++) {
+                const theta = (i / steps) * Math.PI * 2
+                points.push([
+                    lng + Math.sin(theta) * lngRadius,
+                    centerLat - radiusDeg * Math.cos(theta),
+                ])
+            }
+            return points // first and last point === origin, at the bottom of the loop
+        }
+
         const getArc = (flight: Flight): LngLat[] => {
             const key = routeKey(flight.departure_airport, flight.arrival_airport)
             if (!arcCache.has(key)) {
-                arcCache.set(key, greatCirclePoints(
+                const isSameAirport = flight.departure_airport.id === flight.arrival_airport.id
-                    [flight.departure_airport.longitude_deg, flight.departure_airport.latitude_deg],
+
-                    [flight.arrival_airport.longitude_deg,   flight.arrival_airport.latitude_deg],
+                arcCache.set(key, isSameAirport
-                ))
+                    ? loopPoints([flight.departure_airport.longitude_deg, flight.departure_airport.latitude_deg])
+                    : greatCirclePoints(
+                        [flight.departure_airport.longitude_deg, flight.departure_airport.latitude_deg],
+                        [flight.arrival_airport.longitude_deg,   flight.arrival_airport.latitude_deg],
+                    ))
             }
             return arcCache.get(key)!
         }
@@ -666,8 +692,10 @@ export default defineComponent({
                 ? { top: 20, bottom: 20, left: 55, right: 55 }
                 : { top: 60, bottom: 60, left: 60, right: 60 }
 
-            const lngs = props.flights.flatMap(f => [f.departure_airport.longitude_deg, f.arrival_airport.longitude_deg])
+            // Use full arc/loop geometry, not just endpoints, so loops aren't clipped
-            const lats = props.flights.flatMap(f => [f.departure_airport.latitude_deg,  f.arrival_airport.latitude_deg])
+            const allPoints = props.flights.flatMap(getArc)
+            const lngs = allPoints.map(p => p[0])
+            const lats = allPoints.map(p => p[1])
 
             const minLat = Math.min(...lats)
             const maxLat = Math.max(...lats)
@@ -689,7 +717,6 @@ export default defineComponent({
             }
             map!.fitBounds([[minLng, minLat], [maxLng, maxLat]], { padding, duration: 0 })
         }
-
         // ── Map init ──────────────────────────────────────────────────────────
 
         const initMap = (): void => {
@@ -711,10 +738,10 @@ export default defineComponent({
                                 maxzoom:  19,
                                 attribution: cartoAttribution.value,
                                 tiles: [
-                                    'https://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png',
+                                    `https://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png?key=${carto_key}`,
-                                    'https://b.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png',
+                                    `https://b.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png?key=${carto_key}`,
-                                    'https://c.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png',
+                                    `https://c.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png?key=${carto_key}`,
-                                    'https://d.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png',
+                                    `https://d.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png?key=${carto_key}`,
                                 ],
                             },
                         },

resources/js/Types/types.d.ts

@@ -110,6 +110,7 @@ export type SharedProps = import('@inertiajs/core').PageProps & {
     logo_api_url: string
     achievement_notifications: Notification[]
     unread_notification_count: number
+    carto_api_key: string
 }
 export interface AchievementDifficulty {
     id: number