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/aircrafts/AircraftForm.vue
+3 -4
View File
@@ -8,7 +8,7 @@ import {isRequired} from "src/composables/form/rules";
const formData = reactive({
id: null,
name: "",
callSign: "",
model: "",
manufacturer: "",
description: "",
@@ -22,7 +22,7 @@ const props = defineProps({
});
const rules = {
name: [
callSign: [
v => isRequired(v)
],
};
@@ -35,11 +35,10 @@ onMounted(() => {
<template>
<FormWrapper v-model="formData">
<q-input type="text" :rules="rules.name" v-model="formData.name" label="Volací značka"/>
<q-input type="text" :rules="rules.callSign" v-model="formData.callSign" label="Volací značka"/>
<q-input type="text" v-model="formData.model" label="Model"/>
<q-input type="text" v-model="formData.manufacturer" label="Výrobce"/>
<q-input type="textarea" v-model="formData.description" label="Popis" />
<q-file v-model="formData.photo" label="Avatar" />
</FormWrapper>
</template>
src/components/aircrafts/AircraftsList.vue
+1 -1
View File
@@ -24,7 +24,7 @@ const props = defineProps({
</q-item-section>
<q-item-section>
<q-item-label label>
{{ aircraft.name }}
{{ aircraft.callSign }}
</q-item-label>
<q-item-label caption>
{{ aircraft.model }}
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>
src/components/inputs/AirportLocationInput.vue
+52
View File
@@ -0,0 +1,52 @@
<script setup>
import {onMounted, ref} from "vue";
const props = defineProps({
modelValue: {
type: [Number]
},
airports: {
type: Array,
required: true
},
takeoff: {
type: Boolean,
required: false,
},
landing: {
type: Boolean,
required: false
},
});
const emit = defineEmits(['update:modelValue']);
const model = ref(null);
const emitModelValue = (val) => {
emit("update:modelValue", val);
}
onMounted(() => {
model.value = props.modelValue;
})
</script>
<template>
<q-select
v-model="model"
emit-value
map-options
option-label="name"
option-value="id"
clearable
:options="airports"
@input="emitModelValue"
>
<template #prepend v-if="takeoff">
<q-icon name="flight_takeoff"/>
</template>
<template #append v-if="landing">
<q-icon name="flight_land"/>
</template>
</q-select>
</template>
src/components/inputs/AnotherDatetimePicker.vue
+111
View File
@@ -0,0 +1,111 @@
<script setup>
import {computed, onMounted, ref} from "vue";
import {FORMAT_DATETIME_LONG, FORMAT_ISO, formatDatetime, parseDate} from "src/composables/datetimeUtils";
const props = defineProps({
modelValue: {
type: [String, Date]
},
mask: {
type: [String, Boolean],
required: false,
default: FORMAT_DATETIME_LONG
}
})
let dateModel = ref("");
let timeModel = ref("");
let originalTime, originalDate;
onMounted(() => {
let emitDefaultValue = false;
if (props.modelValue) {
let modelVal = props.modelValue;
if (typeof modelVal === 'string') {
modelVal = parseDate(props.modelValue);
emitDefaultValue = true;
}
dateModel.value = formatDatetime(modelVal, "YYYY-MM-DD");
timeModel.value = formatDatetime(modelVal, "HH:mm:ss");
}
setOriginalValues();
if (emitDefaultValue) {
emitModelUpdate();
}
});
const publicModel = computed(() => {
if (!dateModel.value) {
return "";
}
const dateObject = parseDate(model.value, FORMAT_ISO);
return formatDatetime(dateObject, props.mask);
});
const popupProxy = ref(null);
const model = computed(() => dateModel.value + "T" + timeModel.value);
const emit = defineEmits(['update:modelValue']);
const emitModelUpdate = () => {
const val = parseDate(model.value);
emit("update:modelValue", val);
popupProxy.value.hide();
}
const containsAnyOf = (needles, haystack) => {
for (const i in needles) {
if (haystack.includes(needles[i])) return true;
}
return false;
}
const showDatePicker = computed(() => containsAnyOf(["YY", "M", "D"], props.mask));
const showTimePicker = computed(() => containsAnyOf(["H", "h", "m"], props.mask));
const setOriginalValues = () => {
originalDate = dateModel.value;
originalTime = timeModel.value;
}
const cancelSelection = () => {
dateModel.value = originalDate;
timeModel.value = originalTime;
popupProxy.value.hide();
}
</script>
<template>
<q-input readonly v-model="publicModel">
<template #append>
<q-icon name="event"/>
</template>
<template #default>
<q-popup-proxy ref="popupProxy" @hide="emitModelUpdate" @show="setOriginalValues">
<div>
<div class="row">
<div class="col-12 col-md-6" v-if="showDatePicker">
<q-date square v-model="dateModel" :today-btn="true" flat mask="YYYY-MM-DD"/>
</div>
<div class="col-12 col-md-6" v-if="showTimePicker">
<q-time square v-model="timeModel" format24h flat mask="HH:mm"/>
</div>
</div>
<div class="row q-mb-sm">
<div class="col">
<q-btn color="secondary" class="q-ml-sm" @click="cancelSelection">Zrušit</q-btn>
</div>
<div class="col text-right">
<q-btn color="primary" class="q-mr-sm" @click="emitModelUpdate">Nastavit</q-btn>
</div>
</div>
</div>
</q-popup-proxy>
</template>
</q-input>
</template>