[feature] Add a new map page

Author: dee077

openwisp_monitoring/device/admin.py

@@ -8,7 +8,7 @@
 from django.contrib.contenttypes.models import ContentType
 from django.forms import ModelForm
 from django.templatetags.static import static
-from django.urls import resolve, reverse
+from django.urls import resolve, reverse, reverse_lazy, path
 from django.utils import timezone
 from django.utils.formats import localize
 from django.utils.html import format_html
@@ -45,6 +45,7 @@
 Notification = load_model("openwisp_notifications", "Notification")
 Check = load_model("check", "Check")
 Organization = load_model("openwisp_users", "Organization")
+MapPage = load_model("device_monitoring", "Map")
 
 
 class CheckInlineFormSet(BaseGenericInlineFormSet):
@@ -569,6 +570,69 @@ def has_delete_permission(self, request, obj=None):
         return super(admin.ModelAdmin, self).has_delete_permission(request, obj)
 
 
+class MapPageAdmin(MultitenantAdminMixin, admin.ModelAdmin):
+    """
+    Overrides the changelist template of proxy Model Map to render
+    a full-screen interactive map using custom template map_page.html.
+    """
+
+    change_list_template = "admin/map/map_page.html"
+
+    class Media:
+        js = [
+            'monitoring/js/lib/netjsongraph.min.js',
+            'monitoring/js/lib/leaflet.fullscreen.min.js',
+        ]
+        css = {
+            'all': [
+                'monitoring/css/device-map.css',
+                'leaflet/leaflet.css',
+                'monitoring/css/leaflet.fullscreen.css',
+                'monitoring/css/netjsongraph.css',
+            ]
+        }
+
+    def has_module_permission(self, request):
+        """Hide the model section from the admin index page."""
+        return False
+
+    def changelist_view(self, request, extra_context=None):
+        loc_geojson_url = reverse_lazy(
+            'monitoring:api_location_geojson', urlconf=MONITORING_API_URLCONF
+        )
+        device_list_url = reverse_lazy(
+            'monitoring:api_location_device_list',
+            urlconf=MONITORING_API_URLCONF,
+            args=['000'],
+        )
+        indoor_coordinates_list_url = reverse_lazy(
+            "monitoring:api_indoor_coordinates_list",
+            urlconf=MONITORING_API_URLCONF,
+            args=["000"],
+        )
+        if MONITORING_API_BASEURL:
+            loc_geojson_url = urljoin(MONITORING_API_BASEURL, str(loc_geojson_url))
+            device_list_url = urljoin(MONITORING_API_BASEURL, str(device_list_url))
+            indoor_coordinates_list_url = urljoin(
+                MONITORING_API_BASEURL, str(indoor_coordinates_list_url)
+            )
+        extra_context = extra_context or {}
+        extra_context.update(
+            {
+                "monitoring_device_list_url": device_list_url,
+                "monitoring_location_geojson_url": loc_geojson_url,
+                "monitoring_indoor_coordinates_list": indoor_coordinates_list_url,
+                "monitoring_labels": app_settings.HEALTH_STATUS_LABELS,
+                # By default shows 'Select Map to change' heading making it empty to hide it
+                'title': '',
+            }
+        )
+        return super().changelist_view(request, extra_context=extra_context)
+
+
+admin.site.register(MapPage, MapPageAdmin)
+
+# Adding additonal js to add view on map buttons on DeviceLocationInline
 def patch_device_location_inline(self):
     base = super(DeviceLocationInline, self).media
     extra = forms.Media(

openwisp_monitoring/device/models.py

@@ -9,7 +9,7 @@
 )
 
 BaseDevice = load_model("config", "Device", require_ready=False)
-
+BaseLocation = load_model("geo", "Location", require_ready=False)
 
 class DeviceData(AbstractDeviceData, BaseDevice):
     checks = GenericRelation(get_model_name("check", "Check"))
@@ -36,3 +36,10 @@ class WifiSession(AbstractWifiSession):
     class Meta(AbstractWifiSession.Meta):
         abstract = False
         swappable = swappable_setting("device_monitoring", "WifiSession")
+
+
+class Map(BaseLocation):
+    class Meta:
+        proxy = True
+        abstract = False
+        swappable = swappable_setting("device_monitoring", "Map")

openwisp_monitoring/device/static/monitoring/js/lib/netjsongraph.min.js

