105 lines
2.7 KiB
Vue
105 lines
2.7 KiB
Vue
<script setup>
|
|
import FormWrapper from "components/FormWrapper.vue";
|
|
import {onMounted, reactive, ref} from "vue";
|
|
import {setDefaultData} from "src/composables/form/formHandling";
|
|
import MapGPSInput from "components/inputs/MapGPSInput.vue";
|
|
import {useQuasar} from "quasar";
|
|
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: {
|
|
type: Object,
|
|
required: false,
|
|
default: () => ({})
|
|
},
|
|
types: {
|
|
type: Array,
|
|
required: false,
|
|
default: () => ([])
|
|
}
|
|
})
|
|
|
|
const formData = reactive({
|
|
name: "",
|
|
urlSlug: "",
|
|
description: "",
|
|
gpsLatitude: null,
|
|
gpsLongitude: null,
|
|
type: null,
|
|
isPublic: false,
|
|
});
|
|
|
|
const poiNameForMap = ref("");
|
|
onMounted(() => {
|
|
setDefaultData(formData, props.poi);
|
|
// formData.type = {id: poi.type.id, name: poi.type.name};
|
|
poiNameForMap.value = props.poi.name;
|
|
})
|
|
|
|
const showResetMapButton = ref(false);
|
|
const resetMap = () => {
|
|
formData.gpsLongitude = 0;
|
|
formData.gpsLatitude = 0;
|
|
poiNameForMap.value = formData.name;
|
|
showResetMapButton.value = false;
|
|
}
|
|
|
|
const rules = {
|
|
name: [isRequired],
|
|
urlSlug: []
|
|
}
|
|
|
|
const zoom = ref(10);
|
|
const $q = useQuasar();
|
|
const handlePositionNotFound = () => {
|
|
$q.notify(errorObject(`Lokalita ${formData.name} nenalezena. Nastav pozici ručně.`));
|
|
zoom.value = 7;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<FormWrapper v-model="formData">
|
|
<q-input
|
|
v-model="formData.name"
|
|
@change="showResetMapButton=true"
|
|
label="Jméno bodu"
|
|
v-bind="commonProps"
|
|
:rules="rules.name"
|
|
>
|
|
<template #append v-if="showResetMapButton">
|
|
<q-btn @click="resetMap" icon="gps_fixed" round flat text-color="green" title="Nastav pozici na mapě"/>
|
|
</template>
|
|
</q-input>
|
|
<ComboboxInput v-model="formData.type" :options="types" label="Kategorie" v-bind="commonProps"/>
|
|
|
|
<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"
|
|
:label="poiNameForMap"
|
|
:zoom="zoom"
|
|
v-model:gpsLatitude="formData.gpsLatitude"
|
|
v-model:gpsLongitude="formData.gpsLongitude"
|
|
@not-found="handlePositionNotFound"
|
|
/>
|
|
|
|
<q-input type="textarea" v-model="formData.description" v-bind="commonProps" label="Popis"/>
|
|
|
|
</FormWrapper>
|
|
</template>
|