INIT commit

src/pages/profile/details/FlightDetailPage.vue

@@ -0,0 +1,34 @@
+<script setup>
+import {useFlightsStore} from "stores/Flights";
+import {useRoute} from "vue-router";
+import {computed, onMounted} from "vue";
+import {minutesToHumanReadable} from "src/composables/timeUtils";
+
+const flightsStore = useFlightsStore();
+const route = useRoute();
+
+onMounted(() => {
+  flightsStore.fetchDetail(route.params.id);
+})
+
+const flight = computed(() => flightsStore.getDetail(route.params.id) || {});
+</script>
+
+<template>
+  <h1>{{flight.takeOffLocation}} - {{flight.landingLocation}}</h1>
+
+  <q-icon name="calendar">{{flight.date}}</q-icon>
+  <q-icon name="weather">
+    Clouds: few
+    Wind: 220/12kt
+    Temp: 12°C
+  </q-icon>
+
+  Track: {{ flight.turnPoints }}
+
+  {{ minutesToHumanReadable(flight.flightDurationMinutes) }}
+
+  <q-page-sticky location="bottom-right" :offset="[30, 30]">
+    <q-fab color="primary" icon="edit" label="Edit" @click="$router.push({name: 'flightEdit', params:{id: flight.id}})"/>
+  </q-page-sticky>
+</template>