js to display similar features in feature admin page

gazetteer/places/views.py

@@ -25,7 +25,9 @@ def search_json(request):
     }
     return render_to_json_response(d)
 
-
+'''
+This function will be removed. No need for this page.
+'''
 def search_related(request):
     id = request.GET.get("id", "0")
     feature = get_object_or_404(Feature, pk=id)
@@ -47,5 +49,16 @@ def search_related(request):
 
 
 def search_related_json(request):
-    d = {}
+    id = request.GET.get("id", "0")
+    feature = get_object_or_404(Feature, pk=id)
+    similar_features = feature.similar_features()
+    d = []
+    for s in similar_features:
+        d.append({
+            'id': s.id,
+            'feature_type': FeatureType.objects.get(pk=s.feature_type_id).name,
+            'preferred_name': s.preferred_name,
+            'similarity': s.similarity,
+            'distance': s.distance
+        })    
     return render_to_json_response(d)   

gazetteer/static/js/feature_admin.js

@@ -0,0 +1,20 @@
+$(function() {
+    $.getJSON("/search_related_json", {
+        'id': FEATURE_ID
+    }, function(data) {
+        for (var i=0; i<data.length;i++) {
+            var $row = getRow(data[i]);
+            $('#similarTable tbody').append($row);
+        }
+    });
+});
+
+function getRow(d) {
+    var $tr = $('<tr />');
+    var $one = $('<td />').appendTo($tr);
+    var $a = $('<a />').attr("target", "_blank").attr("href", "/admin/places/feature/" + d.id).text(d.preferred_name).appendTo($one);
+    $('<td />').text(d.feature_type).appendTo($tr);
+    $('<td />').text(d.similarity).appendTo($tr);
+    $('<td />').text(d.distance).appendTo($tr);
+    return $tr;
+}

gazetteer/templates/admin/places/feature/change_form.html

@@ -8,10 +8,36 @@
     <script type="text/javascript" src="/static/js/feature_admin.js"></script>
     <link rel="stylesheet" href="/static/css/feature_admin.css" />
     <link rel="stylesheet" href="/static/css/jquery.autocomplete.css" />
+    <script type="text/javascript">
+        FEATURE_ID = {{ object_id }}
+    </script>
 {% endblock %}
 
 {% block after_related_objects %}
     <div id="similarFeatures">
-        TEST
+        <div class="similarTitle">Similar Features:</div>
+        <table id="similarTable">
+            <thead>
+                <tr>
+                    <td>
+                        Name
+                    </td>
+                    <td>
+                        Feature Type
+                    </td>
+                    <td>
+                        Similarity
+                    </td>
+                    <td>
+                        Distance
+                    </td>
+                </tr>
+            </thead>
+            <tbody>
+
+            </tbody>
+
+        </table>
+
     </div>
 {% endblock %}