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="../../datalets/datasetexplorer-datalet/datasetexplorer-datalet.html">
<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 {
                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 {
                position: absolute;
                top: 18px;
                left: 45%;
            }
            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;
            }
            #div_selection {
                padding-left: 10%;
                padding-top: 64px;
            }
            #dialog_info {
                border: 2px solid #2196F3;
                background-color: #E0E0E0;
            }
        </style>
        <paper-material id="material_container" elevation="5">
            <paper-tabs selected="{{selected}}">
                <paper-tab noink><span data-l10n-id="listView"></span></paper-tab>
                <paper-tab noink><span data-l10n-id="treeMapView"></span></paper-tab>
                <paper-tab noink disabled><span data-l10n-id="mostPopular"></span></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="_datasets" 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>
                                    </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 id="s_datasets" label="Suggested datasets">
                                    <paper-menu class="dropdown-content">
                                        <template is="dom-repeat" items={{suggestedDatasets}} as="dataset">
                                            <paper-item id={{index}} on-tap="_selectSuggestedDataUrl">{{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>
                        <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>
                </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();
                this._translate();
            },
            _translate : function(){
                document.l10n.formatValue('availableDatasets').then(s => $("#_datasets")[0].setAttribute("label", s));
                document.l10n.formatValue('suggestedDatasets').then(s => $("#s_datasets")[0].setAttribute("label", s));
                document.l10n.formatValue('selectedUrl').then(s => this.$.selected_url.setAttribute("label", s));
            },
            _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();
                //                                                                                                          /oxwall_x.y.z
                this.$.div_datasetexplorer.innerHTML = "<datasetexplorer-datalet width=\""+w+"\" height=\""+h+"\" data-url=\"/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) {
                $("#_datasets")[0]._setSelectedItem(null);
                $("#_datasets")[0].inputValue = "";
                $("#info_dataset")[0].setAttribute("disabled", "true");
                if (this.isSuggested) {
                    $("#s_datasets")[0]._setSelectedItem(null);
                    $("#s_datasets")[0].contentElement.select(-1);
                    $("#info_s_dataset")[0].setAttribute("disabled", "true");
                }
                this.dataUrl = e.detail.url;
                this.selected=0;
            },
            _selectDataUrl : function(e){this._translate();
                if (this.isSuggested) {
                    $("#s_datasets")[0]._setSelectedItem(null);
                    $("#s_datasets")[0].contentElement.select(-1);
                    $("#info_s_dataset")[0].setAttribute("disabled", "true");
                }
                var dataset = this.filteredDatasets[parseInt(e.target.id)]
                this.dataUrl = dataset.url;
                if(dataset.description != ""){
                    $("#info_dataset")[0].removeAttribute("disabled");
                    this.$.dialog_name.innerHTML = dataset.name;
                    this.$.dialog_description.innerHTML = dataset.description;
                }
                else
                    $("#info_dataset")[0].setAttribute("disabled", "true");
            },
            _selectSuggestedDataUrl : function(e){
                $("#_datasets")[0]._setSelectedItem(null);
                $("#_datasets")[0].inputValue = "";
                $("#info_dataset")[0].setAttribute("disabled", "true");
                var dataset = this.suggestedDatasets[parseInt(e.target.id)]
                this.dataUrl = dataset.url;
                if(dataset.description != ""){
                    $("#info_s_dataset")[0].removeAttribute("disabled");
                    this.$.dialog_name.innerHTML = dataset.name;
                    this.$.dialog_description.innerHTML = dataset.description;
                }
                else
                    $("#info_s_dataset")[0].setAttribute("disabled", "true");
            },
            _showInfo : function(e){
                var t = e.target;
                if(t.tagName.indexOf("IRON-ICON") != -1)
                    t = $(e.target).parents("paper-icon-button")[0];
                this.$.dialog_info.open();
                var pos = t.getBoundingClientRect();
                $("#dialog_info").css("top", pos.top - 4);
                $("#dialog_info").css("left", pos.left - 4);
            },
            _fireDataUrl : function(){
                this.fire('dataset-selection-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
                $("#material_container").height(h);
            }
        });
    </script>
</dom-module>