Skip to content

Commit

Permalink
add property table
Browse files Browse the repository at this point in the history
  • Loading branch information
@Gooong
Gooong committed Jul 29, 2018
1 parent 3aa7a3c commit 0c26ab9
Show file tree
Hide file tree
Showing 5 changed files with 129 additions and 98 deletions.
2 changes: 0 additions & 2 deletions web/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,6 @@
"css-loader": "0.14.0",
"cssnano": "^3.10.0",
"dropzone": "^5.1.1",
"element-resize-detector": "^1.1.14",
"eonasdan-bootstrap-datetimepicker": "^4.17.47",
"exports-loader": "~0.6.4",
"flotr2": "^0.1.0",
Expand All @@ -76,7 +75,6 @@
"jquery-contextmenu": "^2.6.4",
"jquery-ui": "^1.12.1",
"leaflet": "^1.3.3",
"leaflet.vectorgrid": "^1.3.0",
"moment": "^2.20.1",
"mousetrap": "^1.6.1",
"prop-types": "^15.5.10",
Expand Down
127 changes: 96 additions & 31 deletions web/pgadmin/static/js/sqleditor/geometry_viewer_dialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import Alertify from 'pgadmin.alertifyjs';
import {Geometry} from 'wkx';
import {Buffer} from 'buffer';
import $ from 'jquery';
//import elementResizeDetectorMaker from 'element-resize-detector';
import L from 'leaflet';

