implement property table

Gooong · Jul 15, 2018 · 0e61195 · 0e61195
1 parent cac6cff
commit 0e61195
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 30 deletions.
diff --git a/web/pgadmin/static/js/mapview/query_result.js b/web/pgadmin/static/js/mapview/query_result.js
@@ -9,29 +9,22 @@
 
 export default class QueryResult {
 
-  constructor(columns, result_data) {
+  constructor(columns, result_data, client_primary_key) {
     this.columns = columns;
     this.resultData = result_data;
+    this.clientPrimaryKey = client_primary_key;
     this.onChange(() => {});
   }
 
-  reset() {
-    this.columns = [];
-    this.resultData = [];
-    this.onResetHandler(this.columns, this.resultData);
-  }
-
-  update(columns, resultData){
+  update(columns, resultData, client_primary_key){
     this.columns = columns;
     this.resultData = resultData;
-    this.onChangeHandler(this.columns, this.resultData);
+    this.clientPrimaryKey = client_primary_key;
+    this.onChangeHandler(this.columns, this.resultData, this.clientPrimaryKey);
   }
 
   onChange(onChangeHandler) {
     this.onChangeHandler = onChangeHandler;
   }
 
-  onReset(onResetHandler) {
-    this.onResetHandler = onResetHandler;
-  }
 }
diff --git a/web/pgadmin/static/jsx/map_view/map_view.jsx b/web/pgadmin/static/jsx/map_view/map_view.jsx
@@ -26,6 +26,7 @@ export default class MapView extends React.Component {
     this.state = {
       resultData:null,
       columns:null,
+      clientPrimaryKey:null,
       geoColumns: [],
 
       selectedGeoColumnIndex:-1,
@@ -37,15 +38,18 @@ export default class MapView extends React.Component {
 
   componentWillMount() {
 
-    this.props.queryResult.onChange((columns, resultData) => {
+    this.props.queryResult.onChange((columns, resultData, clientPrimaryKey) => {
       let geoColumns =  _.filter(columns, function(column){
         return column.column_type === 'geography' || column.column_type === 'geometry';
       });
+
       this.setState({
         resultData:resultData,
         columns:columns,
+        clientPrimaryKey:clientPrimaryKey,
         geoColumns:geoColumns,
       });
+      alert(this.state.clientPrimaryKey);
 
       if(geoColumns.length >= 1){
         this.selectGeoColumn(0);
@@ -60,19 +64,21 @@ export default class MapView extends React.Component {
   selectGeoColumn(index){
     //alert('you select geocolumn:' + index);
     //alert(this.state.geoColumns.length);
+
     if (index !== this.state.selectedGeoColumnIndex){
       if (index >=0 && index < this.state.geoColumns.length){
+        let key = this.state.clientPrimaryKey;
         let columnName = this.state.geoColumns[index].name;
-        //alert(columnIndex);
-        //alert(JSON.stringify(this.state.resultData));
         let wkxGeometries = _.map(this.state.resultData, function (item) {
           let geometryHex = item[columnName];
-          //alert(geometryHex);
           let wkbBuffer = new Buffer(geometryHex, 'hex');
           let geometry = Geometry.parse(wkbBuffer);
           if (typeof (geometry.srid) === 'undefined'){
             geometry.srid = '0';
           }
+          let tmpObj = {};
+          tmpObj[key] = item[key];
+          geometry.properties = tmpObj;
           return geometry;
         });
 
@@ -83,7 +89,9 @@ export default class MapView extends React.Component {
           return pair[1].length;
         });
         let geoJSONs = _.map(selectedPair[1], function (geometry) {
-          return geometry.toGeoJSON();
+          let geojson =  geometry.toGeoJSON();
+          geojson.properties = geometry.properties;
+          return geojson;
         });
         this.setState({
           selectedGeoColumnIndex:index,
@@ -118,6 +126,7 @@ export default class MapView extends React.Component {
         <MapViewMap
           geometries = {this.state.selectedGeometries}
           SRID = {this.state.selectedSRID}
+          clientPrimaryKey = {this.state.clientPrimaryKey}
         />
       </SplitPane>);
   }

diff --git a/web/pgadmin/static/jsx/map_view/map_view_column_info.jsx b/web/pgadmin/static/jsx/map_view/map_view_column_info.jsx
@@ -35,11 +35,11 @@ export default class MapViewColumnInfo extends React.Component{
     return(
       <div className={'column-info' + (this.props.isSelected?' selected':'')}>
         <div className='column-name'>
-          {'column name: ' + this.props.columnInfo.name}
+          {'\'' + this.props.columnInfo.name + '\'' + ' column'}
         </div>
         <div className='other-info'>
           <div className='column-type'>
-            {'column type: ' + this.props.columnInfo.type}
+            {this.props.columnInfo.type + 'type'}
           </div>
 
         </div>

diff --git a/web/pgadmin/static/jsx/map_view/map_view_map.jsx b/web/pgadmin/static/jsx/map_view/map_view_map.jsx
@@ -36,18 +36,16 @@ export default class MapViewMap extends React.Component{
     this.backgroundLayer = new ol.layer.Tile({
       source: new ol.source.OSM(),
     });
-    this.dataLayer = new ol.layer.Vector({
-      renderMode: 'image',
-    });
+    this.dataLayer = new ol.layer.Vector();
     this.mapView = new ol.View();
-    let selectClick = new ol.interaction.Select({
-      condition:  ol.events.condition.click,
-    });
     this.olMap = new ol.Map({
       layers:[this.backgroundLayer, this.dataLayer],
       view: this.mapView,
     });
-    this.olMap.addInteraction(selectClick);
+    this.selectClick = new ol.interaction.Select({
+      condition:  ol.events.condition.click,
+    });
+    this.olMap.addInteraction(this.selectClick);
   }
 
   componentDidMount(){
@@ -56,15 +54,25 @@ export default class MapViewMap extends React.Component{
 
   componentDidUpdate() {
     if (this.props.geometries.length > 0) {
-      alert(this.props.SRID);
-      alert(typeof this.props.SRID);
+      alert(this.props.clientPrimaryKey);
+      alert(JSON.stringify(this.props.geometries[0]));
+      this.selectClick.un('select');
+      let key = this.props.clientPrimaryKey;
+      this.selectClick.on('select', function (e) {
+        let selectedFeature = e.selected[0];
+        alert(selectedFeature.get(key));
+      });
+
       let format = new ol.format.GeoJSON();
       let features = _.map(this.props.geometries, function (geometry) {
         return format.readFeature(geometry);
       });
       let vectorSource = new ol.source.Vector();
       vectorSource.addFeatures(features);
-      this.dataLayer.setSource(vectorSource);
+      this.dataLayer.setProperties({
+        renderMode:'image',
+        source:vectorSource,
+      });
       let dataExtent = vectorSource.getExtent();
 
       let projection;
@@ -86,6 +94,7 @@ export default class MapViewMap extends React.Component{
         this.mapView = new ol.View({
           projection: projection,
           center: ol.extent.getCenter(dataExtent),
+          minZoom:1,
           zoom: 2,
         });
       }
@@ -119,4 +128,5 @@ export default class MapViewMap extends React.Component{
 MapViewMap.propTypes = {
   geometries: PropTypes.array.isRequired,
   SRID: PropTypes.number.isRequired,
+  clientPrimaryKey: PropTypes.string.isRequired,
 };
diff --git a/web/pgadmin/tools/sqleditor/static/js/sqleditor.js b/web/pgadmin/tools/sqleditor/static/js/sqleditor.js
@@ -2336,7 +2336,7 @@ define('tools.querytool', [
                 function() {
                   self.gridView.render_grid(data.result, self.columns,
                     self.can_edit, self.client_primary_key, data.rows_affected);
-                  self.gridView.query_result_object.update(self.columns, data.result);
+                  self.gridView.query_result_object.update(self.columns, data.result, self.client_primary_key);
                 }, 10
               );