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

composables, mazani letu, skeletony

Browse Source
This commit is contained in:
Michal Kváček
2023-07-24 17:31:54 +02:00
parent 4648c30f90
commit 864db6c6a2
53 changed files with 732 additions and 273 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/BreadcrumbsNavigation.vue
+14
View File
@@ -0,0 +1,14 @@
<script setup>
const props = defineProps({
items: {
type: Array,
required: true
}
})
</script>
<template>
<q-breadcrumbs>
<q-breadcrumbs-el v-for="item in items" :key="item.label" :to="item.to"> {{ item.label }} </q-breadcrumbs-el>
</q-breadcrumbs>
</template>
src/components/aircrafts/AircraftEditSkeleton.vue
+5
View File
@@ -0,0 +1,5 @@
<script setup></script>
<template>
<em>Aircraft edit skeleton</em>
</template>
src/components/aircrafts/AircraftForm.vue
+6 -2
View File
@@ -34,11 +34,15 @@ onMounted(() => {
</script>
<template>
<FormWrapper v-model="formData">
<FormWrapper v-model="formData" :is-request-pending="isRequestPending">
<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" />
{{ props.defaultValues.photoUrl }}
<q-img :src="props.defaultValues.photoUrl" v-if="props.defaultValues.photoUrl" />
<q-file v-model="formData.photo" label="Fotografie" />
</FormWrapper>
</template>
src/components/aircrafts/AircraftsList.vue
+4
View File
@@ -1,11 +1,15 @@
<script setup>
import {useAppStore} from "stores/App";
const props = defineProps({
items: {
type: Array,
required: true
}
});
useAppStore().setPageTitle("Letadla");
</script>
<template>
src/components/copilots/CopilotDetailSkeleton.vue
+5
View File
@@ -0,0 +1,5 @@
<script setup></script>
<template>
<em>Copilot skeleton</em>
</template>
src/components/copilots/CopilotEditSkeleton.vue
+5
View File
@@ -0,0 +1,5 @@
<script setup></script>
<template>
<em>Copilot skeleton</em>
</template>
src/components/copilots/CopilotListSkeleton.vue
+5
View File
@@ -0,0 +1,5 @@
<script setup></script>
<template>
<em>Copilot skeleton</em>
</template>
src/components/copilots/CopilotsList.vue
+25
View File
@@ -0,0 +1,25 @@
<script setup>
const props = defineProps({
items: {
type: Array,
required: true
}
})
</script>
<template>
<q-list bordered separator>
<q-item clickable v-ripple v-for="pilot of items" :key="pilot">
<q-item-label>
<router-link :to="{name: 'pilotDetail', params: {id: pilot.id }}">
{{ pilot.name }}
</router-link>
</q-item-label>
<q-item-section>
section
</q-item-section>
</q-item>
</q-list>
</template>
src/components/flights/FlightBasicInfo.vue
+64
View File
@@ -0,0 +1,64 @@
<script setup>
import {flight} from "src/composables/objects/flight";
import {formatDatetime, minutesToHumanReadable} from "src/composables/datetimeUtils";
const props = defineProps({
flight: {
type: Object,
required: true
}
})
</script>
<template>
<q-list bordered separator>
<q-item>
<q-item-section avatar>
<q-icon name="flight_takeoff"/>
</q-item-section>
<q-item-section>
{{ flight.takeoffAirport.name }}
</q-item-section>
</q-item>
<q-item>
<q-item-section avatar>
<q-icon name="flight_land"/>
</q-item-section>
<q-item-section>
{{ flight.landingAirport.name }}
</q-item-section>
</q-item>
<q-item>
<q-item-section avatar>
<q-icon name="event"/>
</q-item-section>
<q-item-section>
{{ formatDatetime(flight.takeoffDatetime) }}
</q-item-section>
</q-item>
<q-item>
<q-item-section avatar>
<q-icon name="thermostat"/>
</q-item-section>
<q-item-section>
Clouds: few, Wind: 220/12kt, Temp: 12°C
</q-item-section>
</q-item>
<q-item>
<q-item-section avatar>
<q-icon name="schedule"/>
</q-item-section>
<q-item-section>
{{ minutesToHumanReadable(flight.durationMinCalculated) }}
</q-item-section>
</q-item>
<q-item v-if="!flight.solo">
<q-item-section avatar>
<q-icon name="people"/>
</q-item-section>
<q-item-section>
{{ flight.copilot.name }}
</q-item-section>
</q-item>
</q-list>
</template>
src/components/inputs/UCombobox.vue → src/components/flights/FlightEditSkeleton.vue
+2 -2
View File
@@ -1,7 +1,7 @@
<script setup>
const props = defineProps({});
</script>
<template>
{{ props }}
<em>Flight edit skeleton</em>
</template>
src/components/flights/FlightsList.vue
+4 -21
View File
@@ -3,6 +3,7 @@ import {formatDatetime, minutesToHumanReadable} from "src/composables/datetimeUt
import {computed} from "vue";
import {useQuasar} from "quasar";
import {useFlightsStore} from "stores/Flights";
import {flightName} from "../../composables/objects/flight";
const props = defineProps({
items: {
@@ -11,31 +12,14 @@ const props = defineProps({
}
});
const $q = useQuasar();
const deleteFlight = (flightId) => {
$q.dialog({
title: 'Potvrzení',
message: 'Opravdu chceš smazat tento let?',
cancel: true,
persistent: true
}).onOk(() => {
useFlightsStore().deleteItem(flightId);
})
}
const totalFlightTime = computed(() => {
return props.items.reduce((acc, flight) => acc + flight.flightDurationMinutes, 0);
})
const flightName = (item) => {
if (item.name) {
return item.name;
} else {
return `${item.takeoffAirport.name} - ${item.landingAirport.name}`
}
const emit = defineEmits(["delete"]);
const deleteFlight = (flightId) => {
emit("delete", flightId);
}
</script>
<template>
@@ -70,7 +54,6 @@ const flightName = (item) => {
<q-separator/>
<q-card-actions align="right">
<q-btn flat icon="visibility"></q-btn>
<q-btn flat icon="edit" :to="{name: 'flightEdit', params:{id: flight.id}}"></q-btn>
<q-btn flat icon="delete" color="red" @click="deleteFlight(flight.id)"></q-btn>
</q-card-actions>
src/components/flights/PhotoForm.vue
+18 -1
View File
@@ -7,13 +7,18 @@ import FormWrapper from "components/FormWrapper.vue";
const props = defineProps({
photo: {
type: Object
},
locations: {
type: Array
}
});
const photoId = computed(() => props.photo?.id || null);
const formData = ref({
name: "",
description: ""
description: "",
pointOfInterestId: null,
isFlightCover: false
});
const setup = (() => {
@@ -29,6 +34,18 @@ const setup = (() => {
<FormWrapper :save-button="false">
<q-input v-model="formData.name" label="Název"/>
<q-input type="textarea" v-model="formData.description" label="Popis"/>
<q-select
:options="locations"
option-label="name"
option-value="id"
emit-value
map-options
v-model="formData.pointOfInterestId"
label="POI"
/>
<q-checkbox v-model="formData.isFlightCover" label="Úvodní fotografie k letu?" />
</FormWrapper>
</q-card-section>
</DialogWrapper>
src/components/flights/form/FlightFormBasic.vue
-4
View File
@@ -14,10 +14,6 @@ const props = defineProps({
type: Array,
required: true
},
locations: {
type: Array,
required: true
},
flight: {
type: Object,
required: false
src/components/inputs/MapGPSInput.vue
+5
View File
@@ -0,0 +1,5 @@
<script setup></script>
<template>
<div>Tu bude mapa s GPS pointerem</div>
</template>
src/components/photos/PhotosList.vue
+1
View File
@@ -41,6 +41,7 @@ const openDetail = (photo) => {
</q-img>
<q-card-actions v-if="showActions">
{{ photo.isFlightCover ? 'ano' : 'ne' }}
<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-card-actions>
src/components/poi/POIDetailSkeleton.vue
+5
View File
@@ -0,0 +1,5 @@
<script setup></script>
<template>
<em>POI detail skeleton</em>
</template>
src/components/poi/POIEditForm.vue
+35
View File
@@ -0,0 +1,35 @@
<script setup>
import FormWrapper from "components/FormWrapper.vue";
import {onMounted, reactive} from "vue";
import {setDefaultData} from "src/composables/form/formHandling";
import MapGPSInput from "components/inputs/MapGPSInput.vue";
const props = defineProps({
poi: {
type: Object,
required: false,
default: () => ({})
}
})
const formData = reactive({
name: null,
isPublic: false,
});
onMounted(() => {
setDefaultData(formData, props.poi)
})
</script>
<template>
<FormWrapper v-model="formData">
<q-input v-model="formData.name" label="Jméno" />
<q-checkbox v-model="formData.isPublic" label="Veřejný?" />
<MapGPSInput />
</FormWrapper>
</template>
src/components/poi/POIEditSkeleton.vue
+6
View File
@@ -0,0 +1,6 @@
<script setup>
</script>
<template>
<em>POI edit skeleton</em>
</template>
src/components/poi/POIList.vue
+21
View File
@@ -0,0 +1,21 @@
<script setup>
import {pointsOfInterest} from "src/composables/objects/poi";
const props = defineProps({
items: {
type: Array,
required: false
}
})
</script>
<template>
<q-list bordered separator>
<q-item clickable v-ripple v-for="poi of items" :key="poi">
<q-item-section>
<router-link :to="{name: 'poiDetail', params: {id: poi.id}}">
{{ poi.name }}
</router-link>
</q-item-section>
</q-item>
</q-list>
</template>
src/components/poi/POIListSkeleton.vue
+7
View File
@@ -0,0 +1,7 @@
<script setup>
</script>
<template>
<em>POI list skeleton</em>
</template>