Prepracovana prace s datem, lepsi input na datetime

src/components/flights/form/FlightFormBasic.vue

@@ -3,7 +3,9 @@ import DatetimePicker from "components/inputs/DatetimePicker.vue";
 import {onMounted, reactive, ref, watch} from "vue";
 import FormWrapper from "components/FormWrapper.vue";
 import {setDefaultData} from "src/composables/form/formHandling";
-import {formatDate, parseDate} from "src/composables/datetimeUtils";
+import {formatDatetime, parseDate} from "src/composables/datetimeUtils";
+import AnotherDatetimePicker from "components/inputs/AnotherDatetimePicker.vue";
+import AirportLocationInput from "components/inputs/AirportLocationInput.vue";
 
 const props = defineProps({
     aircrafts: {
@@ -63,16 +65,16 @@ onMounted(() => {
 <template>
   <FormWrapper v-model="formData" v-if="isMounted">
 
-    {{ formData }}
-    <hr>
-    {{ flight }}
-    <hr>
+    <!--    {{ formData }}-->
+    <!--    <hr>-->
+    <!--    {{ flight }}-->
+    <!--    <hr>-->
 
     <div class="row">
       <div class="col">
         <q-select
           v-model="formData.aircraftId"
-          option-label="name"
+          option-label="callSign"
           option-value="id"
           emit-value
           map-options
@@ -89,46 +91,22 @@ onMounted(() => {
 
     <template v-if="formData.aircraftId">
       <div class="row">
-        <div class="col">
-          <h3>Vzlet</h3>
-
-          <DatetimePicker v-model="formData.takeoffDatetime" label="Datum a čas vzletu"/>
-
-          <q-select
-            v-model="formData.takeoffAirportId"
-            emit-value
-            map-options
-            option-label="name"
-            option-value="id"
-            clearable
-            :options="airports"
-            label="Letiště vzletu">
-            <template #prepend>
-              <q-icon name="flight_takeoff"/>
-            </template>
-          </q-select>
-
-          <q-checkbox v-model="formData.solo" label="Solo?"/>
+        <div class="col col-12 col-md-6">
+          <!--          <h3>Vzlet</h3>-->
+          <AnotherDatetimePicker v-model="formData.takeoffDatetime" label="Datum a čas vzletu: "/>
+          <AirportLocationInput v-model="formData.takeoffAirportId" :airports="airports" label="Letiště vzletu" takeoff/>
         </div>
-        <div class="col" data-if="!!formData.takeoffDatetime && !!formData.takeoffAirportId">
+        <div class="col col-12 col-md-6" v-if="!!formData.takeoffDatetime && !!formData.takeoffAirportId">
 
-          <h3>Přistání</h3>
+          <!--          <h3>Přistání</h3>-->
+          <AnotherDatetimePicker v-model="formData.landingDatetime" label="Datum a čas přistání"/>
+          <AirportLocationInput v-model="formData.landingAirportId" :airports="airports" label="Letiště přistání" landing/>
+        </div>
+      </div>
 
-          <DatetimePicker v-model="formData.landingDatetime" label="Datum a čas přistání"/>
-
-          <q-select
-            v-model="formData.landingAirportId"
-            emit-value
-            map-options
-            option-label="name"
-            option-value="id"
-            clearable
-            :options="airports"
-            label="Letiště přistání">
-            <template #append>
-              <q-icon name="flight_land"/>
-            </template>
-          </q-select>
+      <div class="row">
+        <div class="col">
+          <q-checkbox v-model="formData.solo" label="Solo?"/>
         </div>
       </div>
 

src/components/flights/form/FlightFormCopilot.vue

@@ -1,6 +1,7 @@
 <script setup>
-import {reactive} from "vue";
+import {onMounted, reactive} from "vue";
 import FormWrapper from "components/FormWrapper.vue";
+import {setDefaultData} from "src/composables/form/formHandling";
 
 const props = defineProps({
   flight: {
@@ -18,6 +19,12 @@ const formData = reactive({
   withInstructor: false,
   copilotId: null,
 })
+
+onMounted(() => {
+  if (props.flight) {
+    setDefaultData(formData, props.flight);
+  }
+})
 </script>
 
 <template>

src/components/flights/form/FlightFormPhotos.vue

@@ -1,5 +1,4 @@
 <script setup>
-import {formatDate, parseDate} from "src/composables/datetimeUtils";
 import FormWrapper from "components/FormWrapper.vue";
 import {reactive} from "vue";
 
@@ -10,17 +9,42 @@ const props = defineProps({
     }
   }
 )
-const formData = reactive({});
-const testDate = "2023-06-09T22:00:00.000+02:00";
+const formData = reactive({
+  photos: []
+});
+
+const deletePhoto = (id) => {
+  console.log(id);
+};
+
+const openEdit = (photo) => {
+
+};
 
 </script>
 
 <template>
-    <FormWrapper v-model="formData">
+  <FormWrapper v-model="formData">
+    <div class="row">
+      <div class="col-12 col-md-4 col-lg-3" v-for="photo in flight.photos" :key="photo.id">
+        <q-card class="q-my-sm q-mx-sm">
+          <q-img src="https://cdn.quasar.dev/img/parallax2.jpg">
+            <div class="absolute-bottom">
+              <div class="text-h6">{{ photo.name }} jmeno</div>
+              <div class="text-subtitle2">{{ photo.description }}nejaky popis</div>
+            </div>
+          </q-img>
 
-      <q-banner>
-      Test date: {{testDate}} => {{ parseDate(testDate) }}
+          <q-card-actions>
+            <q-btn flat icon="edit" color="blue" @click="openEdit(photo)"></q-btn>
+            <q-btn flat icon="delete" color="red" @click="deletePhoto(photo.id)"></q-btn>
 
-      </q-banner>
-    </FormWrapper>
+          </q-card-actions>
+        </q-card>
+      </div>
+    </div>
+
+
+    <q-file multiple v-model="formData.photos" label="Fotky"/>
+  </FormWrapper>
 </template>