Jiny pristup k vytvareni letu, polofunkcni editace letu
This commit is contained in:
Michal Kváček
@@ -1,213 +0,0 @@
|
||||
<script setup>
|
||||
import LocationInput from "components/inputs/LocationInput.vue";
|
||||
import TabsStepper from "components/TabsStepper.vue";
|
||||
import FormWrapper from "components/FormWrapper.vue";
|
||||
import {computed, reactive, ref, watch} from "vue";
|
||||
import {isRequired} from "src/composables/form/rules";
|
||||
import DatetimePicker from "components/inputs/DatetimePicker.vue";
|
||||
|
||||
const props = defineProps({
|
||||
aircrafts: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
airports: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
locations: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
const formData = reactive({
|
||||
aircraftId: 43,
|
||||
takeoffAirportId: 3,
|
||||
landingAirportId: 3,
|
||||
takeoffDatetime: new Date("2023-06-05T09:55:01"),
|
||||
landingDatetime: new Date("2023-06-05T10:41:51"),
|
||||
|
||||
photos: [],
|
||||
|
||||
// turnPoints: [],
|
||||
copilotId: null,
|
||||
solo: true,
|
||||
withInstructor: false,
|
||||
durationPic: 0,
|
||||
durationTotal: null,
|
||||
landings: 1,
|
||||
|
||||
name: "",
|
||||
description: ""
|
||||
})
|
||||
const rules = {
|
||||
aircraft: [isRequired],
|
||||
takeoffAirport: [],
|
||||
landingAirport: [],
|
||||
}
|
||||
|
||||
const recalculateDuration = () => {
|
||||
const diff = formData.landingDatetime - formData.takeoffDatetime;
|
||||
|
||||
formData.durationTotal = diff / 1000 / 60;
|
||||
}
|
||||
|
||||
watch(() => formData.takeoffDatetime, () => recalculateDuration())
|
||||
watch(() => formData.landingDatetime, () => recalculateDuration())
|
||||
|
||||
const formSteps = ["basic", "copilot", "track", "photos", "notes"]
|
||||
const formStep = ref(formSteps[0]);
|
||||
const basicInfoFilled = computed(() => {
|
||||
return (
|
||||
formData.aircraftId && formData.takeoffAirportId && formData.landingAirportId && formData.takeoffDatetime
|
||||
&& formData.landingDatetime
|
||||
)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<FormWrapper v-model="formData">
|
||||
<template #default>
|
||||
|
||||
<pre>{{ formData }}</pre>
|
||||
|
||||
<q-tabs
|
||||
v-model="formStep"
|
||||
outside-arrows
|
||||
mobile-arrows
|
||||
left-icon="chevron_left"
|
||||
right-icon="chevron_right"
|
||||
active-color="primary"
|
||||
class="q-mb-lg"
|
||||
>
|
||||
<q-tab name="basic" icon="flight_takeoff" label="Základní informace"/>
|
||||
<q-tab name="copilot" icon="person_add" label="Spolucestující"/>
|
||||
<q-tab name="track" icon="route" label="Trasa"/>
|
||||
<q-tab name="photos" icon="add_a_photo" label="Fotky"/>
|
||||
<q-tab name="notes" icon="edit_note" label="Poznámky"/>
|
||||
</q-tabs>
|
||||
|
||||
<q-tab-panels v-model="formStep" animated>
|
||||
|
||||
<q-tab-panel name="basic">
|
||||
<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"/>
|
||||
<LocationInput label="Letiště vzletu" :rules="rules.takeoffAirport" :locations="airports" v-model="formData.takeoffAirportId" prepend-icon="flight_takeoff"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" v-if="!!formData.takeoffDatetime && !!formData.takeoffAirportId">
|
||||
<div class="col">
|
||||
|
||||
<h3>Přistání</h3>
|
||||
|
||||
<LocationInput label="Letiště přistání" :rules="rules.landingAirport" :locations="airports" v-model="formData.landingAirportId" prepend-icon="flight_land"/>
|
||||
<DatetimePicker v-model="formData.landingDatetime" label="Datum a čas přistání"/>
|
||||
|
||||
<div class="row">
|
||||
<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>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TabsStepper v-model="formStep" next-step="track" v-if="formData.landingAirportId"/>
|
||||
</template>
|
||||
</q-tab-panel>
|
||||
|
||||
<q-tab-panel name="copilot">
|
||||
<q-btn-toggle spread no-caps v-model="formData.solo" toggle-color="primary" :options="[{label: 'Solo flight', value: true}, {label: 'Flight with someone', value: false}]"/>
|
||||
|
||||
<div v-if="!formData.solo">
|
||||
<q-input type="text" v-model="formData.secondPilot" label="Second pilot"/>
|
||||
<q-checkbox v-model="formData.instructor" v-if="formData.secondPilot !== ''" label="Instructor"/>
|
||||
<!-- <q-input v-model="formData.picTime" label="PIC time"/>-->
|
||||
</div>
|
||||
|
||||
<TabsStepper v-model="formStep" previous-step="basic" next-step="track"/>
|
||||
</q-tab-panel>
|
||||
|
||||
<q-tab-panel name="track">
|
||||
<!-- <template v-for="i in turnPointsCount" :key="`${i}-${turnPointsCount}`">-->
|
||||
<!-- <LocationInput label="Turn point" :locations="locations" v-model="formData.turnPoints[i-1]">-->
|
||||
<!-- <template #append v-if="i > 1">-->
|
||||
<!-- <q-btn @click="removeTurnPoint(i - 1)">-</q-btn>-->
|
||||
<!-- </template>-->
|
||||
<!-- </LocationInput>-->
|
||||
<!-- </template>-->
|
||||
<!-- <q-btn @click="turnPointsCount++">-->
|
||||
<!-- Add turn point-->
|
||||
<!-- </q-btn>-->
|
||||
|
||||
<q-uploader
|
||||
label="Upload GPX track"
|
||||
url="http://localhost:4444/upload"
|
||||
class="q-mx-sm"
|
||||
style="width: 100%"
|
||||
auto-upload
|
||||
color="secondary"
|
||||
/>
|
||||
|
||||
<TabsStepper v-model="formStep" previous-step="copilot" next-step="photos"/>
|
||||
</q-tab-panel>
|
||||
|
||||
|
||||
|
||||
<q-tab-panel name="photos">
|
||||
<q-file
|
||||
label="Upload photos"
|
||||
multiple
|
||||
style="width: 100%;"
|
||||
color="secondary"
|
||||
/>
|
||||
|
||||
<TabsStepper v-model="formStep" previous-step="copilot" next-step="notes"/>
|
||||
</q-tab-panel>
|
||||
|
||||
<q-tab-panel name="notes">
|
||||
<q-input type="text" v-model="formData.name" label="Nazev"/>
|
||||
<q-editor v-model="formData.description" height="60vh" label="Poznámky"/>
|
||||
|
||||
<TabsStepper v-model="formStep" previous-step="photos"/>
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
</template>
|
||||
<template #saveButton>
|
||||
<q-page-sticky expand position="bottom" :offset="[10, 10]" v-if="basicInfoFilled">
|
||||
<div>
|
||||
<q-btn type="submit" size="lg" class="full-width" color="primary" icon="save" label="Save flight"/>
|
||||
</div>
|
||||
</q-page-sticky>
|
||||
</template>
|
||||
</FormWrapper>
|
||||
</template>
|
||||
@@ -0,0 +1,88 @@
|
||||
<script setup>
|
||||
import LocationInput from "components/inputs/LocationInput.vue";
|
||||
import TabsStepper from "components/TabsStepper.vue";
|
||||
import FormWrapper from "components/FormWrapper.vue";
|
||||
import {computed, reactive, ref, watch} from "vue";
|
||||
import {isRequired} from "src/composables/form/rules";
|
||||
import DatetimePicker from "components/inputs/DatetimePicker.vue";
|
||||
import FlightFormBasic from "components/flights/form/FlightFormBasic.vue";
|
||||
|
||||
|
||||
|
||||
|
||||
const rules = {
|
||||
aircraft: [isRequired],
|
||||
takeoffAirport: [],
|
||||
landingAirport: [],
|
||||
}
|
||||
|
||||
|
||||
|
||||
const formSteps = ["basic", "copilot", "track", "photos", "notes"]
|
||||
const formStep = ref(formSteps[0]);
|
||||
const basicInfoFilled = computed(() => {
|
||||
return (
|
||||
formData.aircraftId && formData.takeoffAirportId && formData.landingAirportId && formData.takeoffDatetime
|
||||
&& formData.landingDatetime
|
||||
)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<!-- <FormWrapper v-model="formData">-->
|
||||
<!-- <template #default>-->
|
||||
|
||||
<pre>{{ formData }}</pre>
|
||||
|
||||
<q-tab-panels v-model="formStep" animated>
|
||||
|
||||
|
||||
<q-tab-panel name="track">
|
||||
<!-- <template v-for="i in turnPointsCount" :key="`${i}-${turnPointsCount}`">-->
|
||||
<!-- <LocationInput label="Turn point" :locations="locations" v-model="formData.turnPoints[i-1]">-->
|
||||
<!-- <template #append v-if="i > 1">-->
|
||||
<!-- <q-btn @click="removeTurnPoint(i - 1)">-</q-btn>-->
|
||||
<!-- </template>-->
|
||||
<!-- </LocationInput>-->
|
||||
<!-- </template>-->
|
||||
<!-- <q-btn @click="turnPointsCount++">-->
|
||||
<!-- Add turn point-->
|
||||
<!-- </q-btn>-->
|
||||
|
||||
<q-file
|
||||
label="Upload GPX track"
|
||||
class="q-mx-sm"
|
||||
style="width: 100%"
|
||||
color="secondary"
|
||||
/>
|
||||
|
||||
<TabsStepper v-model="formStep" previous-step="copilot" next-step="photos"/>
|
||||
</q-tab-panel>
|
||||
|
||||
|
||||
<q-tab-panel name="photos">
|
||||
<q-file
|
||||
label="Upload photos"
|
||||
v-model="formData.photos"
|
||||
multiple
|
||||
style="width: 100%;"
|
||||
color="secondary"
|
||||
/>
|
||||
|
||||
<TabsStepper v-model="formStep" previous-step="copilot" next-step="notes"/>
|
||||
</q-tab-panel>
|
||||
|
||||
</q-tab-panels>
|
||||
|
||||
|
||||
<!-- </template>-->
|
||||
<!-- <template #saveButton>-->
|
||||
<!-- <q-page-sticky expand position="bottom" :offset="[10, 10]" v-if="basicInfoFilled">-->
|
||||
<!-- <div>-->
|
||||
<!-- <q-btn type="submit" size="lg" class="full-width" color="primary" icon="save" label="Save flight"/>-->
|
||||
<!-- </div>-->
|
||||
<!-- </q-page-sticky>-->
|
||||
<!-- </template>-->
|
||||
<!-- </FormWrapper>-->
|
||||
</template>
|
||||
@@ -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