Homepage, lepsi POI

src/components/flights/FlightDetailSkeleton.vue

@@ -1,6 +1,7 @@
 <script setup>
 import {randomInt} from "src/composables/random";
-import ListItemSkeleton from "components/ListItemSkeleton.vue";
+import ListItemSkeleton from "components/basicSkeletons/ListItemSkeleton.vue";
+import BasicTextSkeleton from "components/basicSkeletons/BasicTextSkeleton.vue";
 </script>
 
 <template>
@@ -25,11 +26,8 @@ import ListItemSkeleton from "components/ListItemSkeleton.vue";
       </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>
+        <BasicTextSkeleton :lines="randomInt(5, 10)" :paragraphs="randomInt(1, 3)" />
+      </article>
 
       <q-skeleton height="400px" square class="q-mt-lg"/>
     </q-card-section>

src/components/flights/form/FlightFormBasic.vue

@@ -5,6 +5,7 @@ import {setDefaultData} from "src/composables/form/formHandling";
 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";
 
 const props = defineProps({
     aircrafts: {
@@ -34,7 +35,13 @@ const formData = reactive({
   description: "",
 });
 
-const rules = {};
+const rules = {
+  aircraft: [isRequired],
+  takeoffDatetime: [isRequired],
+  takeoffAirport: [isRequired],
+  landingDatetime: [isRequired],
+  landingAirport: [isRequired],
+};
 watch(() => props.flight, (newVal) => {
   if (newVal) {
     setDefaultData(formData, newVal);
@@ -50,7 +57,8 @@ const aircrafts = computed(() => {
 
 watch(() => formData.takeoffDatetime, () => {
   if (!formData.landingDatetime) {
-    formData.landingDatetime = formData.takeoffDatetime;
+    formData.landingDatetime = structuredClone(formData.takeoffDatetime);
+    formData.landingDatetime.setTime(formData.landingDatetime.getTime() + 3600 * 1000);
   }
 });
 watch(() => formData.takeoffAirport, () => {
@@ -71,10 +79,10 @@ watch(() => formData.takeoffAirport, () => {
 
           <q-card-section>
             <ComboboxInput
+              :rules="rules.aircraft"
               v-bind="commonProps"
               :options="aircrafts"
               v-model="formData.aircraft"
-              :key="formData.aircraft"
               label="Letadlo"
             />
           </q-card-section>
@@ -90,12 +98,14 @@ watch(() => formData.takeoffAirport, () => {
           <q-card-section>
             <DatetimePicker
               v-model="formData.takeoffDatetime"
+              :rules="rules.takeoffDatetime"
               label="Datum a čas vzletu: "
               v-bind="commonProps"
             />
 
             <ComboboxInput
               :options="airports"
+              :rules="rules.takeoffAirport"
               v-model="formData.takeoffAirport"
               label="Letiště vzletu"
               v-bind="commonProps"
@@ -115,6 +125,7 @@ watch(() => formData.takeoffAirport, () => {
             <DatetimePicker
               v-model="formData.landingDatetime"
               :min-date="formData.takeoffDatetime"
+              :rules="rules.landingDatetime"
               label="Datum a čas přistání"
               v-bind="commonProps"
             />
@@ -124,6 +135,7 @@ watch(() => formData.takeoffAirport, () => {
               v-model="formData.landingAirport"
               label="Letiště přistání"
               v-bind="commonProps"
+              :rules="rules.landingAirport"
               :enable-new-values="false"
             />
           </q-card-section>