Homepage, verejna cast, vetsi sada uprav a oprav

src/components/flights/FlightBasicInfo.vue

@@ -7,6 +7,11 @@ const props = defineProps({
   flight: {
     type: Object,
     required: true
+  },
+  showCopilots: {
+    type: Boolean,
+    required: false,
+    default: false
   }
 })
 </script>
@@ -70,16 +75,20 @@ const props = defineProps({
         {{ minutesToHumanReadable(flight.durationMinCalculated) }}
       </q-item-section>
     </q-item>
-    <q-item v-if="flight.copilot">
-      <q-item-section avatar>
-        <q-icon name="people"/>
-      </q-item-section>
-      <q-item-section>
-        Link jen pro prihlasene!
-        <router-link :to="{name: 'copilotDetail', params: {id: flight.copilot.id}}">
-          {{ flight.copilot.name }}
-        </router-link>
-      </q-item-section>
+    <q-item v-if="flight.copilots?.length > 0">
+      <q-list>
+        <q-item v-for="copilot in flight.copilots" :key="copilot.id">
+          <q-item-section avatar>
+            <q-icon name="people"/>
+          </q-item-section>
+          <q-item-section>
+            <router-link :to="{name: 'copilotDetail', params: {id: copilot.id}}">
+              {{ copilot.name }}
+            </router-link>
+          </q-item-section>
+        </q-item>
+      </q-list>
     </q-item>
+
   </q-list>
 </template>

src/components/flights/FlightDetailSkeleton.vue

@@ -1,3 +1,37 @@
+<script setup>
+import {randomInt} from "src/composables/random";
+import ListItemSkeleton from "components/ListItemSkeleton.vue";
+</script>
+
 <template>
-  skeleton
+  <q-card class="flight-detail-card">
+    <q-skeleton animation="fade" height="400px" square/>
+
+    <q-card-section>
+      <q-list bordered separator>
+
+        <ListItemSkeleton/>
+        <ListItemSkeleton/>
+
+        <q-item>
+          <q-list>
+            <ListItemSkeleton v-for="i in randomInt(2, 5)" :key="i"/>
+          </q-list>
+        </q-item>
+
+        <ListItemSkeleton/>
+        <ListItemSkeleton/>
+
+      </q-list>
+
+      <article class="q-my-lg">
+      <q-skeleton
+        v-for="i in randomInt(5,8)" :key="i"
+        type="text" :width="randomInt(90, 100)+'%'"
+      />
+        </article>
+
+      <q-skeleton height="400px" square class="q-mt-lg"/>
+    </q-card-section>
+  </q-card>
 </template>

src/components/flights/form/FlightFormCopilot.vue

@@ -1,8 +1,8 @@
 <script setup>
 import {onMounted, reactive, ref, watch} from "vue";
 import FormWrapper from "components/FormWrapper.vue";
-import {setDefaultData} from "src/composables/form/formHandling";
 import ComboboxInput from "components/inputs/ComboboxInput.vue";
+import {commonProps} from "src/composables/inputs";
 
 const props = defineProps({
   flight: {
@@ -16,28 +16,27 @@ const props = defineProps({
 });
 
 const formData = reactive({
-  copilot: null,
+  copilots: [],
 })
 
-const solo = ref(true);
+const solo = ref(false);
 watch(() => solo.value, (newVal) => {
   if (!newVal) {
-    formData.copilot = null;
+    formData.copilots = [];
   }
 });
 
-onMounted(() => {
-  if (props.flight) {
-    setDefaultData(formData, props.flight);
-    solo.value = !formData.copilot;
-  }
-})
 
+watch(() => props.flight, (newVal) => {
+  if (newVal) {
+    formData.copilots = newVal.copilots.map(copilot => ({id: copilot.id, name: copilot.name}));
+    solo.value = formData.copilots.length === 0;
+  }
+}, {deep: true, immediate: true});
 </script>
 
 <template>
   <FormWrapper v-model="formData">
-
     <q-btn-toggle
       spread
       no-caps
@@ -48,14 +47,13 @@ onMounted(() => {
 
     <div v-if="!solo">
       <ComboboxInput
-        class="q-my-lg"
-        outlined
-        standout
+        v-for="i in flight.aircraft.seats - 1"
+        :key="i"
+        v-bind="commonProps"
         :options="copilots"
-        v-model="formData.copilot"
-        :key="formData.copilot"
+        v-model="formData.copilots[i-1]"
         :clearable="true"
-        label="Druhy pilot"
+        :label="i === 1 ? 'Kopilot' : 'Pasažér'"
       />
     </div>