Mapa s POI ve verejne casti

src/components/map/MapWrapper.vue

@@ -231,6 +231,8 @@ const handlePoiClick = (poi) => {
 }
 
 const isDetailInTrack = computed(() => {
+  if (!props.track) return false;
+
   return !!props.track.path.find(i => i.lat === infoWindow.value.position.lat && i.lng === infoWindow.value.position.lng);
 });
 
@@ -245,7 +247,7 @@ const isControlsOpened = ref(false);
     @click="handleMapClick"
     map-type-id="roadmap"
     gesture-handling="greedy"
-    :max-zoom="11"
+    :max-zoom="13"
     ref="mapRef"
   >
     <AirspaceInfoWindow
@@ -297,8 +299,16 @@ const isControlsOpened = ref(false);
         :options="{position: {lat: poi.gpsLatitude, lng: poi.gpsLongitude}, anchorPoint: 'BOTTOM_CENTER'}"
         @click.stop="handlePoiClick(poi)"
       >
-        <div style="padding: 5px; border-radius: 15px; background: #8bdfff">
+        <div class="poi-avatar" :title="poi.name" v-if="!poi.titlePhoto">
-          <img style="width: 20px" src="/mapIcons/photo-32x32.png" alt="">
+          <img src="/mapIcons/photo-32x32.png" alt="">
+        </div>
+
+        <div
+          :title="poi.name"
+          v-else
+          class="poi-img"
+          :style="`background-image: url(${poi.titlePhoto.thumbnailUrl})`"
+        >
         </div>
       </CustomMarker>
     </template>
@@ -345,3 +355,25 @@ const isControlsOpened = ref(false);
     </CustomControl>
   </GoogleMap>
 </template>
+
+
+<style lang="scss">
+.poi-img {
+  border: solid 3px #8bdfff;
+  outline: solid 1px black;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-size: cover;
+}
+
+.poi-avatar {
+  padding: 5px;
+  border-radius: 15px;
+  background: #8bdfff;
+
+  img {
+    width: 20px;
+  }
+}
+</style>

src/components/poi/POIList.vue

@@ -38,7 +38,7 @@ const getRoute = (item) => {
   <LoadMoreList :total-items-count="totalItemsCount" :items-length="items.length">
     <template #items>
       <q-list bordered separator>
-        <q-item clickable v-ripple v-for="poi of items" :key="poi" :to="getRoute(poi)">
+        <q-item clickable v-for="poi of items" :key="poi" :to="getRoute(poi)">
           <q-item-section avatar>
             <q-avatar v-if="poi.titlePhoto">
               <img :src="poi.titlePhoto.thumbnailUrl" alt=""/>

src/composables/breadcrumbs.js

@@ -65,6 +65,9 @@ export const publicCopilotBreadcrumbs = (pilot, flight, event, copilot) => {
 export const publicPOIBaseBreadcrumbs = () => {
   return [
     ...homepageBreadcrumbs(),
-    {label: "Místa"},
+    {
+      to: {name: 'publicPOIsList'},
+      label: "Místa"
+    },
   ]
 }

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>

src/router/routes.js

@@ -18,7 +18,14 @@ const routes = [
       {path: 'osobni-udaje', name: "personalInformation", component: () => import('pages/public/PersonalInformationPage.vue')},
       {path: 'funkce', name: "features", component: () => import('pages/public/FeaturesPage.vue')},
       {path: 'letadlo/:callSign', name: "publicAircraftDetail", component: () => import('pages/public/aircraft/AircraftDetailPage.vue')},
-      {path: 'mista', name: "publicPOIs", component: () => import('pages/public/poi/PointsOfInterestPage.vue')},
+      {
+        path: 'mista',
+        component: () => import('pages/public/poi/PointsOfInterestWrapper.vue'),
+        children: [
+          {path: '', name: "publicPOIsList", component: () => import('pages/public/poi/PointsOfInterestPage.vue')},
+          {path: 'mapa', name: "publicPOIsMap", component: () => import('pages/public/poi/PointsOfInterestMapPage.vue')},
+        ]
+      },
       {path: 'mista/:slug', name: "publicPOIDetail", component: () => import('pages/public/poi/PointOfInterestDetailPage.vue')},
       {path: 'napoveda', name: "help", component: () => import('pages/public/HelpPage.vue')},
       {