controllets/dataset-selection-controllet/dataset-selection-controllet.html

<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}}">
                <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"></div>
                        <!--<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 id="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
                },
                isSuggested : {
                    type : Boolean,
                    value : false
                },
                dataUrl : {
                    type  : String,
                    value : undefined,
                    observer : '_fireDataUrl'
                }
            },
            listeners: {
                'datasetexplorer-datalet_data-url': '_selectDataUrl_treeMap',
                'paper-input-search_input-value' : '_filterDatasets'
            },
            ready : function(){
                $(this.$.material_container).perfectScrollbar();
                $(this.$.dialog_info).perfectScrollbar();
            },
            attached : function(){
                this._resize();
                var that = this;
                window.addEventListener("resize", function() { that._resize(); });
                this.filteredDatasets = this.datasets;
                if(this.suggestedDatasets)
                    this.isSuggested = true;
                this._loadTreeMap();
            },
//            _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(){
                var h = $("#material_container").height() - 48;
                var w = $("#material_container").width();
//                if(this.selected != 1 && this.$.div_datasetexplorer.innerHTML == "")
                this.$.div_datasetexplorer.innerHTML = "<datasetexplorer-datalet width=\""+w+"\" height=\""+h+"\" 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, '&nbsp;');
//            },
            _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>