Added Notifications
This commit is contained in:
@@ -1,13 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
import { Flight } from "@/Types/types";
|
||||
import {Flight, User} from "@/Types/types";
|
||||
import AirlineLogo from "@/Components/FlightsGoneBy/AirlineLogo.vue";
|
||||
import AirportToolTip from "@/Components/FlightsGoneBy/AirportToolTip.vue";
|
||||
import AircraftToolTip from "@/Components/FlightsGoneBy/AircraftToolTip.vue";
|
||||
import Distance from "@/Components/Distance.vue";
|
||||
import UserFlightContextMenu from "@/Components/FlightsGoneBy/UserFlightContextMenu.vue";
|
||||
|
||||
defineProps<{
|
||||
flight: Flight
|
||||
showTooltips?: boolean
|
||||
canEdit?: boolean
|
||||
user?: User
|
||||
}>()
|
||||
|
||||
|
||||
@@ -19,6 +22,8 @@ defineProps<{
|
||||
<span v-if="flight.flight_class?.name !== 'Unspecified'" class="pass-header-class">
|
||||
{{ flight.flight_class?.name }}
|
||||
</span>
|
||||
<span v-else></span>
|
||||
<UserFlightContextMenu v-if="user" :profile-user="user" :flight="flight" :can-edit="canEdit ?? false" referrer="boarding-passes"/>
|
||||
</div>
|
||||
|
||||
<div class="pass-body">
|
||||
@@ -159,7 +164,7 @@ defineProps<{
|
||||
.pass-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
justify-content: space-between; /* was flex-end */
|
||||
padding: 0.5rem 0.85rem;
|
||||
min-height: 2rem;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from "vue";
|
||||
import { Flight } from "@/Types/types";
|
||||
import {Flight, User} from "@/Types/types";
|
||||
import BoardingPass from "@/Components/FlightsGoneBy/BoardingPass.vue";
|
||||
import { FlightStats } from "@/Composables/useFlightStats";
|
||||
|
||||
const props = defineProps<{
|
||||
flightStats: FlightStats
|
||||
canEdit: boolean
|
||||
user: User
|
||||
}>()
|
||||
|
||||
const upcomingFlights = computed(() =>
|
||||
@@ -64,7 +65,7 @@ function isUpcoming(flight: Flight): boolean {
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<BoardingPass :flight="flight" />
|
||||
<BoardingPass :user="user" :canEdit="canEdit" :flight="flight" />
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -9,11 +9,9 @@ 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 GlassTooltip from "@/Components/FlightsGoneBy/GlassTooltip.vue";
|
||||
import CrewTooltip from "@/Components/FlightsGoneBy/CrewTooltip.vue";
|
||||
import {Link, router} from "@inertiajs/vue3";
|
||||
import AllianceLogo from "@/Components/FlightsGoneBy/AllianceLogo.vue";
|
||||
import Distance from "@/Components/Distance.vue";
|
||||
import UserFlightContextMenu from "@/Components/FlightsGoneBy/UserFlightContextMenu.vue";
|
||||
|
||||
const props = defineProps<{
|
||||
flightStats: FlightStats
|
||||
@@ -23,16 +21,6 @@ const props = defineProps<{
|
||||
}>()
|
||||
|
||||
|
||||
function editRoute(id: number) {
|
||||
return route('flights.edit', { flight: id })
|
||||
}
|
||||
|
||||
const flightToDelete = ref<Flight | null>(null)
|
||||
const showDeleteDialog = computed({
|
||||
get: () => flightToDelete.value !== null,
|
||||
set: (val) => { if (!val) flightToDelete.value = null }
|
||||
})
|
||||
|
||||
const ITEMS_PER_PAGE = 25
|
||||
|
||||
const headers = [
|
||||
@@ -77,7 +65,6 @@ const customKeySort = {
|
||||
}
|
||||
|
||||
|
||||
const deleting = ref(false)
|
||||
const sortBy = ref<DataTableSortItem[]>([])
|
||||
const currentPage = ref(1)
|
||||
|
||||
@@ -268,54 +255,7 @@ watch(
|
||||
</td>
|
||||
|
||||
<td class="v-data-table__td actions-cell">
|
||||
<v-menu>
|
||||
<template #activator="{ props: menuProps }">
|
||||
<v-btn
|
||||
v-bind="menuProps"
|
||||
icon="mdi-dots-horizontal"
|
||||
variant="text"
|
||||
size="small"
|
||||
density="compact"
|
||||
/>
|
||||
</template>
|
||||
<v-list density="compact" bg-color="#1a1e2e">
|
||||
<v-list-item
|
||||
prepend-icon="mdi-magnify"
|
||||
title="View Details"
|
||||
:href="`/u/${user.name}/flight/${(item as Flight).id}`"
|
||||
/>
|
||||
<v-list-item v-if="canEdit"
|
||||
prepend-icon="mdi-pencil-outline"
|
||||
title="Edit"
|
||||
:href="editRoute((item as Flight).id)"
|
||||
/>
|
||||
<v-list-item v-if="canEdit"
|
||||
prepend-icon="mdi-trash-can-outline"
|
||||
title="Delete"
|
||||
@click="flightToDelete = (item as Flight)"
|
||||
/>
|
||||
|
||||
</v-list>
|
||||
</v-menu>
|
||||
<v-dialog v-if="canEdit" v-model="showDeleteDialog" max-width="400">
|
||||
<v-card title="Delete Flight">
|
||||
<v-card-text>Are you sure you want to delete this flight?</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer />
|
||||
<v-btn v-if="!deleting" @click="flightToDelete = null">Cancel</v-btn>
|
||||
<v-btn
|
||||
color="error"
|
||||
:loading="deleting"
|
||||
@click="deleting = true; router.delete(
|
||||
route('flights.delete', { flight: flightToDelete!.id }),
|
||||
{ onFinish: () => { deleting = false; flightToDelete = null } }
|
||||
)"
|
||||
>
|
||||
Delete
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
<UserFlightContextMenu :profile-user="user" :can-edit="canEdit" :flight="(item as Flight)" />
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
@@ -28,6 +28,7 @@ defineProps<{
|
||||
padding: 2.5rem 2rem;
|
||||
font-family: 'Barlow', sans-serif;
|
||||
width: 100%;
|
||||
max-width: 2000px;
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
@@ -37,20 +38,6 @@ defineProps<{
|
||||
min-height: 50dvh;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
display: block;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border: 3px solid rgba(255, 255, 255, 0.2);
|
||||
border-top-color: white;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.7s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.board-wrapper {
|
||||
padding: 1em 0.25em;
|
||||
|
||||
@@ -0,0 +1,79 @@
|
||||
<script setup lang="ts">
|
||||
import {computed, ref} from "vue";
|
||||
import {Flight, User} from "@/Types/types";
|
||||
import {router} from "@inertiajs/vue3";
|
||||
|
||||
defineProps<{
|
||||
profileUser: User
|
||||
flight: Flight
|
||||
canEdit: boolean
|
||||
referrer?: "departure-board" | "boarding-passes"
|
||||
}>()
|
||||
|
||||
const deleting = ref(false)
|
||||
function editRoute(id: number) {
|
||||
return route('flights.edit', { flight: id })
|
||||
}
|
||||
|
||||
const flightToDelete = ref<Flight | null>(null)
|
||||
const showDeleteDialog = computed({
|
||||
get: () => flightToDelete.value !== null,
|
||||
set: (val) => { if (!val) flightToDelete.value = null }
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-menu>
|
||||
<template #activator="{ props: menuProps }">
|
||||
<v-btn
|
||||
v-bind="menuProps"
|
||||
icon="mdi-dots-horizontal"
|
||||
variant="text"
|
||||
size="small"
|
||||
density="compact"
|
||||
/>
|
||||
</template>
|
||||
<v-list density="compact" bg-color="#1a1e2e">
|
||||
<v-list-item
|
||||
prepend-icon="mdi-magnify"
|
||||
title="View Details"
|
||||
:href="route('profile.flight', { userFlight: flight.id, user: profileUser.name })"
|
||||
/>
|
||||
<v-list-item v-if="canEdit"
|
||||
prepend-icon="mdi-pencil-outline"
|
||||
title="Edit"
|
||||
:href="editRoute(flight.id)"
|
||||
/>
|
||||
<v-list-item v-if="canEdit"
|
||||
prepend-icon="mdi-trash-can-outline"
|
||||
title="Delete"
|
||||
@click="flightToDelete = flight"
|
||||
/>
|
||||
|
||||
</v-list>
|
||||
</v-menu>
|
||||
<v-dialog v-if="canEdit" v-model="showDeleteDialog" max-width="400">
|
||||
<v-card title="Delete Flight">
|
||||
<v-card-text>Are you sure you want to delete this flight?</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer />
|
||||
<v-btn v-if="!deleting" @click="flightToDelete = null">Cancel</v-btn>
|
||||
<v-btn
|
||||
color="error"
|
||||
:loading="deleting"
|
||||
@click="deleting = true; router.delete(
|
||||
route('flights.delete', { flight: flightToDelete!.id , referrer: referrer ?? 'departure-board'}),
|
||||
{ onFinish: () => { deleting = false; flightToDelete = null } }
|
||||
)"
|
||||
>
|
||||
Delete
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user