SGH / COMPONENTS

  <link rel="import" href="../../bower_components/polymer/polymer.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/neon-animation/neon-animation.html">
  <link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">
  <link rel="import" href="../../bower_components/neon-animation/neon-animations.html">
  

  <link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
  <!--<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">-->

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

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

  <link rel="import" href="../../bower_components/iron-icons/iron-icons.html">

  <link rel="import" href="../../bower_components/iron-image/iron-image.html">
  <link rel="import" href="../../bower_components/iron-list/iron-list.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/paper-input/paper-input.html">
  
  <link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
  
  <link rel="import" href="../../bower_components/paper-material/paper-material.html" />
  
  <link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
  <link rel="import" href="../../bower_components/iron-icons/hardware-icons.html">
  <!--<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">-->
  
  <link rel="import" href="../../bower_components/paper-checkbox/paper-checkbox.html">
  
  <link rel="import" href="../../datalets/datasetexplorer-datalet/datasetexplorer-datalet.html">

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

      <template>

          <style>

              :host {
              --paper-dropdown-menu-icon: {
                   color: #000000;
               };
              --paper-dropdown-menu-ripple: {
                   color: #FFFFFF;
               };
              /*--paper-tab-ink: {*/
                   /*color: #FFFFFF;*/

               /*};*/

              }
  
              iron-list {
              --iron-list-items-container: {
                  margin:16px 16px 8px 16px;
               };
              }
  
              paper-textarea {
                  width: 100%;
                  --paper-input-container-focus-color: #2196F3;
              }
  
              paper-input {
                  --paper-input-container-focus-color: #2196F3;
              }
              paper-dropdown-menu {
                  width: 100%;
                  --paper-input-container-focus-color: #2196F3;
              }
  
              paper-item.iron-selected {
                  background-color: #2196F3;
                  color: #FFFFFF;
              }
  
              paper-checkbox {
                  height: 24px;
                  /*margin-top: 8px*/
                  --paper-checkbox-checked-color: #2196F3;
                  --paper-checkbox-checked-ink-color: #FFFFFF;
                  --paper-checkbox-unchecked-color: #000000;
                  --paper-checkbox-unchecked-ink-color: #FFFFFF;
                  --paper-checkbox-label-color: #000000;
              }
  
              paper-icon-button{
                  height: 48px;
                  width: 48px;
                  padding: 0px;
                  --paper-icon-button-ink-color: #FFFFFF;
              }
  
              paper-icon-button:hover{
                  color: #2196F3;
              }
  
              paper-icon-button[disabled]{
                  color: #B6B6B6;
              }
  
              paper-icon-button.clear {
                  width: 24px;
                  height: 24px;
                  padding: 0px 4px;
                  color: #F44336;
                  --paper-icon-button-ink-color: #FFFFFF;
              }
  
              paper-tabs {
                  font-weight: bold;
              }
  
              paper-tab {
                  transition: all 1.0s;
              }
  
              paper-tab.iron-selected {
                  background-color: #2196F3;
                  color: #FFFFFF;
              }
  
              paper-tab:not(.iron-selected):hover {
                  color: #2196F3;
              }
  

              .item {

                  /*@apply(--layout-horizontal);*/
                  display: flex;
                  padding: 11px;
                  border: 1px solid #B6B6B6;

                  cursor: pointer;
                  margin-bottom: 8px;

                  background-color: #E0E0E0;

              }
  

              .pad {

                  @apply(--layout-flex);
                  /*@apply(--layout-vertical);*/

              }

              .primary {

                  font-weight: bold;

              }

  
              .item.expanded .primary {
                  color: #2196F3;

              }

              .longText {

                  display: none;

              }

              .item.expanded .longText {
                  display: block;
              }

              #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 #neon_container {
                  height: calc(100% - 172px);
                  width: calc(100% - 8px);
              }

              #select_dataset_container #list_container {
                  /*height: calc(100% - 244px);*/
                  /*width: calc(100% - 8px);*/
                  height: calc(100% - 48px);
                  width: 100%;
                  border: 4px solid #B6B6B6;
                  border-top: 0px;
                  border-bottom: 0px;
                  position: relative;

              }
  

              #select_dataset_container #treemap_container {
                  /*height: calc(100% - 244px);*/
                  /*width: calc(100% - 8px);*/
                  height: calc(100% - 48px);
                  width: 100%;
                  border: 4px solid #B6B6B6;
                  border-top: 0px;
                  border-bottom: 0px;
                  position: relative;

              }
  

              #select_dataset_container #header {

                  background-color: #B6B6B6;

                  display: flex;
                  padding: 0px 4px;
              }

              #select_dataset_container #footer_list,
              #select_dataset_container #footer_treemap {
                  width: 100%;
                  background-color: #B6B6B6;
                  display: flex;
                  padding: 0px 4px;
              }
  
              #select_dataset_container #url {
                  height: 76px;/*100*/
                  border: 4px solid #B6B6B6;
                  border-top: 0px;
                  padding: 0px 16px;
                  margin-top: -4px;

              }

  
              #header .header_block {
                  width: 20%;
                  height: 40px;
                  padding: 4px 16px 4px 16px;
              }
  
              /*.header_block:nth-child(2), .header_block:nth-child(3), .header_block:nth-child(3), .header_block:nth-child(4){*/
                  /*visibility: hidden;*/
              /*}*/
  
              #header .header_block:nth-child(4) {
                  text-align: center;

              }
  

              .footer_block {
                  width: calc((100% - 0px) / 3);
                  height: 24px;
                  padding: 12px 8px 12px 8px;
                  text-align: center;
              }
  
              .footer_block:nth-child(2) {
                  height: 48px;
                  padding: 0px 8px;
              }
  
              #suggested_div {
                  visibility: hidden;
              }

          </style>
  

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

              <paper-tabs selected="{{selected}}" no-bar>
                  <paper-tab noink on-tap="_refreshList"><span id="listView"></span></paper-tab>
                  <!--<paper-tab noink ><span id="listView"></span></paper-tab>-->
                  <paper-tab noink><span id="treeMapView"></span></paper-tab>
              </paper-tabs>

              <div id="header">
                  <div class="header_block">
                      <paper-dropdown-menu id="ddl_provider" label="" no-label-float>
                          <paper-menu class="dropdown-content" selected="0">
                              <paper-item id="0" on-tap="_filter"></paper-item>
                              <template is="dom-repeat" items={{_toArray(providers)}} as="provider">
                                  <!--<paper-item id={{provider.value.id}} style$="background: {{_getProviderColor(provider.value.id)}};">{{provider.value.title}}</paper-item>-->
                                  <paper-item id={{provider.value.id}} on-tap="_filter">{{provider.value.title}}</paper-item>
                              </template>
                          </paper-menu>
                      </paper-dropdown-menu>
                  </div>
                  <div class="header_block">
                  </div>
                  <div class="header_block">
                  </div>
                  <div class="header_block">
                  </div>
                  <div class="header_block">
                      <paper-input id="datasets_filter" value={{filter}} no-label-float label="">
                          <iron-icon class="search" icon="search" prefix></iron-icon>
                          <paper-icon-button class="clear" suffix on-click="_clearInput" icon="clear" tabindex="0"></paper-icon-button>
                      </paper-input>
                  </div>

              </div>
  

              <neon-animated-pages id="neon_container" selected="{{selected}}" entry-animation="fade-in-animation" exit-animation="fade-out-animation">
  
                  <neon-animatable>
                      <div id="list_container">
                          <iron-list id="list" items="{{shownDatasets}}" selection-enabled><!--multi-selection-->
                              <template>
                                  <div>
                                      <div class$="{{getClassForItem(selected)}}" on-tap="_selectDataUrl" style$="background: {{_getColorForItem(item)}};">
                                      <!--<div class$="{{getClassForItem(selected)}}" on-tap="_selectDataUrl">-->
                                          <span style="display:none;">{{item.url}}</span>
                                          <div class="pad">
                                              <div class="primary">{{item.resource_name}}</div>
                                              <!--<div class="shortText" style="display:none;">{{item.url}}</div>-->
                                              <div class="longText">
                                                  <template is="dom-repeat" items="{{_stringToArray(item.metas)}}" as="mata">
                                                      <b>{{mata.name}}:</b>
                                                      <span inner-h-t-m-l="{{mata.value}}"></span> <br>
                                                  </template>
                                              </div>
                                          </div>
                                          <!--<iron-icon icon$="[[iconForItem(item)]]"></iron-icon>-->
                                          <!--<iron-icon icon="bookmark" style$="color: {{_getColorForItem(item)}};"></iron-icon>-->
                                          <iron-icon icon$="{{_getIconForItem(item)}}" style$="color: {{_getColorForIcon(item)}};"></iron-icon>
                                      </div>

                                  </div>

                              </template>
                          </iron-list>
                      </div>
  
                      <div id="footer_list">
                          <div class="footer_block"><span id="showing"></span> {{shownPrev}} <span id="to"></span> {{shownNext}} <span id="of"></span> {{length}} <span id="datasets"></span></div>
                          <div class="footer_block">
                              <paper-icon-button id="slider_chevron_left" class="chevron-left" on-click="_onPrevClick" icon="chevron-left"></paper-icon-button>
                              <paper-icon-button id="slider_chevron_right" class="chevron-right" on-click="_onNextClick" icon="chevron-right"></paper-icon-button>
                          </div>
                          <div id="suggested_div" class="footer_block">
                              <!--<template is="dom-if" if={{suggestedDatasets}}>-->
                                  <paper-checkbox checked on-change="showSuggested"><span id="suggested_datasets"></span></paper-checkbox>
                              <!--</template>-->

                          </div>

                      </div>
                  </neon-animatable>
  
                  <neon-animatable>
                      <div id="treemap_container"></div>
  
                      <div id="footer_treemap">
                          <div class="footer_block"><span id="showing2"></span> {{tLength}} <span id="datasets2"></span></div>
                          <div class="footer_block"></div>
                          <div class="footer_block"></div>
                      </div>
                  </neon-animatable>

              </neon-animated-pages>
  
              <div id="url">
                  <paper-textarea id="selected_url" label="" value={{dataUrl}} error-message={{errorMessage}}></paper-textarea>

              </div>
  

          </paper-material>

  
      </template>
  
      <script>

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

                      datasets: {
                          type: Object,
                          value: undefined
                      },
                      filteredDatasets : {
                          type : Array,
                          value : undefined
                      },
                      shownDatasets : {
                          type : Array,
                          value : undefined
                      },
                      suggestedDatasets : {
                          type : Array,
                          value : undefined
                      },
  
                      providers : {
                          type : Array,
                          value : undefined
                      },
                      dataUrl : {
                          type  : String,
                          value : undefined,
                          observer : '_fireDataUrl'
                      },
                      filter : {
                          type  : String,
                          value : "",
                          observer : '_filter'
                      },
                      selected : {
                          type  : Number,
                          value : 0
                      },
                      prev : {type  : Number, value : undefined},
                      next : {type  : Number, value : undefined},
                      shownPrev : {type  : Number, value : undefined},
                      shownNext : {type  : Number, value : undefined},
                      length : {type  : Number, value : undefined},
                      tLength : {type  : Number, computed : 'treemapLength(length)'},
                      step : {type  : Number, value : 20},
                      colors : {
                          type : Array,
                          value : ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd","#ccebc5","#ffed6f"]

                      }

                  },

  
                  listeners: {
                      'datasetexplorer-datalet_data-url': '_selectDataUrl_treeMap'
                  },
  

                  ready : function() {
                      $(this.$.list_container).perfectScrollbar();

  
  //                    this.$.selected_url.invalid = true;

                  },
  

                  attached: function() {

                      this._resize();
                      var that = this;
                      window.addEventListener("resize", function() { that._resize(); });
  
                      this.providers = this.datasets["result"]["providers"];
                      this.datasets = this.datasets["result"]["datasets"];
  
                      if(this.suggestedDatasets) {
                          this.tempDatasets = this.datasets;
                          this.datasets = this.suggestedDatasets.concat(this.datasets);
                          this.$.suggested_div.style.visibility = "visible";
                      }
  
                      this.filteredDatasets = this.datasets;
  
                      this.prev = 1;
                      this.next = this.step;
                      this.length = this.filteredDatasets.length;
  
                      this.shownPrev = Math.min(this.prev, this.length);
                      this.shownNext = Math.min(this.next, this.length);
                      this.shownDatasets = this.filteredDatasets.slice(this.prev-1, this.next);
  

                      this.$.list.scrollTarget = this.ownerDocument.documentElement;

  
                      this._translate();
  
                      this._loadTreeMap();
                  },
  
                  _translate : function(){
                      this.$.listView.innerHTML    = ln["listView_" + ln["localization"]];
                      this.$.treeMapView.innerHTML = ln["treeMapView_" + ln["localization"]];
  
                      this.$.ddl_provider.setAttribute("label", ln["provider_" + ln["localization"]]);
                      this.$.datasets_filter.setAttribute("label", ln["search_" + ln["localization"]]);
  
                      this.$.suggested_datasets.innerHTML = ln["suggestedDatasets_" + ln["localization"]];
  
                      this.$.showing.innerHTML = ln["showing_" + ln["localization"]];
                      this.$.showing2.innerHTML = ln["showing_" + ln["localization"]];
                      this.$.to.innerHTML = ln["to_" + ln["localization"]];
                      this.$.of.innerHTML = ln["of_" + ln["localization"]];
                      this.$.datasets.innerHTML = ln["datasets_" + ln["localization"]];
                      this.$.datasets2.innerHTML = ln["datasets_" + ln["localization"]];
  
                      this.$.selected_url.setAttribute("label", ln["selectedUrl_" + ln["localization"]]);
                      this.errorMessage = ln["wrongUrl_" + ln["localization"]];

                  },

  
                  showSuggested : function(e) {
                      if(e.target.checked)
                          this.datasets = this.suggestedDatasets.concat(this.tempDatasets);
                      else
                          this.datasets = this.tempDatasets;
                      this._filter();
                  },
  
                  _loadTreeMap : function(){
                      var h = $("#neon_container").height() - 48;
                      var w = $("#neon_container").width();
  
                      var data = JSON.stringify({result : {providers: this.providers, datasets: this.filteredDatasets}}).replace(/'/g, "");
  
                      if(this.filteredDatasets.length > 0)
                          this.$.treemap_container.innerHTML = "<datasetexplorer-datalet data='"+data+"' width=\""+w+"\" height=\""+h+"\" fields='[\"result,datasets,provider_name\",\"result,datasets,organization_name\",\"result,datasets,package_name\",\"result,datasets,resource_name\",\"result,datasets,url\",\"result,datasets,w\",\"result,datasets,metas\"]'></datasetexplorer-datalet>";
                      else
                          this.$.treemap_container.innerHTML = "";
                  },
  
                  _filter : function() {
                      if(this.filteredDatasets) {
                          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);
                              this.prev = 1;
                              this.next = this.step;
                              if (id) {
                                  //filtered by provider name
                                  this.filteredDatasets = this.datasets.filter(function (el) {
                                      return el.provider_name == "p:" + id;
                                  });
                              }
                              else {
                                  this.filteredDatasets = this.datasets;
                              }
  
                              //filtered by filter
                              var filter = this.filter;
                              this.filteredDatasets = this.filteredDatasets.filter(function (el) {
                                  return el.resource_name.toLowerCase().indexOf(filter.toLowerCase()) > -1;
                              });
  
                              this.length = this.filteredDatasets.length;
  
                              this.shownPrev = Math.min(this.prev, this.length);
                              this.shownNext = Math.min(this.next, this.length);
                              this.shownDatasets = this.filteredDatasets.slice(this.prev - 1, this.next);
  
                              $("#list_container").animate({scrollTop: 0}, 0);
  
                              this._loadTreeMap();
                          }, 0);
                      }
                  },
  
                  _refreshList : function() {
                      this.shownDatasets = this.filteredDatasets.slice(this.prev - 1, this.next);
                  },
  
                  _clearInput : function() {
                      this.$.datasets_filter.value = "";

                  },

  
                  _getIdByProviderName : function(name) {
                      for(var id in this.providers) {
                          if (this.providers[id].title == name)
                              return this.providers[id].id;
                      }
                  },
  
  //                iconForItem: function(item) {
  //                    return item ? (item.integer < 50 ? 'star-border' : 'info-outline') : '';
  //                },
  
                  treemapLength : function(length) {
                      var ddl_provider = $(this.$.ddl_provider).find("paper-menu")[0].selectedItem;
                      var name = ddl_provider.innerHTML.trim();
                      var id = this._getIdByProviderName(name);
  
                      if(this.suggestedDatasets && !id)
                          return Math.max(length - this.suggestedDatasets.length, 0);
                      return length;
                  },
  
                  _getColorForIcon : function(item) {
                      var ddl_provider = $(this.$.ddl_provider).find("paper-menu")[0].selectedItem;
                      var name = ddl_provider.innerHTML.trim();
                      var id = this._getIdByProviderName(name);
                      if (id) {
                          return this.colors[0];
                      }
                      if(!item.provider_name) {
                          return "#00BCD4";
                      }
                      var id = item.provider_name.substring(2, item.provider_name.length);
                      var i = this.getProviderById(id) % this.colors.length;
                      return this.colors[i];
                  },
  
                  _getColorForItem : function(item) {
  //                    var ddl_provider = $(this.$.ddl_provider).find("paper-menu")[0].selectedItem;
  //                    var name = ddl_provider.innerHTML.trim();
  //                    var id = this._getIdByProviderName(name);
  //                    if (id) {
  //                        return this.colors[0];
  //                    }
                      if(!item.provider_name) {
                          return "#FFEB3B";
                      }
  //                    var id = item.provider_name.substring(2, item.provider_name.length);
  //                    var i = this.getProviderById(id) % this.colors.length;
  //                    return this.colors[i];
                  },
  
                  _getIconForItem : function(item) {
                      return item.provider_name ? 'bookmark' : 'star';
                  },
  
  //                _getProviderColor: function(id) {
  //                    var i = this.getProviderById(id) % this.colors.length;
  //                    return this.colors[i];
  //                },
  
                  getClassForItem: function(selected) {

                      return selected ? 'item expanded' : 'item';

                  },
  
                  getProviderById: function(providerId) {
                      var i = 0;
                      for(var id in this.providers){
                          if(this.providers[id].id == providerId)
                              return i;
                          i++;
                      }
                  },
  
                  _onPrevClick : function(){
                      if(this.prev != 1) {
                          this.prev -= this.step;
                          this.next -= this.step;
  
                          this.shownPrev = Math.min(this.prev, this.length);
                          this.shownNext = Math.min(this.next, this.length);
                          this.shownDatasets = this.filteredDatasets.slice(this.prev - 1, this.next);
                      }
                      $("#list_container").animate({ scrollTop: 0}, 0);
                  },
  
                  _onNextClick : function(){
                      if(this.next < this.length) {
                          this.prev += this.step;
                          this.next += this.step;
  
                          this.shownPrev = Math.min(this.prev, this.length);
                          this.shownNext = Math.min(this.next, this.length);
                          this.shownDatasets = this.filteredDatasets.slice(this.prev - 1, this.next);
                      }
                      $("#list_container").animate({ scrollTop: 0}, 0);
                  },
  
                  _stringToArray: function(obj) {
                      obj = JSON.parse(obj);
                      return Object.keys(obj).map(function(key) {
                          return {
                              name: key,
                              value: obj[key]
                          };
                      });
                  },
  
                  _toArray: function(obj) {
                      return Object.keys(obj).map(function(key) {
                          return {
                              name: key,
                              value: obj[key]
                          };
                      });
                  },
  
                  _selectDataUrl : function(){
                      this.async(function () {
                          if(this.$.list.selectedItem) {
                              var url = this.$.list.selectedItem.url;
  
                              // Check if CKAN
                              var strDatasetPos = url.indexOf('/dataset/');
                              var strResourcePos = (strDatasetPos >= 0) ? url.indexOf('/resource/') : -1;
                              if (strDatasetPos >= 0 && strResourcePos > strDatasetPos) {
                                  var urlSegment1 = url.substring(0, strDatasetPos);
                                  var urlResourceEnd = url.indexOf('/', strResourcePos + 10);
                                  var resourceId = url.substring(strResourcePos + 10, urlResourceEnd);
                                  url = urlSegment1 + "/api/action/datastore_search?resource_id=" + resourceId;
                              }
  
                              // Check if OPENDATASOFT
                              var strExploreDatasetPos = url.indexOf('/explore/dataset/');
                              if (strExploreDatasetPos >= 0) {
                                  var urlSegment1 = url.substring(0, strExploreDatasetPos);
                                  var datasetEnd = url.indexOf(strExploreDatasetPos + 17, '/');
                                  var datasetId = url.substring(strExploreDatasetPos + 17, datasetEnd >= 0 ? datasetEnd : url.length);
                                  url = urlSegment1 + '/api/records/1.0/search?dataset=' + datasetId;
                              }
  
                              this.dataUrl = this._addlimitUrl(url);
                          }
                          else {
                              this.dataUrl = "";
                          }
                      }, 0);
                  },
  
                  _selectDataUrl_treeMap : function(e) {
                      this.dataUrl = this._addlimitUrl(e.detail.url);
                  },
  
                  _fireDataUrl : function(){
                      this.fire('dataset-selection-controllet_data-url', {url: this.dataUrl});
                  },
  
                  _addlimitUrl : function(url){
                      //CKAN --> action no limit
                      if((url.indexOf("api/action") > -1) && !(url.indexOf("limit") > -1))
                      {
                          url += "&limit=99999";
                      }
                      //OpenDataSoft --> action no limit
                      if((url.indexOf("api/records") > -1) && !(url.indexOf("rows") > -1)){
                          url += "&rows=10000";
                      }
                      return url;
                  },
  
                  _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>