[fix] Add loaders and button tags

Author: dee077

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%;

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

@@ -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();
       },
@@ -599,11 +602,11 @@
     ws.onmessage = function (e) {
       const data = JSON.parse(e.data);
       const [lng, lat] = data.geometry.coordinates;
-      if (currentPopup) {
+      if (currentPopup && data.id === currentPopupLocationId) {
         $(".leaflet-popup").hide();
       }
       map.utils.moveNodeInRealTime(data.id, { lng, lat });
-      if (currentPopup) {
+      if (currentPopup && data.id === currentPopupLocationId) {
         currentPopup.setLatLng([lat, lng]);
         $(".leaflet-popup").show();
       }

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

@@ -181,6 +181,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));
@@ -191,6 +192,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);
@@ -203,6 +205,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);
@@ -221,7 +224,6 @@
       .filter(`[data-floor="${floor}"]`)
       .addClass("active selected");
 
-    $(".floorplan-loading-spinner").hide();
     await fetchData(url, floor);
 
     const nodesThisFloor = { nodes: allResults[floor], links: [] };
@@ -342,6 +344,7 @@
         map.eachLayer((layer) => layer._url && map.removeLayer(layer));
         const img = new Image();
         img.src = imageUrl;
+        $(".floorplan-loading-spinner").show();
         await img.decode();
         let initialZoom;
 
@@ -395,6 +398,7 @@
         map.setMaxBounds(bnds.pad(1));
         initialZoom = map.getZoom();
         map.invalidateSize();
+        $(".floorplan-loading-spinner").hide();
 
         map.on("fullscreenchange", () => {
           const floorNavigation = $("#floorplan-navigation");

openwisp_monitoring/device/static/monitoring/js/location-inline.js

@@ -14,16 +14,20 @@
     }
 
     const openLocationBtn = `
-        <div class="form-row field-location-view-button" style="display: block;">
+        <div class="form-row field-location-view-button" style="display: flex;">
           <div>
             <div class="flex-container">
+                <label for="id_devicelocation-0-map">Map:</label>
                 <a href="/admin/device_monitoring/map#${geoMapId}"
                    id="open-location-btn"
                    class="default-btn"
                    style="color: white; text-decoration: none;">
-                     Open Location on Map
+                     View on General Map
                 </a>
             </div>
+            <div class="help" id="id_devicelocation-0-type_helptext">
+              <div>Opens the general map view focused on this location</div>
+            </div>
           </div>
         </div>
     `;
@@ -38,13 +42,17 @@
         <div class="form-row field-indoor-view-button" style="display: block;">
           <div>
             <div class="flex-container">
+                <label for="id_devicelocation-0-map">Map:</label>
                 <a href="/admin/device_monitoring/map#${geoMapId};${indoorMapId}"
                    id="open-indoor-device-btn"
                    class="default-btn"
                    style="color: white; text-decoration: none;">
-                     Open Device on Map
+                     View on General Indoor Map
                 </a>
             </div>
+            <div class="help" id="id_devicelocation-0-type_helptext">
+              <div>Opens the general indoor map view focused on this device</div>
+            </div>
           </div>
         </div>
     `;

openwisp_monitoring/device/templates/admin/dashboard/device_map.html

@@ -20,6 +20,6 @@
       <p>{% trans 'No map data to show' %}.</p>
       <p><a class="button submit" href="#close">Close</a></p>
     </div>
-    <div class="ow-loading-spinner"></div>
   </div>
+  <div class="ow-loading-spinner"></div>
 </div>

openwisp_monitoring/tests/test_selenium.py

@@ -744,11 +744,17 @@ def test_url_fragment_actions_on_indoor_map(self):
             self.web_driver.switch_to.window(tabs[0])
 
     def test_dashboard_map_without_permissions(self):
+        org = self._get_org()
         user = self._create_user(
-            username="testuser", password="password", is_staff=True, is_superuser=True
-        )
-        permissions = Permission.objects.filter(codename__endswith="devicelocation")
-        user.user_permissions.remove(*permissions)
+            username="testuser",
+            password="password",
+            is_staff=True,
+            is_superuser=False,
+            email="[email protected]",
+        )
+        self._create_org_user(user=user, organization=org, is_admin=True)
+        permissions = Permission.objects.filter(codename__endswith="location")
+        user.user_permissions.add(*permissions)
         self.login(username="testuser", password="password")
         no_data_div = self.find_element(By.CSS_SELECTOR, ".no-data")
         self.assertTrue(no_data_div.is_displayed())