Jiny pristup k vytvareni letu, polofunkcni editace letu
This commit is contained in:
Michal Kváček
@@ -0,0 +1,148 @@
|
||||
<script setup>
|
||||
import DatetimePicker from "components/inputs/DatetimePicker.vue";
|
||||
import {onMounted, reactive, ref, watch} from "vue";
|
||||
import FormWrapper from "components/FormWrapper.vue";
|
||||
import {setDefaultData} from "src/composables/form/formHandling";
|
||||
import {formatDate, parseDate} from "src/composables/datetimeUtils";
|
||||
|
||||
const props = defineProps({
|
||||
aircrafts: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
airports: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
locations: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
flight: {
|
||||
type: Object,
|
||||
required: false
|
||||
}
|
||||
}
|
||||
)
|
||||
const formData = reactive({
|
||||
aircraftId: 43,
|
||||
takeoffAirportId: null,
|
||||
landingAirportId: null,
|
||||
takeoffDatetime: null,
|
||||
landingDatetime: null,
|
||||
durationTotal: null,
|
||||
landings: 1,
|
||||
solo: true,
|
||||
|
||||
durationPic: 0,
|
||||
withInstructor: false,
|
||||
copilotId: null,
|
||||
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);
|
||||
}
|
||||
isMounted.value = true;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FormWrapper v-model="formData" v-if="isMounted">
|
||||
|
||||
{{ formData }}
|
||||
<hr>
|
||||
{{ flight }}
|
||||
<hr>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<q-select
|
||||
v-model="formData.aircraftId"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
emit-value
|
||||
map-options
|
||||
:rules="rules.aircraft"
|
||||
:options="aircrafts"
|
||||
label="Letadlo"
|
||||
>
|
||||
<template #prepend>
|
||||
<q-icon name="flight"></q-icon>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-if="formData.aircraftId">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h3>Vzlet</h3>
|
||||
|
||||
<DatetimePicker v-model="formData.takeoffDatetime" label="Datum a čas vzletu"/>
|
||||
|
||||
<q-select
|
||||
v-model="formData.takeoffAirportId"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
clearable
|
||||
:options="airports"
|
||||
label="Letiště vzletu">
|
||||
<template #prepend>
|
||||
<q-icon name="flight_takeoff"/>
|
||||
</template>
|
||||
</q-select>
|
||||
|
||||
<q-checkbox v-model="formData.solo" label="Solo?"/>
|
||||
</div>
|
||||
<div class="col" data-if="!!formData.takeoffDatetime && !!formData.takeoffAirportId">
|
||||
|
||||
<h3>Přistání</h3>
|
||||
|
||||
<DatetimePicker v-model="formData.landingDatetime" label="Datum a čas přistání"/>
|
||||
|
||||
<q-select
|
||||
v-model="formData.landingAirportId"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
clearable
|
||||
:options="airports"
|
||||
label="Letiště přistání">
|
||||
<template #append>
|
||||
<q-icon name="flight_land"/>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" v-if="formData.landingAirportId">
|
||||
<div class="col">
|
||||
<q-input v-model="formData.landings" label="Počet přistání" type="number" min="1"/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-input v-model="formData.durationTotal" readonly min=0 label="Délka letu (v minutách)" type="number"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- <TabsStepper v-model="formStep" next-step="track" v-if="formData.landingAirportId"/>-->
|
||||
</template>
|
||||
</FormWrapper>
|
||||
</template>
|
||||
@@ -0,0 +1,35 @@
|
||||
<script setup>
|
||||
import {reactive} from "vue";
|
||||
import FormWrapper from "components/FormWrapper.vue";
|
||||
|
||||
const props = defineProps({
|
||||
flight: {
|
||||
type: Object,
|
||||
required: false
|
||||
},
|
||||
copilots: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
const formData = reactive({
|
||||
solo: true,
|
||||
withInstructor: false,
|
||||
copilotId: null,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FormWrapper v-model="formData">
|
||||
|
||||
<q-btn-toggle spread no-caps v-model="formData.solo" toggle-color="primary" :options="[{label: 'Solo', value: true}, {label: 'S někým', value: false}]"/>
|
||||
|
||||
<div v-if="!formData.solo">
|
||||
<q-input type="text" v-model="formData.secondPilot" label="Druhý pilot"/>
|
||||
<q-checkbox v-model="formData.withInstructor" v-if="formData.secondPilot !== ''" label="Instruktor"/>
|
||||
<!-- <q-input v-model="formData.picTime" label="PIC time"/>-->
|
||||
</div>
|
||||
|
||||
</FormWrapper>
|
||||
</template>
|
||||
@@ -0,0 +1,34 @@
|
||||
<script setup>
|
||||
import {onMounted, ref} from "vue";
|
||||
import FormWrapper from "components/FormWrapper.vue";
|
||||
import {setDefaultData} from "src/composables/form/formHandling";
|
||||
import RichTextEditor from "components/inputs/RichTextEditor.vue";
|
||||
|
||||
const props = defineProps({
|
||||
flight: {
|
||||
type: Object,
|
||||
required: false
|
||||
},
|
||||
});
|
||||
|
||||
const formData = ref({
|
||||
name: "",
|
||||
description: ""
|
||||
})
|
||||
|
||||
const isMounted = ref(false);
|
||||
onMounted(() => {
|
||||
if (props.flight)
|
||||
setDefaultData(formData.value, props.flight);
|
||||
|
||||
isMounted.value = true;
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FormWrapper v-model="formData" v-if="isMounted">
|
||||
<q-input type="text" v-model="formData.name" label="Název"/>
|
||||
<RichTextEditor v-model="formData.description" label="Popis letu, poznámky, ..." />
|
||||
</FormWrapper>
|
||||
</template>
|
||||
@@ -0,0 +1,26 @@
|
||||
<script setup>
|
||||
import {formatDate, parseDate} from "src/composables/datetimeUtils";
|
||||
import FormWrapper from "components/FormWrapper.vue";
|
||||
import {reactive} from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
flight: {
|
||||
type: Object,
|
||||
required: false
|
||||
}
|
||||
}
|
||||
)
|
||||
const formData = reactive({});
|
||||
const testDate = "2023-06-09T22:00:00.000+02:00";
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FormWrapper v-model="formData">
|
||||
|
||||
<q-banner>
|
||||
Test date: {{testDate}} => {{ parseDate(testDate) }}
|
||||
|
||||
</q-banner>
|
||||
</FormWrapper>
|
||||
</template>
|
||||
@@ -0,0 +1,66 @@
|
||||
<script setup>
|
||||
import {onMounted, ref, watch} from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: String,
|
||||
disabled: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: () => []
|
||||
},
|
||||
routerEditMode: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
flightId: {
|
||||
type: Number,
|
||||
required: false,
|
||||
}
|
||||
})
|
||||
|
||||
const currentStep = ref("");
|
||||
onMounted(() => {
|
||||
currentStep.value = props.modelValue;
|
||||
})
|
||||
|
||||
const steps = [
|
||||
{name: "basic", icon: "flight_takeoff", label: "Základní informace"},
|
||||
{name: "copilot", icon: "person_add", label: "Spolucestující"},
|
||||
{name: "track", icon: "route", label: "Trasa"},
|
||||
{name: "photos", icon: "add_a_photo", label: "Fotky"},
|
||||
{name: "notes", icon: "edit_note", label: "Poznámky"},
|
||||
];
|
||||
|
||||
const emit = defineEmits(["update:modelValue"])
|
||||
watch(currentStep, (val) => emit("update:modelValue", val));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-tabs v-if="routerEditMode" active-color="primary" class="q-mb-lg">
|
||||
<q-route-tab
|
||||
v-for="step in steps"
|
||||
:key="step.name"
|
||||
:icon="step.icon"
|
||||
:label="step.label"
|
||||
replace
|
||||
:to="{name: 'flightEdit', params: {id: flightId, step: step.name}}"
|
||||
:disable="disabled.includes(step.name)"
|
||||
exact
|
||||
/>
|
||||
</q-tabs>
|
||||
|
||||
<q-tabs
|
||||
v-else
|
||||
v-model="currentStep"
|
||||
outside-arrows
|
||||
mobile-arrows
|
||||
left-icon="chevron_left"
|
||||
right-icon="chevron_right"
|
||||
active-color="primary"
|
||||
class="q-mb-lg"
|
||||
>
|
||||
|
||||
<q-tab v-for="step in steps" :key="step.name" v-bind="step" :disable="disabled.includes(step.name)"/>
|
||||
</q-tabs>
|
||||
</template>
|
||||
Reference in New Issue
Block a user