Compare commits

...
24 Commits
Author SHA1 Message Date
dredgy 36b90a981f Rename number of flight achievements 2026-09-01 12:16:20 +10:00
dredgy 1e60ba5bbf Fixed distance achievements 2026-08-27 22:00:19 +10:00
dredgy 947f4839ce Urgent add carto API key 2026-08-27 21:49:46 +10:00
dredgy f31f1bc2fc Add airport search filter 2026-08-22 15:00:55 +10:00
dredgy 91a6873b64 Merge pull request 'Add historic airports to database' (#20) from add-historic-airports into main
Reviewed-on: #20
2026-08-22 14:14:05 +10:00
dredgy 4a9b1ad56a Add historic airports to database 2026-08-22 14:13:37 +10:00
dredgy ad61508b3c Merge pull request 'Add a flight arc on the map for flights with same departing and arrival airport' (#19) from add-same-point-flights into main
Reviewed-on: #19
2026-08-22 13:16:10 +10:00
dredgy 95ed0e339f Add a flight arc on the map for flights with same departing and arrival airport 2026-08-22 13:15:39 +10:00
dredgy 4102dd29ef Merge pull request 'Add a flight arc on the map for flights with same departing and arrival airport' (#18) from add-same-point-flights into main
Reviewed-on: #18
2026-08-22 13:11:34 +10:00
dredgy 28fd782a40 Add a flight arc on the map for flights with same departing and arrival airport 2026-08-22 13:11:03 +10:00
dredgy 3c66a3945c Merge pull request 'Fix achievement category ordering' (#17) from fix-achievement-category-ordering into main
Reviewed-on: #17
2026-08-21 23:23:24 +10:00
dredgy a68e31dad7 Merge remote-tracking branch 'origin/main' into fix-achievement-category-ordering 2026-08-21 23:22:56 +10:00
dredgy 023ce6f964 Sort achievement categories 2026-08-21 23:22:42 +10:00
dredgy c66c734868 Merge pull request 'Ui fixes' (#16) from ui-fixes into main
Reviewed-on: #16
2026-08-21 22:54:13 +10:00
dredgy 94a7bc2807 Added missing data tooltips 2026-08-21 22:53:29 +10:00
dredgy 4a296705a6 Added admin controls for missing airlines 2026-08-21 22:41:29 +10:00
dredgy a6bf1c09fe Added "Save Flight And Add Another Button" 2026-08-21 22:17:53 +10:00
dredgy ef73dc0bc3 Added note on flight details page 2026-08-21 22:03:10 +10:00
dredgy b395de6719 Fixed column width on mobile and added a note column 2026-08-21 21:59:04 +10:00
dredgy 3b4ded2fab Fixed notification menu on mobile 2026-08-21 21:45:52 +10:00
dredgy 5492cc72d7 Updated arrival date input on flight form 2026-08-21 21:40:02 +10:00
dredgy 76118d0bfd Set default view to Profile 2026-08-21 20:52:06 +10:00
dredgy c0b8d10add Make progressive achievements get notifications when complete 2026-08-21 17:02:12 +10:00
dredgy 3ae1e75275 Merge branch 'make-flighttooltip-better-on-mobile' into main 2026-08-20 16:47:07 +10:00
32 changed files with 980 additions and 186 deletions
@@ -17,7 +17,10 @@ class PopulateAirportTimezones extends Command
*/
public function handle()
{
Airport::whereNull('timezone')->chunkById(100, function ($airports) {
Airport::where(function ($query) {
$query->whereNull('timezone')
->orWhere('timezone', 'Undefined');
})->chunkById(100, function ($airports) {
foreach ($airports as $airport) {
$zoneName = null;
$attempts = 0;
+14
View File
@@ -7,6 +7,7 @@ use App\Models\IgnoredMissingLivery;
use App\Models\User;
use App\Models\UserFlight;
use App\Services\AdminService;
use Illuminate\Http\JsonResponse;
use Illuminate\Http\Request;
use Illuminate\Support\Carbon;
use Inertia\Inertia;
@@ -66,4 +67,17 @@ class AdminController extends Controller
return back();
}
public function ignoreMissingAirline(Request $request): JsonResponse
{
$validated = $request->validate([
'flight_id' => ['required', 'integer', 'exists:user_flights,id'],
]);
$flight = UserFlight::findOrFail($validated['flight_id']);
$flight->ignoreMissingAirline()->firstOrCreate([]);
return response()->json(['status' => 'ok']);
}
}
+5 -1
View File
@@ -252,8 +252,12 @@ class FlightController extends Controller
],
]);
if ($request->boolean('add_more')) {
return redirect()->route('flights.add')
->with('success', 'Flight saved. Add another below.');
}
return redirect()->route('profile.departure-board', [Auth::user()->name, $newFlight->id]);
return redirect()->route('profile.flight', [Auth::user()->name, $newFlight->id]);
}
+26 -4
View File
@@ -58,28 +58,50 @@ class SearchController extends Controller
{
$q = request('q', '');
$len = strlen($q);
$showClosed = request()->boolean('show_closed');
$showNoCode = request()->boolean('show_no_code');
if ($len < 3) return [];
return Airport::with('region.country')
->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))
->orWhere('name', 'ilike', "%{$q}%")
->orWhere('municipality', 'ilike', "%{$q}%");
})->orderByRaw("
}))
->orderByRaw("
CASE
WHEN active THEN 0
ELSE 1
END
")
->orderByRaw("
CASE
WHEN iata_code IS NOT NULL AND icao_code IS NOT NULL THEN 0
WHEN iata_code IS NOT NULL OR icao_code IS NOT NULL THEN 1
ELSE 2
END
")
->orderByRaw("
CASE
WHEN icao_code = ? THEN 0
WHEN iata_code = ? THEN 1
ELSE 2
END
", [$q, $q]))
", [$q, $q])
->limit(15)
->get(['id', 'name', 'municipality', 'iata_code', 'icao_code', 'region_id'])
->map(fn($airport) => [
->get(['id', 'name', 'municipality', 'iata_code', 'icao_code', 'region_id', 'active'])
->map(fn(Airport $airport) => [
'value' => $airport->id,
'title' => $airport->display_name,
'country_code' => strtolower($airport->region->country->code),
'active' => $airport->active,
])
->values();
}
@@ -3,6 +3,7 @@
namespace App\Http\Controllers;
use App\Models\Achievement;
use App\Models\AchievementCategory;
use App\Models\Aircraft;
use App\Models\Airport;
use App\Models\Alliance;
@@ -105,8 +106,14 @@ class UserProfileController extends Controller
$achievements = Achievement::with(['category', 'difficulty'])
->orderBy('id', 'asc')
->get()
->groupBy(fn(Achievement $a) => $a->category->name)
->map(fn($group) => $group->sortBy('sort_order')->values());
->groupBy(fn(Achievement $a) => $a->category->internal_name)
->sortBy(function ($group, $internalName) {
$index = array_search($internalName, AchievementCategory::ORDER);
return $index === false ? PHP_INT_MAX : $index;
})
->mapWithKeys(fn($group) => [
$group->first()->category->name => $group->sortBy('sort_order')->values(),
]);
$userAchievements = $user->achievements()
->with('achievement')
@@ -58,6 +58,7 @@ class HandleInertiaRequests extends Middleware
->whereNull('expires_at')
->orWhere('expires_at', '>', now())
->count(),
'carto_api_key' => config('services.carto.key'),
];
}
}
+10
View File
@@ -16,6 +16,16 @@ use Illuminate\Database\Eloquent\Relations\HasMany;
*/
class AchievementCategory extends Model
{
const array ORDER = [
'number_of_flights',
'distance',
'general_flying',
'countries_and_continents',
'aircraft',
'airlines_and_alliances',
'fun_challenges',
];
protected $fillable = [
'internal_name',
'name',
+9
View File
@@ -20,12 +20,14 @@ class Airport extends Model
'icao_code',
'iata_code',
'local_code',
'active',
];
protected $casts = [
'latitude_deg' => 'float',
'longitude_deg' => 'float',
'elevation_ft' => 'integer',
'active' => 'boolean',
];
protected $appends = [
@@ -37,6 +39,8 @@ class Airport extends Model
'LHR', 'LGW', 'STN', 'LTN', 'LCY', 'SEN',
];
protected function displayName() : Attribute{
return Attribute::make(
get: function () {
@@ -53,6 +57,11 @@ class Airport extends Model
);
}
public function scopeActive($query)
{
return $query->where('active', true);
}
public function region(): BelongsTo
{
return $this->belongsTo(Region::class);
+11
View File
@@ -9,6 +9,7 @@ use Illuminate\Database\Eloquent\Casts\Attribute;
use Carbon\Carbon;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\BelongsTo;
use Illuminate\Database\Eloquent\Relations\HasOne;
use Illuminate\Support\Collection;
use Illuminate\Support\Facades\Storage;
@@ -271,6 +272,16 @@ class UserFlight extends Model
}
public function ignoreMissingAirline(): HasOne
{
return $this->hasOne(UserFlightIgnoreMissingAirline::class);
}
public function isIgnoringMissingAirline(): bool
{
return $this->ignoreMissingAirline()->exists();
}
public function aircraft(): BelongsTo
{
return $this->belongsTo(Aircraft::class);
@@ -0,0 +1,20 @@
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\BelongsTo;
class UserFlightIgnoreMissingAirline extends Model
{
protected $table = 'user_flights_ignore_missing_airlines';
protected $fillable = [
'user_flight_id',
];
public function userFlight(): BelongsTo
{
return $this->belongsTo(UserFlight::class);
}
}
@@ -98,7 +98,8 @@ class AchievementService
->where('achievement_id', $achievement->id)
->first();
$alreadyUnlocked = $existing !== null;
$alreadyUnlocked = $existing !== null
&& (! $achievement->progressive || $existing->progress >= $achievement->threshold);
UserAchievement::updateOrCreate(
['user_id' => $user->id, 'achievement_id' => $achievement->id],
@@ -19,7 +19,7 @@ class GeneralFlyingChecker extends BaseChecker
// --- Boolean achievements ---
$this->awardIf($allLoggedFlightsCount >= 1, 'general_flying.first_flight');
$this->awardIf($allLoggedFlightsCount >= 1, 'number_of_flights.first_flight');
$this->awardIf(
$flights->contains(fn ($f) => $f->isDomestic()),
@@ -69,10 +69,10 @@ class GeneralFlyingChecker extends BaseChecker
'general_flying.domestic_two_countries'
);
$this->awardProgress($count,'general_flying.10_flights');
$this->awardProgress($count,'general_flying.50_flights');
$this->awardProgress($count,'general_flying.100_flights');
$this->awardProgress($count,'general_flying.500_flights');
$this->awardProgress($count,'general_flying.1000_flights');
$this->awardProgress($count,'number_of_flights.10_flights');
$this->awardProgress($count,'number_of_flights.50_flights');
$this->awardProgress($count,'number_of_flights.100_flights');
$this->awardProgress($count,'number_of_flights.500_flights');
$this->awardProgress($count,'number_of_flights.1000_flights');
}
}
+5 -3
View File
@@ -51,26 +51,28 @@ class AdminService
{
$flights = UserFlight::whereNotNull('flight_number')
->whereNull('airline_id')
->with('user:id,name') // adjust to your actual user relation/columns
->whereDoesntHave('ignoreMissingAirline')
->with('user:id,name')
->get(['id', 'flight_number', 'user_id']);
return $flights
->map(function ($flight) {
// Extract the 2-character IATA-style prefix (letters and/or digits)
preg_match('/^([A-Za-z0-9]{2})\d+/', trim($flight->flight_number), $matches);
return [
'id' => $flight->id,
'code' => $matches[1] ?? null,
'flight_number' => $flight->flight_number,
'link' => "/u/{$flight->user->name}/flight/{$flight->id}",
];
})
->filter(fn ($f) => $f['code'] !== null) // drop any that didn't match the pattern
->filter(fn ($f) => $f['code'] !== null)
->groupBy('code')
->map(function ($group, $code) {
return [
'code' => $code,
'flights' => $group->map(fn ($f) => [
'id' => $f['id'],
'flight_number' => $f['flight_number'],
'link' => $f['link'],
])->values()->all(),
+2 -2
View File
@@ -72,7 +72,7 @@ class SettingsRegistry
'type' => 'select',
'label' => 'Default Page',
'category' => 'FlightsGoneBy Settings',
'default' => 'feed_first',
'default' => 'profile',
'options' => [
['value' => 'feed_first', 'label' => 'My Feed if Following People, My Profile if Not'],
['value' => 'profile', 'label' => 'My Profile'],
@@ -155,7 +155,7 @@ class SettingsRegistry
['value' => 'seat_type_id', 'label' => 'Seat Type'],
['value' => 'seat_number', 'label' => 'Seat Number'],
['value' => 'flight_reason_id', 'label' => 'Reason'],
['value' => 'note', 'label' => 'Note'],
['value' => 'aircraft.display_name_short', 'label' => 'Aircraft Full Name'],
['value' => 'class_seat_combined', 'label' => 'Class/Seat Type/Seat Number Combined'],
],
+1 -1
View File
@@ -67,7 +67,7 @@ return Application::configure(basePath: dirname(__DIR__))
'message' => 'You don\'t have permission to access this page.',
],
404 => [
'title' => 'You Flight Has Been Cancelled',
'title' => 'Your Flight Has Been Cancelled',
'message' => 'The page you are looking for doesn\'t exist or has been moved.',
],
419 => [
+4
View File
@@ -18,6 +18,10 @@ return [
'key' => env('POSTMARK_API_KEY'),
],
'carto' => [
'key' => env('CARTO_API_KEY'),
],
'resend' => [
'key' => env('RESEND_API_KEY'),
],
@@ -0,0 +1,26 @@
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
public function up(): void
{
Schema::create('user_flights_ignore_missing_airlines', function (Blueprint $table) {
$table->id();
$table->foreignId('user_flight_id')
->constrained('user_flights')
->cascadeOnDelete();
$table->timestamps();
$table->unique('user_flight_id');
});
}
public function down(): void
{
Schema::dropIfExists('user_flights_ignore_missing_airlines');
}
};
@@ -0,0 +1,57 @@
<?php
use App\Models\Achievement;
use App\Models\AchievementCategory;
use Illuminate\Database\Migrations\Migration;
return new class extends Migration
{
public function up(): void
{
$newCategory = AchievementCategory::create([
'internal_name' => 'number_of_flights',
'name' => 'Number of Flights',
'description' => 'Achievements for reaching flight count milestones.',
]);
$achievementsToUpdate = [
'general_flying.first_flight',
'general_flying.10_flights',
'general_flying.500_flights',
'general_flying.50_flights',
'general_flying.100_flights',
'general_flying.1000_flights',
];
foreach ($achievementsToUpdate as $internalName) {
$achievement = Achievement::where('internal_name', $internalName)->first();
if (!$achievement) {
continue; // or throw, depending how strict you want this
}
$achievement->update([
'achievement_category_id' => $newCategory->id,
'internal_name' => str_replace('general_flying.', 'number_of_flights.', $internalName),
]);
}
}
public function down(): void
{
$oldCategory = AchievementCategory::where('internal_name', 'general_flying')->first();
if ($oldCategory) {
Achievement::where('internal_name', 'like', 'number_of_flights.%')
->get()
->each(function (Achievement $achievement) use ($oldCategory) {
$achievement->update([
'achievement_category_id' => $oldCategory->id,
'internal_name' => str_replace('number_of_flights.', 'general_flying.', $achievement->internal_name),
]);
});
}
AchievementCategory::where('internal_name', 'number_of_flights')->delete();
}
};
@@ -0,0 +1,133 @@
<?php
use App\Models\Airport;
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::table('airports', function (Blueprint $table) {
$table->boolean('active')->default(true);
});
Airport::whereIataCode('TXL')->update(['active' => false]);
$this->importCsv();
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::table('airports', function (Blueprint $table) {
$table->dropColumn('active');
});
}
private function importCsv(): void
{
$path = storage_path('app/private/seed_data/airports.csv');
if (! file_exists($path)) {
throw new \RuntimeException("Airports CSV not found at: {$path}");
}
$handle = fopen($path, 'rb');
if ($handle === false) {
throw new \RuntimeException("Failed to open airports CSV at: {$path}");
}
// Skip header row
fgetcsv($handle);
$regionMap = DB::table('regions')->pluck('id', 'code')->all();
$batch = [];
$batchSize = 500;
$now = now()->toDateTimeString();
while (($row = fgetcsv($handle)) !== false) {
if (count($row) < 19) {
continue;
}
// id, ident, type, name, latitude_deg, longitude_deg, elevation_ft,
// continent, iso_country, iso_region, municipality, scheduled_service,
// icao_code, iata_code, gps_code, local_code, home_link, wikipedia_link, keywords
[
,
,
$type,
$name,
$latitudeDeg,
$longitudeDeg,
$elevationFt,
,
,
$isoRegion,
$municipality,
,
$icaoCode,
$iataCode,
,
$localCode,
] = $row;
$icaoCode = trim(str_replace(["\r", "\n"], '', $icaoCode));
$iataCode = trim(str_replace(["\r", "\n"], '', $iataCode));
// Only importing airports with no IATA/ICAO code — coded airports are already in the DB
if ($icaoCode !== '' || $iataCode !== '') {
continue;
}
$type = trim($type);
$name = trim($name);
$localCode = trim($localCode);
$isoRegion = trim($isoRegion);
if (! isset($regionMap[$isoRegion])) {
continue;
}
$elevationFt = trim($elevationFt);
$batch[] = [
'type' => $type,
'name' => $name,
'latitude_deg' => (float) trim($latitudeDeg),
'longitude_deg' => (float) trim($longitudeDeg),
'elevation_ft' => $elevationFt !== '' ? (int) $elevationFt : null,
'region_id' => $regionMap[$isoRegion],
'municipality' => trim($municipality) !== '' ? trim($municipality) : null,
'icao_code' => null,
'iata_code' => null,
'local_code' => $localCode !== '' ? $localCode : null,
'timezone' => 'Undefined',
'active' => $type !== 'closed',
'created_at' => $now,
'updated_at' => $now,
];
echo "Added: {$name}\n";
if (count($batch) >= $batchSize) {
DB::table('airports')->insert($batch);
$batch = [];
}
}
fclose($handle);
if (! empty($batch)) {
DB::table('airports')->insert($batch);
}
}
};
@@ -1,25 +1,63 @@
<script setup lang="ts">
import { ref, computed } from "vue"
import axios from "axios"
import { MissingAirline } from "@/Types/types"
defineProps<{
const props = defineProps<{
airline: MissingAirline
}>()
// Track ids we've dismissed locally (optimistic UI) and ones currently in-flight
const dismissedIds = ref<Set<number>>(new Set())
const pendingIds = ref<Set<number>>(new Set())
const visibleFlights = computed(() =>
props.airline.flights.filter(flight => !dismissedIds.value.has(flight.id))
)
async function dismissFlight(flightId: number) {
if (pendingIds.value.has(flightId)) return
pendingIds.value.add(flightId)
// Optimistically remove the pill
dismissedIds.value.add(flightId)
try {
await axios.post('/admin/ignore-missing-airline', {
flight_id: flightId,
})
} catch (error) {
// Revert on failure so the flight isn't silently lost from view
dismissedIds.value.delete(flightId)
console.error('Failed to ignore missing airline for flight', flightId, error)
} finally {
pendingIds.value.delete(flightId)
}
}
</script>
<template>
<div class="missing-airline-card">
<div class="card-header">
<span class="airline-code">{{ airline.code }}</span>
<span class="flight-count">{{ airline.flights.length }} flight{{ airline.flights.length === 1 ? '' : 's' }}</span>
<span class="flight-count">{{ visibleFlights.length }} flight{{ visibleFlights.length === 1 ? '' : 's' }}</span>
</div>
<ul class="flight-list">
<li v-for="flight in airline.flights" :key="flight.link" class="flight-item">
<a :href="flight.link" class="flight-link" target="_blank" rel="noopener">
<div class="flight-list">
<v-chip
v-for="flight in visibleFlights"
:key="flight.link"
class="flight-chip"
size="small"
closable
:disabled="pendingIds.has(flight.id)"
@click:close="dismissFlight(flight.id)"
>
<a :href="flight.link" class="flight-link" target="_blank" rel="noopener" @click.stop>
{{ flight.flight_number }}
</a>
</li>
</ul>
</v-chip>
</div>
</div>
</template>
@@ -62,30 +100,23 @@ defineProps<{
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
list-style: none;
padding: 0;
margin: 0;
}
.flight-item {
display: flex;
}
.flight-link {
.flight-chip {
font-family: 'Share Tech Mono', monospace;
font-size: 0.72rem;
letter-spacing: 0.06em;
background: rgba(255, 255, 255, 0.04) !important;
border: 1px solid rgba(255, 255, 255, 0.06);
}
.flight-link {
color: #9fb3c8;
text-decoration: none;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 4px;
padding: 0.25rem 0.5rem;
transition: color 0.15s ease, border-color 0.15s ease;
transition: color 0.15s ease;
}
.flight-link:hover {
color: #ffc107;
border-color: rgba(255, 193, 7, 0.4);
}
</style>
@@ -9,11 +9,7 @@ import ButtonLink from "@/Components/FlightsGoneBy/ButtonLink.vue";
import Distance from "@/Components/Distance.vue";
import FormattedNumber from "@/Components/FormattedNumber.vue";
const distanceAchievements = [
'general_flying.circumference_of_the_earth',
'general_flying.to_the_moon',
'general_flying.gigametre'
];
const distanceAchievementCategoryId = 6
const props = defineProps<{
achievement: Achievement
@@ -92,7 +88,7 @@ const unlocked = computed(() => {
<template v-if="achievement.progressive && progress">
<div class="progress-label">
<span v-if="distanceAchievements.includes(achievement.internal_name)">
<span v-if="achievement.achievement_category_id == distanceAchievementCategoryId">
<Distance :unit="distanceUnit" :showUnits="false" :value="Math.min(progress.current, progress.threshold)" /> /
<Distance :unit="distanceUnit" :value="progress.threshold" />
</span>
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, nextTick } from 'vue'
import { ref, nextTick, watch } from 'vue'
import axios from 'axios'
const props = defineProps<{
@@ -12,8 +12,14 @@ const model = defineModel<{ value: number, title: string, country_code: string }
const airportOptions = ref(props.prefilledOptions ?? [])
const autocompleteRef = ref<any>(null)
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()
@@ -21,6 +27,8 @@ const onFocus = () => {
}
const searchAirports = async (query: string) => {
lastQuery.value = query
if (!query || query.length < 2) {
airportOptions.value = props.prefilledOptions ?? []
return
@@ -28,15 +36,27 @@ const searchAirports = async (query: string) => {
if (query === model.value?.title) return
const { data } = await axios.get('/search/airports', { params: { q: query } })
const { data } = await axios.get('/search/airports', {
params: {
q: query,
show_closed: showClosed.value ? 1 : undefined,
show_no_code: showNoCode.value ? 1 : undefined,
},
})
airportOptions.value = data
}
// Re-run the last search when either checkbox is toggled, so results update immediately
watch([showClosed, showNoCode], () => {
if (lastQuery.value) searchAirports(lastQuery.value)
})
</script>
<template>
<v-autocomplete
ref="autocompleteRef"
v-model="model"
v-model:menu="menuOpen"
:label="label ?? 'Airport'"
:items="airportOptions"
:error-messages="errorMessages"
@@ -48,6 +68,7 @@ const searchAirports = async (query: string) => {
clearable
hide-no-data
return-object
autocomplete="off"
:custom-filter="() => true"
>
<template #prepend-inner>
@@ -55,6 +76,27 @@ const searchAirports = async (query: string) => {
<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>
@@ -62,7 +104,6 @@ const searchAirports = async (query: string) => {
<span :class="`fi fi-${item.country_code}`"></span>
</span>
</template>
</v-list-item>
</template>
</v-autocomplete>
@@ -17,7 +17,7 @@ const props = defineProps<{
const page = usePage<SharedProps>().props
const ITEMS_PER_PAGE = 25
const defaultColumns = ['airline', 'flight_number', 'departure_airport', 'arrival_airport', 'departure_date', 'departure_time', 'arrival_time', 'duration', 'distance', 'aircraft', 'registration', 'class_seat_combined']
const defaultColumns = ['airline', 'flight_number', 'departure_airport', 'arrival_airport', 'departure_date', 'departure_time', 'arrival_time', 'duration', 'distance', 'aircraft', 'registration', 'class_seat_combined', 'note']
const columnsToShow = computed(() => page.auth.user?.resolved_settings?.departure_board_columns ?? defaultColumns)
const showColumn = (column: string) => columnsToShow.value.includes(column)
@@ -44,6 +44,7 @@ const allHeaders = [
{ title: 'SEAT TYPE', key: 'seat_type_id', sortable: true },
{ title: 'SEAT NO.', key: 'seat_number', sortable: true },
{ title: 'REASON', key: 'flight_reason_id', sortable: true },
{ title: 'NOTE', key: 'note', sortable: true },
{ title: '', key: 'actions', sortable: false },
]
@@ -41,7 +41,7 @@ const reasonBadgeVariant = (reason: string) => {
}
const showColumn = (column: string) => props.columnsToShow.includes(column)
console.log(props.columnsToShow)
</script>
<template>
@@ -170,6 +170,10 @@ const showColumn = (column: string) => props.columnsToShow.includes(column)
</span>
</td>
<td v-if="showColumn('note')" class="v-data-table__td note-cell">
<span v-if="flight.note" class="note-text">{{ flight.note }}</span>
</td>
<td class="v-data-table__td actions-cell">
<UserFlightContextMenu :profile-user="user" :can-edit="canEdit" :flight="flight" />
</td>
@@ -184,6 +188,17 @@ const showColumn = (column: string) => props.columnsToShow.includes(column)
padding-right: 0 !important;
}
.note-cell {
min-width: 200px;
max-width: 320px;
}
.note-text {
display: block;
overflow: hidden;
font-size: 0.85rem;
}
.city-name{
color: #556;
text-transform: uppercase;
@@ -211,23 +226,14 @@ const showColumn = (column: string) => props.columnsToShow.includes(column)
align-items: center;
vertical-align: middle;
gap: 0.5rem;
overflow-x: auto;
max-width: 160px;
/* Hide scrollbar but keep functionality */
scrollbar-width: none;
&::-webkit-scrollbar { display: none; }
width: fit-content;
}
.iata {
font-weight: 600;
}
.class-cell {
display: flex;
align-items: center;
vertical-align: middle;
gap: 0.5rem;
}
.actions-cell {
width: 40px;
@@ -277,15 +283,5 @@ const showColumn = (column: string) => props.columnsToShow.includes(column)
padding: 0 !important;
}
.class-badges-cell {
max-width: 140px;
overflow: hidden;
}
.class-cell > *:not(:first-child) {
display: none;
}
}
</style>
@@ -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,10 +372,34 @@ 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
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],
))
@@ -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])
const lats = props.flights.flatMap(f => [f.departure_airport.latitude_deg, f.arrival_airport.latitude_deg])
// Use full arc/loop geometry, not just endpoints, so loops aren't clipped
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://b.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png',
'https://c.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png',
'https://d.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?key=${carto_key}`,
`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?key=${carto_key}`,
],
},
},
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, watch, onMounted } from 'vue'
import { ref, watch, onMounted, onUnmounted } from 'vue'
import axios from "axios";
import { Notification } from "@/Types/types";
import { Link } from "@inertiajs/vue3";
@@ -18,6 +18,7 @@ onMounted(() => {
const open = ref(false)
const notifications = ref<Notification[]>([])
const loading = ref(false)
const wrapperRef = ref<HTMLElement | null>(null)
const markAllRead = async (notifications: Notification[]) => {
const unread = notifications.filter(n => !n.read_at)
@@ -27,6 +28,20 @@ const markAllRead = async (notifications: Notification[]) => {
unread.forEach(n => n.read_at = new Date().toISOString())
}
const handleClickOutside = (event: MouseEvent) => {
if (open.value && wrapperRef.value && !wrapperRef.value.contains(event.target as Node)) {
open.value = false
}
}
onMounted(() => {
document.addEventListener('click', handleClickOutside)
})
onUnmounted(() => {
document.removeEventListener('click', handleClickOutside)
})
watch(open, async (isOpen) => {
if (!isOpen) return
@@ -43,7 +58,7 @@ watch(open, async (isOpen) => {
</script>
<template>
<div class="notif-wrapper">
<div class="notif-wrapper" ref="wrapperRef">
<v-btn icon variant="text" @click="open = !open" aria-label="Notifications">
<v-badge :content="store.unreadCount" :model-value="store.unreadCount > 0" color="primary">
<v-icon>mdi-bell-outline</v-icon>
@@ -106,6 +121,16 @@ watch(open, async (isOpen) => {
overflow: hidden;
}
@media (max-width: 480px) {
.notif-menu {
position: fixed;
top: 4.5rem; /* adjust to sit just below your navbar height */
left: 50%;
transform: translateX(-50%);
width: min(320px, calc(100vw - 1.5rem));
}
}
.notif-header {
display: flex;
align-items: center;
@@ -4,6 +4,7 @@ import FlightMap from "@/Components/FlightsGoneBy/FlightMap.vue";
import Panel from "@/Components/FlightsGoneBy/Panels/Panel.vue";
import DetailRows from "@/Components/FlightsGoneBy/Panels/DetailRows.vue";
import DetailRow from "@/Components/FlightsGoneBy/Panels/DetailRow.vue";
import PanelLabel from "@/Components/FlightsGoneBy/Panels/PanelLabel.vue";
defineProps<{
flight: Flight
@@ -19,6 +20,10 @@ defineProps<{
<DetailRow label="Distance" :value="flight.distance + 'km'" />
<DetailRow label="Duration" :value="flight.duration_display" />
</DetailRows>
<DetailRows>
<PanelLabel v-if="flight.note?.length">Notes</PanelLabel>
{{flight.note}}
</DetailRows>
</Panel>
</template>
@@ -0,0 +1,53 @@
<script setup lang="ts">
import GlassTooltip from '@/Components/FlightsGoneBy/GlassTooltip.vue'
import type { Anchor } from 'vuetify'
withDefaults(defineProps<{
label?: string
location?: Anchor
}>(), {
label: 'Missing something?',
})
defineSlots<{
default(): any
}>()
</script>
<template>
<GlassTooltip :location="location ?? 'top'" :open-delay="150">
<template #activator="{ props: activatorProps }">
<button
v-bind="activatorProps"
type="button"
class="missing-entity-link"
>
{{ label }}
</button>
</template>
<template #default>
<slot />
</template>
</GlassTooltip>
</template>
<style scoped>
.missing-entity-link {
display: inline-block;
margin-top: 4px;
padding: 0;
background: none;
border: none;
font-size: 12px;
color: rgba(255, 255, 255, 0.55);
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
transition: color 0.15s ease;
}
.missing-entity-link:hover {
color: rgba(255, 255, 255, 0.85);
}
</style>
+364 -73
View File
@@ -6,8 +6,9 @@ import AirlineSearchBox from '@/Components/FlightsGoneBy/AirlineSearchBox.vue'
import AircraftSearchBox from '@/Components/FlightsGoneBy/AircraftSearchBox.vue'
import AirportSearchBox from '@/Components/FlightsGoneBy/AirportSearchBox.vue'
import type {SeatType, FlightReason, FlightClass, CrewType, SharedProps} from '@/Types/types'
import { ref, watch, computed } from 'vue'
import { ref, watch, computed, onMounted, nextTick } from 'vue'
import { VTimePicker, VDatePicker } from 'vuetify/components'
import MissingEntityLink from "@/Components/FlightsGoneBy/Tooltips/MissingEntityLink.vue";
defineOptions({ layout: MainLayout })
const page = usePage<SharedProps>().props
@@ -49,25 +50,13 @@ const pad = (n: number) => String(n).padStart(2, '0')
const flightNumber = ref(props.flight?.flight_number ?? '')
const lookupLoading = ref(false)
const lookupError = ref<string | null>(null)
const lookupComplete = ref(true)
interface LookupResult {
airline_options: { value: number; title: string, logo_url: string }[]
from_options: { value: number; title: string; country_code: string }[]
to_options: { value: number; title: string; country_code: string }[]
aircraft_options: { value: number; title: string }[]
scheduled_departure_time: string | null
scheduled_arrival_time: string | null
}
const lookupResult = ref<LookupResult | null>(null)
const lookupKey = ref(0)
async function lookupFlight() {
if (!flightNumber.value.trim()) return
lookupLoading.value = true
lookupError.value = null
lookupResult.value = null
try {
const response = await fetch(`${route('flights.lookup')}?number=${encodeURIComponent(flightNumber.value.trim())}`, {
@@ -78,8 +67,6 @@ async function lookupFlight() {
lookupError.value = data.message ?? 'Lookup failed.'
return
}
lookupResult.value = data
lookupComplete.value = true
if (data.airline_options?.length) {
airlineOptionsData.value = data.airline_options
if (!form.airline) form.airline = data.airline_options[0]
@@ -111,6 +98,12 @@ async function lookupFlight() {
}
suppressArrivalAutoFill = false
// NOTE: if the lookup API is ever extended to return a day
// difference for the arrival (e.g. `data.arrival_day_offset`),
// wire it in here: `arrivalOffset.value = data.arrival_day_offset`
// (clamped/mapped to 'custom' if outside -1..2). Left out for now
// since the API doesn't provide it yet.
lookupKey.value++
} catch (e) {
lookupError.value = String(e)
@@ -122,7 +115,6 @@ async function lookupFlight() {
// ── Display form (drives the template) ───────────────────────────────────────
const form = useForm({
flight_number: props.flight?.flight_number ?? '',
departure_date: props.flight?.departure_date ?? '',
arrival_date: props.flight?.arrival_date ?? '',
from: props.flight?.from_options[0] ?? null as { value: number; title: string; country_code: string } | null,
@@ -163,9 +155,9 @@ const submitForm = useForm({
crew_type_id: null as number | null,
note: '' as string | null,
auto_update: false,
add_more: false,
})
const departureIsFuture = computed(() => {
if (!form.departure_date) return false
return new Date(form.departure_date) > new Date()
@@ -177,7 +169,7 @@ watch(departureIsFuture, (isFuture) => {
}, { immediate: true })
function submit() {
function submit(addMore = false) {
submitForm.flight_number = flightNumber.value
submitForm.departure_date = form.departure_date
submitForm.arrival_date = form.arrival_date
@@ -193,6 +185,7 @@ function submit() {
submitForm.crew_type_id = form.crew_type?.id ?? null
submitForm.note = form.note
submitForm.auto_update = form.auto_update
submitForm.add_more = addMore
if (isEdit) {
submitForm.put(route('flights.update', { flight: props.flight!.id }))
@@ -230,9 +223,15 @@ function combineDateTime(date: Date | null, time: string | null): string {
return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${(hh ?? '00').padStart(2, '0')}:${(mm ?? '00').padStart(2, '0')}`
}
function clearDepartureDate() { departureDatePart.value = null }
// Whole-day difference between two Date objects (time-of-day ignored).
function diffInDays(from: Date | null, to: Date | null): number | null {
if (!from || !to) return null
const a = new Date(from.getFullYear(), from.getMonth(), from.getDate())
const b = new Date(to.getFullYear(), to.getMonth(), to.getDate())
return Math.round((b.getTime() - a.getTime()) / 86_400_000)
}
function clearDepartureTime() { departureTimePart.value = null }
function clearArrivalDate() { arrivalDatePart.value = null }
function clearArrivalTime() { arrivalTimePart.value = null }
// Normalizes whatever shape the API sends a scheduled time in ("14:30",
@@ -278,19 +277,88 @@ watch([arrivalDatePart, arrivalTimePart], () => {
form.arrival_date = combineDateTime(arrivalDatePart.value, arrivalTimePart.value)
})
// Auto-fill arrival (+1hr) the first time a departure TIME is chosen (and a
// departure date is already set) and arrival is still empty. Picking the
// departure date alone no longer triggers this — only setting the time does.
// ── Arrival day offset ───────────────────────────────────────────────────────
// Rather than making the user pick an independent arrival date, arrival date
// is normally *derived* from departure date + a small relative offset
// (-1 / Same day / +1 / +2). "Custom" drops back to a real date picker for
// the rare case that falls outside that range. This avoids needing airport
// time zones to work out the arrival date, which a duration-based input
// would require.
type ArrivalOffset = -1 | 0 | 1 | 2
const arrivalOffsetOptions: { value: ArrivalOffset; label: string }[] = [
{ value: -1, label: '1 Day' },
{ value: 0, label: 'Same Day' },
{ value: 1, label: '+1 Day' },
{ value: 2, label: '+2 Days' },
]
const initialDiff = diffInDays(depInit.date, arrInit.date)
const initialDiffIsQuickOption = initialDiff !== null && ([-1, 0, 1, 2] as number[]).includes(initialDiff)
// 'offset' (the default): arrival date is derived from departure date + the
// selected quick offset. 'custom': the user has dropped into a real date
// picker, e.g. because the actual gap is more than +2 days.
const arrivalDateMode = ref<'offset' | 'custom'>(
initialDiff !== null && !initialDiffIsQuickOption ? 'custom' : 'offset'
)
const arrivalOffset = ref<ArrivalOffset>(
initialDiffIsQuickOption ? (initialDiff as ArrivalOffset) : 0
)
function applyArrivalOffset() {
if (suppressArrivalAutoFill) return
if (arrivalDateMode.value === 'custom') return
if (!departureDatePart.value) {
arrivalDatePart.value = null
return
}
const d = new Date(departureDatePart.value)
d.setDate(d.getDate() + arrivalOffset.value)
arrivalDatePart.value = d
}
// Re-derive arrival date whenever departure date moves, or the offset is
// changed by hand.
watch(departureDatePart, applyArrivalOffset)
watch(arrivalOffset, applyArrivalOffset)
function useCustomArrivalDate() {
arrivalDateMode.value = 'custom'
}
function useQuickArrivalOffset() {
arrivalDateMode.value = 'offset'
applyArrivalOffset()
}
function formatFullDate(d: Date | null): string {
if (!d) return ''
return d.toLocaleDateString(undefined, { weekday: 'short', day: 'numeric', month: 'short', year: 'numeric' })
}
// Auto-fill arrival TIME (+1hr) the first time a departure time is chosen
// (and a departure date is already set) and arrival time is still empty.
// If adding the hour rolls over midnight, bump the offset selector to match
// (e.g. departs 23:30 -> offset flips to "+1") so the resolved arrival date
// stays correct without the user having to notice and fix it themselves.
watch(departureTimePart, (newTime) => {
if (suppressArrivalAutoFill) return
if (!newTime || !departureDatePart.value || arrivalDatePart.value) return
if (arrivalDateMode.value === 'custom') return
if (!newTime || !departureDatePart.value || arrivalTimePart.value) return
const dep = new Date(departureDatePart.value)
const [h, m] = newTime.split(':').map(Number)
dep.setHours(h, m)
const arr = new Date(dep.getTime() + 60 * 60 * 1000)
const rawDiff = diffInDays(departureDatePart.value, arr) ?? 0
const clampedDiff = Math.min(Math.max(rawDiff, -1), 2) as -1 | 0 | 1 | 2
suppressArrivalAutoFill = true
arrivalOffset.value = clampedDiff
arrivalDatePart.value = new Date(arr.getFullYear(), arr.getMonth(), arr.getDate())
arrivalTimePart.value = `${pad(arr.getHours())}:${pad(arr.getMinutes())}`
suppressArrivalAutoFill = false
@@ -313,11 +381,31 @@ const arrivalMaxDate = computed(() => arrivalMax.value ? new Date(arrivalMax.val
// ── Native date inputs ───────────────────────────────────────────────────────
// departureDatePart / arrivalDatePart stay the source of truth as Date
// objects. These computed get/set pairs are what the native <input type=date>
// elements bind to — the browser handles locale display, typing, and
// validation itself, so no custom format-aware parsing is needed here.
// The Vuetify v-date-picker is still available via a separate calendar icon
// for users who prefer to pick from a calendar rather than type.
// objects. The <input type="date"> elements below are deliberately left
// UNCONTROLLED from Vue's perspective — no v-model, no :model-value, no
// reactive :value binding of any kind. That's on purpose: any reactive
// binding through Vuetify's v-text-field — even one that only commits on
// blur/change, not every keystroke — still runs through v-text-field's own
// internal echo of the field, which re-renders the wrapped <input> on every
// keystroke regardless of what we bind from outside. For type="date"
// specifically, that internal re-render resets the browser's own
// per-segment editing state mid-type (day/month/year), which is what was
// scrambling what you typed. Using a genuinely uncontrolled native <input>
// (not wrapped in v-text-field at all) sidesteps that entirely.
//
// We grab a direct DOM ref to each native input and manage its .value
// imperatively instead:
// - once on mount, to show the initial value
// - whenever departureDatePart/arrivalDatePart changes from elsewhere
// (the calendar picker, a flight lookup, auto-fill) — but only if the
// field isn't currently focused, so we never fight with active typing
// - the native `change` event (fires once a full date has been entered
// and committed, or cleared) is what flows the typed value back into
// departureDatePart/arrivalDatePart
// This keeps the real native, locale-aware date input and picker UI intact.
//
// The arrival native date input only exists in the DOM while arrivalOffset
// is 'custom' (see template); its value is (re)synced whenever it mounts.
function toIsoDateString(d: Date | null): string {
if (!d) return ''
@@ -331,16 +419,42 @@ function fromIsoDateString(value: string): Date | null {
return new Date(y, m - 1, d)
}
const departureDateValue = computed({
get: () => toIsoDateString(departureDatePart.value),
set: (value: string) => { departureDatePart.value = fromIsoDateString(value) },
const departureDateEl = ref<HTMLInputElement | null>(null)
const arrivalDateEl = ref<HTMLInputElement | null>(null)
onMounted(() => {
if (departureDateEl.value) departureDateEl.value.value = toIsoDateString(departureDatePart.value)
if (arrivalDateEl.value) arrivalDateEl.value.value = toIsoDateString(arrivalDatePart.value)
})
const arrivalDateValue = computed({
get: () => toIsoDateString(arrivalDatePart.value),
set: (value: string) => { arrivalDatePart.value = fromIsoDateString(value) },
watch(departureDatePart, (d) => {
const el = departureDateEl.value
if (el && document.activeElement !== el) el.value = toIsoDateString(d)
})
watch(arrivalDatePart, (d) => {
const el = arrivalDateEl.value
if (el && document.activeElement !== el) el.value = toIsoDateString(d)
})
// The arrival native input only exists while arrivalDateMode === 'custom',
// so re-sync its value whenever it (re)mounts into the DOM.
watch(arrivalDateMode, async (mode) => {
if (mode !== 'custom') return
await nextTick()
if (arrivalDateEl.value) arrivalDateEl.value.value = toIsoDateString(arrivalDatePart.value)
})
function commitDepartureDateInput(e: Event) {
const value = (e.target as HTMLInputElement).value
departureDatePart.value = value ? fromIsoDateString(value) : null
}
function commitArrivalDateInput(e: Event) {
const value = (e.target as HTMLInputElement).value
arrivalDatePart.value = value ? fromIsoDateString(value) : null
}
// ── Editable, format-aware time text fields ────────────────────────────────
// departureTimePart / arrivalTimePart stay the source of truth as internal
// "HH:mm" (24hr) strings. These input refs are what the text-fields actually
@@ -472,20 +586,21 @@ function commitArrivalTimeInput() {
<!-- Departure date + time -->
<v-row>
<v-col cols="12" sm="6">
<v-text-field
v-model="departureDateValue"
<div class="native-date-field">
<v-icon icon="mdi-calendar" size="20" class="native-date-field__icon" />
<label class="native-date-field__label">Departure Date</label>
<input
ref="departureDateEl"
type="date"
label="Departure Date"
prepend-inner-icon="mdi-calendar"
:disabled="!lookupComplete"
:error-messages="submitForm.errors.departure_date"
class="native-date-field__input"
@change="commitDepartureDateInput"
>
<template #append-inner>
<v-menu v-model="depDateMenu" :close-on-content-click="false">
<template #activator="{ props: menuProps }">
<v-icon
v-bind="menuProps"
icon="mdi-calendar-month"
size="20"
style="cursor: pointer"
/>
</template>
@@ -494,8 +609,10 @@ function commitArrivalTimeInput() {
@update:model-value="depDateMenu = false"
/>
</v-menu>
</template>
</v-text-field>
</div>
<div v-if="submitForm.errors.departure_date" class="native-date-field__error text-error">
{{ submitForm.errors.departure_date }}
</div>
</v-col>
<v-col cols="12" sm="6">
<v-menu v-model="depTimeMenu" :close-on-content-click="false">
@@ -507,7 +624,6 @@ function commitArrivalTimeInput() {
clearable
prepend-inner-icon="mdi-clock-outline"
:placeholder="timeFormat === '24hr' ? 'e.g. 1430' : 'e.g. 2:30 PM'"
:disabled="!lookupComplete"
@click:clear="clearDepartureTime"
@blur="commitDepartureTimeInput"
@keydown.enter="commitDepartureTimeInput"
@@ -528,23 +644,59 @@ function commitArrivalTimeInput() {
</v-col>
</v-row>
<!-- Arrival date + time -->
<!-- Arrival -->
<v-row>
<v-col cols="12" sm="6">
<v-text-field
v-model="arrivalDateValue"
<label class="arrival-offset__label">Arrival Date</label>
<template v-if="arrivalDateMode === 'offset'">
<v-btn-toggle
v-model="arrivalOffset"
mandatory
variant="outlined"
color="primary"
divided
class="arrival-offset__toggle"
>
<v-btn
v-for="opt in arrivalOffsetOptions"
:key="opt.value"
:value="opt.value"
class="arrival-offset__btn"
>
{{ opt.label }}
</v-btn>
</v-btn-toggle>
<div class="arrival-offset__footer">
<span v-if="arrivalDatePart" class="arrival-offset__hint">
Arrives {{ formatFullDate(arrivalDatePart) }}
</span>
<button
type="button"
class="arrival-offset__link"
@click="useCustomArrivalDate"
>
Custom date
</button>
</div>
</template>
<template v-else>
<div class="native-date-field">
<v-icon icon="mdi-calendar" size="20" class="native-date-field__icon" />
<input
ref="arrivalDateEl"
type="date"
label="Arrival Date"
prepend-inner-icon="mdi-calendar"
:disabled="!lookupComplete"
:error-messages="submitForm.errors.arrival_date"
class="native-date-field__input"
@change="commitArrivalDateInput"
>
<template #append-inner>
<v-menu v-model="arrDateMenu" :close-on-content-click="false">
<template #activator="{ props: menuProps }">
<v-icon
v-bind="menuProps"
icon="mdi-calendar-month"
size="20"
style="cursor: pointer"
/>
</template>
@@ -555,8 +707,19 @@ function commitArrivalTimeInput() {
@update:model-value="arrDateMenu = false"
/>
</v-menu>
</div>
<button
type="button"
class="arrival-offset__link mt-1"
@click="useQuickArrivalOffset"
>
Use quick select instead
</button>
</template>
</v-text-field>
<div v-if="submitForm.errors.arrival_date" class="native-date-field__error text-error">
{{ submitForm.errors.arrival_date }}
</div>
</v-col>
<v-col cols="12" sm="6">
<v-menu v-model="arrTimeMenu" :close-on-content-click="false">
@@ -568,7 +731,6 @@ function commitArrivalTimeInput() {
clearable
prepend-inner-icon="mdi-clock-outline"
:placeholder="timeFormat === '24hr' ? 'e.g. 1430' : 'e.g. 2:30 PM'"
:disabled="!lookupComplete"
@click:clear="clearArrivalTime"
@blur="commitArrivalTimeInput"
@keydown.enter="commitArrivalTimeInput"
@@ -597,8 +759,11 @@ function commitArrivalTimeInput() {
label="From"
:prefilled-options="fromOptionsData"
:error-messages="submitForm.errors.from_id"
:disabled="!lookupComplete"
/>
<MissingEntityLink label="Missing airport?">
<p>If you can't find an airport we will be happy to add it, but you'll have to contact support with details of the airport.</p>
<p>Unfortunately you won't be able to proceed with adding this flight until the airport has been added.</p>
</MissingEntityLink>
</v-col>
</v-row>
@@ -610,7 +775,6 @@ function commitArrivalTimeInput() {
label="To"
:prefilled-options="toOptionsData"
:error-messages="submitForm.errors.to_id"
:disabled="!lookupComplete"
/>
</v-col>
</v-row>
@@ -623,8 +787,11 @@ function commitArrivalTimeInput() {
v-model="form.airline"
:prefilled-options="airlineOptionsData"
:error-messages="submitForm.errors.airline_id"
:disabled="!lookupComplete"
/>
<MissingEntityLink label="Missing airline? No problem">
<p>If you can't find the airline you flew with, just leave it blank but make sure to add a valid flight number. We will be notified of flights with missing airlines and add the airline shortly.</p>
<p>If you don't know your flight number or a missing airline hasn't been added within 48 hours, please contact support.</p>
</MissingEntityLink>
</v-col>
</v-row>
@@ -636,7 +803,6 @@ function commitArrivalTimeInput() {
v-model="form.aircraft"
:prefilled-options="aircraftOptionsData"
:error-messages="submitForm.errors.aircraft_id"
:disabled="!lookupComplete"
/>
</v-col>
</v-row>
@@ -648,7 +814,6 @@ function commitArrivalTimeInput() {
v-model="form.aircraft_registration"
label="Aircraft Registration"
placeholder="e.g. VH-OQA"
:disabled="!lookupComplete"
:error-messages="submitForm.errors.aircraft_registration"
/>
</v-col>
@@ -660,7 +825,6 @@ function commitArrivalTimeInput() {
item-title="name"
item-value="id"
:return-object="true"
:disabled="!lookupComplete"
:error-messages="submitForm.errors.flight_class_id"
/>
</v-col>
@@ -673,7 +837,6 @@ function commitArrivalTimeInput() {
v-model="form.seat_number"
label="Seat Number"
placeholder="e.g. 12A"
:disabled="!lookupComplete"
:error-messages="submitForm.errors.seat_number"
/>
</v-col>
@@ -685,7 +848,6 @@ function commitArrivalTimeInput() {
item-title="name"
item-value="id"
:return-object="true"
:disabled="!lookupComplete"
:error-messages="submitForm.errors.seat_type_id"
/>
</v-col>
@@ -701,7 +863,6 @@ function commitArrivalTimeInput() {
item-title="name"
item-value="id"
:return-object="true"
:disabled="!lookupComplete"
:error-messages="submitForm.errors.flight_reason_id"
/>
</v-col>
@@ -713,7 +874,6 @@ function commitArrivalTimeInput() {
item-title="name"
item-value="id"
:return-object="true"
:disabled="!lookupComplete"
:error-messages="submitForm.errors.crew_type_id"
/>
</v-col>
@@ -726,7 +886,6 @@ function commitArrivalTimeInput() {
v-model="form.note"
label="Note"
placeholder="Any additional notes…"
:disabled="!lookupComplete"
:error-messages="submitForm.errors.note"
rows="3"
auto-grow
@@ -740,7 +899,6 @@ function commitArrivalTimeInput() {
<v-checkbox
v-model="form.auto_update"
label="Automatically update flight details within 24 hours of flight departure"
:disabled="!lookupComplete"
hide-details
density="compact"
/>
@@ -749,15 +907,27 @@ function commitArrivalTimeInput() {
<!-- Submit -->
<v-row>
<v-col cols="12">
<v-col v-if="!isEdit" cols="12" md="6">
<v-btn
block
size="large"
:loading="submitForm.processing"
:disabled="!lookupComplete || submitForm.processing"
@click="submit"
variant="outlined"
:loading="submitForm.processing && submitForm.add_more"
:disabled="submitForm.processing"
@click="submit(true)"
>
{{ isEdit ? 'Save Changes' : 'Add Flight' }}
Save Flight and Add Another
</v-btn>
</v-col>
<v-col cols="12" :md="isEdit ? 12 : 6">
<v-btn
block
size="large"
:loading="submitForm.processing && !submitForm.add_more"
:disabled="submitForm.processing"
@click="submit(false)"
>
{{ isEdit ? 'Save Changes' : 'Save Flight' }}
</v-btn>
</v-col>
</v-row>
@@ -768,8 +938,129 @@ function commitArrivalTimeInput() {
</template>
<style scoped>
:deep(input[type="date"]::-webkit-calendar-picker-indicator) {
/* Hand-rolled field chrome for the native <input type="date"> fields.
These deliberately bypass v-text-field (see the "Native date inputs"
comment in the script block for why), so we approximate the surrounding
Vuetify outlined-field look here instead of getting it for free. */
.native-date-field {
position: relative;
display: flex;
align-items: center;
gap: 10px;
min-height: 56px;
padding: 8px 12px;
border: 1px none rgba(255, 255, 255, 0.24);
border-bottom-style: solid;
background: transparent;
transition: border-color 0.15s ease;
}
.native-date-field:focus-within {
border-color: rgb(var(--surface));
border-width: 2px;
padding: 7px 11px;
}
.native-date-field__icon {
opacity: 0.7;
flex-shrink: 0;
}
.native-date-field__label {
position: absolute;
top: -8px;
left: 38px;
padding: 0 4px;
font-size: 12px;
line-height: 1;
color: rgba(255, 255, 255, 0.6);
pointer-events: none;
}
.native-date-field__input {
flex: 1;
min-width: 0;
background: transparent;
border: none;
outline: none;
color: inherit;
font-size: 16px;
color-scheme: dark;
}
.native-date-field__input::-webkit-calendar-picker-indicator {
display: none;
-webkit-appearance: none;
}
/* Firefox doesn't support ::-webkit-calendar-picker-indicator; this trims
its built-in indicator/spinner button area instead. */
.native-date-field__input::-moz-calendar-picker-indicator {
display: none;
}
.native-date-field__error {
margin-top: 4px;
padding-left: 12px;
font-size: 12px;
}
/* Arrival day-offset control */
.arrival-offset__label {
display: block;
font-size: 12px;
line-height: 1;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 6px;
padding-left: 2px;
}
.arrival-offset__toggle {
display: grid;
grid-template-columns: repeat(4, 1fr);
width: 100%;
height: 48px;
border-radius: 4px;
}
.arrival-offset__btn {
min-width: 0;
flex: none;
width: 100%;
height: 100%;
font-size: 11px;
letter-spacing: 0;
text-transform: none;
padding: 0 4px;
}
.arrival-offset__footer {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
margin-top: 6px;
padding: 0 2px;
}
.arrival-offset__hint {
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
}
.arrival-offset__link {
flex-shrink: 0;
font-size: 12px;
color: rgba(255, 255, 255, 0.75);
background: none;
border: none;
padding: 0;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
}
.arrival-offset__link:hover {
color: rgb(255, 255, 255);
}
</style>
+1 -1
View File
@@ -19,7 +19,7 @@ defineProps<{
Reconcile Missing Liveries
<v-chip size="x-small" color="error" class="ml-1">{{ missingLiveryCount }}</v-chip>
</Link>
<Link :href="route('admin.reconcile-missing-airlines')" class="sidebar-link">
<Link v-if="missingAirlineCount" :href="route('admin.reconcile-missing-airlines')" class="sidebar-link">
<v-icon icon="mdi-airplane-takeoff" size="18" />
Reconcile Missing Airlines
<v-chip size="x-small" color="error" class="ml-1">{{ missingAirlineCount }}</v-chip>
+2
View File
@@ -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
@@ -334,6 +335,7 @@ export interface MissingAirline{
flights: {
flight_number: string;
link: string;
id: number;
}[]
}
+2
View File
@@ -42,6 +42,8 @@ use Inertia\Inertia;
Route::post('/ignore-missing-livery', [AdminController::class, 'ignoreMissingLivery'])->name('ignore-missing-livery');
Route::get('/missing-airlines', [AdminController::class, 'reconcileMissingAirlines'])->name('reconcile-missing-airlines')->middleware('permission:reconcile_missing_liveries');
Route::post('/ignore-missing-airline', [AdminController::class, 'ignoreMissingAirline'])->name('admin.ignore-missing-airline');
});