SGH / COMPONENTS

Commit 0f6424fe52651098e8d3e06d372d7a05da2b130a

Authored by root
1 parent d2774aae

update new data-sevc-controllet

Inline Side-by-side
Showing 16 changed files with 487 additions and 1165 deletions
controllets/animated-grid-controllet/animated-grid-controllet.html 100644 → 100755
  View file @0f6424f
... ... @@ -28,8 +28,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
28 28 }
29 29  
30 30 /* ---- grid-item ---- */
31   -
32   -
33 31 ::content .grid-item {float: left;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;border: 3px solid white;}
34 32 ::content .grid-sizer {width: 200px;}
35 33 ::content .grid-item-w20 {width: 200px;}
... ... @@ -37,31 +35,52 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
37 35 ::content .grid-item-w60 {width: 600px;}
38 36 ::content .grid-item-w80 {width: 80%;}
39 37 ::content .grid-item-w100 {width: 100%;}
40   -
41 38 ::content .grid-item-h200 {height: 200px;}
42 39 ::content .grid-item-h400 {height: 400px;}
43 40 ::content .grid-item-h600 {height: 600px;}
44 41 ::content .grid-item-h800 {height: 800px;}
  42 + ::content .grid-item-c4 {background-color: #2C29FF;}
  43 + /* ---- grid-item ---- */
45 44  
46   - ::content .grid-item-c0 {background-color: #0D47A1;}
47   - ::content .grid-item-c1 {background-color: #1976D2;}
48   - ::content .grid-item-c2 {background-color: #2196F3;}
49   - ::content .grid-item-c3 {background-color: #64B5F6;}
50   - ::content .grid-item-c4 {background-color: #BBDEFB;}
51   -
52   - ::content .room-body {background-color: #BBDEFB;}
53   -
  45 + ::content .room-body {color:#FFFFFF;}
54 46 ::content .room-subject
55 47 {
56 48 position: absolute;
57 49 width: 100%;
58 50 height: 30px;
59   - bottom: 20px;
  51 + bottom: 30px;
60 52 background-color: rgba(0,0,0,0.6);
61   - vertical-align: middle;
62 53 color: #FFFFFF;
63 54 }
64   -
  55 + ::content .room-subject span
  56 + {
  57 + top: 5px;
  58 + left: 5px;
  59 + position: relative;
  60 + text-overflow: ellipsis;
  61 + overflow: hidden;
  62 + white-space:nowrap;
  63 + text-overflow:ellipsis;
  64 + display:inline-block;
  65 + }
  66 + ::content .room-body span
  67 + {
  68 + top: 5px;
  69 + left: 5px;
  70 + position: relative;
  71 + text-overflow: ellipsis;
  72 + overflow: hidden;
  73 + text-overflow:ellipsis;
  74 + display:inline-block;
  75 + }
  76 + ::content .room-timestamp
  77 + {
  78 + position: absolute;
  79 + right:3px;
  80 + bottom: 3px;
  81 + font-size: 8px;
  82 + color: #CCCCCC;
  83 + }
65 84 </style>
66 85  
67 86 <template>
... ... @@ -146,8 +165,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
146 165  
147 166 var target = event.target;
148 167  
149   - if(target.classList[0] != "grid-item")
150   - return;
  168 + while(target.classList[0] != "grid-item")
  169 + target = target.parentElement;
151 170  
152 171 // configure the page animation
153 172 this.sharedElements = {
... ... @@ -161,8 +180,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
161 180  
162 181 this.fire('tile-click', {
163 182 tile: target,
164   - //data: {color: target._templateInstance.item.c}
165   - data: {color: target.classList[3], id:target.id}
  183 + data: {color: target.style.backgroundColor, id:target.id}
166 184 });
167 185  
168 186 }
... ...
controllets/data-sevc-controllet/colors
  View file @0f6424f
... ... @@ -32,4 +32,15 @@ E0E0E0
32 32  
33 33  
34 34  
35   -'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif
36 35 \ No newline at end of file
  36 +'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif
  37 +
  38 +
  39 +
  40 +a {
  41 + color: #00BCD4 ; /** OW_Control type:color, key:accentColor, section:2. Colors, label:5. Accent **/
  42 + text-decoration: none;
  43 +}
  44 +a:hover {
  45 + color: #2db395;
  46 + text-decoration: underline;
  47 +}
37 48 \ No newline at end of file
... ...
controllets/data-sevc-controllet/data-sevc-controllet-orig.html
  View file @0f6424f
... ... @@ -54,8 +54,10 @@
54 54 <link rel="import" href="../items-list-controllet/item-list-controllet.html">
55 55 <link rel="import" href="../draggable-element-controllet/draggable-element-controllet.html">
56 56 <link rel="import" href="../tree-view-controllet/tree-view-controllet.html">
  57 +<link rel="import" href="../tree-view-multi-table-controllet/tree-view-multi-table-controllet.html">
57 58 <link rel="import" href="../text-element-controllet/text-element-controllet.html">
58 59 <link rel="import" href="../animated-button-container-controllet/animated-button-container-controllet.html">
  60 +<link rel="import" href="../../datalets/datasetexplorer-datalet/datasetexplorer-datalet.html">
59 61  
60 62 <!--
61 63 The `data-sevc-controllet` is a controllet to generate visualization from a dataset accessible through api. A json response is required.
... ... @@ -210,12 +212,20 @@ Example:
210 212 padding : 0.8em;
211 213 }
212 214  
  215 + /*#fields_placeholder{*/
  216 + /*width: 40%;*/
  217 + /*height: 75vh;*/
  218 + /*position: relative;*/
  219 + /*float: left;*/
  220 + /*overflow: auto;*/
  221 + /*}*/
  222 +
213 223 #fields_placeholder{
214   - width: 40%;
215   - height: 75vh;
216   - position: relative;
217   - float: left;
218   - overflow: auto;
  224 + width: 100%;
  225 + /*height: 75vh;*/
  226 + /*position: relative;*/
  227 + /*float: right;*/
  228 + /*overflow: auto;*/
219 229 }
220 230  
221 231 #table_fields_container{
... ... @@ -329,8 +339,8 @@ Example:
329 339 <paper-material elevation="2" class="area_container">
330 340 <paper-tabs selected="{{DatasourceTabSelected}}">
331 341 <paper-tab>Select data source</paper-tab>
  342 + <paper-tab>Tree Map view</paper-tab>
332 343 <paper-tab>Most popular</paper-tab>
333   - <paper-tab>Search</paper-tab>
334 344 </paper-tabs>
335 345 <iron-pages selected="{{DatasourceTabSelected}}">
336 346 <div>
... ... @@ -353,7 +363,10 @@ Example:
353 363  
354 364  
355 365 </div>
356   - <div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div>
  366 + <!--<div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div>-->
  367 + <div>
  368 + <datasetexplorer-datalet class="datasetexplorer" data-url="/openwall/api/datasetTree" fields='["result,provider_name","result,organization_name","result,package_name","result,resource_name","result,url","result,w"]'></datasetexplorer-datalet>
  369 + </div>
357 370 <div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div>
358 371 </iron-pages>
359 372 </paper-material>
... ... @@ -378,13 +391,19 @@ Example:
378 391  
379 392 <div class="horizontal layout">
380 393  
381   - <paper-material elevation="2" id="fields_placeholder" class="area_container flexchild" style="min-width:300px">
382   - <tree-view-controllet id="fields_treeview" root-name="data" opened-path="result,records"></tree-view-controllet>
383   - </paper-material>
  394 + <!--<paper-material elevation="2" id="fields_placeholder" class="area_container flexchild" style="min-width:300px">-->
  395 + <!--<tree-view-controllet id="fields_treeview" root-name="data" opened-path="result,records"></tree-view-controllet>-->
  396 + <!--</paper-material>-->
  397 +
  398 + <!--<paper-material elevation="2" id="table_fields_container" class="area_container flex2child">-->
  399 + <!--<div id="table_component_place_holder"></div>-->
  400 + <!--</paper-material>-->
384 401  
385   - <paper-material elevation="2" id="table_fields_container" class="area_container flex2child">
386   - <div id="table_component_place_holder"></div>
387   - </paper-material>
  402 + <!--<paper-material elevation="2" id="fields_placeholder" class="area_container flexchild" style="min-width:300px">-->
  403 + <div id="fields_placeholder">
  404 + <tree-view-multi-table-controllet id="fields_treeview" root-name="data" opened-path="result,records" data-url={{dataUrl}}></tree-view-multi-table-controllet>
  405 + </div>
  406 + <!--</paper-material>-->
388 407  
389 408 </div>
390 409  
... ... @@ -534,7 +553,8 @@ Example:
534 553 'items-list-controllet_item-selected' : '_dataletSelected',
535 554 'draggable-element-controllet_content-dragged' : '_fieldsMapped',
536 555 'tree-view-controllet_selected-fields' : '_fieldsSelected',
537   - 'text-element-controllet_content-changed' : '_textElementChanged'
  556 + 'text-element-controllet_content-changed' : '_textElementChanged',
  557 + 'datasetexplorer-datalet_data-url': '_selectDataUrl_treeMap'
538 558 },
539 559  
540 560 properties : {
... ... @@ -663,7 +683,7 @@ Example:
663 683  
664 684 ready : function(){
665 685  
666   - $(this.$.fields_placeholder).perfectScrollbar();
  686 +// $(this.$.fields_placeholder).perfectScrollbar();
667 687 $(this.$.selectedFields_main_container).perfectScrollbar();
668 688 $(this.$.idm_fields_main_container).perfectScrollbar();
669 689 $(this.$.idm_layout_main_container).perfectScrollbar();
... ... @@ -1071,7 +1091,23 @@ Example:
1071 1091  
1072 1092 this.fire('data-sevc-controllet.dataletCreated', {data : data});
1073 1093  
1074   - }
  1094 + },
  1095 +
  1096 + //tree map
  1097 + _selectDataUrl_treeMap : function(e){
  1098 + var url = e.detail.url;
  1099 +// url = url.split('/');
  1100 +// var index = url.indexOf('resource')
  1101 +// if (index != -1) { // ckan
  1102 +// var resourceId = url[index + 1];
  1103 +// url = "http://ckan.routetopa.eu/api/action/datastore_search?resource_id=" + resourceId;
  1104 +//
  1105 +// } else
  1106 +// url = "sorry, data provider not supported yet";
  1107 +
  1108 + this.dataUrl = url;
  1109 + this.DatasourceTabSelected=0;
  1110 + },
1075 1111  
1076 1112 });
1077 1113  
... ...
controllets/data-sevc-controllet/data-sevc-controllet.html
  View file @0f6424f
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   --->
  1 +/********************************************************************************************************************************
  2 +<!--<script src="../shared_js/jquery-1.11.2.min.js"></script>-->
  3 +<!--<script src="../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>-->
  4 +<script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
  5 +<link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
  6 +/********************************************************************************************************************************
31 7  
32 8 <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-material/paper-material.html">
42   -<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
43   -<link rel="import" href="../../bower_components/paper-button/paper-button.html">
44   -<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
45   -<link rel="import" href="../../bower_components/paper-tabs/paper-tab.html">
46   -<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">
47   -<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
48   -<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
49   -<link rel="import" href="../../bower_components/paper-item/paper-item.html">
50   -<link rel="import" href="../../bower_components/paper-toast/paper-toast.html">
51   -<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
52   -<link rel="import" href="../../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">
53   -
54   -<link rel="import" href="../items-list-controllet/item-list-controllet.html">
55   -<link rel="import" href="../draggable-element-controllet/draggable-element-controllet.html">
56   -<link rel="import" href="../tree-view-controllet/tree-view-controllet.html">
57   -<link rel="import" href="../tree-view-multi-table-controllet/tree-view-multi-table-controllet.html">
58   -<link rel="import" href="../text-element-controllet/text-element-controllet.html">
59   -<link rel="import" href="../animated-button-container-controllet/animated-button-container-controllet.html">
60   -<link rel="import" href="../../datalets/datasetexplorer-datalet/datasetexplorer-datalet.html">
61   -
62   -<!--
63   -The `data-sevc-controllet` is a controllet to generate visualization from a dataset accessible through api. A json response is required.
64   -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
65   -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
66   -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
67   -is available every time a fields is dragged in the input data model fields area.
68   -
69   -Example:
70   -
71   - <data-sevc-controllet deep-url="http://192.168.36.128/DatalEts-Ecosystem-Provider/DEEP/"
72   - datalets-list-url="http://192.168.36.128/DatalEts-Ecosystem-Provider/DEEP/datalets-list"
73   - datasets='{[{name : 'dataset1', url : dataset1Urls}, ... , {name : 'datasetN', url : datasetNUrls}]'>
74   - </data-sevc-controllet>
75   -
76   -
77   -@element data-sevc-controllet
78   -@status beta
79   -@homepage
80   -@group controllets
81   --->
82 9  
  10 +<link rel="import" href="../page-slider-controllet/page-slider-controllet.html">
  11 +<link rel="import" href="../dataset-selection-controllet/dataset-selection-controllet.html">
  12 +<link rel="import" href="../tree-view-multi-table-controllet/tree-view-multi-table-controllet.html" />
  13 +<link rel="import" href="../datalet-selection-controllet/datalet-selection-controllet.html">
83 14  
84 15 <dom-module id="data-sevc-controllet">
85   - <template>
86   - <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
87   -
88   - <style is="custom-style">
89 16  
90   - ::content body {
91   - font-family: 'Roboto', sans-serif;
92   - }
93   -
94   - .flexchild
95   - {
96   - @apply(--layout-flex);
97   - }
98   -
99   - .flex2child
100   - {
101   - @apply(--layout-flex-2);
102   - }
103   -
104   - .avatar
105   - {
106   - display: inline-block;
107   - height: 2em;
108   - width: 2em;
109   - border-radius: 50%;
110   - background: var(--paper-blue-500);
111   - color: white;
112   - line-height: 2em;
113   - font-size: 1.87em;
114   - text-align: center;
115   - }
116   -
117   - .title
118   - {
119   - position: relative;
120   - top: 0.60vh;
121   - margin-left: 20px;
122   - }
123   -
124   - .big
125   - {
126   - font-size: 1.37em;
127   - color: var(--google-grey-500);
128   - }
129   -
130   - .medium
131   - {
132   - font-size: 1em;
133   - padding-bottom: 0.5em;
134   - color : #000000;
135   - font-weight: bold;
136   - }
137   -
138   - .small
139   - {
140   - font-size: 0.8em;
141   - padding-top: 10px;
142   - color: var(--paper-blue-500);
143   - font-weight: bold;
144   - }
145   -
146   - paper-input
147   - {
148   - width: 80%;
149   - }
150   -
151   - paper-dropdown-menu
152   - {
153   - text-align: left;
154   - margin: auto;
155   - width: 100%;
156   - }
157   -
158   - ::content paper-menu-button
159   - {
160   - display: block;
161   - width: 100%;
162   - }
163   -
164   - #visualization_slider_area
165   - {
166   - padding-top: 20px;
167   - overflow: visible;
168   - }
169   -
170   - #fields_mapping_area
171   - {
172   - min-width: 670px;
173   - min-height: 180px;
174   - }
175   -
176   - #datalet_placeholder
177   - {
178   - height: 60vh;
179   - min-height: 60vh;
180   - min-width: 45%;
181   - margin-top:10px;
182   - }
183   -
184   - .datalet_right_container
185   - {
186   - width: 100vh;
187   - }
188   -
189   - .field-mapping-card
190   - {
191   - width: 50%;
192   - float: left;
193   - }
194   -
195   - .toolbar_button
196   - {
197   - --iron-icon-height: 32px;
198   - --iron-icon-width: 32px;
199   - }
200   -
201   - #finish_button
202   - {
203   - --iron-icon-height: 32px;
204   - --iron-icon-width: 32px;
205   - color: var(--paper-blue-500);
206   - }
207   -
208   - .area_container
209   - {
210   - overflow: hidden;
211   - margin : 0.8em;
212   - padding : 0.8em;
213   - }
214   -
215   - /*#fields_placeholder{*/
216   - /*width: 40%;*/
217   - /*height: 75vh;*/
218   - /*position: relative;*/
219   - /*float: left;*/
220   - /*overflow: auto;*/
221   - /*}*/
222   -
223   - #fields_placeholder{
224   - width: 100%;
225   - /*height: 75vh;*/
226   - /*position: relative;*/
227   - /*float: right;*/
228   - /*overflow: auto;*/
229   - }
230   -
231   - #table_fields_container{
232   - height: 75vh;
233   - width: 55%;
234   - position: relative;
235   - float: left;
236   - overflow: auto;
237   - }
238   -
239   - #idm_fields_main_container{
240   - position: relative;
241   - height: 60vh;
242   - }
243   -
244   - #selectedFields_main_container{
245   - position: relative;
246   - height: 60vh;
247   - }
248   -
249   - #idm_layout_main_container{
250   - position: relative;
251   - height: 50vh;
252   - }
253   -
254   - #comment{
255   - position: relative;
256   - width: 35vw;
257   - }
258   -
259   - paper-menu{
260   - width: 100%;
261   - }
262   -
263   - paper-dialog {
264   - position: fixed;
265   - top: 16px;
266   - width: auto;
267   - height: auto;
268   - overflow: auto;
269   - padding : 30px;
270   - }
271   -
272   - paper-tabs, paper-toolbar
273   - {
274   - background-color: var(--paper-blue-500);
275   - color: #ffffff;
276   - box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
277   - --paper-tabs-selection-bar-color: var(--google-gray-500);
278   - }
279   -
280   - paper-toolbar paper-tabs
281   - {
282   - box-shadow: none;
283   - }
284   -
285   - paper-tabs[noink][no-bar] paper-tab.iron-selected
286   - {
287   - background-color: var(--google-gray-500);
288   - }
289   -
290   - paper-tabs[align-bottom]
291   - {
292   - box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.15);
293   - }
294   - </style>
295   -
296   - <iron-ajax
297   - auto
298   - id="data_request"
299   - url={{dataUrl}}
300   - verbose="true"
301   - on-response="handleResponseData"
302   - debounce-duration="300">
303   - </iron-ajax>
304   -
305   - <iron-ajax
306   - id="datales_list_request"
307   - auto
308   - url={{dataletsListUrl}}
309   - handle-as="json"
310   - on-response="handleResponseDatalets"
311   - debounce-duration="300">
312   - </iron-ajax>
313   -
314   - <iron-ajax
315   - id="selectedDatalet_request"
316   - url={{deepUrl}}
317   - verbose="true"
318   - on-response="handleSelectedDatalet"
319   - debounce-duration="300">
320   - </iron-ajax>
321   -
322   - <content>
323   -
324   - <neon-animated-pages id="pages" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
325   -
326   - <neon-animatable>
327   -
328   - <div class="vertical justified layout">
329   -
330   - <div class="horizontal layout">
331   - <div class="avatar" style="margin-left:15px">1</div>
332   - <div class="title flex">
333   - <div id="toolbar_title" class="big">Dataset source</div>
334   - <div id="toolbar_description" class="small">Copy and paste/drag and drop in the textarea the url of datasource</div>
335   - </div>
336   - <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button>
337   - </div>
338   -
339   - <paper-material elevation="2" class="area_container">
340   - <paper-tabs selected="{{DatasourceTabSelected}}">
341   - <paper-tab>Select data source</paper-tab>
342   - <paper-tab>Tree Map view</paper-tab>
343   - <paper-tab>Most popular</paper-tab>
344   - </paper-tabs>
345   - <iron-pages selected="{{DatasourceTabSelected}}">
346   - <div>
347   - <div class="card-content">
348   - <paper-dropdown-menu id="datasets-sources" name="datasets-sources" label="Available datasets">
349   - <paper-menu class="dropdown-content">
350   - <template is="dom-repeat" items="{{datasets}}" as="dataset" index-as="index">
351   - <paper-item id="{{index}}" on-tap="_datasourceSelected">{{dataset.name}}</paper-item>
352   - </template>
353   - </paper-menu>
354   - </paper-dropdown-menu>
355   - <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>
356   - </div>
357   -
358   - <div><img src="static/images/or.png" style="position: relative;left: 50%;padding-top:20px"></div>
359   -
360   - <div class="card-content">
361   - <paper-textarea class="custom_textarea" id="data_url" label="Dataset api data url" floatingLabel value="{{dataUrl}}" on-dragover="_handleDatasourceDragOver"></paper-textarea>
362   - </div>
363   -
364   -
365   - </div>
366   - <!--<div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div>-->
367   - <div>
368   - <datasetexplorer-datalet class="datasetexplorer" data-url="/openwall/api/datasetTree" fields='["result,provider_name","result,organization_name","result,package_name","result,resource_name","result,url","result,w"]'></datasetexplorer-datalet>
369   - </div>
370   - <div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div>
371   - </iron-pages>
372   - </paper-material>
373   -
374   - </div>
375   -
376   - </neon-animatable>
377   -
378   - <neon-animatable>
379   -
380   - <div class="vertical justified layout">
381   -
382   - <div class="horizontal layout">
383   - <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>
384   - <div class="avatar">2</div>
385   - <div class="title flex">
386   - <div id="toolbar_title" class="big">Dataset source</div>
387   - <div id="toolbar_description" class="small">Select the fields you want to use for visualization from tree on the right side. The table on the left side will show you the values related to the selected fields.</div>
388   - </div>
389   - <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button>
390   - </div>
391   -
392   - <div class="horizontal layout">
393   -
394   - <!--<paper-material elevation="2" id="fields_placeholder" class="area_container flexchild" style="min-width:300px">-->
395   - <!--<tree-view-controllet id="fields_treeview" root-name="data" opened-path="result,records"></tree-view-controllet>-->
396   - <!--</paper-material>-->
397   -
398   - <!--<paper-material elevation="2" id="table_fields_container" class="area_container flex2child">-->
399   - <!--<div id="table_component_place_holder"></div>-->
400   - <!--</paper-material>-->
401   -
402   - <!--<paper-material elevation="2" id="fields_placeholder" class="area_container flexchild" style="min-width:300px">-->
403   - <div id="fields_placeholder">
404   - <tree-view-multi-table-controllet id="fields_treeview" root-name="data" opened-path="result,records" data-url={{dataUrl}}></tree-view-multi-table-controllet>
405   - </div>
406   - <!--</paper-material>-->
407   -
408   - </div>
409   -
410   - </div>
411   -
412   - </neon-animatable>
413   -
414   - <neon-animatable>
415   -
416   - <div class="vertical justified layout">
417   -
418   - <div class="horizontal layout">
419   - <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>
420   - <div class="avatar">3</div>
421   - <div class="title flex">
422   - <div id="toolbar_title" class="big">Data mapping</div>
423   - <div id="toolbar_description" class="small">Select the visualization by clicking on the button(a window will appear with all available visualization).After, drag and drop the selected fields into datalet parameters area. A preview will be shown on the right side.</div>
424   - </div>
425   - <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button>
426   - </div>
427   -
428   -
429   - <div class="horizontal layout">
430   -
431   - <div class="">
432   - <paper-material elevation="0" id="visualization_slider_area"></paper-material>
433   - <paper-material elevation="2" id="fields_mapping_area" class="area_container">
434   -
435   - <div id="selectedFields_main_container" class="field-mapping-card">
436   - <div class="title">
437   - <div class="medium">Selected fields</div>
438   - </div>
439   - <paper-material elevation="2" id="selectedFields_container" class="area_container"></paper-material>
440   - </div>
441   -
442   - <div id="idm_fields_main_container" class="field-mapping-card">
443   - <div class="title">
444   - <div class="medium">Datalet fields</div>
445   - </div>
446   - <paper-material elevation="2" id="datalet_idm_fields_container" class="area_container"></paper-material>
447   - </div>
448   - </paper-material>
449   - </div>
450   -
451   - <div id="datalet_placeholder"></div>
452   -
453   - </div>
454   -
455   - </div>
456   -
457   - </neon-animatable>
  17 + <template>
