From 7bf3e4455bb9f3632a2dfe0ddece2a22c7acc800 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 as coloured circle markers on map
 view (#15533)

---
 tests/test_backoffice_pages.py      |  2 ++
 wcs/backoffice/management.py        |  1 +
 wcs/qommon/static/css/dc2/admin.css |  7 +++++++
 wcs/qommon/static/js/qommon.map.js  | 20 +++++++++++++++++++-
 4 files changed, 29 insertions(+), 1 deletion(-)

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..069c9de7 100644
--- a/wcs/backoffice/management.py
+++ b/wcs/backoffice/management.py
@@ -73,6 +73,7 @@ def geojson_formdatas(formdatas, geoloc_key='base'):
             'properties': {
                 'name':  formdata.get_display_name(),
                 'url': formdata.get_url(backoffice=True),
+                'status_colour': '#%s' % formdata.get_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..acc74138 100644
--- a/wcs/qommon/static/css/dc2/admin.css
+++ b/wcs/qommon/static/css/dc2/admin.css
@@ -939,6 +939,13 @@ svg #current_status polygon {
 	stroke-width: 2px;
 }
 
+/* Styling for Leaflet's circle markers */
+
+.leaflet-map-pane svg {
+    width: auto;
+    height: auto;
+}
+
 .foldable {
 	cursor: pointer;
 }
diff --git a/wcs/qommon/static/js/qommon.map.js b/wcs/qommon/static/js/qommon.map.js
index 40a37a50..64f0cb3f 100644
--- a/wcs/qommon/static/js/qommon.map.js
+++ b/wcs/qommon/static/js/qommon.map.js
@@ -88,7 +88,16 @@ $(window).on('load', function() {
                window.location = feature.properties.url;
                return false;
              });
-           }
+           },
+           pointToLayer: function (feature, latlng) {
+             return L.circleMarker(latlng, {
+               radius: 9,
+               fillColor: feature.properties.status_colour,
+               color: "#000",
+               weight: 1,
+               opacity: 1,
+               fillOpacity: 0.7});
+             }
          });
          map.fitBounds(geo_json.getBounds());
          geo_json.addTo(map);
@@ -110,6 +119,15 @@ $(window).on('load', function() {
                  window.location = feature.properties.url;
                  return false;
                });
+         },
+         pointToLayer: function (feature, latlng) {
+             return L.circleMarker(latlng, {
+               radius: 9,
+               fillColor: feature.properties.status_colour,
+               color: "#000",
+               weight: 1,
+               opacity: 1,
+               fillOpacity: 0.7});
              }
            });
            map.fitBounds(geo_json.getBounds());
-- 
2.11.0