WebCompDev / COMPONENTS

<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-inputs-controllet/select-inputs-controllet.html" />
<link rel="import" href="../datalet-preview-controllet/datalet-preview-controllet.html" />

<script type="text/javascript" src="../../bower_components/jsdatachecker/jsdatachecker.min.js"></script>

<script src="../../../DEEPCLIENT/js/deepClient.js"></script>

<dom-module id="select-visualization-controllet">

    <template>

        <style is="custom-style">
            #select_visualization_container {
                display: flex;
                margin-top: 8px;
            }

            #select_visualization_container * {
                font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
                font-size: 16px;
                line-height: 24px;
            }

            #items_vslider_container {
                position: relative;
                width: 172px;
            }

            #select_inputs_container {
                position: relative;
                width: calc(50% - 12px - 172px - 24px);
                min-width: 258px;
                margin-left: 24px;
            }

            #datalet_preview_container {
                position: relative;
                width: calc(50% - 12px);
                margin-left: 24px;
            }

            /*#datalet_placeholder {*/
                /*width: calc(100% - 32px);*/
                /*height: calc(100% - 48px - 32px);*/
                /*padding: 16px;*/
            /*}*/

            /*.header {*/
                /*height: 24px;*/
                /*padding: 12px;*/
                /*text-align: center;*/
                /*font-weight: 700;*/
                /*background-color: #B6B6B6;*/
            /*}*/

            paper-button {
                position: absolute;
                height: 48px;
                width: 172px;
                padding: 12px;
                background: #00BCD4;
                color: #FFFFFF;
                font-weight: 700;

                /*bottom: 16px;*/
                /*right: 11px;*/
                top: -56px;
                right: 0;
                margin: 0 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_container">
                <items-vslider-controllet id="vslider" datalets-list-url="{{dataletsListUrl}}"></items-vslider-controllet>
            </div>

            <div id="select_inputs_container">
                <select-inputs-controllet id="inputs"></select-inputs-controllet>
            </div>

            <div id="datalet_preview_container">
                <datalet-preview-controllet id="preview" deep-url="{{deepUrl}}" datalets-list-url="{{dataletsListUrl}}"></datalet-preview-controllet>
            </div>

            <paper-button id="add_button" disabled raised on-click="_addDatalet"></paper-button>

            <!--<paper-material id="datalet_preview_container" elevation="5">-->
                <!--<div class="header"><span id="dataletPreview"></span></div>-->

                <!--<div id="datalet_placeholder"></div>-->

            <!--</paper-material>-->

        </div>

    </template>

    <script>

        Polymer({

            is : 'select-visualization-controllet',

            properties : {

                deepUrl : {
                    type : String,
                    value : undefined
                },

                dataletsListUrl : {
                    type : String,
                    value : undefined
                },

                dataUrl : {
                    type  : String,
                    value : undefined
                },

                data : {
                    type  : Object,
                    value : undefined
                },

                selectedFields : {
                    type : Array,
                    value : []
                },

                filters : {
                    type : Array,
                    value : []
                },

                aggregators : {
                    type : Array,
                    value : []
                },

//                orders : {
//                    type : Array,
//                    value : []
//                },

                selectedDatalet : {
                    type  : String,
                    value : undefined
                },

                dataletType : {
                    type : String,
                    value : undefined
                },

                preselectedDatalet : {
                    type  : String,
                    value : undefined
                },

                dataletPreset : {
                    type  : Object,
                    value : []
                }

            },

            listeners: {
                'items-vslider-controllet_selected-datalet': '_selectDatalet',
                'select-inputs_isReady': '_loadDatalet'
            },

            ready : function() {
            },

            attached : function() {
                this._resize();
                var that = this;
                window.addEventListener("resize", function() { that._resize(); });

                this._translate();
            },

            setFilters : function(filters) {
                this.filters = this._copy(filters);
            },

            setAggregators : function(aggregators) {
                this.aggregators = this._copy(aggregators);
            },

//            setOrders : function(orders) {
//                this.orders = this._copy(orders);
//            },

            setSelectedFields : function(selectedFields) {
                this.selectedFields = this._copy(selectedFields);
            },

            setData : function(data) {
                this.data = this._copy(data);

                var converter = new DataTypeConverter();
                var result = converter.inferJsonDataType(data, ["*"]);
                result = converter.cast(result);
                this.$.inputs.setFields(ArrayUtils.toFieldsArray(result.types));
                this.$.vslider.setEnabledDatalets(ArrayUtils.toFieldsArray(result.types));
            },

            init : function() {
                if(this.selectedDatalet !== undefined)
                    this.$.vslider.reset();// fire _selectDatalet undefined
            },

            _translate : function(){
                if(this.preselectedDatalet)
                    this.$.add_button.innerHTML = ln["modifyDatalet_" + ln["localization"]];
                else
                    this.$.add_button.innerHTML = ln["addDatalet_" + ln["localization"]];
            },

            _selectDatalet : function(e){
                this.selectedDatalet = e.detail.datalet;

                this.$.add_button.setAttribute("disabled", "true");
                this.$.preview.eraseDatalet();
                this.$.preview.eraseInfo();

                if(this.selectedDatalet) {
                    this.$.selectedDatalet_request.url = this.deepUrl + e.detail.datalet + "-datalet";
                    this.$.selectedDatalet_request.generateRequest();
                }
                else {
                    this.dataletType = undefined;
                    this.$.inputs._reset();
                }
            },

            _handleSelectedDatalet : function(e){
                this.$.preview.loadInfo(e.detail.response);

                if(this.dataletType != e.detail.response.type) {
                    this.dataletType = e.detail.response.type;
                    this.$.inputs.setInputs(e.detail.response.idm);
                }
                else {
                    this.$.inputs._fire();
                }
            },

            preselect : function() {
                if(this.preselectedDatalet) {
                    this.$.vslider.preselectDatalet(this.preselectedDatalet);
                    this.async(function () {
                        this.$.inputs._preselectInputs(this.dataletPreset);
                        this.preselectedDatalet = undefined;
                    }, 100);
                }
            },

            _loadDatalet : function(e){
                if(!e.detail.isReady) {
                    this.$.preview.eraseDatalet();
                    return;
                }

                this.params = {'data-url' : this.dataUrl};/*???*/

//                this.selectedFields = ["pippi", "baudo"];

                this.params["selectedfields"] = JSON.stringify(this.$.inputs.getSelectedInputs());
                this.params["filters"] = JSON.stringify(this.filters);
                this.params["aggregators"] = JSON.stringify(this.aggregators);
                this.params["orders"] = JSON.stringify(this.$.inputs.getOrders());

                this.params["export_menu"] = "0";

                var params = this.$.inputs.getSelectedOptions();
                for (var key in params) { this.params[key] = params[key]; }

                //use cache
                var selectedFields = this.$.inputs.getSelectedInputs();
                var fields = [];
                for (var i=0; i < selectedFields.length; i++)
                    if (selectedFields[i])
                        fields.push(selectedFields[i].value);

                var converter = new DataTypeConverter();

                var data = alasql_QUERY(this.data, fields, null, null, this.$.inputs.getOrders());
                var result = converter.inferJsonDataType(data, ["*"]);
                result = converter.cast(result);
                data = result.dataset;

                data = alasql_transformData(data, fields, 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_placeholder
                };

//                ComponentService.deep_url = this.deepUrl;
//                ComponentService.getComponent(dataletParams);

                this.$.preview.loadDatalet(dataletParams);

                this.$.add_button.removeAttribute("disabled");
            },

            _addDatalet : function(){
                var staticData = this.params["data"];

                delete this.params["data"];
                delete this.params["export_menu"];

                var data = {
                    dataUrl: this.dataUrl,
                    datalet: this.selectedDatalet+"-datalet",
                    fields: this.selectedFields,
                    params: this.params,
                    staticData: staticData
                }

                this.fire('data-sevc-controllet.dataletCreated', {data : data});
            },

            _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_container").height(h);
                $("#select_inputs_container").height(h);
                $("#datalet_preview_container").height(h);
            }

        });

    </script>

</dom-module>