msfd_portal_hcmr/public/js/modules/poseidon/poseidon.js

var poseidon_translations = {
  el_gr: {
    measurement_tab_title: 'Μετρήσεις',
    choose_date_from: 'Ημερομηνία Από',
    choose_date_to: 'Ημερομηνία Έως',
    clear_btn: 'Καθαρισμός Φόρμας',
    execute_btn: 'Εμφάνιση Αποτελεσμάτων',
    panel_title: 'Poseidon System',
    select_geo: 'Επιλέξτε Περιοχή',
    choose_parameter: 'Επιλέξτε Παράμετρο',
    choose_date_from: 'Ημερομηνία Από',
    choose_date_to: 'Ημερομηνία Έως',
    no_records: 'Δεν βρέθηκαν δεδομένα',
    filename: 'Αρχεία',
    send_email: 'Αποστολή e-mail',
    please_wait: 'Παρακαλώ περιμένετε...'
  },
  en_us: {
    measurement_tab_title: 'Measurements',
    choose_date_from: 'Date From',
    choose_date_to: 'Date To',
    clear_btn: 'Clear Form',
    execute_btn: 'Show Results',
    panel_title: 'Poseidon System',
    select_geo: 'Select Area',
    choose_parameter: 'Select Parameter',
    choose_date_from: 'Date From',
    choose_date_to: 'Date To',
    no_records: 'No records found',
    filename: 'Files',
    send_email: 'Send e-mail',
    please_wait: 'Please wait...'
  }
}

var poseidon_layers = [
  ['poseidon:poseidon', 'da3386bf44588b37a7ff447ae374582f18340009637aa630afaa963a41d3650d']
];

function poseidon_measurements_tab(w) {

  w.setPosition(-150,-150)
  w.setWidth(700);
  w.setHeight(530);

  var _layer = mapFindLayerById(w._feature._layerId);

  if (poseidon_layers.findIndex(x => x[0] === _layer._layerObject._layerName) >= 0) {

    var _Id = Ext.id();

    var tab = Ext.create('Ext.Panel',
      {
        title: poseidon_translations[language].measurement_tab_title,
        border: false,
        layout: 'fit',
        autoScroll: true,
        items: [{
          xtype: 'tabpanel',
          id: _Id,
          border: false,
          style: 'padding:0px;',
          items: [

          ]
        }],
        listeners: {
          beforerender: function () {

            var p = new fn_get();

            p._async = true;

            p._data = [{
              _layerId: w._feature._layerId,
              _serviceType: mapFindLayerById(w._feature._layerId)._serviceObject._serviceType,
              _serviceName: mapFindLayerById(w._feature._layerId)._serviceObject._serviceName,
              _layerName: mapFindLayerById(w._feature._layerId)._layerObject._layerName,
              _featureUrl: w._feature._featureUrl,
              _request: "getAttributes"
            }]

            p._timeout = 5000;

            p._success = function (_response, _opts) {

              var _response = Ext.JSON.decode(_response.responseText)[0]._response._attributes[0][0];

              var parameters = JSON.parse(_response.pgroup)

              var categories = [];

              Object.keys(parameters).forEach(function (i) {
                if (!categories.find(o => o["category"] === parameters[i]['long']))
                  categories.push({ "category": parameters[i]['long'], "parameters": [] });
              })

              for (const property in parameters) {

                var cat = categories.find(category => category['category'] === parameters[property]['long'])

                cat.parameters.push(property);
              }

              categories.forEach(function (tab) {

                var category_tab = poseidon_create_category_tab(tab, _Id, _response)

                Ext.getCmp(_Id).add(category_tab);

              })

              Ext.getCmp(_Id).setActiveTab(0);

            };

            p.get();

          }
        }
      }
    );

    return tab

  }

}

function poseidon_create_category_tab(tab, _Id, _response) {

  var category_tab = Ext.create('Ext.Panel', {
    title: tab["category"],
    border: false,
    layout: 'fit',
    autoScroll: true,
    id: tab["category"] + _Id,
    items: [{
      xtype: 'tabpanel',
      layout: 'form',
      border: false,
      items: tab.parameters.map(function (param) {

        return poseidon_create_tab_parameter(tab, param, _Id, _response)

      })
    }]
  });

  return category_tab;

}

function poseidon_create_tab_parameter(tab, param, _Id, _response) {

  var id = _response['tspr'] + '_' + _response['type'] + '_' + _response['name_code'];
  var chosenDtEnd = _response['dateEnd'].split('T')[0];
  var chosenDtStart = _response['dateStart'].split('T')[0];

  var parameter_tab = Ext.create('Ext.Panel', {
    title: param,
    border: false,
    layout: 'fit',
    autoScroll: true,
    id: tab["category"] + param + _Id,
    html: '<div id="' + tab["category"] + param + _Id + '_chart" style="width:100%; height:400px;">' + poseidon_translations[language].please_wait + '</div>',
    listeners: {
      afterrender: function () {

        var title = '';

        fetch(host + 'modules/poseidon/index.php?request=0&id=' + id)
          .then(response => response.json())
          .then(data => {
            title = data['info']['params'][tab["category"].charAt(0)][param]['name'] + ' (' + data['info']['params'][tab["category"].charAt(0)][param]['unit'] + ')';
          });

        Highcharts.getJSON(host + 'modules/poseidon/index.php?request=1&id=' + id + '&param=' + param + '&chosenDtStart=' + chosenDtStart + '&chosenDtEnd=' + chosenDtEnd, function (data) {

          var d = data[0][0].data;

          var dn = [];

          d.forEach(function (i) {
            dn.push([i.x, i.y]);
          });

          Highcharts.stockChart(tab["category"] + param + _Id + '_chart', {

            rangeSelector: {
              selected: 1
            },

            title: {
              text: title
            },

            series: [{
              name: param,
              data: dn
            }]
          });
        });

      }
    }
  });

  return parameter_tab;

}


init_featureInfoWindow_tabs.push(poseidon_measurements_tab);