From 56e6c3da02e2bdd35b660cce74d9e9c05a53a57d Mon Sep 17 00:00:00 2001
From: Tim Sutton <tim@kartoza.com>
Date: Sun, 9 Apr 2017 23:56:58 +0200
Subject: [PATCH] Work in progress for issue 71 - support OSM project areas and
 user defined AOI's for reporting

---
 reporter/templates/base.html | 35 ++++++++++++++++++++++++++++++++---
 1 file changed, 32 insertions(+), 3 deletions(-)

diff --git a/reporter/templates/base.html b/reporter/templates/base.html
index 797a9d8..9636dc5 100644
--- a/reporter/templates/base.html
+++ b/reporter/templates/base.html
@@ -64,6 +64,16 @@ <h1>OpenStreetMap Reporter</h1>
                 <h2>Filters</h2>
                 <hr/>
             </div>
+            <div class="span8">
+                <h4>Area of Interest: </h4>
+                <select name='aoi_select' id='aoi_select'>
+                    {% for tag_name in available_aois%}
+                        <option {% if aoi_name == current_aoi_name %} selected {% endif %}>
+                            {{ aoi_name }}
+                        </option>
+                    {% endfor %}
+                </select>
+            </div>
             <div class="span4">
                 <h4>Feature Type : </h4>
                 <select name='feature_select' id='feature_select'>
@@ -74,17 +84,17 @@ <h4>Feature Type : </h4>
                     {% endfor %}
                 </select>
             </div>
-            <div class="span3">
+            <div class="span4">
                 <div class="date-box">
                     <h4>Date From : </h4><input type='text' data-language='en' id='date-from'/>
                 </div>
             </div>
-            <div class="span3">
+            <div class="span4">
                 <div class="date-box">
                     <h4>Date To : </h4><input type='text' class='datepicker-here' data-language='en' id='date-to'/>
                 </div>
             </div>
-            <div class="span2">
+            <div class="span4">
                 <button type="button" class="btn btn-default" id="refresh-with-date" style="margin-top:17px; width: 100%">Refresh</button>
             </div>
         </div>
@@ -212,7 +222,26 @@ <h2>{{ current_tag_name|capitalize|replace('_', ' ')}} Contributors</h2>
                 clickable: false
             }).addTo(map);
             window.bbox = map.getBounds().toBBoxString();
+
+            // Add AOI's to the map
+            polyLayer = L.geoJson(null, {filter: layerFilter, onEachFeature: addProjectToList}).addTo(map);
+            $.getJSON("https://s3.amazonaws.com/tm-projects-vt/hotprojects.geojson", function(data) {
+                polyLayer.addData(data);
+            });
+
         });
+
+        //polyLayer will only include feature
+        function layerFilter(feature) {
+            if (feature.properties.name != "") return true
+        }
+        //for every HOT project area, add an entry to the select widget
+        function addProjectToList(feature, layer) {
+            projectName = feature.properties.name;
+            var projectsWidget = $("#aoi_select");
+            projectsWidget.append("<option value='" + feature.id + "'>" + projectName + "</option>");
+        }
+
         $(function () {
             {# Pie chart for all users #}
             var myData = [