@ozdao/prometheus-framework 0.2.199 → 0.2.200

package/dist/prometheus-framework/src/modules/spots/components/pages/Map.vue.js

@@ -1,16 +1,20 @@
-import { ref as c, onMounted as K, openBlock as V, createElementBlock as $, createElementVNode as E, createVNode as F, withCtx as G, createTextVNode as Z, pushScopeId as U, popScopeId as A } from "vue";
-import { useRouter as D, useRoute as H } from "vue-router";
-import { Loader as J } from "../../../../../../node_modules/@googlemaps/js-api-loader/dist/index.js";
-import Q from "../../../../components/Button/Button.vue2.js";
-import { actions as I, state as M } from "../../../organizations/store/organizations.js";
-import { state as p } from "../../../globals/views/store/globals.js";
-import { state as h } from "../../../marketplace/store/marketplace.js";
+import { ref, onMounted, openBlock, createElementBlock, createElementVNode, createVNode, withCtx, createTextVNode, pushScopeId, popScopeId } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { Loader } from "../../../../../../node_modules/@googlemaps/js-api-loader/dist/index.js";
+import _sfc_main$1 from "../../../../components/Button/Button.vue.js";
+import { actions, state as state$2 } from "../../../organizations/store/organizations.js";
+import { state } from "../../../globals/views/store/globals.js";
+import { state as state$1 } from "../../../marketplace/store/marketplace.js";
 /* empty css         */
