From f968caec81f291448d0624ef44824a1376354b9f Mon Sep 17 00:00:00 2001
From: Serghei Mihai <smihai@entrouvert.com>
Date: Mon, 10 Apr 2017 19:12:26 +0200
Subject: [PATCH] backoffice: display demands with coloured markers on map view
 (#15533)

---
 tests/test_backoffice_pages.py      |  2 ++
 wcs/backoffice/management.py        |  6 ++++++
 wcs/qommon/static/css/dc2/admin.css | 14 ++++++++++++++
 wcs/qommon/static/js/qommon.map.js  | 23 +++++++++--------------
 4 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/tests/test_backoffice_pages.py b/tests/test_backoffice_pages.py
index 35510475..52cff8fe 100644
--- a/tests/test_backoffice_pages.py
+++ b/tests/test_backoffice_pages.py
@@ -928,6 +928,8 @@ def test_backoffice_geojson(pub):
     resp = app.get('/backoffice/management/form-title/geojson')
     assert len(resp.json['features']) == 1
     assert resp.json['features'][0]['geometry']['coordinates'] == [2.32, 48.83]
+    assert 'status_colour' in resp.json['features'][0]['properties']
+    assert resp.json['features'][0]['properties']['status_colour'] == '#66FF00'
 
     resp = app.get('/backoffice/management/form-title/geojson?filter=pending&filter-status=on')
     assert len(resp.json['features']) == 1
diff --git a/wcs/backoffice/management.py b/wcs/backoffice/management.py
index e64360ab..2728afdd 100644
--- a/wcs/backoffice/management.py
+++ b/wcs/backoffice/management.py
@@ -68,11 +68,17 @@ def geojson_formdatas(formdatas, geoloc_key='base'):
         if not formdata.geolocations or not geoloc_key in formdata.geolocations:
             continue
         coords = formdata.geolocations[geoloc_key]
+        try:
+            status_colour = formdata.get_status().colour
+        except AttributeError:
+            status_colour = 'ffffff'
+
         feature = {
             'type': 'Feature',
             'properties': {
                 'name':  formdata.get_display_name(),
                 'url': formdata.get_url(backoffice=True),
+                'status_colour': '#%s' % status_colour
             },
             'geometry': {
                 'type': 'Point',
diff --git a/wcs/qommon/static/css/dc2/admin.css b/wcs/qommon/static/css/dc2/admin.css
index 3f0c3b1c..0cbb0e22 100644
--- a/wcs/qommon/static/css/dc2/admin.css
+++ b/wcs/qommon/static/css/dc2/admin.css
@@ -939,6 +939,20 @@ svg #current_status polygon {
 	stroke-width: 2px;
 }
 
+/* Styling for Leaflet's markers */
+
+div.leaflet-div-icon span {
+    width: 2.3rem;
+    height: 2.3rem;
+    display: block;
+    left: -1rem;
+    top: -1rem;
+    position: relative;
+    border-radius: 5rem 5rem 0.8rem;
+    transform: rotate(45deg);
+    border: 1px solid #aaa;
+}
+
 .foldable {
 	cursor: pointer;
 }
diff --git a/wcs/qommon/static/js/qommon.map.js b/wcs/qommon/static/js/qommon.map.js
index 40a37a50..b2322421 100644
--- a/wcs/qommon/static/js/qommon.map.js
+++ b/wcs/qommon/static/js/qommon.map.js
@@ -80,20 +80,6 @@ $(window).on('load', function() {
        $map_widget.parent().parent().find('label').addClass('activity')
        map.locate({timeout: 10000, maximumAge: 300000, enableHighAccuracy: false});
      }
-     if ($(this).data('geojson-url')) {
-       $.getJSON($(this).data('geojson-url'), function(data) {
-         var geo_json = L.geoJson(data, {
-           onEachFeature: function(feature, layer) {
-             layer.on('click', function() {
-               window.location = feature.properties.url;
-               return false;
-             });
-           }
-         });
-         map.fitBounds(geo_json.getBounds());
-         geo_json.addTo(map);
-       });
-     }
 
     $(document).on('backoffice-filter-change', function(event, listing_settings) {
       $('.qommon-map').each(function() {
@@ -110,6 +96,12 @@ $(window).on('load', function() {
                  window.location = feature.properties.url;
                  return false;
                });
+             },
+             pointToLayer: function (feature, latlng) {
+                 var markerStyles = "background-color: "+feature.properties.status_colour+";";
+                 marker = L.divIcon({iconAnchor: [0, 24],
+                                     html: '<span style="' + markerStyles + '" />'});
+                 return L.marker(latlng, {icon: marker});
              }
            });
            map.fitBounds(geo_json.getBounds());
@@ -117,5 +109,8 @@ $(window).on('load', function() {
          });
       });
     });
+    if ($(this).data('geojson-url')) {
+        $(document).trigger('backoffice-filter-change', $('form#listing-settings').serialize());
+    }
   });
 });
-- 
2.11.0