浏览代码

HUE-2312 [search] Added lat/lng field selector dropdowns

Enrico Berti 11 年之前
父节点
当前提交
f3c4c4e
共有 3 个文件被更改,包括 65 次插入33 次删除
  1. 27 25
      apps/search/src/search/templates/search.mako
  2. 9 2
      apps/search/static/js/search.ko.js
  3. 29 6
      desktop/core/static/js/ko.charts.js

+ 27 - 25
apps/search/src/search/templates/search.mako

@@ -82,7 +82,7 @@ ${ commonheader(_('Search'), "search", user, "80px") | n,unicode }
 
 <%dashboard:layout_toolbar>
       <%def name="widgets()">
-        <div data-bind="css: { 'draggable-widget': true, 'disabled': !availableDraggableResultset() },
+    <div data-bind="css: { 'draggable-widget': true, 'disabled': !availableDraggableResultset() },
                     draggable: {data: draggableResultset(), isEnabled: availableDraggableResultset,
                     options: {'start': function(event, ui){lastWindowScrollPosition = $(window).scrollTop();$('.card-body').slideUp('fast');},
                               'stop': function(event, ui){$('.card-body').slideDown('fast'); $root.collection.template.isGridLayout(true); checkResultHighlightingAvailability(); }}}"
@@ -179,15 +179,16 @@ ${ commonheader(_('Search'), "search", user, "80px") | n,unicode }
                        <i class="hcha hcha-map-chart"></i>
          </a>
    </div>
-    <div data-bind="css: { 'draggable-widget': true, 'disabled': !availableDraggableChart() },
-                    draggable: {data: draggableLeafletMap(), isEnabled: availableDraggableChart,
+    <div data-bind="css: { 'draggable-widget': true, 'disabled': !availableDraggableLeaflet()},
+                    draggable: {data: draggableLeafletMap(), isEnabled: availableDraggableLeaflet,
                     options: {'start': function(event, ui){lastWindowScrollPosition = $(window).scrollTop();$('.card-body').slideUp('fast');},
                               'stop': function(event, ui){$('.card-body').slideDown('fast', function(){$(window).scrollTop(lastWindowScrollPosition)});}}}"
          title="${_('Marker Map')}" rel="tooltip" data-placement="top">
-         <a data-bind="style: { cursor: $root.availableDraggableChart() ? 'move' : 'default' }">
-                       <i class="fa fa-map-marker"></i>
+         <a data-bind="style: { cursor: 'move' }">
+             <i class="fa fa-map-marker"></i>
          </a>
    </div>
+
       </%def>
 </%dashboard:layout_toolbar>
 
@@ -869,22 +870,28 @@ ${ dashboard.layout_skeleton() }
 </script>
 
 <script type="text/html" id="leafletmap-widget">
-  SHABA
-  <!-- ko if: $root.getFacetFromQuery(id()) -->
-  <div class="row-fluid" data-bind="with: $root.getFacetFromQuery(id())">
-    <div data-bind="visible: $root.isEditing, with: $root.collection.getFacetById(id)" style="margin-bottom: 20px">
-      <span data-bind="template: { name: 'facet-toggle' }">
-      </span>
+
+  <div class="row-fluid">
+    <div data-bind="visible: $root.isEditing" style="margin-bottom: 20px">
+      ${_('Latitude')}
+      <select data-bind="options: viewModel.collection.fields, optionsText: 'name', selectedOptions: properties.latitudeField, optionsCaption: '${ _('Choose...') }'"></select>
+      &nbsp;&nbsp;
+      ${_('Longitude')}
+      <select data-bind="options: viewModel.collection.fields, optionsText: 'name', selectedOptions: properties.longitudeField, optionsCaption: '${ _('Choose...') }'"></select>
+      &nbsp;&nbsp;
+      ${_('Label')}
+      <select data-bind="options: viewModel.collection.fields, optionsText: 'name', selectedOptions: properties.labelField, optionsCaption: '${ _('Choose...') }'"></select>
     </div>
-    <div data-bind="leafletMapChart: {datum: {counts: counts},
+    <div data-bind="leafletMapChart: {visible: ! $root.isRetrievingResults(), datum: {counts: $root.results()},
       transformer: leafletMapChartDataTransformer,
       onComplete: function(){ var widget = viewModel.getWidgetById(id); if (widget != null) {widget.isLoading(false)};} }" />
   </div>
-  <!-- /ko -->
-  <div class="widget-spinner" data-bind="visible: isLoading()">
+
+  <div class="widget-spinner" data-bind="visible: $root.isRetrievingResults()">
     <!--[if !IE]> --><i class="fa fa-spinner fa-spin"></i><!-- <![endif]-->
     <!--[if IE]><img src="/static/art/spinner.gif" /><![endif]-->
   </div>
+
 </script>
 
 
