Verejna cast, hezci 404ka, refaktoring
This commit is contained in:
@@ -21,6 +21,7 @@ const props = defineProps({
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
const formData = reactive({
|
||||
aircraft: null,
|
||||
takeoffAirport: null,
|
||||
@@ -28,89 +29,107 @@ const formData = reactive({
|
||||
takeoffDatetime: null,
|
||||
landingDatetime: null,
|
||||
landings: 1,
|
||||
isPublic: false,
|
||||
name: "",
|
||||
description: "",
|
||||
})
|
||||
|
||||
const recalculateDuration = (data) => {
|
||||
const diff = data.landingDatetime - data.takeoffDatetime;
|
||||
data.durationTotal = diff / 1000 / 60;
|
||||
}
|
||||
|
||||
watch(() => [formData.takeoffDatetime, formData.landingDatetime], () => recalculateDuration(formData))
|
||||
});
|
||||
|
||||
const rules = {};
|
||||
const isMounted = ref(false);
|
||||
// tohle je blby ohack kvuli tomu, ze DatetimeInput se renderuje jeste pred mounted a do props nedostane hodnotu
|
||||
// modelu. A neumi se s tim smirit...
|
||||
onMounted(() => {
|
||||
if (props.flight) {
|
||||
setDefaultData(formData, props.flight);
|
||||
formData.aircraft = {id: formData.aircraft.id, name: formData.aircraft.callSign};
|
||||
formData.takeoffAirport = {id: formData.takeoffAirport.id, name: formData.takeoffAirport.name}
|
||||
formData.landingAirport = {id: formData.landingAirport.id, name: formData.landingAirport.name}
|
||||
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}
|
||||
}
|
||||
isMounted.value = true;
|
||||
});
|
||||
}, {immediate: true});
|
||||
|
||||
const aircrafts = computed(() => {
|
||||
return props.aircrafts.map(a => ({id: a.id, name: a.callSign}));
|
||||
});
|
||||
|
||||
watch(() => formData.takeoffDatetime, () => {
|
||||
if (!formData.landingDatetime) {
|
||||
formData.landingDatetime = formData.takeoffDatetime;
|
||||
}
|
||||
});
|
||||
watch(() => formData.takeoffAirport, () => {
|
||||
if (!formData.landingAirport) {
|
||||
formData.landingAirport = {...formData.takeoffAirport};
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FormWrapper v-model="formData" v-if="isMounted">
|
||||
<FormWrapper v-model="formData">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<ComboboxInput
|
||||
v-bind="commonProps"
|
||||
:options="aircrafts"
|
||||
v-model="formData.aircraft"
|
||||
:key="formData.aircraft"
|
||||
label="Letadlo"
|
||||
/>
|
||||
<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
|
||||
v-bind="commonProps"
|
||||
:options="aircrafts"
|
||||
v-model="formData.aircraft"
|
||||
:key="formData.aircraft"
|
||||
label="Letadlo"
|
||||
/>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col-12 col-md-6">
|
||||
<h3>Vzlet</h3>
|
||||
<DatetimePicker
|
||||
v-model="formData.takeoffDatetime"
|
||||
label="Datum a čas vzletu: "
|
||||
v-bind="commonProps"
|
||||
/>
|
||||
<ComboboxInput
|
||||
:options="airports"
|
||||
v-model="formData.takeoffAirport"
|
||||
label="Letiště vzletu"
|
||||
v-bind="commonProps"
|
||||
:enable-new-values="false"
|
||||
/>
|
||||
<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"
|
||||
label="Datum a čas vzletu: "
|
||||
v-bind="commonProps"
|
||||
/>
|
||||
|
||||
<ComboboxInput
|
||||
:options="airports"
|
||||
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">
|
||||
|
||||
<h3>Přistání</h3>
|
||||
<DatetimePicker
|
||||
v-model="formData.landingDatetime"
|
||||
:min-date="formData.takeoffDatetime"
|
||||
label="Datum a čas přistání"
|
||||
v-bind="commonProps"
|
||||
/>
|
||||
<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"
|
||||
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"
|
||||
:enable-new-values="false"
|
||||
/>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
|
||||
|
||||
<ComboboxInput
|
||||
:options="airports"
|
||||
v-model="formData.landingAirport"
|
||||
label="Letiště přistání"
|
||||
v-bind="commonProps"
|
||||
:enable-new-values="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</FormWrapper>
|
||||
|
||||
Reference in New Issue
Block a user