Homepage, verejna cast, vetsi sada uprav a oprav
This commit is contained in:
Michal Kváček
@@ -0,0 +1,161 @@
|
||||
<script setup>
|
||||
import FlightFormSteps from "components/flights/form/FlightFormSteps.vue";
|
||||
import {computed, onMounted, reactive, ref, watch} from "vue";
|
||||
import {useRoute} from "vue-router";
|
||||
import {useFlightsStore} from "stores/Flights";
|
||||
import FlightFormBasic from "components/flights/form/FlightFormBasic.vue";
|
||||
import {useAircraftsStore} from "stores/Aircrafts";
|
||||
import {usePointsOfInterestStore} from "stores/PointsOfInterest";
|
||||
import {useAirportsStore} from "stores/Airports";
|
||||
import {useMeta, useQuasar} from "quasar";
|
||||
import {storeToRefs} from "pinia";
|
||||
import {flightName} from "src/composables/objects/flight";
|
||||
import FlightFormCopilot from "components/flights/form/FlightFormCopilot.vue";
|
||||
import {useCopilotsStore} from "stores/Copilots";
|
||||
import FlightFormNotes from "components/flights/form/FlightFormNotes.vue";
|
||||
import FlightFormPhotos from "components/flights/form/FlightFormPhotos.vue";
|
||||
import {usePhotosStore} from "stores/Photo";
|
||||
import PhotosList from "components/photos/PhotosList.vue";
|
||||
import {confirmObject, successObject} from "src/composables/dialog";
|
||||
import PhotoForm from "components/photos/PhotoForm.vue";
|
||||
import FlightFormTrack from "components/flights/form/FlightFormTrack.vue";
|
||||
import {fetchFlight, flight, loading} from "src/composables/objects/flight";
|
||||
import FlightEditSkeleton from "components/flights/FlightEditSkeleton.vue";
|
||||
|
||||
useMeta({title: "Editace letu"});
|
||||
|
||||
const $q = useQuasar();
|
||||
const route = useRoute();
|
||||
const flightId = parseInt(route.params.id);
|
||||
|
||||
const aircrafts = storeToRefs(useAircraftsStore()).items;
|
||||
const locations = storeToRefs(usePointsOfInterestStore()).items;
|
||||
const airports = storeToRefs(useAirportsStore()).items;
|
||||
const copilots = storeToRefs(useCopilotsStore()).items;
|
||||
|
||||
const formStep = ref("");
|
||||
watch(() => route.params.step, (val) => formStep.value = val);
|
||||
|
||||
onMounted(() => {
|
||||
formStep.value = route.params.step || "basic";
|
||||
|
||||
useAircraftsStore().fetch();
|
||||
usePointsOfInterestStore().fetch();
|
||||
useAirportsStore().fetch();
|
||||
useCopilotsStore().fetch();
|
||||
|
||||
fetchFlight(flightId);
|
||||
});
|
||||
|
||||
const handleFlightEdit = (data) => {
|
||||
useFlightsStore().update(flightId, data).then(() => {
|
||||
$q.notify(successObject("Úspěšně upraveno"));
|
||||
fetchFlight(flightId); // je tu potreba ten refetch? Ve storu se upravuje, mozna by stacilo jen getterem upravit
|
||||
// hodnotu `flight`
|
||||
})
|
||||
}
|
||||
|
||||
const handlePhotosUpload = (data) => {
|
||||
const promises = [];
|
||||
for (const photo of data.photos) {
|
||||
promises.push(usePhotosStore().upload(flightId, {photo}));
|
||||
}
|
||||
|
||||
Promise.all(promises).then(() => {
|
||||
$q.notify(successObject("Úspěšně nahráno"));
|
||||
fetchFlight(flightId);
|
||||
});
|
||||
}
|
||||
|
||||
const _findPhotoIndex = (photoId) => flight.value.photos.findIndex((object) => object.id === photoId);
|
||||
const confirmPhotoDelete = (id) => {
|
||||
$q.dialog(confirmObject("Opravdu chces smazat tuto fotku?"))
|
||||
.onOk(() => {
|
||||
usePhotosStore().delete(id).then((data) => {
|
||||
flight.value.photos.splice(_findPhotoIndex(data.id), 1);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const handlePhotoUpdate = (formData) => {
|
||||
const photoId = formData.id;
|
||||
delete formData.id;
|
||||
|
||||
usePhotosStore().update(photoId, formData).then((data) => {
|
||||
const idx = _findPhotoIndex(data.id);
|
||||
flight.value.photos[idx] = data;
|
||||
})
|
||||
}
|
||||
|
||||
const openEdit = ref(false);
|
||||
const editPhoto = ref(null);
|
||||
const openPhotoEdit = (photo) => {
|
||||
openEdit.value = true;
|
||||
editPhoto.value = photo;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FlightEditSkeleton v-if="loading"/>
|
||||
|
||||
<template v-else>
|
||||
<q-breadcrumbs :key="loading">
|
||||
<q-breadcrumbs-el :to="{name: 'myFlights'}">Moje lety</q-breadcrumbs-el>
|
||||
<q-breadcrumbs-el :to="{name: 'flightDetail', params: {id: flightId}}">{{ flightName(flight) }}</q-breadcrumbs-el>
|
||||
<q-breadcrumbs-el>Editace</q-breadcrumbs-el>
|
||||
</q-breadcrumbs>
|
||||
|
||||
<FlightFormSteps :router-edit-mode="true" :flightId="flightId" />
|
||||
|
||||
<q-tab-panels v-model="formStep">
|
||||
<q-tab-panel name="basic">
|
||||
<FlightFormBasic
|
||||
@save="handleFlightEdit"
|
||||
:flight="flight"
|
||||
:locations="locations"
|
||||
:airports="airports"
|
||||
:aircrafts="aircrafts"
|
||||
/>
|
||||
</q-tab-panel>
|
||||
|
||||
<q-tab-panel name="copilot">
|
||||
<FlightFormCopilot @save="handleFlightEdit" :flight="flight" :copilots="copilots"/>
|
||||
</q-tab-panel>
|
||||
|
||||
<q-tab-panel name="track">
|
||||
<FlightFormTrack
|
||||
v-if="locations"
|
||||
:flight="flight"
|
||||
:locations="locations"
|
||||
@save="handleFlightEdit"
|
||||
/>
|
||||
</q-tab-panel>
|
||||
|
||||
<q-tab-panel name="photos">
|
||||
<FlightFormPhotos
|
||||
:flight="flight"
|
||||
@save="handlePhotosUpload"
|
||||
/>
|
||||
|
||||
<PhotoForm
|
||||
v-model="openEdit"
|
||||
:locations="locations"
|
||||
:photo="editPhoto"
|
||||
@save="handlePhotoUpdate"
|
||||
/>
|
||||
|
||||
<PhotosList
|
||||
:photos="flight.photos"
|
||||
@edit="openPhotoEdit"
|
||||
@delete="confirmPhotoDelete"
|
||||
/>
|
||||
</q-tab-panel>
|
||||
|
||||
<q-tab-panel name="notes">
|
||||
<FlightFormNotes @save="handleFlightEdit" :flight="flight"/>
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
|
||||
|
||||
</template>
|
||||
</template>
|
||||
@@ -0,0 +1,108 @@
|
||||
<script setup>
|
||||
import {useRoute, useRouter} from "vue-router";
|
||||
import {onMounted, watch} from "vue";
|
||||
import FlightDetailSkeleton from "components/flights/FlightDetailSkeleton.vue";
|
||||
import {fetchFlight, flight, flightName, handleDeleteFlight, loading} from "src/composables/objects/flight";
|
||||
import {useAppStore} from "stores/App";
|
||||
import FlightBasicInfo from "components/flights/FlightBasicInfo.vue";
|
||||
import {copyToClipboard, useQuasar} from "quasar";
|
||||
import {successObject} from "src/composables/dialog";
|
||||
import {useFlightsStore} from "stores/Flights";
|
||||
import PhotoCarousel from "components/flights/PhotoCarousel.vue";
|
||||
import FlightTrackMap from "components/flights/FlightTrackMap.vue";
|
||||
import {useUserStore} from "stores/User";
|
||||
|
||||
const $q = useQuasar();
|
||||
const $router = useRouter();
|
||||
const flightId = parseInt(useRoute().params.id);
|
||||
|
||||
onMounted(() => {
|
||||
fetchFlight(flightId);
|
||||
})
|
||||
|
||||
watch(flight, (newVal) => {
|
||||
const flightNameFormatted = flightName(newVal);
|
||||
useAppStore().setPageTitle(flightNameFormatted);
|
||||
useAppStore().setBreadcrumbs([
|
||||
{to: {name: "myFlights"}, label: "Moje lety"},
|
||||
{label: flightNameFormatted}
|
||||
]);
|
||||
});
|
||||
|
||||
const handleDeleteAndRedirect = () => {
|
||||
const flightId = flight.value.id;
|
||||
|
||||
handleDeleteFlight($q, flightId, (flight) => {
|
||||
$router.push({name: "myFlights"});
|
||||
$q.notify(successObject(`Úspěšně smazáno`));
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const togglePublicVisibility = () => {
|
||||
const newVisibility = !flight.value.isPublic;
|
||||
useFlightsStore()
|
||||
.update(flightId, {isPublic: newVisibility})
|
||||
.then((updatedFlight) => {
|
||||
flight.value = updatedFlight;
|
||||
$q.notify(successObject(newVisibility ? "Úspěšně publikováno" : "Úspěšně skryto"));
|
||||
});
|
||||
};
|
||||
|
||||
const copyLinkToClipboard = () => {
|
||||
const loggedUser = useUserStore().user;
|
||||
const url = $router.resolve({
|
||||
name: "publicFlightDetail",
|
||||
params: {id: flightId, username: loggedUser.publicUsername}
|
||||
});
|
||||
copyToClipboard(window.location.origin + url.href).then(() => {
|
||||
$q.notify(successObject("Odkaz zkopírován"))
|
||||
});
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<FlightDetailSkeleton v-if="loading || !flight"/>
|
||||
|
||||
<q-card class="flight-detail-card" v-else>
|
||||
<PhotoCarousel :cover-photo-url="flight.coverPhoto?.url" :photos="flight.photos"/>
|
||||
|
||||
<q-card-actions class="q-my-md">
|
||||
<div class="col-grow">
|
||||
<q-btn
|
||||
flat
|
||||
:to="{name: 'flightEdit', params:{id: flight.id}}"
|
||||
icon="edit"
|
||||
text-color="primary"
|
||||
label="Upravit"
|
||||
/>
|
||||
|
||||
<q-btn
|
||||
@click="togglePublicVisibility"
|
||||
:icon="flight.isPublic ? 'visibility_off' : 'visibility'"
|
||||
flat
|
||||
:label="flight.isPublic ? 'Skrýt' : 'Zveřejnit'"
|
||||
/>
|
||||
|
||||
<q-btn
|
||||
icon="link"
|
||||
@click="copyLinkToClipboard()"
|
||||
flat
|
||||
v-if="flight.isPublic"
|
||||
label="Získat odkaz"
|
||||
/>
|
||||
</div>
|
||||
<q-btn @click="handleDeleteAndRedirect" icon="delete" flat text-color="red" label="Smazat"/>
|
||||
</q-card-actions>
|
||||
|
||||
<q-card-section>
|
||||
<FlightBasicInfo :flight="flight" :show-copilots="true"/>
|
||||
|
||||
<article class="q-my-lg" v-html="flight.description"/>
|
||||
|
||||
<FlightTrackMap :flight="flight"/>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</template>
|
||||
@@ -0,0 +1,36 @@
|
||||
<script setup>
|
||||
import {onMounted} from "vue";
|
||||
import {useQuasar} from "quasar";
|
||||
import FlightsList from "components/flights/FlightsList.vue";
|
||||
import FlightsListSkeleton from "components/flights/FlightsListSkeleton.vue";
|
||||
import FAB from "components/FAB.vue";
|
||||
import {fetchFlights, flights, handleDeleteFlight, loading} from "src/composables/objects/flight";
|
||||
import {useAppStore} from "stores/App";
|
||||
|
||||
const $q = useQuasar();
|
||||
|
||||
useAppStore().setPageTitle("Moje lety")
|
||||
onMounted(() => {
|
||||
fetchFlights();
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FlightsListSkeleton v-if="loading"/>
|
||||
|
||||
<div class="q-pa-md q-gutter-sm" v-else-if="!loading && flights.length === 0">
|
||||
<q-banner class="bg-light-blue text-white">
|
||||
<template v-slot:avatar>
|
||||
<q-icon name="info"/>
|
||||
</template>
|
||||
Nemáš zaznamenaný žádný let.
|
||||
<template v-slot:action>
|
||||
<q-btn flat color="white" :to="{name: 'addFlight'}" label="Přidat let"/>
|
||||
</template>
|
||||
</q-banner>
|
||||
</div>
|
||||
|
||||
<FlightsList class="q-mx-md q-my-md" v-else :items="flights" @delete="handleDeleteFlight($q, $event)" />
|
||||
|
||||
<FAB mode="add" :router-link="{name: 'addFlight'}"/>
|
||||
</template>
|
||||
@@ -0,0 +1,43 @@
|
||||
<script setup>
|
||||
import {onMounted} from "vue";
|
||||
import {useAircraftsStore} from "stores/Aircrafts";
|
||||
import {useFlightsStore} from "stores/Flights";
|
||||
import {useRouter} from "vue-router";
|
||||
import {usePointsOfInterestStore} from "stores/PointsOfInterest";
|
||||
import {storeToRefs} from "pinia";
|
||||
import {useAirportsStore} from "stores/Airports";
|
||||
import FlightFormSteps from "components/flights/form/FlightFormSteps.vue";
|
||||
import FlightFormBasic from "components/flights/form/FlightFormBasic.vue";
|
||||
import {useAppStore} from "stores/App";
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
useAircraftsStore().fetch();
|
||||
usePointsOfInterestStore().fetch();
|
||||
useFlightsStore().fetch();
|
||||
useAirportsStore().fetch();
|
||||
|
||||
useAppStore().setPageTitle("Nový let");
|
||||
useAppStore().setBreadcrumbs([
|
||||
{to: {name: "myFlights"}, label: "Moje lety"},
|
||||
{label: "Nový"}
|
||||
]);
|
||||
});
|
||||
|
||||
|
||||
const aircrafts = storeToRefs(useAircraftsStore()).items;
|
||||
const locations = storeToRefs(usePointsOfInterestStore()).items;
|
||||
const airports = storeToRefs(useAirportsStore()).items;
|
||||
|
||||
const router = useRouter();
|
||||
const handleSave = (formData) => {
|
||||
useFlightsStore().create(formData).then((flight) => {
|
||||
router.push({name: "flightEdit", params: {id: flight.id, step: "copilot"}});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FlightFormSteps :disabled="['copilot', 'track', 'photos', 'notes']"/>
|
||||
<FlightFormBasic @save="handleSave" :aircrafts="aircrafts" :airports="airports" :locations="locations" />
|
||||
</template>
|
||||
Reference in New Issue
Block a user