poletani.cz/app
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Prepracovana prace s datem, lepsi input na datetime

Browse Source
This commit is contained in:
Michal Kváček
2023-07-03 13:24:18 +02:00
parent d399e1aaf1
commit 3d88397d21
24 changed files with 414 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/flights/FlightsList.vue
+11 -5
View File
@@ -1,5 +1,5 @@
<script setup>
import {formatDate, minutesToHumanReadable} from "src/composables/datetimeUtils";
import {formatDatetime, minutesToHumanReadable} from "src/composables/datetimeUtils";
import {computed} from "vue";
import {useQuasar} from "quasar";
@@ -37,24 +37,30 @@ const totalFlightTime = computed(() => {
<q-img :src="flight.titlePhotoUrl" v-if="flight.titlePhotoUrl">
<div class="absolute-bottom text-center text-h6">
<router-link :to="{name: 'flightDetail', params:{id: flight.id}}" class="text-white">
{{ flight.takeoffAirport.name }} - {{ flight.landingAirport.name }}
{{ flight.name }}
<!-- {{ flight.takeoffAirport.name }} - {{ flight.landingAirport.name }}-->
</router-link>
</div>
</q-img>
<q-card-section>
<div class="text-h6" v-if="!flight.titlePhotoUrl">
<router-link :to="{name: 'flightDetail', params:{id: flight.id}}">
{{ flight.takeoffAirport.name }} - {{ flight.landingAirport.name }}
<template v-if="flight.name">
{{ flight.name }}
</template>
<template v-else>
{{ flight.takeoffAirport.icaoCode }} - {{ flight.landingAirport.icaoCode }}
</template>
</router-link>
</div>
<div class="text-subtitle2">{{ minutesToHumanReadable(flight.durationMinCalculated) }}</div>
<div class="text-secondary">
<q-icon name="today"/>
{{ formatDate(flight.takeoffDatetime) }}
{{ formatDatetime(flight.takeoffDatetime) }}
</div>
<div class="text-secondary">
<q-icon name="plane"/>
{{ flight.aircraft.name }}
{{ flight.aircraft.callSign }}
</div>
</q-card-section>
src/components/flights/__FlightForm.vue
-88
View File
@@ -1,88 +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";
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>
src/components/flights/form/FlightFormBasic.vue
+21 -43
View File
@@ -3,7 +3,9 @@ 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";
import {formatDatetime, parseDate} from "src/composables/datetimeUtils";
import AnotherDatetimePicker from "components/inputs/AnotherDatetimePicker.vue";
import AirportLocationInput from "components/inputs/AirportLocationInput.vue";
const props = defineProps({
aircrafts: {
@@ -63,16 +65,16 @@ onMounted(() => {
<template>
<FormWrapper v-model="formData" v-if="isMounted">
{{ formData }}
<hr>
{{ flight }}
<hr>
<!-- {{ formData }}-->
<!-- <hr>-->
<!-- {{ flight }}-->
<!-- <hr>-->
<div class="row">
<div class="col">
<q-select
v-model="formData.aircraftId"
option-label="name"
option-label="callSign"
option-value="id"
emit-value
map-options
@@ -89,46 +91,22 @@ onMounted(() => {
<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 class="col col-12 col-md-6">
<!-- <h3>Vzlet</h3>-->
<AnotherDatetimePicker v-model="formData.takeoffDatetime" label="Datum a čas vzletu: "/>
<AirportLocationInput v-model="formData.takeoffAirportId" :airports="airports" label="Letiště vzletu" takeoff/>
</div>
<div class="col" data-if="!!formData.takeoffDatetime && !!formData.takeoffAirportId">
<div class="col col-12 col-md-6" v-if="!!formData.takeoffDatetime && !!formData.takeoffAirportId">
<h3>Přistání</h3>
<!-- <h3>Přistání</h3>-->
<AnotherDatetimePicker v-model="formData.landingDatetime" label="Datum a čas přistání"/>
<AirportLocationInput v-model="formData.landingAirportId" :airports="airports" label="Letiště přistání" landing/>
</div>
</div>
<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 class="row">
<div class="col">
<q-checkbox v-model="formData.solo" label="Solo?"/>
</div>
</div>
src/components/flights/form/FlightFormCopilot.vue
+8 -1
View File
@@ -1,6 +1,7 @@
<script setup>
import {reactive} from "vue";
import {onMounted, reactive} from "vue";
import FormWrapper from "components/FormWrapper.vue";
import {setDefaultData} from "src/composables/form/formHandling";
const props = defineProps({
flight: {
@@ -18,6 +19,12 @@ const formData = reactive({
withInstructor: false,
copilotId: null,
})
onMounted(() => {
if (props.flight) {
setDefaultData(formData, props.flight);
}
})
</script>
<template>
src/components/flights/form/FlightFormPhotos.vue
+32 -8
View File
@@ -1,5 +1,4 @@
<script setup>
import {formatDate, parseDate} from "src/composables/datetimeUtils";
import FormWrapper from "components/FormWrapper.vue";
import {reactive} from "vue";
@@ -10,17 +9,42 @@ const props = defineProps({
}
}
)
const formData = reactive({});
const testDate = "2023-06-09T22:00:00.000+02:00";
const formData = reactive({
photos: []
});
const deletePhoto = (id) => {
console.log(id);
};
const openEdit = (photo) => {
};
</script>
<template>
<FormWrapper v-model="formData">
<FormWrapper v-model="formData">
<div class="row">
<div class="col-12 col-md-4 col-lg-3" v-for="photo in flight.photos" :key="photo.id">
<q-card class="q-my-sm q-mx-sm">
<q-img src="https://cdn.quasar.dev/img/parallax2.jpg">
<div class="absolute-bottom">
<div class="text-h6">{{ photo.name }} jmeno</div>
<div class="text-subtitle2">{{ photo.description }}nejaky popis</div>
</div>
</q-img>
<q-banner>
Test date: {{testDate}} => {{ parseDate(testDate) }}
<q-card-actions>
<q-btn flat icon="edit" color="blue" @click="openEdit(photo)"></q-btn>
<q-btn flat icon="delete" color="red" @click="deletePhoto(photo.id)"></q-btn>
</q-banner>
</FormWrapper>
</q-card-actions>
</q-card>
</div>
</div>
<q-file multiple v-model="formData.photos" label="Fotky"/>
</FormWrapper>
</template>