@ozdao/prometheus-framework 0.2.30 → 0.2.31

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

@@ -1,14 +1,30 @@
 <template>
-  <div id="map" class="h-100vh radius-big o-hidden"></div>
+  <div class="h-100 w-100 pos-relative">
+    <div class="pos-absolute z-index-1 w-100 pd-thin">
+      <Button 
+        :submit="searchInCurrentLocation"  
+        class="pos-l-5 pos-r-5 bg-black t-white w-100 button"
+      >
+        Search in This Location
+      </Button>
+    </div>
+   
+
+    <div id="map" class="h-100 w-100 pos-relative radius-big o-hidden">
+    </div>
+  </div>
 </template>
 
 <script setup>
 import { onMounted, watch, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router'
 
+import Button from '@pf/src/components/Button/Button.vue'
+
 import { state, actions } from '@pf/src/modules/organizations/store/organizations'
 
 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([]);
@@ -23,27 +39,86 @@ const props = defineProps({
   localPosition: Object
 });
 
+let currentMapCenter = ref({lat: 0, lng: 0});
+
+async function getCountry() {
+  try {
+    const response = await fetch('https://ip2c.org/s');
+    const result = await response.text();
+
+    if (!result || result[0] !== '1') {
+      throw new Error('Unable to fetch the country');
+    }
+
+    // Разделение строки и извлечение кода страны
+    const parts = result.split(';');
+    if (parts.length < 4) {
+      throw new Error('Invalid response format');
+    }
+
+    console.log(parts[3])
+
+    return parts[3]; // Возвращает двухбуквенный код страны
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+}
+
+
 onMounted(async () => {
-  let lat = parseFloat(route.query.lat || globals.state.position.location.lat || '0');
-  let lng = parseFloat(route.query.lng || globals.state.position.location.lng || '0');
+  let lat = parseFloat(route.query.lat || globals.state.position?.location?.lat);
+  let lng = parseFloat(route.query.lng || globals.state.position?.location?.lng);
 
   let zoomLevel;
 
-    if (route.params.location || globals.state.position.location) {
-      zoomLevel = 13; // Уровень детализации для координат
-    } else if (route.params.country || globals.state.position.country) {
-      zoomLevel = 10; // Уровень детализации для города
-    } else if (route.params.state || globals.state.position.state) {
-      zoomLevel = 8;  // Уровень детализации для штата
-    } else if (route.params.city || globals.state.position.city) {
-      zoomLevel = 5;  // Уровень детализации для страны
-    } else {
-      zoomLevel = 2;  // Дефолтный уровень зума
+  // Определите уровень зума в зависимости от доступной информации
+  if (route.params.location || globals.state.position?.location) {
+    zoomLevel = 12;
+  } else if (route.params.country || globals.state.position?.country) {
+    zoomLevel = 9;
+  } else if (route.params.state || globals.state.position?.state) {
+    zoomLevel = 6;
+  } else if (route.params.city || globals.state.position?.city) {
+    zoomLevel = 4;
+  } else {
+    zoomLevel = 2;
+  }
+
+  // Если координаты не заданы, попробуйте их получить
+  if (!lat || !lng) {
+    let country
+
+    const geocoder = new google.maps.Geocoder();
+
+    try {
+      country = await getCountry();
+    } catch {
+      country = 'Thailand' 
+      console.log(error)
     }
+
+    try {
+      const results = await geocoder.geocode({ 'address': country })
+
+      console.log(results);
+
+      if (results) {
+        lat = results.results[0].geometry.location.lat();
+        lng = results.results[0].geometry.location.lng();
+        zoomLevel = 6;
+      } else {
+        console.error('No results found for the country code.');
+      }
+    } catch (error) {
+      console.error('Error getting coordinates from country code:', error);
+    }
+  }
   
   // If there's no lat/lng in the query, try to use country/state/city to get the lat/lng
   if (!lat && !lng && (route.params.country || route.params.state || route.params.city)) {
     const geocoder = new google.maps.Geocoder();
+
     const address = [
       route.params.city,
       route.params.state,
@@ -52,10 +127,12 @@ onMounted(async () => {
 
     try {
       const results = await geocoder.geocode({ address });
+
       if (results[0]) {
         lat = results[0].geometry.location.lat();
         lng = results[0].geometry.location.lng();
       }
+
     } catch (error) {
       console.error('Error getting coordinates:', error);
     }
@@ -64,7 +141,8 @@ onMounted(async () => {
   map.value = new google.maps.Map(document.getElementById('map'), {
     mapTypeControl: false,
     fullscreenControl: false,
-    styles: [{
+    styles: [
+      {
         "elementType": "geometry",
         "stylers": [
           {
@@ -342,25 +420,37 @@ onMounted(async () => {
       // 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: limit.value,
-      location: {
-		    type: "Point",
-		    coordinates: [lng, lat] // note that it's longitude first, then latitude
-		  }
+      limit: 100,
+      location: {coordinates: [lng,lat] },
+      locationRadius: 500,
     };
 
+    console.log(params)
+
     const data = await actions.read(params);
+
     state.all = [...state.all, ...data];
 
     for (let marker of markers.value) {
       marker.setMap(null);
     }
 
+    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
         
@@ -391,52 +481,71 @@ onMounted(async () => {
     return null;
   }).filter(marker => marker !== null); // Remove null markers
 
-    // google.maps.event.addListener(map.value, 'bounds_changed', async () => {
-    //   let bounds = map.value.getBounds();
-    //   let NE = bounds.getNorthEast();
-    //   let SW = bounds.getSouthWest();
-
-    //   router.push({
-    //     query: {
-    //       ...route.query,
-    //       lat: map.value.getCenter().lat(),
-    //       lng: map.value.getCenter().lng(),
-    //       zoom: map.value.getZoom()
-    //     }
-    //   });
-
-    //   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,
-    //     skip: skip.value,
-    //     limit: limit.value,
-    //     location: `${SW.lat()},${SW.lng()},${NE.lat()},${NE.lng()}`
-    //   };
-
-    //   // const data = await actions.read(params);
-    //   // state.all = [...state.all, ...data];
-
-    //   // Clear old markers
-     
-    // });
+  google.maps.event.addListener(map.value, 'center_changed', () => {
+    let center = map.value.getCenter();
+    currentMapCenter.value = {
+      lat: center.lat(),
+      lng: center.lng()
+    };
+  });
 });
 
-// watch(() => route.query, async (newQuery) => {
-//   if (map.value) {
-//     map.value.setCenter({
-//       lat: parseFloat(newQuery.lat || '0'),
-//       lng: parseFloat(newQuery.lng || '0')
-//     });
+const searchInCurrentLocation = async () => {
+  // Use currentMapCenter for the location
+  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,
+    location: {
+      type: "Point",
+      coordinates: [currentMapCenter.value.lng, currentMapCenter.value.lat]
+    }
+  };
+
+  try {
+    const data = await actions.read(params);
+    // Remove old markers
+    for (let marker of markers.value) {
+      marker.setMap(null);
+    }
+    markers.value = [];
+
+    // Add new markers
+    markers.value = data.map(org => {
+      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 = org.products && org.products.length > 0 ? '/marker_2.png' : '/marker.png';
+
+        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
+          }
+        });
+
+        // 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
+  } catch (error) {
+    console.error('Error fetching organizations:', error);
+  }
+};
+
 
-//     map.value.setZoom(parseInt(newQuery.zoom || '8'));
-//   }
-// }, { deep: true });
 
 </script>
 

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

@@ -4,7 +4,7 @@
 
     <div class="pd-medium w-100">
      <svg  @click="$router.push(`/app/organization/${props.organization._id}/spots/${spot._id}/edit`)" class="i-regular pos-absolute pos-r-0 pos-t-0 t-transp" width="652" height="652" viewBox="0 0 652 652" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M515.693 9.52082C510.095 3.91669 502.49 0.765625 494.563 0.765625C486.635 0.765625 479.036 3.91669 473.432 9.52082L48.7255 434.307C44.8244 438.214 42.0848 443.125 40.8088 448.496L0.939444 615.069C-1.47202 625.168 1.528 635.788 8.86652 643.132C16.2103 650.47 26.8305 653.47 36.9292 651.059L203.516 611.261H203.511C208.88 609.985 213.792 607.246 217.699 603.35L642.485 178.496C648.089 172.892 651.241 165.293 651.241 157.366C651.241 149.439 648.089 141.835 642.485 136.235L515.693 9.52082ZM113.76 453.708L388.307 179.161L472.828 263.682L198.281 538.229L113.76 453.708ZM87.1041 511.5L140.416 564.812L70.3014 581.614L87.1041 511.5ZM515.091 221.793L430.195 136.897L494.184 72.9075L579.08 157.429L515.091 221.793Z" fill="black"/>
+        <path d="M515.693 9.52082C510.095 3.91669 502.49 0.765625 494.563 0.765625C486.635 0.765625 479.036 3.91669 473.432 9.52082L48.7255 434.307C44.8244 438.214 42.0848 443.125 40.8088 448.496L0.939444 615.069C-1.47202 625.168 1.528 635.788 8.86652 643.132C16.2103 650.47 26.8305 653.47 36.9292 651.059L203.516 611.261H203.511C208.88 609.985 213.792 607.246 217.699 603.35L642.485 178.496C648.089 172.892 651.241 165.293 651.241 157.366C651.241 149.439 648.089 141.835 642.485 136.235L515.693 9.52082ZM113.76 453.708L388.307 179.161L472.828 263.682L198.281 538.229L113.76 453.708ZM87.1041 511.5L140.416 564.812L70.3014 581.614L87.1041 511.5ZM515.091 221.793L430.195 136.897L494.184 72.9075L579.08 157.429L515.091 221.793Z" fill="rgb(var(--black))"/>
       </svg>
       
       <h3