458 18  
459   - <neon-animatable>
460   - <div class="vertical justified layout">
  19 + <page-slider-controllet id="slider">
461 20  
462   - <div class="horizontal layout">
463   - <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>
464   - <div class="avatar">4</div>
465   - <div class="title flex">
466   - <div id="toolbar_title" class="big">Finalize visualization</div>
467   - <div id="toolbar_description" class="small">Assign the values for layout parameters (e.g. title for you visualization) and look at the final visualization. You can also add a comment if you are in the private room. </div>
468   - </div>
469   - <paper-icon-button id="finish_button" on-click="_onFinish" icon="add-circle" alt="Conforms the creation" title="finish"></paper-icon-button>
470   - </div>
  21 + <neon-animatable>
471 22  
472   - <div class="horizontal layout">
473   - <div style="margin-top: 10px;">
474   - <div class="title">
475   - <div class="medium">Layout fields</div>
476   - </div>
477   - <paper-material elevation="2" id="idm_layout_main_container" class="area_container">
478   - <paper-material elevation="2" id="idm_layout_container" class="area_container"></paper-material>
479   - </paper-material>
  23 + <dataset-selection-controllet id="dataset_selection" datasets={{datasets}}></dataset-selection-controllet>
480 24  
481   - <div id="comment">
482   - <paper-textarea class="custom_textarea" id="commentArea" label="Max 100 characters comment" maxlength="100"></paper-textarea>
483   - </div>
  25 + </neon-animatable>
