Mapa s POI ve verejne casti

src/pages/public/poi/PointsOfInterestMapPage.vue

@@ -0,0 +1,38 @@
+<script setup>
+import {usePointsOfInterestStore} from "stores/PointsOfInterest";
+import {storeToRefs} from "pinia";
+import {useAppStore} from "stores/App";
+import {useMeta} from "quasar";
+import {metaData} from "src/composables/meta";
+import {publicPOIBaseBreadcrumbs} from "src/composables/breadcrumbs";
+import {onMounted} from "vue";
+import MapWrapper from "components/map/MapWrapper.vue";
+import {useGeocode} from "src/composables/geocoding";
+
+useAppStore().setPageTitle("Místa");
+useAppStore().setBreadcrumbs(publicPOIBaseBreadcrumbs());
+useMeta(() => metaData({
+  title: "Místa"
+}))
+
+onMounted(() => {
+  usePointsOfInterestStore().fetchPublic({limit: 10000})
+});
+const {center} = useGeocode();
+const {pointsOfInterest, isQueryRunning} = storeToRefs(usePointsOfInterestStore());
+</script>
+
+<template>
+  <div>
+    <q-skeleton v-if="isQueryRunning" type="rect" style="width: 100%; height: 65vh; min-height: 100px" />
+    <MapWrapper
+      v-show="!isQueryRunning"
+      style="width: 100%; height: 65vh; min-height: 100px"
+      :center="center"
+      :show-layer-controls="false"
+      :show-info-window="true"
+      :zoom="8"
+      :points-of-interest="pointsOfInterest"
+    />
+  </div>
+</template>

src/pages/public/poi/PointsOfInterestPage.vue

@@ -8,7 +8,8 @@ import {useMeta} from "quasar";
 import {metaData} from "src/composables/meta";
 import {usePagination} from "src/composables/pagination";
 import ListFilters from "components/ListFilters.vue";
-import {homepageBreadcrumbs, publicPOIBaseBreadcrumbs} from "src/composables/breadcrumbs";
+import {publicPOIBaseBreadcrumbs} from "src/composables/breadcrumbs";
+import {onMounted} from "vue";
 
 useAppStore().setPageTitle("Místa");
 useAppStore().setBreadcrumbs(publicPOIBaseBreadcrumbs());
@@ -19,7 +20,10 @@ useMeta(() => metaData({
 const {filters, loadPage, paginationOffset, paginationLimit} = usePagination({
   fetchFunction: usePointsOfInterestStore().fetchPublic
 });
-loadPage(false);
+
+onMounted(() => {
+  loadPage(false);
+});
 
 const handleFiltersChanged = (newFilters) => {
   paginationOffset.value = 0;

src/pages/public/poi/PointsOfInterestWrapper.vue

@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+  <div>
+    <q-tabs>
+      <q-route-tab :to="{name: 'publicPOIsList'}">Seznam</q-route-tab>
+      <q-route-tab :to="{name: 'publicPOIsMap'}">Mapa</q-route-tab>
+    </q-tabs>
+    <router-view/>
+  </div>
+</template>