149 lines
4.1 KiB
Vue
149 lines
4.1 KiB
Vue
<script setup>
|
|
import {computed, onMounted, reactive, ref, watch} from "vue";
|
|
import FormWrapper from "components/FormWrapper.vue";
|
|
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: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
airports: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
flight: {
|
|
type: Object,
|
|
required: false
|
|
}
|
|
}
|
|
)
|
|
|
|
const formData = reactive({
|
|
aircraft: null,
|
|
takeoffAirport: null,
|
|
landingAirport: null,
|
|
takeoffDatetime: null,
|
|
landingDatetime: null,
|
|
landings: 1,
|
|
isPublic: false,
|
|
name: "",
|
|
description: "",
|
|
});
|
|
|
|
const rules = {
|
|
aircraft: [isRequired],
|
|
takeoffDatetime: [isRequired],
|
|
takeoffAirport: [isRequired],
|
|
landingDatetime: [isRequired],
|
|
landingAirport: [isRequired],
|
|
};
|
|
watch(() => props.flight, (newVal) => {
|
|
if (newVal) {
|
|
setDefaultData(formData, newVal);
|
|
formData.aircraft = {id: newVal.aircraft.id, name: newVal.aircraft.callSign};
|
|
formData.takeoffAirport = {id: newVal.takeoffAirport.id, name: newVal.takeoffAirport.name}
|
|
formData.landingAirport = {id: newVal.landingAirport.id, name: newVal.landingAirport.name}
|
|
}
|
|
}, {immediate: true});
|
|
|
|
const aircrafts = computed(() => {
|
|
return props.aircrafts.map(a => ({id: a.id, name: a.callSign}));
|
|
});
|
|
|
|
watch(() => formData.takeoffDatetime, () => {
|
|
if (!formData.landingDatetime) {
|
|
formData.landingDatetime = structuredClone(formData.takeoffDatetime);
|
|
formData.landingDatetime.setTime(formData.landingDatetime.getTime() + 3600 * 1000);
|
|
}
|
|
});
|
|
watch(() => formData.takeoffAirport, () => {
|
|
if (!formData.landingAirport) {
|
|
formData.landingAirport = {...formData.takeoffAirport};
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<FormWrapper v-model="formData">
|
|
<div class="row">
|
|
<div class="col">
|
|
<q-card class="q-mx-md q-my-md">
|
|
<q-card-section>
|
|
<div class="text-h6">Vyber letadlo</div>
|
|
</q-card-section>
|
|
|
|
<q-card-section>
|
|
<ComboboxInput
|
|
:rules="rules.aircraft"
|
|
v-bind="commonProps"
|
|
:options="aircrafts"
|
|
v-model="formData.aircraft"
|
|
label="Letadlo"
|
|
/>
|
|
</q-card-section>
|
|
</q-card>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col col-12 col-md-6">
|
|
<q-card class="q-mx-md q-my-md">
|
|
<q-card-section>
|
|
<div class="text-h6">Vzlet</div>
|
|
</q-card-section>
|
|
<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"
|
|
:enable-new-values="false"
|
|
/>
|
|
</q-card-section>
|
|
</q-card>
|
|
</div>
|
|
|
|
<div class="col col-12 col-md-6">
|
|
|
|
<q-card class="q-mx-md q-my-md">
|
|
<q-card-section>
|
|
<div class="text-h6">Přistání</div>
|
|
</q-card-section>
|
|
<q-card-section>
|
|
<DatetimePicker
|
|
v-model="formData.landingDatetime"
|
|
:min-date="formData.takeoffDatetime"
|
|
:rules="rules.landingDatetime"
|
|
label="Datum a čas přistání"
|
|
v-bind="commonProps"
|
|
/>
|
|
|
|
<ComboboxInput
|
|
:options="airports"
|
|
v-model="formData.landingAirport"
|
|
label="Letiště přistání"
|
|
v-bind="commonProps"
|
|
:rules="rules.landingAirport"
|
|
:enable-new-values="false"
|
|
/>
|
|
</q-card-section>
|
|
</q-card>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</FormWrapper>
|
|
</template>
|