WebCompDev / COMPONENTS

  <link rel="import" href="../../bower_components/polymer/polymer.html" />
  
  <link rel="import" href="../../bower_components/paper-material/paper-material.html" />
  

  <link rel="import" href="../../bower_components/paper-button/paper-button.html">
  

  <link rel="import" href="../items-vslider-controllet/items-vslider-controllet.html" />

  <link rel="import" href="select-datalet-inputs_series.html" />
  <link rel="import" href="select-datalet-inputs.html" />
  <link rel="import" href="select-datalet-options.html" />

  
  <script src="../../../DEEPCLIENT/js/deepClient.js"></script>
  

  <dom-module id="select-visualization-controllet">

  
      <template>
  
          <style is="custom-style">

              #select_visualization_container {

                  display: flex;
                  font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
                  font-size: 16px;
                  margin-top: 8px;
              }
  
              #items_vslider_controllet {
                  position: relative;
                  min-width: 172px;
              }
  
              #datalet_selection_inputs {
                  position: relative;

                  margin-left: 32px;
                  min-width: 258px;
              }
  

              #datalet_selection_options {

                  position: relative;

                  margin-left: 32px;
                  min-width: 258px;
              }
  

              #datalet_preview_container {

                  position: relative;
                  width: 100%;
                  margin-left: 32px;
              }
  
              #datalet_selection_datalet {
                  position: relative;
                  height: 100vh;
                  width: 100%;
              }
  
              #datalet_selection_datalet_placeholder {
                  padding: 16px;
              }
  

              .input_header {
                  height: 32px;
                  padding-top: 16px;
                  text-align: center;
                  font-weight: 700;
                  background-color: #B6B6B6;
              }
  

              paper-button {
                  position: absolute;
                  bottom: 16px;
                  right: 11px;
  
                  height: 48px;
                  width: 172px;
                  background-color: #00BCD4;
                  color: white;
                  font-weight: 700;
                  padding: 16px;
              }
  
              paper-button:hover {
                  background-color: #00AABF;
  
                  box-shadow: 0px 8px 12px #888;
                  -webkit-box-shadow: 0px 8px 12px #888;
                  -moz-box-shadow: 0px 8px 12px #888;
              }
  
              paper-button[disabled] {
                  background-color: #B6B6B6;
              }

          </style>
  
          <iron-ajax id="selectedDatalet_request" on-response="_handleSelectedDatalet"></iron-ajax>
  

          <div id="select_visualization_container">

  
              <div id="items_vslider_controllet">
                  <items-vslider-controllet id="vslider" datalets-list-url={{dataletsListUrl}} preselected-datalet={{preselectedDatalet}}></items-vslider-controllet>
              </div>
  

              <div id="datalet_selection_inputs">
                  <template is="dom-if" if="{{_checkType(type, 'multiseries')}}">
                      <select-datalet-inputs_series id="inputs_series"></select-datalet-inputs_series>

                  </template>

                  <template is="dom-if" if="{{_checkType(type, 'default')}}">
                      <select-datalet-inputs id="inputs"></select-datalet-inputs>
                  </template>
                  <template is="dom-if" if="{{_checkType(type, '')}}">
                      <select-datalet-inputs></select-datalet-inputs>

                  </template>

              </div>

              <div id="datalet_selection_options">
                  <select-datalet-options id="options"></select-datalet-options>
              </div>

              <div id="datalet_preview_container">

  
                  <paper-material id="datalet_selection_datalet" elevation="5">
                      <div class="input_header"><span id="dataletPreview"></span></div>
                      <div id="datalet_selection_datalet_placeholder"></div>

                  </paper-material>
  
                  <paper-button id="add_button" disabled raised on-click="_addDatalet"></paper-button>
  
              </div>
  

          </div>
  
      </template>
  
      <script>
  
          Polymer({
  

              is : 'select-visualization-controllet',

  
              properties : {
  
                  deepUrl : {
                      type : String,
                      value : undefined
                  },
  
                  dataletsListUrl : {
                      type : String,
                      value : undefined
                  },
  
                  selectedDatalet : {
                      type  : String,
                      value : undefined
                  },
  
                  preselectedDatalet : {
                      type  : String,
                      value : undefined
                  },
  

                  type : {
                      type : String,

                      value : ""

                  },
  
                  filters : {
                      type : Array,
                      value : []
                  },
  

                  fields : {
                      type : Array,
                      value : []
                  },
  
                  selectedFields : {
                      type : Array,
                      value : []
                  },
  

                  dataletPreset : {
                      type  : Object,
                      value : []
                  },
  

                  dataUrl : {
                      type  : String,
                      value : undefined
                  },
  
                  params:{
                      type: Object,
                      value: undefined

                  }
  
              },
  
              listeners: {
                  'items-vslider-controllet_selected-datalet': '_selectDatalet',

                  'select_visualization_inputs_ready': '_loadDatalet',
                  'select_visualization_options_changed': '_tryLoadDatalet',

              },
  
              ready : function() {
                  this._resize();

                  $(this.$.datalet_selection_datalet).perfectScrollbar();
  

  //                this.params = {'data-url' : this.dataUrl};//not here

              },
  
              attached : function() {
                  this._resize();
                  var that = this;
                  window.addEventListener("resize", function() { that._resize(); });
  
                  this._translate();
              },
  
              setFilters : function(filters) {

                  this.filters = this._copy(filters);

              },
  
              setFields : function(fields) {

                  if (this.fields.length > 0 && JSON.stringify(this.fields) != JSON.stringify(fields))
                      this.reset();
  

                  this.fields = this._copy(fields);
  
                  var inputs = this._getInputs();

                  if (inputs)

                      inputs.setFields(this.fields);

              },
  
              reset : function() {

                  this.$.vslider._reset();

              },
  
              show : function() {//show --> preselect

  //                if(this.preselectedDatalet)
                  if(this.dataletPreset)

                      this._preselectDatalet();

  //                if (this.$.datalet_selection_datalet_placeholder.innerHTML == "") {
  //                    var inputs = this._getInputs();
  //                    inputs.fireReady();
  //                }

              },
  
              _translate : function(){

                  if(this.preselectedDatalet)
                      this.$.add_button.innerHTML = ln["modifyDatalet_" + ln["localization"]];
                  else
                      this.$.add_button.innerHTML = ln["addDatalet_" + ln["localization"]];

                  this.$.dataletPreview.innerHTML = ln["dataletPreview_" + ln["localization"]];

              },
  
              _selectDatalet : function(e){

                  this.$.add_button.setAttribute("disabled", "true");
  
                  this.selectedDatalet = e.detail.datalet;
  
                  this.$.datalet_selection_datalet_placeholder.innerHTML = "";
  
                  if(!this.selectedDatalet){

                      this.type = "";
                      this.$.options.setOptions([]);

                  }
                  else{
                      this.$.selectedDatalet_request.url = this.deepUrl + e.detail.datalet + "-datalet";
                      this.$.selectedDatalet_request.generateRequest();

                  }
              },
  

              _handleSelectedDatalet : function(e){
  
                  if(this.type != e.detail.response.type) {
  

                      this.type = e.detail.response.type;

                      this.async(function () {
                          var inputs = this._getInputs();
                          inputs.setFields(this.fields);
                          inputs.setInputs(e.detail.response.idm.inputs.input);// Cannot read property '0' of undefined
                      }, 0);

                      this.$.options.setOptions(e.detail.response.idm.inputs.layouts.input);

                  }
                  else {

                      this.$.options.checkOptions(e.detail.response.idm.inputs.layouts.input);

                  }
  

                  this.async(function () {
                      var inputs = this._getInputs();
                      inputs.fireReady();
                  }, 0);

  
  //                this.async(function () {
  //                    if(this.preselectedDatalet)
  //                        this._preselectDatalet();
  //                }, 1);
              },
  

              _preselectDatalet : function() {console.log("preselzionando si impara");
                  this.$.vslider._preselectDatalet();

                  this.async(function () {
                      this.$.options._preselectOptions(this.dataletPreset);
                  }, 100);
  
                  this.async(function () {
                      var inputs = this._getInputs();
                      inputs._preselectInputs(this.fields, this.dataletPreset["aggregators"], this.dataletPreset["orders"]);
                      this.dataletPreset = undefined;
                  }, 200);

              },
  

              _tryLoadDatalet : function(){
                  var inputs = this._getInputs();
                  inputs.fireReady();

              },
  

              _loadDatalet : function(e){
                  if(!e.detail.isReady) {
                      this.$.datalet_selection_datalet_placeholder.innerHTML = "";
                      return;
                  }
  

                  var inputs = this._getInputs();

                  this.selectedFields = inputs.getSelectedFields();

                  this.params = {'data-url' : this.dataUrl};
  

                  this.params["filters"] = JSON.stringify(this.filters);

                  this.params["aggregators"] = JSON.stringify(inputs.getAggregators());
                  this.params["orders"] = JSON.stringify(inputs.getOrders());

                  this.params["export_menu"] = "0";
  

                  var params = this.$.options.getParams();
                  for (var key in params) { this.params[key] = params[key]; }

  
                  var dataletParams ={
                      component   : this.selectedDatalet+"-datalet",
                      params      : this.params,

                      fields      : this.selectedFields,

                      placeHolder : this.$.datalet_selection_datalet_placeholder
                  };
  
                  ComponentService.deep_url = this.deepUrl;
                  ComponentService.getComponent(dataletParams);
  
                  this.$.add_button.removeAttribute("disabled");
              },
  
              _addDatalet : function(){

                  var data = {
                      dataUrl : this.dataUrl,
                      params :  this.params,

                      fields :  this.selectedFields,

                      datalet : this.selectedDatalet+"-datalet",

                      staticData : JSON.stringify(this.$.datalet_selection_datalet_placeholder.children[1].behavior.data)
                  }
  
                  this.fire('data-sevc-controllet.dataletCreated', {data : data});

              },
  

              _checkType: function(type, check){
                  if (type == "multiseries" || type == "")
                      return (type == check);
                  else if(check == "default")
                      return true;
                  return false;

              },
  

              _getInputs  : function(){
                  if(this.type == "multiseries")
                      return this.$$("#inputs_series")
                  return this.$$("#inputs");

              },
  
              _copy : function(o) {
                  var out, v, key;
                  out = Array.isArray(o) ? new Array(o.length) : {};
                  for (key in o) {
                      v = o[key];
                      out[key] = (typeof v === "object") ? this._copy(v) : v;
                  }
                  return out;
              },
  

              _resize : function(){
                  var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16;
                  h = h - 64 - 8; //height with page scroller
  

                  $("#items_vslider_controllet").height(h);//vslider controllet

                  $("#datalet_selection_inputs").height(h);

                  $("#datalet_selection_options").height(h);
  

                  $("#datalet_selection_datalet").height(h);
              }
  
          });
  
      </script>
  
  </dom-module>