Added Notifications

2026-05-11 23:00:48 +10:00
parent c7fe3268c7
commit 69d72e0912
28 changed files with 2094 additions and 23 deletions
@@ -0,0 +1,118 @@
+<script setup lang="ts">
+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 FlightMap from "@/Components/FlightsGoneBy/FlightMap.vue";
+
+defineProps<{
+    flight: Flight
+}>()
+</script>
+
+<template>
+    <GlassTooltip>
+        <template #activator="{ props: tooltipProps }">
+            <div style="display:inline; cursor:pointer" v-bind="tooltipProps">
+                <slot />
+            </div>
+        </template>
+
+        <div class="tooltip-header">
+            <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>
+
+        <div class="tooltip-name">
+            <InlineBadge variant="generic">{{ flight.departure_airport.display_code }}</InlineBadge>
+            <span class="arrow">→</span>
+            <InlineBadge variant="generic">{{ flight.arrival_airport.display_code }}</InlineBadge>
+        </div>
+
+        <div class="tooltip-divider" />
+
+        <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>
+    </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>