Slugy, webp, hromada refaktoringu
This commit is contained in:
Michal Kváček
@@ -5,26 +5,34 @@ import {setDefaultData} from "src/composables/form/formHandling";
|
||||
import FormWrapper from "components/FormWrapper.vue";
|
||||
import {commonProps} from "src/composables/inputs";
|
||||
import {isRequired} from "src/composables/form/rules";
|
||||
import SlugInput from "components/inputs/SlugInput.vue";
|
||||
import {storeToRefs} from "pinia";
|
||||
import {useLoggedUserStore} from "stores/LoggedUser";
|
||||
|
||||
const props = defineProps({
|
||||
copilot: {
|
||||
type: Object
|
||||
},
|
||||
isRequestPending: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
}
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
}
|
||||
})
|
||||
|
||||
const formData = reactive({
|
||||
name: null,
|
||||
urlSlug: "",
|
||||
isPublic: false,
|
||||
});
|
||||
|
||||
const rules = {
|
||||
name: [isRequired]
|
||||
name: [isRequired],
|
||||
urlSlug: [],
|
||||
}
|
||||
|
||||
const loggedUser = storeToRefs(useLoggedUserStore()).user;
|
||||
|
||||
onMounted(() => {
|
||||
if (props.copilot) {
|
||||
setDefaultData(formData, props.copilot);
|
||||
@@ -41,5 +49,19 @@ onMounted(() => {
|
||||
:rules="rules.name"
|
||||
v-model="formData.name"
|
||||
/>
|
||||
|
||||
<template v-if="loggedUser?.publicUsername">
|
||||
<SlugInput
|
||||
v-if="formData.isPublic"
|
||||
v-bind="commonProps"
|
||||
v-model="formData.urlSlug"
|
||||
label="URL"
|
||||
:url="`/${loggedUser.publicUsername}/a/`"
|
||||
:slug-source="formData.name"
|
||||
:rules="rules.urlSlug"
|
||||
/>
|
||||
<q-checkbox v-model="formData.isPublic" label="Veřejný?"/>
|
||||
</template>
|
||||
|
||||
</FormWrapper>
|
||||
</template>
|
||||
|
||||
@@ -8,20 +8,24 @@ import {isRequired} from "src/composables/form/rules";
|
||||
import RichTextEditor from "components/inputs/RichTextEditor.vue";
|
||||
import DatetimePicker from "components/inputs/DatetimePicker.vue";
|
||||
import {FORMAT_DATE, FORMAT_DATETIME_LONG} from "src/composables/datetimeUtils";
|
||||
import SlugInput from "components/inputs/SlugInput.vue";
|
||||
import {storeToRefs} from "pinia";
|
||||
import {useLoggedUserStore} from "stores/LoggedUser";
|
||||
|
||||
const props = defineProps({
|
||||
event: {
|
||||
type: Object
|
||||
},
|
||||
isRequestPending: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
}
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
}
|
||||
})
|
||||
|
||||
const formData = reactive({
|
||||
name: null,
|
||||
name: "",
|
||||
urlSlug: "",
|
||||
isPublic: false,
|
||||
description: "",
|
||||
dateFrom: null,
|
||||
@@ -38,6 +42,7 @@ onMounted(() => {
|
||||
}
|
||||
})
|
||||
|
||||
const loggedUser = storeToRefs(useLoggedUserStore()).user;
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -48,7 +53,15 @@ onMounted(() => {
|
||||
:rules="rules.name"
|
||||
v-model="formData.name"
|
||||
/>
|
||||
|
||||
<SlugInput
|
||||
v-if="formData.isPublic"
|
||||
v-bind="commonProps"
|
||||
v-model="formData.urlSlug"
|
||||
label="URL"
|
||||
:url="`/${loggedUser?.publicUsername}/udalosti/`"
|
||||
:slug-source="formData.name"
|
||||
/>
|
||||
<q-checkbox v-model="formData.isPublic" label="Veřejný?"/>
|
||||
|
||||
<div class="row">
|
||||
<div class="col q-pr-sm">
|
||||
@@ -61,7 +74,7 @@ onMounted(() => {
|
||||
|
||||
|
||||
<RichTextEditor v-model="formData.description" v-bind="commonProps" label="Popis letu, poznámky, ..."/>
|
||||
<q-checkbox v-model="formData.isPublic" label="Veřejný?"/>
|
||||
|
||||
|
||||
</FormWrapper>
|
||||
</template>
|
||||
|
||||
@@ -8,8 +8,7 @@ const props = defineProps({
|
||||
},
|
||||
routeDetail: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: () => ({name: 'eventDetail', params: {}})
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
@@ -19,20 +18,20 @@ const getCoverPhotos = (item) => item.flights.filter(f => !!f.titlePhoto).map(f
|
||||
<template>
|
||||
<q-list bordered separator>
|
||||
<q-item
|
||||
v-for="event of items" :key="event"
|
||||
v-for="eventDetail of items" :key="eventDetail"
|
||||
clickable
|
||||
:to="{name: routeDetail.name, params: {...routeDetail.params, id: event.id}}"
|
||||
:to="{name: props.routeDetail.name, params: {...props.routeDetail.params, eventSlug: eventDetail.urlSlug, id: eventDetail.id}}"
|
||||
v-ripple
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>
|
||||
<q-avatar icon="event" color="primary" text-color="white" v-if="!event.flights || event.flights.length === 0"/>
|
||||
<AvatarsGroup :avatars="getCoverPhotos(event)" v-else/>
|
||||
<q-avatar icon="event" color="primary" text-color="white" v-if="!eventDetail.flights || eventDetail.flights.length === 0"/>
|
||||
<AvatarsGroup :avatars="getCoverPhotos(eventDetail)" v-else/>
|
||||
|
||||
{{ event.name }}
|
||||
{{ eventDetail.name }}
|
||||
</q-item-label>
|
||||
<q-item-label lines="4" caption>
|
||||
<article v-html="event.description"/>
|
||||
<article v-html="eventDetail.description"/>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
||||
@@ -22,7 +22,6 @@ const props = defineProps({
|
||||
required: false,
|
||||
default: null
|
||||
}
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -34,8 +33,8 @@ const props = defineProps({
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<router-link
|
||||
:to="{...aircraftDetailRoute, params: {...aircraftDetailRoute.params, id: flight.aircraft.id}}"
|
||||
v-if="aircraftDetailRoute"
|
||||
:to="{...aircraftDetailRoute, params: {id: flight.aircraft.id, callSign: flight.aircraft.callSign}}"
|
||||
v-if="aircraftDetailRoute"
|
||||
>
|
||||
{{ flight.aircraft.callSign }}
|
||||
</router-link>
|
||||
@@ -62,7 +61,9 @@ const props = defineProps({
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<div>
|
||||
<strong>{{ flight.takeoffAirport.icaoCode }}</strong> ({{ flight.takeoffAirport.name }}),
|
||||
<template v-if="flight.takeoffAirport">
|
||||
<strong>{{ flight.takeoffAirport.icaoCode }}</strong> ({{ flight.takeoffAirport.name }}),
|
||||
</template>
|
||||
čas vzletu: {{ formatDatetime(flight.takeoffDatetime, FORMAT_TIME) }}
|
||||
|
||||
<WeatherInfo class="q-mx-sm" v-if="flight.takeoffWeatherInfo" :weather="flight.takeoffWeatherInfo"/>
|
||||
@@ -78,8 +79,8 @@ const props = defineProps({
|
||||
<q-item-section>
|
||||
<template v-if="poi.pointOfInterest">
|
||||
<router-link
|
||||
:to="{name: poiDetailRoute.name, params: {...poiDetailRoute.params, id: poi.pointOfInterest.id}}"
|
||||
v-if="poi.pointOfInterest.isPublic"
|
||||
:to="{name: poiDetailRoute.name, params: {...poiDetailRoute.params, poiSlug: poi.pointOfInterest.urlSlug, id: poi.pointOfInterest.id}}"
|
||||
v-if="poi.pointOfInterest.isPublic"
|
||||
>
|
||||
{{ poi.pointOfInterest.name }}
|
||||
</router-link>
|
||||
@@ -87,7 +88,11 @@ const props = defineProps({
|
||||
</template>
|
||||
<span v-if="poi.airport">
|
||||
<strong>{{ poi.airport.icaoCode }}</strong> ({{ poi.airport.name }}),
|
||||
délka mezipřistání {{ minutesToHumanReadable(poi.landingDuration) }}
|
||||
<template v-if="poi.landingDuration > 0">
|
||||
délka mezipřistání {{ minutesToHumanReadable(poi.landingDuration) }}
|
||||
</template>
|
||||
<template v-else>touch and go</template>
|
||||
|
||||
</span>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
@@ -98,7 +103,9 @@ const props = defineProps({
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<div>
|
||||
<strong>{{ flight.landingAirport.icaoCode }}</strong> ({{ flight.landingAirport.name }}),
|
||||
<template v-if="flight.landingAirport">
|
||||
<strong>{{ flight.landingAirport.icaoCode }}</strong> ({{ flight.landingAirport.name }}),
|
||||
</template>
|
||||
čas přistání: {{ formatDatetime(flight.landingDatetime, FORMAT_TIME) }}
|
||||
<WeatherInfo class="q-mx-sm" v-if="flight.landingWeatherInfo" :weather="flight.landingWeatherInfo"/>
|
||||
</div>
|
||||
@@ -123,8 +130,8 @@ const props = defineProps({
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<router-link
|
||||
v-if="copilotDetailRoute"
|
||||
:to="{name: copilotDetailRoute.name, params: {...copilotDetailRoute.params, id: copilot.id}}"
|
||||
v-if="copilot.isPublic"
|
||||
:to="{name: copilotDetailRoute.name, params: {...copilotDetailRoute.params, copilotSlug: copilot.urlSlug, id: copilot.id}}"
|
||||
>
|
||||
{{ copilot.name }}
|
||||
</router-link>
|
||||
|
||||
@@ -20,7 +20,7 @@ const poisWithGPS = computed(() => props.flight.track.map(poi => poi.pointOfInte
|
||||
|
||||
const mapMarkers = [props.flight.takeoffAirport].concat(poisWithGPS.value).concat([props.flight.landingAirport]);
|
||||
const pointsOfInterests = computed(() => mapMarkers
|
||||
.filter(marker => marker.gpsLatitude && marker.gpsLongitude)
|
||||
.filter(marker => marker && marker.gpsLatitude && marker.gpsLongitude)
|
||||
.map(
|
||||
marker => ({label: marker.name, position: {lat: marker.gpsLatitude, lng: marker.gpsLongitude}})
|
||||
));
|
||||
|
||||
@@ -33,7 +33,7 @@ const props = defineProps({
|
||||
|
||||
const routeDetail = (flight) => {
|
||||
if (props.public)
|
||||
return {name: "publicFlightDetail", params: {username: flight.pilot.publicUsername, id: flight.id}}
|
||||
return {name: "publicFlightDetail", params: {username: flight.pilot.publicUsername, flightSlug: flight.urlSlug}}
|
||||
else
|
||||
return {name: "flightDetail", params: {id: flight.id}}
|
||||
};
|
||||
|
||||
@@ -21,10 +21,10 @@ const props = defineProps({
|
||||
required: false
|
||||
},
|
||||
isRequestPending: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
}
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
}
|
||||
});
|
||||
|
||||
const airportName = (airport) => `${airport.icaoCode} (${airport.name})`;
|
||||
@@ -32,8 +32,13 @@ const airportName = (airport) => `${airport.icaoCode} (${airport.name})`;
|
||||
const airports = computed(() => props.airports.map(a => ({id: a.id, name: airportName(a)})));
|
||||
const aircrafts = computed(() => props.aircrafts.map(a => ({id: a.id, name: a.callSign})));
|
||||
|
||||
|
||||
const manualInput = ref(false);
|
||||
const allowGPXUpload = ref(true);
|
||||
|
||||
const formData = reactive({
|
||||
aircraft: null,
|
||||
gpxTrackFile: null,
|
||||
takeoffAirport: null,
|
||||
landingAirport: null,
|
||||
takeoffDatetime: null,
|
||||
@@ -52,8 +57,14 @@ watch(() => props.flight, (newVal) => {
|
||||
if (newVal) {
|
||||
setDefaultData(formData, newVal);
|
||||
formData.aircraft = {id: newVal.aircraft.id, name: newVal.aircraft.callSign};
|
||||
formData.takeoffAirport = {id: newVal.takeoffAirport.id, name: airportName(newVal.takeoffAirport)}
|
||||
formData.landingAirport = {id: newVal.landingAirport.id, name: airportName(newVal.landingAirport)}
|
||||
|
||||
if (newVal.takeoffAirport)
|
||||
formData.takeoffAirport = {id: newVal.takeoffAirport.id, name: airportName(newVal.takeoffAirport)}
|
||||
|
||||
if (newVal.landingAirport)
|
||||
formData.landingAirport = {id: newVal.landingAirport.id, name: airportName(newVal.landingAirport)}
|
||||
allowGPXUpload.value = false;
|
||||
manualInput.value = true;
|
||||
}
|
||||
}, {immediate: true});
|
||||
watch(() => formData.takeoffDatetime, () => {
|
||||
@@ -67,79 +78,75 @@ watch(() => formData.takeoffAirport, () => {
|
||||
formData.landingAirport = {...formData.takeoffAirport};
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FormWrapper v-model="formData" :is-request-pending="props.isRequestPending">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<q-card class="q-my-sm">
|
||||
<q-card-section>
|
||||
<div class="text-h6">Vyber letadlo</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-section>
|
||||
<ComboboxInput
|
||||
:rules="rules.aircraft"
|
||||
v-bind="commonProps"
|
||||
:options="aircrafts"
|
||||
v-model="formData.aircraft"
|
||||
label="Letadlo"
|
||||
/>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
<ComboboxInput
|
||||
:rules="rules.aircraft"
|
||||
v-bind="commonProps"
|
||||
:options="aircrafts"
|
||||
v-model="formData.aircraft"
|
||||
label="Letadlo"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col-12 col-md-6">
|
||||
<q-card class="q-mr-md-sm q-my-sm">
|
||||
<q-card-section>
|
||||
<div class="text-h6">Vzlet</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<DatetimePicker
|
||||
v-model="formData.takeoffDatetime"
|
||||
:rules="rules.takeoffDatetime"
|
||||
label="Datum a čas vzletu: "
|
||||
v-bind="commonProps"
|
||||
/>
|
||||
|
||||
<ComboboxInput
|
||||
:options="airports"
|
||||
:rules="rules.takeoffAirport"
|
||||
v-model="formData.takeoffAirport"
|
||||
label="Letiště vzletu"
|
||||
v-bind="commonProps"
|
||||
/>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="row" v-if="!manualInput">
|
||||
<div class="col">
|
||||
<div class="text-h6">Mám trasu v GPX, chci importovat data</div>
|
||||
<q-file v-bind="commonProps" v-model="formData.gpxTrackFile" label="Trasa v GPX" hint="Z trasy se načtou letiště a časy vzletu a přistání. Tyto hodnoty je možné později upravit."/>
|
||||
|
||||
<div class="col col-12 col-md-6">
|
||||
|
||||
<q-card class="q-ml-md-sm q-my-sm">
|
||||
<q-card-section>
|
||||
<div class="text-h6">Přistání</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<DatetimePicker
|
||||
v-model="formData.landingDatetime"
|
||||
:min-date="formData.takeoffDatetime"
|
||||
:rules="rules.landingDatetime"
|
||||
label="Datum a čas přistání"
|
||||
v-bind="commonProps"
|
||||
/>
|
||||
|
||||
<ComboboxInput
|
||||
:options="airports"
|
||||
v-model="formData.landingAirport"
|
||||
label="Letiště přistání"
|
||||
v-bind="commonProps"
|
||||
:rules="rules.landingAirport"
|
||||
/>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
<div class="text-center">
|
||||
<q-btn @click="manualInput = true" rounded flat>Zadat informace ručně</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" v-if="manualInput">
|
||||
<div class="col col-12 col-md-6 q-pr-md-sm">
|
||||
<div class="text-h6">Vzlet</div>
|
||||
<DatetimePicker
|
||||
v-model="formData.takeoffDatetime"
|
||||
:rules="rules.takeoffDatetime"
|
||||
label="Datum a čas vzletu: "
|
||||
v-bind="commonProps"
|
||||
/>
|
||||
|
||||
<ComboboxInput
|
||||
:options="airports"
|
||||
:rules="rules.takeoffAirport"
|
||||
v-model="formData.takeoffAirport"
|
||||
label="Letiště vzletu"
|
||||
v-bind="commonProps"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col col-12 col-md-6 q-pl-md-sm">
|
||||
<div class="text-h6">Přistání</div>
|
||||
<DatetimePicker
|
||||
v-model="formData.landingDatetime"
|
||||
:min-date="formData.takeoffDatetime"
|
||||
:rules="rules.landingDatetime"
|
||||
label="Datum a čas přistání"
|
||||
v-bind="commonProps"
|
||||
/>
|
||||
|
||||
<ComboboxInput
|
||||
:options="airports"
|
||||
v-model="formData.landingAirport"
|
||||
label="Letiště přistání"
|
||||
v-bind="commonProps"
|
||||
:rules="rules.landingAirport"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12 text-center" v-if="allowGPXUpload">
|
||||
<q-btn @click="manualInput = false" rounded flat>Mám GPX, načíst informace z trasy</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</FormWrapper>
|
||||
</template>
|
||||
|
||||
@@ -5,6 +5,9 @@ import {setDefaultData} from "src/composables/form/formHandling";
|
||||
import RichTextEditor from "components/inputs/RichTextEditor.vue";
|
||||
import {commonProps} from "src/composables/inputs";
|
||||
import ComboboxInput from "components/inputs/ComboboxInput.vue";
|
||||
import SlugInput from "components/inputs/SlugInput.vue";
|
||||
import {storeToRefs} from "pinia";
|
||||
import {useLoggedUserStore} from "stores/LoggedUser";
|
||||
|
||||
const props = defineProps({
|
||||
flight: {
|
||||
@@ -25,9 +28,14 @@ const props = defineProps({
|
||||
const formData = reactive({
|
||||
name: "",
|
||||
event: null,
|
||||
description: ""
|
||||
description: "",
|
||||
urlSlug: "",
|
||||
isPublic: null
|
||||
})
|
||||
|
||||
|
||||
const loggedUser = storeToRefs(useLoggedUserStore()).user;
|
||||
|
||||
watch(() => props.flight, (newVal) => {
|
||||
if (newVal) {
|
||||
setDefaultData(formData, newVal);
|
||||
@@ -43,7 +51,18 @@ watch(() => props.flight, (newVal) => {
|
||||
<template>
|
||||
<FormWrapper v-model="formData" :is-request-pending="props.isRequestPending">
|
||||
<ComboboxInput :options="events" v-if="events" v-model="formData.event" label="Událost" v-bind="commonProps"/>
|
||||
<q-input type="text" v-model="formData.name" label="Jméno letu" v-bind="commonProps"/>
|
||||
<q-input type="text" v-model="formData.name" label="Jméno letu" v-bind="commonProps" />
|
||||
<template v-if="loggedUser?.publicUsername">
|
||||
<SlugInput
|
||||
v-if="formData.isPublic"
|
||||
v-bind="commonProps"
|
||||
v-model="formData.urlSlug"
|
||||
label="URL"
|
||||
:url="`/${loggedUser.publicUsername}/`"
|
||||
:slug-source="formData.name"
|
||||
/>
|
||||
<q-checkbox v-model="formData.isPublic" label="Veřejný?"/>
|
||||
</template>
|
||||
<RichTextEditor v-model="formData.description" v-bind="commonProps" label="Popis letu, poznámky, ..."/>
|
||||
</FormWrapper>
|
||||
</template>
|
||||
|
||||
@@ -3,6 +3,7 @@ import FormWrapper from "components/FormWrapper.vue";
|
||||
import {reactive, ref, watch} from "vue";
|
||||
import ComboboxInput from "components/inputs/ComboboxInput.vue";
|
||||
import {commonProps} from "src/composables/inputs";
|
||||
import {minutesToHumanReadable} from "src/composables/datetimeUtils";
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
@@ -24,7 +25,7 @@ const props = defineProps({
|
||||
|
||||
const formData = reactive({
|
||||
track: [],
|
||||
gpxTrack: null
|
||||
gpxTrackFile: null
|
||||
});
|
||||
const removeTrackItem = (index) => {
|
||||
formData.track.splice(index, 1);
|
||||
@@ -81,7 +82,7 @@ watch(() => props.flight.track, (newVal) => {
|
||||
|
||||
<q-file
|
||||
accept=".gpx"
|
||||
v-model="formData.gpxTrack"
|
||||
v-model="formData.gpxTrackFile"
|
||||
v-bind="commonProps"
|
||||
label="Nahrát trasu v GPX"
|
||||
hint="Slouží pro vykreslení kompletní a detailní trasy"
|
||||
@@ -91,6 +92,8 @@ watch(() => props.flight.track, (newVal) => {
|
||||
</template>
|
||||
</q-file>
|
||||
|
||||
<h5>Body na mapě</h5>
|
||||
|
||||
<ComboboxInput
|
||||
v-bind="commonProps"
|
||||
v-model="poi"
|
||||
@@ -103,7 +106,7 @@ watch(() => props.flight.track, (newVal) => {
|
||||
/>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="col-12 col-md-8">
|
||||
<ComboboxInput
|
||||
v-bind="commonProps"
|
||||
v-model="airport"
|
||||
@@ -111,16 +114,16 @@ watch(() => props.flight.track, (newVal) => {
|
||||
:options="airports"
|
||||
clearable
|
||||
label="Letiště pro mezipřistání"
|
||||
hint="Nastav letiště a dobu mezispřistání"
|
||||
hint="Nastav letiště a dobu mezipřistání"
|
||||
/>
|
||||
</div>
|
||||
<div class="col" v-if="airport?.name">
|
||||
<div class="col-md-4 col-12" v-if="airport?.name">
|
||||
<q-input
|
||||
type="number"
|
||||
v-bind="commonProps"
|
||||
v-model="landingDuration"
|
||||
label="Délka mezipřistání (minuty)"
|
||||
class="q-mx-md"
|
||||
class="q-mx-md-md"
|
||||
>
|
||||
<template #after>
|
||||
<q-btn @click="addAirportToTrack(airport, landingDuration)" color="primary" icon="add"></q-btn>
|
||||
@@ -136,7 +139,7 @@ watch(() => props.flight.track, (newVal) => {
|
||||
<q-avatar color="primary" text-color="white" icon="flight_takeoff"/>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
{{ flight.takeoffAirport.name }}
|
||||
{{ flight.takeoffAirport?.name || '???' }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
||||
@@ -153,7 +156,11 @@ watch(() => props.flight.track, (newVal) => {
|
||||
</q-badge>
|
||||
</span>
|
||||
<span v-if="item.airport">
|
||||
{{ item.airport.name }}, mezipřistání: {{ item.landingDuration }} minut
|
||||
{{ item.airport.name }},
|
||||
<template v-if="item.landingDuration > 0">
|
||||
mezipřistání {{ minutesToHumanReadable(item.landingDuration) }}
|
||||
</template>
|
||||
<template v-else>touch and go</template>
|
||||
</span>
|
||||
|
||||
</q-item-section>
|
||||
@@ -167,7 +174,7 @@ watch(() => props.flight.track, (newVal) => {
|
||||
<q-avatar color="primary" text-color="white" icon="flight_land"/>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
{{ flight.landingAirport.name }}
|
||||
{{ flight.landingAirport?.name || '???' }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
<script setup>
|
||||
import {copyToClipboard, useQuasar} from "quasar";
|
||||
import {successObject} from "src/composables/dialog";
|
||||
import {useRouter} from "vue-router";
|
||||
|
||||
const props = defineProps({
|
||||
route: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const $router = useRouter();
|
||||
const $q = useQuasar();
|
||||
|
||||
|
||||
const copyLinkToClipboard = () => {
|
||||
const url = $router.resolve(props.route);
|
||||
copyToClipboard(window.location.origin + url.href).then(() => {
|
||||
$q.notify(successObject("Odkaz zkopírován"))
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-btn
|
||||
icon="link"
|
||||
@click="copyLinkToClipboard()"
|
||||
flat
|
||||
label="Získat odkaz"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,65 @@
|
||||
<script setup>
|
||||
import {useQuasar} from "quasar";
|
||||
import {ref, watch} from "vue";
|
||||
import {slugify} from "src/composables/slugify";
|
||||
|
||||
const props = defineProps({
|
||||
requireUrlSlug: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
isPublic: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
urlPrefix: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
const emits = defineEmits(["changeVisibility"]);
|
||||
|
||||
const $q = useQuasar();
|
||||
const urlSlugModel = ref("");
|
||||
watch(() => urlSlugModel.value, (newVal) => {
|
||||
const slug = slugify(newVal);
|
||||
|
||||
if (urlSlugModel.value !== slug)
|
||||
urlSlugModel.value = slug;
|
||||
})
|
||||
const inputPrompt = () =>
|
||||
$q.dialog({
|
||||
title: 'URL',
|
||||
message: props.urlPrefix+"...",
|
||||
prompt: {
|
||||
model: urlSlugModel,
|
||||
placeholder: "URL fragment",
|
||||
isValid: val => val.length > 1,
|
||||
type: 'text' // optional
|
||||
},
|
||||
cancel: true,
|
||||
persistent: true
|
||||
})
|
||||
|
||||
|
||||
const togglePublicVisibility = () => {
|
||||
if (props.requireUrlSlug && !props.isPublic) {
|
||||
inputPrompt().onOk((data) => {
|
||||
console.log(data, urlSlugModel.value);
|
||||
emits("changeVisibility", {isPublic: !props.isPublic, urlSlug: slugify(urlSlugModel.value)});
|
||||
})
|
||||
} else {
|
||||
emits("changeVisibility", {isPublic: !props.isPublic});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-btn
|
||||
@click="togglePublicVisibility"
|
||||
:icon="isPublic ? 'visibility_off' : 'visibility'"
|
||||
flat
|
||||
:label="isPublic ? 'Skrýt' : 'Zveřejnit'"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,62 @@
|
||||
<script setup>
|
||||
import {ref, watch} from "vue";
|
||||
import {slugify} from "src/composables/slugify";
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: String
|
||||
},
|
||||
slugSource: {
|
||||
type: String,
|
||||
required: false,
|
||||
},
|
||||
url : {
|
||||
type: String,
|
||||
required: false,
|
||||
default: null
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "URL"
|
||||
},
|
||||
rules: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: () => ([])
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
const model = ref("");
|
||||
|
||||
const emitValue = (val) => {
|
||||
emit("update:modelValue", val);
|
||||
}
|
||||
watch(() => model.value, (newVal) => {
|
||||
model.value = slugify(newVal);
|
||||
emitValue(newVal);
|
||||
})
|
||||
|
||||
|
||||
|
||||
watch(() => props.slugSource, (newVal, oldVal) => {
|
||||
if (model.value === "" || slugify(oldVal) === model.value) {
|
||||
// pokud puvodni vychozi hodnota je stejna jako aktualne nastaveny slug, zmenime model
|
||||
model.value = slugify(newVal);
|
||||
}
|
||||
}, {immediate: true});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-input
|
||||
v-model="model"
|
||||
:label="label"
|
||||
:rules="rules"
|
||||
hint="Veřejná URL adresa"
|
||||
>
|
||||
<template #prepend>
|
||||
{{ url }}
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
@@ -127,7 +127,7 @@ const showLarge = (displayedPhoto) => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row" style="margin-bottom: 150px">
|
||||
<div class="row">
|
||||
<div class="col-6 col-sm-4 col-md-4 col-lg-3" v-for="(photo, idx) in photos" :key="photo.id">
|
||||
<q-card :class='{"q-ma-sm": true, "shadow-1": !batchEdit[photo.id], "shadow-10": batchEdit[photo.id]}'>
|
||||
<q-img :src="photo.thumbnailUrl" @click="handleImageClick(photo, idx)" style="cursor: pointer">
|
||||
|
||||
@@ -8,6 +8,8 @@ import {errorObject} from "src/composables/dialog";
|
||||
import {commonProps} from "src/composables/inputs";
|
||||
import {isRequired} from "src/composables/form/rules";
|
||||
import ComboboxInput from "components/inputs/ComboboxInput.vue";
|
||||
import {useRouter} from "vue-router";
|
||||
import SlugInput from "components/inputs/SlugInput.vue";
|
||||
|
||||
const props = defineProps({
|
||||
poi: {
|
||||
@@ -23,7 +25,8 @@ const props = defineProps({
|
||||
})
|
||||
|
||||
const formData = reactive({
|
||||
name: null,
|
||||
name: "",
|
||||
urlSlug: "",
|
||||
description: "",
|
||||
gpsLatitude: null,
|
||||
gpsLongitude: null,
|
||||
@@ -47,7 +50,8 @@ const resetMap = () => {
|
||||
}
|
||||
|
||||
const rules = {
|
||||
name: [isRequired]
|
||||
name: [isRequired],
|
||||
urlSlug: []
|
||||
}
|
||||
|
||||
const zoom = ref(10);
|
||||
@@ -72,6 +76,18 @@ const handlePositionNotFound = () => {
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<SlugInput
|
||||
v-if="formData.isPublic"
|
||||
v-bind="commonProps"
|
||||
v-model="formData.urlSlug"
|
||||
label="URL"
|
||||
url="/mista/"
|
||||
:slug-source="formData.name"
|
||||
:rules="rules.urlSlug"
|
||||
/>
|
||||
<q-checkbox v-model="formData.isPublic" label="Veřejný?"/>
|
||||
|
||||
|
||||
<MapGPSInput
|
||||
v-if="poiNameForMap"
|
||||
:key="poiNameForMap"
|
||||
@@ -82,10 +98,8 @@ const handlePositionNotFound = () => {
|
||||
@not-found="handlePositionNotFound"
|
||||
/>
|
||||
|
||||
<q-input type="textarea" v-model="formData.description" v-bind="commonProps" label="Popis" />
|
||||
<q-input type="textarea" v-model="formData.description" v-bind="commonProps" label="Popis"/>
|
||||
|
||||
<ComboboxInput v-model="formData.type" :options="types" label="Kategorie" v-bind="commonProps" />
|
||||
|
||||
<q-checkbox v-model="formData.isPublic" label="Veřejný?"/>
|
||||
<ComboboxInput v-model="formData.type" :options="types" label="Kategorie" v-bind="commonProps"/>
|
||||
</FormWrapper>
|
||||
</template>
|
||||
|
||||
@@ -30,7 +30,7 @@ const props = defineProps({
|
||||
|
||||
const getRoute = (item) => {
|
||||
if (props.public)
|
||||
return {name: "publicPOIDetail", params: {id: item.id}}
|
||||
return {name: "publicPOIDetail", params: {slug: item.urlSlug}}
|
||||
else
|
||||
return {name: "poiDetail", params: {id: item.id}}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user