controllets/select-dataset-controllet/select-dataset-controllet.html

<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;*/
                width: calc(50% - 24px);
                padding:0 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-last-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;*/
                width: 50%;
                --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-tab noink on-tap="_setExtendedDatasets"><span id="extended_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 = true;
                },
                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.$.extended_datasets.innerHTML = ln["extendedDatasets_" + 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);
                },
                _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);
                },
                _setLocalDatasets : function() {
                    if(this.$.ddl_version.selectedItem.id == 0)
                        this._showLast();
                    else
                        this._showAll();
                    this._showOptions();
                },
                _setExtendedDatasets : function() {
                    this.$.datasets_list.setDatasets([]);//tutto molto bello, clap, clap, clapù
                    this._showOptions()
                },
                _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";
                        }
                        else if(this.tabIndex == 2) {
                            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";
                        }
                    }, 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>