Prace s mapou, refresh tokenu (tak nejak), uprava vypisu POI, pridani breadcrumbs

src/components/poi/POIEditForm.vue

@@ -1,8 +1,10 @@
 <script setup>
 import FormWrapper from "components/FormWrapper.vue";
-import {onMounted, reactive} from "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";
 
 const props = defineProps({
   poi: {
@@ -14,22 +16,63 @@ const props = defineProps({
 
 const formData = reactive({
   name: null,
+  gpsLatitude: null,
+  gpsLongitude: null,
   isPublic: false,
 });
 
+const poiNameForMap = ref("");
+
 onMounted(() => {
-  setDefaultData(formData, props.poi)
+  setDefaultData(formData, props.poi);
+  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 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" label="Jméno" />
-    <q-checkbox v-model="formData.isPublic" label="Veřejný?" />
+    <q-input
+      class="q-my-lg"
+      outlined
+      standout
+      v-model="formData.name"
+      @change="showResetMapButton=true"
+      label="Jméno bodu"
+    >
+      <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-checkbox v-model="formData.isPublic" label="Veřejný?"/>
 
-    <MapGPSInput />
 
   </FormWrapper>
 </template>

src/components/poi/POIList.vue

@@ -1,6 +1,4 @@
 <script setup>
-import {pointsOfInterest} from "src/composables/objects/poi";
-
 const props = defineProps({
   items: {
     type: Array,
@@ -11,6 +9,9 @@ const props = defineProps({
 <template>
   <q-list bordered separator>
     <q-item clickable v-ripple v-for="poi of items" :key="poi">
+      <q-item-section avatar>
+        <q-avatar icon="place" color="primary" text-color="white"/>
+      </q-item-section>
       <q-item-section>
         <router-link :to="{name: 'poiDetail', params: {id: poi.id}}">
           {{ poi.name }}