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-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
                }

            },

            listeners: {
                '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};

                if(this.preselectedDatalet)
                    this._preselectDatalet();
            },

            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) {
                this.fields = this._copy(fields);

                var inputs = this._getInputs();
                if(inputs)
                    inputs.setFields(this.fields);
            },

            reset : function() {
                this.$.vslider._reset();
                this.type = "";
                this.$.datalet_selection_datalet_placeholder.innerHTML = "";
            },

            _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();
                }
            },

            _preselectDatalet : function() {
//                console.log("_preselectDatalet to implement");
//                console.log(this.preselectedDatalet);
//                console.log(this.fields);
//                console.log(this.dataletPreset);

                var dataletParams ={
                    component   : this.preselectedDatalet+"-datalet",
                    params      : this.dataletPreset,
                    fields      : this.fields,
                    placeHolder : this.$.datalet_selection_datalet_placeholder
                };

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

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

            _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.ceckOptions(e.detail.response.idm.inputs.layouts.input);
                }

                this.async(function () {
                    var inputs = this._getInputs();
                    inputs.fireReady();
                }, 0);
            },

            _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();

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

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

                var dataletParams ={
                    component   : this.selectedDatalet+"-datalet",
                    params      : this.params,
                    fields      : this.selectedFields,
                    placeHolder : this.$.datalet_selection_datalet_placeholder
                };

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

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

            _addDatalet : function(){
                var data = {
                    dataUrl : this.dataUrl,
                    params :  this.params,
                    fields :  this.selectedFields,
                    datalet : this.selectedDatalet+"-datalet",
                    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>