[feature] Setting url fragments and applying to that data on both maps

openwisp_monitoring/device/admin.py

@@ -1,6 +1,7 @@
 import uuid
 from urllib.parse import urljoin
 
+from django import forms
 from django.contrib import admin
 from django.contrib.contenttypes.admin import GenericStackedInline
 from django.contrib.contenttypes.forms import BaseGenericInlineFormSet
@@ -24,6 +25,7 @@
 
 from openwisp_controller.config.admin import DeactivatedDeviceReadOnlyMixin
 from openwisp_controller.config.admin import DeviceAdmin as BaseDeviceAdmin
+from openwisp_controller.geo.admin import DeviceLocationInline
 from openwisp_users.multitenancy import MultitenantAdminMixin
 from openwisp_utils.admin import ReadOnlyAdmin
 
@@ -567,6 +569,19 @@ def has_delete_permission(self, request, obj=None):
         return super(admin.ModelAdmin, self).has_delete_permission(request, obj)
 
 
+def patch_device_location_inline(self):
+    base = super(DeviceLocationInline, self).media
+    extra = forms.Media(
+        js=(
+            "admin/js/jquery.init.js",
+            "monitoring/js/location-inline.js",
+        )
+    )
+    return base + extra
+
+
+DeviceLocationInline.media = property(patch_device_location_inline)
+
 admin.site.unregister(Device)
 admin.site.register(Device, DeviceAdminExportable)
 

openwisp_monitoring/device/static/monitoring/js/device-map.js

@@ -257,7 +257,11 @@
         });
         $(".floorplan-btn").on("click", function () {
           const floorplanUrl = getIndoorCoordinatesUrl(locationId);
-          window.openFloorPlan(floorplanUrl);
+          window.openFloorPlan(floorplanUrl, locationId);
+        });
+        el.find(".leaflet-popup-close-button").on("click", function () {
+          const id = netjsongraphInstance.config.bookmarkableActions.id;
+          netjsongraphInstance.utils.removeUrlFragment(id);
         });
         loadingOverlay.hide();
       },
@@ -329,6 +333,10 @@
           ],
         },
       },
+      bookmarkableActions: {
+        enabled: true,
+        id: "dashboard-geo-map",
+      },
       mapTileConfig: tiles,
       nodeCategories: Object.keys(STATUS_COLORS).map((status) => ({
         name: status,
@@ -535,8 +543,31 @@
       },
       // Added to open popup for a specific location Id in selenium tests
       openPopup: function (locationId) {
-        const nodeData = map?.data?.nodes?.find((n) => n.id === locationId);
-        loadPopUpContent(nodeData, map);
+        const index = map?.data?.nodes?.findIndex((n) => n.id === locationId);
+        const nodeData = map?.data?.nodes?.[index];
+        if (index === -1 || !nodeData) {
+          const id = map.config.bookmarkableActions.id;
+          map.utils.removeUrlFragment(id);
+          console.error(`Node with ID "${locationId}" not found.`);
+          return;
+        }
+        const option = map.echarts.getOption();
+        const series = option.series.find(
+          (s) => s.type === "scatter" || "effectScatter",
+        );
+        const seriesIndex = option.series.indexOf(series);
+
+        const params = {
+          componentType: "series",
+          componentSubType: series.type,
+          seriesIndex: seriesIndex,
+          dataIndex: index,
+          data: {
+            ...series.data[index],
+            node: nodeData,
+          },
+        };
+        map.echarts.trigger("click", params);
       },
     });
     map.render();