484 26  
485   - </div>
  27 + <neon-animatable>
486 28  
487   - <div id="datalet_placeholder_2" style="min-width: 45%;margin-top: 10px;"></div>
  29 + <tree-view-multi-table-controllet id="tree_view_multi_table" root-name="data" opened-path="result,records" data-url={{dataUrl}}></tree-view-multi-table-controllet>
488 30  
489   - </div>
490   - </div>
  31 + </neon-animatable>
491 32  
492   - </neon-animatable>
  33 + <neon-animatable>
493 34  
494   - </neon-animated-pages>
  35 + <datalet-selection-controllet id="datalet_selection" deep-url={{deepUrl}} datalets-list-url={{dataletsListUrl}} data-url={{dataUrl}} fields={{fields}}></datalet-selection-controllet>
495 36  
496   - <paper-toast id="message" text=""></paper-toast>
  37 + </neon-animatable>
497 38  
498   - <paper-dialog id="infoDialog">
499   - <h2 id="infoDialogTitle"></h2>
500   - <paper-dialog-scrollable id="infoDialogContent">
501   - </paper-dialog-scrollable>
502   - </paper-dialog>
  39 + </page-slider-controllet>
503 40  
504   - </content>
505 41 </template>
506 42  
507   - <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
508   - <script src="../../../DEEPCLIENT/js/deepClient.js"></script>
509   -
510 43 <script>
511 44  
512 45 Polymer({
513 46  
514 47 is : 'data-sevc-controllet',
515 48  
516   - /**
517   - * Received when the user selects a datalet from slider.
518   - *
519   - * @event items-list-controllet_item-selected
520   - */
521   -
522   - /**
523   - * Received when the user drags a selected fields in to one of the source input data model field
524   - *
525   - * @event draggable-element-controllet_content-dragged
526   - */
527   -
528   - /**
529   - * Received when the user selects one field from treeview controllet
530   - *
531   - * @event treeview-controllet-fileds-selected
532   - */
533   -
534   - /**
535   - * Received when the user drags a selected fields in to one of the source input data model field
536   - *
537   - * @event draggable-element-controllet_content-dragged
538   - */
539   -
540   - /**
541   - * Received when the user change text value of the selected datalet layout inputs
542   - *
543   - * @event text-element-controllet_content-changed
544   - */
545   -
546   - /**
547   - * Fired when the user press to finish button. At this event are attached all information about the visualization currently created
548   - *
549   - * @event data-sevc-controllet.dataletCreated
550   - */
551   -
552 49 listeners : {
553   - 'items-list-controllet_item-selected' : '_dataletSelected',
554   - 'draggable-element-controllet_content-dragged' : '_fieldsMapped',
555   - 'tree-view-controllet_selected-fields' : '_fieldsSelected',
556   - 'text-element-controllet_content-changed' : '_textElementChanged',
557   - 'datasetexplorer-datalet_data-url': '_selectDataUrl_treeMap'
  50 + 'page-slider-controllet_selected' : '_updateSlider',
  51 + 'dataset-selection-controllet_data-url' : '_updateDataUrl'
558 52 },
559 53  
560 54 properties : {
561 55  
562   - entryAnimation : {
563   - type : String,
564   - value : ""
565   - },
566   -
567   - exitAnimation : {
568   - type : String,
569   - value : ""
570   - },
571   -
572   - selected : {
573   - type : Number,
574   - value : 0
575   - },
576   -
577   - /**
578   - * It represents the data url from CKAN api
579   - *
580   - * @attribute dataUrl
581   - * @type string
582   - * @default 'null'
583   - */
584   - dataUrl : {
585   - type : String,
586   - value : undefined,
587   - observer : '_dataUrlChanged'
588   - },
589   - /**
590   - * It represents the DEEP url to get information about the datalets
591   - *
592   - * @attribute deepUrl
593   - * @type string
594   - * @default 'null'
595   - */
596 56 deepUrl : {
597 57 type : String,
598 58 value : undefined
599 59 },
600   - /**
601   - * It's used to store the list of datalets returned from DEEP
602   - *
603   - * @attribute datalets_list
604   - * @type Array
605   - * @default empty
606   - */
607   - datalets_list : {
608   - type : Array ,
609   - value : []
610   - },
611   - /**
612   - * It's used to store the selected datalet. It will be set when the controllet get the event of selection by item slider (items-list-controllet_item-selected)
613   - *
614   - * @attribute selectedDatalet
615   - * @type String
616   - * @default ''
617   - */
618   - selectedDatalet : {
619   - type : String,
  60 +
  61 + dataletsListUrl : {
  62 + type : String ,
620 63 value : undefined
621 64 },
622   - /**
623   - * It's used to store the list of selected fields by user
624   - *
625   - * @attribute selectedFields
626   - * @type Array
627   - * @default empty
628   - */
629   - selectedFields : {
  65 +
  66 + datasets : {
630 67 type : Array,
631 68 value : undefined
632 69 },
633   - /**
634   - * It contains all attributes for the datalet preset. It'll be used when the controllet is called to modify an exsting datalet.
635   - */
636   - dataletPreset:{
637   - type: Object,
638   - value: undefined
639   - },
640   - /**
641   - * It's used to store the params to give to datalet. This kind of params will not processed by selection step
642   - *
643   - * @attribute paramsFields
644   - * @type Object
645   - * @default empty
646   - */
647   - paramsFields:{
648   - type: Object,
649   - value: undefined
650   - },
651   - /**
652   - * It's used to store the tab index in the first pass
653   - *
654   - * @attribute DatasourceTabSelected
655   - * @type Number
656   - * @default 0
657   - */
658   - DatasourceTabSelected : {
659   - type : Number,
660   - value : 0
661   - },
662   - /**
663   - * It's used to store the datasets to show in the contexual menu
664   - *
665   - * @attribute datasets
666   - * @type Array
667   - * @default empty
668   - */
669   - datasets :
670   - {
671   - type : Array,
672   - value : []
673   - }
674   - },
675   - /**
676   - * 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.
677   - * In this phase the scrollbar will be initialized
678   - *
679   - * @method handleResponseData
680   - *
681   - * @param {Event} e
682   - */
683   -
684   - ready : function(){
685   -
686   -// $(this.$.fields_placeholder).perfectScrollbar();
687   - $(this.$.selectedFields_main_container).perfectScrollbar();
688   - $(this.$.idm_fields_main_container).perfectScrollbar();
689   - $(this.$.idm_layout_main_container).perfectScrollbar();
690   - $(this.$.table_fields_container).perfectScrollbar();
691   -
692   - if(this.dataletPreset != undefined) {
693   - this.$.data_url.value = this.dataletPreset['data-url'];
694   - this.selected = 1;
695   - }
696   -
697   - //Fiefox force :O
698   - var table_params ={
699   - component : "datatable-datalet",
700   - params :{
701   - 'data-url' : this.dataUrl
702   - },
703   - fields : [],
704   - placeHolder : this.$.table_component_place_holder
705   - };
706   -
707   - ComponentService.deep_url = this.deepUrl;
708   - ComponentService.getComponent(table_params);
709   - },
710   - /**
711   - * Utility function to inject datalet in a placeholder
712   - */
713   - injectDatalet: function(place_holder){
714   -
715   - var datalet_params ={
716   - component : this.selectedDatalet,
717   - params : this.paramsFields,
718   - fields : this.selectedFields,
719   - placeHolder : place_holder
720   - };
721   - ComponentService.deep_url = this.deepUrl;
722   - ComponentService.getComponent(datalet_params);
723   - },
724   -
725   - /**
726   - * Callback to parse the data requested when dataUrl change its value
727   - *
728   - * @method handleResponseData
729   - *
730   - * @param {Event} e
731   - */
732   - handleResponseData : function(e){
733   - this.$.fields_treeview.setAttribute("json-data", JSON.stringify(e.detail.response));
734   - this.$.fields_treeview.setAttribute("preselected-fields", JSON.stringify(this.selectedFields));
735   - this.$.fields_treeview.ready();//chrome
736   - },
737   -
738   - /**
739   - * Callback to parse the components response object
740   - *
741   - * @method handleResponseDatalets
742   - *
743   - * @param {Event} e
744   - */
745   - handleResponseDatalets : function(e){
746   - this.datalets_list = new Array();
747   - for(var i=0;i < e.detail.response.length;i++){
748   - var datalet_info = { name : e.detail.response[i].name ,
749   - image : e.detail.response[i].url + e.detail.response[i].name + ".png"
750   - };
751   -
752   - this.datalets_list.push(datalet_info);
753   - }
754   -
755   - if(this.selectedDatalet == undefined)
756   - this.$.visualization_slider_area.innerHTML = '<animated-button-container-controllet height="300" width="450" icon="assessment" icon-width="64" icon-height="64" background-button-color="#2196F3">' +
757   - '<items-list-controllet' +
758   - ' replace-string="-datalet"' +
759   - ' items=\'' + JSON.stringify(this.datalets_list) + '\'>' +
760   - '</items-list-controllet>' +
761   - '</animated-button-container-controllet>';
762   - else
763   - this.$.visualization_slider_area.innerHTML = '<animated-button-container-controllet height="300" width="450" icon="assessment" icon-width="64" icon-height="64" background-button-color="#2196F3">' +
764   - '<items-list-controllet' +
765   - ' replace-string="-datalet"' +
766   - ' selected-card=\'' + this.selectedDatalet + '\'' +
767   - ' items=\'' + JSON.stringify(this.datalets_list) + '\'>' +
768   - '</items-list-controllet>' +
769   - '</animated-button-container-controllet>';
770   -
771   - },
772   - /**
773   - * 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,
774   - * to allow user to drag the fields, from the selected fields box, and create a new visualization.
775   - *
776   - * @method handleSelectedDatalet
777   - *
778   - * @param {Event} e
779   - */
780   - handleSelectedDatalet : function(e){
781   -
782   - var response = e.detail.response;
783   - this.$.datalet_idm_fields_container.innerHTML = "";
784   - this.$.idm_layout_container.innerHTML = "";
785   -
786   - var input;
787   - var layouts = jQuery.extend(true, {}, response.idm.inputs.layouts);
788   -
789   - if(response.idm.inputs.input.constructor == Object) {
790   - if(response.idm.inputs.input.selection == "*")
791   - {
792   - var fields = this.$.selectedFields_container.querySelectorAll('draggable-element-controllet');
793   - input = response.idm.inputs.input;
794   - response.idm.inputs.input = new Array();
795   - for(var i=0;i<fields.length;i++){
796   - var newInput = jQuery.extend(true, {}, input);
797   - newInput.name = input.name + ' ' + (i + 1);
798   - response.idm.inputs.input.push(newInput);
799   - }
800   - }
801   - }
802   -
803   - var heading;
804   - var id;
805   -
806   - for(var i =0; i < response.idm.inputs.input.length; i++) {
807   - var html = '<draggable-element-controllet is-target="true" ';
808   - input = response.idm.inputs.input[i];
809   -
810   - heading = ' heading="' + input.name + '"';
811   - id = ' id="' + (i + 1) + '"';
812   -
813   - html += heading + id;
814   - html += ' description="' + input.description + '"' +
815   - ' number="' + (i + 1) + '"';
816   -
817   - if(this.selectedFields != undefined) {
818   - if(this.selectedFields[i] != undefined) {
819   - html += ' value="' + this.selectedFields[i] + '"' +
820   - ' label="' + this.selectedFields[i].split(",")[this.selectedFields[i].split(",").length - 1] + '"';
821   - }
822   - }
823   -
824   - html += '></draggable-element-controllet>';
825   - this.$.datalet_idm_fields_container.innerHTML += html;
826   -
827   - }
828 70  
829   - if(layouts.input != undefined) {
830   - if(layouts.input.constructor == Object){
831   - layouts.input = new Array(jQuery.extend(true, {}, layouts.input));
832   - }
833   -
834   - html = '<text-element-controllet ';
835   - for (var i = 0; i < layouts.input.length; i++) {
836   - html += '<text-element-controllet heading="' + layouts.input[i].name + '" ' +
837   - 'description="' + layouts.input[i].description + '" ' +
838   - 'number="' + (i + 1) + '" ';
839   - if(this.dataletPreset != undefined){
840   - html += 'value="' + this.dataletPreset[Object.keys(this.dataletPreset)[(i + 1)]] + '"';
841   - }
  71 + dataUrl : {
  72 + type : String,
  73 + value : undefined
  74 + },
842 75  
843   - html += '></text-element-controllet>';
844   - }
845   - this.$.idm_layout_container.innerHTML = html;
  76 + jsonData : {
  77 + type : Object,
  78 + value : undefined
846 79 }
847 80  
848   - if(this.selectedFields != undefined) this.generateDataletPreview();
849   -
850 81 },
851   - /**
852   - * Generate the datalet preview when user mapped fields. it even retrieves the value of layout inputs values.
853   - *
854   - * @method generateDataletPreview
855   - */
856   - generateDataletPreview : function(){
857   -
858   - var input_mapped_fields = this.$.datalet_idm_fields_container.querySelectorAll('draggable-element-controllet[is-target=true]');
859   - this.selectedFields = Array();
860   -
861   - for (var i = 0; i < input_mapped_fields.length; i++) {
862   - if (input_mapped_fields[i].value != "") {
863   - this.selectedFields.push(input_mapped_fields[i].value);
864   - }
865   - }
866   -
867   - var input_layouts_fields = this.$.idm_layout_container.querySelectorAll('text-element-controllet');
868   - this.paramsFields = {'data-url' : this.dataUrl};
869   -
870   - for (var i = 0; i < input_layouts_fields.length; i++) {
871   - if (input_layouts_fields[i].value != "") {
872   - this.paramsFields[input_layouts_fields[i].heading] = input_layouts_fields[i].value;
873   - }
874   - }
875   -
876   - this.injectDatalet(this.$.datalet_placeholder);
877 82  
  83 + ready : function(){
878 84 },
879   - /**
880   - * Validate the current pass in order to access to next one.
881   - *
882   - * @method validateCurrentPass
883   - *
884   - * @param {Number} next_selected_pass
885   - */
886   - validateCurrentPass : function(next_selected_pass){
887 85  
888   - switch(next_selected_pass){
  86 + _updateSlider : function(e){
  87 + switch (e.detail.selected) {
889 88 case 0:
890   - this.$.data_url.value = "";
891   - this.$.fields_treeview.setAttribute("json-data", null);
892   - this.$.fields_treeview.setAttribute("preselected-fields", null);
893   - this.$.fields_treeview.ready();//chrome
894   - return true;
  89 + slider.setTitle("SELECT DATASET", "Search or copy and paste the url of dataset.");
  90 + slider.chevronLeft(false);
  91 + slider.chevronRight(false);
  92 + this.$.dataset_selection._fireDataUrl();
  93 +// http://designpieces.com/palette/google-new-logo-2015-color-palette-hex-and-rgb/
  94 + break;
895 95 case 1:
896   - var x = this.$.fields_treeview.getAttribute("json-data");
897   - if(this.$.data_url.value == undefined || this.$.fields_treeview.getAttribute('json-data') == "null" || this.$.fields_treeview.getAttribute('json-data') == null){
898   - this.$.message.text = "You have to select a dataset to access to pass 2. It's possible that the data you selected are not available.";
899   - this.$.message.show();
900   - return false;
901   - }else{
902   - return true;
903   - }
904   -
  96 + slider.setTitle("SELECT FIELDS", "Select the fields from tree-view. The multi-table will show the values related to the selected fields.");
  97 +// slider.chevronRight(false);
  98 + this.$.tree_view_multi_table.ready();
  99 + break;
905 100 case 2:
906   - if(this.selectedFields == undefined || this.selectedFields.length == 0){
907   - this.$.message.text = "You have to select a set of fields to access to pass 3.";
908   - this.$.message.show();
909   - return false;
910   - }else{
911   - this.$.datalet_placeholder_2.innerHTML = "";
912   - if(this.selectedDatalet != undefined) this.injectDatalet(this.$.datalet_placeholder);
913   - return true;
914   - }
915   - case 3:
916   - if(this.paramsFields == undefined){
917   - this.$.message.text = "You have to select a datalet and map the selected fields to datalets fields(by drag and drop) to access to pass 4.";
918   - this.$.message.show();
919   - return false;
920   - }else{
921   - this.$.datalet_placeholder.innerHTML = "";
922   - this.injectDatalet(this.$.datalet_placeholder_2);
923   - return true;
924   - }
  101 + slider.setTitle("SELECT DATALET", "Select a visualization, fill out inputs and labels (optional).");
  102 + slider.chevronRight(false);
  103 + this.$.datalet_selection.setFields(tree_view_multi_table.getFlatFields());//???
  104 + this.$.datalet_selection.ready();//???
925 105 }
926   -
927   - },
928   - /**
929   - * Callback for manage the previous pass button
930   - *
931   - * @method _onPrevClick
932   - *
933   - */
934   - _onPrevClick : function() {
935   - if(!this.validateCurrentPass(this.selected === 0 ? 0 : (this.selected - 1))) return;
936   -
937   - this.entryAnimation = 'slide-from-left-animation';
938   - this.exitAnimation = 'slide-right-animation';
939   - this.selected = this.selected === 0 ? 0 : (this.selected - 1);
940   - },
941   - /**
942   - * Callback to manage the next pass button
943   - *
944   - * @method _onNextClick
945   - *
946   - */
947   - _onNextClick : function() {
948   -
949   - if(!this.validateCurrentPass(this.selected === 3 ? 3 : (this.selected + 1))) return;
950   -
951   - this.entryAnimation = 'slide-from-right-animation';
952   - this.exitAnimation = 'slide-left-animation';
953   - this.selected = this.selected === 3 ? 3 : (this.selected + 1);
954   - },
955   - /**
956   - * Callback to manage InfoButton click to give user information about the selected dataset
957   - *
958   - */
959   - _onInfoClick : function(){
960   -
961   - this.$.infoDialog.open();
962   -
963 106 },
964   - /**
965   - * Callback related to datasource selection from select menu
966   - *
967   - * @method _datasourceSelected
968   - *
969   - * @param {Event} e
970   - */
971   - _datasourceSelected : function(e){
972 107  
973   - this.$.data_url.value = this.datasets[parseInt(e.target.id)].url;
974   - this.$.infoDialogTitle.innerHTML = this.datasets[parseInt(e.target.id)].name;
975   - this.$.infoDialogContent.innerHTML = this.datasets[parseInt(e.target.id)].description;
  108 + _updateDataUrl : function(e){
  109 + this.dataUrl = e.detail.url;
976 110  
977   - },
978   - /**
979   - * Callback related to data url change
980   - *
981   - * @method _dataUrlChanged
982   - *
983   - * @param {Event} e
984   - */
985   - _dataUrlChanged : function(newValue, oldValue){
986   - this.$.data_request.generateRequest();
987   - },
988   - /**
989   - * Callback related to event 'items-slider-controllet_item-selected' fired by items-slider-controllet when the user selects a datalet
990   - *
991   - * @method _dataletSelected
992   - *
993   - * @param {Event} e
994   - */
995   - _dataletSelected : function(e){
996   - this.selectedDatalet = e.detail.datalet;
997   - this.$.selectedDatalet_request.url = this.deepUrl + e.detail.datalet;
998   - this.$.selectedDatalet_request.generateRequest();
999   -
1000   - },
1001   - /**
1002   - * Callback related to event 'treeview-controllet-fileds-selected' fired by treeview-controllet when the user selects a field
1003   - *
1004   - * @method _fieldsSelected
1005   - *
1006   - * @param {Event} e
1007   - */
1008   - _fieldsSelected : function(e){
1009   -
1010   - this.selectedFields = e.detail.fields;
1011   - this.$.selectedFields_container.innerHTML = "";
1012   - for(var i=0;i<e.detail.fields.length;i++) {
1013   - this.$.selectedFields_container.innerHTML += '<draggable-element-controllet identifier="' + e.detail.fields[i] +
1014   - '" label="' + e.detail.fields[i].split(",")[e.detail.fields[i].split(",").length -1] +
1015   - '"></draggable-element-controllet><br>';
1016   - }
1017   -
1018   - var table_params ={
1019   - component : "datatable-datalet",
1020   - params :{
1021   - 'data-url' : this.dataUrl
  111 + $.ajax({
  112 + url: e.detail.url,
  113 + dataType: "json",
  114 + success: function(data){
  115 +// this.dataUrl = e.detail.url
  116 +// this.jsonData = JSON.stringify(data);
  117 + slider.chevronRight(true);
1022 118 },
1023   - fields : e.detail.fields,
1024   - placeHolder : this.$.table_component_place_holder
1025   - };
1026   -
1027   - ComponentService.deep_url = this.deepUrl;
1028   - ComponentService.getComponent(table_params);
1029   -
1030   -
1031   - },
1032   - /**
1033   - * 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
1034   - *
1035   - * @method _fieldsMapped
1036   - *
1037   - * @param {Event} e
1038   - */
1039   - _fieldsMapped : function(e){
1040   -
1041   - this.generateDataletPreview();
1042   -
1043   - },
1044   - /**
1045   - * Callback related to event 'text-element-controllet_content-changed' fired by text-element-controllet when the user change the value of text
1046   - *
1047   - * @method _textElementChanged
1048   - *
1049   - * @param {Event} e
1050   - */
1051   - _textElementChanged : function(e){
1052   - if(this.selected == 3) {
1053   - this.generateDataletPreview();
1054   - this.$.datalet_placeholder.innerHTML = "";
1055   - this.injectDatalet(this.$.datalet_placeholder_2);
1056   - }
1057   - },
1058   - /**
1059   - * Callback related to the drag operation in the dataUrl input area. It's used to delete previous value.
1060   - *
1061   - * @method _handleDatasourceDragOver
1062   - *
1063   - * @param {Event} e
1064   - */
1065   - _handleDatasourceDragOver : function(e){
1066   - this.$.data_url.value = "";
1067   - },
1068   - /**
1069   - * Callback related to the finish button.
1070   - *
1071   - * @method _onFinish
1072   - *
1073   - * @param {Event} e
1074   - */
1075   - _onFinish : function(e){
1076   -
1077   - if((this.selectedFields.length == 0) || this.selectedDatalet == ""){
1078   - this.$.message.text = "You have to map the selected fields with datalets fields(by dragging) and select a datalet to export a new visualization.";
1079   - this.$.message.show();
1080   - return;
1081   - }
1082   -
1083   - var data = {
1084   - dataUrl : this.dataUrl,
1085   - params : this.paramsFields,
1086   - fields : this.selectedFields,
1087   - datalet : this.selectedDatalet,
1088   - comment : this.$.commentArea.value,
1089   - staticData : JSON.stringify(this.$.datalet_placeholder_2.children[1].behavior.data)
1090   - }
1091   -
1092   - this.fire('data-sevc-controllet.dataletCreated', {data : data});
1093   -
1094   - },
1095   -
1096   - //tree map
1097   - _selectDataUrl_treeMap : function(e){
1098   - var url = e.detail.url;
1099   -// url = url.split('/');
1100   -// var index = url.indexOf('resource')
1101   -// if (index != -1) { // ckan
1102   -// var resourceId = url[index + 1];
1103   -// url = "http://ckan.routetopa.eu/api/action/datastore_search?resource_id=" + resourceId;
1104   -//
1105   -// } else
1106   -// url = "sorry, data provider not supported yet";
1107   -
1108   - this.dataUrl = url;
1109   - this.DatasourceTabSelected=0;
1110   - },
  119 + error: function(){
  120 +// this.jsonData = undefined;
  121 + slider.chevronRight(false);
  122 + }
  123 + });
  124 + }
1111 125  
1112 126 });
1113 127  
... ...
controllets/datalet-selection-controllet/datalet-selection-controllet.html
  View file @0f6424f
... ... @@ -16,7 +16,7 @@
16 16  
17 17 <link rel="import" href="../items-vslider-controllet/items-vslider-controllet.html" />
18 18  
19   -<link rel="import" href="../../datalets/datatable-datalet/datatable-datalet.html" />
  19 +<script src="../../../DEEPCLIENT/js/deepClient.js"></script>
20 20  
21 21 <dom-module id="datalet-selection-controllet">
22 22  
... ... @@ -28,6 +28,7 @@
28 28 display: flex;
29 29 font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
30 30 font-size: 16px;
  31 + margin-top: 8px;
31 32 }
32 33  
33 34 #datalet_selection_inputs {
... ... @@ -145,9 +146,13 @@
145 146 paper-button:hover {
146 147 background-color: #00AABF;
147 148 }
  149 +
  150 + paper-button[disabled] {
  151 + background-color: #B6B6B6;
  152 + }
148 153 </style>
149 154  
150   - <iron-ajax id="selectedDatalet_request" on-response="handleSelectedDatalet"></iron-ajax>
  155 + <iron-ajax id="selectedDatalet_request" on-response="_handleSelectedDatalet"></iron-ajax>
151 156  
152 157 <div id="datalet_selection_container">
153 158 <items-vslider-controllet datalets-list-url={{dataletsListUrl}}></items-vslider-controllet>
... ... @@ -165,7 +170,7 @@
165 170 </div>
166 171 <paper-dropdown-menu no-label-float label={{item.name}}>
167 172 <paper-menu class="dropdown-content">
168   - <template is="dom-repeat" items={{fields}}>
  173 + <template is="dom-repeat" items={{selectableFields}}>
169 174 <paper-item id={{index}} on-tap="_loadDatalet">{{item}}</paper-item>
170 175 </template>
171 176 </paper-menu>
... ... @@ -193,7 +198,7 @@
193 198 <div id="datalet_selection_column">
194 199 <paper-material id="datalet_selection_comment" elevation="5">
195 200 <div class="input_header">COMMENT</div>
196   - <paper-textarea no-label-float label="comment (max 100 characters)"></paper-textarea>
  201 + <paper-textarea id="comment" no-label-float maxlength="100" label="comment (max 100 characters)"></paper-textarea>
197 202 </paper-material>
198 203  
199 204 <paper-material id="datalet_selection_datalet" elevation="5">
... ... @@ -202,7 +207,7 @@
202 207  
203 208 </paper-material>
204 209  
205   - <paper-button raised>ADD DATALET</paper-button>
  210 + <paper-button id="add_button" disabled raised on-click="_addDatalet">ADD DATALET</paper-button>
206 211  
207 212 </div>
208 213  
... ... @@ -245,18 +250,29 @@
245 250  
246 251 fields : {
247 252 type : Array,
248   - value : ["result,records,Lat","result,records,Lng"]
  253 + value : []
  254 + },
  255 +
  256 + selectedFields : {
  257 + type : Array,
  258 + value : []
  259 + },
  260 +
  261 + selectableFields : {
  262 + type : Array,
  263 + value : []
249 264 },
250 265  
251 266 dataUrl : {
252 267 type : String,
253   - value : " http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52&amp;limit=10000"
  268 + value : undefined
254 269 }
255 270  
256 271 },
257 272  
258 273 listeners: {
259 274 'items-vslider-controllet_selected-datalet': '_dataletSelected'
  275 +// 'tree-view-controllet_selected-fields': '_updateSelectedFields'
260 276 },
261 277  
262 278 ready : function() {
... ... @@ -264,6 +280,8 @@
264 280 $(this.$.datalet_selection_inputs).perfectScrollbar();
265 281 $(this.$.datalet_selection_labels).perfectScrollbar();
266 282 $(this.$.datalet_selection_datalet).perfectScrollbar();
  283 +
  284 + this.selectableFields = this._copy(this.fields);
267 285 },
268 286  
269 287 attached : function() {
... ... @@ -272,26 +290,68 @@
272 290 window.addEventListener("resize", function() { that._resize(); });
273 291 },
274 292  
  293 + setFields : function(fields) {
  294 + this.fields = fields;
  295 + },
  296 +
  297 + _loadPreview : function() {
  298 +// if(!this.selectedDatalet)
  299 +// return false;//delete load
  300 +//
  301 +// for(var i in this.inputs){
  302 +// console.log(this.inputs[i]);
  303 +// }
  304 +//
  305 +//
  306 +// var inputs = document.getElementsByClassName("prova");
  307 +// console.log(inputs);
  308 +//
  309 +// return true;
  310 + },
  311 +
  312 +// _updateSelectedFields : function(e) {//////male male
  313 +// console.log(e.detail);
  314 +// console.log("ciao");
  315 +// },
  316 +
275 317 _dataletSelected : function(e){
  318 + this.$.add_button.setAttribute("disabled", "true");
  319 +
276 320 this.selectedDatalet = e.detail.datalet;
  321 + this.inputs = [];
  322 + this.labels = [];
  323 +
277 324 if(this.selectedDatalet){
278 325 this.$.selectedDatalet_request.url = this.deepUrl + e.detail.datalet + "-datalet";
279 326 this.$.selectedDatalet_request.generateRequest();
280 327 }
281   - else
282   - this.inputs = []
  328 +// else {
  329 +// this.inputs = [];
  330 +// this.labels = [];
  331 +// }
  332 +
  333 + this.$.datalet_selection_datalet_placeholder.innerHTML = "";
  334 + this.selectedFields = [];
  335 +
  336 +// this.async(function(){this._loadPreview();}, 1000);
  337 + this._loadPreview();
283 338 },
284 339  
285   - handleSelectedDatalet : function(e){
  340 + _handleSelectedDatalet : function(e){
  341 +
  342 +
  343 +// console.log(e.detail.response.idm.inputs);
286 344 // console.log(e.detail.response.idm.inputs.layouts.input);
287 345 var inputs = e.detail.response.idm.inputs.input;
288 346 var labels = e.detail.response.idm.inputs.layouts.input;
289 347  
290 348 if(inputs.constructor == Object) {//not Array && inputs.input.selection == "*"
291 349 var name = inputs.name;
  350 + var description = inputs.description;
  351 + var selection = inputs.selection;
292 352 inputs = [];
293 353 for(var i in this.fields)
294   - inputs.push({name: name + " " + i});
  354 + inputs.push({name: name + " " + i, description: description, selection: selection});
295 355  
296 356 }
297 357  
... ... @@ -299,15 +359,83 @@
299 359 this.labels = labels;
300 360 },
301 361  
302   - _loadDatalet : function(){
303   -// this.$.datalet_selection_datalet_placeholder.innerHTML = "<datatable-datalet data-url=\""+this.dataUrl+"\" fields='[\"result,records,Lat\",\"result,records,Lng\"]'></datatable-datalet>";
304   - this.$.datalet_selection_datalet_placeholder.innerHTML = "<datatable-datalet data-url=\"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52&amp;limit=10000\" fields='[\"result,records,Lat\",\"result,records,Lng\"]'>we";
  362 + _copy : function(o) {
  363 + var out, v, key;
  364 + out = Array.isArray(o) ? [] : {};
  365 + for (key in o) {
  366 + v = o[key];
  367 + out[key] = (typeof v === "object") ? this._copy(v) : v;
  368 + }
  369 + return out;
  370 + },
  371 +
  372 + _loadDatalet : function(e){
  373 + var selectedFields = this._copy(this.selectedFields);
  374 +// var selectableFields = this._copy(this.selectableFields);
  375 +
  376 + if($(e.target).parents("paper-dropdown-menu")[0].selectedItem) {
  377 + var prevSelected = $(e.target).parents("paper-dropdown-menu")[0].selectedItem.innerText;
  378 + var index = this.selectedFields.indexOf(prevSelected);
  379 + selectedFields.splice(index, 1);
  380 +// selectableFields.push(prevSelected);
  381 + }
  382 +
  383 + var selected = e.target.innerText;
  384 +// var index = this.selectableFields.indexOf(selected);
  385 +// selectableFields.splice(index, 1);
  386 + selectedFields.push(selected);
  387 +
  388 + this.selectedFields = selectedFields;
  389 +// this.selectableFields = selectableFields;
  390 +
  391 +// console.log(this.selectedFields);
  392 +// console.log(this.selectableFields);
  393 +
  394 + var load = false;
  395 + if(this.selectedFields.length > 0 && this.inputs[0].selection == "*")
  396 + load = true;
  397 + else if(this.selectedFields.length == this.inputs.length)
  398 + load = true;
  399 +
  400 + if(load){
  401 + var params = {'data-url' : this.dataUrl};
  402 +
  403 + var dataletParams ={
  404 + component : this.selectedDatalet+"-datalet",
  405 + params : params,
  406 + fields : this.selectedFields,
  407 + placeHolder : datalet_selection_datalet_placeholder
  408 + };
  409 +
  410 + ComponentService.deep_url = this.deepUrl;
  411 + ComponentService.getComponent(dataletParams);
  412 +
  413 + this.async(function(){this.$.add_button.removeAttribute("disabled");}, 1111);
  414 + }
  415 +
  416 +// this.$.datalet_selection_datalet_placeholder.innerHTML = "<datatable-datalet data-url=\"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52&amp;limit=10000\" fields='[\"result,records,Lat\",\"result,records,Lng\"]'>we";
  417 +// this.$.datalet_selection_datalet_placeholder.innerHTML = "<"+this.selectedDatalet+"-datalet data-url=\""+this.dataUrl+"\" fields='"+JSON.stringify(this.fields)+"'></"+this.selectedDatalet+">";
305 418  
306 419 // $("#base_datalet_container").html("");
307 420 $("#base_datalet_container").css('visibility','hidden');
308 421 $("#base_datalet_container").css('padding','0px');
309 422 $("#base_datalet_container").css('height','0px');
310 423 // console.log($("#base_datalet_container"));
  424 + },
  425 +
  426 + _addDatalet : function(){console.log("we");
  427 +
  428 + var data = {
  429 + dataUrl : this.dataUrl,
  430 +// params : this.paramsFields,
  431 + params : {'data-url' : this.dataUrl},
  432 + fields : this.selectedFields,
  433 + datalet : this.selectedDatalet+"-datalet",
  434 + comment : this.$.comment.value,
  435 + staticData : JSON.stringify(this.$.datalet_selection_datalet_placeholder.children[1].behavior.data)
  436 + }
  437 +
  438 + this.fire('data-sevc-controllet.dataletCreated', {data : data});
311 439  
312 440 },
313 441  
... ...
controllets/datalet-selection-controllet/demo/index.html
  View file @0f6424f
... ... @@ -13,6 +13,13 @@
13 13  
14 14 <body>
15 15  
16   -<datalet-selection-controllet deep-url="http://172.16.15.89/DEEalerProvider/DEEP/" datalets-list-url="http://172.16.15.89/DEEalerProvider/DEEP/datalets-list"></datalet-selection-controllet>
  16 +<datalet-selection-controllet deep-url="http://172.16.15.89/DEEalerProvider/DEEP/" datalets-list-url="http://172.16.15.89/DEEalerProvider/DEEP/datalets-list" fields='["result,records,Lat","result,records,Lng"]' data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52&amp;limit=10000"></datalet-selection-controllet>
17 17  
18 18 </body>
  19 +
  20 +<!--urls:-->
  21 +<!--https://yperdiavgeia.gr/analytics/counts/source:Decision/query:linux/method:count_organization.json-->
  22 +<!--http://dati.lazio.it/catalog/api/action/datastore_search?resource_id=114baf3d-6d4f-42ff-b4af-481beef59ae1-->
  23 +<!--url: 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52&limit=5',-->
  24 +<!--url: 'https://data.issy.com/api/records/1.0/search?dataset=liste-des-restaurants-a-issy-les-moulineaux&sort=type&facet=type&facet=terrasse',-->
  25 +<!--url: 'https://data.issy.com/api/records/1.0/search?dataset=flux-rss-des-offres-demplois-a-issy-les-moulineaux&sort=published&facet=published&refine.published=2015',-->
19 26 \ No newline at end of file
... ...
controllets/dataset-selection-controllet/dataset-selection-controllet.html
  View file @0f6424f
... ... @@ -56,12 +56,22 @@
56 56 color: #B6B6B6;
57 57 }
58 58  
59   - paper-dropdown-menu {
  59 + /*paper-dropdown-menu {*/
  60 + /*width: 45%;*/
  61 + /*margin-bottom: 32px;*/
  62 + /*--paper-input-container-focus-color: #2196F3;*/
  63 + /*}*/
  64 +
  65 + paper-input-search {
60 66 width: 45%;
61 67 margin-bottom: 32px;
62 68 --paper-input-container-focus-color: #2196F3;
63 69 }
64 70  
  71 + paper-input-search paper-item {
  72 + white-space: nowrap;
  73 + }
  74 +
65 75 paper-item.iron-selected {
66 76 background-color: #2196F3;
67 77 color: #FFFFFF;
... ... @@ -120,7 +130,7 @@
120 130  
121 131 <paper-tabs selected="{{selected}}" on-tap="_loadTreeMap">
122 132 <paper-tab noink>SELECT DATA SOURCE</paper-tab>
123   - <paper-tab noink>TREE MAP SEARCH</paper-tab>
  133 + <paper-tab noink>TREE MAP VIEW</paper-tab>
124 134 <paper-tab noink disabled>MOST POPULAR</paper-tab>
125 135 </paper-tabs>
126 136  
... ... @@ -129,16 +139,18 @@
129 139 <neon-animatable>
130 140  
131 141 <div id="div_selection">
  142 +
132 143 <paper-input-search label="Available datasets">
133 144 <paper-menu class="dropdown-content">
134   - <template is="dom-repeat" items={{datasets}} as="dataset">
  145 + <template is="dom-repeat" items={{filteredDatasets}} as="dataset">
135 146 <paper-item id={{index}} on-tap="_selectDataUrl">{{dataset.name}}</paper-item>
  147 + <!--<paper-item id={{index}} on-tap="_selectDataUrl">{{_addHTMLSpace(dataset.name)}}</paper-item>-->
136 148 </template>
137 149 </paper-menu>
138 150 </paper-input-search>
139 151  
140 152 <paper-icon-button id="info_button" disabled on-click="_showInfo" icon="info-outline" title="dataset info"></paper-icon-button>
141   -
  153 + <!--aggiustami anche dialog...-->
142 154 <paper-textarea id="selected_url" label="Selected url" value={{dataUrl}}></paper-textarea>
143 155  
144 156 <paper-dialog id="dialog_info">
... ... @@ -182,6 +194,11 @@
182 194 value : undefined
183 195 },
184 196  
  197 + filteredDatasets : {
  198 + type : Array,
  199 + value : []
  200 + },
  201 +
185 202 dataUrl : {
186 203 type : String,
187 204 value : undefined,
... ... @@ -191,7 +208,8 @@
191 208 },
192 209  
193 210 listeners: {
194   - 'datasetexplorer-datalet_data-url': '_selectDataUrl_treeMap'
  211 + 'datasetexplorer-datalet_data-url': '_selectDataUrl_treeMap',
  212 + 'paper-input-search_input-value' : '_filterDatasets'
195 213 },
196 214  
197 215 ready : function(){
... ... @@ -202,6 +220,19 @@
202 220 this._resize();
203 221 var that = this;
204 222 window.addEventListener("resize", function() { that._resize(); });
  223 +
  224 + this.filteredDatasets = this.datasets;
  225 + },
  226 +
  227 + _filterDatasets : function(e){
  228 + var filter = e.detail.inputValue;console.log(filter);
  229 + var filteredDatasets = [];
  230 + for (var i in this.datasets){
  231 + if(this.datasets[i].name.toLowerCase().indexOf(filter.toLowerCase()) != -1)
  232 + filteredDatasets.push(this.datasets[i]);
  233 + }
  234 +
  235 + this.filteredDatasets = filteredDatasets;
205 236 },
206 237  
207 238 _loadTreeMap : function(){
... ... @@ -246,6 +277,10 @@
246 277 this.fire('dataset-selection-controllet_data-url', {url: this.dataUrl});
247 278 },
248 279  
  280 +// _addHTMLSpace : function(name){
  281 +// return name.replace(/ /g, '&nbsp;');
  282 +// },
  283 +
249 284 _resize : function(){
250 285 var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16;
251 286 h = h - 64 - 8; //height with page scroller
... ...
controllets/dataset-selection-controllet/demo/index.html
  View file @0f6424f
... ... @@ -38,6 +38,7 @@
38 38 var dataset2 = {description: "", name: "Klassen", url: "http://ckan.routetopa.eu/api/action/datastore_search?resource_id=dfd27de5-0790-466c-af59-6a82509e7fbb"};
39 39 var dataset3 = {description: "descrizione bellissima purissima levissima sbiricuda antani", name: "Derelict Sites", url: "http://ckan.routetopa.eu/api/action/datastore_search?resource_id=fcbee83e-3d3d-4303-a568-24dd33d02adc"};
40 40 var datasets = [dataset1, dataset2, dataset3];
  41 + var datasets = [dataset1, dataset2, dataset3, dataset1, dataset2, dataset3, dataset1, dataset2, dataset3, dataset1, dataset2, dataset3, dataset1, dataset2, dataset3];
41 42  
42 43 var ds = document.getElementById('ds');
43 44 ds.setAttribute("datasets", JSON.stringify(datasets));
... ...
controllets/dataset-selection-controllet/paper-input-search.html
  View file @0f6424f
... ... @@ -79,7 +79,7 @@ respectively.
79 79 display: inline-block;
80 80 position: relative;
81 81 text-align: left;
82   - /*cursor: pointer;*/
  82 + cursor: pointer;
83 83  
84 84 /* NOTE(cdata): Both values are needed, since some phones require the
85 85 * value to be `transparent`.
... ... @@ -131,7 +131,8 @@ respectively.
131 131 }
132 132  
133 133 iron-icon {
134   - color: var(--disabled-text-color);
  134 + /*color: var(--disabled-text-color);*/
  135 + color: #2196F3;
135 136  
136 137 @apply(--paper-dropdown-menu-icon);
137 138 }
... ... @@ -141,7 +142,7 @@ respectively.
141 142 <paper-menu-button
142 143 id="menuButton"
143 144 vertical-align="top"
144   - horizontal-align="right"
  145 + horizontal-align="left"
145 146 vertical-offset="[[_computeMenuVerticalOffset(noLabelFloat)]]"
146 147 disabled="[[disabled]]"
147 148 no-animations="[[noAnimations]]"
... ... @@ -149,14 +150,16 @@ respectively.
149 150 on-iron-deselect="_onIronDeselect"
150 151 opened="{{opened}}">
151 152 <div class="dropdown-trigger">
152   - <paper-ripple></paper-ripple>
  153 + <!--<paper-ripple></paper-ripple>-->
153 154 <paper-input
  155 + id="inputField"
154 156 invalid="[[invalid]]"
155   - value="[[selectedItemLabel]]"
  157 + value="{{inputValue}}"
156 158 placeholder="[[placeholder]]"
157 159 always-float-label="[[alwaysFloatLabel]]"
158 160 no-label-float="[[noLabelFloat]]"
159 161 label="[[label]]">
  162 + <iron-icon icon="search" prefix></iron-icon>
160 163 <iron-icon icon="arrow-drop-down" suffix></iron-icon>
161 164 </paper-input>
162 165 </div>
... ... @@ -199,7 +202,7 @@ respectively.
199 202 selectedItemLabel: {
200 203 type: String,
201 204 notify: true,
202   - readOnly: true,
  205 + readOnly: true
203 206 },
204 207  
205 208 /**
... ... @@ -275,6 +278,17 @@ respectively.
275 278 noAnimations: {
276 279 type: Boolean,
277 280 value: false
  281 + },
  282 +
  283 + inputValue: {
  284 + type: String,
  285 + value: undefined,
  286 + observer: '_fireInputValue'
  287 + },
  288 +
  289 + fireInputValue: {
  290 + type: Boolean,
  291 + value: true,
278 292 }
279 293 },
280 294  
... ... @@ -293,7 +307,7 @@ respectively.
293 307 },
294 308  
295 309 observers: [
296   - '_selectedItemChanged(selectedItem)'
  310 +// '_selectedItemChanged(selectedItem)'
297 311 ],
298 312  
299 313 attached: function() {
... ... @@ -307,6 +321,19 @@ respectively.
307 321 }
308 322 },
309 323  
  324 + _fireInputValue: function() {console.log(this.inputValue);
  325 + if(this.fireInputValue) {//change NO DDL
  326 + this.fire('paper-input-search_input-value', {inputValue: this.inputValue});
  327 + if(this.contentElement.selectedItem){
  328 +// this._setSelectedItem(null);
  329 + this.contentElement.select(-1);
  330 + console.log("deselected");
  331 + }
  332 + }
  333 +
  334 + this.fireInputValue = true;
  335 + },
  336 +
310 337 /**
311 338 * The content element that is contained by the dropdown menu, if any.
312 339 */
... ... @@ -334,7 +361,10 @@ respectively.
334 361 * @param {CustomEvent} event An `iron-select` event.
335 362 */
336 363 _onIronSelect: function(event) {
  364 +// console.log("select");
  365 + this.fireInputValue = false;
337 366 this._setSelectedItem(event.detail.item);
  367 + this.inputValue = event.detail.item.label || event.detail.item.textContent.trim();
338 368 },
339 369  
340 370 /**
... ... @@ -343,6 +373,8 @@ respectively.
343 373 * @param {CustomEvent} event An `iron-deselect` event.
344 374 */
345 375 _onIronDeselect: function(event) {
  376 +// console.log("deselect");
  377 + this.fireInputValue = false;
346 378 this._setSelectedItem(null);
347 379 },
348 380  
... ... @@ -355,6 +387,11 @@ respectively.
355 387 if (Polymer.Gestures.findOriginalTarget(event) === this) {
356 388 this.open();
357 389 }
  390 + this.async(function(){this.$.inputField.$.input.focus();},200);//to improve
  391 +// console.log(this.selectedItemLabel);
  392 +// console.log(this.value);
  393 +// console.log(this.$.inputField.value);
  394 +// console.log(this.inputValue);
358 395 },
359 396  
360 397 /**
... ... @@ -363,17 +400,18 @@ respectively.
363 400 * @param {Element} selectedItem A selected Element item, with an
364 401 * optional `label` property.
365 402 */
366   - _selectedItemChanged: function(selectedItem) {
367   - var value = '';
368   - if (!selectedItem) {
369   - value = '';
370   - } else {
371   - value = selectedItem.label || selectedItem.textContent.trim();
372   - }
373   -
374   - this._setValue(value);
375   - this._setSelectedItemLabel(value);
376   - },
  403 +// _selectedItemChanged: function(selectedItem) {
  404 +// var value = '';
  405 +// if (!selectedItem) {
  406 +// value = '';
  407 +// } else {
  408 +// value = selectedItem.label || selectedItem.textContent.trim();
  409 +// }
  410 +//
  411 +// this._setValue(value);
  412 +// this._setSelectedItemLabel(value);
  413 +// this.inputValue = selectedItem.label || selectedItem.textContent.trim();
  414 +// },
377 415  
378 416 /**
379 417 * Compute the vertical offset of the menu based on the value of
... ... @@ -388,7 +426,8 @@ respectively.
388 426 // template. The metrics will change depending on whether or not the
389 427 // input has a floating label.
390 428 // return noLabelFloat ? -4 : 8;
391   - return 64;
  429 + return noLabelFloat ? 46-4 : 46+8;
  430 +// return 64;
392 431 },
393 432  
394 433 /**
... ...
controllets/fullsize-page-with-card-controllet/fullsize-page-with-card-controllet.html 100644 → 100755
  View file @0f6424f
... ... @@ -31,24 +31,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
31 31 height: 90%;
32 32 }
33 33  
34   - .grid-item-c0 {background-color: #0D47A1;}
35   - .grid-item-c1 {background-color: #1976D2;}
36   - .grid-item-c2 {background-color: #2196F3;}
37   - .grid-item-c3 {background-color: #64B5F6;}
38   - .grid-item-c4 {background-color: #BBDEFB;}
39   -
40   - .grid-item-c0-l {background-color: #1565C0;}
41   - .grid-item-c1-l {background-color: #1E88E5;}
42   - .grid-item-c2-l {background-color: #42A5F5;}
43   - .grid-item-c3-l {background-color: #90CAF9;}
44   - .grid-item-c4-l {background-color: #E3F2FD;}
45   -
46 34 </style>
47 35  
48 36 <template>
49 37  
50   - <div id="fixed" class$="[[_computeFixedBackgroundClass(color)]]"></div>
51   - <div id="card" class$="[[_computeCardClass(color)]]">
  38 + <div id="fixed" class="fixed" style$="background-color:{{color}}"></div>
  39 + <div id="card" class="card" style$="background-color:{{color}}">
52 40 <template is="dom-if" if="{{_checkUndefined(publicRoom)}}">
53 41 <iframe id="public_room_iframe" src="/public-room/{{publicRoom}}" width="100%" height="100%"></iframe>
54 42 </template>
... ... @@ -129,13 +117,15 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
129 117 },
130 118  
131 119 _computeCardClass: function(color) {
132   - var cls = 'card';
133   - return cls + ' ' + color;
  120 + //var cls = 'card';
  121 + //return cls + ' ' + color;
  122 + this.$.card = color;
134 123 },
135 124  
136 125 _computeFixedBackgroundClass: function(color) {
137   - var cls = 'fixed';
138   - return cls + ' ' + color + '-l';
  126 + //var cls = 'fixed';
  127 + //return cls + ' ' + color + '-l';
  128 + this.$.fixed = color;
139 129 }
140 130  
141 131 });
... ...
controllets/page-slider-controllet/page-slider-controllet.html
  View file @0f6424f
... ... @@ -77,7 +77,7 @@
77 77  
78 78 .subtitle {
79 79 font-size: 16px;
80   - color: #727272;
  80 + color: #727272;/*#00BCD4*/
81 81 }
82 82 </style>
83 83  
... ...
datalets/base-datalet/base-datalet.html
  View file @0f6424f
... ... @@ -55,6 +55,14 @@ Example :
55 55 <dom-module id="base-datalet">
56 56 <template>
57 57 <style>
  58 + a {
  59 + color: #00BCD4;
  60 + text-decoration: none;
  61 + }
  62 + a:hover {
  63 + color: #2db395;
  64 + text-decoration: underline;
  65 + }
58 66 #base_datalet_container {
59 67 font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
60 68 padding: 16px;
... ... @@ -63,34 +71,34 @@ Example :
63 71 display: flex;
64 72 padding-top: 8px;
65 73 }
66   - #rtp{
  74 + #rtp {
67 75 padding-top: 8px;
68 76 padding-right: 8px;
69 77 font-size: small;
70 78 }
71   - #rtpalogo{
  79 + #rtpalogo {
72 80 height:32px;
73 81 width: 32px;
74 82 }
75   - #image_spin {
76   - height:32px;
77   - width: 32px;
  83 + #base_datalet_spin {
  84 + height:256px;
  85 + width: 256px;
78 86 position: relative;
79 87 center: center;
80 88 width: 100%;
81 89 }
82   -
83   -
84 90 </style>
85 91  
86 92 <div id="base_datalet_imgWaitDatalet">
87   - <img id="image_spin" src="static/images/spin.svg">
88   -
  93 + <img id="base_datalet_spin" src="static/images/spin.svg">
89 94 </div>
  95 +
90 96 <div id="base_datalet_container">
91   - <b> Source:</b><span id="domain"></span>
92   - <b> </b><span id="domainPage">
93   - </span>
  97 + <!--<b>Source:</b><span id="domain"></span>-->
  98 + <!--<b></b><span id="domainPage"></span>-->
  99 +
  100 + <b>Source:</b> <a id="base_datalet_source"></a> ( <a id="base_datalet_link">dataset</a> )
  101 +
94 102 <div id="base_datalet_rtp">
95 103 <div id="rtp">Powered by ROUTE-TO-PA</div>
96 104 <div><a href="http://www.routetopa.eu/"><img id="rtpalogo" src="static/images/rtpalogo.png" ></a></div>
... ... @@ -132,6 +140,9 @@ Example :
132 140 * @method ready
133 141 */
134 142 ready: function(){
  143 +
  144 +
  145 +
135 146 var urlDatalet;
136 147 if(this.dataUrl != undefined){
137 148  
... ... @@ -149,7 +160,11 @@ Example :
149 160 urlDatalet = queryInitial + queryFinal + apiIdResource + resultIdDatalet;
150 161 urlSource = this.dataUrl.split("/")[0] + "//" + this.dataUrl.split("/")[2];
151 162  
152   - this.$.domainPage.innerHTML = '<a href=' + urlSource + ' target=' + "_blank>" + urlSource + '</a>'+ "." ;
  163 +// this.$.domainPage.innerHTML = '<a href=' + urlSource + ' target=' + "_blank>" + urlSource + '</a>'+ "." ;
  164 +
  165 + this.$.base_datalet_source.innerHTML = urlSource;
  166 + this.$.base_datalet_source.setAttribute("href", urlSource);
  167 +
153 168 this.requestDataletData(urlDatalet);
154 169 }
155 170 },
... ... @@ -209,12 +224,11 @@ Example :
209 224 resourceId = lastStringResourceId.split('=')[1];
210 225 var urlDatalet = this.dataUrl.split("/")[0]+ "//" + this.dataUrl.split("/")[2] + "/dataset/" + packageIdDatalet +"/resource/" +resourceId;
211 226  
212   -
213 227 urlDatalet = urlDatasetDownload.replace(/\/download\/.*/, '');
214 228 urlSource = this.dataUrl.split("/")[0] + "//" + this.dataUrl.split("/")[2];
215 229  
216   -
217   - this.$.domainPage.innerHTML += " (" + ' <a href=' + urlDatalet + ' target=' + "_blank>" + "Dataset's page" + '</a>' + " )";
  230 + this.$.base_datalet_link.setAttribute("href", urlDatalet);
  231 +// this.$.domainPage.innerHTML += " (" + ' <a href=' + urlDatalet + ' target=' + "_blank>" + "Dataset's page" + '</a>' + " )";
218 232  
219 233 }
220 234 }
... ...
datalets/base-datalet/static/images/spin.svg 100644 → 100755
  View file @0f6424f
