[#136] Code cleanup

Rewrite convoluted resource name lookup for map template tag, needs refactoring some day tho... Make all jQuery calls to the API cachable. Remove un-needed map ID parameter in map tempalte tag. Fixes to google maps options. Formatting fixes.
akvo · Jan 15, 2013 · 311c678 · 311c678
1 parent 56ea97e
commit 311c678
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 67 deletions.
diff --git a/akvo/api/resources.py b/akvo/api/resources.py
@@ -93,18 +93,6 @@ def apply_filters(self, request, applicable_filters):
         else:
             return self.get_object_list(request).filter(**applicable_filters)
 
-    def create_response(self, request, data, response_class=HttpResponse, **response_kwargs):
-        """
-        Extracts the common "which-format/serialize/return-response" cycle.
-
-        Mostly a useful shortcut/hook.
-        """
-        desired_format = self.determine_format(request)
-        cached_resource = CachedResource(self, request, data, desired_format)
-        url = "%s?%s" % (request.path, request.META['QUERY_STRING'])
-        serialized = cached_resource.get(url)
-        return response_class(content=serialized, content_type=build_content_type(desired_format), **response_kwargs)
-
     def get_list(self, request, **kwargs):
         """
         Returns a serialized list of resources.

diff --git a/akvo/mediaroot/akvo/js/src/akvo-maps.js b/akvo/mediaroot/akvo/js/src/akvo-maps.js
@@ -34,8 +34,17 @@
     // Creates the map with options and makes the initial AJAX request
     addMap = function (map) {
         $(map.mapElement).gmap(mapOptions(map.mapOpts.type)).bind('init', function () {
-            $.getJSON(getResourceUrl(map), function (data) {
-                populateMap(map, data);
+            // use $.ajax to be able to setup jsonp with a named callback, "callback",
+            // and set cache: true to suppress the "_=<random number>" query string variable jQuery adds by default
+            $.ajax({
+                url: getResourceUrl(map),
+                dataType: "jsonp",
+                jsonp: 'callback',
+                jsonpCallback: 'callback',
+                cache: true,
+                success: function(data) {
+                    populateMap(map, data);
+                }
             });
         });
     };
@@ -47,21 +56,19 @@
         opts = map.mapOpts;
         // call /api/v1/map_for_project/ or /api/v1/map_for_organisation/ resources
         //TODO: derive the host from the current page URL instead maybe?
-        url = opts.host + 'api/v1/map_for_' + opts.resource + '/';
+        url = opts.host + 'api/v1/' + opts.resource + '/';
         //limit = 0 means all objects. If this becomes too heavy limit can be set to get the objects in multiple chunks
         limit = 0;
-        // if object_id holds a value then that's the ID of the object we want to fetch
         if (opts.object_id) {
-            url += opts.object_id + '/?format=jsonp&depth=1&callback=?';
-        // otherwise we want all objects of the resource's type
+            // if object_id holds a value then that's the ID of the object we want to fetch
+            url += opts.object_id + '/?format=jsonp&depth=1';
         } else {
-            url += '?format=jsonp&limit=' + limit + '&callback=?';
+            // otherwise we want all objects of the resource's type
+            url += '?format=jsonp&limit=' + limit;
         }
         return url;
     };
 
-
-
     // Populates the map with data
     populateMap = function (map, data) {
         var objects, opts, pinTmpl, addOrganisationData, addProjectData;
@@ -77,8 +84,7 @@
         }
 
         pinTmpl = Handlebars.compile(
-            '<div class="mapInfoWindow"' +
-                'style="height:150px; min-height:150px; max-height:150px; overflow:hidden;">' +
+            '<div class="mapInfoWindow" style="height:150px; min-height:150px; max-height:150px; overflow:hidden;">' +
                 '<a class="small" href="{{url}}">{{title}}</a>' +
                 '{{#if thumb}}' +
                     '<div style="text-align: center; margin-top: 5px;">' +
@@ -87,7 +93,8 @@
                         '</a>' +
                     '</div>' +
                 '{{/if}}' +
-                '</div>');
+            '</div>'
+        );
 
         // populate the location object with data from an Organisation model object
         addOrganisationData = function (object, location) {
@@ -110,8 +117,8 @@
         };
 
         $.each(objects, function (i, object) {
-            // for single objects show all locations
             if (opts.object_id) {
+                // for single objects show all locations
                 $.each(object.locations, function (k, location) {
                     //TODO: extend this for additional resource types
                     if (opts.resource === 'organisation') {
@@ -121,8 +128,8 @@
                     }
                     addPin(map, location, pinTmpl);
                 });
-            // if we're displaying multiple objects we only show the primary locations
             } else {
+                // if we're displaying multiple objects we only show the primary locations
                 var location;
                 location = object.primary_location;
                 if (location) {
@@ -192,16 +199,22 @@
     // but create a new resource url
     prepareNextRequest = function (map, resource) {
         var url = $.url(resource),
-            urlTmpl = Handlebars.compile('{{host}}{{path}}?format=jsonp&depth=1&limit=' +
-                '{{limit}}&offset={{offset}}&callback=?'),
+            urlTmpl = Handlebars.compile('{{host}}{{path}}?format=jsonp&depth=1&limit={{limit}}&offset={{offset}}'),
             newUrl = urlTmpl({
                 'host': url.attr('host'),
                 'path': url.attr('path'),
                 'limit': Number(url.param('limit')),
                 'offset': Number(url.param('offset'))
             });
-        $.getJSON(newUrl, function (data) {
-            populateMap(map, data);
+        $.ajax({
+            url: newUrl,
+            dataType: "jsonp",
+            jsonp: 'callback',
+            jsonpCallback: 'callback',
+            cache: true,
+            success: function(data) {
+                populateMap(map, data);
+            }
         });
     };
 
@@ -217,7 +230,8 @@
                 'scaleControl': false,
                 'scrollwheel': false,
                 'streetViewControl': false,
-                'zoom': 0
+                'zoom': 0,
+                'zoomControl': false //removes the (non-functional) zoom buttons
             };
         } else if (mapType === 'small') {
             options = {

diff --git a/akvo/rsr/templatetags/map.py b/akvo/rsr/templatetags/map.py
@@ -36,8 +36,8 @@ def map(resource, width, height, type="dynamic", marker_icon=""):
         marker_icon: the name of an icon to use rather than the default. the icon must be in mediaroot/core/img/
     """
 
-    # We want a unique id for each map element id
     map_id = 'akvo_map_%s' % os.urandom(8).encode('hex')
+
     template_context = {
         'map_id': map_id,
         'type': type,
@@ -50,8 +50,11 @@ def map(resource, width, height, type="dynamic", marker_icon=""):
     supported_models = (Project, Organisation)
 
     # determine if we have the name of the resource or an object of that kind
-    if isinstance(resource, basestring) and resource in [model_name.__name__.lower() for model_name in supported_models]:
-        template_context['resource'] = resource
+    # Hack! TODO: refactor to use the proper API resources
+    # if it's a string we return the corresponding NNNMapResource resource name
+    if isinstance(resource, basestring):
+        template_context['resource'] = "map_for_%s" % resource
+    # otherwise return the NNNResource resource name
     elif isinstance(resource, supported_models):
         template_context['resource'] = resource.__class__.__name__.lower()
         template_context['object_id'] = resource.id

diff --git a/akvo/templates/rsr/index.html b/akvo/templates/rsr/index.html
@@ -125,7 +125,7 @@ <h2 class="link_blue serif">{{blog_post.title}}</h2>
       {% csrf_token %}
       <select name="language" id="languageChooser" class="span-6 last" style="margin-top:3px">
         {% for lang in LANGUAGES %}
-          <option value="{{ lang.0 }}" {% ifequal lang.0 request.LANGUAGE_CODE %}selected="yes" {% endifequal %}>
+          <option value="{{ lang.0 }}"{% ifequal lang.0 request.LANGUAGE_CODE %} selected="yes"{% endifequal %}>
             {{ lang.1 }}
           </option>
         {% endfor %}
@@ -164,14 +164,7 @@ <h1 class="white last" style="line-height: 1em">&euro; {{projects_budget}}M</h1>
 		</div>
 			<div class="span-6 first last">
 				<a href="{% url 'global_project_map' %}">    
-					{# google_global_project_map 'static' 315 190 1 #}
-          {#% map 'project' 315 190 'home_page_global_map' 'static' %#}
-          {# hack until we have proper caching of jQuery API calls #}
-          <map name="map_map" id="">
-            <area href="https://maps.google.com/maps?ll=15.19247,19.257229&z=2&t=m&hl=en-US" shape="rect" coords="0,158,70,190">
-            <area href="http://www.google.com/intl/en-US_US/help/terms_maps.html" shape="rect" coords="245, 165, 315, 190">
-          </map>
-          <img usemap="#map_map" width="315" height="190" src="{{MEDIA_URL}}akvo/img/base/home_page_map.png" />
+          {% map 'project' 315 190 'static' %}
 				</a>
 			</div>
 		<div style="padding: .5em .5em .7em .5em;">

diff --git a/akvo/templates/rsr/organisation/global_organisation_map.html b/akvo/templates/rsr/organisation/global_organisation_map.html
@@ -4,24 +4,26 @@
 
 
 {% block title %}
-	{% trans 'Map of all organisations' %}
+  {% trans 'Map of all organisations' %}
 {% endblock title %}
 
 {% block breadcrum_items %}
   {{block.super}}
-    <li id="last_breadcrum_item">{% trans 'Map of all organisations' %}</li>
+  <li id="last_breadcrum_item">{% trans 'Map of all organisations' %}</li>
 {% endblock breadcrum_items %}
 
 {% block maincontent %}
-	<div class="right">
-		<p class="small" style="margin:0; padding:0; padding-top:0px;">
-			<a href="{% url 'rsr_org_list' %}">{% trans 'List of all organisations' %} &#x25BA;</a><br />
-            <a href="{% url 'project_list' 'all' %}">{% trans 'List of all projects' %} &#x25BA;</a><br />
-            <a href="{% url 'global_project_map' %}">{% trans 'Map of all projects' %} &#x25BA;</a>			
-		</p>		
-	</div>
-    <h1>
-        {% trans 'Map of all organisations' %}
-    </h1>
-    {% map 'organisation' 975 600 'dynamic' %}
+  <div class="right">
+    <p class="small" style="margin:0; padding:0; padding-top:0px;">
+      <a href="{% url 'rsr_org_list' %}">{% trans 'List of all organisations' %} &#x25BA;</a>
+      <br />
+      <a href="{% url 'project_list' 'all' %}">{% trans 'List of all projects' %} &#x25BA;</a>
+      <br />
+      <a href="{% url 'global_project_map' %}">{% trans 'Map of all projects' %} &#x25BA;</a>
+    </p>
+  </div>
+  <h1>
+    {% trans 'Map of all organisations' %}
+  </h1>
+  {% map 'organisation' 975 600 'dynamic' %}
 {% endblock %}
diff --git a/akvo/templates/rsr/project/global_project_map.html b/akvo/templates/rsr/project/global_project_map.html
@@ -4,25 +4,27 @@
 
 
 {% block title %}
-	{% trans 'Map of all projects' %}
+  {% trans 'Map of all projects' %}
 {% endblock title %}
 
 {% block breadcrum_items %}
-	{{block.super}}
-	<li id="last_breadcrum_item">{% trans 'Map of all projects' %}</li>
+  {{block.super}}
+  <li id="last_breadcrum_item">{% trans 'Map of all projects' %}</li>
 {% endblock breadcrum_items %}
 
 
 {% block maincontent %}
   <div class="right">
     <p class="small" style="margin:0; padding:0; padding-top:0px;">
-      <a href="{% url 'rsr_org_list' %}">{% trans 'List of all organisations' %} &#x25BA;</a> <br />
-            <a href="{% url 'project_list' 'all' %}">{% trans 'List of all projects' %} &#x25BA;</a> <br />
-            <a href="{% url 'global_organisation_map' %}">{% trans 'Map of all organisations' %} &#x25BA;</a>
-    </p>    
+      <a href="{% url 'rsr_org_list' %}">{% trans 'List of all organisations' %} &#x25BA;</a>
+      <br />
+      <a href="{% url 'project_list' 'all' %}">{% trans 'List of all projects' %} &#x25BA;</a>
+      <br />
+      <a href="{% url 'global_organisation_map' %}">{% trans 'Map of all organisations' %} &#x25BA;</a>
+    </p>
   </div>
-    <h1>
-        {% trans 'Map of all projects' %}
-    </h1>
-    {% map 'project' 975 600 'dynamic' %}
+  <h1>
+    {% trans 'Map of all projects' %}
+  </h1>
+  {% map 'project' 975 600 'dynamic' %}
 {% endblock %}