Updated Map View

resources/js/Components/FlightsGoneBy/FlightToolTip.vue

@@ -3,6 +3,12 @@ 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 LiveryImage from "@/Components/FlightsGoneBy/LiveryImage.vue";
+import ToolTipDivider from "@/Components/FlightsGoneBy/Tooltips/ToolTipDivider.vue";
+import ToolTipRow from "@/Components/FlightsGoneBy/Tooltips/ToolTipRow.vue";
+import ToolTipRows from "@/Components/FlightsGoneBy/Tooltips/ToolTipRows.vue";
+import ToolTipName from "@/Components/FlightsGoneBy/Tooltips/ToolTipName.vue";
+import ToolTipHeader from "@/Components/FlightsGoneBy/Tooltips/ToolTipHeader.vue";
 
 defineProps<{
     flight: Flight
@@ -17,101 +23,45 @@ defineProps<{
             </div>
         </template>
 
-        <div class="tooltip-header">
+        <ToolTipHeader>
             <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>
+        </ToolTipHeader>
 
-        <div class="tooltip-name">
+        <ToolTipName>
             <InlineBadge variant="generic">{{ flight.departure_airport.display_code }}</InlineBadge>
             <span class="arrow">→</span>
             <InlineBadge variant="generic">{{ flight.arrival_airport.display_code }}</InlineBadge>
-        </div>
+        </ToolTipName>
 
-        <div class="tooltip-divider" />
+        <ToolTipDivider />
 
-        <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>
+        <ToolTipRows v-if="flight.livery_url">
+            <LiveryImage :flight="flight" />
+        </ToolTipRows>
+
+        <ToolTipDivider v-if="flight.livery_url" />
+
+        <ToolTipRows>
+            <ToolTipRow label="From" :value="flight.departure_airport.municipality" />
+            <ToolTipRow label="To" :value="flight.arrival_airport.municipality" />
+            <ToolTipRow label="Airline" :value="flight.airline.name" v-if="flight.airline" />
+            <ToolTipRow label="Aircraft" :value="flight.aircraft?.display_name_short"  v-if="flight.aircraft" />
+            <ToolTipRow label="Date" :value="flight.departure_date_display" />
+        </ToolTipRows>
     </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>