Upravy UI, refaktoring, davkove upravy a mazani fotek

src/components/flights/FlightDetailSkeleton.vue

@@ -16,7 +16,7 @@ import BasicTextSkeleton from "components/basicSkeletons/BasicTextSkeleton.vue";
 
         <q-item>
           <q-list>
-            <ListItemSkeleton v-for="i in randomInt(2, 5)" :key="i"/>
+            <ListItemSkeleton v-for="i in randomInt(1, 3)" :key="i"/>
           </q-list>
         </q-item>
 
@@ -26,7 +26,7 @@ import BasicTextSkeleton from "components/basicSkeletons/BasicTextSkeleton.vue";
       </q-list>
 
       <article class="q-my-lg">
-        <BasicTextSkeleton :lines="randomInt(5, 10)" :paragraphs="randomInt(1, 3)" />
+        <BasicTextSkeleton :lines="randomInt(2, 5)" :paragraphs="randomInt(1, 2)" />
       </article>
 
       <q-skeleton height="400px" square class="q-mt-lg"/>

src/components/flights/FlightEditSkeleton.vue

@@ -1,7 +1,20 @@
 <script setup>
 
+import {randomInt} from "src/composables/random";
+import BasicTextSkeleton from "components/basicSkeletons/BasicTextSkeleton.vue";
+import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
 </script>
 
 <template>
-  <em>Flight edit skeleton</em>
-</template>
+  <q-card class="flight-detail-card">
+    <q-skeleton type="rect" height="400px"/>
+
+    <q-card-section>
+      <q-skeleton type="QInput" v-for="i in 3" :key="i" />
+    </q-card-section>
+
+  </q-card>
+
+  <q-card class="flight-detail-card" flat>
+    <BasicListSkeleton :items-count-min="1" :items-count-max="4"/>
+  </q-card></template>

src/components/flights/FlightTrackMap.vue

@@ -33,7 +33,7 @@ const pointsOfInterests = computed(() => {
   }
 
   path.push({
-    label: flight.value.takeoffAirport.name,
+    label: flight.value.landingAirport.name,
     position: {
       lat: flight.value.landingAirport.gpsLatitude,
       lng: flight.value.landingAirport.gpsLongitude

src/components/flights/form/FlightFormBasic.vue

@@ -6,22 +6,23 @@ import DatetimePicker from "components/inputs/DatetimePicker.vue";
 import ComboboxInput from "components/inputs/ComboboxInput.vue";
 import {commonProps} from "src/composables/inputs";
 import {isRequired} from "src/composables/form/rules";
+import {isRequestPending} from "src/composables/form/props";
 
 const props = defineProps({
-    aircrafts: {
-      type: Array,
-      required: true
-    },
-    airports: {
-      type: Array,
-      required: true
-    },
-    flight: {
-      type: Object,
-      required: false
-    }
-  }
-)
+  aircrafts: {
+    type: Array,
+    required: true
+  },
+  airports: {
+    type: Array,
+    required: true
+  },
+  flight: {
+    type: Object,
+    required: false
+  },
+  isRequestPending,
+});
 
 const formData = reactive({
   aircraft: null,
@@ -69,7 +70,7 @@ watch(() => formData.takeoffAirport, () => {
 </script>
 
 <template>
-  <FormWrapper v-model="formData">
+  <FormWrapper v-model="formData" :is-request-pending="props.isRequestPending">
     <div class="row">
       <div class="col">
         <q-card class="q-mx-md q-my-md">
@@ -140,8 +141,6 @@ watch(() => formData.takeoffAirport, () => {
             />
           </q-card-section>
         </q-card>
-
-
       </div>
     </div>
   </FormWrapper>

src/components/flights/form/FlightFormPhotos.vue

@@ -25,6 +25,7 @@ const formData = reactive({
       icon: "upload",
       align: "left"
     }'>
+
     <q-file
       class="q-my-lg"
       outlined