[feature] Allowed showing moving devices in dashboard map #664

- Added the possibility to show changes to the position
  of moving nodes in realtime
- Improved loading overlay and other UX details

Closes #664

---------

Co-authored-by: Gagan Deep <pandafy.dev@gmail.com>
Co-authored-by: Federico Capoano <f.capoano@openwisp.io>

Author: 3 people

.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/admin.py

@@ -649,7 +649,8 @@ def patch_device_location_inline(self):
         js=(
             "admin/js/jquery.init.js",
             "monitoring/js/location-inline.js",
-        )
+        ),
+        css={"all": ("monitoring/css/monitoring.css",)},
     )
     return base + extra
 

openwisp_monitoring/device/migrations/0010_map.py

@@ -17,7 +17,6 @@ class Migration(migrations.Migration):
             options={
                 "abstract": False,
                 "proxy": True,
-                "swappable": "DEVICE_MONITORING_MAP_MODEL",
                 "indexes": [],
                 "constraints": [],
             },

openwisp_monitoring/device/models.py

@@ -43,4 +43,3 @@ class Map(BaseLocation):
     class Meta:
         proxy = True
         abstract = False
-        swappable = swappable_setting("device_monitoring", "Map")

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

@@ -27,19 +27,22 @@
   font-weight: bold;
   text-transform: uppercase;
 }
-#device-map-container {
-  height: 430px;
-  width: 90%;
-  margin: 30px auto 0px auto;
+#dashboard-map-overlay {
   position: relative;
-  border: 1px solid rgba(0, 0, 0, 0.3);
 }
-#device-map-container .ow-loading-spinner {
+#dashboard-map-overlay .ow-loading-spinner {
   position: absolute;
   z-index: 9999;
   top: 41%;
   left: 49%;
 }
+#device-map-container {
+  height: 430px;
+  width: 90%;
+  margin: 30px auto 0px auto;
+  position: relative;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+}
 #device-map-container .leaflet-interactive:focus {
   outline: none;
 }
@@ -230,6 +233,7 @@
   min-height: 375px;
 }
 #floorplan-container {
+  position: relative;
   background: white;
   z-index: 99999;
   padding: 16px;
@@ -270,6 +274,12 @@
   height: 100%;
   flex: 1;
 }
+.floorplan-loading-spinner {
+  position: absolute;
+  top: 40%;
+  left: 50%;
+  z-index: 1000;
+}
 .floor-content {
   width: 100%;
   height: 100%;
@@ -401,3 +411,10 @@
     min-width: auto;
   }
 }
+
+/* Map Page */
+.dedicated-map-page {
+  width: 100%;
+  height: 87.7vh !important;
+  margin: 15px auto 0 auto !important;
+}

openwisp_monitoring/device/static/monitoring/css/loading.gif

@@ -130,3 +130,12 @@ ul.tabs .charts > .current,
 ul.tabs .status > .current {
   background-color: var(--body-bg);
 }
+
+/* Device Location Inline */
+fieldset.module.aligned .form-row.view-on-map-div {
+  display: block;
+}
+fieldset.module .view-on-map-btn {
+  color: white;
+  text-decoration: none !important;
+}

openwisp_monitoring/device/static/monitoring/css/monitoring.css

