Переглянути джерело

HUE-2312 [search] Map result set data to the leaflet marker

Romain Rigaux 11 роки тому
батько
коміт
301a8e2194

+ 4 - 1
apps/search/src/search/models.py

@@ -267,11 +267,13 @@ class Collection(models.Model):
     if self.enabled is not None:
       props['collection']['enabled'] = self.enabled
 
-    # tmp for dev
+    # For backward compatibility
     if 'rows' not in props['collection']['template']:
       props['collection']['template']['rows'] = 10
     if 'enabled' not in props['collection']:
       props['collection']['enabled'] = True
+    if 'leafletmap' not in props['collection']['template']:
+      props['collection']['template']['leafletmap'] = {'latitudeField': None, 'longitudeField': None, 'labelField': None}
 
     return json.dumps(props)
 
@@ -296,6 +298,7 @@ class Collection(models.Model):
       "showFieldList": True,
       "fieldsAttributes": [self._make_gridlayout_header_field(field) for field in fields],
       "fieldsSelected": [],
+      "leafletmap": {'latitudeField': None, 'longitudeField': None, 'labelField': None},
       "rows": 10,
     }
 

+ 16 - 11
apps/search/src/search/templates/search.mako

@@ -643,6 +643,7 @@ ${ dashboard.layout_skeleton() }
 </div>
 </script>
 
+
 <script type="text/html" id="histogram-widget">
   <div class="widget-spinner" data-bind="visible: isLoading()">
     <!--[if !IE]> --><i class="fa fa-spinner fa-spin"></i><!-- <![endif]-->
@@ -673,6 +674,7 @@ ${ dashboard.layout_skeleton() }
   <!-- /ko -->
 </script>
 
+
 <script type="text/html" id="bar-widget">
   <div class="widget-spinner" data-bind="visible: isLoading()">
     <!--[if !IE]> --><i class="fa fa-spinner fa-spin"></i><!-- <![endif]-->
@@ -713,6 +715,7 @@ ${ dashboard.layout_skeleton() }
   <!-- /ko -->
 </script>
 
+
 <script type="text/html" id="line-widget">
   <div class="widget-spinner" data-bind="visible: isLoading()">
     <!--[if !IE]> --><i class="fa fa-spinner fa-spin"></i><!-- <![endif]-->
@@ -870,28 +873,30 @@ ${ dashboard.layout_skeleton() }
 </script>
 
 <script type="text/html" id="leafletmap-widget">
-
   <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>
+      <select data-bind="options: viewModel.collection.fields, optionsText: 'name', value: $root.collection.template.leafletmap.latitudeField, optionsCaption: '${ _('Choose...') }'"></select>
       &nbsp;&nbsp;
       ${_('Longitude')}
-      <select data-bind="options: viewModel.collection.fields, optionsText: 'name', selectedOptions: properties.longitudeField, optionsCaption: '${ _('Choose...') }'"></select>
+      <select data-bind="options: viewModel.collection.fields, optionsText: 'name', value: $root.collection.template.leafletmap.longitudeField, optionsCaption: '${ _('Choose...') }'"></select>
       &nbsp;&nbsp;
       ${_('Label')}
-      <select data-bind="options: viewModel.collection.fields, optionsText: 'name', selectedOptions: properties.labelField, optionsCaption: '${ _('Choose...') }'"></select>
+      <select data-bind="options: viewModel.collection.fields, optionsText: 'name', value: $root.collection.template.leafletmap.labelField, optionsCaption: '${ _('Choose...') }'"></select>
     </div>
+
+    <!-- ko if: $root.collection.template.leafletmap.latitudeField() && $root.collection.template.leafletmap.longitudeField() -->
     <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)};} }" />
+      onComplete: function(){ var widget = viewModel.getWidgetById(id); if (widget != null) {widget.isLoading(false)};} }">
+    </div>
+    <!-- /ko -->
   </div>
 
   <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>
 
 
@@ -1222,11 +1227,11 @@ function mapChartDataTransformer(data) {
 
 function leafletMapChartDataTransformer(data) {
   var _data = [];
-  if (data.counts != null){
-    data.counts.forEach(function(obj){
-      _data.push({lat: obj.row[0], lng: obj.row[1], label: obj.row[2]});
-    });
-  }
+
+  data.counts.forEach(function(record){
+    _data.push({lat: record.leafletmap.latitude, lng: record.leafletmap.longitude, label: record.leafletmap.label});
+  });
+
   return _data;
 }
 

+ 1 - 0
apps/search/static/js/search.ko.js

@@ -984,6 +984,7 @@ var SearchViewModel = function (collection_json, query_json, initial_json) {
                 'row': row,
                 'showDetails': ko.observable(item.showDetails),
                 'details': ko.observableArray(item.details),
+                'leafletmap': ko.mapping.fromJS({'latitude': 33.3907928467, 'longitude': -112.012504578, 'label': 'Curacao'}), // TODO pull with fields
               };
               _docs.push(doc);
             });