Prace na sprave letu

src/components/FormWrapper.vue

@@ -1,19 +1,20 @@
 <script setup>
 
 import {isRequestPending} from "src/composables/form/props";
+import {useSlots} from "vue";
 
 const props = defineProps({
   modelValue: {
     type: Object,
     required: true
   },
-
   resetAfterSubmit: {
     type: Boolean,
     required: false,
     default: false
   },
   isRequestPending,
+
   saveButton: {
     type: Object,
     required: false,
@@ -37,7 +38,9 @@ const saveForm = () => {
 
 <template>
   <q-form @submit.prevent="saveForm" ref="form">
-    <slot/>
+    <slot name="default"/>
+
+    <slot name="saveButton" />
 
     <q-btn type="submit" color="primary" :icon="props.saveButton.icon" :loading="props.isRequestPending">
       {{ props.saveButton.label }}

src/components/flights/FlightDetailSkeleton.vue

@@ -0,0 +1,3 @@
+<template>
+  skeleton
+</template>

src/components/flights/FlightForm.vue

@@ -2,7 +2,7 @@
 import LocationInput from "components/inputs/LocationInput.vue";
 import TabsStepper from "components/TabsStepper.vue";
 import FormWrapper from "components/FormWrapper.vue";
-import {computed, reactive, ref} from "vue";
+import {computed, reactive, ref, watch} from "vue";
 import {isRequired} from "src/composables/form/rules";
 import DatetimePicker from "components/inputs/DatetimePicker.vue";
 
@@ -23,18 +23,20 @@ const props = defineProps({
 )
 
 const formData = reactive({
-  aircraftId: null,
-  takeoffAirportId: null,
-  landingAirportId: null,
-  takeoffDatetime: null,
-  landingDatetime: null,
+  aircraftId: 43,
+  takeoffAirportId: 3,
+  landingAirportId: 3,
+  takeoffDatetime: new Date("2023-06-05T09:55:01"),
+  landingDatetime: new Date("2023-06-05T10:41:51"),
+
+  photos: [],
 
   // turnPoints: [],
   copilotId: null,
   solo: true,
   withInstructor: false,
   durationPic: 0,
-  // flightDurationMinutes: 0,
+  durationTotal: null,
   landings: 1,
 
   name: "",
@@ -46,7 +48,16 @@ const rules = {
   landingAirport: [],
 }
 
-const formSteps = ["aircraft", "basic", "copilot", "track", "photos", "notes"]
+const recalculateDuration = () => {
+  const diff = formData.landingDatetime - formData.takeoffDatetime;
+
+  formData.durationTotal = diff / 1000 / 60;
+}
+
+watch(() => formData.takeoffDatetime, () => recalculateDuration())
+watch(() => formData.landingDatetime, () => recalculateDuration())
+
+const formSteps = ["basic", "copilot", "track", "photos", "notes"]
 const formStep = ref(formSteps[0]);
 const basicInfoFilled = computed(() => {
   return (
@@ -59,119 +70,144 @@ const basicInfoFilled = computed(() => {
 <template>
 
   <FormWrapper v-model="formData">
-    {{ formData }}
+    <template #default>
 
-    <q-tabs
-      v-model="formStep"
-      outside-arrows
-      mobile-arrows
-      left-icon="chevron_left"
-      right-icon="chevron_right"
-      active-color="primary"
-      class="q-mb-lg"
-    >
-      <q-tab name="aircraft" icon="flight" label="Aircraft"/>
-      <q-tab name="basic" icon="flight_takeoff" label="Basic"/>
-      <q-tab name="copilot" icon="person_add" label="Copilot"/>
-      <q-tab name="track" icon="route" label="Route"/>
-      <q-tab name="photos" icon="add_a_photo" label="Photos"/>
-      <q-tab name="notes" icon="edit_note" label="Notes"/>
-    </q-tabs>
+      <pre>{{ formData }}</pre>
 
-    <q-tab-panels v-model="formStep" animated>
-      <q-tab-panel name="aircraft">
-        <q-select
-          v-model="formData.aircraftId"
-          option-label="name"
-          option-value="id"
-          emit-value
-          map-options
-          :rules="rules.aircraft"
-          :options="aircrafts"
-          label="Letadlo"
-        >
-          <template #prepend>
-            <q-icon name="flight"></q-icon>
+      <q-tabs
+        v-model="formStep"
+        outside-arrows
+        mobile-arrows
+        left-icon="chevron_left"
+        right-icon="chevron_right"
+        active-color="primary"
+        class="q-mb-lg"
+      >
+        <q-tab name="basic" icon="flight_takeoff" label="Základní informace"/>
+        <q-tab name="copilot" icon="person_add" label="Spolucestující"/>
+        <q-tab name="track" icon="route" label="Trasa"/>
+        <q-tab name="photos" icon="add_a_photo" label="Fotky"/>
+        <q-tab name="notes" icon="edit_note" label="Poznámky"/>
+      </q-tabs>
+
+      <q-tab-panels v-model="formStep" animated>
+
+        <q-tab-panel name="basic">
+          <div class="row">
+            <div class="col">
+              <q-select
+                v-model="formData.aircraftId"
+                option-label="name"
+                option-value="id"
+                emit-value
+                map-options
+                :rules="rules.aircraft"
+                :options="aircrafts"
+                label="Letadlo"
+              >
+                <template #prepend>
+                  <q-icon name="flight"></q-icon>
+                </template>
+              </q-select>
+            </div>
+          </div>
+
+          <template v-if="formData.aircraftId">
+            <div class="row">
+              <div class="col">
+                <h3>Vzlet</h3>
+
+                <DatetimePicker v-model="formData.takeoffDatetime" label="Datum a čas vzletu"/>
+                <LocationInput label="Letiště vzletu" :rules="rules.takeoffAirport" :locations="airports" v-model="formData.takeoffAirportId" prepend-icon="flight_takeoff"/>
+              </div>
+            </div>
+            <div class="row" v-if="!!formData.takeoffDatetime && !!formData.takeoffAirportId">
+              <div class="col">
+
+                <h3>Přistání</h3>
+
+                <LocationInput label="Letiště přistání" :rules="rules.landingAirport" :locations="airports" v-model="formData.landingAirportId" prepend-icon="flight_land"/>
+                <DatetimePicker v-model="formData.landingDatetime" label="Datum a čas přistání"/>
+
+                <div class="row">
+                  <div class="col">
+                    <q-input v-model="formData.landings" label="Počet přistání" type="number" min="1"/>
+                  </div>
+                  <div class="col">
+                    <q-input v-model="formData.durationTotal" readonly min=0 label="Délka letu (v minutách)" type="number"/>
+                  </div>
+                </div>
+
+              </div>
+            </div>
+
+            <TabsStepper v-model="formStep" next-step="track" v-if="formData.landingAirportId"/>
           </template>
-        </q-select>
+        </q-tab-panel>
 
-        <TabsStepper v-model="formStep" next-step="basic"/>
-      </q-tab-panel>
-      <q-tab-panel name="basic">
-        <!--        <q-input type="date" v-model="formData.date" label="Date"/>-->
+         <q-tab-panel name="copilot">
+          <q-btn-toggle spread no-caps v-model="formData.solo" toggle-color="primary" :options="[{label: 'Solo flight', value: true}, {label: 'Flight with someone', value: false}]"/>
 
-        <DatetimePicker v-model="formData.takeoffDatetime" label="Datum a čas vzletu" />
+          <div v-if="!formData.solo">
+            <q-input type="text" v-model="formData.secondPilot" label="Second pilot"/>
+            <q-checkbox v-model="formData.instructor" v-if="formData.secondPilot !== ''" label="Instructor"/>
+<!--            <q-input v-model="formData.picTime" label="PIC time"/>-->
+          </div>
 
-        <LocationInput label="Take-off location" :rules="rules.takeoffAirport" :locations="airports" v-model="formData.takeoffAirportId" prepend-icon="flight_takeoff"/>
-        <LocationInput label="Landing location" :rules="rules.landingAirport" :locations="airports" v-model="formData.landingAirportId" prepend-icon="flight_land"/>
-        <q-input type="datetime-local" v-model="formData.landingDatetime" label="Landing date &amp; time"/>
-        <q-input v-model="formData.landings" label="Landings" type="number" min="1"/>
-        <q-input v-model="formData.flightDurationMinutes" min=0 label="Flight duration (minutes)" type="number"/>
+          <TabsStepper v-model="formStep" previous-step="basic" next-step="track"/>
+        </q-tab-panel>
 
-        <TabsStepper v-model="formStep" previous-step="aircraft" next-step="track"/>
-      </q-tab-panel>
+        <q-tab-panel name="track">
+          <!--        <template v-for="i in turnPointsCount" :key="`${i}-${turnPointsCount}`">-->
+          <!--          <LocationInput label="Turn point" :locations="locations" v-model="formData.turnPoints[i-1]">-->
+          <!--            <template #append v-if="i > 1">-->
+          <!--              <q-btn @click="removeTurnPoint(i - 1)">-</q-btn>-->
+          <!--            </template>-->
+          <!--          </LocationInput>-->
+          <!--        </template>-->
+          <!--        <q-btn @click="turnPointsCount++">-->
+          <!--          Add turn point-->
+          <!--        </q-btn>-->
 
-      <q-tab-panel name="track">
-        <!--        <template v-for="i in turnPointsCount" :key="`${i}-${turnPointsCount}`">-->
-        <!--          <LocationInput label="Turn point" :locations="locations" v-model="formData.turnPoints[i-1]">-->
-        <!--            <template #append v-if="i > 1">-->
-        <!--              <q-btn @click="removeTurnPoint(i - 1)">-</q-btn>-->
-        <!--            </template>-->
-        <!--          </LocationInput>-->
-        <!--        </template>-->
-        <!--        <q-btn @click="turnPointsCount++">-->
-        <!--          Add turn point-->
-        <!--        </q-btn>-->
+          <q-uploader
+            label="Upload GPX track"
+            url="http://localhost:4444/upload"
+            class="q-mx-sm"
+            style="width: 100%"
+            auto-upload
+            color="secondary"
+          />
 
-        <q-uploader
-          label="Upload GPX track"
-          url="http://localhost:4444/upload"
-          class="q-mx-sm"
-          style="width: 100%"
-          auto-upload
-          color="secondary"
-        />
+          <TabsStepper v-model="formStep" previous-step="copilot" next-step="photos"/>
+        </q-tab-panel>
 
-        <TabsStepper v-model="formStep" previous-step="basic" next-step="copilot"/>
-      </q-tab-panel>
 
-      <q-tab-panel name="copilot">
-        <q-btn-toggle spread no-caps v-model="formData.solo" toggle-color="primary" :options="[{label: 'Solo flight', value: true}, {label: 'Flight with someone', value: false}]"/>
 
-        <div v-if="!formData.solo">
-          <q-input type="text" v-model="formData.secondPilot" label="Second pilot"/>
-          <q-checkbox v-model="formData.instructor" v-if="formData.secondPilot !== ''" label="Instructor"/>
-          <q-input v-model="formData.picTime" label="PIC time"/>
+        <q-tab-panel name="photos">
+          <q-file
+            label="Upload photos"
+            multiple
+            style="width: 100%;"
+            color="secondary"
+          />
+
+          <TabsStepper v-model="formStep" previous-step="copilot" next-step="notes"/>
+        </q-tab-panel>
+
+        <q-tab-panel name="notes">
+          <q-input type="text" v-model="formData.name" label="Nazev"/>
+          <q-editor v-model="formData.description" height="60vh" label="Poznámky"/>
+
+          <TabsStepper v-model="formStep" previous-step="photos"/>
+        </q-tab-panel>
+      </q-tab-panels>
+    </template>
+    <template #saveButton>
+      <q-page-sticky expand position="bottom" :offset="[10, 10]" v-if="basicInfoFilled">
+        <div>
+          <q-btn type="submit" size="lg" class="full-width" color="primary" icon="save" label="Save flight"/>
         </div>
-
-        <TabsStepper v-model="formStep" previous-step="track" next-step="photos"/>
-      </q-tab-panel>
-
-      <q-tab-panel name="photos">
-        <q-uploader
-          label="Upload photos"
-          url="http://localhost:4444/upload"
-          multiple
-          auto-upload
-          style="width: 100%;"
-          color="secondary"
-        />
-
-        <TabsStepper v-model="formStep" previous-step="copilot" next-step="notes"/>
-      </q-tab-panel>
-
-      <q-tab-panel name="notes">
-        <q-input type="text" v-model="formData.name" label="Nazev" />
-        <q-editor v-model="formData.description" height="60vh" label="Poznámky"/>
-
-        <TabsStepper v-model="formStep" previous-step="photos"/>
-      </q-tab-panel>
-    </q-tab-panels>
-
-    <q-page-sticky expand position="bottom" :offset="[10, 10]" v-if="basicInfoFilled">
-      <div>
-        <q-btn type="submit" size="lg" class="full-width" color="primary" icon="save" label="Save flight"/>
-      </div>
-    </q-page-sticky>
+      </q-page-sticky>
+    </template>
   </FormWrapper>
 </template>

src/components/flights/FlightsList.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {minutesToHumanReadable} from "src/composables/timeUtils";
+import {formatDate, minutesToHumanReadable} from "src/composables/datetimeUtils";
 import {computed} from "vue";
 import {useQuasar} from "quasar";
 
@@ -47,10 +47,10 @@ const totalFlightTime = computed(() => {
               {{ flight.takeoffAirport.name }} - {{ flight.landingAirport.name }}
             </router-link>
           </div>
-          <div class="text-subtitle2">{{ minutesToHumanReadable(flight.flightDurationMinutes) }}</div>
+          <div class="text-subtitle2">{{ minutesToHumanReadable(flight.durationMinCalculated) }}</div>
           <div class="text-secondary">
             <q-icon name="today"/>
-            {{ flight.date }}
+            {{ formatDate(flight.takeoffDatetime) }}
           </div>
           <div class="text-secondary">
             <q-icon name="plane"/>

src/components/inputs/DatetimePicker.vue

@@ -1,24 +1,73 @@
 <script setup>
-import {onMounted, ref, watch} from "vue";
+import {computed, onMounted, ref, watch} from "vue";
 
 const props = defineProps({
   modelValue: {
-    type: String,
-    required: true
+    type: Date,
+  },
+  dateMask: {
+    type: String, Boolean,
+    required: false,
+    default: "YYYY-MM-DD"
+  },
+  timeMask: {
+    type: String, Boolean,
+    required: false,
+    default: "HH:mm"
   }
 })
-const emit = defineEmits(['update:modelValue']);
 
-let model = ref("");
+let dateModel = ref("");
+let timeModel = ref("");
 onMounted(() => {
-  model.value = props.modelValue;
+  let date = "";
+  let time = "";
+
+  if (props.modelValue) {
+
+    date = props.dateMask.replace("YYYY", props.modelValue.getFullYear())
+      .replace("MM", ('0' + props.modelValue.getMonth()).slice(-2))
+      .replace("DD", ('0' + props.modelValue.getDate()).slice(-2));
+
+    time = props.timeMask.replace("HH", ('0' + props.modelValue.getHours()).slice(-2))
+      .replace("mm", ('0' + props.modelValue.getMinutes()).slice(-2))
+  }
+
+  if (time === '') {
+    time = "00:00";
+  }
+
+  dateModel.value = date;
+  timeModel.value = time;
 });
 
-watch(model, (newVal) => {
-  emit("update:modelValue", newVal);
-})
+const model = computed(() => dateModel.value + " " + timeModel.value);
+
+const emit = defineEmits(['update:modelValue']);
+const emitModelUpdate = () => {
+  const now = new Date();
+  const val = new Date(model.value);
+  val.setHours(val.getHours() + now.getTimezoneOffset());
+  emit("update:modelValue", val);
+}
+watch([dateModel, timeModel], emitModelUpdate)
 </script>
 
 <template>
-          <q-input type="datetime-local" v-model="model" v-bind="$attrs"/>
+  <q-input v-model="model" readonly>
+    <template #append>
+      <q-icon name="event">
+        <q-popup-proxy cover>
+          <div class="row">
+            <div class="col" v-if="dateMask">
+              <q-date v-model="dateModel" :mask="dateMask"/>
+            </div>
+            <div class="col" v-if="timeMask">
+              <q-time v-model="timeModel" format24h :mask="timeMask"/>
+            </div>
+          </div>
+        </q-popup-proxy>
+      </q-icon>
+    </template>
+  </q-input>
 </template>

src/components/inputs/LocationInput.vue

@@ -39,8 +39,6 @@ watch(selectedLocationModel, (newVal) => {
   // TODO: rozdelit emit na dva modely - jeden na emit existujici lokality, druhy na emit nove vytvarene
   if (!newVal) return;
 
-  console.log(newVal);
-
   let value, eventName;
   if (newVal instanceof String) {
     eventName = "update:modelValue";