WebCompDev / COMPONENTS

Commit 4b79b3c89913bb9a8ab5950d5dcb15d8869d9b9b

Authored by Renato De Donato
1 parent 21e3e3f2

datalet-selection bug fix

Inline Side-by-side
Showing 4 changed files with 18 additions and 459 deletions
controllets/datalet-selection-controllet/datalet-selection-controllet.html
  View file @4b79b3c
... ... @@ -224,18 +224,18 @@
224 224 <div class="input_header"><span data-l10n-id="baseInfo"></span></div>
225 225  
226 226 <div class="inputs">
227   - <paper-input maxlength="32" label="title" class="base_input" on-blur="_loadDataletBlur"></paper-input>
  227 + <paper-input maxlength="32" label="title" class="base_input"></paper-input>
228 228 </div>
229 229  
230 230 <div class="inputs">
231   - <paper-textarea maxlength="100" label="description" class="base_input" on-blur="_loadDataletBlur"></paper-textarea>
  231 + <paper-textarea maxlength="100" label="description" class="base_input"></paper-textarea>
232 232 </div>
233 233  
234 234 <div class="input_header"><span data-l10n-id="layouts"></span></div>
235 235  
236 236 <template is="dom-repeat" items="{{labels}}" index-as="index">
237 237 <div class="inputs">
238   - <paper-input label={{item.name}} on-blur="_loadDataletBlur"></paper-input>
  238 + <paper-input label={{item.name}}></paper-input>
239 239 <div class="info_button">
240 240 <paper-icon-button id="info_button" on-click="_showInfo" icon="info-outline" title="{{item.name}} info"></paper-icon-button>
241 241 </div>
... ... @@ -348,10 +348,17 @@
348 348 },
349 349  
350 350 listeners: {
351   - 'items-vslider-controllet_selected-datalet': '_selectDatalet'
  351 + 'items-vslider-controllet_selected-datalet': '_selectDatalet',
352 352 // 'tree-view-controllet_selected-fields': '_updateSelectedFields'
  353 + 'change': '_loadDataletBlur'
353 354 },
354 355  
  356 +// aaaaaaaaaa : function() {
  357 +// console.log("AAAAAAAAAAAAAAAAAAAAAAAA");
  358 +// },
  359 +
  360 +// change in highchart e chart a gruppi
  361 +
