controllets/select-visualization-controllet/select-visualization-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-button/paper-button.html">
<link rel="import" href="../items-vslider-controllet/items-vslider-controllet.html" />
<link rel="import" href="select-datalet-inputs_series.html" />
<link rel="import" href="select-datalet-inputs.html" />
<link rel="import" href="select-datalet-options.html" />
<script src="../../../DEEPCLIENT/js/deepClient.js"></script>
<dom-module id="select-visualization-controllet">
    <template>
        <style is="custom-style">
            #select_visualization_container {
                display: flex;
                font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
                font-size: 16px;
                margin-top: 8px;
            }
            #items_vslider_controllet {
                position: relative;
                min-width: 172px;
            }
            #datalet_selection_inputs {
                position: relative;
                margin-left: 32px;
                min-width: 258px;
            }
            #datalet_selection_options {
                position: relative;
                margin-left: 32px;
                min-width: 258px;
            }
            #datalet_preview_container {
                position: relative;
                width: 100%;
                margin-left: 32px;
            }
            #datalet_selection_datalet {
                position: relative;
                height: 100vh;
                width: 100%;
            }
            #datalet_selection_datalet_placeholder {
                padding: 16px;
            }
            .input_header {
                height: 32px;
                padding-top: 16px;
                text-align: center;
                font-weight: 700;
                background-color: #B6B6B6;
            }
            paper-button {
                position: absolute;
                bottom: 16px;
                right: 11px;
                height: 48px;
                width: 172px;
                background-color: #00BCD4;
                color: white;
                font-weight: 700;
                padding: 16px;
            }
            paper-button:hover {
                background-color: #00AABF;
                box-shadow: 0px 8px 12px #888;
                -webkit-box-shadow: 0px 8px 12px #888;
                -moz-box-shadow: 0px 8px 12px #888;
            }
            paper-button[disabled] {
                background-color: #B6B6B6;
            }
        </style>
        <iron-ajax id="selectedDatalet_request" on-response="_handleSelectedDatalet"></iron-ajax>
        <div id="select_visualization_container">
            <div id="items_vslider_controllet">
                <items-vslider-controllet id="vslider" datalets-list-url={{dataletsListUrl}} preselected-datalet={{preselectedDatalet}}></items-vslider-controllet>
            </div>
            <div id="datalet_selection_inputs">
                <template is="dom-if" if="{{_checkType(type, 'multiseries')}}">
                    <select-datalet-inputs_series id="inputs_series"></select-datalet-inputs_series>
                </template>
                <template is="dom-if" if="{{_checkType(type, 'default')}}">
                    <select-datalet-inputs id="inputs"></select-datalet-inputs>
                </template>
                <template is="dom-if" if="{{_checkType(type, '')}}">
                    <select-datalet-inputs></select-datalet-inputs>
                </template>
            </div>
            <div id="datalet_selection_options">
                <select-datalet-options id="options"></select-datalet-options>
            </div>
            <div id="datalet_preview_container">
                <paper-material id="datalet_selection_datalet" elevation="5">
                    <div class="input_header"><span id="dataletPreview"></span></div>
                    <div id="datalet_selection_datalet_placeholder"></div>
                </paper-material>
                <paper-button id="add_button" disabled raised on-click="_addDatalet"></paper-button>
            </div>
        </div>
    </template>
    <script>
        Polymer({
            is : 'select-visualization-controllet',
            properties : {
                deepUrl : {
                    type : String,
                    value : undefined
                },
                dataletsListUrl : {
                    type : String,
                    value : undefined
                },
                selectedDatalet : {
                    type  : String,
                    value : undefined
                },
                preselectedDatalet : {
                    type  : String,
                    value : undefined
                },
                type : {
                    type : String,
                    value : ""
                },
                filters : {
                    type : Array,
                    value : []
                },
                fields : {
                    type : Array,
                    value : []
                },
                selectedFields : {
                    type : Array,
                    value : []
                },
                dataletPreset : {
                    type  : Object,
                    value : []
                },
                dataUrl : {
                    type  : String,
                    value : undefined
                },
                params:{
                    type: Object,
                    value: undefined
                },
                data : {
                    type  : Object,
                    value : undefined
                },
            },
            listeners: {
//                'select-fields-controllet_selected-fields': '_updateFields',
//                'filters-controllet_filters': '_updateFilters',
                'items-vslider-controllet_selected-datalet': '_selectDatalet',
                'select_visualization_inputs_ready': '_loadDatalet',
                'select_visualization_options_changed': '_tryLoadDatalet'
            },
            ready : function() {
                this._resize();
                $(this.$.datalet_selection_datalet).perfectScrollbar();
//                this.params = {'data-url' : this.dataUrl};//not here
            },
            attached : function() {
                this._resize();
                var that = this;
                window.addEventListener("resize", function() { that._resize(); });
                this._translate();
            },
            setFilters : function(filters) {
                this.filters = this._copy(filters);
            },
            setFields : function(fields) {
//                if (this.fields.length > 0 && JSON.stringify(this.fields) != JSON.stringify(fields))
//                    this.init();
                this.fields = this._copy(fields);
                var inputs = this._getInputs();
                if (inputs)
                    inputs.setFields(this.fields);
            },
            setData : function(data) {
                this.data = this._copy(data);
            },
            init : function() {
                this.$.vslider._reset();
            },
            show : function() {//show --> preselect
//                if(this.preselectedDatalet)
                if(this.dataletPreset)
                    this._preselectDatalet();
                
//                if (this.$.datalet_selection_datalet_placeholder.innerHTML == "") {
//                    var inputs = this._getInputs();
//                    inputs.fireReady();
//                }
            },
            _translate : function(){
                if(this.preselectedDatalet)
                    this.$.add_button.innerHTML = ln["modifyDatalet_" + ln["localization"]];
                else
                    this.$.add_button.innerHTML = ln["addDatalet_" + ln["localization"]];
                this.$.dataletPreview.innerHTML = ln["dataletPreview_" + ln["localization"]];
            },
            _selectDatalet : function(e){
                this.$.add_button.setAttribute("disabled", "true");
                this.selectedDatalet = e.detail.datalet;
                this.$.datalet_selection_datalet_placeholder.innerHTML = "";
                if(!this.selectedDatalet){
                    this.type = "";
                    this.$.options.setOptions([]);
                }
                else{
                    this.$.selectedDatalet_request.url = this.deepUrl + e.detail.datalet + "-datalet";
                    this.$.selectedDatalet_request.generateRequest();
                }
            },
            _handleSelectedDatalet : function(e){
                if(this.type != e.detail.response.type) {
                    this.type = e.detail.response.type;
                    this.async(function () {
                        var inputs = this._getInputs();
                        inputs.setFields(this.fields);
                        inputs.setInputs(e.detail.response.idm.inputs.input);// Cannot read property '0' of undefined
                    }, 0);
                    this.$.options.setOptions(e.detail.response.idm.inputs.layouts.input);
                }
                else {
                    this.$.options.checkOptions(e.detail.response.idm.inputs.layouts.input);
                }
                this.async(function () {
                    var inputs = this._getInputs();
                    inputs.fireReady();
                }, 0);
//                this.async(function () {
//                    if(this.preselectedDatalet)
//                        this._preselectDatalet();
//                }, 1);
            },
            _preselectDatalet : function() {
                this.$.vslider._preselectDatalet();
                this.async(function () {
                    this.$.options._preselectOptions(this.dataletPreset);
                }, 100);
                this.async(function () {
                    var inputs = this._getInputs();
                    inputs._preselectInputs(this.fields, this.dataletPreset["aggregators"], this.dataletPreset["orders"]);
                    this.dataletPreset = undefined;
                }, 200);
            },
            _tryLoadDatalet : function(){
                var inputs = this._getInputs();
                inputs.fireReady();
            },
            _loadDatalet : function(e){
                if(!e.detail.isReady) {
                    this.$.datalet_selection_datalet_placeholder.innerHTML = "";
                    return;
                }
                var inputs = this._getInputs();
                this.selectedFields = inputs.getSelectedFields();
//                console.log(inputs.getFields());
                this.params = {'data-url' : this.dataUrl};//??????????????????
//                this.params = {};
                this.params["selectedFields"] = JSON.stringify(inputs.getFields());
                this.params["filters"] = JSON.stringify(this.filters);
                this.params["aggregators"] = JSON.stringify(inputs.getAggregators());
                this.params["orders"] = JSON.stringify(inputs.getOrders());
                this.params["export_menu"] = "0";
                var params = this.$.options.getParams();
                for (var key in params) { this.params[key] = params[key]; }
                //use cache
                var data = alasql_QUERY(this.data, this.selectedFields, null, inputs.getAggregators(), inputs.getOrders());
                var converter = new DataTypeConverter();
                var result = converter.inferJsonDataType(data, ["*"]);
                result = converter.cast(result);
                data = result.dataset;
                data = alasql_transformData(data, this.selectedFields, true);
                this.params["data"] = JSON.stringify(data).replace(/'/g, "&#39;");
                //
                var dataletParams ={
                    component: this.selectedDatalet+"-datalet",
                    fields: this.selectedFields,
                    params: this.params,
                    placeHolder: this.$.datalet_selection_datalet_placeholder,
                };
                ComponentService.deep_url = this.deepUrl;
                ComponentService.getComponent(dataletParams);
                this.$.add_button.removeAttribute("disabled");
            },
            _addDatalet : function(){
                delete this.params["export_menu"];
                delete this.params["data"];
                var data = {
                    dataUrl: this.dataUrl,
                    datalet: this.selectedDatalet+"-datalet",
                    fields: this.selectedFields,
                    params: this.params,
                    staticData: JSON.stringify(this.$.datalet_selection_datalet_placeholder.children[1].behavior.data)
                }
                this.fire('data-sevc-controllet.dataletCreated', {data : data});
            },
            _checkType: function(type, check){
                if (type == "multiseries" || type == "")
                    return (type == check);
                else if(check == "default")
                    return true;
                return false;
            },
            _getInputs  : function(){
                if(this.type == "multiseries")
                    return this.$$("#inputs_series")
                return this.$$("#inputs");
            },
            _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;
            },
            _resize : function(){
                var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16;
                h = h - 64 - 8; //height with page scroller
                $("#items_vslider_controllet").height(h);//vslider controllet
                $("#datalet_selection_inputs").height(h);
                $("#datalet_selection_options").height(h);
                $("#datalet_selection_datalet").height(h);
            }
        });
    </script>
</dom-module>