@ozdao/prometheus-framework 0.2.128 → 0.2.130

package/src/modules/spots/components/pages/Map.vue

@@ -1,16 +1,15 @@
 <template>
   <div class="h-100 w-100 pos-relative">
-    <div class="pos-absolute z-index-1 w-100 pd-thin">
+    <div class="w-100 pos-absolute  z-index-2 pos-b-10 ">
       <Button 
         :submit="searchInCurrentLocation"  
-        class="pos-l-5 pos-r-5 bg-black t-white w-100 button"
+        class="mn-l-auto mn-r-auto  bg-black t-white w-min-20 button"
       >
         Search in This Location
       </Button>
     </div>
-   
 
-    <div id="map" class="h-100 w-100 pos-relative radius-big o-hidden">
+    <div id="map" class="h-100 w-100 pos-relative o-hidden">
     </div>
   </div>
 </template>
@@ -19,6 +18,8 @@
 import { onMounted, watch, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router'
 
+import { Loader as GMLoader } from "@googlemaps/js-api-loader";
+
 import Button from '@pf/src/components/Button/Button.vue'
 
 import { state, actions } from '@pf/src/modules/organizations/store/organizations'
@@ -26,19 +27,32 @@ import { state, actions } from '@pf/src/modules/organizations/store/organization
 import * as globals from '@pf/src/modules/globals/store/globals';
 import * as marketplace from '@pf/src/modules/marketplace/store/marketplace';
 
-let map = ref(null);
-let markers = ref([]);
-
 const router = useRouter();
 const route = useRoute();
 
+const props = defineProps({
+  localPosition: Object,
+  location: {
+    type: Object,
+    default: () => ({ lat: 15.8700, lng: 100.9925 })
+  },
+  address: {
+    type: String,
+    default: null
+  },
+  apiKey: String,
+  locale: {
+    type: String,
+    default: 'en'
+  }
+})
+
+let map = ref(null);
+let markers = ref([]);
+
 let skip = ref(0);
 let limit = ref(50);
 
-const props = defineProps({
-  localPosition: Object
-});
-
 let currentMapCenter = ref({lat: 0, lng: 0});
 
 async function getCountry() {
@@ -138,356 +152,364 @@ onMounted(async () => {
     }
   }
 
-  map.value = new google.maps.Map(document.getElementById('map'), {
-    mapTypeControl: false,
-    fullscreenControl: false,
-    styles: [
-      {
-        "elementType": "geometry",
-        "stylers": [
-          {
-            "color": "#212121"
-          }
-        ]
-      },
-      {
-        "elementType": "labels.icon",
-        "stylers": [
-          {
-            "visibility": "off"
-          }
-        ]
-      },
-      {
-        "elementType": "labels.text.fill",
-        "stylers": [
-          {
-            "color": "#757575"
-          }
-        ]
-      },
-      {
-        "elementType": "labels.text.stroke",
-        "stylers": [
-          {
-            "color": "#212121"
-          }
-        ]
-      },
-      {
-        "featureType": "administrative",
-        "elementType": "geometry",
-        "stylers": [
-          {
-            "color": "#757575"
-          },
-          {
-            "visibility": "off"
-          }
-        ]
-      },
-      {
-        "featureType": "administrative.country",
-        "elementType": "labels.text.fill",
-        "stylers": [
-          {
-            "color": "#9e9e9e"
-          }
-        ]
-      },
-      {
-        "featureType": "administrative.land_parcel",
-        "stylers": [
-          {
-            "visibility": "off"
-          }
-        ]
-      },
-      {
-        "featureType": "administrative.locality",
-        "elementType": "labels.text.fill",
-        "stylers": [
-          {
-            "color": "#bdbdbd"
-          }
-        ]
-      },
-      {
-        "featureType": "administrative.neighborhood",
-        "stylers": [
-          {
-            "visibility": "off"
-          }
-        ]
-      },
-      {
-        "featureType": "poi",
-        "stylers": [
-          {
-            "visibility": "off"
-          }
-        ]
-      },
-      {
-        "featureType": "poi",
-        "elementType": "labels.text.fill",
-        "stylers": [
-          {
-            "color": "#757575"
-          }
-        ]
-      },
-      {
-        "featureType": "poi.park",
-        "elementType": "geometry",
-        "stylers": [
-          {
-            "color": "#181818"
-          }
-        ]
-      },
-      {
-        "featureType": "poi.park",
-        "elementType": "labels.text.fill",
-        "stylers": [
-          {
-            "color": "#616161"
-          }
-        ]
-      },
-      {
-        "featureType": "poi.park",
-        "elementType": "labels.text.stroke",
-        "stylers": [
-          {
-            "color": "#1b1b1b"
-          }
-        ]
-      },
-      {
-        "featureType": "road",
-        "elementType": "geometry.fill",
-        "stylers": [
-          {
-            "color": "#2c2c2c"
-          }
-        ]
-      },
-      {
-        "featureType": "road",
-        "elementType": "labels",
-        "stylers": [
-          {
-            "visibility": "off"
-          }
-        ]
-      },
-      {
-        "featureType": "road",
-        "elementType": "labels.icon",
-        "stylers": [
-          {
-            "visibility": "off"
-          }
-        ]
-      },
-      {
-        "featureType": "road",
-        "elementType": "labels.text.fill",
-        "stylers": [
-          {
-            "color": "#8a8a8a"
-          }
-        ]
-      },
-      {
-        "featureType": "road.arterial",
-        "elementType": "geometry",
-        "stylers": [
-          {
-            "color": "#373737"
-          }
-        ]
-      },
-      {
-        "featureType": "road.arterial",
-        "elementType": "labels",
-        "stylers": [
-          {
-            "visibility": "off"
-          }
-        ]
-      },
-      {
-        "featureType": "road.highway",
-        "elementType": "geometry",
-        "stylers": [
-          {
-            "color": "#3c3c3c"
-          }
-        ]
-      },
-      {
-        "featureType": "road.highway",
-        "elementType": "labels",
-        "stylers": [
-          {
-            "visibility": "off"
-          }
-        ]
-      },
-      {
-        "featureType": "road.highway.controlled_access",
-        "elementType": "geometry",
-        "stylers": [
-          {
-            "color": "#4e4e4e"
-          }
-        ]
-      },
-      {
-        "featureType": "road.local",
-        "stylers": [
-          {
-            "visibility": "off"
-          }
-        ]
-      },
-      {
-        "featureType": "road.local",
-        "elementType": "labels.text.fill",
-        "stylers": [
-          {
-            "color": "#616161"
-          }
-        ]
-      },
-      {
-        "featureType": "transit",
-        "stylers": [
-          {
-            "visibility": "off"
-          }
-        ]
-      },
-      {
-        "featureType": "transit",
-        "elementType": "labels.text.fill",
-        "stylers": [
-          {
-            "color": "#757575"
-          }
-        ]
-      },
-      {
-        "featureType": "water",
-        "elementType": "geometry",
-        "stylers": [
-          {
-            "color": "#000000"
-          }
-        ]
-      },
-      {
-        "featureType": "water",
-        "elementType": "labels.text",
-        "stylers": [
-          {
-            "visibility": "off"
-          }
-        ]
-      },
-      {
-        "featureType": "water",
-        "elementType": "labels.text.fill",
-        "stylers": [
-          {
-            "color": "#3d3d3d"
-          }
-        ]
-      }
-    ],
-    center: { lat, lng },
-    zoom: parseInt(route.query.zoom || zoomLevel || '12')
+  const loader = new GMLoader({
+    apiKey: props.apiKey,
+    version: "weekly",
+    libraries: ["places"],
+    language: 'en'
   });
 
   skip.value += limit.value;
 
-    const params = {
-      // country: route.params.country,
-      // state: route.params.state,
-      // city: route.params.city,
-      // categories: route.query.categories,
-      // prices: route.query.prices,
-      // delivery: route.query.delivery,
-      country: route.params.country,
-      state: route.params.state,
-      city: route.params.city,
-      categories: route.query.categories,
-      prices: route.query.prices,
-      delivery: route.query.delivery,
-      sortParam: route.query.sortParam || marketplace.state.sort.param,
-      sortOrder: route.query.sortOrder || marketplace.state.sort.order,
-      skip: skip.value,
-      limit: 100,
-      location: {coordinates: [lng,lat] },
-      locationRadius: 500,
-    };
-
-    console.log(params)
-
-    const data = await actions.read(params);
-
-    state.all = [...state.all, ...data];
+  const params = {
+    // country: route.params.country,
+    // state: route.params.state,
+    // city: route.params.city,
+    // categories: route.query.categories,
+    // prices: route.query.prices,
+    // delivery: route.query.delivery,
+    country: route.params.country,
+    state: route.params.state,
+    city: route.params.city,
+    categories: route.query.categories,
+    prices: route.query.prices,
+    delivery: route.query.delivery,
+    sortParam: route.query.sortParam || marketplace.state.sort.param,
+    sortOrder: route.query.sortOrder || marketplace.state.sort.order,
+    skip: skip.value,
+    limit: 100,
+    location: {coordinates: [lng,lat] },
+    locationRadius: 500,
+  };
 
-    for (let marker of markers.value) {
-      marker.setMap(null);
-    }
+  console.log(params)
+
+  const data = await actions.read(params);
+
+  state.all = [...state.all, ...data];
+
+  loader.load().then(() => {
+
+    map.value = new google.maps.Map(document.getElementById('map'), {
+      mapTypeControl: false,
+      fullscreenControl: false,
+      styles: [
+        {
+          "elementType": "geometry",
+          "stylers": [
+            {
+              "color": "#212121"
+            }
+          ]
+        },
+        {
+          "elementType": "labels.icon",
+          "stylers": [
+            {
+              "visibility": "off"
+            }
+          ]
+        },
+        {
+          "elementType": "labels.text.fill",
+          "stylers": [
+            {
+              "color": "#757575"
+            }
+          ]
+        },
+        {
+          "elementType": "labels.text.stroke",
+          "stylers": [
+            {
+              "color": "#212121"
+            }
+          ]
+        },
+        {
+          "featureType": "administrative",
+          "elementType": "geometry",
+          "stylers": [
+            {
+              "color": "#757575"
+            },
+            {
+              "visibility": "off"
+            }
+          ]
+        },
+        {
+          "featureType": "administrative.country",
+          "elementType": "labels.text.fill",
+          "stylers": [
+            {
+              "color": "#9e9e9e"
+            }
+          ]
+        },
+        {
+          "featureType": "administrative.land_parcel",
+          "stylers": [
+            {
+              "visibility": "off"
+            }
+          ]
+        },
+        {
+          "featureType": "administrative.locality",
+          "elementType": "labels.text.fill",
+          "stylers": [
+            {
+              "color": "#bdbdbd"
+            }
+          ]
+        },
+        {
+          "featureType": "administrative.neighborhood",
+          "stylers": [
+            // {
+            //   "visibility": "off"
+            // }
+          ]
+        },
+        {
+          "featureType": "poi",
+          "stylers": [
+            {
+              "visibility": "off"
+            }
+          ]
+        },
+        {
+          "featureType": "poi",
+          "elementType": "labels.text.fill",
+          "stylers": [
+            {
+              "color": "#757575"
+            }
+          ]
+        },
+        {
+          "featureType": "poi.park",
+          "elementType": "geometry",
+          "stylers": [
+            {
+              "color": "#181818"
+            }
+          ]
+        },
+        {
+          "featureType": "poi.park",
+          "elementType": "labels.text.fill",
+          "stylers": [
+            {
+              "color": "#616161"
+            }
+          ]
+        },
+        {
+          "featureType": "poi.park",
+          "elementType": "labels.text.stroke",
+          "stylers": [
+            {
+              "color": "#1b1b1b"
+            }
+          ]
+        },
+        {
+          "featureType": "road",
+          "elementType": "geometry.fill",
+          "stylers": [
+            {
+              "color": "#2c2c2c"
+            }
+          ]
+        },
+        {
+          "featureType": "road",
+          "elementType": "labels",
+          "stylers": [
+            {
+              "visibility": "off"
+            }
+          ]
+        },
+        {
+          "featureType": "road",
+          "elementType": "labels.icon",
+          "stylers": [
+            {
+              "visibility": "off"
+            }
+          ]
+        },
+        {
+          "featureType": "road",
+          "elementType": "labels.text.fill",
+          "stylers": [
+            {
+              "color": "#8a8a8a"
+            }
+          ]
+        },
+        {
+          "featureType": "road.arterial",
+          "elementType": "geometry",
+          "stylers": [
+            {
+              "color": "#373737"
+            }
+          ]
+        },
+        {
+          "featureType": "road.arterial",
+          "elementType": "labels",
+          "stylers": [
+          ]
+        },
+        {
+          "featureType": "road.highway",
+          "elementType": "geometry",
+          "stylers": [
+            {
+              "color": "#3c3c3c"
+            }
+          ]
+        },
+        {
+          "featureType": "road.highway",
+          "elementType": "labels",
+          "stylers": [
+            {
+              "visibility": "off"
+            }
+          ]
+        },
+        {
+          "featureType": "road.highway.controlled_access",
+          "elementType": "geometry",
+          "stylers": [
+            {
+              "color": "#4e4e4e"
+            }
+          ]
+        },
+        {
+          "featureType": "road.local",
+          "stylers": [
+          ]
+        },
+        {
+          "featureType": "road.local",
+          "elementType": "labels.text.fill",
+          "stylers": [
+            {
+              "color": "#616161"
+            }
+          ]
+        },
+        {
+          "featureType": "transit",
+          "stylers": [
+            {
+              "visibility": "off"
+            }
+          ]
+        },
+        {
+          "featureType": "transit",
+          "elementType": "labels.text.fill",
+          "stylers": [
+            {
+              "color": "#757575"
+            }
+          ]
+        },
+        {
+          "featureType": "water",
+          "elementType": "geometry",
+          "stylers": [
+            {
+              "color": "#000000"
+            }
+          ]
+        },
+        {
+          "featureType": "water",
+          "elementType": "labels.text",
+          "stylers": [
+            {
+              "visibility": "off"
+            }
+          ]
+        },
+        {
+          "featureType": "water",
+          "elementType": "labels.text.fill",
+          "stylers": [
+            {
+              "color": "#3d3d3d"
+            }
+          ]
+        }
+      ],
+      center: { lat, lng },
+      zoom: parseInt(route.query.zoom || zoomLevel || '12')
+    });
 
-    markers.value = [];
+   
 
-    // Add new markers
-    markers.value = data.map(org => {
-      // Get the first spot's location
-      let location = org.spots[0]?.location;
+      for (let marker of markers.value) {
+        marker.setMap(null);
+      }
 
-      if (location && location.type === 'Point') {
-        let [lng, lat] = location.coordinates; // Note that coordinates are in [lng, lat] format
-        
-        let markerIcon = '/marker_2.png'; // Default marker icon
+      markers.value = [];
+
+      // Add new markers
+      markers.value = data.map(org => {
+        // Get the first spot's location
+        let location = org.spots[0]?.location;
+
+        if (location && location.type === 'Point') {
+          let [lng, lat] = location.coordinates; // Note that coordinates are in [lng, lat] format
+          
+          let markerIcon = '/marker_2.png'; // Default marker icon
+
+          if (org.products && org.products.length === 0) {
+            markerIcon = '/marker.png'; // If there are no products, set a different icon
+          }
+          
+          const marker = new google.maps.Marker({
+            position: { lng, lat },
+            map: map.value,
+            icon: {
+              url: markerIcon, // URL to the icon
+              scaledSize: new google.maps.Size(32, 48), // icon dimensions
+              origin: new google.maps.Point(0,0), // coordinate origin for this icon
+              anchor: new google.maps.Point(16, 48) // point on the icon that corresponds to the geographic location of the marker
+            }
+          });
+
+          // Add click listener to the marker
+          marker.addListener('click', () => {
+            router.push({name: 'Organization', params: {_id: org._id}});
+          });
+
+          return marker;
+      }
+      return null;
+    }).filter(marker => marker !== null); // Remove null markers
 
-        if (org.products && org.products.length === 0) {
-          markerIcon = '/marker.png'; // If there are no products, set a different icon
-        }
-        
-        const marker = new google.maps.Marker({
-          position: { lng, lat },
-          map: map.value,
-          icon: {
-            url: markerIcon, // URL to the icon
-            scaledSize: new google.maps.Size(34, 45), // icon dimensions
-            origin: new google.maps.Point(0,0), // coordinate origin for this icon
-            anchor: new google.maps.Point(0, 0) // point on the icon that corresponds to the geographic location of the marker
-          }
-        });
+    google.maps.event.addListener(map.value, 'center_changed', () => {
+      let center = map.value.getCenter();
+      currentMapCenter.value = {
+        lat: center.lat(),
+        lng: center.lng()
+      };
+    });
 
-        // Add click listener to the marker
-        marker.addListener('click', () => {
-          router.push({name: 'Organization', params: {_id: org._id}});
-        });
+  })
 
-        return marker;
-    }
-    return null;
-  }).filter(marker => marker !== null); // Remove null markers
-
-  google.maps.event.addListener(map.value, 'center_changed', () => {
-    let center = map.value.getCenter();
-    currentMapCenter.value = {
-      lat: center.lat(),
-      lng: center.lng()
-    };
-  });
 });
 
 const searchInCurrentLocation = async () => {
@@ -525,9 +547,9 @@ const searchInCurrentLocation = async () => {
           map: map.value,
           icon: {
             url: markerIcon, // URL to the icon
-            scaledSize: new google.maps.Size(34, 45), // icon dimensions
+            scaledSize: new google.maps.Size(32, 48), // icon dimensions
             origin: new google.maps.Point(0,0), // coordinate origin for this icon
-            anchor: new google.maps.Point(0, 0) // point on the icon that corresponds to the geographic location of the marker
+            anchor: new google.maps.Point(16, 48) // point on the icon that corresponds to the geographic location of the marker
           }
         });
 
@@ -549,5 +571,10 @@ const searchInCurrentLocation = async () => {
 
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+  #map {
+    &:focus {
+      outline: none;
+    }
+  }
 </style>