SGH / COMPONENTS

Commit 9d4a34db1fc7047dcae93d795c73a01d5a3cfd0c

Authored by Luigi Serra
1 parent 486a1c48

selection controllet and card update

Inline Side-by-side
Showing 7 changed files with 266 additions and 1119 deletions
controllets/data-sevc-controllet/data-sevc-controllet.html
  View file @9d4a34d
@@ -52,7 +52,7 @@ @@ -52,7 +52,7 @@
52 52
53 <link rel="import" href="../items-slider-controllet/items-slider-controllet.html"> 53 <link rel="import" href="../items-slider-controllet/items-slider-controllet.html">
54 <link rel="import" href="../draggable-element-controllet/draggable-element-controllet.html"> 54 <link rel="import" href="../draggable-element-controllet/draggable-element-controllet.html">
55 -<link rel="import" href="../treeview-controllet/treeview-controllet.html"> 55 +<link rel="import" href="../tree-view-controllet/tree-view-controllet.html">
56 <link rel="import" href="../text-element-controllet/text-element-controllet.html"> 56 <link rel="import" href="../text-element-controllet/text-element-controllet.html">
57 57
58 <!-- 58 <!--
@@ -80,7 +80,6 @@ Example: @@ -80,7 +80,6 @@ Example:
80 <dom-module id="data-sevc-controllet"> 80 <dom-module id="data-sevc-controllet">
81 <template> 81 <template>
82 <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css"> 82 <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
83 - <link rel="stylesheet" href="static/css/reset.css">  
84 83
85 <style is="custom-style"> 84 <style is="custom-style">
86 85
@@ -381,7 +380,7 @@ Example: @@ -381,7 +380,7 @@ Example:
381 <div class="horizontal layout"> 380 <div class="horizontal layout">
382 381
383 <div id="fields_placeholder" class="area_container flexchild" style="min-width:300px"> 382 <div id="fields_placeholder" class="area_container flexchild" style="min-width:300px">
384 - <treeview-controllet id="fields_treeview"></treeview-controllet> 383 + <tree-view-controllet id="fields_treeview" root-name="data" opened-path="result,records"></tree-view-controllet>
385 </div> 384 </div>
386 385
387 <div id="table_fields_container" class="area_container flex2child"> 386 <div id="table_fields_container" class="area_container flex2child">
@@ -535,7 +534,7 @@ Example: @@ -535,7 +534,7 @@ Example:
535 listeners : { 534 listeners : {
536 'items-slider-controllet_item-selected' : '_dataletSelected', 535 'items-slider-controllet_item-selected' : '_dataletSelected',
537 'draggable-element-controllet_content-dragged' : '_fieldsMapped', 536 'draggable-element-controllet_content-dragged' : '_fieldsMapped',
538 - 'treeview-controllet_fileds-selected' : '_fieldsSelected', 537 + 'tree-view-controllet_selected-fields' : '_fieldsSelected',
539 'text-element-controllet_content-changed' : '_textElementChanged' 538 'text-element-controllet_content-changed' : '_textElementChanged'
540 }, 539 },
541 540
@@ -680,14 +679,14 @@ Example: @@ -680,14 +679,14 @@ Example:
680 * Utility function to inject datalet in a placeholder 679 * Utility function to inject datalet in a placeholder
681 */ 680 */
682 injectDatalet: function(place_holder){ 681 injectDatalet: function(place_holder){
683 - var datalet_params_2 ={ 682 + var datalet_params ={
684 component : this.selectedDatalet, 683 component : this.selectedDatalet,
685 params : this.paramsFields, 684 params : this.paramsFields,
686 fields : this.selectedFields, 685 fields : this.selectedFields,
687 placeHolder : place_holder 686 placeHolder : place_holder
688 }; 687 };
689 ComponentService.deep_url = this.deepUrl; 688 ComponentService.deep_url = this.deepUrl;
690 - ComponentService.getComponent(datalet_params_2); 689 + ComponentService.getComponent(datalet_params);
691 }, 690 },
692 691
693 /** 692 /**
@@ -698,9 +697,9 @@ Example: @@ -698,9 +697,9 @@ Example:
698 * @param {Event} e 697 * @param {Event} e
699 */ 698 */
700 handleResponseData : function(e){ 699 handleResponseData : function(e){
701 -  
702 - this.$.fields_treeview.init(e.detail.response, this.selectedFields);  
703 - 700 + this.$.fields_treeview.setAttribute("json-data", JSON.stringify(e.detail.response));
  701 + this.$.fields_treeview.setAttribute("preselected-fields", JSON.stringify(this.selectedFields));
  702 + this.$.fields_treeview.ready();//chrome
704 }, 703 },
705 704
706 /** 705 /**
@@ -951,7 +950,7 @@ Example: @@ -951,7 +950,7 @@ Example:
951 */ 950 */
952 _fieldsSelected : function(e){ 951 _fieldsSelected : function(e){
953 952
954 - this.selectedFields = e.detail.fields; 953 + this.selectedFields = e.detail.fields;
955 this.$.selectedFields_container.innerHTML = ""; 954 this.$.selectedFields_container.innerHTML = "";
956 for(var i=0;i<e.detail.fields.length;i++) { 955 for(var i=0;i<e.detail.fields.length;i++) {
957 this.$.selectedFields_container.innerHTML += '<draggable-element-controllet identifier="' + e.detail.fields[i] + 956 this.$.selectedFields_container.innerHTML += '<draggable-element-controllet identifier="' + e.detail.fields[i] +
controllets/data-sevc-controllet/data-sevc-controllet__.html deleted
View file @486a1c4
1 -<!--  
2 -@license  
3 - The MIT License (MIT)  
4 -  
5 - Copyright (c) 2015 Dipartimento di Informatica - Universitร  di Salerno - Italy  
6 -  
7 - Permission is hereby granted, free of charge, to any person obtaining a copy  
8 - of this software and associated documentation files (the "Software"), to deal  
9 - in the Software without restriction, including without limitation the rights  
10 - to use, copy, modify, merge, publish, distribute, sublicense, and/or sell  
11 - copies of the Software, and to permit persons to whom the Software is  
12 - furnished to do so, subject to the following conditions:  
13 -  
14 - The above copyright notice and this permission notice shall be included in  
15 - all copies or substantial portions of the Software.  
16 -  
17 - THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR  
18 - IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,  
19 - FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE  
20 - AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER  
21 - LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,  
22 - OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN  
23 - THE SOFTWARE.  
24 --->  
25 -  
26 -<!--  
27 -* Developed by :  
28 -* ROUTE-TO-PA Project - grant No 645860. - www.routetopa.eu  
29 -*  
30 --->  
31 -  
32 -<link rel="import" href="../../bower_components/polymer/polymer.html">  
33 -<link rel="import" href="../../bower_components/paper-styles/color.html">  
34 -  
35 -<link rel="import" href="../../bower_components/neon-animation/neon-animated-pages.html">  
36 -<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">  
37 -<link rel="import" href="../../bower_components/neon-animation/neon-animations.html">  
38 -  
39 -<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">  
40 -<link rel="import" href="../../bower_components/paper-input/paper-input.html">  
41 -<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">  
42 -<link rel="import" href="../../bower_components/paper-button/paper-button.html">  
43 -<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">  
44 -<link rel="import" href="../../bower_components/paper-tabs/paper-tab.html">  
45 -<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">  
46 -<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">  
47 -<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">  
48 -<link rel="import" href="../../bower_components/paper-item/paper-item.html">  
49 -<link rel="import" href="../../bower_components/paper-toast/paper-toast.html">  
50 -<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">  
51 -<link rel="import" href="../../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">  
52 -  
53 -<link rel="import" href="../items-slider-controllet/items-slider-controllet.html">  
54 -<link rel="import" href="../draggable-element-controllet/draggable-element-controllet.html">  
55 -<link rel="import" href="../tree-view-controllet/tree-view-controllet.html">  
56 -<link rel="import" href="../text-element-controllet/text-element-controllet.html">  
57 -  
58 -<!--  
59 -The `data-sevc-controllet` is a controllet to generate visualization from a dataset accessible through api. A json response is required.  
60 -It's composed by three steps. First, user have to select a datasource to access to a dataset. He can copy and paste/drag and drop an url(an api url with json response) or select  
61 -from select contextual menu an available one. Second, the user selects the fields he want to visualize from a treeview by checking on it. A table preview of selected fields will show  
62 -the currently selected values. Third, the users selects a visualization(datalet) from a slider and drags the previous selected fields in to the input data model fields area. A preview  
63 -is available every time a fields is dragged in the input data model fields area.  
64 -  
65 -Example:  
66 -  
67 - <data-sevc-controllet deep-url="http://192.168.36.128/DatalEts-Ecosystem-Provider/DEEP/"  
68 - datalets-list-url="http://192.168.36.128/DatalEts-Ecosystem-Provider/DEEP/datalets-list"  
69 - datasets='{[{name : 'dataset1', url : dataset1Urls}, ... , {name : 'datasetN', url : datasetNUrls}]'>  
70 - </data-sevc-controllet>  
71 -  
72 -  
73 -@element data-sevc-controllet  
74 -@status beta  
75 -@homepage  
76 -@group controllets  
77 --->  
78 -  
79 -  
80 -<dom-module id="data-sevc-controllet">  
81 - <template>  
82 - <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">  
83 - <link rel="stylesheet" href="static/css/reset.css">  
84 -  
85 - <style is="custom-style">  
86 -  
87 - ::content body {  
88 - font-family: 'Roboto', sans-serif;  
89 - }  
90 -  
91 - .flexchild  
92 - {  
93 - @apply(--layout-flex);  
94 - }  
95 -  
96 - .flex2child  
97 - {  
98 - @apply(--layout-flex-2);  
99 - }  
100 -  
101 - .avatar  
102 - {  
103 - display: inline-block;  
104 - height: 2em;  
105 - width: 2em;  
106 - border-radius: 50%;  
107 - background: var(--paper-blue-500);  
108 - color: white;  
109 - line-height: 2em;  
110 - font-size: 1.87em;  
111 - text-align: center;  
112 - }  
113 -  
114 - .title  
115 - {  
116 - position: relative;  
117 - top: 0.60vh;  
118 - margin-left: 20px;  
119 - }  
120 -  
121 - .big  
122 - {  
123 - font-size: 1.37em;  
124 - color: var(--google-grey-500);  
125 - }  
126 -  
127 - .medium  
128 - {  
129 - font-size: 1em;  
130 - padding-bottom: 0.5em;  
131 - color : #000000;  
132 - font-weight: bold;  
133 - }  
134 -  
135 - .small  
136 - {  
137 - font-size: 0.8em;  
138 - padding-top: 10px;  
139 - color: var(--paper-blue-500);  
140 - font-weight: bold;  
141 - }  
142 -  
143 - paper-input  
144 - {  
145 - width: 80%;  
146 - }  
147 -  
148 - paper-dropdown-menu  
149 - {  
150 - text-align: left;  
151 - margin: auto;  
152 - width: 100%;  
153 - }  
154 -  
155 - ::content paper-menu-button  
156 - {  
157 - display: block;  
158 - width: 100%;  
159 - }  
160 -  
161 - #visualization_slider_area  
162 - {  
163 - min-width: 670px;  
164 - min-height: 180px;  
165 - }  
166 -  
167 - #fields_mapping_area  
168 - {  
169 - min-width: 670px;  
170 - min-height: 180px;  
171 - }  
172 -  
173 - #datalet_placeholder  
174 - {  
175 - height: 360px;  
176 - min-height: 360px;  
177 -  
178 - }  
179 -  
180 - .datalet_right_container  
181 - {  
182 - width: 100vh;  
183 - }  
184 -  
185 - .field-mapping-card  
186 - {  
187 - width: 50%;  
188 - float: left;  
189 - }  
190 -  
191 - .toolbar_button  
192 - {  
193 - --iron-icon-height: 32px;  
194 - --iron-icon-width: 32px;  
195 - }  
196 -  
197 - #finish_button  
198 - {  
199 - --iron-icon-height: 32px;  
200 - --iron-icon-width: 32px;  
201 - color: var(--paper-blue-500);  
202 - }  
203 -  
204 - .area_container  
205 - {  
206 - overflow: hidden;  
207 - margin : 0.8em;  
208 - padding : 0.8em;  
209 - border-width: 1em;  
210 - border-radius: 0.125rem;  
211 - box-shadow: 0.125em 0.125em 0.1125em 0.125em rgba(0, 0, 0, 0.25);  
212 - }  
213 -  
214 - #fields_placeholder{  
215 - width: 40%;  
216 - height: 75vh;  
217 - position: relative;  
218 - float: left;  
219 - overflow: auto;  
220 - }  
221 -  
222 - #table_fields_container{  
223 - height: 75vh;  
224 - width: 55%;  
225 - position: relative;  
226 - float: left;  
227 - overflow: auto;  
228 - }  
229 -  
230 - paper-tabs, paper-toolbar  
231 - {  
232 - background-color: var(--paper-blue-500);  
233 - color: #ffffff;  
234 - box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);  
235 - }  
236 -  
237 - paper-toolbar paper-tabs  
238 - {  
239 - box-shadow: none;  
240 - --paper-tabs-selection-bar-color : var(--google-gray-500);  
241 - }  
242 -  
243 - paper-tabs[noink][no-bar] paper-tab.iron-selected  
244 - {  
245 - background-color: var(--google-gray-500);  
246 - }  
247 -  
248 - paper-tabs[align-bottom]  
249 - {  
250 - box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.15);  
251 - }  
252 -  
253 - #idm_fields_main_container{  
254 - position: relative;  
255 - height: 50vh;  
256 - }  
257 -  
258 - #selected_fields_main_container{  
259 - position: relative;  
260 - height: 50vh;  
261 - }  
262 -  
263 - #idm_layout_main_container{  
264 - position: relative;  
265 - height: 25vh;  
266 - }  
267 -  
268 - paper-menu{  
269 - width: 100%;  
270 - }  
271 -  
272 - paper-dialog {  
273 - position: fixed;  
274 - top: 16px;  
275 - width: auto;  
276 - height: auto;  
277 - overflow: auto;  
278 - padding : 30px;  
279 - }  
280 -  
281 - </style>  
282 -  
283 - <iron-ajax  
284 - id="data_request"  
285 - url={{dataUrl}}  
286 - verbose="true"  
287 - on-response="handleResponseData"  
288 - debounce-duration="300">  
289 - </iron-ajax>  
290 -  
291 - <iron-ajax  
292 - id="datales_list_request"  
293 - auto  
294 - url={{dataletsListUrl}}  
295 - handle-as="json"  
296 - on-response="handleResponseDatalets"  
297 - debounce-duration="300">  
298 - </iron-ajax>  
299 -  
300 - <iron-ajax  
301 - id="selected_datalet_request"  
302 - url={{deepUrl}}  
303 - verbose="true"  
304 - on-response="handleSelectedDatalet"  
305 - debounce-duration="300">  
306 - </iron-ajax>  
307 -  
308 - <content>  
309 -  
310 - <neon-animated-pages id="pages" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">  
311 -  
312 - <neon-animatable>  
313 -  
314 - <div class="vertical justified layout">  
315 -  
316 - <div class="horizontal layout">  
317 - <div class="avatar" style="margin-left:15px">1</div>  
318 - <div class="title flex">  
319 - <div id="toolbar_title" class="big">Dataset source</div>  
320 - <div id="toolbar_description" class="small">Copy and paste/drag and drop in the textarea the url of datasource</div>  
321 - </div>  
322 - <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button>  
323 - </div>  
324 -  
325 - <div class="area_container">  
326 - <paper-tabs selected="{{DatasourceTabSelected}}">  
327 - <paper-tab>Select data source</paper-tab>  
328 - <paper-tab>Most popular</paper-tab>  
329 - <paper-tab>Search</paper-tab>  
330 - </paper-tabs>  
331 - <iron-pages selected="{{DatasourceTabSelected}}">  
332 - <div>  
333 - <div class="card-content">  
334 - <paper-dropdown-menu id="datasets-sources" label="Available datasets">  
335 - <paper-menu class="dropdown-content">  
336 - <template is="dom-repeat" items="{{datasets}}" as="dataset" index-as="index">  
337 - <paper-item id="{{index}}" on-tap="_datasourceSelected">{{dataset.name}}</paper-item>  
338 - </template>  
339 - </paper-menu>  
340 - </paper-dropdown-menu>  
341 - <paper-icon-button id="infoButton" on-click="_onInfoClick" icon="info-outline" alt="Information about selected dataset" title="info-button" style="color:#9e9e9e;"></paper-icon-button>  
342 - </div>  
343 -  
344 - <div><img src="static/images/or.png" style="position: relative;left: 50%;padding-top:20px"></div>  
345 -  
346 - <div class="card-content">  
347 - <paper-textarea id="data_url" label="Dataset api data url" floatingLabel value="{{dataUrl}}" on-dragover="_handleDatasourceDragOver"></paper-textarea>  
348 - </div>  
349 -  
350 -  
351 - </div>  
352 - <div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div>  
353 - <div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div>  
354 - </iron-pages>  
355 - </div>  
356 -  
357 - </div>  
358 -  
359 - </neon-animatable>  
360 -  
361 - <neon-animatable>  
362 -  
363 - <div class="vertical justified layout">  
364 -  
365 - <div class="horizontal layout">  
366 - <paper-icon-button id="PrevButton" class="toolbar_button x-scope" on-click="_onPrevClick" icon="chevron-left" alt="arrow-back" title="arrow-back"></paper-icon-button>  
367 - <div class="avatar">2</div>  
368 - <div class="title flex">  
369 - <div id="toolbar_title" class="big">Dataset source</div>  
370 - <div id="toolbar_description" class="small">Copy and paste/drag and drop in the textarea the url of datasource</div>  
371 - </div>  
372 - <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button>  
373 - </div>  
374 -  
375 - <div class="horizontal layout">  
376 -  
377 - <div id="fields_placeholder" class="area_container flexchild" style="min-width:300px">  
378 - <tree-view-controllet id="fields_treeview" root-name="data" opened-path="data,records"></tree-view-controllet>  
379 - </div>  
380 -  
381 - <div id="table_fields_container" class="area_container flex2child">  
382 - <div id="table_component_place_holder"></div>  
383 - </div>  
384 -  
385 - </div>  
386 -  
387 - </div>  
388 -  
389 - </neon-animatable>  
390 -  
391 - <neon-animatable style="height:100vh">  
392 -  
393 - <div class="vertical justified layout">  
394 -  
395 - <div class="horizontal layout">  
396 - <paper-icon-button id="PrevButton" class="toolbar_button x-scope" on-click="_onPrevClick" icon="chevron-left" alt="arrow-back" title="arrow-back"></paper-icon-button>  
397 - <div class="avatar">3</div>  
398 - <div class="title flex">  
399 - <div id="toolbar_title" class="big">Data mapping</div>  
400 - <div id="toolbar_description" class="small">Select the visualization from the slider, drag and drop the selected fields in visualization parameter area, customize the visualization if you need</div>  
401 - </div>  
402 - <paper-icon-button id="finish_button" on-click="_onFinish" icon="add-circle" alt="Conforms the creation" title="finish"></paper-icon-button>  
403 - </div>  
404 -  
405 -  
406 - <div class="horizontal layout">  
407 -  
408 - <div class="">  
409 - <div id="visualization_slider_area" class="area_container"></div>  
410 - <div id="fields_mapping_area" class="area_container">  
411 -  
412 - <div id="selected_fields_main_container" class="field-mapping-card">  
413 - <div class="title">  
414 - <div class="medium">Selected fields</div>  
415 - </div>  
416 - <div id="selected_fields_container" class="area_container"></div>  
417 - </div>  
418 -  
419 - <div id="idm_fields_main_container" class="field-mapping-card">  
420 - <div class="title">  
421 - <div class="medium">Datalet fields</div>  
422 - </div>  
423 - <div id="datalet_idm_fields_container" class="area_container"></div>  
424 - </div>  
425 -  
426 - <div id="idm_layout_main_container" class="area_container">  
427 - <div class="title">  
428 - <div class="medium">Layout fields</div>  
429 - </div>  
430 - <div id="idm_layout_container" class="area_container"></div>  
431 - </div>  
432 - </div>  
433 - </div>  
434 -  
435 - <div id="datalet_placeholder" style="min-width: 43%;"></div>  
436 -  
437 -  
438 - </div>  
439 -  
440 - </div>  
441 -  
442 - </neon-animatable>  
443 -  
444 - </neon-animated-pages>  
445 -  
446 - <paper-toast id="message" text=""></paper-toast>  
447 -  
448 - <paper-dialog id="infoDialog">  
449 - <h2 id="infoDialogTitle"></h2>  
450 - <paper-dialog-scrollable id="infoDialogContent">  
451 - </paper-dialog-scrollable>  
452 - </paper-dialog>  
453 -  
454 - </content>  
455 - </template>  
456 -  
457 - <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>  
458 - <script src="../../../DEEPCLIENT/js/deepClient.js"></script>  
459 -  
460 - <script>  
461 -  
462 - Polymer({  
463 -  
464 - is : 'data-sevc-controllet',  
465 -  
466 - /**  
467 - * Received when the user selects a datalet from slider.  
468 - *  
469 - * @event items-slider-controllet_item-selected  
470 - */  
471 -  
472 - /**  
473 - * Received when the user drags a selected fields in to one of the source input data model field  
474 - *  
475 - * @event draggable-element-controllet_content-dragged  
476 - */  
477 -  
478 - /**  
479 - * Received when the user selects one field from treeview controllet  
480 - *  
481 - * @event treeview-controllet-fileds-selected  
482 - */  
483 -  
484 - /**  
485 - * Received when the user drags a selected fields in to one of the source input data model field  
486 - *  
487 - * @event draggable-element-controllet_content-dragged  
488 - */  
489 -  
490 - /**  
491 - * Received when the user change text value of the selected datalet layout inputs  
492 - *  
493 - * @event text-element-controllet_content-changed  
494 - */  
495 -  
496 - /**  
497 - * Fired when the user press to finish button. At this event are attached all information about the visualization currently created  
498 - *  
499 - * @event data-sevc-controllet.dataletCreated  
500 - */  
501 -  
502 - listeners : {  
503 - 'items-slider-controllet_item-selected' : '_dataletSelected',  
504 - 'draggable-element-controllet_content-dragged' : '_fieldsMapped',  
505 - 'treeview-controllet_fileds-selected' : '_fieldsSelected',  
506 - 'text-element-controllet_content-changed' : '_textElementChanged'  
507 - },  
508 -  
509 - properties : {  
510 -  
511 - entryAnimation : {  
512 - type : String,  
513 - value : ""  
514 - },  
515 -  
516 - exitAnimation : {  
517 - type : String,  
518 - value : ""  
519 - },  
520 -  
521 - selected : {  
522 - type : Number,  
523 - value : 0  
524 - },  
525 -  
526 - /**  
527 - * It represents the data url from CKAN api  
528 - *  
529 - * @attribute dataUrl  
530 - * @type string  
531 - * @default 'null'  
532 - */  
533 - dataUrl : {  
534 - type : String,  
535 - value : undefined,  
536 - observer : '_dataUrlChanged'  
537 - },  
538 - /**  
539 - * It represents the DEEP url to get information about the datalets  
540 - *  
541 - * @attribute deepUrl  
542 - * @type string  
543 - * @default 'null'  
544 - */  
545 - deepUrl : {  
546 - type : String,  
547 - value : ""  
548 - },  
549 - /**  
550 - * It's used to store the list of datalets returned from DEEP  
551 - *  
552 - * @attribute datalets_list  
553 - * @type Array  
554 - * @default empty  
555 - */  
556 - datalets_list : {  
557 - type : Array ,  
558 - value : []  
559 - },  
560 - /**  
561 - * It's used to store the selected datalet. It will be set when the controllet get the event of selection by item slider (items-slider-controllet_item-selected)  
562 - *  
563 - * @attribute selected_datalet  
564 - * @type String  
565 - * @default ''  
566 - */  
567 - selected_datalet : {  
568 - type : String,  
569 - value : ""  
570 - },  
571 - /**  
572 - * It's used to store the list of selected fields by user  
573 - *  
574 - * @attribute selected_fields  
575 - * @type Array  
576 - * @default empty  
577 - */  
578 - selected_fields : {  
579 - type : Array,  
580 - value : []  
581 - },  
582 - /**  
583 - * It's used to store the params to give to datalet. This kind of params will not processed by selection step  
584 - *  
585 - * @attribute params_fields  
586 - * @type Object  
587 - * @default empty  
588 - */  
589 - params_fields:{  
590 - type: Object,  
591 - value: {}  
592 - },  
593 - /**  
594 - * It's used to store the tab index in the first pass  
595 - *  
596 - * @attribute DatasourceTabSelected  
597 - * @type Number  
598 - * @default 0  
599 - */  
600 - DatasourceTabSelected : {  
601 - type : Number,  
602 - value : 0  
603 - },  
604 - /**  
605 - * It's used to store the datasets to show in the contexual menu  
606 - *  
607 - * @attribute datasets  
608 - * @type Array  
609 - * @default empty  
610 - */  
611 - datasets :  
612 - {  
613 - type : Array,  
614 - value : []  
615 - }  
616 - },  
617 - /**  
618 - * It is called after the elementย’s template has been stamped and all elements inside the elementย’s local DOM have been configured (with values bound from parents, deserialized attributes, or else default values) and had their ready method called.  
619 - * In this phase the scrollbar will be initialized  
620 - *  
621 - * @method handleResponseData  
622 - *  
623 - * @param {Event} e  
624 - */  
625 -  
626 - ready : function(){  
627 -  
628 - $(this.$.fields_placeholder).perfectScrollbar();  
629 - $(this.$.selected_fields_main_container).perfectScrollbar();  
630 - $(this.$.idm_fields_main_container).perfectScrollbar();  
631 - $(this.$.idm_layout_main_container).perfectScrollbar();  
632 - $(this.$.table_fields_container).perfectScrollbar();  
633 -  
634 - },  
635 -  
636 - /**  
637 - * Callback to parse the data requested when dataUrl change its value  
638 - *  
639 - * @method handleResponseData  
640 - *  
641 - * @param {Event} e  
642 - */  
643 - handleResponseData : function(e){  
644 -  
645 - //this.$.fields_treeview.init(e.detail.response);  
646 -  
647 - //this.$.fields_placeholder.innerHTML = '<tree-view-controllet id="fields_treeview" root-name="Data" opened-path="Data,records" json-data=\'' + JSON.stringify(e.detail.response) + '\'></tree-view-controllet>';  
648 - this.$.fields_treeview.setAttribute("json-data", JSON.stringify(e.detail.response));  
649 - this.$.fields_treeview.init();//chrome  
650 - },  
651 -  
652 - /**  
653 - * Callback to parse the components response object  
654 - *  
655 - * @method handleResponseDatalets  
656 - *  
657 - * @param {Event} e  
658 - */  
659 - handleResponseDatalets : function(e){  
660 - this.datalets_list = new Array();  
661 - for(var i=0;i < e.detail.response.length;i++){  
662 - var datalet_info = { name : e.detail.response[i].name ,  
663 - image : e.detail.response[i].url + e.detail.response[i].name + ".png"  
664 - };  
665 -  
666 - this.datalets_list.push(datalet_info);  
667 - }  
668 -  
669 - this.$.visualization_slider_area.innerHTML = '<items-slider-controllet items=\'' + JSON.stringify(this.datalets_list) + '\'' +  
670 - '\'></items-slider-controllet>';  
671 - },  
672 - /**  
673 - * Callback to dataset selection from list in the phase three. When a datalet is selected this function will build a bundle of box items, based on the datalet input data model,  
674 - * to allow user to drag the fields, from the selected fields box, and create a new visualization.  
675 - *  
676 - * @method handleSelectedDatalet  
677 - *  
678 - * @param {Event} e  
679 - */  
680 - handleSelectedDatalet : function(e){  
681 -  
682 - var response = e.detail.response;  
683 - this.$.datalet_idm_fields_container.innerHTML = "";  
684 - this.$.idm_layout_container.innerHTML = "";  
685 -  
686 - if(response.idm.inputs.input.constructor == Object) {  
687 - var input = response.idm.inputs.input;  
688 - if(input.selection == "*") {  
689 - var input_selected_fields = Polymer.dom(this.$.selected_fields_container).querySelectorAll('draggable-element-controllet');  
690 - for (var j = 0; j < input_selected_fields.length; j++) {  
691 - this.$.datalet_idm_fields_container.innerHTML += '<draggable-element-controllet is-target="true" heading="Field ' + (j + 1) + '" description="' + input.description + '" number="' + (j + 1) + '"></draggable-element-controllet><br>';  
692 - }  
693 - }  
694 - }else{  
695 - for(var i =0; i < response.idm.inputs.input.length; i++){  
696 - var input = response.idm.inputs.input[i];  
697 - this.$.datalet_idm_fields_container.innerHTML += '<draggable-element-controllet is-target="true" id="' + input.name + '" heading="' + input.name + '" description="' + input.description + '" number="' + (i + 1) + '"></draggable-element-controllet><br>';  
698 - }  
699 - }  
700 -  
701 - if(response.idm.inputs.layouts.input.constructor == Object) {  
702 - var input = response.idm.inputs.layouts.input;  
703 - this.$.idm_layout_container.innerHTML += '<text-element-controllet heading="' + input.name + '" description="' + input.description + '" number="1"></text-element-controllet>';  
704 - }else{  
705 - for(var i =0; i < response.idm.inputs.layouts.input.length; i++){  
706 - var input = response.idm.inputs.layouts.input[i];  
707 - this.$.idm_layout_container.innerHTML += '<text-element-controllet heading="' + input.name + '" ' +  
708 - 'description="' + input.description + '" ' +  
709 - 'number="' + (i+1) + '">' +  
710 - '</text-element-controllet>';  
711 - }  
712 -  
713 - }  
714 -  
715 - },  
716 - /**  
717 - * Generate the datalet preview when user mapped fields. it even retrieves the value of layout inputs values.  
718 - *  
719 - * @method generateDataletPreview  
720 - */  
721 - generateDataletPreview : function(){  
722 -  
723 - var input_mapped_fields = Polymer.dom(this.$.datalet_idm_fields_container).querySelectorAll('draggable-element-controllet[is-target=true]');  
724 - this.selected_fields = Array();  
725 -  
726 - for (var i = 0; i < input_mapped_fields.length; i++) {  
727 - if (input_mapped_fields[i].value != "") {  
728 - this.selected_fields.push(input_mapped_fields[i].value);  
729 - }  
730 - }  
731 -  
732 - var input_layouts_fields = Polymer.dom(this.$.idm_layout_container).querySelectorAll('text-element-controllet');  
733 - this.params_fields = {'data-url' : this.dataUrl};  
734 -  
735 - for (var i = 0; i < input_layouts_fields.length; i++) {  
736 - if (input_layouts_fields[i].value != "") {  
737 - this.params_fields[input_layouts_fields[i].heading] = input_layouts_fields[i].value;  
738 - }  
739 - }  
740 -  
741 -  
742 - var datalet_params ={  
743 - component : this.selected_datalet,  
744 - params : this.params_fields,  
745 - fields : this.selected_fields,  
746 - placeHolder : this.$.datalet_placeholder  
747 - };  
748 -  
749 -  
750 - ComponentService.deep_url = this.deepUrl;  
751 - ComponentService.getComponent(datalet_params);  
752 -  
753 - },  
754 - /**  
755 - * Validate the current pass in order to access to next one.  
756 - *  
757 - * @method validateCurrentPass  
758 - *  
759 - * @param {Number} next_selected_pass  
760 - */  
761 - validateCurrentPass : function(next_selected_pass){  
762 -  
763 - switch(next_selected_pass){  
764 - case 0:  
765 - return true;  
766 - case 1:  
767 - if(this.$.data_url.value == ""){  
768 - this.$.message.text = "You have to select a dataset to access to pass 2.";  
769 - this.$.message.show();  
770 - return false;  
771 - }else{  
772 - return true;  
773 - }  
774 -  
775 - case 2:  
776 - if(Polymer.dom(this.$.selected_fields_container).querySelectorAll('draggable-element-controllet') == 0){  
777 - this.$.message.text = "You have to select a set of fields to access to pass 3.";  
778 - this.$.message.show();  
779 - return false;  
780 - }else{  
781 - return true;  
782 - }  
783 - }  
784 -  
785 - },  
786 - /**  
787 - * Callback for manage the previous pass button  
788 - *  
789 - * @method _onPrevClick  
790 - *  
791 - */  
792 - _onPrevClick : function() {  
793 - if(!this.validateCurrentPass(this.selected === 0 ? 0 : (this.selected - 1))) return;  
794 -  
795 - this.entryAnimation = 'slide-from-left-animation';  
796 - this.exitAnimation = 'slide-right-animation';  
797 - this.selected = this.selected === 0 ? 0 : (this.selected - 1);  
798 - },  
799 - /**  
800 - * Callback to manage the next pass button  
801 - *  
802 - * @method _onNextClick  
803 - *  
804 - */  
805 - _onNextClick : function() {  
806 -  
807 - if(!this.validateCurrentPass(this.selected === 2 ? 2 : (this.selected + 1))) return;  
808 -  
809 - this.entryAnimation = 'slide-from-right-animation';  
810 - this.exitAnimation = 'slide-left-animation';  
811 - this.selected = this.selected === 2 ? 2 : (this.selected + 1);  
812 - },  
813 - /**  
814 - * Callback to manage InfoButton click to give user information about the selected dataset  
815 - *  
816 - */  
817 - _onInfoClick : function(){  
818 -  
819 - this.$.infoDialog.open();  
820 -  
821 - },  
822 - /**  
823 - * Callback related to datasource selection from select menu  
824 - *  
825 - * @method _datasourceSelected  
826 - *  
827 - * @param {Event} e  
828 - */  
829 - _datasourceSelected : function(e){  
830 -  
831 - this.$.data_url.value = this.datasets[parseInt(e.target.id)].url;  
832 - this.$.infoDialogTitle.innerHTML = this.datasets[parseInt(e.target.id)].name;  
833 - this.$.infoDialogContent.innerHTML = this.datasets[parseInt(e.target.id)].description;  
834 -  
835 - },  
836 - /**  
837 - * Callback related to data url change  
838 - *  
839 - * @method _dataUrlChanged  
840 - *  
841 - * @param {Event} e  
842 - */  
843 - _dataUrlChanged : function(newValue, oldValue){  
844 - this.$.data_request.generateRequest();  
845 - },  
846 - /**  
847 - * Callback related to event 'items-slider-controllet_item-selected' fired by items-slider-controllet when the user selects a datalet  
848 - *  
849 - * @method _dataletSelected  
850 - *  
851 - * @param {Event} e  
852 - */  
853 - _dataletSelected : function(e){  
854 - this.selected_datalet = e.detail.datalet;  
855 - this.$.selected_datalet_request.url = this.deepUrl + e.detail.datalet;  
856 - this.$.selected_datalet_request.generateRequest();  
857 -  
858 - },  
859 - /**  
860 - * Callback related to event 'treeview-controllet-fileds-selected' fired by treeview-controllet when the user selects a field  
861 - *  
862 - * @method _fieldsSelected  
863 - *  
864 - * @param {Event} e  
865 - */  
866 - _fieldsSelected : function(e){  
867 -  
868 - this.$.selected_fields_container.innerHTML = "";  
869 - for(var i=0;i<e.detail.fields.length;i++) {  
870 - this.$.selected_fields_container.innerHTML += '<draggable-element-controllet identifier="' + e.detail.fields[i] +  
871 - '" label="' + e.detail.fields[i].split(",")[e.detail.fields[i].split(",").length -1] +  
872 - '"></draggable-element-controllet><br>';  
873 - }  
874 -  
875 - var place_holder = (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) ? this.$.table_component_place_holder : this.$.table_component_place_holder[Object.keys(this.$.table_component_place_holder)[0]];  
876 -  
877 - var table_params ={  
878 - component : "datatable-datalet",  
879 - params :{  
880 - 'data-url' : this.dataUrl  
881 - },  
882 - fields : e.detail.fields,  
883 - placeHolder : this.$.table_component_place_holder  
884 - };  
885 -  
886 - ComponentService.deep_url = this.deepUrl;  
887 - ComponentService.getComponent(table_params);  
888 -  
889 - },  
890 - /**  
891 - * Callback related to event 'draggable-element-controllet_content-dragged' fired by draggable-element-controllet when the user drags a selected field in to input data model field  
892 - *  
893 - * @method _fieldsMapped  
894 - *  
895 - * @param {Event} e  
896 - */  
897 - _fieldsMapped : function(e){  
898 -  
899 - this.generateDataletPreview();  
900 -  
901 - },  
902 - /**  
903 - * Callback related to event 'text-element-controllet_content-changed' fired by text-element-controllet when the user change the value of text  
904 - *  
905 - * @method _textElementChanged  
906 - *  
907 - * @param {Event} e  
908 - */  
909 - _textElementChanged : function(e){  
910 - this.generateDataletPreview();  
911 - },  
912 - /**  
913 - * Callback related to the drag operation in the dataUrl input area. It's used to delete previous value.  
914 - *  
915 - * @method _handleDatasourceDragOver  
916 - *  
917 - * @param {Event} e  
918 - */  
919 - _handleDatasourceDragOver : function(e){  
920 - this.$.data_url.value = "";  
921 - },  
922 - /**  
923 - * Callback related to the finish button.  
924 - *  
925 - * @method _onFinish  
926 - *  
927 - * @param {Event} e  
928 - */  
929 - _onFinish : function(e){  
930 -  
931 - if((this.selected_fields.length == 0) || this.selected_datalet == ""){  
932 - this.$.message.text = "You have to map the selected fields with datalets fields(by dragging) and select a datalet to export a new visualization.";  
933 - this.$.message.show();  
934 - return;  
935 - }  
936 -  
937 - var data = {  
938 - dataUrl : this.dataUrl,  
939 - params : this.params_fields,  
940 - fields : this.selected_fields,  
941 - datalet : this.selected_datalet,  
942 - staticData : JSON.stringify(this.$.datalet_placeholder.children[1].behavior.data)  
943 - }  
944 -  
945 - this.fire('data-sevc-controllet.dataletCreated', {data : data});  
946 -  
947 - }  
948 -  
949 - });  
950 -  
951 - </script>  
952 -  
953 -</dom-module>  
954 \ No newline at end of file 0 \ No newline at end of file
controllets/data-sevc-controllet/data-sevc-controllet_.html renamed to controllets/data-sevc-controllet/data-sevc-controllet_treeview_checkbox.html
  View file @9d4a34d