-import W from "../../../../../../_virtual/_plugin-vue_export-helper.js";
-const X = (y) => (U("data-v-3b081dcc"), y = y(), A(), y), Y = { class: "h-100 w-100 pos-relative" }, ee = { class: "w-100 pos-absolute z-index-2 pos-b-10" }, te = /* @__PURE__ */ X(() => /* @__PURE__ */ E("div", {
+import _export_sfc from "../../../../../../_virtual/_plugin-vue_export-helper.js";
+const _withScopeId = (n) => (pushScopeId("data-v-3b081dcc"), n = n(), popScopeId(), n);
+const _hoisted_1 = { class: "h-100 w-100 pos-relative" };
+const _hoisted_2 = { class: "w-100 pos-absolute z-index-2 pos-b-10" };
+const _hoisted_3 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("div", {
   id: "map",
   class: "h-100 w-100 pos-relative o-hidden"
-}, null, -1)), oe = {
+}, null, -1));
+const _sfc_main = {
   __name: "Map",
   props: {
     localPosition: Object,
@@ -28,358 +32,402 @@ const X = (y) => (U("data-v-3b081dcc"), y = y(), A(), y), Y = { class: "h-100 w-
       default: "en"
     }
   },
-  setup(y) {
-    const b = D(), e = H(), L = y;
-    let s = c(null), i = c([]), O = c(0), C = c(50), m = c({ lat: 0, lng: 0 }), w = c(null);
-    async function B() {
+  setup(__props) {
+    const router = useRouter();
+    const route = useRoute();
+    const props = __props;
+    let map = ref(null);
+    let markers = ref([]);
+    let skip = ref(0);
+    let limit = ref(50);
+    let currentMapCenter = ref({ lat: 0, lng: 0 });
+    let currentMapZoom = ref(null);
+    async function getCountry() {
       try {
-        const r = await (await fetch("https://ip2c.org/s")).text();
-        if (!r || r[0] !== "1")
+        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 t = r.split(";");
-        if (t.length < 4)
+        }
+        const parts = result.split(";");
+        if (parts.length < 4) {
           throw new Error("Invalid response format");
-        return console.log(t[3]), t[3];
-      } catch (l) {
-        throw console.error(l), l;
+        }
+        console.log(parts[3]);
+        return parts[3];
+      } catch (error2) {
+        console.error(error2);
+        throw error2;
       }
     }
-    K(async () => {
-      var u, g, T, v, d, _, k, x;
-      let l = parseFloat(e.query.lat || ((g = (u = p.position) == null ? void 0 : u.location) == null ? void 0 : g.lat)), r = parseFloat(e.query.lng || ((v = (T = p.position) == null ? void 0 : T.location) == null ? void 0 : v.lng)), t;
-      e.params.location || (d = p.position) != null && d.location ? t = 15 : e.params.country || (_ = p.position) != null && _.country ? t = 9 : e.params.state || (k = p.position) != null && k.state ? t = 6 : e.params.city || (x = p.position) != null && x.city ? t = 14 : t = 2, new J({
-        apiKey: L.apiKey,
+    onMounted(async () => {
+      var _a, _b, _c, _d, _e, _f, _g, _h;
+      let lat = parseFloat(route.query.lat || ((_b = (_a = state.position) == null ? void 0 : _a.location) == null ? void 0 : _b.lat));
+      let lng = parseFloat(route.query.lng || ((_d = (_c = state.position) == null ? void 0 : _c.location) == null ? void 0 : _d.lng));
+      let zoomLevel;
+      if (route.params.location || ((_e = state.position) == null ? void 0 : _e.location)) {
+        zoomLevel = 15;
+      } else if (route.params.country || ((_f = state.position) == null ? void 0 : _f.country)) {
+        zoomLevel = 9;
+      } else if (route.params.state || ((_g = state.position) == null ? void 0 : _g.state)) {
+        zoomLevel = 6;
+      } else if (route.params.city || ((_h = state.position) == null ? void 0 : _h.city)) {
+        zoomLevel = 14;
+      } else {
+        zoomLevel = 2;
+      }
+      const loader = new Loader({
+        apiKey: props.apiKey,
         version: "weekly",
         libraries: ["places"],
         language: "en"
-      }).load().then(async () => {
-        if (!l || !r) {
-          let o;
-          const n = new google.maps.Geocoder();
+      });
+      loader.load().then(async () => {
+        if (!lat || !lng) {
+          let country;
+          const geocoder = new google.maps.Geocoder();
           try {
-            o = await B();
+            country = await getCountry();
           } catch {
-            o = "Thailand", console.log(error);
+            country = "Thailand";
+            console.log(error);
           }
           try {
-            const a = await n.geocode({ address: o });
-            console.log(a), a ? (l = a.results[0].geometry.location.lat(), r = a.results[0].geometry.location.lng(), t = 6) : console.error("No results found for the country code.");
-          } catch (a) {
-            console.error("Error getting coordinates from country code:", a);
+            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 (error2) {
+            console.error("Error getting coordinates from country code:", error2);
           }
         }
-        if (!l && !r && (e.params.country || e.params.state || e.params.city)) {
-          const o = new google.maps.Geocoder(), n = [
-            e.params.city,
-            e.params.state,
-            e.params.country
+        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,
+            route.params.country
           ].filter(Boolean).join(", ");
           try {
-            const a = await o.geocode({ address: n });
-            a[0] && (l = a[0].geometry.location.lat(), r = a[0].geometry.location.lng());
-          } catch (a) {
-            console.error("Error getting coordinates:", a);
+            const results = await geocoder.geocode({ address });
+            if (results[0]) {
+              lat = results[0].geometry.location.lat();
+              lng = results[0].geometry.location.lng();
+            }
+          } catch (error2) {
+            console.error("Error getting coordinates:", error2);
           }
         }
-        O.value += C.value;
-        const q = {
+        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: e.params.country,
-          state: e.params.state,
-          city: e.params.city,
-          categories: e.query.categories,
-          prices: e.query.prices,
-          delivery: e.query.delivery,
-          sortParam: e.query.sortParam || h.sort.param,
-          sortOrder: e.query.sortOrder || h.sort.order,
-          location: { coordinates: [r, l] },
+          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 || state$1.sort.param,
+          sortOrder: route.query.sortOrder || state$1.sort.order,
+          location: { coordinates: [lng, lat] },
           locationRadius: 1e3,
           limit: 500
         };
-        console.log(q);
-        const z = await I.read(q);
-        M.all = [...M.all, ...z], s.value = new google.maps.Map(document.getElementById("map"), {
-          mapTypeControl: !1,
-          fullscreenControl: !1,
+        console.log(params);
+        const data = await actions.read(params);
+        state$2.all = [...state$2.all, ...data];
+        map.value = new google.maps.Map(document.getElementById("map"), {
+          mapTypeControl: false,
+          fullscreenControl: false,
           styles: [
             {
-              elementType: "geometry",
-              stylers: [
+              "elementType": "geometry",
+              "stylers": [
                 {
-                  color: "#212121"
+                  "color": "#212121"
                 }
               ]
             },
             {
-              elementType: "labels.icon",
-              stylers: [
+              "elementType": "labels.icon",
+              "stylers": [
                 {
-                  visibility: "off"
+                  "visibility": "off"
                 }
               ]
             },
             {
-              elementType: "labels.text.fill",
-              stylers: [
+              "elementType": "labels.text.fill",
+              "stylers": [
                 {
-                  color: "#757575"
+                  "color": "#757575"
                 }
               ]
             },
             {
-              elementType: "labels.text.stroke",
-              stylers: [
+              "elementType": "labels.text.stroke",
+              "stylers": [
                 {
-                  color: "#212121"
+                  "color": "#212121"
                 }
               ]
             },
             {
-              featureType: "administrative",
-              elementType: "geometry",
-              stylers: [
+              "featureType": "administrative",
+              "elementType": "geometry",
+              "stylers": [
                 {
-                  color: "#757575"
+                  "color": "#757575"
                 },
                 {
-                  visibility: "off"
+                  "visibility": "off"
                 }
               ]
             },
             {
-              featureType: "administrative.country",
-              elementType: "labels.text.fill",
-              stylers: [
+              "featureType": "administrative.country",
+              "elementType": "labels.text.fill",
+              "stylers": [
                 {
-                  color: "#9e9e9e"
+                  "color": "#9e9e9e"
                 }
               ]
             },
             {
-              featureType: "administrative.land_parcel",
-              stylers: [
+              "featureType": "administrative.land_parcel",
+              "stylers": [
                 {
-                  visibility: "off"
+                  "visibility": "off"
                 }
               ]
             },
             {
-              featureType: "administrative.locality",
-              elementType: "labels.text.fill",
-              stylers: [
+              "featureType": "administrative.locality",
+              "elementType": "labels.text.fill",
+              "stylers": [
                 {
-                  color: "#bdbdbd"
+                  "color": "#bdbdbd"
                 }
               ]
             },
             {
-              featureType: "administrative.neighborhood",
-              stylers: [
+              "featureType": "administrative.neighborhood",
+              "stylers": [
                 // {
                 //   "visibility": "off"
                 // }
               ]
             },
             {
-              featureType: "poi",
-              stylers: [
+              "featureType": "poi",
+              "stylers": [
                 {
-                  visibility: "off"
+                  "visibility": "off"
                 }
               ]
             },
             {
-              featureType: "poi",
-              elementType: "labels.text.fill",
-              stylers: [
+              "featureType": "poi",
+              "elementType": "labels.text.fill",
+              "stylers": [
                 {
-                  color: "#757575"
+                  "color": "#757575"
                 }
               ]
             },
             {
-              featureType: "poi.park",
-              elementType: "geometry",
-              stylers: [
+              "featureType": "poi.park",
+              "elementType": "geometry",
+              "stylers": [
                 {
-                  color: "#181818"
+                  "color": "#181818"
                 }
               ]
             },
             {
-              featureType: "poi.park",
-              elementType: "labels.text.fill",
-              stylers: [
+              "featureType": "poi.park",
+              "elementType": "labels.text.fill",
+              "stylers": [
                 {
-                  color: "#616161"
+                  "color": "#616161"
                 }
               ]
             },
             {
-              featureType: "poi.park",
-              elementType: "labels.text.stroke",
-              stylers: [
+              "featureType": "poi.park",
+              "elementType": "labels.text.stroke",
+              "stylers": [
                 {
-                  color: "#1b1b1b"
+                  "color": "#1b1b1b"
                 }
               ]
             },
             {
-              featureType: "road",
-              elementType: "geometry.fill",
-              stylers: [
+              "featureType": "road",
+              "elementType": "geometry.fill",
+              "stylers": [
                 {
-                  color: "#2c2c2c"
+                  "color": "#2c2c2c"
                 }
               ]
             },
             {
-              featureType: "road",
-              elementType: "labels",
-              stylers: [
+              "featureType": "road",
+              "elementType": "labels",
+              "stylers": [
                 {
-                  visibility: "off"
+                  "visibility": "off"
                 }
               ]
             },
             {
-              featureType: "road",
-              elementType: "labels.icon",
-              stylers: [
+              "featureType": "road",
+              "elementType": "labels.icon",
+              "stylers": [
                 {
-                  visibility: "off"
+                  "visibility": "off"
                 }
               ]
             },
             {
-              featureType: "road",
-              elementType: "labels.text.fill",
-              stylers: [
+              "featureType": "road",
+              "elementType": "labels.text.fill",
+              "stylers": [
                 {
-                  color: "#8a8a8a"
+                  "color": "#8a8a8a"
                 }
               ]
             },
             {
-              featureType: "road.arterial",
-              elementType: "geometry",
-              stylers: [
+              "featureType": "road.arterial",
+              "elementType": "geometry",
+              "stylers": [
                 {
-                  color: "#373737"
+                  "color": "#373737"
                 }
               ]
             },
             {
-              featureType: "road.arterial",
-              elementType: "labels",
-              stylers: []
+              "featureType": "road.arterial",
+              "elementType": "labels",
+              "stylers": []
             },
             {
-              featureType: "road.highway",
-              elementType: "geometry",
-              stylers: [
+              "featureType": "road.highway",
+              "elementType": "geometry",
+              "stylers": [
                 {
-                  color: "#3c3c3c"
+                  "color": "#3c3c3c"
                 }
               ]
             },
             {
-              featureType: "road.highway",
-              elementType: "labels",
-              stylers: [
+              "featureType": "road.highway",
+              "elementType": "labels",
+              "stylers": [
                 {
-                  visibility: "off"
+                  "visibility": "off"
                 }
               ]
             },
             {
-              featureType: "road.highway.controlled_access",
-              elementType: "geometry",
-              stylers: [
+              "featureType": "road.highway.controlled_access",
+              "elementType": "geometry",
+              "stylers": [
                 {
-                  color: "#4e4e4e"
+                  "color": "#4e4e4e"
                 }
               ]
             },
             {
-              featureType: "road.local",
-              stylers: []
+              "featureType": "road.local",
+              "stylers": []
             },
             {
-              featureType: "road.local",
-              elementType: "labels.text.fill",
-              stylers: [
+              "featureType": "road.local",
+              "elementType": "labels.text.fill",
+              "stylers": [
                 {
-                  color: "#616161"
+                  "color": "#616161"
                 }
               ]
             },
             {
-              featureType: "transit",
-              stylers: [
+              "featureType": "transit",
+              "stylers": [
                 {
-                  visibility: "off"
+                  "visibility": "off"
                 }
               ]
             },
             {
-              featureType: "transit",
-              elementType: "labels.text.fill",
-              stylers: [
+              "featureType": "transit",
+              "elementType": "labels.text.fill",
+              "stylers": [
                 {
-                  color: "#757575"
+                  "color": "#757575"
                 }
               ]
             },
             {
-              featureType: "water",
-              elementType: "geometry",
-              stylers: [
+              "featureType": "water",
+              "elementType": "geometry",
+              "stylers": [
                 {
-                  color: "#000000"
+                  "color": "#000000"
                 }
               ]
             },
             {
-              featureType: "water",
-              elementType: "labels.text",
-              stylers: [
+              "featureType": "water",
+              "elementType": "labels.text",
+              "stylers": [
                 {
-                  visibility: "off"
+                  "visibility": "off"
                 }
               ]
             },
             {
-              featureType: "water",
-              elementType: "labels.text.fill",
-              stylers: [
+              "featureType": "water",
+              "elementType": "labels.text.fill",
+              "stylers": [
                 {
-                  color: "#3d3d3d"
+                  "color": "#3d3d3d"
                 }
               ]
             }
           ],
-          center: { lat: l, lng: r },
-          zoom: parseInt(e.query.zoom || t || "12")
+          center: { lat, lng },
+          zoom: parseInt(route.query.zoom || zoomLevel || "12")
         });
-        for (let o of i.value)
-          o.setMap(null);
-        i.value = [], i.value = z.map((o) => {
-          var a;
-          let n = (a = o.spots[0]) == null ? void 0 : a.location;
-          if (n && n.type === "Point") {
-            let [R, j] = n.coordinates, P = "/marker_2.png";
-            o.products && o.products.length === 0 && (P = "/marker.png");
-            const S = new google.maps.Marker({
-              position: { lng: R, lat: j },
-              map: s.value,
+        for (let marker of markers.value) {
+          marker.setMap(null);
+        }
+        markers.value = [];
+        markers.value = data.map((org) => {
+          var _a2;
+          let location = (_a2 = org.spots[0]) == null ? void 0 : _a2.location;
+          if (location && location.type === "Point") {
+            let [lng2, lat2] = location.coordinates;
+            let markerIcon = "/marker_2.png";
+            if (org.products && org.products.length === 0) {
+              markerIcon = "/marker.png";
+            }
+            const marker = new google.maps.Marker({
+              position: { lng: lng2, lat: lat2 },
+              map: map.value,
               icon: {
-                url: P,
+                url: markerIcon,
                 // URL to the icon
                 scaledSize: new google.maps.Size(32, 48),
                 // icon dimensions
@@ -389,54 +437,60 @@ const X = (y) => (U("data-v-3b081dcc"), y = y(), A(), y), Y = { class: "h-100 w-
                 // point on the icon that corresponds to the geographic location of the marker
               }
             });
-            return S.addListener("click", () => {
-              b.push({ name: "Organization", params: { _id: o._id } });
-            }), S;
+            marker.addListener("click", () => {
+              router.push({ name: "Organization", params: { _id: org._id } });
+            });
+            return marker;
           }
           return null;
-        }).filter((o) => o !== null), google.maps.event.addListener(s.value, "center_changed", () => {
-          let o = s.value.getCenter();
-          m.value = {
-            lat: o.lat(),
-            lng: o.lng()
+        }).filter((marker) => marker !== null);
+        google.maps.event.addListener(map.value, "center_changed", () => {
+          let center = map.value.getCenter();
+          currentMapCenter.value = {
+            lat: center.lat(),
+            lng: center.lng()
           };
-        }), google.maps.event.addListener(s.value, "zoom_changed", () => {
-          w.value = s.value.getZoom();
+        });
+        google.maps.event.addListener(map.value, "zoom_changed", () => {
+          currentMapZoom.value = map.value.getZoom();
         });
       });
     });
-    const N = async () => {
-      const l = {
-        country: e.params.country,
-        state: e.params.state,
-        city: e.params.city,
-        categories: e.query.categories,
-        prices: e.query.prices,
-        delivery: e.query.delivery,
-        sortParam: e.query.sortParam || h.sort.param,
-        sortOrder: e.query.sortOrder || h.sort.order,
-        locationRadius: 8e3 / w.value,
+    const searchInCurrentLocation = async () => {
+      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,
+        sortParam: route.query.sortParam || state$1.sort.param,
+        sortOrder: route.query.sortOrder || state$1.sort.order,
+        locationRadius: 8e3 / currentMapZoom.value,
         limit: 100,
         location: {
           type: "Point",
-          coordinates: [m.value.lng, m.value.lat]
+          coordinates: [currentMapCenter.value.lng, currentMapCenter.value.lat]
         }
       };
-      console.log([m.value.lng, m.value.lat]);
+      console.log([currentMapCenter.value.lng, currentMapCenter.value.lat]);
       try {
-        const r = await I.read(l);
-        for (let t of i.value)
-          t.setMap(null);
-        i.value = [], i.value = r.map((t) => {
-          var u;
-          let f = (u = t.spots[0]) == null ? void 0 : u.location;
-          if (f && f.type === "Point") {
-            let [g, T] = f.coordinates, v = t.products && t.products.length > 0 ? "/marker_2.png" : "/marker.png";
-            const d = new google.maps.Marker({
-              position: { lng: g, lat: T },
-              map: s.value,
+        const data = await actions.read(params);
+        for (let marker of markers.value) {
+          marker.setMap(null);
+        }
+        markers.value = [];
+        markers.value = data.map((org) => {
+          var _a;
+          let location = (_a = org.spots[0]) == null ? void 0 : _a.location;
+          if (location && location.type === "Point") {
+            let [lng, lat] = location.coordinates;
+            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: v,
+                url: markerIcon,
                 // URL to the icon
                 scaledSize: new google.maps.Size(32, 48),
                 // icon dimensions
@@ -446,32 +500,37 @@ const X = (y) => (U("data-v-3b081dcc"), y = y(), A(), y), Y = { class: "h-100 w-
                 // point on the icon that corresponds to the geographic location of the marker
               }
             });
-            return d.addListener("click", () => {
-              b.push({ name: "Organization", params: { _id: t._id } });
-            }), d;
+            marker.addListener("click", () => {
+              router.push({ name: "Organization", params: { _id: org._id } });
+            });
+            return marker;
           }
           return null;
-        }).filter((t) => t !== null);
-      } catch (r) {
-        console.error("Error fetching organizations:", r);
+        }).filter((marker) => marker !== null);
+      } catch (error2) {
+        console.error("Error fetching organizations:", error2);
       }
     };
-    return (l, r) => (V(), $("div", Y, [
-      E("div", ee, [
-        F(Q, {
-          submit: N,
-          class: "mn-l-auto mn-r-auto bg-black t-white w-min-20 button"
-        }, {
-          default: G(() => [
-            Z(" Search in This Location ")
-          ]),
-          _: 1
-        })
-      ]),
-      te
-    ]));
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          createVNode(_sfc_main$1, {
+            submit: searchInCurrentLocation,
+            class: "mn-l-auto mn-r-auto bg-black t-white w-min-20 button"
+          }, {
+            default: withCtx(() => [
+              createTextVNode(" Search in This Location ")
+            ]),
+            _: 1
+          })
+        ]),
+        _hoisted_3
+      ]);
+    };
   }
-}, me = /* @__PURE__ */ W(oe, [["__scopeId", "data-v-3b081dcc"]]);
+};
+const Map = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3b081dcc"]]);
 export {
-  me as default
+  Map as default
 };
+//# sourceMappingURL=Map.vue.js.map