Started a flight view

2026-04-07 18:11:12 +10:00
parent 2ad8c65b86
commit 79469c02cf
6 changed files with 600 additions and 84 deletions
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import {Airline, SharedProps} from "@/Types/types";
+import {computed} from "vue";
+import {usePage} from "@inertiajs/vue3";
+
+const props = defineProps<{
+    airline: Airline | null;
+    size?: number | string;
+}>();
+
+const page = usePage<SharedProps>().props;
+const logoUrl = computed(() => `url('${page.logo_api_url}/airlines/logos/tail/id/${props.airline?.id}')`);
+const size = computed(() => props.size ? props.size + 'px' : '30px');
+</script>
+
+<template>
+<span></span>
+</template>
+
+<style scoped>
+span{
+    width: v-bind(size);
+    height: v-bind(size);
+    background-image: v-bind(logoUrl);
+    background-size: contain;
+    background-repeat: no-repeat;
+    display: inline-block;
+}
+</style>
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import {FlightClass} from "@/Types/types";
+
+defineProps<{
+  flightClass: FlightClass | null
+}>();
+</script>
+
+<template>
+  <span
+    class="class-badge"
+    :class="{
+      'class-first': flightClass?.name?.toLowerCase().includes('first'),
+      'class-business': flightClass?.name?.toLowerCase().includes('business'),
+      'class-premium': flightClass?.name?.toLowerCase().includes('premium'),
+      'class-economy': flightClass?.name?.toLowerCase().includes('economy') && !flightClass?.name?.toLowerCase().includes('premium'),
+      'class-private': flightClass?.name?.toLowerCase().includes('private'),
+      'class-unspecified': flightClass?.name?.toLowerCase().includes('unspecified'),
+    }"
+  >
+    {{ flightClass?.name ?? '—' }}
+  </span>
+</template>
+
+<style scoped>
+.class-badge {
+  display: inline-block;
+  font-family: 'Share Tech Mono', monospace;
+  font-size: 0.68rem;
+  letter-spacing: 0.1em;
+  padding: 0.18rem 0.55rem;
+  border-radius: 2px;
+  text-transform: uppercase;
+}
+
+.class-first {
+  background: rgba(255, 193, 7, 0.15);
+  color: #ffc107;
+  border: 1px solid rgba(255, 193, 7, 0.3);
+}
+
+.class-business {
+  background: rgba(100, 180, 255, 0.1);
+  color: #64b4ff;
+  border: 1px solid rgba(100, 180, 255, 0.25);
+}
+
+.class-premium {
+  background: rgb(75, 32, 137, 0.1);
+  color: #c49dff;
+  border: 1px solid rgba(180, 130, 255, 0.25);
+}
+
+.class-economy {
+  background: rgba(255, 255, 255, 0.05);
+  color: #778;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.class-unspecified {
+  display: none;
+  background: transparent;
+  color: #778;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.class-private {
+  background: linear-gradient(
+    135deg,
+    rgba(255, 160, 0, 0.2) 0%,
+    rgba(255, 220, 80, 0.3) 45%,
+    rgba(255, 160, 0, 0.15) 100%
+  );
+  color: #ffc107;
+  border: 1px solid rgba(255, 193, 7, 0.4);
+  text-shadow: 0 0 8px rgba(255, 193, 7, 0.6);
+  position: relative;
+  overflow: hidden;
+}
+
+.class-private::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    105deg,
+    transparent 40%,
+    rgba(255, 220, 100, 0.45) 50%,
+    transparent 60%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 2.8s ease-in-out infinite;
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: 200% center;
+  }
+  100% {
+    background-position: -200% center;
+  }
+}
+</style>