Detail planovace, verejne planovain

2024-06-11 22:03:53 +02:00
parent 852d00b932
commit e01bafee73
10 changed files with 157 additions and 14 deletions
@@ -0,0 +1,114 @@
+<script>
+import {useFlightPlansStore} from "stores/FlightPlans";
+
+export default {
+  preFetch({store, currentRoute}) {
+    return useFlightPlansStore(store).fetchPublicDetail({
+      id: currentRoute.params.id,
+      username: currentRoute.params.username
+    })
+  }
+}
+</script>
+<script setup>
+import {storeToRefs} from "pinia";
+import {useAppStore} from "stores/App";
+import {publicProfileBreadcrumbs} from "src/composables/breadcrumbs";
+import FlightPlanMap from "components/flightPlans/FlightPlanMap.vue";
+import {computed, onMounted, ref} from "vue";
+import {useAirspacesStore} from "stores/Airspaces";
+import {usePointsOfInterestStore} from "stores/PointsOfInterest";
+import {useAirportsStore} from "stores/Airports";
+import {formatDatetime, minutesToHumanReadable} from "src/composables/datetimeUtils";
+import {useFlightPlanCalculations} from "src/composables/flightPlan";
+import FlightPlanRouteTable from "components/flightPlans/FlightPlanRouteTable.vue";
+
+const props = defineProps({
+  pilot: {
+    type: Object,
+    required: true
+  }
+});
+
+const {flightPlan} = storeToRefs(useFlightPlansStore());
+
+
+useAppStore().setPageTitle(flightPlan.value.name);
+useAppStore().setBreadcrumbs([
+  ...publicProfileBreadcrumbs(props.pilot),
+  {label: `Plán: ${flightPlan.value.name}`},
+]);
+
+
+onMounted(() => {
+  useAirspacesStore().fetch();
+  usePointsOfInterestStore().fetchPublic({limit: 10000});
+  useAirportsStore().fetch();
+});
+
+const {pointsOfInterest} = storeToRefs(usePointsOfInterestStore());
+const {airspaces: airspacesData, areAirspacesLoading: isQueryRunning} = storeToRefs(useAirspacesStore())
+const {airports} = storeToRefs(useAirportsStore());
+
+const openedTab = ref("map");
+
+const {getTotalDistance, getTotalDuration} = useFlightPlanCalculations();
+
+const showInfoCard = computed(() => flightPlan.value.aircraft || flightPlan.value.plannedTakeoffDatetime || flight.value.description);
+</script>
+
+<template>
+  <q-tabs v-model="openedTab">
+    <q-tab name="map">Mapa</q-tab>
+    <q-tab name="trackTable">Trasa</q-tab>
+    <q-tab name="info" v-if="showInfoCard">Informace</q-tab>
+  </q-tabs>
+
+  <q-tab-panels v-model="openedTab" class="q-mb-lg">
+    <q-tab-panel name="map">
+      <FlightPlanMap
+        :airspace-data="airspacesData"
+        :airports="airports"
+        :points-of-interest="pointsOfInterest"
+        :flight-plan="flightPlan"
+      />
+      <div class="row">
+        <div class="col">
+          <q-chip size="lg">
+            <q-icon class="q-mx-md" name="mdi-map-marker-distance"/>
+            {{ getTotalDistance(flightPlan) }} km
+          </q-chip>
+
+        </div>
+        <div class="col text-right">
+          <q-chip size="lg">
+            <q-icon name="mdi-clock-outline"/>
+            {{ minutesToHumanReadable(getTotalDuration(flightPlan, flightPlan.plannedSpeed)) }}
+          </q-chip>
+        </div>
+      </div>
+
+    </q-tab-panel>
+    <q-tab-panel name="trackTable">
+      <FlightPlanRouteTable :planned-speed="flightPlan.plannedSpeed" :flight-plan="flightPlan"/>
+    </q-tab-panel>
+    <q-tab-panel name="info" v-if="showInfoCard">
+      <div v-if="flightPlan.plannedTakeoffDatetime">
+        Plánovaný vzlet: {{ formatDatetime(flightPlan.plannedTakeoffDatetime) }}
+        <br>
+      </div>
+      <div v-if="flightPlan.aircraft">
+        <q-avatar v-if="flightPlan.aircraft.titlePhoto" class="q-ma-md">
+          <img :src="flightPlan.aircraft.titlePhoto.thumbnailUrl" alt=""/>
+        </q-avatar>
+        <router-link v-if="flightPlan.aircraft.isPublic" :to="{name: 'publicAircraftDetail', params: {callSign: flightPlan.aircraft.callSign}}">
+          {{ flightPlan.aircraft.callSign }}
+        </router-link>
+        <template v-else>
+          {{ flightPlan.aircraft.callSign }}
+        </template>
+      </div>
+      <div v-html="flightPlan.description"/>
+    </q-tab-panel>
+  </q-tab-panels>
+</template>