Pridani tabulky s necim jako navigacni stitek do planovace

src/components/flightPlans/FlightPlanForm.vue

@@ -0,0 +1,51 @@
+<script setup>
+import {commonProps} from "src/composables/inputs";
+import DatetimePicker from "components/inputs/DatetimePicker.vue";
+import ComboboxInput from "components/inputs/ComboboxInput.vue";
+import FormWrapper from "components/FormWrapper.vue";
+import {onMounted, reactive} from "vue";
+import {setDefaultData} from "src/composables/form/formHandling";
+
+const props = defineProps({
+  flightPlan: {
+    type: Object
+  },
+  aircrafts: {
+    type: Array,
+  },
+  isRequestPending: {
+    type: Boolean,
+    required: false,
+    default: false,
+  }
+})
+
+
+const formData = reactive({
+  name: props.flightPlan.name || null,
+  isDefaultName: props.flightPlan ? props.flightPlan.isDefaultName : true,
+  isEditableByCopilot: props.flightPlan.isEditableByCopilot || false,
+  isPublic: props.flightPlan.isPublic || false,
+  plannedTakeoffDatetime: props.flightPlan.plannedTakeoffDatetime || null,
+  aircraft: props.flightPlan && props.flightPlan.aircraft ? {
+    id: props.flightPlan.aircraft.id, name: props.flightPlan.aircraft.callSign
+  } : null,
+  plannedSpeed: props.flightPlan.plannedSpeed || 150,
+});
+</script>
+
+<template>
+  <FormWrapper v-model="formData" :is-request-pending="isRequestPending">
+    <q-input v-model="formData.name" label="Jméno letu" v-if="!formData.isDefaultName" v-bind="commonProps"/>
+    <q-checkbox v-model="formData.isDefaultName" label="Použít automatické jméno"/>
+
+    <!--            <q-checkbox v-model="formData.isPublic" label="Zveřejnit"/>-->
+    <!--            <q-checkbox v-model="formData.isEditableByCopilot" label="Kopilot může upravovat"/>-->
+    <DatetimePicker v-model="formData.plannedTakeoffDatetime" label="Plánovaný datum a čas vzletu" v-bind="commonProps"/>
+    <ComboboxInput v-model="formData.aircraft" :options="aircrafts" label="Letadlo" v-bind="commonProps"/>
+
+    <q-input v-model.number="formData.plannedSpeed" type="number" step="5" label="Plánovaná rychlost" v-bind="commonProps">
+      <template #append>km/h</template>
+    </q-input>
+  </FormWrapper>
+</template>

src/components/flightPlans/FlightPlanRouteTable.vue

@@ -0,0 +1,92 @@
+<script setup>
+import {computed} from "vue";
+import {useFlightPlanCalculations} from "src/composables/flightPlan";
+import {minutesToHumanReadable} from "src/composables/datetimeUtils";
+import {useQuasar} from "quasar";
+import {textEllipsis} from "src/composables/utils";
+
+const props = defineProps({
+  flightPlan: {
+    type: Object,
+    required: true
+  },
+  plannedSpeed: {
+    type: Number,
+    required: true,
+  }
+});
+
+const columns = [
+  {
+    // name: 'from',
+    label: 'Z',
+    align: "left",
+    field: 'from'
+  },
+  {
+    label: 'Do',
+    align: "left",
+    field: 'to'
+  },
+  {
+    align: 'right',
+    label: 'Kurz',
+    field: 'bearing',
+  },
+  {
+    align: 'right',
+    label: 'Vzdálenost',
+    field: 'distance',
+  },
+  {
+    align: 'right',
+    label: 'Čas',
+    field: 'duration',
+  },
+];
+
+const {getDuration, getTotalTime, getTotalDistance} = useFlightPlanCalculations();
+
+const data = computed(() => props.flightPlan.track.map((item) => ({
+  from: textEllipsis(item.from.name, 30),
+  to: textEllipsis(item.to.name, 30),
+  distance: `${item.distance} km`,
+  bearing: `${item.bearing} °`,
+  duration: minutesToHumanReadable(getDuration(item.distance, props.plannedSpeed)),
+})));
+
+const {screen} = useQuasar();
+</script>
+
+<template>
+  <q-table
+    :grid="screen.xs"
+    :dense="screen.lt.md"
+    flat bordered
+    hide-bottom
+    :title="flightPlan.name"
+    :rows="data"
+    :columns="columns"
+    :rows-per-page-options="[0]"
+  >
+    <template #bottom-row="{cols}">
+      <tr class="summary">
+        <td v-for="col in cols" :key="col.field" :class="{'text-right': col.align === 'right'}">
+          <template v-if="col.field === 'duration'">
+            {{ minutesToHumanReadable(getTotalTime(flightPlan, plannedSpeed)) }}
+          </template>
+          <template v-else-if="col.field === 'distance'">
+            {{ getTotalDistance(flightPlan) }} km
+          </template>
+        </td>
+      </tr>
+    </template>
+  </q-table>
+</template>
+
+
+<style scoped>
+.summary {
+  font-weight: bold;
+}
+</style>

