co-datalets-creator

Renato De Donato
1 parent 4cbf1380
Showing 4 changed files with 435 additions and 6 deletions
controllets/data-sevc-controllet/co-datalets-creator-controllet.html
controllets/data-sevc-controllet/demo/index.html
controllets/select-visualization-controllet/select-visualization-controllet_old.html
locales/controllet_ln.js
@@ -40,7 +40,6 @@
             listeners : {
                 'page-slider-controllet_selected' : '_updateSlider',
-                'dataset-selection-controllet_data-url' : '_allowSecondStep',
                 'select-fields-controllet_selected-fields' : '_allowThirdStep',
                 'filters-controllet_filters': '_allowThirdStep'
             },
@@ -77,7 +76,10 @@
             ready : function(){
                 ln["localization"] = this.localization;
+                this.$.select_data.dataUrl = this.dataUrl;
                 this.$.select_data.init();
+                this.$.select_visualization.dataUrl = this.dataUrl;
+                this.$.select_visualization.init();
             },
             _updateSlider : function(e){
@@ -88,7 +90,7 @@
                         this.$.slider.chevronLeft("invisible");
                         this.$.slider.chevronRight(false);
-                        if(this.$.slider.getPrevSelected() == 2)
+                        if(this.$.slider.getPrevSelected() == 1)
                             this.$.slider.chevronRight(true);
                         break;
                     case 1:
@@ -21,8 +21,8 @@
                           <!--suggested-datasets='[{"resource_name":"SUGGESTED 1","url":"noUrl.csv","metas":"{\"description\":\"noDescriione\"}"},{"resource_name":"SUGGESTED 2","url":"noUrl.csv","metas":"{\"description\":\"noDescriione\"}"},{"resource_name":"SUGGESTED 3","url":"noUrl.csv","metas":"{\"description\":\"noDescriione\"}"}]'-->
     <!--</data-sevc-controllet>-->
-    <co-datalets-creator-controllet data='[{"a":"0", "b":"1"},{"a":"2", "b":"3"}]' deep-url="http://172.16.15.38/DEEalerProvider/DEEP/"
-                                    datalets-list-url="http://172.16.15.38/DEEalerProvider/DEEP/datalets-list"
+    <co-datalets-creator-controllet data='[{"a":"0", "b":"1"},{"a":"2", "b":"3a"},{"a":"2", "b":"3"}]' deep-url="http://172.16.15.38/DEEalerProvider/DEEP/"
+                                    datalets-list-url="http://172.16.15.38/DEEalerProvider/DEEP/datalets-list">
     </co-datalets-creator-controllet>
 </body>
+<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();
+
+                this.params = {'data-url' : this.dataUrl};//??????????????????
+//                this.params = {};
+
+                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]; }
+
+                var data = alasql_complexSelectData(this.data, this.selectedFields, this.filters, inputs.getAggregators(), inputs.getOrders());
+                data = 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"];
+
+                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>
 \ No newline at end of file
@@ -8,7 +8,7 @@ ln[&quot;localization&quot;] = &quot;en&quot;;
 ln["slide1Title_en"] = "SELECT DATASET";
 ln["slide1Subtitle_en"] = "Select a dataset from the list or copy and paste the url of dataset.";
 ln["slide2Title_en"] = "SELECT DATA";
-ln["slide2Subtitle_en"] = "Select the fields from tree-view. The multi-table will show the values related to the selected fields.";
+ln["slide2Subtitle_en"] = "Select the fields on the left. The table will show the values related to the selected fields.";
 ln["slide3Title_en"] = "SELECT VISUALIZATION";
 ln["slide3Subtitle_en"] = "Select a visualization, fill out inputs and labels (optional).";
 ln["back_en"] = "Back";
@@ -135,7 +135,7 @@ ln[&quot;donut_description_en&quot;] = &quot;If &#39;true&#39; Pie will become Donut! :)&quot;;
 ln["slide1Title_it"] = "SELEZIONA IL DATASET";
 ln["slide1Subtitle_it"] = "Seleziona il dataset dalla lista o copia e incolla la url del dataset.";
 ln["slide2Title_it"] = "SELEZIONA I DATI";
-ln["slide2Subtitle_it"] = "Seleziona i campi dalla struttura ad albero. Nella tabella saranno mostrati i valori dei campi selezionati.";
+ln["slide2Subtitle_it"] = "Seleziona i campi sulla sinistra. Nella tabella saranno mostrati i valori dei campi selezionati.";
 ln["slide3Title_it"] = "SELEZIONA LA VISUALIZZAZIONE";
 ln["slide3Subtitle_it"] = "Seleziona una visualizzazione, inserisci dati di input ed etichette (opzionale).";
 ln["back_it"] = "Indietro";