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-tabs/paper-tabs.html">
  <link rel="import" href="../../bower_components/paper-tabs/paper-tab.html">

  <link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
  <link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
  <link rel="import" href="../../bower_components/paper-item/paper-item.html">

  <link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
  <link rel="import" href="../../bower_components/paper-tooltip/paper-tooltip.html">

  <link rel="import" href="../datasets-list-controllet/datasets-list-controllet.html">

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

      <template>

          <style>

              #select_dataset_container {
                  margin-top: 8px;

              }
  

              #select_dataset_container * {
                  font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
                  font-size: 16px;
                  line-height: 24px;

              }
  

              #select_dataset_container #options {
                  display: flex;
                  flex-direction: row;

                  height: 48px;

                  padding: 0;
                  font-weight: 700;
                  background: #B6B6B6;

                  margin-top: 2px;

                  overflow: hidden;

              }
  

              #select_dataset_container #options_header {
                  width: calc(100% - 96px);
                  text-align: center;
                  padding: 12px 0 12px 48px;

              }
  

              #select_dataset_container .header_block {
                  width: calc((100% - 48px) / 2);
                  max-width: 400px;
                  margin-left: 12px;

                  line-height: 40px;

                  display: none;

              }

              #select_dataset_container #url {
                  padding: 0 12px 12px 12px;
                  height: 60px;

                  border: 2px solid #B6B6B6;
                  border-top: 0;

              }

              #select_dataset_container #datasets_list_container {
                  height: calc(100% - 96px - 2px - 74px);
                  width: 100%;

              }

              paper-tabs {
                  background: #B6B6B6;

              }

              paper-tab {
                  font-weight: 700;
                  border-right: 2px solid #FFFFFF;

              }

              paper-tab:nth-child(2) {
                  border-right: 0;

              }

              paper-tab.iron-selected {
                  color: #FFFFFF;
                  background: #2196F3;;

              }

              paper-tab:not(.iron-selected):hover {
                  color: #2196F3;

              }
  

              paper-input {
                  --paper-input-container-focus-color: #2196F3;

              }
  

              paper-icon-button {
                  height: 48px;
                  width: 48px;
                  padding: 8px;

              }
  

              paper-icon-button[icon="settings"] {
                  cursor: pointer;
                  color: #00BCD4;
                  --paper-icon-button-ink-color: #00BCD4;

                  background: #E0E0E0;
                  float: right;
                  position: absolute;
                  right: 0;

              }
  

              paper-icon-button[icon="info-outline"] {
                  cursor: help;

              }

              :host {
              --paper-dropdown-menu-icon: {
                   color: #000000;
               };
              --paper-dropdown-menu-ripple: {
                   color: #FFFFFF;
               };

              }
  

              paper-dropdown-menu {
                  width: 200px;
                  --paper-input-container-focus-color: #2196F3;

              }
  

              paper-item {
                  min-width: 128px;
                  white-space: nowrap;

              }
  

              paper-item.iron-selected {
                  background-color: #2196F3;
                  color: #FFFFFF;

              }

              paper-tooltip {
                  min-width: 400px;
                  --paper-tooltip-background: black;

              }
  

              #select_dataset_container br {
                  display: block;
                  margin-top: 8px;
                  content: " ";

              }
  

              #select_dataset_container p {
                  margin: 0;
                  padding: 0;

              }
  

              #select_dataset_container p .option {
                  color: #2196F3;;
                  font-weight: 700;

              }
  

              #select_dataset_container p .description {

              }

          </style>
  

          <paper-material id="select_dataset_container" elevation="5">

              <paper-tabs selected={{tabIndex}} no-bar>
                  <paper-tab noink on-tap="_setProvidersDatasets"><span id="providers_datasets"></span></paper-tab>
                  <paper-tab noink on-tap="_setLocalDatasets"><span id="spod_users_datasets"></span></paper-tab>

              </paper-tabs>

              <div id="options">
  
                  <div id="options_header"></div>
  
                  <div id="provider_option" class="header_block">
                      {{_getLocalization('provider')}}:&nbsp;

                      <paper-dropdown-menu id="ddl_provider" label="" no-label-float>

                          <paper-menu id="menu_provider" class="dropdown-content">
                              <paper-item id="0" on-tap="_setProvidersDatasets"><span id="all"></span></paper-item>
                              <template is="dom-repeat" items={{_toArray(providers)}}>
                                  <paper-item id={{item.value.id}} on-tap="_setProvidersDatasets">{{item.value.title}}</paper-item>

                              </template>
                          </paper-menu>
                      </paper-dropdown-menu>

                      <paper-icon-button id="info_provider" icon="info-outline" noink></paper-icon-button>
                      <paper-tooltip id="tooltip_provider" for="info_provider" offset="8">
                          <p>
                              <span class="option">{{_getLocalization('all')}}</span><br>
                              <span class="description">{{_getLocalization('allDescription')}}</span><br>
                              <span class="option">{{_getLocalization('providerName')}}</span><br>
                              <span class="description">{{_getLocalization('providerNameDescription')}}</span><br>
                          </p>
                      </paper-tooltip>

                  </div>

  
                  <!--<div id="view_option" class="header_block">-->
                      <!--{{_getLocalization('view')}}:&nbsp;-->
                      <!--<paper-dropdown-menu id="ddl_view" label="" no-label-float>-->
                          <!--<paper-menu id="menu_view" class="dropdown-content">-->
                              <!--<paper-item id="0" on-tap=""><span id="list"></span></paper-item>-->
                              <!--<paper-item id="1" on-tap="" disabled><span id="tree"></span></paper-item>-->
                          <!--</paper-menu>-->
                      <!--</paper-dropdown-menu>-->
                      <!--<paper-icon-button id="info_view" icon="info-outline" noink></paper-icon-button>-->
                      <!--<paper-tooltip id="tooltip_view" for="info_view" offset="8">-->
                          <!--<p>-->
                              <!--<span class="option">{{_getLocalization('list')}}</span><br>-->
                              <!--<span class="description">{{_getLocalization('listDescription')}}</span><br>-->
                              <!--<span class="option">{{_getLocalization('tree')}}</span><br>-->
                              <!--<span class="description">{{_getLocalization('treeDescription')}}</span><br>-->
                          <!--</p>-->
                      <!--</paper-tooltip>-->
                  <!--</div>-->
  
                  <div id="search_option" class="header_block">
                      {{_getLocalization('search')}}:&nbsp;
                      <paper-dropdown-menu id="ddl_search" label="" no-label-float>
                          <paper-menu id="menu_search" class="dropdown-content">
                              <paper-item><span id="standard"></span></paper-item>
                              <paper-item disabled><span id="extended"></span></paper-item>
                          </paper-menu>
                      </paper-dropdown-menu>
                      <paper-icon-button id="info_search" icon="info-outline" noink></paper-icon-button>
                      <paper-tooltip id="tooltip_search" for="info_search" offset="8">
                          <p>
                              <span class="option">{{_getLocalization('standard')}}</span><br>
                              <span class="description">{{_getLocalization('standardDescription')}}</span><br>
                              <span class="option">{{_getLocalization('extended')}}</span><br>
                              <span class="description">{{_getLocalization('extendedDescription')}}</span><br>
                          </p>
                      </paper-tooltip>

                  </div>

  
                  <div id="version_option" class="header_block">
                      {{_getLocalization('version')}}:&nbsp;
                      <paper-dropdown-menu id="ddl_version" label="" no-label-float>
                          <paper-menu id="menu_version" class="dropdown-content">
                              <paper-item id="0" on-tap="_showLast"><span id="show_last"></span></paper-item>
                              <paper-item id="1" on-tap="_showAll"><span id="show_all"></span></paper-item>
                          </paper-menu>
                      </paper-dropdown-menu>
                      <paper-icon-button id="tooltip_version" icon="info-outline" noink></paper-icon-button>
                      <paper-tooltip id="tooltip_version" for="tooltip_version" offset="8">
                          <p>
                              <span class="option">{{_getLocalization('showLast')}}</span><br>
                              <span class="description">{{_getLocalization('showLastDescription')}}</span><br>
                              <span class="option">{{_getLocalization('showAll')}}</span><br>
                              <span class="description">{{_getLocalization('showAllDescription')}}</span><br>
                          </p>
                      </paper-tooltip>

                  </div>

  
                  <paper-icon-button icon="settings" on-click="_optionsMenu"></paper-icon-button>
  

              </div>
  

              <div id="datasets_list_container">
                  <datasets-list-controllet id="datasets_list"></datasets-list-controllet>

              </div>
  

              <div id="url"><paper-input id="selected_url" label="" value={{dataUrl}} error-message={{errorMessage}}></paper-input></div>

          </paper-material>

  
      </template>
  
      <script>

          HTMLImports.whenReady(function() {
              Polymer({
                  is: 'select-dataset-controllet',

                  properties: {

  
                      tabIndex: {
                          type: Number,
                          value: 0
                      },
  

                      datasets: {
                          type: Object,
                          value: undefined
                      },

                      suggestedDatasets : {
                          type : Array,
                          value : undefined
                      },
  

                      dataUrl : {
                          type  : String,
                          value : undefined,
                          observer : '_fireDataUrl'

                      }

                  },

  
                  listeners: {

                      'datasets-list-controllet_dataset' : '_selectDataUrl'

                  },
  

                  ready : function() {

                      this._translate();
  

                      $(this.$.list_container).perfectScrollbar();

                      $(this.$.info).perfectScrollbar();

                      this.options = false;

                  },
  

                  attached : function() {
                      this._translate();
  

                      this._resize();
                      var that = this;

                      window.addEventListener("resize", function() { that._resize() });

                      this.providers = this.datasets["result"]["providers"];
                      this.providersDatasets = this.datasets["result"]["datasets"];
  
                      if(this.suggestedDatasets)
                          this.providersDatasets = this.suggestedDatasets.concat(this.providersDatasets);

                      $.ajax({
                          url: "/cocreation/ajax/get-all-dataset",
                          dataType: "json",

                          success: function(localDatasets){
                              that.localDatasets = localDatasets;
                              that.lastLocalDatasets = [];
                              var resource_name = "";
                              for(var i in localDatasets)
                                  if(localDatasets[i].resource_name != resource_name) {
                                      that.lastLocalDatasets.push(localDatasets[i]);
                                      resource_name = localDatasets[i].resource_name;
                                  }
                          },
                          error: function(){
                              that.localDatasets = [];
                              that.lastLocalDatasets = [];

                          }
                      });

                      this._setProvidersDatasets();
                  },

                  showDatasetInfo : function() {
                      this.$.datasets_list.showDatasetInfo();
                  },

                  _translate : function(){

                      this.$.selected_url.setAttribute("label", ln["selectedUrl_" + ln["localization"]]);
                      this.errorMessage = ln["wrongUrl_" + ln["localization"]];

                      this.$.providers_datasets.innerHTML = ln["providersDatasets_" + ln["localization"]];
                      this.$.spod_users_datasets.innerHTML = ln["spodUsersDatasets_" + ln["localization"]];
                      this.$.options_header.innerHTML = ln["datasets_" + ln["localization"]];
  
                      this.$.all.innerHTML = ln["all_" + ln["localization"]];
  //                    this.$.list.innerHTML = ln["list_" + ln["localization"]];
  //                    this.$.tree.innerHTML = ln["tree_" + ln["localization"]];
                      this.$.standard.innerHTML = ln["standard_" + ln["localization"]];
                      this.$.extended.innerHTML = ln["extended_" + ln["localization"]];
                      this.$.show_last.innerHTML = ln["showLast_" + ln["localization"]];
                      this.$.show_all.innerHTML = ln["showAll_" + ln["localization"]];
  
                      this.$.menu_provider.select(0);
  //                    this.$.menu_view.select(0);
                      this.$.menu_search.select(0);
                      this.$.menu_version.select(0);

                  },
  

                  _setLocalDatasets : function() {
                      if(this.$.ddl_version.selectedItem.id == 0)
                          this._showLast();

                      else

                          this._showAll();
                      this._showOptions()

                  },
  

                  _setProvidersDatasets : function() {
                      this.async(function () {
                          var ddl_provider = $(this.$.ddl_provider).find("paper-menu")[0].selectedItem;
                          var name = ddl_provider.innerHTML.trim();
                          var id = this._getIdByProviderName(name);
                          if (id) {
                              var providerDatasets = this.providersDatasets.filter(function (el) {
                                  return el.provider_name == "p:" + id;

                              });

                              this.$.datasets_list.setDatasets(providerDatasets);
                          }
                          else
                              this.$.datasets_list.setDatasets(this.providersDatasets);

                          this._showOptions()
                      }, 0);

                  },

  
                  _getIdByProviderName : function(name) {
                      for(var id in this.providers) {
                          if (this.providers[id].title == name)
                              return this.providers[id].id;
                      }
                  },
  

                  _optionsMenu : function() {
                      this.options = !this.options;
                      this._showOptions();

                  },
  

                  _showOptions : function() {
                      this.async(function () {
                          if(!this.options) {
                              this.$.options_header.style.display = "block";
                              this.$.provider_option.style.display = "none";
  //                            this.$.view_option.style.display = "none";
                              this.$.search_option.style.display = "none";
                              this.$.version_option.style.display = "none";
                          }
                          else if(this.tabIndex == 0) {
                              this.$.options_header.style.display = "none";
                              this.$.provider_option.style.display = "block";
  //                            this.$.view_option.style.display = "block";
                              this.$.search_option.style.display = "block";
                              this.$.version_option.style.display = "none";
                          }
                          else if(this.tabIndex == 1) {
                              this.$.options_header.style.display = "none";
                              this.$.provider_option.style.display = "none";
  //                            this.$.view_option.style.display = "none";
                              this.$.search_option.style.display = "none";
                              this.$.version_option.style.display = "block";
                          }
                      }, 0);

                  },
  

                  _showAll : function() {
                      this.$.datasets_list.showVersion(true);
                      this.$.datasets_list.setDatasets(this.localDatasets);

                  },
  

                  _showLast : function() {
                      this.$.datasets_list.showVersion(false);
                      this.$.datasets_list.setDatasets(this.lastLocalDatasets);

                  },
  

                  _getLocalization : function(text){
                      return ln[text + "_" + ln["localization"]];

                  },
  
                  _toArray: function(obj) {
                      return Object.keys(obj).map(function(key) {
                          return {
                              name: key,
                              value: obj[key]
                          };
                      });
                  },
  

                  _selectDataUrl : function(e){

                      this.async(function () {

                          this.dataUrl = e.detail.dataset.url;

                      }, 0);
                  },
  

                  _fireDataUrl : function(){

                      this.fire('select-dataset-controllet_data-url', {url: this.dataUrl});

                  },
  

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

                  }

              });

          });

      </script>

  </dom-module>