datalet-selection bug fix

Renato De Donato
1 parent 21e3e3f2
Showing 4 changed files with 18 additions and 459 deletions
controllets/datalet-selection-controllet/datalet-selection-controllet.html
controllets/datalet-selection-controllet/datalet-selection-controllet_.html
controllets/datalet-selection-controllet/datalet-selection-controllet_2.html
datalets/base-datalet/base-datalet.html
@@ -224,18 +224,18 @@
                 <div class="input_header"><span data-l10n-id="baseInfo"></span></div>
                 <div class="inputs">
-                    <paper-input maxlength="32" label="title" class="base_input" on-blur="_loadDataletBlur"></paper-input>
+                    <paper-input maxlength="32" label="title" class="base_input"></paper-input>
                 </div>
                 <div class="inputs">
-                    <paper-textarea maxlength="100" label="description" class="base_input" on-blur="_loadDataletBlur"></paper-textarea>
+                    <paper-textarea maxlength="100" label="description" class="base_input"></paper-textarea>
                 </div>
                 <div class="input_header"><span data-l10n-id="layouts"></span></div>
                 <template is="dom-repeat" items="{{labels}}" index-as="index">
                     <div class="inputs">
-                        <paper-input label={{item.name}} on-blur="_loadDataletBlur"></paper-input>
+                        <paper-input label={{item.name}}></paper-input>
                         <div class="info_button">
                             <paper-icon-button id="info_button" on-click="_showInfo" icon="info-outline" title="{{item.name}} info"></paper-icon-button>
                         </div>
@@ -348,10 +348,17 @@
             },
             listeners: {
-                'items-vslider-controllet_selected-datalet': '_selectDatalet'
+                'items-vslider-controllet_selected-datalet': '_selectDatalet',
 //                'tree-view-controllet_selected-fields': '_updateSelectedFields'
+                'change': '_loadDataletBlur'
             },
+//            aaaaaaaaaa : function() {
+//                console.log("AAAAAAAAAAAAAAAAAAAAAAAA");
+//            },
+
+//            change in highchart e chart a gruppi
+
             ready : function() {//console.log(this.dataletPreset);
                 this._resize();
                 $(this.$.datalet_selection_inputs).perfectScrollbar();
@@ -503,7 +510,7 @@
             },
