Updated Map View

This commit is contained in:
2026-06-16 11:16:32 +10:00
parent a270913931
commit 3aba428d2a
19 changed files with 790 additions and 654 deletions
@@ -33,7 +33,7 @@ class AuthenticatedSessionController extends Controller
$request->session()->regenerate();
return redirect()->intended(route('dashboard', absolute: false));
return redirect()->intended(route('home', absolute: false));
}
/**
@@ -10,6 +10,25 @@ use Inertia\Inertia;
class FlightProfileController extends Controller
{
public function index(){
if (auth()->check()) {
$user = auth()->user();
$defaultPage = $user->resolved_settings['default_login_page'];
$route = match ($defaultPage) {
'feed_first' => $user->following()->count() > 0 ? 'feed' : 'profile.view',
'feed' => 'feed',
'profile' => 'profile.view',
'dashboard' => 'dashboard',
};
$args = $route == 'profile.view' ? $user->name : null;
return redirect()->route($route, $args);
}
return redirect()->route('login');
}
public static function getUserFlightApiURL(User $user){
return '/data/user/'.$user->name.'/flights';
}
@@ -43,7 +62,25 @@ class FlightProfileController extends Controller
public function view(User $user)
{
return $this->departureBoard($user);
$loggedInUser = auth()->user();
$isPrivate = $user->resolved_settings['private_profile'];
if ($isPrivate && $user->id !== $loggedInUser?->id) {
if (!$loggedInUser || !$loggedInUser->isFollowing($user)) {
abort(404);
}
}
$defaultView = $loggedInUser ? $loggedInUser->resolved_settings['default_profile_view'] : 'map';
return match($defaultView) {
'boarding-passes' => $this->boardingPasses($user),
'map' => $this->map($user),
'departure-board' => $this->departureBoard($user),
'achievements' => redirect()->route('profile.achievements', $user->name),
};
}
public function flight(User $user, UserFlight $userFlight)
+5 -5
View File
@@ -44,14 +44,14 @@ class SettingsRegistry
[
'key' => 'default_login_page',
'type' => 'select',
'label' => 'Default Page After Login',
'label' => 'Default Page',
'category' => 'FlightsGoneBy Settings',
'default' => 'feed_first',
'options' => [
['value' => 'feed_first', 'label' => 'Feed if Following People, Profile if Not'],
['value' => 'profile', 'label' => 'Your Profile'],
['value' => 'feed', 'label' => 'Your Feed'],
['value' => 'dashboard', 'label' => 'Your Dashboard'],
['value' => 'feed_first', 'label' => 'My Feed if Following People, My Profile if Not'],
['value' => 'profile', 'label' => 'My Profile'],
['value' => 'feed', 'label' => 'My Feed'],
['value' => 'dashboard', 'label' => 'My Dashboard'],
],
],
[
+1
View File
@@ -19,6 +19,7 @@
"@inertiajs/vue3": "^2.0.0",
"@tailwindcss/forms": "^0.5.3",
"@tailwindcss/vite": "^4.0.0",
"@types/geojson": "^7946.0.16",
"@types/leaflet": "^1.9.21",
"@types/node": "^25.5.0",
"@vitejs/plugin-vue": "^6.0.0",
+1
View File
@@ -11,6 +11,7 @@
"@inertiajs/vue3": "^2.0.0",
"@tailwindcss/forms": "^0.5.3",
"@tailwindcss/vite": "^4.0.0",
"@types/geojson": "^7946.0.16",
"@types/leaflet": "^1.9.21",
"@types/node": "^25.5.0",
"@vitejs/plugin-vue": "^6.0.0",
@@ -4,6 +4,11 @@ import GlassTooltip from "@/Components/FlightsGoneBy/GlassTooltip.vue";
import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";
import WakeTurbulence from "@/Components/FlightsGoneBy/WakeTurbulence.vue";
import LiveryImage from "@/Components/FlightsGoneBy/LiveryImage.vue";
import ToolTipDivider from "@/Components/FlightsGoneBy/Tooltips/ToolTipDivider.vue";
import ToolTipRows from "@/Components/FlightsGoneBy/Tooltips/ToolTipRows.vue";
import ToolTipRow from "@/Components/FlightsGoneBy/Tooltips/ToolTipRow.vue";
import ToolTipName from "@/Components/FlightsGoneBy/Tooltips/ToolTipName.vue";
import ToolTipHeader from "@/Components/FlightsGoneBy/Tooltips/ToolTipHeader.vue";
defineProps<{
aircraft: Aircraft
@@ -26,99 +31,36 @@ function formatEngineType(type: string): string {
</div>
</template>
<div class="tooltip-header">
<span class="designator">{{ aircraft.manufacturer_code }} {{ aircraft.model_full_name }}</span>
<ToolTipHeader>
{{ aircraft.manufacturer_code }} {{ aircraft.model_full_name }}
</ToolTipHeader>
</div>
<div class="tooltip-name">
<ToolTipName>
<InlineBadge variant="generic">
{{aircraft.designator }}
</InlineBadge>
<InlineBadge variant="generic">
<WakeTurbulence :value="aircraft.wtc" />
</InlineBadge>
</div>
</ToolTipName>
<div class="tooltip-divider" />
<ToolTipDivider/>
<div class="tooltip-rows">
<div class="tooltip-row">
<span class="tooltip-label">Engines</span>
<span class="tooltip-value">{{ aircraft.engine_count }}x {{ formatEngineType(aircraft.engine_type) }}</span>
</div>
</div>
<ToolTipRows>
<ToolTipRow label="Engines" :value="aircraft.engine_count + 'x ' + formatEngineType(aircraft.engine_type)" />
</ToolTipRows>
<div class="tooltip-divider" v-if="flight?.livery_url" />
<div class="tooltip-rows" v-if="flight?.livery_url">
<ToolTipDivider v-if="flight?.livery_url" />
<ToolTipRows v-if="flight?.livery_url">
<LiveryImage :flight="flight" />
</div>
<div class="tooltip-divider" v-if="flight?.aircraft_registration" />
<div class="tooltip-rows" v-if="flight?.aircraft_registration">
<div class="tooltip-row">
<span class="tooltip-label">Registration</span>
<span class="tooltip-value">{{ flight.aircraft_registration}}</span>
</div>
</div>
</ToolTipRows>
<ToolTipDivider v-if="flight?.aircraft_registration" />
<ToolTipRows v-if="flight?.aircraft_registration">
<ToolTipRow label="Registration" :value="flight.aircraft_registration" />
</ToolTipRows>
</GlassTooltip>
</template>
<style scoped>
.tooltip-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.designator {
color: #e8eaf0;
letter-spacing: 0.06em;
line-height: 1;
}
.badges {
display: flex;
gap: 0.3rem;
}
.tooltip-name {
display:flex;
gap: 4px;
margin-top: 0.2rem;
line-height: 1.3;
}
.tooltip-divider {
height: 1px;
background: var(--table-border, rgba(255,255,255,0.08));
}
.tooltip-rows {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.tooltip-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
}
.tooltip-label {
font-family: 'Share Tech Mono', monospace;
font-size: 0.6rem;
letter-spacing: 0.15em;
color: var(--muted, #445566);
flex-shrink: 0;
}
.tooltip-value {
font-size: 0.78rem;
color: var(--text, #c8cdd8);
text-align: right;
}
</style>
@@ -5,6 +5,11 @@ import {usePage} from "@inertiajs/vue3";
import GlassTooltip from "@/Components/FlightsGoneBy/GlassTooltip.vue";
import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";
import AllianceLogo from "@/Components/FlightsGoneBy/AllianceLogo.vue";
import ToolTipHeader from "@/Components/FlightsGoneBy/Tooltips/ToolTipHeader.vue";
import ToolTipDivider from "@/Components/FlightsGoneBy/Tooltips/ToolTipDivider.vue";
import ToolTipName from "@/Components/FlightsGoneBy/Tooltips/ToolTipName.vue";
import ToolTipRows from "@/Components/FlightsGoneBy/Tooltips/ToolTipRows.vue";
import ToolTipRow from "@/Components/FlightsGoneBy/Tooltips/ToolTipRow.vue";
const page = usePage<SharedProps>().props;
@@ -33,26 +38,21 @@ const size = computed(() => props.size ? props.size + 'px' : '30px');
</template>
<div class="airline-tooltip-content">
<div class="tooltip-header">
<ToolTipHeader>
<div class="logo-title">
<span class="airline-logo-tooltip" :style="logoStyle"></span>
<span class="airline-name">{{ airline.name }}</span>
</div>
<div v-if="airline.iata_code || airline.icao_code" class="codes">
</ToolTipHeader>
<ToolTipName v-if="airline.iata_code || airline.icao_code">
<InlineBadge v-if="airline.iata_code" variant="generic">{{ airline.iata_code }}</InlineBadge>
<InlineBadge v-if="airline.icao_code" variant="generic">{{ airline.icao_code }}</InlineBadge>
<AllianceLogo v-if="airline?.alliance" :alliance="airline?.alliance" size="24" />
</div>
</div>
<div class="tooltip-divider"></div>
<div class="tooltip-meta">
<span
v-if="airline.country"
:class="`fi fi-${airline.country.code.toLowerCase()}`"
class="country-flag"
></span>
<span v-if="airline.country" class="country-name">{{ airline.country.name }}</span>
</div>
</ToolTipName>
<ToolTipDivider />
<ToolTipRows v-if="airline.country">
<ToolTipRow label="Country" :value="airline.country.name" :countryCode="airline.country.code" />
</ToolTipRows>
</div>
</GlassTooltip>
<span v-else class="airline-logo"></span>
@@ -77,45 +77,4 @@ span.airline-logo {
align-items: center;
gap: 10px;
}
.codes{
width:100%;
display: flex;
gap: 4px;
padding-top:1em;
justify-content:flex-start;
}
.airline-name {
letter-spacing: 0.03em;
}
.tooltip-divider {
height: 1px;
background: var(--table-border);
}
.tooltip-meta {
display: flex;
align-items: center;
gap: 8px;
color: var(--muted);
}
.country-flag {
font-size: 1rem;
}
.country-name {
flex: 1;
font-size: 0.8rem;
}
.codes {
display: flex;
gap: 4px;
margin-left: auto;
}
</style>
@@ -2,6 +2,12 @@
import { Airport } from "@/Types/types";
import GlassTooltip from "@/Components/FlightsGoneBy/GlassTooltip.vue";
import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";
import ToolTipDivider from "@/Components/FlightsGoneBy/Tooltips/ToolTipDivider.vue";
import ToolTipRows from "@/Components/FlightsGoneBy/Tooltips/ToolTipRows.vue";
import ToolTipHeader from "@/Components/FlightsGoneBy/Tooltips/ToolTipHeader.vue";
import ToolTipRow from "@/Components/FlightsGoneBy/Tooltips/ToolTipRow.vue";
import CountryRow from "@/Components/FlightsGoneBy/Tooltips/CountryRow.vue";
import ToolTipName from "@/Components/FlightsGoneBy/Tooltips/ToolTipName.vue";
defineProps<{
airport: Airport
@@ -12,9 +18,6 @@ function formatElevation(ft: number | null): string | null {
return `${ft.toLocaleString()} ft`
}
function formatType(type: string): string {
return type.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase())
}
</script>
<template>
@@ -26,46 +29,21 @@ function formatType(type: string): string {
</template>
<div class="airport-tooltip">
<!-- Header -->
<div class="tooltip-header">
<div class="tooltip-codes">
<div><span class="iata">{{ airport.name }}</span></div>
<div class="code-badges">
<ToolTipHeader>{{ airport.name }}</ToolTipHeader>
<ToolTipName>
<InlineBadge v-if="airport.iata_code" variant="generic">{{ airport.iata_code }}</InlineBadge>
<InlineBadge v-if="airport.icao_code" variant="generic">{{ airport.icao_code }}</InlineBadge>
</div>
</div>
</div>
<div class="tooltip-divider" />
</ToolTipName>
<!-- Details -->
<div class="tooltip-rows">
<div v-if="airport.municipality" class="tooltip-row">
<span class="tooltip-label">City</span>
<span class="tooltip-value">{{ airport.municipality }}</span>
</div>
<div v-if="airport.municipality" class="tooltip-row">
<span class="tooltip-label">Country</span>
<span class="tooltip-value" v-if="airport.region?.country">
<span>{{airport.region.country.name}}&nbsp;</span>
<span class="fi" :class="`fi-${airport.region.country.code.toLowerCase()}`"></span>
</span>
</div>
<div v-if="airport.elevation_ft !== null" class="tooltip-row">
<span class="tooltip-label">Elevation</span>
<span class="tooltip-value">{{ formatElevation(airport.elevation_ft) }}</span>
</div>
<div class="tooltip-row">
<span class="tooltip-label">Timezone</span>
<span class="tooltip-value tz">{{ airport.timezone }}</span>
</div>
<div class="tooltip-row">
<span class="tooltip-label">Coordinates</span>
<span class="tooltip-value coords">
{{ airport.latitude_deg.toFixed(4) }}, {{ airport.longitude_deg.toFixed(4) }}
</span>
</div>
</div>
<ToolTipDivider />
<ToolTipRows>
<ToolTipRow v-if="airport.municipality" label="City" :value="airport.municipality" />
<CountryRow :country="airport.region?.country" />
<ToolTipRow v-if="airport.elevation_ft !== null" label="Elevation" :value="formatElevation(airport.elevation_ft)" />
<ToolTipRow label="Timezone" :value="airport.timezone" />
<ToolTipRow label="Coordinates" :value="airport.latitude_deg.toFixed(4) + ', ' + airport.longitude_deg.toFixed(4)" />
</ToolTipRows>
</div>
</GlassTooltip>
</template>
@@ -74,78 +52,4 @@ function formatType(type: string): string {
.airport-tooltip {
display: contents;
}
.fi{
padding:0.25em;
}
.tooltip-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
}
.iata{
font-size:1.2em;
}
.tooltip-codes {
display: flex;
flex-direction: column;
align-items: baseline;
gap: 0.5rem;
flex-wrap: wrap;
}
.code-badges {
display: flex;
gap: 0.3rem;
flex-wrap: wrap;
}
.tooltip-divider {
height: 1px;
background: var(--table-border, rgba(255,255,255,0.08));
}
.tooltip-rows {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.tooltip-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
}
.tooltip-label {
font-family: 'Share Tech Mono', monospace;
font-size: 0.6rem;
letter-spacing: 0.15em;
color: var(--muted, #445566);
flex-shrink: 0;
}
.tooltip-value {
font-size: 0.78rem;
color: var(--text, #c8cdd8);
text-align: right;
}
.tz {
font-family: 'Share Tech Mono', monospace;
font-size: 0.7rem;
letter-spacing: 0.03em;
}
.coords {
font-family: 'Share Tech Mono', monospace;
font-size: 0.68rem;
color: var(--muted, #556677);
letter-spacing: 0.03em;
}
</style>
File diff suppressed because it is too large Load Diff
@@ -40,7 +40,9 @@
</template>
<template v-if="upcomingDistanceKm">
<div :class="totalDistanceKm ? 'stat-upcoming' : 'stat-primary'">
<span :class="totalDistanceKm ? 'stat-upcoming-num' : 'stat-num'"><Distance :unit="page.auth?.user?.resolved_settings?.distance_unit" includeSpace :value="upcomingDistanceKm"/></span>
<span :class="totalDistanceKm ? 'stat-upcoming-num' : 'stat-num'"><Distance :unit="page.auth?.user?.resolved_settings?.distance_unit" includeSpace :value="upcomingDistanceKm"/>
<span :class="upcomingDistanceKm ? 'stat-upcoming-lbl' : 'unit'"> upcoming</span>
</span>
</div>
</template>
</div>
@@ -3,6 +3,12 @@ import { Flight } from "@/Types/types";
import GlassTooltip from "@/Components/FlightsGoneBy/GlassTooltip.vue";
import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";
import AirlineLogo from "@/Components/FlightsGoneBy/AirlineLogo.vue";
import LiveryImage from "@/Components/FlightsGoneBy/LiveryImage.vue";
import ToolTipDivider from "@/Components/FlightsGoneBy/Tooltips/ToolTipDivider.vue";
import ToolTipRow from "@/Components/FlightsGoneBy/Tooltips/ToolTipRow.vue";
import ToolTipRows from "@/Components/FlightsGoneBy/Tooltips/ToolTipRows.vue";
import ToolTipName from "@/Components/FlightsGoneBy/Tooltips/ToolTipName.vue";
import ToolTipHeader from "@/Components/FlightsGoneBy/Tooltips/ToolTipHeader.vue";
defineProps<{
flight: Flight
@@ -17,101 +23,45 @@ defineProps<{
</div>
</template>
<div class="tooltip-header">
<ToolTipHeader>
<span class="designator">
<AirlineLogo hideTooltip :airline="flight.airline" size="24" />
{{ flight.flight_number || `${flight.departure_airport.display_code}-${flight.arrival_airport.display_code}` }}
</span>
</div>
</ToolTipHeader>
<div class="tooltip-name">
<ToolTipName>
<InlineBadge variant="generic">{{ flight.departure_airport.display_code }}</InlineBadge>
<span class="arrow"></span>
<InlineBadge variant="generic">{{ flight.arrival_airport.display_code }}</InlineBadge>
</div>
</ToolTipName>
<div class="tooltip-divider" />
<ToolTipDivider />
<div class="tooltip-rows">
<div class="tooltip-row">
<span class="tooltip-label">From</span>
<span class="tooltip-value">{{ flight.departure_airport.municipality }}</span>
</div>
<div class="tooltip-row">
<span class="tooltip-label">To</span>
<span class="tooltip-value">{{ flight.arrival_airport.municipality }}</span>
</div>
<div class="tooltip-row" v-if="flight.airline">
<span class="tooltip-label">Airline</span>
<span class="tooltip-value">{{ flight.airline.name }}</span>
</div>
<div class="tooltip-row" v-if="flight.aircraft">
<span class="tooltip-label">Aircraft</span>
<span class="tooltip-value">{{ flight.aircraft?.display_name_short }}</span>
</div>
<div class="tooltip-row">
<span class="tooltip-label">Date</span>
<span class="tooltip-value">{{ flight.departure_date_display }}</span>
</div>
</div>
<ToolTipRows v-if="flight.livery_url">
<LiveryImage :flight="flight" />
</ToolTipRows>
<ToolTipDivider v-if="flight.livery_url" />
<ToolTipRows>
<ToolTipRow label="From" :value="flight.departure_airport.municipality" />
<ToolTipRow label="To" :value="flight.arrival_airport.municipality" />
<ToolTipRow label="Airline" :value="flight.airline.name" v-if="flight.airline" />
<ToolTipRow label="Aircraft" :value="flight.aircraft?.display_name_short" v-if="flight.aircraft" />
<ToolTipRow label="Date" :value="flight.departure_date_display" />
</ToolTipRows>
</GlassTooltip>
</template>
<style scoped>
.tooltip-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.designator {
display:inline-flex;
color: #e8eaf0;
}
.tooltip-name {
display: flex;
align-items: center;
gap: 4px;
margin-top: 0.2rem;
line-height: 1.3;
}
.arrow {
font-size: 0.75rem;
color: var(--muted, #445566);
}
.tooltip-divider {
height: 1px;
background: var(--table-border, rgba(255,255,255,0.08));
}
.tooltip-rows {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.tooltip-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
}
.tooltip-label {
font-family: 'Share Tech Mono', monospace;
font-size: 0.6rem;
letter-spacing: 0.15em;
color: var(--muted, #445566);
flex-shrink: 0;
}
.tooltip-value {
font-size: 0.78rem;
color: var(--text, #c8cdd8);
text-align: right;
}
</style>
@@ -13,7 +13,7 @@ defineProps<{
<template>
<Panel label="Route">
<div class="map-placeholder">
<FlightMap :flights="[flight]" />
<FlightMap :flights="[flight]" :showLegend="false" />
</div>
<DetailRows>
<DetailRow label="Distance" :value="flight.distance + 'km'" />
@@ -0,0 +1,16 @@
<script setup lang="ts">
import ToolTipRow from "@/Components/FlightsGoneBy/Tooltips/ToolTipRow.vue";
import {Country} from "@/Types/types";
defineProps<{
country: Country | null | undefined
}>()
</script>
<template>
<ToolTipRow label="Country" :value="country?.name ?? null" :countryCode="country?.code" />
</template>
<style scoped>
</style>
@@ -0,0 +1,14 @@
<script setup lang="ts">
</script>
<template>
<div class="tooltip-divider"></div>
</template>
<style scoped>
.tooltip-divider {
height: 1px;
background: var(--table-border, rgba(255,255,255,0.08));
}
</style>
@@ -0,0 +1,18 @@
<script setup lang="ts">
</script>
<template>
<div class="tooltip-header">
<slot />
</div>
</template>
<style scoped>
.tooltip-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
</style>
@@ -0,0 +1,19 @@
<script setup lang="ts">
</script>
<template>
<div class="tooltip-name">
<slot />
</div>
</template>
<style scoped>
.tooltip-name {
display: flex;
align-items: center;
gap: 4px;
margin-top: 0.2rem;
line-height: 1.3;
}
</style>
@@ -0,0 +1,46 @@
<script setup lang="ts">
defineProps<{
label: string
value: string | null
countryCode?: string
}>()
</script>
<template>
<div class="tooltip-row">
<span class="tooltip-label">{{label}}</span>
<span v-if="!countryCode" class="tooltip-value">{{value}}</span>
<span v-if="countryCode" class="tooltip-value">
<span class="fi" :class="`fi-${countryCode.toLowerCase()}`" /> {{value}}
</span>
</div>
</template>
<style scoped>
.tooltip-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
}
.tooltip-label {
font-family: 'Share Tech Mono', monospace;
font-size: 0.6rem;
letter-spacing: 0.15em;
color: var(--muted, #445566);
flex-shrink: 0;
text-transform: uppercase;
}
.tooltip-value {
font-size: 0.78rem;
color: var(--text, #c8cdd8);
text-align: right;
}
.fi{
font-size: 1rem;
padding: 0.25rem;
}
</style>
@@ -0,0 +1,17 @@
<script setup lang="ts">
</script>
<template>
<div class="tooltip-rows">
<slot />
</div>
</template>
<style scoped>
.tooltip-rows {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
</style>
+1 -7
View File
@@ -29,13 +29,7 @@ use Inertia\Inertia;
*/
Route::domain(config('app.domain'))->group(
function() {
Route::get('/', function () {
if (auth()->check()) {
return redirect()->route('profile.view', auth()->user()->name);
}
return redirect()->route('login');
});
Route::get('/', [FlightProfileController::class, 'index'])->name('home');
Route::get('/dashboard', function () {