@@ -2,52 +2,50 @@
 
 (function ($) {
   $(document).ready(function () {
-    const location_parent = $("fieldset.module.aligned.loci.coords");
-    const floorplan_parent = $("fieldset.module.aligned.indoor.coords");
+    const locationParent = $("fieldset.module.aligned.loci.coords");
+    const floorplanParent = $("fieldset.module.aligned.indoor.coords");
     const deviceLocationId = $("#id_devicelocation-0-id").val();
     const locationId = $("#id_devicelocation-0-location").val();
     const floor = $("#id_devicelocation-0-floor").val();
     const geoMapId = "dashboard-geo-map";
     const indoorMapId = `${locationId}:${floor}`;
 
-    const open_location_btn = `
+    const openLocationBtn = `
         <div class="form-row field-location-view-button" style="display: block;">
           <div>
-            <div class="flex-container">                
-              <label for="id_devicelocation-0-address">View on Map:</label>                
-                <a href="/#id=${geoMapId}&nodeId=${locationId}" 
+            <div class="flex-container">                              
+                <a href="/admin/device_monitoring/map#id=${geoMapId}&nodeId=${locationId}" 
                    id="open-location-btn"
                    class="default-btn"
                    style="color: white; text-decoration: none;">
-                     Open Location
+                     Open Location on Map
                 </a>                    
             </div>
           </div>    
         </div>
     `;
 
-    const open_indoor_device_btn = `
+    const openIndoorDeviceBtn = `
         <div class="form-row field-indoor-view-button" style="display: block;">
           <div>
-            <div class="flex-container">                
-              <label for="id_devicelocation-0-address">View on Indoor Map:</label>                
-                <a href="/#id=${indoorMapId}&nodeId=${deviceLocationId}" 
+            <div class="flex-container">                             
+                <a href="/admin/device_monitoring/map#id=${indoorMapId}&nodeId=${deviceLocationId}" 
                    id="open-indoor-device-btn"
                    class="default-btn" 
                    style="color: white; text-decoration: none;">
-                     Open Device
+                     Open Device on Map
                 </a>                   
             </div>
           </div>    
         </div>
     `;
 
     if (locationId) {
-      location_parent.append(open_location_btn);
+      locationParent.append(openLocationBtn);
     }
 
     if (floor && locationId) {
-      floorplan_parent.append(open_indoor_device_btn);
+      floorplanParent.append(openIndoorDeviceBtn);
     }
   });
 })(django.jQuery);

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

@@ -0,0 +1,47 @@
+{% extends "admin/base_site.html" %}
+{% load static leaflet_tags i18n %}
+
+{% block title %} {% trans 'Map' %} {% endblock %}
+
+{% block breadcrumbs %}
+  <div class="breadcrumbs">
+    <a href="{% url 'admin:index' %}">{% trans 'Home' %}</a> › <span>{% trans 'Map' %}</span>
+  </div>
+{% endblock %}
+
+{% block extrahead %}
+  {{ block.super }}
+  {{ media }}
+  <script>
+    window._owGeoMapConfig = {
+      geoJsonUrl: '{{ monitoring_location_geojson_url }}',
+      locationDeviceUrl: '{{ monitoring_device_list_url }}',
+      indoorCoordinatesUrl: '{{ monitoring_indoor_coordinates_list }}',
+      labels: {{ monitoring_labels | safe }}
+    }
+  </script>
+  <style>
+    #device-map-container {
+      width: 100%;
+      height: 87.7vh;
+      margin: 15px auto 0 auto;
+    }
+  </style>
+{% endblock %}
+
+{% block content %} 
+  <div id='leaflet-config'>
+    {% autoescape on %}{% leaflet_json_config %}{% endautoescape %}
+  </div>
+<div id="dashboard-map-overlay">
+  <div id="device-map-container">
+    <div class="no-data">
+      <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>
+  <script src="{% static 'monitoring/js/device-map.js' %}"></script>
+  <script src="{% static 'monitoring/js/floorplan.js' %}"></script>
+{% endblock %}

openwisp_monitoring/device/templates/admin/map/map_page.html

@@ -767,11 +767,13 @@ def test_redirect_to_map_view_from_device_location_inline(self):
                 "#open-location-btn",
                 timeout=5,
             ).click()
-            current_hash = self.web_driver.execute_script(
-                "return window.location.hash;"
-            )
             expected_hash = f"#id={mapId}&nodeId={location.id}"
-            self.assertEqual(expected_hash, current_hash)
+            try:
+                WebDriverWait(self.web_driver, 5).until(
+                    EC.url_to_be(f"{self.live_server_url}{expected_hash}")
+                )
+            except TimeoutException:
+                self.fail("Failed redirecting to map page")
             popup = self.find_element(By.CSS_SELECTOR, ".map-detail", timeout=5)
             logs = self.get_browser_logs()
             self.assertEqual(len(logs), 0)
@@ -799,11 +801,13 @@ def test_redirect_to_map_view_from_device_location_inline(self):
                 "#open-indoor-device-btn",
                 timeout=5,
             ).click()
-            current_hash = self.web_driver.execute_script(
-                "return window.location.hash;"
-            )
             expected_hash = f"#id={indoorMapId}&nodeId={device_location.id}"
-            self.assertEqual(expected_hash, current_hash)
+            try:
+                WebDriverWait(self.web_driver, 5).until(
+                    EC.url_to_be(f"{self.live_server_url}{expected_hash}")
+                )
+            except TimeoutException:
+                self.fail("Failed redirecting to map page")
             popup = self.find_element(By.CSS_SELECTOR, ".njg-tooltip-inner", timeout=5)
             logs = self.get_browser_logs()
             self.assertEqual(len(logs), 0)