@@ -1,7 +1,7 @@
 "use strict";
 
 (function ($) {
-  const loadingOverlay = $("#device-map-container .ow-loading-spinner");
+  const loadingOverlay = $("#dashboard-map-overlay .ow-loading-spinner");
   const localStorageKey = "ow-map-shown";
   const mapContainer = $("#device-map-container");
   const statuses = ["critical", "problem", "ok", "unknown", "deactivated"];
@@ -51,6 +51,7 @@
   };
 
   let currentPopup = null;
+  let currentPopupLocationId = null;
 
   const loadPopUpContent = function (nodeData, netjsongraphInstance, url) {
     loadingOverlay.show();
@@ -61,7 +62,6 @@
     if (currentPopup) {
       currentPopup.remove();
     }
-    loadingOverlay.show();
 
     $.ajax({
       dataType: "json",
@@ -137,6 +137,7 @@
           </div>
         `;
 
+        currentPopupLocationId = locationId;
         currentPopup = L.popup({
           autoPan: true,
           autoPanPadding: [25, 25],
@@ -262,6 +263,8 @@
         el.find(".leaflet-popup-close-button").on("click", function () {
           const id = netjsongraphInstance.config.bookmarkableActions.id;
           netjsongraphInstance.utils.removeUrlFragment(id);
+          currentPopup = null;
+          currentPopupLocationId = null;
         });
         loadingOverlay.hide();
       },
@@ -554,7 +557,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 +576,7 @@
       },
     });
     map.render();
+    listenForLocationUpdates(map);
     window._owGeoMap = map;
   }
 
@@ -588,4 +592,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 && data.id === currentPopupLocationId) {
+        $(".leaflet-popup").hide();
+      }
+      map.utils.moveNodeInRealTime(data.id, { lng, lat });
+      if (currentPopup && data.id === currentPopupLocationId) {
+        currentPopup.setLatLng([lat, lng]);
+        $(".leaflet-popup").show();
+      }
+    };
+  }
 })(django.jQuery);

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

@@ -2,7 +2,6 @@
 
 (function ($) {
   const status_colors = window._owGeoMapConfig.STATUS_COLORS;
-
   let allResults = {};
   let floors = [];
   let currentFloor = null;
@@ -13,7 +12,6 @@
   let maps = {};
   let locationId = null;
   let popstateHandler = null;
-
   // Use case: we support overlaying two maps. The URL hash contains up to two
   // fragments separated by ';' — one is the geo map and the other is an indoor map.
   //
@@ -90,10 +88,8 @@
     const $floorNavigation = createFloorNavigation();
 
     $(".menu-backdrop").addClass("active");
-
     $("#dashboard-map-overlay").append($floorPlanContainer);
     $("#floorplan-overlay").append($floorNavigation);
-
     $("#floorplan-close-btn").on("click", closeButtonHandler);
     addFloorButtons(selectedIndex, navWindowStart);
     addNavigationHandlers(url);
@@ -201,7 +197,6 @@
 
     $(".left-arrow").toggleClass("disabled", selectedIndex === 0);
     $(".right-arrow").toggleClass("disabled", selectedIndex === floors.length - 1);
-
     $(".floor-btn").removeClass("active selected");
     $('.floor-btn[data-index="' + selectedIndex + '"]').addClass("active selected");
   }
@@ -212,6 +207,7 @@
 
     $nav.off("click");
     $nav.on("click", ".floor-btn", async (e) => {
+      $(".floorplan-loading-spinner").show();
       selectedIndex = +e.currentTarget.dataset.index;
       const center = Math.floor(NAV_WINDOW_SIZE / 2);
       navWindowStart = Math.max(0, Math.min(selectedIndex - center, maxStart));
@@ -222,6 +218,7 @@
     });
 
     $nav.on("click", ".right-arrow:not(.disabled)", async () => {
+      $(".floorplan-loading-spinner").show();
       if (selectedIndex < floors.length - 1) {
         selectedIndex++;
         const center = Math.floor(NAV_WINDOW_SIZE / 2);
@@ -234,6 +231,7 @@
     });
 
     $nav.on("click", ".left-arrow:not(.disabled)", async () => {
+      $(".floorplan-loading-spinner").show();
       if (selectedIndex > 0) {
         selectedIndex--;
         const center = Math.floor(NAV_WINDOW_SIZE / 2);
@@ -252,7 +250,6 @@
       .filter(`[data-floor="${floor}"]`)
       .addClass("active selected");
 
-    $(".floorplan-loading-spinner").hide();
     await fetchData(url, floor);
 
     const nodesThisFloor = { nodes: allResults[floor], links: [] };
@@ -437,6 +434,7 @@
         map.setMaxBounds(bnds.pad(1));
         initialZoom = map.getZoom();
         map.invalidateSize();
+        $(".floorplan-loading-spinner").hide();
 
         map.on("fullscreenchange", () => {
           const floorNavigation = $("#floorplan-navigation");