// fix the icon url issue according to https://github.com/Leaflet/Leaflet/issues/4849
Expand All @@ -26,7 +25,12 @@ import 'leaflet/dist/images/layers-2x.png';
let GeometryViewerDialog = {
'render_geometry': RenderGeometry,

'render_all_geometries': RenderAllGeometries,
'render_all_geometries': function (e, args) {
let items = args.grid.getData().getItems();
let columns = args.grid.getColumns();
let columnIndex = columns.indexOf(args.column);
RenderAllGeometries(items, columns, columnIndex);
},

'add_header_button': function (columnDefinition) {
columnDefinition.header = {
Expand All @@ -44,15 +48,15 @@ let GeometryViewerDialog = {
};


function RenderAllGeometries(e, args) {
function RenderAllGeometries(items, columns, columnIndex) {
BuildGeometryViewerDialog();

let items = args.grid.getData().getItems();
let field = args.column.field;
let field = columns[columnIndex].field,
geometries3D = [],
geometries = [],
unsupportedItems = [],
geometryItemMap = new Map();

let geometries3D = [];
let geometries = [];
let unsupportedItems = [];
_.each(items, function (item) {
try {
let value = item[field];
Expand All @@ -65,6 +69,7 @@ function RenderAllGeometries(e, args) {
geometry.srid = 0;
}
geometries.push(geometry);
geometryItemMap.set(geometry, item);
}
} catch (e) {
unsupportedItems.push(item);
Expand All @@ -77,18 +82,26 @@ function RenderAllGeometries(e, args) {
let selectedPair = _.max(SRIDGeometriesPairs, function (pair) {
return pair[1].length;
});
let srid = selectedPair[0];
let selectedSRID = selectedPair[0];
let selectedGeometries = selectedPair[1];
let geoJSONs = _.map(selectedPair[1], function (geometry) {
return geometry.toGeoJSON();
});

Alertify.mapDialog(geoJSONs, parseInt(srid));
let getPopupContent = function (geojson) {
let geometry = selectedGeometries[geoJSONs.indexOf(geojson)];
//alert(JSON.stringify(geometryItemMap.has(geometry)));
let item = geometryItemMap.get(geometry);
return item2Table(item, columns);
};

Alertify.mapDialog(geoJSONs, parseInt(selectedSRID), getPopupContent);
}

function RenderGeometry(dataView, columnDefinition, row) {
function RenderGeometry(item, columns, columnIndex) {
BuildGeometryViewerDialog();

let value = dataView.getItem(row)[columnDefinition.field];
let value = item[columns[columnIndex].field];
let geometry;
try {
let buffer = new Buffer(value, 'hex');
Expand All @@ -100,7 +113,12 @@ function RenderGeometry(dataView, columnDefinition, row) {
if (geometry.hasZ) {
Alertify.alert(gettext('Geometry Viewer Error'), gettext('Can not render 3d geometry'));
} else {
Alertify.mapDialog(geometry.toGeoJSON(), geometry.srid);
let geojson = geometry.toGeoJSON();
let getPopupContent = function () {
//alert(JSON.stringify(geojson == geojson));
return item2Table(item, columns);
};
Alertify.mapDialog(geojson, geometry.srid, getPopupContent);
}
}

Expand All @@ -111,14 +129,32 @@ function BuildGeometryViewerDialog() {
let vectorLayer;
let osmLayer;
let lmap;
let popup;

return {
main: function (geojson, SRID) {
main: function (geojson, SRID, getPopupContent) {
//reset map
lmap.closePopup();
vectorLayer.clearLayers();
vectorLayer.off('click');
osmLayer.remove();
divContainer.removeClass('ewkb-viewer-container-plain-background');

if (typeof getPopupContent === 'function') {
vectorLayer.on('click', function (e) {
let geometry;
let feature = e.propagatedFrom.feature;
if (feature.type === 'FeatureCollection') {
geometry = feature;
} else {
geometry = feature.geometry;
}
popup.setLatLng(e.latlng);
popup.setContent(getPopupContent(geometry));
popup.openOn(lmap);
});
}

try {
vectorLayer.addData(geojson);
} catch (e) {
Expand All @@ -133,7 +169,6 @@ function BuildGeometryViewerDialog() {
return;
}


bounds = bounds.pad(0.1);
let maxLength = Math.max(bounds.getNorth() - bounds.getSouth(),
bounds.getEast() - bounds.getWest());
Expand Down Expand Up @@ -163,7 +198,9 @@ function BuildGeometryViewerDialog() {
setup: function () {
return {
options: {
closableByDimmer: true,
closable: true,
maximizable: false,
frameless: true,
padding: false,
overflow: false,
Expand All @@ -174,35 +211,63 @@ function BuildGeometryViewerDialog() {

build: function () {
divContainer = $('<div class="ewkb-viewer-container"></div>');
this.elements.content.appendChild(divContainer.get(0));
vectorLayer = L.geoJSON();
osmLayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '<a target="_blank" href="https://www.openstreetmap.org/copyright">&copy; OpenStreetMap</a>',
});
this.elements.content.appendChild(divContainer.get(0));
lmap = L.map(divContainer.get(0),{
lmap = L.map(divContainer.get(0), {
preferCanvas: true,
});
vectorLayer.addTo(lmap);
osmLayer.addTo(lmap);
popup = L.popup({
closeButton: false,
minWidth: 260,
maxWidth: 400,
maxHeight: 420,
});

// // add resize event listener to resize map
// let erd = elementResizeDetectorMaker();
// erd.listenTo(divContainer, function () {
// setTimeout(function () {
// lmap.invalidateSize();
// }, 200);
// });
// Alertify.pgDialogBuild.apply(this);
// this.elements.dialog.style.width = '80%';
// this.elements.dialog.style.height = '60%';
Alertify.pgDialogBuild.apply(this);
this.set('onresized', function () {
setTimeout(function () {
lmap.invalidateSize();
}, 200);
});
this.elements.dialog.style.width = '80%';
this.elements.dialog.style.height = '70%';
},

// prepare: function () {
// this.elements.dialog.style.width = '80%';
// this.elements.dialog.style.height = '60%';
// },
prepare: function () {
this.elements.dialog.style.width = '80%';
this.elements.dialog.style.height = '70%';
},
};
});
}

function item2Table(item, columns) {
let content = '<table class="table table-bordered table-striped view-geometry-property-table"><tbody>';
_.each(columns, function (columnDef) {
if (!_.isUndefined(columnDef.display_name)) {
content += '<tr><th>' + columnDef.display_name + '</th>' + '<td>';

let value = item[columnDef.field];
if (_.isUndefined(value) && columnDef.has_default_val) {
content += '[default]';
} else if (
(_.isUndefined(value) && columnDef.not_null) ||
(_.isUndefined(value) || value === null)
) {
content += '[null]';
} else {
content += value;
}
content += '</td></tr>';
}
});
content += '</tbody></table>';
return content;
}

module.exports = GeometryViewerDialog;
28 changes: 28 additions & 0 deletions web/pgadmin/tools/sqleditor/static/css/sqleditor.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -672,3 +672,31 @@ input.editor-checkbox:focus {
padding-right: 4px;
}

/* For leaflet popup */
.leaflet-popup-content-wrapper{
border-radius: 4px;
}

.leaflet-popup-content{
margin: 5px;
padding: 10px 10px 0;
overflow-y: scroll;
overflow-x: hidden;
}

/* For geometry viewer property table */
.view-geometry-property-table{
table-layout: fixed;
white-space: nowrap;
padding: 0;
}

.view-geometry-property-table th{
overflow: hidden;
text-overflow: ellipsis;
}

.view-geometry-property-table td{
overflow: hidden;
text-overflow: ellipsis;
}
8 changes: 4 additions & 4 deletions web/pgadmin/tools/sqleditor/static/js/sqleditor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -847,10 +847,10 @@ define('tools.querytool', [
// listen for 'view geometry' button click event in datagrid
grid.onClick.subscribe(function (e, args) {
if ($(e.target).hasClass('btn-view-ewkb-enabled') || $(e.target).parent().hasClass('btn-view-ewkb-enabled')) {
//var value = dataView.getItem(args.row)[grid.getColumns()[args.cell].field];
//show geometry viewer dialog
let columnDefinition = grid.getColumns()[args.cell];
GeometryViewerDialog.render_geometry(dataView, columnDefinition, args.row);
var item = dataView.getItem(args.row);
var columns = grid.getColumns();
var columnIndex = args.cell;
GeometryViewerDialog.render_geometry(item, columns, columnIndex);
}
});

Expand Down
Loading

0 comments on commit 0c26ab9

Please sign in to comment.