msfd_portal_hcmr/public/js/modules/datatable/datatable.js

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);
  }
}