-            _loadDataletBlur : function(){//da eliminare
+            _loadDataletBlur : function(e){//da eliminare
                 var labels = this.$.datalet_selection_labels.querySelectorAll("paper-textarea");
                 for (var i = 0; i < labels.length; i++)
@@ -513,6 +520,8 @@
                 for (var i = 0; i < labels.length; i++)
                     this.params[labels[i].label] = labels[i].value;
+//                console.log(e.target);
+
                 /*var dataletParams ={
                     component   : this.selectedDatalet+"-datalet",
                     params      : this.params,
@@ -524,8 +533,8 @@
                 ComponentService.getComponent(dataletParams);*/
 //                this.async(function(){this.$.add_button.removeAttribute("disabled");}, 1111);
-
-                this.$.datalet_selection_datalet_placeholder.children[1].behavior.setParameters(this.params);
+                if(this.$.datalet_selection_datalet_placeholder.children[1])
+                    this.$.datalet_selection_datalet_placeholder.children[1].behavior.setParameters(this.params);
             },
             _loadDatalet : function(selectedFields){
-<!--
-@group ROUTETOPA Polymer Core Elements
-
-The `select-visualization-form-controllet` is a slider container of elements.
-Pass to this component an array of components, a data url(CKAN api uri) and a string with one or multiple query in JsonPath format(separated by spaces) and it'll show a
-slider with all components initialized with data and query attributes
-
-### Code
-
-Example
-
-@class select-visualization-form-controllet
-
--->
-<link rel="import" href="../../bower_components/polymer/polymer.html">
-<link rel="import" href="../../bower_components/paper-input/paper-input.html">
-<link rel="import" href="../../bower_components/paper-button/paper-button.html">
-<!--<link rel="import" href="../../bower_components/iron-ajax/iron-request.html">
-<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">-->
-
-<dom-module id="datalet-selection-controllet">
-    <template>
-        <link rel="stylesheet" href="../shared_js/bootstrap-3.3.4-dist/css/bootstrap.paper.style.min.css">
-        <link rel="stylesheet" href="../shared_js/bootstrap-toggle-master/css/bootstrap-toggle.min.css">
-        <style is="custom-style">
-            body {
-                font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
-                font-size: 14px;
-                margin: 0;
-                padding: 24px;
-                -webkit-tap-highlight-color: rgba(0,0,0,0);
-                -webkit-touch-callout: none;
-            }
-
-            paper-input {
-                width: 80%;
-            }
-
-            paper-checkbox {
-                display: block;
-                margin-bottom: 40px;
-            }
-
-        </style>
-
-        <!--<iron-ajax
-                auto
-                id="data_request"
-                url={{data_url}}
-                handle-as="json"
-                verbose="true"
-                on-response="this.handleResponseData"
-                debounce-duration="300">
-        </iron-ajax>
-
-        <iron-ajax
-                auto
-                url="http://service.routetopa.eu/WebComponentsDEV/DEEP/datalets-list"
-                handle-as="json"
-                on-response="handleResponseDatalets"
-                debounce-duration="300">
-        </iron-ajax>
-
-        <iron-request id="xhr"></iron-request>-->
-
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <h3 class="panel-title">Data source</h3>
-            </div>
-            <div class="panel-body">
-                <section>
-                    <paper-input id="data_url" label="CKAN api data url" floatingLabel value="{{data_url}}"></paper-input>
-                </section>
-            </div>
-        </div>
-
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <h3 class="panel-title">Selection data fileds to visualize</h3>
-            </div>
-            <div class="panel-body">
-                <section>
-                    <div class="horizontal center-justified layout">
-                        <div id="fields_placeholder" class="horizontal-section">
-                           <!-- <template is="dom-repeat" items="{{fields}}">
-                                <paper-checkbox>{{item}}</paper-checkbox>
-                            </template>-->
-                        </div>
-                    </div>
-                </section>
-            </div>
-        </div>
-
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <h3 class="panel-title">Visualization tools selection</h3>
-            </div>
-            <div class="panel-body">
-                <div id="datalets_menu" class="layout"></div>
-            </div>
-        </div>
-
-        <section>
-            <!--<paper-button on-click="goto" raised>Go to visualization</paper-button>-->
-            <button id="goto" type="button" class="btn btn-primary">Go to visualization</button>
-        </section>
-        <content></content>
-    </template>
-
-    <script src="../shared_js/bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
-    <script src="../shared_js/bootstrap-toggle-master/js/bootstrap-toggle.min.js"></script>
-
-    <script>
-
-        DataletSelectionControllet = Polymer({
-            is: 'datalet-selection-controllet',
-            properties: {
-                /**
-                 * It represent the data url from CKAN api
-                 *
-                 * @attribute data_url
-                 * @type string
-                 * @default 'null'
-                 */
-                data_url: {
-                    type: String,
-                    value: "http://demo.ckan.org/api/action/datastore_search?resource_id=8324a4c9-66d6-47bf-a898-94237cc39b9f&limit=50",
-                    observer: '_data_urlChanged'
-                },
-                /**
-                 * It stores all tools available in WebComponent server
-                 *
-                 * @attribute tools
-                 * @type array
-                 * @default 'null'
-                 */
-                tools:{
-                   type: Array,
-                   value: []
-                },
-                /**
-                 * It stores all fields related to data retrieved from CKAN api url
-                 *
-                 * @attribute fields
-                 * @type array
-                 * @default 'null'
-                 */
-                fields:{
-                   type: Array,
-                   value: []
-                },
-                fieldsMap: {
-                    type: Map,
-                    value: null
-                }
-            },
-            /**
-             * data-url member changed watcher. It's called when data_url changes its value
-             *
-             * @method data_urlChanged
-             */
-            _data_urlChanged: function(newValue, oldValue){
-                //this.$.xhr.send({url: newValue, body: {}}).then(function (e){this.handleResponseData(e)});
-                //get the data fields
-                var comp = this;
-                $.ajax({
-                    url: newValue,
-                    dataType: "json",
-                    success: function(e){comp.handleResponseData(e)}
-                });
-                //get datalets list
-                $.ajax({
-                    url: "http://service.routetopa.eu/WebComponentsDEV/DEEP/datalets-list",
-                    dataType: "json",
-                    success: function(e){comp.handleResponseDatalets(e)}
-                });
-            },
-            createFieldsContainer: function(id, heading){
-                var panelDefault       = document.createElement('div');
-                panelDefault.className = 'panel panel-default';
-                var panelHeading       = document. createElement('div');
-                panelHeading.className = 'panel-heading';
-                panelHeading.innerHTML = heading;
-                var panelBody          = document. createElement('div');
-                panelBody.className    = 'panel-body';
-                panelBody.id           = id;
-                var fieldPanel         = document.createElement('div');
-                fieldPanel.className   = 'panel-body';
-
-                panelBody.appendChild(fieldPanel);
-                panelDefault.appendChild(panelHeading);
-                panelDefault.appendChild(panelBody);
-
-                return panelDefault;
-
-            },
-            cretePaperCheckbox: function (id, label ) {
-                var html = '<paper-checkbox id="' + id + '" role="checkbox" tabindex="0" toggles="" aria-pressed="false" aria-disabled="false" aria-checked="false" aria-label="' + label + '" class="x-scope paper-checkbox-0">'
-                        +    '<div id="checkboxContainer" class="style-scope paper-checkbox">'
-                        +       '<paper-ripple id="ink" class="circle style-scope paper-checkbox" center="">'
-                        +          '<div id="background" class="style-scope paper-ripple"></div>'
-                        +          '<div id="waves" class="style-scope paper-ripple"></div>'
-                        +       '</paper-ripple>'
-                        +    '<div id="checkbox" class="style-scope paper-checkbox">'
-                        +       '<div id="checkmark" class="hidden style-scope paper-checkbox"></div>'
-                        +       '</div>'
-                        +    '</div>'
-                        +    '<div id="checkboxLabel" aria-hidden="true" class="style-scope paper-checkbox">' + label + '</div>'
-                        +  '</paper-checkbox>';
-
-                return html;
-            },
-            createBootstrapCheckbox: function(id, label) {
-                return '<div class="checkbox checkbox-primary">'
-                        + '<label class="checkbox-inline">'
-                        +    '<input type="checkbox" data-label="'+ label +'" id="'+ id +'"/>' + label
-                        + '</label>'
-                        + '</div>';
-
-            },
-            createBootstrapToggle: function(id, label) {
-                return '<div class="checkbox">'
-                        + '<label style="padding-left: 3px; text-decoration: double;">'
-                        +    '<input type="checkbox" data-label="'+ label +'" id="'+ id +'" data-toggle="toggle" />   ' + label
-                        + '</label>'
-                        + '</div>';
-
-            },
-            /**
-             * Callback to parse the data requested when data_url change its value
-             *
-             * @method handleResponseData
-             */
-            handleResponseData: function(e){
-                //crete root node and insert it in to shadow dom
-                var mainPanel = this.createFieldsContainer("root", "Data fields");
-                this.$.fields_placeholder.appendChild(mainPanel);
-                this.fieldsMap = new Map;
-                this.fieldsMap["root"] = mainPanel;
-                //call recursive analyze function for current json to get all fields user can select
-                this.analyzeObject("root", null, e);
-            },
-            analyzeObject: function(parent, curr_field, object) {
-                if(curr_field != null){
-                    var parent_list = parent.split('.');
-                    var ele = null;
-                    if(object.constructor == Array || object.constructor == Object){
-                        var panel = this.createFieldsContainer(curr_field, parent_list[parent_list.length - 1]);
-                        this.fieldsMap[curr_field] = panel;
-                        this.fieldsMap[parent_list[parent_list.length - 2]].childNodes[1].appendChild(this.fieldsMap[curr_field]);
-
-                    }else{
-                        /*var checkbox = document.createElement('paper-checkbox');
-                        checkbox.innerHTML = "<b>" + curr_field + '</b><br>';
-                        checkbox.id        = parent;
-                        this.fieldsMap[parent_list[parent_list.length - 2]].childNodes[1].childNodes[0].appendChild(checkbox);*/
-                        //Polymer.dom.flush();
-                        //this.fieldsMap[parent_list[parent_list.length - 2]].childNodes[1].childNodes[0].innerHTML += this.cretePaperCheckbox(parent, curr_field);
-                        this.fieldsMap[parent_list[parent_list.length - 2]].childNodes[1].childNodes[0].innerHTML += this.createBootstrapToggle(parent, curr_field);
-
-                    }
-                }
-                if(object.constructor == Array || object.constructor == Object) {
-                    var obj = (object.constructor == Array) ? object[0] : object;
-                    for (var field in obj) {
-                        if (obj[field] != null) {
-                                parent_list = parent.split('.');
-                                this.analyzeObject(parent + '.' + field, field, obj[field]);
-                        }
-                    }
-                }
-            },
-            /**
-             * Callback to parse the components response object
-             *
-             * @method handleResponseComponents
-             */
-            handleResponseDatalets: function(e){
-                this.tools = e;
-                /*html = '<paper-menu>';
-                for(i=0;i < e.length;i++){
-                    html += '<paper-item>' + e[i] + '</paper-item>';
-                }
-                html += '</paper-menu>';*/
-                html = '<label for="datalets_selector">Available Datalets list:</label>'
-                     + '<select class="form-control" id="datalets_selector">';
-                for(i=0;i < e.length;i++){
-                    html += '<option>' + e[i] + '</option>';
-                }
-                html += '</select>';
-                $(this.$.datalets_menu).append(html);
-            },
-            /**
-             * Callback called when "Go to visualization" button is pressed
-             *
-             * @method handleResponseComponents
-             */
-            goto: function(){
-                var url = "http://service.routetopa.eu/oxwall/webcomp";
-                var query = "$result$records[";
-                var cbs = this.shadowRoot.querySelectorAll("paper-checkbox");
-                for(i=0;i<cbs.length;i++){
-                    if(cbs[i].checked){
-                        query += cbs[i].id + ",";
-                    }
-                }
-                query = query.slice(0,-1);
-                query += "]";
-
-                var cmp = this.$.toolsmenu.selectedItemLabel;
-
-                url += "/" + cmp + "/" + btoa(this.data_url) + "/" + query + "/0";
-
-                window.location = url;
-            },
-            ready: function(){
-
-                /*this.fields = [
-                    {parent:"root", name :"No fields available"}
-                ];*/
-
-                this.tools = [
-                    'No tools available'
-                ];
-
-                //this.$.data_request.addEventListener('response', this.handleResponseData);
-
-               /* var comp = this;
-                $.ajax({
-                    url: "http://service.routetopa.eu/WebComponentsDEV/DEEP/datalets-list",
-                    dataType: "json",
-                    success: comp.handleResponseDatalets
-
-                });*/
-                $(this.$.goto).click(this.goto());
-            }
-        });
-    </script>
-</dom-module>
 \ No newline at end of file
-<!--
-@group ROUTETOPA Polymer Core Elements
-
-The `select-visualization-form-controllet` is a slider container of elements.
-Pass to this component an array of components, a data url(CKAN api uri) and a string with one or multiple query in JsonPath format(separated by spaces) and it'll show a
-slider with all components initialized with data and query attributes
-
-### Code
-
-Example
-
-@class select-visualization-form-controllet
-
--->
-<link rel="import" href="../../bower_components/polymer/polymer.html">
-<!--<link rel="import" href="../../bower_components/iron-ajax/iron-request.html">
-<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">-->
-
-<dom-module id="datalet-selection-controllet">
-    <template>
-        <!--<link rel="stylesheet" href="../shared_js/bootstrap-3.3.4-dist/css/bootstrap.paper.style.min.css">
-        <link rel="stylesheet" href="../shared_js/bootstrap-toggle-master/css/bootstrap-toggle.min.css">-->
-        <style>
-            body {
-                font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
-                font-size: 14px;
-                margin: 0;
-                padding: 24px;
-                -webkit-tap-highlight-color: rgba(0,0,0,0);
-                -webkit-touch-callout: none;
-            }
-
-            paper-input {
-                width: 80%;
-            }
-
-            paper-checkbox {
-                display: block;
-                margin-bottom: 40px;
-            }
-
-        </style>
-
-        <!--<iron-ajax
-                auto
-                id="data_request"
-                url={{dataUrl}}
-                handle-as="json"
-                verbose="true"
-                on-response="this.handleResponseData"
-                debounce-duration="300">
-        </iron-ajax>
-
-        <iron-ajax
-                auto
-                url="http://service.routetopa.eu/WebComponentsDEV/DEEP/datalets-list"
-                handle-as="json"
-                on-response="handleResponseDatalets"
-                debounce-duration="300">
-        </iron-ajax>
-
-        <iron-request id="xhr"></iron-request>-->
-    </template>
-
-    <script>
-
-        DataletSelectionControllet = Polymer({
-            is: 'datalet-selection-controllet',
-            properties: {
-                /**
-                 * It represent the data url from CKAN api
-                 *
-                 * @attribute dataUrl
-                 * @type string
-                 * @default 'null'
-                 */
-                dataUrl: {
-                    type: String,
-                    value: "http://demo.ckan.org/api/action/datastore_search?resource_id=8324a4c9-66d6-47bf-a898-94237cc39b9f&limit=50",
-                    observer: '_data_urlChanged'
-                },
-                /**
-                 * It stores all tools available in WebComponent server
-                 *
-                 * @attribute tools
-                 * @type array
-                 * @default 'null'
-                 */
-                tools:{
-                   type: Array,
-                   value: []
-                },
-                /**
-                 * It stores all fields related to data retrieved from CKAN api url
-                 *
-                 * @attribute fields
-                 * @type array
-                 * @default 'null'
-                 */
-                fields:{
-                   type: Array,
-                   value: []
-                },
-                fieldsMap: {
-                    type: Map,
-                    value: null
-                }
-            }
-        });
-    </script>
-</dom-module>
 \ No newline at end of file
@@ -120,12 +120,12 @@ Example :
                 title : {
                     type : String,
-                    value : undefined
+                    value : ""
                 },
                 description : {
                     type : String,
-                    value : undefined
+                    value : ""
                 }
             },