Prace na sprave letu
This commit is contained in:
Michal Kváček
@@ -0,0 +1,3 @@
|
||||
<template>
|
||||
skeleton
|
||||
</template>
|
||||
@@ -2,7 +2,7 @@
|
||||
import LocationInput from "components/inputs/LocationInput.vue";
|
||||
import TabsStepper from "components/TabsStepper.vue";
|
||||
import FormWrapper from "components/FormWrapper.vue";
|
||||
import {computed, reactive, ref} from "vue";
|
||||
import {computed, reactive, ref, watch} from "vue";
|
||||
import {isRequired} from "src/composables/form/rules";
|
||||
import DatetimePicker from "components/inputs/DatetimePicker.vue";
|
||||
|
||||
@@ -23,18 +23,20 @@ const props = defineProps({
|
||||
)
|
||||
|
||||
const formData = reactive({
|
||||
aircraftId: null,
|
||||
takeoffAirportId: null,
|
||||
landingAirportId: null,
|
||||
takeoffDatetime: null,
|
||||
landingDatetime: null,
|
||||
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,
|
||||
// flightDurationMinutes: 0,
|
||||
durationTotal: null,
|
||||
landings: 1,
|
||||
|
||||
name: "",
|
||||
@@ -46,7 +48,16 @@ const rules = {
|
||||
landingAirport: [],
|
||||
}
|
||||
|
||||
const formSteps = ["aircraft", "basic", "copilot", "track", "photos", "notes"]
|
||||
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 (
|
||||
@@ -59,119 +70,144 @@ const basicInfoFilled = computed(() => {
|
||||
<template>
|
||||
|
||||
<FormWrapper v-model="formData">
|
||||
{{ formData }}
|
||||
<template #default>
|
||||
|
||||
<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="aircraft" icon="flight" label="Aircraft"/>
|
||||
<q-tab name="basic" icon="flight_takeoff" label="Basic"/>
|
||||
<q-tab name="copilot" icon="person_add" label="Copilot"/>
|
||||
<q-tab name="track" icon="route" label="Route"/>
|
||||
<q-tab name="photos" icon="add_a_photo" label="Photos"/>
|
||||
<q-tab name="notes" icon="edit_note" label="Notes"/>
|
||||
</q-tabs>
|
||||
<pre>{{ formData }}</pre>
|
||||
|
||||
<q-tab-panels v-model="formStep" animated>
|
||||
<q-tab-panel name="aircraft">
|
||||
<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>
|
||||
<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-select>
|
||||
</q-tab-panel>
|
||||
|
||||
<TabsStepper v-model="formStep" next-step="basic"/>
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="basic">
|
||||
<!-- <q-input type="date" v-model="formData.date" label="Date"/>-->
|
||||
<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}]"/>
|
||||
|
||||
<DatetimePicker v-model="formData.takeoffDatetime" label="Datum a čas vzletu" />
|
||||
<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>
|
||||
|
||||
<LocationInput label="Take-off location" :rules="rules.takeoffAirport" :locations="airports" v-model="formData.takeoffAirportId" prepend-icon="flight_takeoff"/>
|
||||
<LocationInput label="Landing location" :rules="rules.landingAirport" :locations="airports" v-model="formData.landingAirportId" prepend-icon="flight_land"/>
|
||||
<q-input type="datetime-local" v-model="formData.landingDatetime" label="Landing date & time"/>
|
||||
<q-input v-model="formData.landings" label="Landings" type="number" min="1"/>
|
||||
<q-input v-model="formData.flightDurationMinutes" min=0 label="Flight duration (minutes)" type="number"/>
|
||||
<TabsStepper v-model="formStep" previous-step="basic" next-step="track"/>
|
||||
</q-tab-panel>
|
||||
|
||||
<TabsStepper v-model="formStep" previous-step="aircraft" 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-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"
|
||||
/>
|
||||
|
||||
<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>
|
||||
|
||||
<TabsStepper v-model="formStep" previous-step="basic" next-step="copilot"/>
|
||||
</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"/>
|
||||
<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>
|
||||
|
||||
<TabsStepper v-model="formStep" previous-step="track" next-step="photos"/>
|
||||
</q-tab-panel>
|
||||
|
||||
<q-tab-panel name="photos">
|
||||
<q-uploader
|
||||
label="Upload photos"
|
||||
url="http://localhost:4444/upload"
|
||||
multiple
|
||||
auto-upload
|
||||
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>
|
||||
|
||||
<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>
|
||||
</q-page-sticky>
|
||||
</template>
|
||||
</FormWrapper>
|
||||
</template>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import {minutesToHumanReadable} from "src/composables/timeUtils";
|
||||
import {formatDate, minutesToHumanReadable} from "src/composables/datetimeUtils";
|
||||
import {computed} from "vue";
|
||||
import {useQuasar} from "quasar";
|
||||
|
||||
@@ -47,10 +47,10 @@ const totalFlightTime = computed(() => {
|
||||
{{ flight.takeoffAirport.name }} - {{ flight.landingAirport.name }}
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="text-subtitle2">{{ minutesToHumanReadable(flight.flightDurationMinutes) }}</div>
|
||||
<div class="text-subtitle2">{{ minutesToHumanReadable(flight.durationMinCalculated) }}</div>
|
||||
<div class="text-secondary">
|
||||
<q-icon name="today"/>
|
||||
{{ flight.date }}
|
||||
{{ formatDate(flight.takeoffDatetime) }}
|
||||
</div>
|
||||
<div class="text-secondary">
|
||||
<q-icon name="plane"/>
|
||||
|
||||
Reference in New Issue
Block a user