[feature] Allow showing moving device in dashboard map #664

.github/workflows/ci.yml

@@ -85,8 +85,6 @@ jobs:
           pip install -r requirements-test.txt
           pip install -U -I -e .
           pip uninstall -y Django
-          # TODO: Remove before merging - install branch build of openwisp-utils for CI testing
-          pip install -U -I "openwisp-utils @ https://github.com/openwisp/openwisp-utils/tarball/gsoc25-map-adjustments"
           pip install -U ${{ matrix.django-version }}
           sudo npm install -g prettier
 

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

@@ -554,7 +554,7 @@
         }
         const option = map.echarts.getOption();
         const series = option.series.find(
-          (s) => s.type === "scatter" || "effectScatter",
+          (s) => s.type === "scatter" || s.type === "effectScatter",
         );
         const seriesIndex = option.series.indexOf(series);
 
@@ -573,6 +573,7 @@
       },
     });
     map.render();
+    listenForLocationUpdates(map);
     window._owGeoMap = map;
   }
 
@@ -588,4 +589,24 @@
     success: onAjaxSuccess,
     context: window,
   });
+  function listenForLocationUpdates(map) {
+    if (!map) {
+      return;
+    }
+    var host = window.location.host,
+      protocol = window.location.protocol === "http:" ? "ws" : "wss",
+      ws = new ReconnectingWebSocket(protocol + "://" + host + "/ws/loci/location/");
+    ws.onmessage = function (e) {
+      const data = JSON.parse(e.data);
+      const [lng, lat] = data.geometry.coordinates;
+      if (currentPopup) {
+        $(".leaflet-popup").hide();
+      }
+      map.utils.moveNodeInRealTime(data.id, { lng, lat });
+      if (currentPopup) {
+        currentPopup.setLatLng([lat, lng]);
+        $(".leaflet-popup").show();
+      }
+    };
+  }
 })(django.jQuery);

openwisp_monitoring/device/static/monitoring/js/floorplan.js

@@ -22,7 +22,7 @@
   // When switching maps we expect only two maps at most; the previous map should
   // be removed before adding the new one.
   // Note: future logic to manage this will be implemented in netjsongraph.js.
-  const rawUrlFragments = window.location.hash.replace(/^#/, "");
+  const rawUrlFragments = decodeURIComponent(window.location.hash.replace(/^#/, ""));
   const fragments = rawUrlFragments.split(";").filter((f) => f.trim() !== "");
 
   const indoorMapFragment = fragments.find((fragment) => {

openwisp_monitoring/device/tests/test_admin.py

@@ -137,8 +137,8 @@ def test_device_admin(self):
     def test_dashboard_map_on_index(self):
         url = reverse("admin:index")
         response = self.client.get(url)
-        self.assertContains(response, "geoJsonUrl: 'http://testserver/api")
-        self.assertContains(response, "locationDeviceUrl: 'http://testserver/api")
+        self.assertContains(response, "geoJsonUrl: 'http://testserver/api/")
+        self.assertContains(response, "locationDeviceUrl: 'http://testserver/api/")
 
     def test_wifisession_dashboard_chart_query(self):
         url = reverse("admin:index")