controllets/select-visualization-controllet/select-datalet-inputs.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-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-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">
<dom-module id="select-datalet-inputs">
    <template>
        <style is="custom-style">
            :host {
            --paper-dropdown-menu-icon: {
                 color: #2196F3;
             };
            }
            #inputs_container {
                font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
                font-size: 16px;
                height: 100%;
                width: 258px;
            }
            .inputs{
                position: relative;
            }
            .input_header {
                height: 32px;
                padding-top: 16px;
                text-align: center;
                font-weight: 700;
                background-color: #B6B6B6;
            }
            #expert_container {
                display: none;
            }
            #expert_header {
                height: 32px;
                padding-top: 16px;
                margin-top: 8px;
                text-align: center;
                font-weight: 700;
                color: #00BCD4;
                cursor: pointer;
                display: none;
            }
            .info_button {
                position: absolute;
                top: 18px;
                right: 0px;
            }
            paper-dropdown-menu {
                height: 48px;
                width: 210px;;
                padding-left: 8px;
                padding-bottom: 8px;
                --paper-input-container-focus-color: #2196F3;
            }
            paper-item.iron-selected {
                background-color: #2196F3;
                color: #FFFFFF;
            }
            paper-icon-button {
                color: #2196F3;
                --paper-icon-button-ink-color: #2196F3;
                margin: 0px;
            }
        </style>
        <paper-material id="inputs_container" elevation="5">
            <div class="input_header"><span id="inputs"></span></div>
            <template is="dom-repeat" items="{{inputs}}" index-as="ddl_index">
                <div class="inputs">
                    <paper-dropdown-menu id={{ddl_index}} label={{_getLabelName(item.name)}}>
                        <paper-menu class="dropdown-content">
                            <template is="dom-repeat" items={{fields}}>
                                <paper-item id={{index}} on-tap="_addInput">{{_fieldName(item)}}</paper-item>
                            </template>
                        </paper-menu>
                    </paper-dropdown-menu>
                    <div class="info_button">
                        <paper-icon-button id="{{ddl_index}}" on-click="_setOrders" icon="unfold-more" title=""></paper-icon-button>
                    </div>
                </div>
            </template>
            <div id="expert_header" on-click="_showExpertMode"><span id="groupBy"></span></div>
            <div id="expert_container">
                <div class="inputs">
                    <paper-dropdown-menu id="group_by" disabled>
                        <paper-menu class="dropdown-content">
                            <template is="dom-repeat" items={{groupableFields}}>
                                <paper-item id={{index}} on-tap="_setAggregatorsFields">{{_fieldName(item)}}</paper-item>
                            </template>
                        </paper-menu>
                    </paper-dropdown-menu>
                </div>
                <template is="dom-repeat" items="{{aggregateFields}}" as="field">
                    <div class="inputs">
                        <paper-dropdown-menu id="calculate_{{index}}" label="{{_calculateLabel()}}">
                            <paper-menu class="dropdown-content">
                                <template is="dom-repeat" items="{{functions}}">
                                    <paper-item id={{index}} on-tap="_setAggregators">{{_operationName(index)}} : {{_fieldName(field)}}</paper-item>
                                </template>
                            </paper-menu>
                        </paper-dropdown-menu>
                    </div>
                </template>
            </div>
        </paper-material>
    </template>
    <script>
        Polymer({
            is : 'select-datalet-inputs',
            properties : {
                //INPUT
                fields : {type : Array, value : []},
                //OUTPUT
                selectedFields : {type : Array, value : []},
                aggregators : {type : Array, value : []},
                orders : {type : Array, value : []},
                expert : {
                    type  : Boolean,
                    value : false
                },
                functions : {
                    type  : Array,
                    value : ["COUNT", "SUM", "MIN", "MAX", "AVG", "FIRST", "LAST"]
                },
                inputs : {
                    type : Array,
                    value : []
                },
                groupableFields : {
                    type : Array,
                    value : []
                },
                aggregateFields : {
                    type : Array,
                    value : []
                }
            },
            ready : function() {
                $(this.$.inputs_container).perfectScrollbar();
            },
            attached : function() {
                this._translate();
            },
            _preselectInputs : function(fields, aggregators, orders) {
                var ddls = this.$.inputs_container.querySelectorAll("paper-dropdown-menu");
//                this.async(function () {
                for (var i = 0; i < fields.length; i++) {
                    var menu = $(ddls[i]).find("paper-menu")[0];
                        menu.select(i+1);
                }
                    this.selectedFields = this._copy(fields);
//                }, 2);
            },
            getSelectedFields : function () {
                return this.selectedFields.filter(function(field){ return field != "" });
            },
            getAggregators : function () {
                return this.aggregators;
            },
            getOrders : function () {
                return this.orders;
            },
            setFields : function(fields) {
                var temp = this._copy(fields);
                temp.unshift("");
                if (JSON.stringify(this.fields) != JSON.stringify(temp)) {
                    this.fields = this._copy(temp);
                    this.$.expert_header.style.display = "block";
                    this._reset();
                }
            },
            setInputs : function(inputs) {
                var temp =  this._copy(inputs);
                if (inputs.constructor != Array) {//table --> 1 input
                    var name = inputs.name;
                    var description = inputs.description;
                    var selection = inputs.selection;
                    temp = [];
                    for (var i = 1; i < this.fields.length; i++)
                        temp.push({name: name + " " + i, description: description, selection: selection});
                }
                else if (inputs.length > 2 && inputs[2].selection == "*") {//map --> multiple baloon content
                    name = inputs[2].name;
                    description = inputs[2].description;
                    selection = inputs[2].selection;
                    temp = [inputs[0], inputs[1]];
                    temp.push({name: name + " 1", description: description, selection: selection});
                    for (var i = 4; i < this.fields.length; i++)
                        temp.push({name: name + " " +(i-2), description: description, selection: selection});
                }
//                else if (inputs.length > 4 && inputs[4].selection == "+") {//bubble --> multiple bubble content
//                    name = inputs[4].name;
//                    description = inputs[4].description;
//                    selection = inputs[4].selection;
//                    temp = [inputs[0], inputs[1], inputs[2], inputs[3]];
//                    temp.push({name: name + " 1", description: description, selection: selection});
//                    for (var i = 6; i < this.fields.length; i++)
//                        temp.push({name: name + " " + (i-4), description: description, selection: selection});
//                }
                this.inputs = this._copy(temp);
                this.selectedFields = new Array(temp.length);
            },
            fireReady : function() {
                if(this._isReady())
                    this.fire('select_visualization_inputs_ready', {isReady: true});
                else
                    this.fire('select_visualization_inputs_ready', {isReady: false});
            },
            _isReady : function() {
                var fire = true;
                for (var i = 0; i < this.selectedFields.length; i++) {
                    if (!this.selectedFields[i] && this.inputs[i].selection != "+" && this.inputs[i].selection != "*" && this.inputs[i].selection != "?")
                        return false;
                    if(this.inputs[i].selection == "+")
                        fire = false;
                }
                if(!fire) {
                    for (var i = 0; i < this.selectedFields.length; i++) {
                        if (this.selectedFields[i] && this.inputs[i].selection == "+") {
                            fire = true;
                            break;
                        }
                    }
                }
                return fire;
            },
            _reset : function() {
                //this.fields = []; --> setFields
                //this.inputs = []; --> setInputs
                this.selectedFields = [];
                this.aggregators = [];
                //this.orders = []; --> _resetOrders
                this._resetOrders();
                this.expert = true;
                this._showExpertMode();//expert --> false
                this.groupableFields = [];
                this.aggregateFields = [];
                this.async(function () {
                    //reset ddl
                    var ddls = this.$.inputs_container.getElementsByTagName("paper-dropdown-menu");
                    for (var i = 0; i < ddls.length; i++)
                        $(ddls[i]).find("paper-menu")[0].select(-1);
                    this.$.group_by.setAttribute("disabled", "");
                    //reset orders
                    this._resetOrders();
                }, 1);
            },
            _translate : function(){
                this.$.inputs.innerHTML = ln["inputs_" + ln["localization"]];
                this.$.groupBy.innerHTML = ln["expertGroupBy_" + ln["localization"]];
                this.$.group_by.setAttribute("label", ln["groupBy_" + ln["localization"]]);
            },
            _showExpertMode : function() {
                if(!this.expert) {
                    this.$.expert_header.style.color = "#000000";
                    this.$.expert_header.style.background = "#B6B6B6";
                    this.$.expert_container.style.display = "block";
                }
                else {
                    this.$.expert_header.style.color = "#00BCD4";
                    this.$.expert_header.style.background = "#FFFFFF";
                    this.$.expert_container.style.display = "none";
                }
                this.expert = !this.expert;
            },
            _addInput : function(e){
                var selectedFields = this._copy(this.selectedFields);
                var ddl_index = $(e.target).parents("paper-dropdown-menu")[0].id;
                var index = e.target.id;
                selectedFields[ddl_index] = this.fields[index];
                this.selectedFields = this._copy(selectedFields);
                if(!this._isReady()) {
                    this.$.group_by.setAttribute("disabled", "");
                    this.groupableFields = [];
                    this.aggregateFields = [];
                }
                else {
                    this.$.group_by.removeAttribute("disabled");
                    var groupableFields = [];
                    for (var i = 0; i < this.selectedFields.length; i++) {
                        if(this.selectedFields[i])
                            groupableFields.push(this.selectedFields[i]);
                    }
                    this.groupableFields = this._copy(groupableFields);
                    this.aggregateFields = [];
                    this.async(function () {
                        var menu = $(this.$.group_by).find("paper-menu")[0];
                        menu.select(-1);
                    }, 0);
                }
                this._setAggregators();
            },
            _setAggregatorsFields : function(e){
                var index = e.target.id;
                var aggregateFields = [];
                for (var i = 0; i < this.groupableFields.length; i++) {
                    if (i != index && this.groupableFields[i])
                        aggregateFields.push(this.groupableFields[i]);
                }
                this.aggregateFields = this._copy(aggregateFields);
                this.async(function() {
                    var ddls = document.getElementsByTagName("paper-dropdown-menu");
                    for (var i = 0; i < ddls.length; i++){
                        var id = ddls[i].id;
                        if(id.indexOf("calculate") > -1) {
                            $(ddls[i]).find("paper-menu")[0].select(-1);
                            $(ddls[i]).find("paper-menu")[0].select(0);
                        }
                    }
                    this._setAggregators();
                }, 0);
            },
            _setAggregators : function(){
                this.async(function() {
                    this.aggregators = [];
                    this._resetOrders();
                    var gb_menu = $(this.$.group_by).find("paper-menu")[0];
                    var groupByField = this.groupableFields[gb_menu.selected];
                    if(groupByField) {
                        this.aggregators.push({"field": groupByField, "operation": "GROUP BY"});
                        for (var i = 0; i < this.aggregateFields.length; i++){
                            var c_menu = $("#calculate_"+i).find("paper-menu")[0];
                            var operationIndex = c_menu.selectedItem.id;
                            this.aggregators.push({"field": this.aggregateFields[i], "operation": this.functions[operationIndex]})
                        }
                    }
                    this.fireReady();
                }, 1);
            },
            _setOrders : function(e){
                var t = e.target;
                if(t.tagName.indexOf("IRON-ICON") > -1)
                    t = $(e.target).parents("paper-icon-button")[0];
                var icon = t.getAttribute("icon");
                var id = t.getAttribute("id");
                var field = this.selectedFields[id];
                if(icon.indexOf("unfold-more") > -1){
                    t.setAttribute("icon", "expand-less");
                    t.setAttribute("title", ln["sortAscending_" + ln["localization"]]);
                    var orders = this.orders.filter(function (el) { return el.field !== field; });
                    orders.unshift({"field": field, "operation": "ASC"});
                    this.orders = this._copy(orders);
                }
                else if(icon.indexOf("expand-less") > -1){
                    t.setAttribute("icon", "expand-more");
                    t.setAttribute("title", ln["sortDescending_" + ln["localization"]]);
                    var orders = this.orders.filter(function (el) { return el.field !== field; });
                    orders.unshift({"field": field, "operation": "DESC"});
                    this.orders = this._copy(orders);
                }
                else if(icon.indexOf("expand-more") > -1){
                    t.setAttribute("icon", "unfold-more");
                    t.setAttribute("title", ln["unsort_" + ln["localization"]]);
                    var orders = this.orders.filter(function (el) { return el.field !== field; });
                    this.orders = this._copy(orders);
                }
                this.fireReady();
            },
            _resetOrders : function(){
                var icons = this.$.inputs_container.querySelectorAll("paper-icon-button");
                for (var i = 0; i < icons.length; i++){
                    icons[i].setAttribute("icon", "unfold-more");
                    icons[i].setAttribute("title", ln["unsort_" + ln["localization"]]);
                }
                this.orders = [];
            },
            _fieldName : function(field) {
                return field.substring(field.lastIndexOf(",")+1, field.length);
            },
            _getLabelName: function(key) {
                if(key.indexOf("Column") > -1) {
                    return ln["Column" + "_" +ln["localization"]] + key.slice(-2);
                }
                if(key.indexOf("Level") > -1) {
                    return ln["Level" + "_" +ln["localization"]] + key.slice(-2);
                }
                if(key.indexOf("BalloonContent") > -1) {
                    return ln["BalloonContent" + "_" +ln["localization"]] + key.slice(-2);
                }
//                if(key.indexOf("BubbleContent") > -1) {
//                    return ln["BubbleContent" + "_" +ln["localization"]] + key.slice(-2);
//                }
                return ln[key + "_" +ln["localization"]];
            },
            _operationName: function(index) {
                var key = this.functions[index];
                return ln[key + "_" +ln["localization"]];
            },
            _calculateLabel: function() {
                return ln["calculate" + "_" +ln["localization"]];
            },
            _copy : function(o) {
                var out, v, key;
                out = Array.isArray(o) ? new Array(o.length) : {};
                for (key in o) {
                    v = o[key];
                    out[key] = (typeof v === "object") ? this._copy(v) : v;
                }
                return out;
            }
        });
    </script>
</dom-module>