355 362 ready : function() {//console.log(this.dataletPreset);
356 363 this._resize();
357 364 $(this.$.datalet_selection_inputs).perfectScrollbar();
... ... @@ -503,7 +510,7 @@
503 510  
504 511 },
505 512  
506   - _loadDataletBlur : function(){//da eliminare
  513 + _loadDataletBlur : function(e){//da eliminare
507 514  
508 515 var labels = this.$.datalet_selection_labels.querySelectorAll("paper-textarea");
509 516 for (var i = 0; i < labels.length; i++)
... ... @@ -513,6 +520,8 @@
513 520 for (var i = 0; i < labels.length; i++)
514 521 this.params[labels[i].label] = labels[i].value;
515 522  
  523 +// console.log(e.target);
  524 +
516 525 /*var dataletParams ={
517 526 component : this.selectedDatalet+"-datalet",
518 527 params : this.params,
... ... @@ -524,8 +533,8 @@
524 533 ComponentService.getComponent(dataletParams);*/
525 534  
526 535 // this.async(function(){this.$.add_button.removeAttribute("disabled");}, 1111);
527   -
528   - this.$.datalet_selection_datalet_placeholder.children[1].behavior.setParameters(this.params);
  536 + if(this.$.datalet_selection_datalet_placeholder.children[1])
  537 + this.$.datalet_selection_datalet_placeholder.children[1].behavior.setParameters(this.params);
529 538 },
530 539  
531 540 _loadDatalet : function(selectedFields){
... ...
controllets/datalet-selection-controllet/datalet-selection-controllet_.html deleted
View file @21e3e3f
1   -<!--
2   -@group ROUTETOPA Polymer Core Elements
3   -
4   -The `select-visualization-form-controllet` is a slider container of elements.
5   -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
6   -slider with all components initialized with data and query attributes
7   -
8   -### Code
9   -
10   -Example
11   -
12   -@class select-visualization-form-controllet
13   -
14   --->
15   -<link rel="import" href="../../bower_components/polymer/polymer.html">
16   -<link rel="import" href="../../bower_components/paper-input/paper-input.html">
17   -<link rel="import" href="../../bower_components/paper-button/paper-button.html">
18   -<!--<link rel="import" href="../../bower_components/iron-ajax/iron-request.html">
19   -<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">-->
20   -
21   -<dom-module id="datalet-selection-controllet">
22   - <template>
23   - <link rel="stylesheet" href="../shared_js/bootstrap-3.3.4-dist/css/bootstrap.paper.style.min.css">
24   - <link rel="stylesheet" href="../shared_js/bootstrap-toggle-master/css/bootstrap-toggle.min.css">
25   - <style is="custom-style">
26   - body {
27   - font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
28   - font-size: 14px;
29   - margin: 0;
30   - padding: 24px;
31   - -webkit-tap-highlight-color: rgba(0,0,0,0);
32   - -webkit-touch-callout: none;
33   - }
34   -
35   - paper-input {
36   - width: 80%;
37   - }
38   -
39   - paper-checkbox {
40   - display: block;
41   - margin-bottom: 40px;
42   - }
43   -
44   - </style>
45   -
46   - <!--<iron-ajax
47   - auto
48   - id="data_request"
49   - url={{data_url}}
50   - handle-as="json"
51   - verbose="true"
52   - on-response="this.handleResponseData"
53   - debounce-duration="300">
54   - </iron-ajax>
55   -
56   - <iron-ajax
57   - auto
58   - url="http://service.routetopa.eu/WebComponentsDEV/DEEP/datalets-list"
59   - handle-as="json"
60   - on-response="handleResponseDatalets"
61   - debounce-duration="300">
62   - </iron-ajax>
63   -
64   - <iron-request id="xhr"></iron-request>-->
65   -
66   - <div class="panel panel-default">
67   - <div class="panel-heading">
68   - <h3 class="panel-title">Data source</h3>
69   - </div>
70   - <div class="panel-body">
71   - <section>
72   - <paper-input id="data_url" label="CKAN api data url" floatingLabel value="{{data_url}}"></paper-input>
73   - </section>
74   - </div>
75   - </div>
76   -
77   - <div class="panel panel-default">
78   - <div class="panel-heading">
79   - <h3 class="panel-title">Selection data fileds to visualize</h3>
80   - </div>
81   - <div class="panel-body">
82   - <section>
83   - <div class="horizontal center-justified layout">
84   - <div id="fields_placeholder" class="horizontal-section">
85   - <!-- <template is="dom-repeat" items="{{fields}}">
86   - <paper-checkbox>{{item}}</paper-checkbox>
87   - </template>-->
88   - </div>
89   - </div>
90   - </section>
91   - </div>
92   - </div>
93   -
94   - <div class="panel panel-default">
95   - <div class="panel-heading">
96   - <h3 class="panel-title">Visualization tools selection</h3>
97   - </div>
98   - <div class="panel-body">
99   - <div id="datalets_menu" class="layout"></div>
100   - </div>
101   - </div>
102   -
103   - <section>
104   - <!--<paper-button on-click="goto" raised>Go to visualization</paper-button>-->
105   - <button id="goto" type="button" class="btn btn-primary">Go to visualization</button>
106   - </section>
107   - <content></content>
108   - </template>
109   -
110   - <script src="../shared_js/bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
111   - <script src="../shared_js/bootstrap-toggle-master/js/bootstrap-toggle.min.js"></script>
112   -
113   - <script>
114   -
115   - DataletSelectionControllet = Polymer({
116   - is: 'datalet-selection-controllet',
117   - properties: {
118   - /**
119   - * It represent the data url from CKAN api
120   - *
121   - * @attribute data_url
122   - * @type string
123   - * @default 'null'
124   - */
125   - data_url: {
126   - type: String,
127   - value: "http://demo.ckan.org/api/action/datastore_search?resource_id=8324a4c9-66d6-47bf-a898-94237cc39b9f&limit=50",
128   - observer: '_data_urlChanged'
129   - },
130   - /**
131   - * It stores all tools available in WebComponent server
132   - *
133   - * @attribute tools
134   - * @type array
135   - * @default 'null'
136   - */
137   - tools:{
138   - type: Array,
139   - value: []
140   - },
141   - /**
142   - * It stores all fields related to data retrieved from CKAN api url
143   - *
144   - * @attribute fields
145   - * @type array
146   - * @default 'null'
147   - */
148   - fields:{
149   - type: Array,
150   - value: []
151   - },
152   - fieldsMap: {
153   - type: Map,
154   - value: null
155   - }
156   - },
157   - /**
158   - * data-url member changed watcher. It's called when data_url changes its value
159   - *
160   - * @method data_urlChanged
161   - */
162   - _data_urlChanged: function(newValue, oldValue){
163   - //this.$.xhr.send({url: newValue, body: {}}).then(function (e){this.handleResponseData(e)});
164   - //get the data fields
165   - var comp = this;
166   - $.ajax({
167   - url: newValue,
168   - dataType: "json",
169   - success: function(e){comp.handleResponseData(e)}
170   - });
171   - //get datalets list
172   - $.ajax({
173   - url: "http://service.routetopa.eu/WebComponentsDEV/DEEP/datalets-list",
174   - dataType: "json",
175   - success: function(e){comp.handleResponseDatalets(e)}
176   - });
177   - },
178   - createFieldsContainer: function(id, heading){
179   - var panelDefault = document.createElement('div');
180   - panelDefault.className = 'panel panel-default';
181   - var panelHeading = document. createElement('div');
182   - panelHeading.className = 'panel-heading';
183   - panelHeading.innerHTML = heading;
184   - var panelBody = document. createElement('div');
185   - panelBody.className = 'panel-body';
186   - panelBody.id = id;
187   - var fieldPanel = document.createElement('div');
188   - fieldPanel.className = 'panel-body';
189   -
190   - panelBody.appendChild(fieldPanel);
191   - panelDefault.appendChild(panelHeading);
192   - panelDefault.appendChild(panelBody);
193   -
194   - return panelDefault;
195   -
196   - },
197   - cretePaperCheckbox: function (id, label ) {
198   - 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">'
199   - + '<div id="checkboxContainer" class="style-scope paper-checkbox">'
200   - + '<paper-ripple id="ink" class="circle style-scope paper-checkbox" center="">'
201   - + '<div id="background" class="style-scope paper-ripple"></div>'
202   - + '<div id="waves" class="style-scope paper-ripple"></div>'
203   - + '</paper-ripple>'
204   - + '<div id="checkbox" class="style-scope paper-checkbox">'
205   - + '<div id="checkmark" class="hidden style-scope paper-checkbox"></div>'
206   - + '</div>'
207   - + '</div>'
208   - + '<div id="checkboxLabel" aria-hidden="true" class="style-scope paper-checkbox">' + label + '</div>'
209   - + '</paper-checkbox>';
210   -
211   - return html;
212   - },
213   - createBootstrapCheckbox: function(id, label) {
214   - return '<div class="checkbox checkbox-primary">'
215   - + '<label class="checkbox-inline">'
216   - + '<input type="checkbox" data-label="'+ label +'" id="'+ id +'"/>' + label
217   - + '</label>'
218   - + '</div>';
219   -
220   - },
221   - createBootstrapToggle: function(id, label) {
222   - return '<div class="checkbox">'
223   - + '<label style="padding-left: 3px; text-decoration: double;">'
224   - + '<input type="checkbox" data-label="'+ label +'" id="'+ id +'" data-toggle="toggle" /> ' + label
225   - + '</label>'
226   - + '</div>';
227   -
228   - },
229   - /**
230   - * Callback to parse the data requested when data_url change its value
231   - *
232   - * @method handleResponseData
233   - */
234   - handleResponseData: function(e){
235   - //crete root node and insert it in to shadow dom
236   - var mainPanel = this.createFieldsContainer("root", "Data fields");
237   - this.$.fields_placeholder.appendChild(mainPanel);
238   - this.fieldsMap = new Map;
239   - this.fieldsMap["root"] = mainPanel;
240   - //call recursive analyze function for current json to get all fields user can select
241   - this.analyzeObject("root", null, e);
242   - },
243   - analyzeObject: function(parent, curr_field, object) {
244   - if(curr_field != null){
245   - var parent_list = parent.split('.');
246   - var ele = null;
247   - if(object.constructor == Array || object.constructor == Object){
248   - var panel = this.createFieldsContainer(curr_field, parent_list[parent_list.length - 1]);
249   - this.fieldsMap[curr_field] = panel;
250   - this.fieldsMap[parent_list[parent_list.length - 2]].childNodes[1].appendChild(this.fieldsMap[curr_field]);
251   -
252   - }else{
253   - /*var checkbox = document.createElement('paper-checkbox');
254   - checkbox.innerHTML = "<b>" + curr_field + '</b><br>';
255   - checkbox.id = parent;
256   - this.fieldsMap[parent_list[parent_list.length - 2]].childNodes[1].childNodes[0].appendChild(checkbox);*/
257   - //Polymer.dom.flush();
258   - //this.fieldsMap[parent_list[parent_list.length - 2]].childNodes[1].childNodes[0].innerHTML += this.cretePaperCheckbox(parent, curr_field);
259   - this.fieldsMap[parent_list[parent_list.length - 2]].childNodes[1].childNodes[0].innerHTML += this.createBootstrapToggle(parent, curr_field);
260   -
261   - }
262   - }
263   - if(object.constructor == Array || object.constructor == Object) {
264   - var obj = (object.constructor == Array) ? object[0] : object;
265   - for (var field in obj) {
266   - if (obj[field] != null) {
267   - parent_list = parent.split('.');
268   - this.analyzeObject(parent + '.' + field, field, obj[field]);
269   - }
270   - }
271   - }
272   - },
273   - /**
274   - * Callback to parse the components response object
275   - *
276   - * @method handleResponseComponents
277   - */
278   - handleResponseDatalets: function(e){
279   - this.tools = e;
280   - /*html = '<paper-menu>';
281   - for(i=0;i < e.length;i++){
282   - html += '<paper-item>' + e[i] + '</paper-item>';
283   - }
284   - html += '</paper-menu>';*/
285   - html = '<label for="datalets_selector">Available Datalets list:</label>'
286   - + '<select class="form-control" id="datalets_selector">';
287   - for(i=0;i < e.length;i++){
288   - html += '<option>' + e[i] + '</option>';
289   - }
290   - html += '</select>';
291   - $(this.$.datalets_menu).append(html);
292   - },
293   - /**
294   - * Callback called when "Go to visualization" button is pressed
295   - *
296   - * @method handleResponseComponents
297   - */
298   - goto: function(){
299   - var url = "http://service.routetopa.eu/oxwall/webcomp";
300   - var query = "$result$records[";
301   - var cbs = this.shadowRoot.querySelectorAll("paper-checkbox");
302   - for(i=0;i<cbs.length;i++){
303   - if(cbs[i].checked){
304   - query += cbs[i].id + ",";
305   - }
306   - }
307   - query = query.slice(0,-1);
308   - query += "]";
309   -
310   - var cmp = this.$.toolsmenu.selectedItemLabel;
311   -
312   - url += "/" + cmp + "/" + btoa(this.data_url) + "/" + query + "/0";
313   -
314   - window.location = url;
315   - },
316   - ready: function(){
317   -
318   - /*this.fields = [
319   - {parent:"root", name :"No fields available"}
320   - ];*/
321   -
322   - this.tools = [
323   - 'No tools available'
324   - ];
325   -
326   - //this.$.data_request.addEventListener('response', this.handleResponseData);
327   -
328   - /* var comp = this;
329   - $.ajax({
330   - url: "http://service.routetopa.eu/WebComponentsDEV/DEEP/datalets-list",
331   - dataType: "json",
332   - success: comp.handleResponseDatalets
333   -
334   - });*/
335   - $(this.$.goto).click(this.goto());
336   - }
337   - });
338   - </script>
339   -</dom-module>
340 0 \ No newline at end of file
controllets/datalet-selection-controllet/datalet-selection-controllet_2.html deleted
View file @21e3e3f
1   -<!--
2   -@group ROUTETOPA Polymer Core Elements
3   -
4   -The `select-visualization-form-controllet` is a slider container of elements.
5   -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
6   -slider with all components initialized with data and query attributes
7   -
8   -### Code
9   -
10   -Example
11   -
12   -@class select-visualization-form-controllet
13   -
14   --->
15   -<link rel="import" href="../../bower_components/polymer/polymer.html">
16   -<!--<link rel="import" href="../../bower_components/iron-ajax/iron-request.html">
17   -<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">-->
18   -
19   -<dom-module id="datalet-selection-controllet">
20   - <template>
21   - <!--<link rel="stylesheet" href="../shared_js/bootstrap-3.3.4-dist/css/bootstrap.paper.style.min.css">
22   - <link rel="stylesheet" href="../shared_js/bootstrap-toggle-master/css/bootstrap-toggle.min.css">-->
23   - <style>
24   - body {
25   - font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
26   - font-size: 14px;
27   - margin: 0;
28   - padding: 24px;
29   - -webkit-tap-highlight-color: rgba(0,0,0,0);
30   - -webkit-touch-callout: none;
31   - }
32   -
33   - paper-input {
34   - width: 80%;
35   - }
36   -
37   - paper-checkbox {
38   - display: block;
39   - margin-bottom: 40px;
40   - }
41   -
42   - </style>
43   -
44   - <!--<iron-ajax
45   - auto
46   - id="data_request"
47   - url={{dataUrl}}
48   - handle-as="json"
49   - verbose="true"
50   - on-response="this.handleResponseData"
51   - debounce-duration="300">
52   - </iron-ajax>
53   -
54   - <iron-ajax
55   - auto
56   - url="http://service.routetopa.eu/WebComponentsDEV/DEEP/datalets-list"
57   - handle-as="json"
58   - on-response="handleResponseDatalets"
59   - debounce-duration="300">
60   - </iron-ajax>
61   -
62   - <iron-request id="xhr"></iron-request>-->
63   - </template>
64   -
65   - <script>
66   -
67   - DataletSelectionControllet = Polymer({
68   - is: 'datalet-selection-controllet',
69   - properties: {
70   - /**
71   - * It represent the data url from CKAN api
72   - *
73   - * @attribute dataUrl
74   - * @type string
75   - * @default 'null'
76   - */
77   - dataUrl: {
78   - type: String,
79   - value: "http://demo.ckan.org/api/action/datastore_search?resource_id=8324a4c9-66d6-47bf-a898-94237cc39b9f&limit=50",
80   - observer: '_data_urlChanged'
81   - },
82   - /**
83   - * It stores all tools available in WebComponent server
84   - *
85   - * @attribute tools
86   - * @type array
87   - * @default 'null'
88   - */
89   - tools:{
90   - type: Array,
91   - value: []
92   - },
93   - /**
94   - * It stores all fields related to data retrieved from CKAN api url
95   - *
96   - * @attribute fields
97   - * @type array
98   - * @default 'null'
99   - */
100   - fields:{
101   - type: Array,
102   - value: []
103   - },
104   - fieldsMap: {
105   - type: Map,
106   - value: null
107   - }
108   - }
109   - });
110   - </script>
111   -</dom-module>
112 0 \ No newline at end of file
datalets/base-datalet/base-datalet.html
  View file @4b79b3c
... ... @@ -120,12 +120,12 @@ Example :
120 120  
121 121 title : {
122 122 type : String,
123   - value : undefined
  123 + value : ""
124 124 },
125 125  
126 126 description : {
127 127 type : String,
128   - value : undefined
  128 + value : ""
129 129 }
130 130  
131 131 },
... ...