Added User Settings
This commit is contained in:
@@ -53,6 +53,13 @@ function formatEngineType(type: string): string {
|
||||
<div class="tooltip-rows" 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>
|
||||
</GlassTooltip>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
import {Flight, User} from "@/Types/types";
|
||||
import {Flight, SharedProps, User} from "@/Types/types";
|
||||
import { computed, ref, watch, nextTick } from "vue";
|
||||
import type { DataTableSortItem } from 'vuetify';
|
||||
import {FlightStats} from "@/Composables/useFlightStats";
|
||||
import DepartureBoardTableRow from "@/Components/FlightsGoneBy/DepartureBoardTableRow.vue";
|
||||
import {usePage} from "@inertiajs/vue3";
|
||||
|
||||
const props = defineProps<{
|
||||
flightStats: FlightStats
|
||||
@@ -12,24 +13,34 @@ const props = defineProps<{
|
||||
flightId?: number | null
|
||||
}>()
|
||||
|
||||
|
||||
const page = usePage<SharedProps>().props
|
||||
const ITEMS_PER_PAGE = 25
|
||||
|
||||
const headers = [
|
||||
const defaultColumns = ['airline', 'flight_number', 'from', 'to', 'departure_date', 'departure_time', 'arrival_time', 'duration', 'distance', 'aircraft', 'registration', 'class_seat_combined']
|
||||
const columnsToShow = computed(() => page.auth.user?.resolved_settings?.departure_board_columns ?? defaultColumns)
|
||||
const showColumn = (column: string) => columnsToShow.value.includes(column)
|
||||
|
||||
const allHeaders = [
|
||||
{ title: '', key: 'airline', sortable: true },
|
||||
{ title: 'FLIGHT', key: 'flight_number', sortable: true },
|
||||
{ title: 'FROM', key: 'departure_airport', sortable: true },
|
||||
{ title: 'TO', key: 'arrival_airport', sortable: true },
|
||||
{ title: 'FROM', key: 'from', sortable: true },
|
||||
{ title: 'TO', key: 'to', sortable: true },
|
||||
{ title: 'DATE', key: 'departure_date', sortable: true },
|
||||
{ title: 'DEPART', key: 'departure_time_display', sortable: false },
|
||||
{ title: 'ARRIVE', key: 'arrival_time_display', sortable: false },
|
||||
{ title: 'DEPART', key: 'departure_time', sortable: false },
|
||||
{ title: 'ARRIVE', key: 'arrival_time', sortable: false },
|
||||
{ title: 'DURATION', key: 'duration', sortable: true },
|
||||
{ title: 'DISTANCE', key: 'distance', sortable: true },
|
||||
{ title: 'AIRCRAFT', key: 'aircraft.designator', sortable: true },
|
||||
{ title: 'REG', key: 'aircraft_registration', sortable: true },
|
||||
{ title: 'CLASS', key: 'flight_class', sortable: true },
|
||||
{ title: 'AIRCRAFT', key: 'aircraft', sortable: true },
|
||||
{ title: 'REG', key: 'registration', sortable: true },
|
||||
{ title: 'CLASS', key: 'class_seat_combined', sortable: true },
|
||||
{ title: '', key: 'actions', sortable: false },
|
||||
]
|
||||
|
||||
const headers = computed(() =>
|
||||
allHeaders.filter(h => h.key === 'actions' || showColumn(h.key))
|
||||
)
|
||||
|
||||
const CLASS_ORDER: Record<string, number> = {
|
||||
'Unspecified': 0,
|
||||
'Economy': 1,
|
||||
@@ -40,7 +51,7 @@ const CLASS_ORDER: Record<string, number> = {
|
||||
}
|
||||
|
||||
const customKeySort = {
|
||||
flight_class: (a: Flight['flight_class'], b: Flight['flight_class']) => {
|
||||
class_seat_combined: (a: Flight['flight_class'], b: Flight['flight_class']) => {
|
||||
return (CLASS_ORDER[a?.name ?? ''] ?? -1) - (CLASS_ORDER[b?.name ?? ''] ?? -1)
|
||||
},
|
||||
airline: (a: Flight['airline'], b: Flight['airline']) => {
|
||||
@@ -123,6 +134,7 @@ watch(
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -160,6 +172,7 @@ watch(
|
||||
|
||||
<template v-else-if="!(item as any)._groupHeader">
|
||||
<DepartureBoardTableRow
|
||||
:columnsToShow="columnsToShow"
|
||||
:flight="(item as Flight)"
|
||||
:user="user"
|
||||
:can-edit="canEdit"
|
||||
|
||||
@@ -20,9 +20,12 @@ const props = defineProps<{
|
||||
highlighted?: boolean
|
||||
group?: 'upcoming' | 'departed'
|
||||
isSorting?: boolean
|
||||
columnsToShow: string[]
|
||||
}>()
|
||||
|
||||
const page = usePage<SharedProps>()
|
||||
const showColumn = (column: string) => props.columnsToShow.includes(column)
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -34,11 +37,11 @@ const page = usePage<SharedProps>()
|
||||
]"
|
||||
:data-flight-id="flight.id"
|
||||
>
|
||||
<td class="v-data-table__td airline-logo-cell">
|
||||
<td v-if="showColumn('airline')" class="v-data-table__td airline-logo-cell">
|
||||
<AirlineLogo size="32" :airline="flight.airline" class="airline-logo-img" />
|
||||
</td>
|
||||
|
||||
<td class="v-data-table__td flight-number-cell">
|
||||
<td v-if="showColumn('flight_number')" class="v-data-table__td flight-number-cell">
|
||||
<div class="flight-cell">
|
||||
<Mono class="flight-number">
|
||||
{{ flight.flight_number }}
|
||||
@@ -46,56 +49,56 @@ const page = usePage<SharedProps>()
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td class="v-data-table__td">
|
||||
<td v-if="showColumn('from')" class="v-data-table__td">
|
||||
<AirportToolTip :airport="flight.departure_airport">
|
||||
<Mono class="iata">{{ flight.departure_airport.display_code }}</Mono><br/>
|
||||
</AirportToolTip>
|
||||
<span class="city-name">{{ flight.departure_airport.municipality }}</span>
|
||||
</td>
|
||||
|
||||
<td class="v-data-table__td">
|
||||
<td v-if="showColumn('to')" class="v-data-table__td">
|
||||
<AirportToolTip :airport="flight.arrival_airport">
|
||||
<span class="iata"><Mono>{{ flight.arrival_airport.display_code }}</Mono></span><br/>
|
||||
</AirportToolTip>
|
||||
<span class="city-name" >{{ flight.arrival_airport.municipality }}</span>
|
||||
</td>
|
||||
|
||||
<td class="v-data-table__td">
|
||||
<td v-if="showColumn('departure_date')" class="v-data-table__td">
|
||||
<span class="date-cell"><Mono muted smaller>{{ flight.departure_date_display }}</Mono></span>
|
||||
</td>
|
||||
|
||||
<td class="v-data-table__td">
|
||||
<td v-if="showColumn('departure_time')" class="v-data-table__td">
|
||||
<span class="time-cell">
|
||||
<Mono small>{{ flight.departure_time_display }}</Mono>
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td class="v-data-table__td arrival-time-cell">
|
||||
<td v-if="showColumn('arrival_time')" class="v-data-table__td arrival-time-cell">
|
||||
<Mono small>{{ flight.arrival_time_display }}</Mono>
|
||||
<DayDifference :value="flight.arrival_day_difference" />
|
||||
</td>
|
||||
|
||||
<td class="v-data-table__td duration-cell">
|
||||
<td v-if="showColumn('duration')" class="v-data-table__td duration-cell">
|
||||
<Mono muted small>{{ flight.duration_display ?? '—' }}</Mono>
|
||||
</td>
|
||||
|
||||
<td class="v-data-table__td distance-cell">
|
||||
<td v-if="showColumn('distance')" class="v-data-table__td distance-cell">
|
||||
<Mono muted small>
|
||||
<Distance :unit="page.props.auth.user?.distance_unit" :value="Math.round(flight.distance)" />
|
||||
<Distance :unit="page.props.auth.user?.resolved_settings?.distance_unit" :value="Math.round(flight.distance)" />
|
||||
</Mono>
|
||||
</td>
|
||||
|
||||
<td class="v-data-table__td aircraft-cell">
|
||||
<td v-if="showColumn('aircraft')" class="v-data-table__td aircraft-cell">
|
||||
<AircraftToolTip v-if="flight.aircraft" :aircraft="flight.aircraft" :flight="flight">
|
||||
<Mono muted small>{{ flight.aircraft?.designator }}</Mono>
|
||||
</AircraftToolTip>
|
||||
</td>
|
||||
|
||||
<td class="v-data-table__td registration-cell">
|
||||
<td v-if="showColumn('registration')" class="v-data-table__td registration-cell">
|
||||
<Mono muted smaller v-if="flight.aircraft_registration">{{ flight.aircraft_registration }}</Mono>
|
||||
</td>
|
||||
|
||||
<td class="v-data-table__td class-badges-cell">
|
||||
<td v-if="showColumn('class_seat_combined')" class="v-data-table__td class-badges-cell">
|
||||
<span class="class-cell">
|
||||
<CrewTooltip v-if="flight.flight_reason?.name == 'Crew'" :crew-type="flight.crew_type!">
|
||||
<FlightClassBadge v-if="flight.flight_class?.internal_name === 'crew'" :flight="flight" />
|
||||
|
||||
@@ -35,12 +35,12 @@
|
||||
<div class="stat">
|
||||
<template v-if="totalDistanceKm">
|
||||
<div class="stat-primary">
|
||||
<span class="stat-num"><Distance :unit="page.auth?.user?.distance_unit" includeSpace :value="totalDistanceKm" /></span>
|
||||
<span class="stat-num"><Distance :unit="page.auth?.user?.resolved_settings?.distance_unit" includeSpace :value="totalDistanceKm" /></span>
|
||||
</div>
|
||||
</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?.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>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
@@ -51,6 +51,7 @@ onUnmounted(() => document.removeEventListener('click', handleClickOutside))
|
||||
</button>
|
||||
<div v-if="dropdownOpen" class="dropdown-menu">
|
||||
<Link :href="route('import.fr24')" class="dropdown-item">Import from FR24</Link>
|
||||
<Link :href="route('profile.settings')" class="dropdown-item">Settings</Link>
|
||||
<div class="dropdown-divider" />
|
||||
<button class="dropdown-item dropdown-item--danger" @click="logout">Log Out</button>
|
||||
</div>
|
||||
@@ -76,6 +77,7 @@ onUnmounted(() => document.removeEventListener('click', handleClickOutside))
|
||||
<Link :href="route('profile.view', { user: props.auth.user.name })" class="nav-link" @click="menuOpen = false">Profile</Link>
|
||||
<Link :href="route('feed')" class="nav-link nav-link" @click="menuOpen = false">Feed</Link>
|
||||
<Link :href="route('import.fr24')" class="nav-link" @click="menuOpen = false">Import from FR24</Link>
|
||||
<Link :href="route('profile.settings')" class="nav-link" @click="menuOpen = false">Settings</Link>
|
||||
<div class="dropdown-divider" />
|
||||
<button class="nav-link nav-link--danger" @click="logout">Log Out</button>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user