<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/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-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/iron-icons.html"> <link rel="import" href="../../bower_components/iron-icon/iron-icon.html"> <link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html"> <link rel="import" href="../../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html"> <link rel="import" href="../../datalets/datasetexplorer-datalet/datasetexplorer-datalet.html"> <!--<script src="../../datalets/shared_js/d3.js"></script>--> <link rel="import" href="paper-input-search.html"> <dom-module id="dataset-selection-controllet"> <template> <style is="custom-style"> :host { --paper-dropdown-menu-icon: { color: #2196F3; }; } paper-tabs { font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; font-weight: bold; --paper-tabs-selection-bar-color: #2196F3; } paper-tab { transition: all 1.0s; } paper-tab.iron-selected { background-color: #B6B6B6; } paper-tab:hover { color: #2196F3; } paper-tab[disabled] { color: #B6B6B6; } paper-dropdown-menu { /*display: block;*/ width: 45%; margin-bottom: 32px; --paper-input-container-focus-color: #2196F3; } paper-dropdown-menu paper-item { white-space: nowrap; } paper-input-search { width: 45%; margin-bottom: 32px; --paper-input-container-focus-color: #2196F3; } paper-input-search paper-item { white-space: nowrap; } paper-item.iron-selected { background-color: #2196F3; color: #FFFFFF; } .ddl_container { position: relative; } .info_button { /*background-color: red;*/ position: absolute; top: 18px; left: 45%; } /*paper-menu{*/ /*/!*visibility: visible ! important;*!/*/ /*}*/ /*paper-item[focused] {*/ /*background: #FFFFFF;*/ /*}*/ paper-textarea { width: 90%; margin-bottom: 32px; --paper-input-container-focus-color: #2196F3; } paper-icon-button { color: #2196F3; --paper-icon-button-ink-color: #2196F3; } paper-icon-button[disabled] { color: #B6B6B6; } #material_container { margin-top: 8px; /*height: 55vh;*/ } #div_selection { padding-left: 10%; padding-top: 64px; /*padding-bottom: 64px;*/ } #dialog_info { border: 2px solid #2196F3; background-color: #E0E0E0; position: fixed; top: 232px; width: 60%; height: auto; /*overflow: auto;*/ } #div_datasetexplorer { padding-top: 48px; } </style> <paper-material id="material_container" elevation="5"> <paper-tabs selected="{{selected}}" on-tap="_loadTreeMap"> <paper-tab noink>LIST VIEW</paper-tab> <paper-tab noink>TREE MAP VIEW</paper-tab> <paper-tab noink disabled>MOST POPULAR</paper-tab> </paper-tabs> <neon-animated-pages selected="{{selected}}" entry-animation="fade-in-animation" exit-animation="fade-out-animation"> <neon-animatable> <div id="div_selection"> <div class="ddl_container"> <paper-input-search id="input_search" label="Available datasets"> <paper-menu class="dropdown-content"> <template is="dom-repeat" items={{filteredDatasets}} as="dataset"> <paper-item id={{index}} on-tap="_selectDataUrl">{{dataset.name}}</paper-item> <!--<paper-item id={{index}} on-tap="_selectDataUrl">{{_addHTMLSpace(dataset.name)}}</paper-item>--> </template> </paper-menu> </paper-input-search> <div class="info_button"> <paper-icon-button id="info_dataset" disabled on-click="_showInfo" icon="info-outline" title="dataset info"></paper-icon-button> </div> </div> <template is="dom-if" if={{_isSuggested()}}> <div class="ddl_container"> <paper-dropdown-menu label="Suggested datasets"> <paper-menu class="dropdown-content"> <template is="dom-repeat" items={{suggestedDatasets}} as="dataset"> <paper-item id={{index}} on-tap="_selectDataUrl">{{dataset.name}}</paper-item> <!--<paper-item id={{index}} on-tap="_selectDataUrl">{{_addHTMLSpace(dataset.name)}}</paper-item>--> </template> </paper-menu> </paper-dropdown-menu> <div class="info_button"> <paper-icon-button id="info_s_dataset" disabled on-click="_showInfo" icon="info-outline" title="dataset info"></paper-icon-button> </div> </div> </template> <paper-textarea id="selected_url" label="Selected url" value={{dataUrl}}></paper-textarea> <!--aggiustami anche dialog...--> <paper-dialog id="dialog_info"> <h2 id="dialog_name"></h2> <p id="dialog_description"></p> </paper-dialog> </div> </neon-animatable> <neon-animatable> <div id="div_datasetexplorer"> <datasetexplorer-datalet class="datasetexplorer" data-url="/openwall/api/datasetTree" fields='["result,provider_name","result,organization_name","result,package_name","result,resource_name","result,url","result,w"]'></datasetexplorer-datalet> <!--<datasetexplorer-datalet class="datasetexplorer" data-url="/oxwall_x.y.z/openwall/api/datasetTree" fields='["result,provider_name","result,organization_name","result,package_name","result,resource_name","result,url","result,w"]'></datasetexplorer-datalet>--> </div> </neon-animatable> <neon-animatable> <!--popular--> </neon-animatable> </neon-animated-pages> </paper-material> </template> <script> Polymer({ is : 'dataset-selection-controllet', properties : { selected : { type : Number, value : 0 }, datasets : { type : Array, value : undefined }, filteredDatasets : { type : Array, value : [] }, suggestedDatasets : { type : Array, value : undefined }, dataUrl : { type : String, value : undefined, observer : '_fireDataUrl' } }, listeners: { 'datasetexplorer-datalet_data-url': '_selectDataUrl_treeMap', 'paper-input-search_input-value' : '_filterDatasets' }, ready : function(){ $(this.$.dialog_info).perfectScrollbar(); }, attached : function(){ this._resize(); var that = this; window.addEventListener("resize", function() { that._resize(); }); this.filteredDatasets = this.datasets; }, _isSuggested : function(){ if(this.suggestedDatasets) return true; return false; }, _filterDatasets : function(e){ var filter = e.detail.inputValue; var filteredDatasets = []; for (var i in this.datasets){ if(this.datasets[i].name.toLowerCase().indexOf(filter.toLowerCase()) != -1) filteredDatasets.push(this.datasets[i]); } this.filteredDatasets = filteredDatasets; }, _loadTreeMap : function(){ // if(this.selected == 0 && this.$.div_datasetexplorer.innerHTML == "") // this.$.div_datasetexplorer.innerHTML = "<datasetexplorer-datalet class=\"datasetexplorer\" data-url=\"/oxwall_x.y.z/openwall/api/datasetTree\" fields='[\"result,provider_name\",\"result,organization_name\",\"result,package_name\",\"result,resource_name\",\"result,url\",\"result,w\"]'></datasetexplorer-datalet>"; }, _selectDataUrl_treeMap : function(e){ var url = e.detail.url; url = url.split('/'); var index = url.indexOf('resource') if (index != -1) { // ckan var resourceId = url[index + 1]; url = "http://ckan.routetopa.eu/api/action/datastore_search?resource_id=" + resourceId; } else url = "sorry, data provider not supported yet"; this.dataUrl = url; this.selected=0; }, _selectDataUrl : function(e){ var dataset = this.filteredDatasets[parseInt(e.target.id)] // this.$.input_search.value = ""; this.dataUrl = dataset.url; // if(dataset.description != ""){ // this.$.info_button.removeAttribute("disabled"); // this.$.dialog_name.innerHTML = dataset.name; // this.$.dialog_description.innerHTML = dataset.description; // } // else // this.$.info_button.setAttribute("disabled", "true"); }, _showInfo : function(){ this.$.dialog_info.open(); }, _fireDataUrl : function(){ this.fire('dataset-selection-controllet_data-url', {url: this.dataUrl}); }, // _addHTMLSpace : function(name){ // return name.replace(/ /g, ' '); // }, _resize : function(){ var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16; h = h - 64 - 8; //height with page scroller $("#material_container").height(h); } }); </script> </dom-module>