Added Notifications

resources/js/Components/FlightsGoneBy/AirlineAlphabetTable.vue

@@ -4,6 +4,7 @@ import type { CodeType } from '@/Composables/useAlphabetAirlines'
 import BadgeTable from '@/Components/FlightsGoneBy/GenericBadgeTable.vue'
 import InlineBadge from '@/Components/FlightsGoneBy/InlineBadge.vue'
 import AirlineLogo from "@/Components/FlightsGoneBy/AirlineLogo.vue";
+import {computed} from "vue";
 
 const props = defineProps<{
     letters: string[]
@@ -50,8 +51,8 @@ function isHighlighted({ firstYear }: AirlineEntry): boolean {
     return props.selectedYear !== null && firstYear === props.selectedYear
 }
 
-function toBBCode(): string {
-    return props.letters
+const bbCode = computed(() =>
+    props.letters
         .map(letter => {
             const entries = airlineEntriesForLetter(letter)
             if (!entries.length) return letter
@@ -65,9 +66,9 @@ function toBBCode(): string {
                 .join(', ')
         })
         .join('\n')
-}
+)
 
-defineExpose({ toBBCode })
+defineExpose({ bbCode })
 </script>
 
 <template>

resources/js/Components/FlightsGoneBy/AlphabetTable.vue

@@ -3,6 +3,7 @@ import {Airport, Flight} from '@/Types/types'
 import BadgeTable from '@/Components/FlightsGoneBy/GenericBadgeTable.vue'
 import InlineBadge from '@/Components/FlightsGoneBy/InlineBadge.vue'
 import AirportToolTip from '@/Components/FlightsGoneBy/AirportToolTip.vue'
+import {computed} from "vue";
 
 type CodeType = 'iata' | 'icao'
 
@@ -50,8 +51,8 @@ function isHighlighted({ firstYear }: AirportEntry): boolean {
     return props.selectedYear !== null && firstYear === props.selectedYear
 }
 
-function toBBCode(): string {
-    return props.letters
+const bbCode = computed(() =>
+    props.letters
         .map(letter => {
             const entries = airportEntriesForLetter(letter)
             if (!entries.length) return letter
@@ -64,9 +65,9 @@ function toBBCode(): string {
                 .join(', ')
         })
         .join('\n')
-}
+)
 
-defineExpose({ toBBCode })
+defineExpose({ bbCode })
 </script>
 
 <template>

resources/js/Components/FlightsGoneBy/CopyButton.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { copyToClipboard } from "@/Composables/useClipboard";
+
+const props = defineProps<{
+    text: string;
+    title?: string;
+    size?: string;
+}>();
+
+const copied = ref(false);
+
+const handleCopy = async () => {
+    await copyToClipboard(props.text);
+    copied.value = true;
+    setTimeout(() => copied.value = false, 1500);
+};
+</script>
+
+<template>
+    <v-btn
+        :title="title"
+        :icon="copied ? 'mdi-check' : 'mdi-content-copy'"
+        :size="size ?? 'x-small'"
+        :variant="copied ? 'tonal' : 'plain'"
+        :color="copied ? 'success' : undefined"
+        density="compact"
+        @click="handleCopy"
+    />
+</template>

resources/js/Components/FlightsGoneBy/MainHeader.vue

@@ -38,7 +38,8 @@ onUnmounted(() => document.removeEventListener('click', handleClickOutside))
             <template v-else>
                 <Link :href="route('flights.add')" class="nav-link">Add Flight</Link>
                 <Link :href="route('profile.view', { user: props.auth.user.name })" class="nav-link">Profile</Link>
-                <Link href="/feed" class="nav-link">Feed</Link>
+                <Link :href="route('feed')" class="nav-link">Feed</Link>
+                <Link v-if="props.auth.roles.includes('admin')" :href="route('admin.dashboard')" class="nav-link">Admin</Link>
 
                 <div class="dropdown" ref="dropdownRef">
                     <button class="nav-link dropdown-trigger" @click.stop="dropdownOpen = !dropdownOpen">
@@ -73,7 +74,7 @@ onUnmounted(() => document.removeEventListener('click', handleClickOutside))
                     <span class="nav-greeting">Welcome, {{ props.auth.user.name }}</span>
                     <Link :href="route('flights.add')" class="nav-link" @click="menuOpen = false">Add Flight</Link>
                     <Link :href="route('profile.view', { user: props.auth.user.name })" class="nav-link" @click="menuOpen = false">Profile</Link>
-                    <Link href="/feed" class="nav-link nav-link--highlight" @click="menuOpen = false">Feed</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>
                     <div class="dropdown-divider" />
                     <button class="nav-link nav-link--danger" @click="logout">Log Out</button>
@@ -115,9 +116,10 @@ header {
 
 /* Shared nav link base */
 .nav-link {
-    display: inline-flex;
+    display: flex;
     align-items: center;
     gap: 0.3em;
+    height: 100%;
     padding: 0.3em 0.75em;
     font-size: 0.875rem;
     font-weight: 500;