Added Notifications
This commit is contained in:
@@ -1,18 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
import FlightClassBadge from "@/Components/FlightsGoneBy/FlightClassBadge.vue";
|
||||
import AirlineLogo from "@/Components/FlightsGoneBy/AirlineLogo.vue";
|
||||
import {Flight, SharedProps, User} from "@/Types/types";
|
||||
import {Flight, User} from "@/Types/types";
|
||||
import { computed, ref, watch, nextTick } from "vue";
|
||||
import type { DataTableSortItem } from 'vuetify';
|
||||
import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";
|
||||
import AirportToolTip from "@/Components/FlightsGoneBy/AirportToolTip.vue";
|
||||
import AircraftToolTip from "@/Components/FlightsGoneBy/AircraftToolTip.vue";
|
||||
import {FlightStats} from "@/Composables/useFlightStats";
|
||||
import CrewTooltip from "@/Components/FlightsGoneBy/CrewTooltip.vue";
|
||||
import Distance from "@/Components/Distance.vue";
|
||||
import UserFlightContextMenu from "@/Components/FlightsGoneBy/UserFlightContextMenu.vue";
|
||||
import {usePage} from "@inertiajs/vue3";
|
||||
import DepartureBoardTableRow from "@/Components/FlightsGoneBy/DepartureBoardTableRow.vue";
|
||||
|
||||
const props = defineProps<{
|
||||
flightStats: FlightStats
|
||||
@@ -21,7 +12,6 @@ const props = defineProps<{
|
||||
flightId?: number | null
|
||||
}>()
|
||||
|
||||
|
||||
const ITEMS_PER_PAGE = 25
|
||||
|
||||
const headers = [
|
||||
@@ -65,14 +55,9 @@ const customKeySort = {
|
||||
},
|
||||
}
|
||||
|
||||
const page = usePage<SharedProps>()
|
||||
|
||||
const sortBy = ref<DataTableSortItem[]>([])
|
||||
const currentPage = ref(1)
|
||||
|
||||
const today = new Date()
|
||||
today.setHours(0, 0, 0, 0)
|
||||
|
||||
const isSorting = computed(() => sortBy.value.length > 0)
|
||||
|
||||
const upcomingFlights = computed(() =>
|
||||
@@ -117,7 +102,6 @@ watch(
|
||||
async ([id]) => {
|
||||
if (!id) return
|
||||
|
||||
// Count the flight's position among data rows (skipping group headers)
|
||||
const items = tableItems.value
|
||||
let dataIndex = 0
|
||||
let found = false
|
||||
@@ -175,92 +159,14 @@ watch(
|
||||
</template>
|
||||
|
||||
<template v-else-if="!(item as any)._groupHeader">
|
||||
<tr
|
||||
class="v-data-table__tr"
|
||||
:class="[
|
||||
(item as any)._group && !isSorting ? `group-row--${(item as any)._group}` : '',
|
||||
(item as any).id === flightId ? 'flight-row--highlighted' : '',
|
||||
]"
|
||||
:data-flight-id="(item as any).id"
|
||||
>
|
||||
<td class="v-data-table__td airline-logo-cell">
|
||||
<AirlineLogo size="32" :airline="(item as any).airline" class="airline-logo-img" />
|
||||
</td>
|
||||
|
||||
<td class="v-data-table__td flight-number-cell">
|
||||
<div class="flight-cell">
|
||||
<span class="flight-number">{{ (item as any).flight_number }}</span>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td class="v-data-table__td">
|
||||
<AirportToolTip :airport="(item as Flight).departure_airport">
|
||||
<span class="iata">{{ (item as Flight).departure_airport.display_code }}</span><br/>
|
||||
</AirportToolTip>
|
||||
<span class="city-name">{{ (item as Flight).departure_airport.municipality }}</span>
|
||||
</td>
|
||||
|
||||
<td class="v-data-table__td">
|
||||
<AirportToolTip :airport="(item as Flight).arrival_airport">
|
||||
<span class="iata">{{ (item as Flight).arrival_airport.display_code }}</span><br/>
|
||||
</AirportToolTip>
|
||||
<span class="city-name">{{ (item as Flight).arrival_airport.municipality }}</span>
|
||||
</td>
|
||||
|
||||
<td class="v-data-table__td">
|
||||
<span class="date-cell">{{ (item as Flight).departure_date_display }}</span>
|
||||
</td>
|
||||
|
||||
<td class="v-data-table__td">
|
||||
<span class="time-cell">{{ (item as Flight).departure_time_display }}</span>
|
||||
</td>
|
||||
|
||||
<td class="v-data-table__td">
|
||||
<span class="time-cell">{{ (item as Flight).arrival_time_display }}</span>
|
||||
<sup v-if="(item as Flight).arrival_day_difference" class="day-diff">
|
||||
+{{ (item as Flight).arrival_day_difference }}
|
||||
</sup>
|
||||
</td>
|
||||
|
||||
<td class="v-data-table__td">
|
||||
<span class="mono-tag">{{ (item as Flight).duration_display ?? '—' }}</span>
|
||||
</td>
|
||||
|
||||
<td class="v-data-table__td">
|
||||
<span class="mono-tag distance-cell">
|
||||
<Distance :unit="page.props.auth.user?.distance_unit" :value="Math.round((item as Flight).distance)" />
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td class="v-data-table__td">
|
||||
<AircraftToolTip v-if="(item as any).aircraft" :aircraft="(item as any).aircraft">
|
||||
<span class="mono-tag">{{ (item as any).aircraft?.designator }}</span>
|
||||
</AircraftToolTip>
|
||||
</td>
|
||||
|
||||
<td class="v-data-table__td ">
|
||||
<span class="mono-tag">
|
||||
{{(item as Flight).aircraft_registration}}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td class="v-data-table__td ">
|
||||
<span class="class-cell">
|
||||
<CrewTooltip v-if="(item as Flight).flight_reason?.name == 'Crew'" :crew-type="(item as Flight).crew_type!">
|
||||
<FlightClassBadge v-if="(item as Flight).flight_class?.internal_name === 'crew'" :flight="(item as Flight)" />
|
||||
<InlineBadge v-else variant="crew">Crew</InlineBadge>
|
||||
</CrewTooltip>
|
||||
<FlightClassBadge v-if="(item as Flight).flight_reason?.name !== 'Crew' || (item as Flight).flight_class?.internal_name !== 'crew'" :flight="(item as Flight)" />
|
||||
<InlineBadge v-if="(item as Flight).seat_number" variant="economy">{{ (item as Flight).seat_number }}</InlineBadge>
|
||||
<InlineBadge v-if="(item as Flight).seat_type?.name && (item as Flight).seat_type?.name !== 'Unassigned'" variant="economy">{{ (item as Flight).seat_type?.name }}</InlineBadge>
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td class="v-data-table__td actions-cell">
|
||||
<UserFlightContextMenu :profile-user="user" :can-edit="canEdit" :flight="(item as Flight)" />
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<DepartureBoardTableRow
|
||||
:flight="(item as Flight)"
|
||||
:user="user"
|
||||
:can-edit="canEdit"
|
||||
:highlighted="(item as any).id === flightId"
|
||||
:group="(item as any)._group"
|
||||
:is-sorting="isSorting"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@@ -408,95 +314,6 @@ watch(
|
||||
padding-left: 0.5rem !important;
|
||||
}
|
||||
|
||||
.airline-logo-cell {
|
||||
width: 50px !important;
|
||||
min-width: 50px !important;
|
||||
max-width: 50px !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.flight-number-cell {
|
||||
padding-left: 0.5rem !important;
|
||||
}
|
||||
|
||||
.flight-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.airline-logo-img {
|
||||
opacity: 0.85;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.flight-number {
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-size: 0.9rem;
|
||||
color: #e8eaf0;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.iata {
|
||||
display: inline-block;
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: #e8eaf0;
|
||||
letter-spacing: 0.08em;
|
||||
margin-right: 0.35rem;
|
||||
}
|
||||
|
||||
.city-name {
|
||||
font-size: 0.75rem;
|
||||
color: #556;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.date-cell {
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-size: 0.82rem;
|
||||
color: #9aa;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.time-cell {
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-size: 0.82rem;
|
||||
color: #c8cdd8;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.day-diff {
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-size: 0.65rem;
|
||||
color: #ffc107;
|
||||
letter-spacing: 0.04em;
|
||||
margin-left: 0.15rem;
|
||||
}
|
||||
|
||||
.mono-tag {
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-size: 0.8rem;
|
||||
color: #778899;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.seat-cell {
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-size: 0.85rem;
|
||||
color: #c8cdd8;
|
||||
}
|
||||
|
||||
.class-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.no-data {
|
||||
padding: 3rem;
|
||||
text-align: center;
|
||||
@@ -506,26 +323,10 @@ watch(
|
||||
color: #445;
|
||||
}
|
||||
|
||||
.actions-cell {
|
||||
width: 40px;
|
||||
padding: 0 0.5rem !important;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
:deep(.v-list-item-title) {
|
||||
font-family: 'Share Tech Mono', monospace !important;
|
||||
font-size: 0.8rem !important;
|
||||
letter-spacing: 0.08em !important;
|
||||
color: #c8cdd8 !important;
|
||||
}
|
||||
|
||||
/* ── Highlighted flight row ── */
|
||||
.flight-row--highlighted {
|
||||
box-shadow: inset 3px 0 0 #ffc107;
|
||||
|
||||
}
|
||||
.flight-row--highlighted td {
|
||||
background: rgba(255, 193, 7, 0.08) !important;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user