Fullstack Portal Created by the HCMR for the Marine Strategy Framework Directive Program in order to cover demands and aspects considering extendability and maintainability

557 lines
15 KiB

2 years ago
var datatable_translation = {
el_gr: {
title: 'Πίνακας Ιδιοτήτων',
pagingtoolbar_emptymsg: 'Δεν υπάρχουν δεδομένα',
pagingtoolbar_displayMsg: 'Εμφανίζονται {0} - {1} από {2}',
pagingtoolbar_firstText: 'Πρώτη σελίδα',
pagingtoolbar_lastText: 'Τελευταία σελίδα',
pagingtoolbar_beforePageText: 'Σελίδα',
pagingtoolbar_afterPageText: 'από {0}',
pagingtoolbar_refreshText: 'Ανανέωση',
pagingtoolbar_prevText: 'Προηγούμενο',
pagingtoolbar_nextText: 'Επόμενο'
},
en_us: {
title: 'Attribute Table',
pagingtoolbar_emptymsg: 'No data to display',
pagingtoolbar_displayMsg: 'Displaying {0} - {1} of {2}',
pagingtoolbar_firstText: 'First page',
pagingtoolbar_lastText: 'Last page',
pagingtoolbar_beforePageText: 'Page',
pagingtoolbar_afterPageText: 'of {0}',
pagingtoolbar_refreshText: 'Refresh',
pagingtoolbar_prevText: 'Previous',
pagingtoolbar_nextText: 'Next'
}
};
init_onload_fn.push(init_datatable);
function init_datatable() {
_maptab_west_layer_layer_menu_components.push(new layerdatatable);
}
var layerdatatable = function () {
return {
text: datatable_translation[language].title,
iconCls: 'features_toolbar_showinfow',
handler: function () {
var _layerId = this.ownerCt._nodeId;
var w = layerdatatable_win(_layerId);
var g = layerdatatable_grid(_layerId);
w.add(g);
w.show();
}
};
}
function layerdatatable_queryObj(_layerId) {
var _servicePort = "";
_layer = mapFindLayerById(_layerId);
if (typeof _layer._serviceObject._servicePort !== "undefined") {
_servicePort = _layer._serviceObject._servicePort;
}
var _queryObject = [{
_layerId: _layer._layerObject._layerId,
_serviceType: _layer._serviceObject._serviceType,
_serviceName: _layer._serviceObject._serviceName,
_servicePort: _servicePort,
_username: _layer._serviceObject._username,
_serviceUrl: _layer._serviceObject._serviceUrl,
_password: _layer._serviceObject._password,
_layerName: _layer._layerObject._layerName,
_version: _layer._serviceObject._version,
_isService: _layer._serviceObject._isService,
_featureType: _layer._layerObject._featureType,
_cqlFilter: "1=1&COUNT={limit}&STARTINDEX={start}&SORTBY={sortby}",
_cqlFilterJSON: "",
_geometryField: _layer._layerObject._geometryField,
_nativeSRS: _layer._layerObject._nativeSRS,
_geomFilter: "",
_featureInfoFormat: _layer._serviceObject._featureInfoFormat,
_request: "search"
}];
return _queryObject;
}
function layerdatatable_grid(_layerId) {
var title = mapFindLayerById(_layerId).name;
var _attributesFields = mapFindLayerById(_layerId)._layerObject._attributesFields;
var _params = layerdatatable_queryObj(_layerId);
var store = null;
var gId = null;
var columns = null;
if (_params[0]._serviceType == 'SHAPEFILE') {
gId = Ext.id();
var _data = [];
var _fields = [];
var _features = mapFindLayerById(_layerId)._layerObject._layer.features;
_features.forEach(function (entry) {
_data.push(entry.attributes);
for (var name in entry.attributes) {
var value = entry.attributes[name];
entry[name] = value;
}
});
console.log(_features);
//
// _data.forEach(function (entry, k) {
// entry._featureId = _features[k].fid;
// entry._geometry = _features[k].geometry;
// entry._layerObject = mapFindLayerById(_layerId)._layerObject;
// entry._serviceObject = mapFindLayerById(_layerId)._serviceObject;
// });
_attributesFields.forEach(function (entry) {
_fields.push({
name: entry._attributeName
});
});
// _fields.push({
// name: '_geometry'
// });
//
// _fields.push({
// name: '_layerObject'
// });
//
// _fields.push({
// name: '_serviceObject'
// });
Ext.define('featureAttributesSHP', {
extend: 'Ext.data.Model',
fields: _fields
});
store = Ext.create('Ext.data.Store', {
data: _features,
model: 'featureAttributesSHP'
});
store.remoteSort = true;
store.pageSize = 100;
var _columns = [
{
_attributeName: "_featureUrl",
_attributeSortable: false,
_attributeType: "string",
_attributeTranslation: "",
hideable: false,
hidden: true
},
{
_attributeName: "_featureGeomFormat",
_attributeSortable: false,
_attributeType: "string",
_attributeTranslation: "",
hideable: false,
hidden: true
},
{
_attributeName: "_srsName",
_attributeSortable: false,
_attributeType: "string",
_attributeTranslation: "",
hideable: false,
hidden: true
},
{
_attributeName: "_featureId",
_attributeSortable: false,
_attributeType: "string",
_attributeTranslation: "",
width: 30,
hideable: false,
renderer: fn_shp_zoom_to_feature
}
];
_columns.push.apply(_columns, _attributesFields);
columns = fn_createAttributesColumnModel(_columns);
}
else {
_params = { data: Ext.JSON.encode(_params) };
gId = Ext.id();
store = fn_createAttributesStore(fn_featureColumnModelForGrid(_attributesFields));
store.autoLoad = true;
store.remoteSort = true;
store.pageSize = 100;
var proxy = {
type: 'ajax',
method: 'POST',
extraParams: _params,
url: _proxy_url + "?proxy=pager",
reader: {
type: 'json',
root: 'data[0]._response._attributes',
totalProperty: 'data[0]._response._total',
getData: function (root) {
var _data = [];
var data = root.data[0]._response._attributes;
index = 0;
Ext.each(data, function (record) {
root.data[0]._response._attributes[index] = record[0];
index++;
});
return root;
}
}
};
store.setProxy(proxy);
store.load();
columns = fn_createAttributesColumnModel(fn_featureColumnModelForGrid(_attributesFields));
}
var g = Ext.create('Ext.grid.Panel',
{
border: false,
columnLines: true,
id: gId,
enableColumnMove: mapFindLayerById(_layerId)._layerObject._attributesReorder,
_layerId: _layerId,
selModel: Ext.create('Ext.selection.CheckboxModel', { mode: 'SIMPLE', checkOnly: true }),
store: store,
columns: columns,
tbar: [{
xtype: 'button',
tooltip: _feature_gridicons_qtip_PDF,
iconCls: 'pdf',
hidden: false,
handler: function () {
var dt = [];
var tt = [];
var i = 0;
var j = 0;
var grid = Ext.getCmp(gId);
var colums = Ext.getCmp(gId).columns;
var selected = Ext.getCmp(gId).getSelectionModel().getSelection();
selected.forEach(function (item, index) {
delete item.raw['_featureGeomFormat'];
delete item.raw['_featureId'];
delete item.raw['_featureUrl'];
delete item.raw['_layerId'];
delete item.raw['_srsName'];
dt.push(item.raw);
var keyNames = Object.keys(item.raw);
if (j <= keyNames.length) {
i = index
}
j = keyNames.length;
});
colums.forEach(function (col) {
var keyNames = Object.keys(selected[i].raw);
keyNames.forEach(function (key) {
if (key === col['dataIndex']) {
var tmp = {
id: key,
translate: col.text
};
var index = tt.findIndex(function (s) {
if (s.id === key) {
return true
}
});
if (index === -1) {
tt.push(tmp)
}
}
});
});
var tableRows = [];
var tm = [];
tt.forEach(function (item) {
tm.push(item.translate);
});
tableRows.push(tm);
dt.forEach(function (raw) {
var tmp = [];
tt.forEach(function (item) {
if (typeof raw[item.id] === 'undefined') {
tmp.push('');
} else {
var keyNames = Object.keys(raw);
keyNames.forEach(function (key) {
if (item.id === key) {
tmp.push(raw[key]);
}
})
}
});
tableRows.push(tmp);
});
var page = '';
if (tt.length <= 6) {
page = 'A4'
} else if (tt.length > 6 && tt.length <= 10) {
page = 'A3'
} else if (tt.length > 10) {
page = 'A2'
}
var docDefinition = {
pageSize: page,
pageOrientation: 'landscape',
content: [
{ text: title, style: 'header' },
{
style: 'table',
table: {
body: tableRows
}
}
],
styles: {
header: {
fontSize: 18,
bold: true,
margin: [0, 0, 0, 10]
},
subheader: {
fontSize: 16,
bold: true,
margin: [0, 10, 0, 5]
},
table: {
margin: [0, 5, 0, 15]
},
tableHeader: {
bold: true,
fontSize: 13,
color: 'black'
}
},
defaultStyle: {
fontSize: 8
}
};
window.pdfMake.createPdf(docDefinition).download();
}
},
{
xtype: 'button',
tooltip: _feature_gridicons_qtip_download,
iconCls: 'features_toolbar_download',
handler: function () {
featureDownloadArray = [];
var selected = Ext.getCmp(gId).getSelectionModel().getSelection();
Ext.each(selected, function (item) {
var _feature = {
_featureId: item.get("_featureId"),
_layerId: item.get("_layerId"),
_srsName: item.get("_srsName"),
_featureUrl: item.get("_featureUrl"),
_featureGeomFormat: item.get("_featureGeomFormat")
};
featureDownloadArray.push(_feature);
});
var _w = fn_featureDonwloadWindow();
_w.show();
}
}],
dockedItems: [{
xtype: 'pagingtoolbar',
emptyMsg: datatable_translation[language].pagingtoolbar_emptymsg,
displayMsg: datatable_translation[language].pagingtoolbar_displayMsg,
firstText: datatable_translation[language].pagingtoolbar_firstText,
lastText: datatable_translation[language].pagingtoolbar_lastText,
beforePageText: datatable_translation[language].pagingtoolbar_beforePageText,
afterPageText: datatable_translation[language].pagingtoolbar_afterPageText,
refreshText: datatable_translation[language].pagingtoolbar_refreshText,
prevText: datatable_translation[language].pagingtoolbar_prevText,
nextText: datatable_translation[language].pagingtoolbar_nextText,
store: store, // same store GridPanel is using
dock: 'bottom',
displayInfo: true
}],
listeners: {
select: function (row, record, index, eOpts) {
var _feature = fn_featureObject(record);
fn_featureHighlight(_feature._featureId, _feature._layerId, _feature._srsName, _feature._featureUrl, _feature._featureGeomFormat, '');
fn_toggleHightlightFromAllResultsGrids(_feature._featureId, _feature._layerId, g.id);
},
show: function () {
},
deselect: function (row, record, index, eOpts) {
var _feature = fn_featureObject(record);
fn_featureUnHiglighted(_feature._featureId, _feature._layerId);
fn_toggleHightlightFromAllResultsGrids(_feature._featureId, _feature._layerId, g.id);
},
beforeclose: function (grid, eOpts) {
Ext.Array.remove(fn_grid_results_ids_array, g.id);
Ext.Array.clean(fn_grid_results_ids_array);
grid.store.each(function (item) {
if (fn_featureIsHiglighted(item.get("_featureId"), item.get("_layerId"))) {
fn_featureUnHiglighted(item.get("_featureId"), item.get("_layerId"));
fn_toggleHightlightFromAllResultsGrids(item.get("_featureId"), item.get("_layerId"), g.id);
}
});
},
viewready: function (grid, eOpts) {
grid.store.each(function (item) {
if (fn_featureIsHiglighted(item.get("_featureId"), item.get("_layerId"))) {
grid.getSelectionModel().select(item, true, true);
}
});
}
}
});
return g;
}
function layerdatatable_win(_layerId) {
var _w_id = Ext.id();
var chartwin = Ext.create('Ext.window.Window', {
width: 800,
height: 600,
id: _w_id,
minHeight: 400,
minWidth: 550,
hidden: false,
title: mapFindLayerById(_layerId).name,
resizable: {
listeners: {
resize: function () {
Ext.getCmp('maptab_mapPanel').getEl().unmask();
},
beforeresize: function () {
Ext.getCmp('maptab_mapPanel').getEl().mask().dom.style.zIndex = Ext.getCmp(_w_id).getEl().dom.style.zIndex;
}
}
},
minimizable: true,
maximizable: true,
constrain: true,
listeners: {
destroy: function () {
Ext.getCmp('maptab_mapPanel').getEl().unmask();
},
show: function (window, eOpts) {
// window.tools.restore.hide();
window.tools[0].hide();
window.tools[3].hide();
Ext.getCmp('maptab_mapPanel').getEl().unmask();
},
"minimize": function (window, opts) {
// window.tools.restore.show();
window.tools[0].show();
window.tools.minimize.hide();
window.collapse();
Ext.getCmp('maptab_mapPanel').getEl().unmask();
},
},
tools: [{
type: 'restore',
handler: function (evt, toolEl, owner, tool) {
var window = owner.up('window');
// window.tools.restore.hide();
window.tools[0].hide();
window.tools[3].hide();
window.tools.minimize.show();
window.expand('', false);
}
}],
layout: 'fit'
});
return chartwin;
}
function fn_shp_zoom_to_feature(value, metaData, record, row, col, store, gridView) {
return "<img src=\"" + host + "images/show.png\" class=\"column_grid_images\" data-qtip=\"" + _feature_gridicons_qtip_showOnMap + "\" onClick=\"fn_featureShowOnMap_SHP('" + record.raw.geometry + "','');\">";
}
function fn_featureShowOnMap_SHP(_geom) {
var wkt = new OpenLayers.Format.WKT();
var features = wkt.read(_geom);
var bounds;
if (features) {
if (features.constructor != Array) {
features = [features];
}
for (var i = 0; i < features.length; ++i) {
if (!bounds) {
bounds = features[i].geometry.getBounds();
} else {
bounds.extend(features[i].geometry.getBounds());
}
}
map.zoomToExtent(bounds);
}
}