@@ -262,7 +262,12 @@ Example: @@ -262,7 +262,12 @@ Example:
262 262
263 #idm_layout_main_container{ 263 #idm_layout_main_container{
264 position: relative; 264 position: relative;
265 - height: 25vh; 265 + height: 50vh;
  266 + }
  267 +
  268 + #comment{
  269 + position: relative;
  270 + width: 35vw;
266 } 271 }
267 272
268 paper-menu{ 273 paper-menu{
@@ -345,7 +350,7 @@ Example: @@ -345,7 +350,7 @@ Example:
345 <div><img src="static/images/or.png" style="position: relative;left: 50%;padding-top:20px"></div> 350 <div><img src="static/images/or.png" style="position: relative;left: 50%;padding-top:20px"></div>
346 351
347 <div class="card-content"> 352 <div class="card-content">
348 - <paper-textarea id="data_url" label="Dataset api data url" floatingLabel value="{{dataUrl}}" on-dragover="_handleDatasourceDragOver"></paper-textarea> 353 + <paper-textarea class="custom_textarea" id="data_url" label="Dataset api data url" floatingLabel value="{{dataUrl}}" on-dragover="_handleDatasourceDragOver"></paper-textarea>
349 </div> 354 </div>
350 355
351 356
@@ -400,7 +405,7 @@ Example: @@ -400,7 +405,7 @@ Example:
400 <div id="toolbar_title" class="big">Data mapping</div> 405 <div id="toolbar_title" class="big">Data mapping</div>
401 <div id="toolbar_description" class="small">Select the visualization from the slider, drag and drop the selected fields in visualization parameter area, customize the visualization if you need</div> 406 <div id="toolbar_description" class="small">Select the visualization from the slider, drag and drop the selected fields in visualization parameter area, customize the visualization if you need</div>
402 </div> 407 </div>
403 - <paper-icon-button id="finish_button" on-click="_onFinish" icon="add-circle" alt="Conforms the creation" title="finish"></paper-icon-button> 408 + <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button>
404 </div> 409 </div>
405 410
406 411
@@ -423,20 +428,48 @@ Example: @@ -423,20 +428,48 @@ Example:
423 </div> 428 </div>
424 <div id="datalet_idm_fields_container" class="area_container"></div> 429 <div id="datalet_idm_fields_container" class="area_container"></div>
425 </div> 430 </div>
426 -  
427 - <div id="idm_layout_main_container" class="area_container">  
428 - <div class="title">  
429 - <div class="medium">Layout fields</div>  
430 - </div>  
431 - <div id="idm_layout_container" class="area_container"></div>  
432 - </div>  
433 </div> 431 </div>
434 </div> 432 </div>
435 433
436 - <div id="datalet_placeholder" style="min-width: 43%;"></div> 434 + <div id="datalet_placeholder" style="min-width: 43%;margin-top:10px;"></div>
  435 +
  436 + </div>
  437 +
  438 + </div>
  439 +
  440 + </neon-animatable>
437 441
  442 + <neon-animatable>
  443 + <div class="vertical justified layout">
  444 +
  445 + <div class="horizontal layout">
  446 + <paper-icon-button id="PrevButton" class="toolbar_button x-scope" on-click="_onPrevClick" icon="chevron-left" alt="arrow-back" title="arrow-back"></paper-icon-button>
  447 + <div class="avatar">4</div>
  448 + <div class="title flex">
  449 + <div id="toolbar_title" class="big">Finalize visualization</div>
  450 + <div id="toolbar_description" class="small">Assign the values for label parameters (e.g. title for you visualization).</div>
  451 + </div>
  452 + <paper-icon-button id="finish_button" on-click="_onFinish" icon="add-circle" alt="Conforms the creation" title="finish"></paper-icon-button>
438 </div> 453 </div>
439 454
  455 + <div class="horizontal layout">
  456 + <div style="margin-top: 10px;">
  457 + <div class="title">
  458 + <div class="medium">Layout fields</div>
  459 + </div>
  460 + <div id="idm_layout_main_container" class="area_container">
  461 + <div id="idm_layout_container" class="area_container"></div>
  462 + </div>
  463 +
  464 + <div id="comment">
  465 + <paper-textarea class="custom_textarea" id="commentArea" label="Max 100 character comment" maxlength="100"></paper-textarea>
  466 + </div>
  467 +
  468 + </div>
  469 +
  470 + <div id="datalet_placeholder_2" style="min-width: 43%;margin-top: 10px;"></div>
  471 +
  472 + </div>
440 </div> 473 </div>
441 474
442 </neon-animatable> 475 </neon-animatable>
@@ -638,8 +671,23 @@ Example: @@ -638,8 +671,23 @@ Example:
638 $(this.$.idm_layout_main_container).perfectScrollbar(); 671 $(this.$.idm_layout_main_container).perfectScrollbar();
639 $(this.$.table_fields_container).perfectScrollbar(); 672 $(this.$.table_fields_container).perfectScrollbar();
640 673
641 - if(this.dataletPreset != undefined) 674 + if(this.dataletPreset != undefined) {
642 this.$.data_url.value = this.dataletPreset['data-url']; 675 this.$.data_url.value = this.dataletPreset['data-url'];
  676 + this.selected = 1;
  677 + }
  678 + },
  679 + /**
  680 + * Utility function to inject datalet in a placeholder
  681 + */
  682 + injectDatalet: function(place_holder){
  683 + var datalet_params_2 ={
  684 + component : this.selectedDatalet,
  685 + params : this.paramsFields,
  686 + fields : this.selectedFields,
  687 + placeHolder : place_holder
  688 + };
  689 + ComponentService.deep_url = this.deepUrl;
  690 + ComponentService.getComponent(datalet_params_2);
643 }, 691 },
644 692
645 /** 693 /**
@@ -694,12 +742,13 @@ Example: @@ -694,12 +742,13 @@ Example:
694 this.$.datalet_idm_fields_container.innerHTML = ""; 742 this.$.datalet_idm_fields_container.innerHTML = "";
695 this.$.idm_layout_container.innerHTML = ""; 743 this.$.idm_layout_container.innerHTML = "";
696 744
  745 + var input;
697 var layouts = jQuery.extend(true, {}, response.idm.inputs.layouts); 746 var layouts = jQuery.extend(true, {}, response.idm.inputs.layouts);
698 747
699 if(response.idm.inputs.input.constructor == Object) { 748 if(response.idm.inputs.input.constructor == Object) {
700 if(response.idm.inputs.input.selection == "*") 749 if(response.idm.inputs.input.selection == "*")
701 { 750 {
702 - var input = response.idm.inputs.input; 751 + input = response.idm.inputs.input;
703 response.idm.inputs.input = new Array(); 752 response.idm.inputs.input = new Array();
704 for(var i=0;i<this.selectedFields.length;i++){ 753 for(var i=0;i<this.selectedFields.length;i++){
705 var newInput = jQuery.extend(true, {}, input); 754 var newInput = jQuery.extend(true, {}, input);
@@ -709,7 +758,6 @@ Example: @@ -709,7 +758,6 @@ Example:
709 } 758 }
710 } 759 }
711 760
712 - var input;  
713 var heading; 761 var heading;
714 var id; 762 var id;
715 763
@@ -737,21 +785,22 @@ Example: @@ -737,21 +785,22 @@ Example:
737 } 785 }
738 786
739 if(layouts.input != undefined) { 787 if(layouts.input != undefined) {
740 - if (layouts.input.constructor == Object) {  
741 - this.$.idm_layout_container.innerHTML += '<text-element-controllet heading="' + layouts.input.name +  
742 - '" description="' + layouts.input.description +  
743 - '" value="' + this.dataletPreset[Object.keys(this.dataletPreset)[0]] +  
744 - '" number="1"></text-element-controllet>';  
745 - } else {  
746 - for (var i = 0; i < layouts.input.length; i++) {  
747 - this.$.idm_layout_container.innerHTML += '<text-element-controllet heading="' + layouts.input[i].name + '" ' +  
748 - 'description="' + layouts.input[i].description + '" ' +  
749 - 'value="' + this.dataletPreset[Object.keys(this.dataletPreset)[(i + 1)]] + '" ' +  
750 - 'number="' + (i + 1) + '">' +  
751 - '</text-element-controllet>'; 788 + if(layouts.input.constructor == Object){
  789 + layouts.input = new Array(jQuery.extend(true, {}, layouts.input));
  790 + }
  791 +
  792 + html = '<text-element-controllet ';
  793 + for (var i = 0; i < layouts.input.length; i++) {
  794 + html += '<text-element-controllet heading="' + layouts.input[i].name + '" ' +
  795 + 'description="' + layouts.input[i].description + '" ' +
  796 + 'number="' + (i + 1) + '" ';
  797 + if(this.dataletPreset != undefined){
  798 + html += 'value="' + this.dataletPreset[Object.keys(this.dataletPreset)[(i + 1)]] + '"';
752 } 799 }
753 800
  801 + html += '></text-element-controllet>';
754 } 802 }
  803 + this.$.idm_layout_container.innerHTML = html;
755 } 804 }
756 805
757 if(this.selectedFields != undefined) this.generateDataletPreview(); 806 if(this.selectedFields != undefined) this.generateDataletPreview();
@@ -782,17 +831,7 @@ Example: @@ -782,17 +831,7 @@ Example:
782 } 831 }
783 } 832 }
784 833
785 -  
786 - var datalet_params ={  
787 - component : this.selectedDatalet,  
788 - params : this.paramsFields,  
789 - fields : this.selectedFields,  
790 - placeHolder : this.$.datalet_placeholder  
791 - };  
792 -  
793 -  
794 - ComponentService.deep_url = this.deepUrl;  
795 - ComponentService.getComponent(datalet_params); 834 + this.injectDatalet(this.$.datalet_placeholder);
796 835
797 }, 836 },
798 /** 837 /**
@@ -824,6 +863,9 @@ Example: @@ -824,6 +863,9 @@ Example:
824 }else{ 863 }else{
825 return true; 864 return true;
826 } 865 }
  866 + case 3:
  867 + this.injectDatalet(this.$.datalet_placeholder_2);
  868 + return true;
827 } 869 }
828 870
829 }, 871 },
@@ -848,11 +890,11 @@ Example: @@ -848,11 +890,11 @@ Example:
848 */ 890 */
849 _onNextClick : function() { 891 _onNextClick : function() {
850 892
851 - if(!this.validateCurrentPass(this.selected === 2 ? 2 : (this.selected + 1))) return; 893 + if(!this.validateCurrentPass(this.selected === 3 ? 3 : (this.selected + 1))) return;
852 894
853 this.entryAnimation = 'slide-from-right-animation'; 895 this.entryAnimation = 'slide-from-right-animation';
854 this.exitAnimation = 'slide-left-animation'; 896 this.exitAnimation = 'slide-left-animation';
855 - this.selected = this.selected === 2 ? 2 : (this.selected + 1); 897 + this.selected = this.selected === 3 ? 3 : (this.selected + 1);
856 }, 898 },
857 /** 899 /**
858 * Callback to manage InfoButton click to give user information about the selected dataset 900 * Callback to manage InfoButton click to give user information about the selected dataset
@@ -909,6 +951,7 @@ Example: @@ -909,6 +951,7 @@ Example:
909 */ 951 */
910 _fieldsSelected : function(e){ 952 _fieldsSelected : function(e){
911 953
  954 + this.selectedFields = e.detail.fields;
912 this.$.selectedFields_container.innerHTML = ""; 955 this.$.selectedFields_container.innerHTML = "";
913 for(var i=0;i<e.detail.fields.length;i++) { 956 for(var i=0;i<e.detail.fields.length;i++) {
914 this.$.selectedFields_container.innerHTML += '<draggable-element-controllet identifier="' + e.detail.fields[i] + 957 this.$.selectedFields_container.innerHTML += '<draggable-element-controllet identifier="' + e.detail.fields[i] +
@@ -952,6 +995,7 @@ Example: @@ -952,6 +995,7 @@ Example:
952 */ 995 */
953 _textElementChanged : function(e){ 996 _textElementChanged : function(e){
954 this.generateDataletPreview(); 997 this.generateDataletPreview();
  998 + this.injectDatalet(this.$.datalet_placeholder_2);
955 }, 999 },
956 /** 1000 /**
957 * Callback related to the drag operation in the dataUrl input area. It's used to delete previous value. 1001 * Callback related to the drag operation in the dataUrl input area. It's used to delete previous value.
@@ -983,6 +1027,7 @@ Example: @@ -983,6 +1027,7 @@ Example:
983 params : this.paramsFields, 1027 params : this.paramsFields,
984 fields : this.selectedFields, 1028 fields : this.selectedFields,
985 datalet : this.selectedDatalet, 1029 datalet : this.selectedDatalet,
  1030 + comment : this.$.commentArea.value,
986 staticData : JSON.stringify(this.$.datalet_placeholder.children[1].behavior.data) 1031 staticData : JSON.stringify(this.$.datalet_placeholder.children[1].behavior.data)
987 } 1032 }
988 1033
controllets/paper-card-controllet/paper-card-controllet.html
  View file @9d4a34d
@@ -95,25 +95,25 @@ @@ -95,25 +95,25 @@
95 95
96 <template is="dom-if" if="{{checkType(type, 'text')}}"> 96 <template is="dom-if" if="{{checkType(type, 'text')}}">
97 97
98 - <paper-fab mini icon="create"></paper-fab> 98 + <paper-fab mini icon="create" on-click="_handleFabClick"></paper-fab>
99 99
100 </template> 100 </template>
101 101
102 <template is="dom-if" if="{{checkType(type, 'image')}}"> 102 <template is="dom-if" if="{{checkType(type, 'image')}}">
103 103
104 - <paper-fab mini icon="perm-media"></paper-fab> 104 + <paper-fab mini icon="perm-media" on-click="_handleFabClick"></paper-fab>
105 105
106 </template> 106 </template>
107 107
108 <template is="dom-if" if="{{checkType(type, 'datalet')}}"> 108 <template is="dom-if" if="{{checkType(type, 'datalet')}}">
109 109
110 - <paper-fab mini icon="assessment"></paper-fab> 110 + <paper-fab mini icon="assessment" on-click="_handleFabClick"></paper-fab>
111 111
112 </template> 112 </template>
113 113
114 <template is="dom-if" if="{{checkType(type, 'link')}}"> 114 <template is="dom-if" if="{{checkType(type, 'link')}}">
115 115
116 - <paper-fab mini icon="link"></paper-fab> 116 + <paper-fab mini icon="link" on-click="_handleFabClick"></paper-fab>
117 117
118 </template> 118 </template>
119 119
@@ -182,6 +182,10 @@ @@ -182,6 +182,10 @@
182 182
183 checkType: function(type, check){ 183 checkType: function(type, check){
184 return (type == check); 184 return (type == check);
  185 + },
  186 +
  187 + _handleFabClick: function(e){
  188 + this.fire('paper-card-controllet_button-clicked', {data : this});
185 } 189 }
186 }) 190 })
187 </script> 191 </script>
controllets/tree-view-controllet/demo/index.html
  View file @9d4a34d
1 <html> 1 <html>
2 2
3 <head> 3 <head>
4 - <script src="../../js/jquery-1.11.2.min.js"></script> 4 + <script src="../../shared_js/jquery-1.11.2.min.js"></script>
5 5
6 - <script src="../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> 6 + <script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
7 7
8 <link rel="import" href="../tree-view-controllet.html" /> 8 <link rel="import" href="../tree-view-controllet.html" />
9 </head> 9 </head>
@@ -11,22 +11,30 @@ @@ -11,22 +11,30 @@
11 <body> 11 <body>
12 12
13 <style> 13 <style>
14 - #container { 14 + .container {
  15 + display: flex;
  16 + flex-direction: row;
  17 + }
  18 + #tree_container {
15 width: 300px; 19 width: 300px;
16 - height: 100vh;  
17 - overflow: auto;  
18 } 20 }
19 - #fields {  
20 - height: 30px;  
21 - background-color: #2196F3; 21 + #fields_container {
  22 + margin-left: 100px;
22 } 23 }
23 </style> 24 </style>
24 25
25 - <p id="fields">&nbsp;</p> 26 + <div class="container">
  27 +
  28 + <div id="tree_container">
  29 +
  30 + <tree-view-controllet id="tree" root-name="data" opened-path="records,geometry" preselected-fields='["records,datasetid", "records,recordid", "nhits"]'></tree-view-controllet>
26 31
27 - <div id="container"> 32 + </div>
28 33
29 - <tree-view-controllet id="tree" root-name="data" opened-path="data,records"></tree-view-controllet> 34 + <div id="fields_container">
  35 + <h3>Selected fields:</h3>
  36 + <p id="fields">&nbsp;</p>
  37 + </div>
30 38
31 </div> 39 </div>
32 40
@@ -39,12 +47,12 @@ @@ -39,12 +47,12 @@
39 dataType: "json", 47 dataType: "json",
40 success: function(data){ 48 success: function(data){
41 tree.setAttribute("json-data", JSON.stringify(data)); 49 tree.setAttribute("json-data", JSON.stringify(data));
42 - tree.init();//chrome 50 + tree.ready();//chrome
43 } 51 }
44 }); 52 });
45 53
46 - tree.addEventListener("click", function () {  
47 - fields.innerHTML = tree.getFlatFields(); 54 + tree.addEventListener("tree-view-controllet_selected-fields", function (e) {
  55 + fields.innerHTML = e.detail.fields;
48 console.log(tree.getFlatFields()); 56 console.log(tree.getFlatFields());
49 console.log(tree.getFields());//firefox console.log does not recognize associative array? 57 console.log(tree.getFields());//firefox console.log does not recognize associative array?
50 }); 58 });
controllets/tree-view-controllet/tree-view-controllet.html
  View file @9d4a34d
@@ -20,8 +20,13 @@ @@ -20,8 +20,13 @@
20 font-weight: 700; 20 font-weight: 700;
21 } 21 }
22 22
  23 + paper-item.menu-trigger.iron-selected {
  24 + background-color: #B6B6B6;
  25 + }
  26 +
23 paper-item:not(.menu-trigger).iron-selected { 27 paper-item:not(.menu-trigger).iron-selected {
24 background-color: #2196F3; 28 background-color: #2196F3;
  29 + color: #FFFFFF;
25 } 30 }
26 31
27 .sublist { 32 .sublist {
@@ -29,11 +34,16 @@ @@ -29,11 +34,16 @@
29 padding-right: 20px; 34 padding-right: 20px;
30 } 35 }
31 36
  37 + :host{
  38 + --paper-menu-focused-item-after: {
  39 + opacity: 0;
  40 + };
  41 + }
32 </style> 42 </style>
33 43
34 <template> 44 <template>
35 45
36 - <paper-menu id="paper-tree"></paper-menu> 46 + <paper-menu id="paper_tree"></paper-menu>
37 47
38 </template> 48 </template>
39 49
@@ -46,12 +56,12 @@ @@ -46,12 +56,12 @@
46 56
47 rootName : { 57 rootName : {
48 type : String, 58 type : String,
49 - value : "Data" 59 + value : "root"
50 }, 60 },
51 61
52 jsonData : { 62 jsonData : {
53 type : Object, 63 type : Object,
54 - value : null 64 + value : undefined
55 }, 65 },
56 66
57 selectedFields : { 67 selectedFields : {
@@ -59,9 +69,14 @@ @@ -59,9 +69,14 @@
59 value : [] 69 value : []
60 }, 70 },
61 71
  72 + preselectedFields : {
  73 + type : Array,
  74 + value : []
  75 + },
  76 +
62 openedPath : { 77 openedPath : {
63 type : String, 78 type : String,
64 - value : "" 79 + value : undefined
65 } 80 }
66 81
67 }, 82 },
@@ -73,16 +88,30 @@ @@ -73,16 +88,30 @@
73 88
74 ready : function() { 89 ready : function() {
75 if(this.jsonData) 90 if(this.jsonData)
76 - this.init(); 91 + this._init();
  92 + },
  93 +
  94 + getFields : function() {
  95 + return this.selectedFields;
  96 + },
  97 +
  98 + getFlatFields : function() {
  99 + var fields = [];
  100 +
  101 + for(var A in this.selectedFields)
  102 + for(var e in this.selectedFields[A])
  103 + fields.push(this.selectedFields[A][e]);
  104 +
  105 + return fields;
77 }, 106 },
78 107
79 - init : function() {  
80 - var tree = document.getElementById('paper-tree');  
81 - this.injectBoundHTML(createTree(this.rootName, this.jsonData), tree);  
82 - this.openPath(); 108 + _init : function() {
  109 + this._injectBoundHTML(this._initCreateTree(this.rootName, this.jsonData), this.$.paper_tree);
  110 + this._preselectFields();
  111 + this._openPath();
83 }, 112 },
84 113
85 - injectBoundHTML : function(html, element) { 114 + _injectBoundHTML : function(html, element) {
86 var template = document.createElement('template'); 115 var template = document.createElement('template');
87 template.innerHTML = html; 116 template.innerHTML = html;
88 var fragment = this.instanceTemplate(template); 117 var fragment = this.instanceTemplate(template);
@@ -93,39 +122,121 @@ @@ -93,39 +122,121 @@
93 return fragment; 122 return fragment;
94 }, 123 },
95 124
96 - openPath : function() {  
97 - var openedPath; 125 + _initCreateTree : function(nodeName, node) {
  126 + var list = new Array();
  127 + for(var child in node)
  128 + list.push(this._createTree(child, node[child]));
  129 + return this._paper_submenu(nodeName, list);
  130 + },
98 131
99 - if (this.openedPath == "")  
100 - openedPath = this.rootName;  
101 - else  
102 - openedPath = this.openedPath; 132 + _createTree : function(nodeName, node) {
  133 + var html = "";
  134 + if(node.constructor == Object){
  135 + var list = new Array();
  136 + for(var child in node)
  137 + list.push(this._createTree(nodeName+","+child, node[child]));
  138 + html = this._paper_submenu(nodeName, list);
  139 + }
  140 + else if (node.constructor == Array){
  141 + var list = new Array();
  142 + if(node[0].constructor == Object){
  143 + for(var child in node[0])
  144 + list.push(this._createTree(nodeName+","+child, node[0][child]));
  145 + html = this._paper_submenu(nodeName, list);
  146 + }
  147 + else{
  148 + html = nodeName;
  149 + }
  150 + }
  151 + else{
  152 + html = nodeName;
  153 + }
  154 + return html;
  155 + },
103 156
104 - var nodes = openedPath.split(","); 157 + _paper_submenu : function(str, list) {
  158 + var submenu = "<paper-submenu>";
105 159
106 - openedPath = ""; 160 + submenu += "<paper-item class=\"menu-trigger\">"+this._getName(str)+"</paper-item>" + "<paper-menu id=\""+str+"\" class=\"menu-content sublist\" multi>";
107 161
108 - while(nodes.length != 0) {  
109 - openedPath += nodes.splice(0,1);  
110 - var menu = document.getElementById(openedPath);  
111 - var submenu = menu.parentNode.parentNode;  
112 - submenu.setAttribute("opened", "true");  
113 - openedPath += ","; 162 + for(var i in list){
  163 + if(list[i].indexOf("paper-submenu") != -1)
  164 + submenu += list[i];
  165 + else
  166 + submenu += this._paper_item(list[i]);
114 } 167 }
  168 +
  169 + submenu += "</paper-menu>" + "</paper-submenu>";
  170 +
  171 + return submenu;
115 }, 172 },
116 173
117 - _onSelect : function(e) {  
118 - //this.updateSelectedFields(e);  
119 - this.fire('treeview-controllet_fileds-selected', {fields : this.getFlatFields()}); 174 + _paper_item : function(str){
  175 + return "<paper-item id=\""+str+"\">"+this._getName(str)+"</paper-item>";
  176 + },
  177 +
  178 + _getName : function (str){
  179 + str = str.split(",");
  180 + return str[str.length-1];
  181 + },
  182 +
  183 + _preselectFields : function() {
  184 + if (this.preselectedFields){
  185 + for(var field in this.preselectedFields){
  186 + var path = this.preselectedFields[field];
  187 +
  188 + if (path.lastIndexOf(",") != -1)
  189 + path = path.substring(0, path.lastIndexOf(","));
  190 + else
  191 + path = this.rootName;
  192 +
  193 + var menu = document.getElementById(path);
  194 + var item = document.getElementById(this.preselectedFields[field]);
  195 + var index = menu.items.indexOf(item);
  196 +
  197 + if (menu.selectedValues == undefined){
  198 + menu.selectedValues = [index];
  199 + }
  200 + else{
  201 + var selectedValues = [];
  202 + for (var i in menu.selectedValues)
  203 + selectedValues.push(menu.selectedValues[i]);
  204 + selectedValues.push(index);
  205 + menu.selectedValues = selectedValues;
  206 + }
  207 + }
  208 + }
  209 + },
  210 +
  211 + _openPath : function() {
  212 + this.$.paper_tree.firstChild.open();
  213 +
  214 + if (this.openedPath) {
  215 + var openedPath = this.openedPath;
  216 + var nodes = openedPath.split(",");
  217 + openedPath = "";
  218 +
  219 + while (nodes.length != 0) {
  220 + openedPath += nodes.splice(0, 1);
  221 +
  222 + var menu = document.getElementById(openedPath);
  223 + var submenu = menu.parentNode.parentNode;
  224 + submenu.open();
  225 +
  226 + openedPath += ",";
  227 + }
  228 + }
  229 + },
120 230
  231 + _onSelect : function(e) {
  232 + this._updateSelectedFields(e);
121 }, 233 },
122 234
123 _onDeselect : function(e) { 235 _onDeselect : function(e) {
124 - this.updateSelectedFields(e);  
125 - this.fire('treeview-controllet_fileds-selected', {fields : this.getFlatFields()}); 236 + this._updateSelectedFields(e);
126 }, 237 },
127 238
128 - updateSelectedFields : function(e) { 239 + _updateSelectedFields : function(e) {
129 var menuId = e.target.id; 240 var menuId = e.target.id;
130 var selectedIds = []; 241 var selectedIds = [];
131 242
@@ -140,79 +251,12 @@ @@ -140,79 +251,12 @@
140 this.selectedFields[menuId] = selectedIds; 251 this.selectedFields[menuId] = selectedIds;
141 else 252 else
142 delete this.selectedFields[menuId]; 253 delete this.selectedFields[menuId];
143 - },  
144 -  
145 - getFields : function() {  
146 - return this.selectedFields;  
147 - },  
148 -  
149 - getFlatFields : function() {  
150 - var fields = [];  
151 254
152 - for(var A in this.selectedFields)  
153 - for(var e in this.selectedFields[A])  
154 - fields.push(this.selectedFields[A][e].replace(this.rootName + ",",""));  
155 -  
156 - return fields; 255 + this.fire('tree-view-controllet_selected-fields', {fields : this.getFlatFields()});
157 } 256 }
158 257
159 }); 258 });
160 259
161 </script> 260 </script>
162 261
163 - <script>  
164 -  
165 - function createTree(nodeName, node){  
166 - var html = "";  
167 - if(node.constructor == Object){  
168 - var list = new Array();  
169 - for(var child in node)  
170 - list.push(createTree(nodeName+","+child, node[child]));  
171 - html = paper_submenu(nodeName, list);  
172 - }  
173 - else if (node.constructor == Array){  
174 - var list = new Array();  
175 - if(node[0].constructor == Object){  
176 - for(var child in node[0])  
177 - list.push(createTree(nodeName+","+child, node[0][child]));  
178 - html = paper_submenu(nodeName, list);  
179 - }  
180 - else{  
181 - html = nodeName;  
182 - }  
183 - }  
184 - else{  
185 - html = nodeName;  
186 - }  
187 - return html;  
188 - }  
189 -  
190 - function paper_submenu(str, list){  
191 - var submenu = "<paper-submenu>";  
192 -  
193 - submenu += "<paper-item class=\"menu-trigger\">"+getName(str)+"</paper-item>" + "<paper-menu id=\""+str+"\" class=\"menu-content sublist\" multi>";  
194 -  
195 - for(var i in list){  
196 - if(list[i].indexOf("paper-submenu") != -1)  
197 - submenu += list[i];  
198 - else  
199 - submenu += paper_item(list[i]);  
200 - }  
201 -  
202 - submenu += "</paper-menu>" + "</paper-submenu>";  
203 -  
204 - return submenu;  
205 - }  
206 -  
207 - function paper_item(str){  
208 - return "<paper-item id=\""+str+"\">"+getName(str)+"</paper-item>";  
209 - }  
210 -  
211 - function getName(str){  
212 - str = str.split(",");  
213 - return str[str.length-1];  
214 - }  
215 -  
216 - </script>  
217 -  
218 </dom-module> 262 </dom-module>
219 \ No newline at end of file 263 \ No newline at end of file
datalets/datatable-datalet/datatable-datalet.html
  View file @9d4a34d
@@ -63,7 +63,7 @@ Example: @@ -63,7 +63,7 @@ Example:
63 var DatatableBehavior = { 63 var DatatableBehavior = {
64 64
65 presentData: function(){ 65 presentData: function(){
66 - if(!this.data || this.data == undefined) return; 66 + if(!this.data || this.data[0] == undefined) return;
67 html = ""; 67 html = "";
68 html += '<thead>'+ 68 html += '<thead>'+
69 '<tr>'; 69 '<tr>';