datalets/graph-datalet/graph-datalet.html 100644 → 100755
  View file @0f6424f
... ... @@ -130,6 +130,32 @@ Example:
130 130 .attr("width", width)
131 131 .attr("height", height);
132 132  
  133 + //pezzotto
  134 + this.svg.append("filter")
  135 + .attr("id","filter1")
  136 + .attr("x","0%")
  137 + .attr("y","0%")
  138 + .attr("width","100%")
  139 + .attr("height","100%")
  140 + .append("feImage")
  141 + .attr("xlink:href","http://icons.iconarchive.com/icons/hopstarter/soft-scraps/256/User-Executive-Green-icon.png");
  142 +
  143 + /*this.svg.append("defs")
  144 + .append("pattern")
  145 + .attr("id","urlimage")
  146 + //.attr("patternUnits","userSpaceOnUse")
  147 + .attr("width","100%")
  148 + .attr("height","100%")
  149 + .append("image")
  150 + .attr("xlink:href","http://lorempixel.com/400/200")
  151 + //.attr("patternUnits","userSpaceOnUse")
  152 + .attr("x","0%")
  153 + .attr("y","0%")
  154 + .attr("width","100%")
  155 + .attr("height","100%");*/
  156 + //end pezzotto
  157 +
  158 +
133 159 var graph = {};
134 160  
135 161 graph.nodes = t.nodes;
... ... @@ -157,10 +183,13 @@ Example:
157 183 return t.fixed ? "" : "drag"
158 184 }).attr("r", function (t) {
159 185 return t.r ? t.r : 15
160   - }).attr("style", function (t) {
  186 + })
  187 + .attr("style", function (t) {
161 188 return t.color ? "stroke:" + t.color : !1
162 189 });
163 190  
  191 + d3.selectAll('circle').attr("filter", function(t){return t.image ? 'url(#filter1)' : ""});
  192 +
164 193 //d3.selectAll(".drag").call(force.drag), svg.selectAll("g.fixed").call(text);
165 194 d3.selectAll(".drag").call(force.drag), this.svg.selectAll("g.node").call(this.text);
166 195  
... ... @@ -217,7 +246,7 @@ Example:
217 246 mouseover : function (t) {
218 247 d3.select(this).selectAll("circle").transition().duration(600).ease("elastic").attr("r", function (t) {
219 248 //return 1 == t.fixed ? 1.4 * t.r : 15
220   - return 1 == t.fixed ? 1.4 * t.r : 15
  249 + return 1 == t.fixed ? 1.4 * t.r : t.r + 10;
221 250 });
222 251  
223 252 },
... ...
datalets/graph-datalet/static/css/graphStyle.css 100644 → 100755
  View file @0f6424f
datalets/graph-datalet/static/js/d3.v3.js 100644 → 100755
  View file @0f6424f