Homepage, lepsi POI

src/components/poi/POIForm.vue

@@ -0,0 +1,91 @@
+<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";
+
+const props = defineProps({
+  poi: {
+    type: Object,
+    required: false,
+    default: () => ({})
+  },
+  types: {
+    type: Array,
+    required: false,
+    default: () => ([])
+  }
+})
+
+const formData = reactive({
+  name: null,
+  description: null,
+  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]
+}
+
+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>
+
+    <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" />
+
+    <ComboboxInput v-model="formData.type" :options="types" label="Kategorie" v-bind="commonProps" />
+
+    <q-checkbox v-model="formData.isPublic" label="Veřejný?"/>
+  </FormWrapper>
+</template>