Merge pull request #185 from jcachuryb/master

Map Popup display improved
dbca-wa · Feb 3, 2025 · b451cd8 · b451cd8
2 parents 03a6d3a + 617e05b
commit b451cd8
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 35 deletions.
diff --git a/parkstay/frontend/searchavail2/src/components/parkfinder.vue b/parkstay/frontend/searchavail2/src/components/parkfinder.vue
@@ -478,7 +478,7 @@ export default {
             var coord = [];
             coord[0] = parseFloat(coord_1);
             coord[1] = parseFloat(coord_2);
-            var fromLonLat = vm.ol.proj.fromLonLat(coord);
+            let fromLonLat = vm.ol.proj.fromLonLat(coord);
             var view = this.olmap.getView();
             // zoom slightly closer in for campgrounds
             var resolution = vm.resolutions[10];
@@ -487,6 +487,9 @@ export default {
             }
 
             // pan to the spot, zoom slightly closer in for campgrounds
+            if (vm.selectedFeature) {
+                fromLonLat = vm.selectedFeature.getGeometry().getCoordinates()
+            }
             view.animate({
                 center: fromLonLat,
                 resolution: resolution,

diff --git a/parkstay/frontend/searchavail2/src/utils/map_init_mount.js b/parkstay/frontend/searchavail2/src/utils/map_init_mount.js
@@ -189,9 +189,9 @@ export default function (vm) {
             vm.groundsData.extend(features);
             vm.groundsSource.loadSource();
         },
-        error: function(error) { 
-            console.log(error)
-        }
+        error: function (error) {
+            console.log(error);
+        },
     });
 
     vm.groundsSource = new ol.source.Vector({
@@ -252,8 +252,13 @@ export default function (vm) {
         let icon = is_match ? vm.sitesInPersonIcon : vm.sitesNoMatchIcon;
         switch (campgroundType) {
             case 0:
-                const hasBookings = vm.campgroundAvailablity[campgroundId].total_bookable > 0
-                icon = is_match ? hasBookings ? vm.sitesOnlineIcon : vm.sitesOnlineNotAvailIcon : vm.sitesNoMatchIcon
+                const hasBookings =
+                    vm.campgroundAvailablity[campgroundId].total_bookable > 0;
+                icon = is_match
+                    ? hasBookings
+                        ? vm.sitesOnlineIcon
+                        : vm.sitesOnlineNotAvailIcon
+                    : vm.sitesNoMatchIcon;
                 break;
             case 2:
                 icon = is_match ? vm.sitesAltIcon : vm.sitesNoMatchIcon;
@@ -268,7 +273,7 @@ export default function (vm) {
             anchor: [0.5, 1.0],
             anchorXUnits: 'fraction',
             anchorYUnits: 'fraction',
-        })
+        });
     }
 
     vm.grounds = new ol.layer.Vector({
@@ -277,15 +282,22 @@ export default function (vm) {
             var style = feature.get('style');
             const is_match = feature.get('match') ?? true;
             const campgroundType = feature.get('campground_type');
-            const campgroundId = feature.getId()
+            const campgroundId = feature.getId();
             if (!style) {
                 style = new ol.style.Style({
-                    image: getOLIcon(vm, campgroundId, campgroundType, is_match),
+                    image: getOLIcon(
+                        vm,
+                        campgroundId,
+                        campgroundType,
+                        is_match
+                    ),
                     zIndex: -feature.getGeometry().getCoordinates()[1],
                 });
                 feature.set('style', style);
             } else {
-                style.setImage(getOLIcon(vm, campgroundId, campgroundType, is_match))
+                style.setImage(
+                    getOLIcon(vm, campgroundId, campgroundType, is_match)
+                );
             }
             return style;
         },
@@ -383,9 +395,13 @@ export default function (vm) {
     vm.olmap.on('singleclick', function (ev) {
         var result = ev.map.forEachFeatureAtPixel(
             ev.pixel,
-            function (feature, layer) {
+            async function (feature, layer) {
+                vm.popup.setPosition(undefined); // resets popup
                 vm.selectedFeature = feature;
-                vm.popup.setPosition(feature.getGeometry().getCoordinates());
+
+                const coord = feature.getGeometry().getCoordinates();
+                const view = vm.olmap.getView();
+                let resolution = view.getResolution();
                 // really want to make vue.js render this, except reactivity dies
                 // when you pass control of the popup element to OpenLayers :(
                 $('#mapPopupName')[0].innerHTML = feature.get('name');
@@ -426,10 +442,10 @@ export default function (vm) {
                 // This portion needs to be modified to accomodate the new button
                 // Online/Offline sites is determined by the backend api
                 const isMatch = feature.get('match') === true;
-                if(isMatch) {
+                if (isMatch) {
                     $('#mapPopupButton')[0].className = 'button';
                 } else {
-                    $('#mapPopupButton').html("More information")
+                    $('#mapPopupButton').html('More information');
                     $('#mapPopupButton')[0].className = 'button formButton5';
                 }
 
@@ -442,13 +458,15 @@ export default function (vm) {
                             '&' +
                             vm.bookingParam
                     );
-                    if(isMatch) {
+                    if (isMatch) {
                         $('#mapPopupButton').html('See availability');
                         if (feature.get('available')) {
-                            $('#mapPopupButton')[0].className = 'button formButton1';
+                            $('#mapPopupButton')[0].className =
+                                'button formButton1';
                         } else {
-                            $('#mapPopupButton')[0].className = 'button formButton4';
-                        }                            
+                            $('#mapPopupButton')[0].className =
+                                'button formButton4';
+                        }
                     }
                 } else if (feature.get('campground_type') == 1) {
                     $('#mapPopupButton').attr(
@@ -457,15 +475,18 @@ export default function (vm) {
                             '/search-availability/campground/?site_id=' +
                             feature.getId()
                     );
-                    if(isMatch) {
+                    if (isMatch) {
                         $('#mapPopupButton').html('More information');
                         $('#mapPopupButton')[0].className = 'button formButton';
                     }
                 } else {
                     // Now,this section is used for the partner accommodation
-                    if(isMatch) {
-                        $("#mapPopupButton").html('More Information<i class="bi bi-box-arrow-up-right ms-2">' );
-                        $('#mapPopupButton')[0].className = 'button formButton2';
+                    if (isMatch) {
+                        $('#mapPopupButton').html(
+                            'More Information<i class="bi bi-box-arrow-up-right ms-2">'
+                        );
+                        $('#mapPopupButton')[0].className =
+                            'button formButton2';
                     }
                     $('#mapPopupButton').attr(
                         'href',
@@ -474,7 +495,16 @@ export default function (vm) {
                             feature.getId()
                     );
                 }
-                return true;
+                // makes sure the 
+                setTimeout(()=> {
+                    vm.popup.setPosition(coord);
+                    view.animate({
+                        center: coord,
+                        resolution: resolution,
+                        duration: 1000,
+                    });
+                    return true;
+                }, 100)
             },
             {
                 layerFilter: function (layer) {

diff --git a/parkstay/static/ps/js/search_avail.js b/parkstay/static/ps/js/search_avail.js
@@ -474,6 +474,8 @@ var search_avail = {
     $("#region-park").val("");
     $("#region-park").show();
     $("#notice_div").show();
+
+    $("#mapPopupClose").trigger("click");
   },
   select_region: function (value_id, value_name, coord_1, coord_2, zoom_level) {
     $("#coord_1").val(coord_1);
@@ -491,6 +493,8 @@ var search_avail = {
     $("#ps_search_dropdown").remove();
     $("#region-park").hide();
     $("#notice_div").hide();
+
+    $("#mapPopupClose").trigger("click");
   },
   select_filter_tab: function (tab) {
     $("#card-preview").hide();
@@ -501,7 +505,7 @@ var search_avail = {
     if (tab == "campgrounds") {
       $("#card-preview").show();
       $("#card-preview-tab").addClass("active");
-      $("#mapPopupClose").trigger("click");
+      // $("#mapPopupClose").trigger("click");
     }
 
     if (tab == "map") {

diff --git a/parkstay/static/searchavail2_vue/js/main-legacy.js b/parkstay/static/searchavail2_vue/js/main-legacy.js
diff --git a/parkstay/static/searchavail2_vue/js/main.js b/parkstay/static/searchavail2_vue/js/main.js