search page: use <table> for results; restrict set to 20; simplify css / page

gazetteer/places/models.py

@@ -61,7 +61,10 @@ class Feature(models.Model):
         geom = json.loads(self.geometry.transform(3785, True).geojson)
         properties = {
             'id': self.id,
-            'preferred_name': self.preferred_name
+            'preferred_name': self.preferred_name,
+            'feature_type': self.feature_type.name,
+            'admin1': self.admin1,
+            'admin2': self.admin2
         }
         return {
             'type': 'Feature',

gazetteer/places/views.py

@@ -17,7 +17,7 @@ def search_json(request):
     bs = bbox.split(",")
     bs_param = (float(bs[0]), float(bs[1]), float(bs[2]), float(bs[3]),)
 
-    features_qset = Feature.search.overlaps(bs_param, text=search_term, srid=3785)
+    features_qset = Feature.search.overlaps(bs_param, text=search_term, srid=3785)[0:20]
     features = [f.get_geojson() for f in features_qset]
     d = {
         'type': 'FeatureCollection',

gazetteer/static/css/main.css

@@ -36,13 +36,18 @@ padding-right:8px;
 box-shadow: rgba(0,0,0, 0.3) 0px 0px 8px;
 background-color:rgba(254, 254, 254, 0.9);*/
 border-radius:8px;
+
+/*
 -moz-box-shadow:inset 2px 2px 8px 1px #aca7a7;
 -webkit-box-shadow:inset 2px 2px 8px 1px #aca7a7;
 box-shadow:inset 2px 2px 8px 1px #aca7a7;
 border:1px solid #c8c6c6;
 -moz-border-radius:16px;
 -webkit-border-radius:16px;
-border-radius:20px;}
+border-radius:20px;
+*/
+}
+
 
 .search input:focus
 {outline:none;

gazetteer/static/js/gazetteer.js

@@ -20,7 +20,8 @@ $(function() {
             'bbox': bbox,
             'search': search_term
             }, function(features) {
-            $('#mapList').empty();
+            $('#mapList tbody').empty();
+//            var headerRow = getHeaderRow();
 //            console.log(response);
             var currFeatures = jsonLayer.features;
             jsonLayer.removeFeatures(currFeatures);
@@ -28,15 +29,33 @@ $(function() {
             for (var i=0; i<features.features.length;i++) {
                 var f = features.features[i];
                 var props = f.properties;
-                var listItem = getLi(props);
+                var listItem = getRow(props);
-                $('#mapList').append(listItem);
+                $('#mapList tbody').append(listItem);
             }             
         });
     });
 });
 
+function getRow(props) {
+    var $tr = $('<tr />');
+    var $one = $('<td />').appendTo$($tr);
+    var $a = $('<a />').attr("target", "_blank").attr("href", "/admin/places/feature/" + props.id).text(props.preferred_name).appendTo($one);
+    $('<td />').text(props.feature_type).appendTo($tr);
+    $('<td />').text(props.admin1).appendTo($tr);
+    $('<td />').text(props.admin2).appendTo($tr);
+    return $tr;     
+}
+
+
+/*
 function getLi(props) {
     var $li = $('<li />').addClass("mapListItem").attr("data-id", props.id);
     var $a = $('<a />').attr("target", "_blank").attr("href", "/admin/places/feature/" + props.id).text(props.preferred_name).appendTo($li);
     return $li;
 }
+*/
+
+function getHeaderRow() {
+    var heads = ['Preferred Name', 'Feature Type', 'State', 'County']
+    var $thead = $('<thead />');
+}

gazetteer/templates/search.html

@@ -35,8 +35,24 @@
 
 
     <div class="mapListSection">
-	    <ul class="mapList" id="mapList">
+        <table id="mapList">
+            <thead>
+                <tr>
+                    <td>Preferred Name</td>
+                    <td>Feature Type</td>
+                    <td>State</td>
+                    <td>County</td>
+                </tr>
+            </thead>
+            <tbody>
+
+            </tbody>
+
+        </table>
+
 <!--
+	    <ul class="mapList" id="mapList">
+
 	<li>Water Well Imagery</li>
 	<li>Chicago in the 20s</li>
 	<li>Maps go here</li>
@@ -47,11 +63,12 @@
 	<li>Maps go here</li>
 	<li>Maps go here</li>
 	<li>Maps go here</li>
--->
-        </ul>
 
-        <ol class="paginate paginateSelected"> <!--ordered would be better in this case, right?-->
+        </ul>
-    <!--	<li><a href="">&laquo;</a></li> -->
+-->
+<!--
+        <ol class="paginate paginateSelected">
+     	    <li><a href="">&laquo;</a></li>
 	        <li><a href="">1</a></li>
 	        <li><a href="">2</a></li>
 	        <li><a href="">3</a></li>
@@ -62,14 +79,14 @@
 	        <li><a href="">8</a></li>
 	        <li><a href="">9</a></li>
 	        <li><a href="">10</a></li>
-    <!--	<li><a href="">&raquo;</a></li> -->
+        	<li><a href="">&raquo;</a></li>
         </ol>
 
         <div class="firstLast">
             <span class="first">First</span>
             <span class="last">Last</span>
         </div>
-
+-->
     </div>
 
     <div class="map" id="map">