@@ -1215,16 +1222,11 @@ function mapChartDataTransformer(data) {
 
 function leafletMapChartDataTransformer(data) {
   var _data = [];
-  _data.push({lat: 33.305606842041016, lng: -111.978759765625});
-  _data.push({lat: 33.4143447876, lng: -111.913032532});
-  _data.push({lat: 33.5229454041, lng: -111.90788269});
-  _data.push({lat: 33.3910255432, lng: -111.68447876});
-  _data.push({lat: 33.3907928467, lng: -112.012504578});
-  _data.push({lat: 33.4691314697, lng: -112.04750824});
-  _data.push({lat: 33.4347496033, lng: -112.006439209});
-  _data.push({lat: 33.5096054077, lng: -112.025741577});
-  _data.push({lat: 33.4495391846, lng: -112.065666199});
-  _data.push({lat: 33.4248809814, lng: -111.940200806});
+  if (data.counts != null){
+    data.counts.forEach(function(obj){
+      _data.push({lat: obj.row[0], lng: obj.row[1], label: obj.row[2]});
+    });
+  }
   return _data;
 }
 
@@ -1402,7 +1404,7 @@ $(document).ready(function () {
 
   var selectedWidget = null;
   function showAddFacetDemiModal(widget) {
-    if (["resultset-widget", "html-resultset-widget", "filter-widget"].indexOf(widget.widgetType()) == -1) {
+    if (["resultset-widget", "html-resultset-widget", "filter-widget", "leafletmap-widget"].indexOf(widget.widgetType()) == -1) {
       viewModel.collection.template.fieldsModalFilter("");
       viewModel.collection.template.fieldsModalType(widget.widgetType());
       viewModel.collection.template.fieldsModalFilter.valueHasMutated();

+ 9 - 2
apps/search/static/js/search.ko.js

@@ -885,6 +885,9 @@ var SearchViewModel = function (collection_json, query_json, initial_json) {
   self.availableDraggableResultset = ko.computed(function() {
     return getWidgets(function(widget) { return ['resultset-widget', 'html-resultset-widget'].indexOf(widget.widgetType()) != -1; }).length == 0;
   });
+  self.availableDraggableLeaflet = ko.computed(function() {
+    return getWidgets(function(widget) { return ['leafletmap-widget'].indexOf(widget.widgetType()) != -1; }).length == 0;
+  });
   self.availableDraggableFilter = ko.computed(function() {
     return getWidgets(function(widget) { return widget.widgetType() == 'filter-widget'; }).length == 0;
   });
@@ -964,6 +967,7 @@ var SearchViewModel = function (collection_json, query_json, initial_json) {
         else {
           if (self.collection.template.isGridLayout()) {
             // Table view
+            var _docs = [];
             $.each(data.response.docs, function (index, item) {
               var row = [];
               var fields = self.collection.template.fieldsSelected();
@@ -981,17 +985,20 @@ var SearchViewModel = function (collection_json, query_json, initial_json) {
                 'showDetails': ko.observable(item.showDetails),
                 'details': ko.observableArray(item.details),
               };
-              self.results.push(doc);
+              _docs.push(doc);
             });
+            self.results(_docs);
           }
           else {
             // Template view
+            var _docs = [];
             var _mustacheTmpl = fixTemplateDotsAndFunctionNames(self.collection.template.template());
             $.each(data.response.docs, function (index, item) {
               // fix the fields that contain dots in the name
               addTemplateFunctions(item);
-              self.results.push(Mustache.render(_mustacheTmpl, item));
+              _docs.push(Mustache.render(_mustacheTmpl, item));
             });
+            self.results(_docs);
           }
           self.isRetrievingResults(false);
         }

+ 29 - 6
desktop/core/static/js/ko.charts.js

@@ -119,7 +119,6 @@ ko.bindingHandlers.leafletMapChart = {
     var _options = valueAccessor();
     var _data = _options.transformer(valueAccessor().datum);
 
-
     function getMapBounds(lats, lngs) {
       lats = lats.sort();
       lngs = lngs.sort();
@@ -142,13 +141,13 @@ ko.bindingHandlers.leafletMapChart = {
 
     var _lats = [];
     _data.forEach(function (item) {
-      if (item.lat != null) {
+      if (item.lat != null && $.isNumeric(item.lat)) {
         _lats.push(item.lat);
       }
     });
     var _lngs = [];
     _data.forEach(function (item) {
-      if (item.lng != null) {
+      if (item.lng != null && $.isNumeric(item.lng)) {
         _lngs.push(item.lng);
       }
     });
@@ -160,6 +159,18 @@ ko.bindingHandlers.leafletMapChart = {
       $(element).height(300);
     }
 
+    if (_data.length == 0){
+      $(element).hide();
+    }
+    else {
+      if ((_options.visible != null && _options.visible) || _options.visible == null) {
+        $(element).show();
+      }
+      else {
+        $(element).hide();
+      }
+    }
+
     var _map = null;
     if (element._map != null) {
       element._leaflet = false;
@@ -179,9 +190,21 @@ ko.bindingHandlers.leafletMapChart = {
 
         _data.forEach(function (item) {
           if (item.lng != null && item.lat != null) {
-            var _marker = L.marker([item.lat, item.lng]).addTo(_map);
-            if (item.label != null) {
-              _marker.bindPopup(item.label);
+            var _addMarker = false;
+            try {
+              var _latLngObj = L.latLng(item.lat, item.lng);
+              _addMarker = true;
+             }
+            catch (e){
+              if (typeof console != "undefined") {
+                console.error(e);
+              }
+            }
+            if (_addMarker){
+              var _marker = L.marker([item.lat, item.lng]).addTo(_map);
+              if (item.label != null) {
+                _marker.bindPopup(item.label);
+              }
             }
           }
         });