src/components/flightPlans/FlightPlanSideControls.vue

@@ -1,19 +1,14 @@
 <script setup>
 import {computed, ref, watch} from "vue";
 import {minutesToHumanReadable} from "src/composables/datetimeUtils";
-import {useFlightPlanUtils} from "src/composables/flightPlan";
+import {useFlightPlanCalculations, useFlightPlanUtils} from "src/composables/flightPlan";
 
 const props = defineProps({
   flightPlan: {
     type: Object,
     required: true
   },
-  plannedSpeed: {
-    type: Number,
-    required: false,
-    default: 150
-  },
-  isFullscreen: {
+   isFullscreen: {
     type: Boolean,
     default: false,
   },
@@ -25,19 +20,8 @@ const props = defineProps({
 
 const emits = defineEmits(["open", "change-insert-position", "fullscren-toggle"])
 
-
-const getDuration = (distance, speed) => Math.round(distance / speed * 60)
-
-const totalDistance = computed(() => {
-  if (!props.flightPlan.track.length) return null;
-
-  return Math.round(props.flightPlan.track.map(t => t.distance).reduce((a, b) => a + b));
-});
-const totalTime = computed(() => {
-  if (!props.flightPlan.track.length) return null;
-
-  return props.flightPlan.track.map(t => getDuration(t.distance, props.plannedSpeed)).reduce((a, b) => a + b)
-});
+const {getDuration, getTotalDistance, getTotalTime} = useFlightPlanCalculations();
+const totalDistance = computed(() => getTotalDistance(props.flightPlan));
 
 </script>
 
@@ -73,13 +57,15 @@ const totalTime = computed(() => {
             <q-item-label caption class="q-py-sm" v-if="segment.distance">
               {{ segment.bearing }}°,
               {{ segment.distance }} km,
-              {{ minutesToHumanReadable(getDuration(segment.distance, props.plannedSpeed)) }}
+              {{ minutesToHumanReadable(getDuration(segment.distance, props.flightPlan.plannedSpeed)) }}
             </q-item-label>
             <q-item-label>
               <q-btn
                 @click="emits('change-insert-position', i+1)"
                 icon="add"
-                size="sm"
+                size="xs"
+                :round="insertPosition !== i+1"
+                outline
                 class="q-ml-lg q-mb-sm"
                 :color="insertPosition === i+1 ? 'primary' : 'grey'"
               >
@@ -123,7 +109,7 @@ const totalTime = computed(() => {
         <q-item-section>
           Celková vzdálenost: {{ totalDistance }} km
           <br>
-          Plánovaná doba letu: {{ minutesToHumanReadable(totalTime) }}
+          Plánovaná doba letu: {{ minutesToHumanReadable(getTotalTime(props.flightPlan, props.flightPlan.plannedSpeed)) }}
         </q-item-section>
       </q-item>
     </template>