WebCompDev / COMPONENTS

Commit 938d19289cabdce9aa7b81ba83b52c1e11ac52dd

Authored by Luigi Serra
1 parent 785064b8

Update documentation for controllets

Inline Side-by-side
Showing 4 changed files with 669 additions and 331 deletions
controllets/data-sevc-controllet/data-sevc-controllet.html
  View file @938d192
1   -<link rel="import" href="../../bower_components/polymer/polymer.html">
2   - <link rel="import" href="../../bower_components/paper-styles/color.html">
  1 +<!--
  2 +@license
3 3  
4   - <link rel="import" href="../../bower_components/neon-animation/neon-animated-pages.html">
5   - <link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">
6   - <link rel="import" href="../../bower_components/neon-animation/neon-animations.html">
  4 +The MIT License (MIT)
7 5  
8   - <link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
9   - <link rel="import" href="../../bower_components/paper-input/paper-input.html">
10   - <link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
11   - <link rel="import" href="../../bower_components/paper-button/paper-button.html">
12   - <link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
13   - <link rel="import" href="../../bower_components/paper-tabs/paper-tab.html">
14   - <link rel="import" href="../../bower_components/iron-pages/iron-pages.html">
15   - <link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
16   - <link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
17   - <link rel="import" href="../../bower_components/paper-item/paper-item.html">
18   - <link rel="import" href="../../bower_components/paper-toast/paper-toast.html">
  6 +Copyright (c) 2015 ROUTE-TO-PA CONSORTIUM
19 7  
  8 + Permission is hereby granted, free of charge, to any person obtaining a copy
  9 + of this software and associated documentation files (the "Software"), to deal
  10 + in the Software without restriction, including without limitation the rights
  11 + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  12 + copies of the Software, and to permit persons to whom the Software is
  13 + furnished to do so, subject to the following conditions:
20 14  
21   - <link rel="import" href="../items-slider-controllet/items-slider-controllet.html">
22   - <link rel="import" href="../draggable-element-controllet/draggable-element-controllet.html">
23   - <link rel="import" href="../treeview-controllet/treeview-controllet.html">
  15 + The above copyright notice and this permission notice shall be included in
  16 + all copies or substantial portions of the Software.
24 17  
  18 + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  19 + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  20 + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  21 + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  22 + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  23 + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  24 + THE SOFTWARE.
  25 +-->
25 26  
26   - <dom-module id="data-sevc-controllet">
27   - <template>
28   - <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
  27 +<link rel="import" href="../../bower_components/polymer/polymer.html">
  28 +<link rel="import" href="../../bower_components/paper-styles/color.html">
  29 +
  30 +<link rel="import" href="../../bower_components/neon-animation/neon-animated-pages.html">
  31 +<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">
  32 +<link rel="import" href="../../bower_components/neon-animation/neon-animations.html">
  33 +
  34 +<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
  35 +<link rel="import" href="../../bower_components/paper-input/paper-input.html">
  36 +<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
  37 +<link rel="import" href="../../bower_components/paper-button/paper-button.html">
  38 +<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
  39 +<link rel="import" href="../../bower_components/paper-tabs/paper-tab.html">
  40 +<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">
  41 +<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
  42 +<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
  43 +<link rel="import" href="../../bower_components/paper-item/paper-item.html">
  44 +<link rel="import" href="../../bower_components/paper-toast/paper-toast.html">
  45 +
  46 +
  47 +<link rel="import" href="../items-slider-controllet/items-slider-controllet.html">
  48 +<link rel="import" href="../draggable-element-controllet/draggable-element-controllet.html">
  49 +<link rel="import" href="../treeview-controllet/treeview-controllet.html">
  50 +
  51 +<!--
  52 + `data-sevc-controllet` is a controllet to generate visualization from a dataset accessible through api. A json response is required.
  53 + It's composed by three pass. 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
  54 + 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
  55 + 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
  56 + is available every time a fields is dragged in the input data model fields area.
  57 +
  58 +Example:
  59 +
  60 + <data-sevc-controllet deep-url="http://192.168.214.128/DEEalerProvider/DEEP/"
  61 + datalets-list-url="http://192.168.214.128/DEEalerProvider/DEEP/datalets-list"
  62 + organization="2" >
  63 + </data-sevc-controllet>
  64 +
  65 +
  66 +@element data-sevc-controllet
  67 +@status beta
  68 +@homepage
  69 +@group controllets
  70 +-->
  71 +
  72 +
  73 +<dom-module id="data-sevc-controllet">
  74 + <template>
  75 + <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
29 76 <link rel="stylesheet" href="static/css/reset.css">
30 77  
31 78 <style is="custom-style">
32 79  
33   - ::content body {
34   - font-family: 'Roboto', sans-serif;
35   - }
  80 + ::content body {
  81 + font-family: 'Roboto', sans-serif;
  82 + }
36 83  
37   - .flexchild
38   - {
39   - @apply(--layout-flex);
40   - }
  84 + .flexchild
  85 + {
  86 + @apply(--layout-flex);
  87 + }
41 88  
42   - .flex2child
43   - {
44   - @apply(--layout-flex-2);
45   - }
  89 + .flex2child
  90 + {
  91 + @apply(--layout-flex-2);
  92 + }
46 93  
47   - .avatar
48   - {
49   - display: inline-block;
50   - height: 2em;
51   - width: 2em;
52   - border-radius: 50%;
53   - background: var(--paper-blue-500);
54   - color: white;
55   - line-height: 2em;
56   - font-size: 1.87em;
57   - text-align: center;
58   - }
  94 + .avatar
  95 + {
  96 + display: inline-block;
  97 + height: 2em;
  98 + width: 2em;
  99 + border-radius: 50%;
  100 + background: var(--paper-blue-500);
  101 + color: white;
  102 + line-height: 2em;
  103 + font-size: 1.87em;
  104 + text-align: center;
  105 + }
59 106  
60   - .title
61   - {
62   - position: relative;
63   - top: 0.60vh;
64   - margin-left: 20px;
65   - }
  107 + .title
  108 + {
  109 + position: relative;
  110 + top: 0.60vh;
  111 + margin-left: 20px;
  112 + }
66 113  
67   - .big
68   - {
69   - font-size: 1.37em;
70   - color: var(--google-grey-500);
71   - }
  114 + .big
  115 + {
  116 + font-size: 1.37em;
  117 + color: var(--google-grey-500);
  118 + }
72 119  
73   - .medium
74   - {
75   - font-size: 1em;
76   - padding-bottom: 0.5em;
77   - color : #000000;
78   - font-weight: bold;
79   - }
  120 + .medium
  121 + {
  122 + font-size: 1em;
  123 + padding-bottom: 0.5em;
  124 + color : #000000;
  125 + font-weight: bold;
  126 + }
80 127  
81   - .small
82   - {
83   - font-size: 0.8em;
84   - padding-top: 10px;
85   - color: var(--paper-blue-500);
86   - font-weight: bold;
87   - }
  128 + .small
  129 + {
  130 + font-size: 0.8em;
  131 + padding-top: 10px;
  132 + color: var(--paper-blue-500);
  133 + font-weight: bold;
  134 + }
88 135  
89   - paper-input
90   - {
91   - width: 80%;
92   - }
  136 + paper-input
  137 + {
  138 + width: 80%;
  139 + }
93 140  
94   - paper-dropdown-menu
95   - {
96   - text-align: left;
97   - margin: auto;
98   - width: 100%;
99   - }
  141 + paper-dropdown-menu
  142 + {
  143 + text-align: left;
  144 + margin: auto;
  145 + width: 100%;
  146 + }
100 147  
101   - ::content paper-menu-button
102   - {
103   - display: block;
104   - width: 100%;
105   - }
  148 + ::content paper-menu-button
  149 + {
  150 + display: block;
  151 + width: 100%;
  152 + }
106 153  
107   - #visualization_slider_area
108   - {
109   - min-width: 670px;
110   - min-height: 180px;
111   - }
  154 + #visualization_slider_area
  155 + {
  156 + min-width: 670px;
  157 + min-height: 180px;
  158 + }
112 159  
113   - #fields_mapping_area
114   - {
115   - min-width: 670px;
116   - min-height: 180px;
117   - }
  160 + #fields_mapping_area
  161 + {
  162 + min-width: 670px;
  163 + min-height: 180px;
  164 + }
118 165  
119   - #datalet_placeholder
120   - {
121   - height: 360px;
122   - min-height: 360px;
  166 + #datalet_placeholder
  167 + {
  168 + height: 360px;
  169 + min-height: 360px;
123 170  
124   - }
  171 + }
125 172  
126   - .datalet_right_container
127   - {
128   - width: 100vh;
129   - }
  173 + .datalet_right_container
  174 + {
  175 + width: 100vh;
  176 + }
130 177  
131   - .field-mapping-card
132   - {
133   - width: 50%;
134   - float: left;
135   - }
  178 + .field-mapping-card
  179 + {
  180 + width: 50%;
  181 + float: left;
  182 + }
136 183  
137   - .toolbar_button
138   - {
139   - --iron-icon-height: 32px;
140   - --iron-icon-width: 32px;
141   - }
  184 + .toolbar_button
  185 + {
  186 + --iron-icon-height: 32px;
  187 + --iron-icon-width: 32px;
  188 + }
142 189  
143   - #finish_button
144   - {
145   - --iron-icon-height: 32px;
146   - --iron-icon-width: 32px;
147   - color: var(--paper-blue-500);
148   - }
  190 + #finish_button
  191 + {
  192 + --iron-icon-height: 32px;
  193 + --iron-icon-width: 32px;
  194 + color: var(--paper-blue-500);
  195 + }
149 196  
150   - .area_container
151   - {
152   - overflow: hidden;
153   - margin : 0.8em;
154   - padding : 0.8em;
155   - border-width: 1em;
156   - border-radius: 0.125rem;
157   - box-shadow: 0.125em 0.125em 0.1125em 0.125em rgba(0, 0, 0, 0.25);
158   - }
  197 + .area_container
  198 + {
  199 + overflow: hidden;
  200 + margin : 0.8em;
  201 + padding : 0.8em;
  202 + border-width: 1em;
  203 + border-radius: 0.125rem;
  204 + box-shadow: 0.125em 0.125em 0.1125em 0.125em rgba(0, 0, 0, 0.25);
  205 + }
159 206  
160   - #fields_placeholder{
161   - width: 40%;
162   - height: 75vh;
163   - position: relative;
164   - float: left;
165   - overflow: auto;
166   - }
  207 + #fields_placeholder{
  208 + width: 40%;
  209 + height: 75vh;
  210 + position: relative;
  211 + float: left;
  212 + overflow: auto;
  213 + }
167 214  
168   - #table_fields_container{
169   - height: 75vh;
170   - width: 55%;
171   - position: relative;
172   - float: left;
173   - overflow: auto;
174   - }
  215 + #table_fields_container{
  216 + height: 75vh;
  217 + width: 55%;
  218 + position: relative;
  219 + float: left;
  220 + overflow: auto;
  221 + }
175 222  
176   - paper-tabs, paper-toolbar
177   - {
178   - background-color: var(--paper-blue-500);
179   - color: #ffffff;
180   - box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
181   - }
  223 + paper-tabs, paper-toolbar
  224 + {
  225 + background-color: var(--paper-blue-500);
  226 + color: #ffffff;
  227 + box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
  228 + }
182 229  
183   - paper-toolbar paper-tabs
184   - {
185   - box-shadow: none;
186   - --paper-tabs-selection-bar-color : var(--google-gray-500);
187   - }
  230 + paper-toolbar paper-tabs
  231 + {
  232 + box-shadow: none;
  233 + --paper-tabs-selection-bar-color : var(--google-gray-500);
  234 + }
188 235  
189   - paper-tabs[noink][no-bar] paper-tab.iron-selected
190   - {
191   - background-color: var(--google-gray-500);
192   - }
  236 + paper-tabs[noink][no-bar] paper-tab.iron-selected
  237 + {
  238 + background-color: var(--google-gray-500);
  239 + }
193 240  
194   - paper-tabs[align-bottom]
195   - {
196   - box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.15);
197   - }
  241 + paper-tabs[align-bottom]
  242 + {
  243 + box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.15);
  244 + }
198 245  
199   - #idm_fields_main_container{
200   - position: relative;
201   - height: 50vh;
202   - }
  246 + #idm_fields_main_container{
  247 + position: relative;
  248 + height: 50vh;
  249 + }
203 250  
204   - #selected_fields_main_container{
205   - position: relative;
206   - height: 50vh;
207   - }
  251 + #selected_fields_main_container{
  252 + position: relative;
  253 + height: 50vh;
  254 + }
208 255  
209   - paper-menu{
210   - width: 100%;
211   - }
  256 + paper-menu{
  257 + width: 100%;
  258 + }
212 259  
213   - </style>
214   -
215   - <iron-ajax
216   - auto
217   - id="data_request"
218   - url={{dataUrl}}
219   - verbose="true"
220   - on-response="handleResponseData"
221   - debounce-duration="300">
222   - </iron-ajax>
223   -
224   - <iron-ajax
225   - id="datales_list_request"
226   - auto
227   - url={{dataletsListUrl}}
228   - handle-as="json"
229   - on-response="handleResponseDatalets"
230   - debounce-duration="300">
231   - </iron-ajax>
232   -
233   - <iron-ajax
234   - id="selected_datalet_request"
235   - url={{deepUrl}}
236   - verbose="true"
237   - on-response="handleSelectedDatalet"
238   - debounce-duration="300">
239   - </iron-ajax>
240   -
241   - <content>
242   -
243   - <neon-animated-pages id="pages" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
244   -
245   - <neon-animatable>
246   -
247   - <div class="vertical justified layout">
248   -
249   - <div class="horizontal layout">
250   - <div class="avatar" style="margin-left:15px">1</div>
251   - <div class="title flex">
252   - <div id="toolbar_title" class="big">Dataset source</div>
253   - <div id="toolbar_description" class="small">Copy and paste/drag and drop in the textarea the url of datasource</div>
  260 + </style>
  261 +
  262 + <iron-ajax
  263 + auto
  264 + id="data_request"
  265 + url={{dataUrl}}
  266 + verbose="true"
  267 + on-response="handleResponseData"
  268 + debounce-duration="300">
  269 + </iron-ajax>
  270 +
  271 + <iron-ajax
  272 + id="datales_list_request"
  273 + auto
  274 + url={{dataletsListUrl}}
  275 + handle-as="json"
  276 + on-response="handleResponseDatalets"
  277 + debounce-duration="300">
  278 + </iron-ajax>
  279 +
  280 + <iron-ajax
  281 + id="selected_datalet_request"
  282 + url={{deepUrl}}
  283 + verbose="true"
  284 + on-response="handleSelectedDatalet"
  285 + debounce-duration="300">
  286 + </iron-ajax>
  287 +
  288 + <content>
  289 +
  290 + <neon-animated-pages id="pages" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
  291 +
  292 + <neon-animatable>
  293 +
  294 + <div class="vertical justified layout">
  295 +
  296 + <div class="horizontal layout">
  297 + <div class="avatar" style="margin-left:15px">1</div>
  298 + <div class="title flex">
  299 + <div id="toolbar_title" class="big">Dataset source</div>
  300 + <div id="toolbar_description" class="small">Copy and paste/drag and drop in the textarea the url of datasource</div>
  301 + </div>
  302 + <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button>
254 303 </div>
255   - <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button>
256   - </div>
257 304  
258   - <div class="area_container">
259   - <paper-tabs selected="{{DatasourceTabSelected}}">
260   - <paper-tab>Select data source</paper-tab>
261   - <paper-tab>Most popular</paper-tab>
262   - <paper-tab>Search</paper-tab>
263   - </paper-tabs>
264   - <iron-pages selected="{{DatasourceTabSelected}}">
265   - <div>
266   - <div class="card-content">
267   - <paper-dropdown-menu id="datasets-sources" label="Available datasets">
268   - <paper-menu class="dropdown-content">
269   - <template is="dom-repeat" items="{{datasets}}" as="dataset" index-as="index">
270   - <paper-item id="{{index}}" on-tap="_datasourceSelected">{{dataset}}</paper-item>
271   - </template>
272   - </paper-menu>
273   - </paper-dropdown-menu>
274   - </div>
  305 + <div class="area_container">
  306 + <paper-tabs selected="{{DatasourceTabSelected}}">
  307 + <paper-tab>Select data source</paper-tab>
  308 + <paper-tab>Most popular</paper-tab>
  309 + <paper-tab>Search</paper-tab>
  310 + </paper-tabs>
  311 + <iron-pages selected="{{DatasourceTabSelected}}">
  312 + <div>
  313 + <div class="card-content">
  314 + <paper-dropdown-menu id="datasets-sources" label="Available datasets">
  315 + <paper-menu class="dropdown-content">
  316 + <template is="dom-repeat" items="{{datasets}}" as="dataset" index-as="index">
  317 + <paper-item id="{{index}}" on-tap="_datasourceSelected">{{dataset}}</paper-item>
  318 + </template>
  319 + </paper-menu>
  320 + </paper-dropdown-menu>
  321 + </div>
275 322  
276   - <div><img src="static/images/or.png" style="position: relative;left: 50%;padding-top:20px"></div>
  323 + <div><img src="static/images/or.png" style="position: relative;left: 50%;padding-top:20px"></div>
277 324  
278   - <div class="card-content">
279   - <paper-textarea id="data_url" label="Dataset api data url" floatingLabel value="{{dataUrl}}" on-dragover="_handleDatasourceDragOver"></paper-textarea>
280   - </div>
  325 + <div class="card-content">
  326 + <paper-textarea id="data_url" label="Dataset api data url" floatingLabel value="{{dataUrl}}" on-dragover="_handleDatasourceDragOver"></paper-textarea>
  327 + </div>
281 328  
282 329  
283   - </div>
284   - <div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div>
285   - <div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div>
286   - </iron-pages>
287   - </div>
  330 + </div>
  331 + <div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div>
  332 + <div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div>
  333 + </iron-pages>
  334 + </div>
288 335  
289   - </div>
  336 + </div>
290 337  
291   - </neon-animatable>
  338 + </neon-animatable>
292 339  
293   - <neon-animatable>
  340 + <neon-animatable>
294 341  
295   - <div class="vertical justified layout">
  342 + <div class="vertical justified layout">
296 343  
297   - <div class="horizontal layout">
298   - <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>
299   - <div class="avatar">2</div>
300   - <div class="title flex">
301   - <div id="toolbar_title" class="big">Dataset source</div>
302   - <div id="toolbar_description" class="small">Copy and paste/drag and drop in the textarea the url of datasource</div>
  344 + <div class="horizontal layout">
  345 + <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>
  346 + <div class="avatar">2</div>
  347 + <div class="title flex">
  348 + <div id="toolbar_title" class="big">Dataset source</div>
  349 + <div id="toolbar_description" class="small">Copy and paste/drag and drop in the textarea the url of datasource</div>
  350 + </div>
  351 + <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button>
303 352 </div>
304   - <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button>
305   - </div>
306 353  
307   - <div class="horizontal layout">
  354 + <div class="horizontal layout">
308 355  
309   - <div id="fields_placeholder" class="area_container flexchild" style="min-width:300px">
310   - <treeview-controllet id="fields_treeview"></treeview-controllet>
311   - </div>
  356 + <div id="fields_placeholder" class="area_container flexchild" style="min-width:300px">
  357 + <treeview-controllet id="fields_treeview"></treeview-controllet>
  358 + </div>
  359 +
  360 + <div id="table_fields_container" class="area_container flex2child">
  361 + <div id="table_component_place_holder"></div>
  362 + </div>
312 363  
313   - <div id="table_fields_container" class="area_container flex2child">
314   - <div id="table_component_place_holder"></div>
315 364 </div>
316 365  
317 366 </div>
318 367  
319   - </div>
  368 + </neon-animatable>
320 369  
321   - </neon-animatable>
  370 + <neon-animatable style="height:100vh">
322 371  
323   - <neon-animatable style="height:100vh">
  372 + <div class="vertical justified layout">
324 373  
325   - <div class="vertical justified layout">
326   -
327   - <div class="horizontal layout">
328   - <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>
329   - <div class="avatar">3</div>
330   - <div class="title flex">
331   - <div id="toolbar_title" class="big">Data mapping</div>
332   - <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>
  374 + <div class="horizontal layout">
  375 + <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>
  376 + <div class="avatar">3</div>
  377 + <div class="title flex">
  378 + <div id="toolbar_title" class="big">Data mapping</div>
  379 + <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>
  380 + </div>
  381 + <paper-icon-button id="finish_button" on-click="_onFinish" icon="add-circle" alt="Conforms the creation" title="finish"></paper-icon-button>
333 382 </div>
334   - <paper-icon-button id="finish_button" on-click="_onFinish" icon="add-circle" alt="Conforms the creation" title="finish"></paper-icon-button>
335   - </div>
336 383  
337 384  
338   - <div class="horizontal layout">
  385 + <div class="horizontal layout">
339 386  
340   - <div class="">
341   - <div id="visualization_slider_area" class="area_container"></div>
342   - <div id="fields_mapping_area" class="area_container">
  387 + <div class="">
  388 + <div id="visualization_slider_area" class="area_container"></div>
  389 + <div id="fields_mapping_area" class="area_container">
343 390  
344   - <div id="selected_fields_main_container" class="field-mapping-card">
345   - <div class="title">
346   - <div class="medium">Selected fields</div>
  391 + <div id="selected_fields_main_container" class="field-mapping-card">
  392 + <div class="title">
  393 + <div class="medium">Selected fields</div>
  394 + </div>
  395 + <div id="selected_fields_container" class="area_container"></div>
347 396 </div>
348   - <div id="selected_fields_container" class="area_container"></div>
349   - </div>
350 397  
351   - <div id="idm_fields_main_container" class="field-mapping-card">
352   - <div class="title">
353   - <div class="medium">Datalet fields</div>
  398 + <div id="idm_fields_main_container" class="field-mapping-card">
  399 + <div class="title">
  400 + <div class="medium">Datalet fields</div>
  401 + </div>
  402 + <div id="datalet_idm_fields_container" class="area_container"></div>
354 403 </div>
355   - <div id="datalet_idm_fields_container" class="area_container"></div>
356 404 </div>
357 405 </div>
358   - </div>
359 406  
360   - <div id="datalet_placeholder" style="min-width: 43%;"></div>
  407 + <div id="datalet_placeholder" style="min-width: 43%;"></div>
361 408  
362 409  
363   - </div>
  410 + </div>
364 411  
365   - </div>
  412 + </div>
366 413  
367   - </neon-animatable>
  414 + </neon-animatable>
368 415  
369   - </neon-animated-pages>
  416 + </neon-animated-pages>
370 417  
371   - <paper-toast id="message" text=""></paper-toast>
  418 + <paper-toast id="message" text=""></paper-toast>
372 419  
373   - </content>
  420 + </content>
374 421 </template>
375 422  
376 423 <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
... ... @@ -436,6 +483,36 @@
436 483  
437 484 is : 'data-sevc-controllet',
438 485  
  486 + /**
  487 + * Received when the user selects a datalet from slider.
  488 + *
  489 + * @event items-slider-controllet_item-selected
  490 + */
  491 +
  492 + /**
  493 + * Received when the user drags a selected fields in to one of the source input data model field
  494 + *
  495 + * @event draggable-element-controllet_content-dragged
  496 + */
  497 +
  498 + /**
  499 + * Received when the user selects one field from treeview controllet
  500 + *
  501 + * @event treeview-controllet-fileds-selected
  502 + */
  503 +
  504 + /**
  505 + * Received when the user drags a selected fields in to one of the source input data model field
  506 + *
  507 + * @event draggable-element-controllet_content-dragged
  508 + */
  509 +
  510 + /**
  511 + * Fired when the user press to finish button. At this event are attached all information about the visualization currently created
  512 + *
  513 + * @event data-sevc-controllet.dataletCreated
  514 + */
  515 +
439 516 listeners : {
440 517 'items-slider-controllet_item-selected' : '_dataletSelected',
441 518 'draggable-element-controllet_content-dragged' : '_fieldsMapped',
... ... @@ -460,7 +537,7 @@
460 537 },
461 538  
462 539 /**
463   - * It represent the data url from CKAN api
  540 + * It represents the data url from CKAN api
464 541 *
465 542 * @attribute dataUrl
466 543 * @type string
... ... @@ -472,7 +549,7 @@
472 549 observer : '_dataUrlChanged'
473 550 },
474 551 /**
475   - * It represent the DEEP url to get information about the datalets
  552 + * It represents the DEEP url to get information about the datalets
476 553 *
477 554 * @attribute deepUrl
478 555 * @type string
... ... @@ -482,43 +559,80 @@
482 559 type : String,
483 560 value : ""
484 561 },
485   -
  562 + /**
  563 + * It represents the organization related to datesets available for the user. It will be set at runtime based on the country of the user
  564 + *
  565 + * @attribute organization
  566 + * @type Number
  567 + * @default 2
  568 + */
486 569 organization : {
487 570 type : Number,
488 571 value : 2
489 572 },
490   -
491   - datalet_query : {
492   - type : String,
493   - value : ""
494   - },
495   -
  573 + /**
  574 + * It's used to store the list of datalets returned from DEEP
  575 + *
  576 + * @attribute datalets_list
  577 + * @type Array
  578 + * @default empty
  579 + */
496 580 datalets_list : {
497 581 type : Array ,
498 582 value : []
499 583 },
500   -
  584 + /**
  585 + * 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)
  586 + *
  587 + * @attribute selected_datalet
  588 + * @type String
  589 + * @default ''
  590 + */
501 591 selected_datalet : {
502 592 type : String,
503 593 value : ""
504 594 },
505   -
  595 + /**
  596 + * It's used to store the list of selected fields by user
  597 + *
  598 + * @attribute selected_fields
  599 + * @type Array
  600 + * @default empty
  601 + */
506 602 selected_fields : {
507 603 type : Array,
508 604 value : []
509 605 },
510   -
  606 + /**
  607 + * It's used to store the tab index in the first pass
  608 + *
  609 + * @attribute DatasourceTabSelected
  610 + * @type Number
  611 + * @default 0
  612 + */
511 613 DatasourceTabSelected : {
512 614 type : Number,
513 615 value : 0
514 616 },
515   -
  617 + /**
  618 + * It's used to store the datasets to show in the contexual menu
  619 + *
  620 + * @attribute datasets
  621 + * @type Array
  622 + * @default empty
  623 + */
516 624 datasets :
517 625 {
518 626 type : Array,
519 627 value : AvailableDatasets[0].names
520 628 },
521   -
  629 + /**
  630 + * It's used to store the datasets urls
  631 + *
  632 + * @attribute datasets
  633 + * @type Array
  634 + * @default empty
  635 + */
522 636 datasets_urls :
523 637 {
524 638 type : Array,
... ... @@ -526,6 +640,14 @@
526 640 }
527 641  
528 642 },
  643 + /**
  644 + * 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.
  645 + * In this phase the scrollbar will be initialized
  646 + *
  647 + * @method handleResponseData
  648 + *
  649 + * @param {Event} e
  650 + */
529 651  
530 652 ready : function(){
531 653  
... ... @@ -543,6 +665,8 @@
543 665 * Callback to parse the data requested when dataUrl change its value
544 666 *
545 667 * @method handleResponseData
  668 + *
  669 + * @param {Event} e
546 670 */
547 671 handleResponseData : function(e){
548 672  
... ... @@ -554,6 +678,8 @@
554 678 * Callback to parse the components response object
555 679 *
556 680 * @method handleResponseDatalets
  681 + *
  682 + * @param {Event} e
557 683 */
558 684 handleResponseDatalets : function(e){
559 685 this.datalets_list = new Array();
... ... @@ -568,7 +694,14 @@
568 694 this.$.visualization_slider_area.innerHTML = '<items-slider-controllet items=\'' + JSON.stringify(this.datalets_list) + '\'' +
569 695 '\'></items-slider-controllet>';
570 696 },
571   -
  697 + /**
  698 + * 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,
  699 + * to allow user to drag the fields, from the selected fields box, and create a new visualization.
  700 + *
  701 + * @method handleSelectedDatalet
  702 + *
  703 + * @param {Event} e
  704 + */
572 705 handleSelectedDatalet : function(e){
573 706  
574 707 var response = e.detail.response;
... ... @@ -590,7 +723,13 @@
590 723 }
591 724  
592 725 },
593   -
  726 + /**
  727 + * Validate the current pass in order to access to next one.
  728 + *
  729 + * @method validateCurrentPass
  730 + *
  731 + * @param {Number} next_selected_pass
  732 + */
594 733 validateCurrentPass : function(next_selected_pass){
595 734  
596 735 switch(next_selected_pass){
... ... @@ -616,7 +755,12 @@
616 755 }
617 756  
618 757 },
619   -
  758 + /**
  759 + * Callback for manage the previous pass button
  760 + *
  761 + * @method _onPrevClick
  762 + *
  763 + */
620 764 _onPrevClick : function() {
621 765 if(!this.validateCurrentPass(this.selected === 0 ? 0 : (this.selected - 1))) return;
622 766  
... ... @@ -624,7 +768,12 @@
624 768 this.exitAnimation = 'slide-right-animation';
625 769 this.selected = this.selected === 0 ? 0 : (this.selected - 1);
626 770 },
627   -
  771 + /**
  772 + * Callback for manage the next pass button
  773 + *
  774 + * @method _onNextClick
  775 + *
  776 + */
628 777 _onNextClick : function() {
629 778  
630 779 if(!this.validateCurrentPass(this.selected === 2 ? 2 : (this.selected + 1))) return;
... ... @@ -633,23 +782,47 @@
633 782 this.exitAnimation = 'slide-left-animation';
634 783 this.selected = this.selected === 2 ? 2 : (this.selected + 1);
635 784 },
636   -
  785 + /**
  786 + * Callback related to datasource selection from select menu
  787 + *
  788 + * @method _datasourceSelected
  789 + *
  790 + * @param {Event} e
  791 + */
637 792 _datasourceSelected : function(e){
638 793  
639 794 this.$.data_url.value = this.datasets_urls[parseInt(e.target.id)];
640 795 },
641   -
  796 + /**
  797 + * Callback related to data url change
  798 + *
  799 + * @method _dataUrlChanged
  800 + *
  801 + * @param {Event} e
  802 + */
642 803 _dataUrlChanged : function(newValue, oldValue){
643 804 this.$.data_request.generateRequest();
644 805 },
645   -
  806 + /**
  807 + * Callback related to event 'items-slider-controllet_item-selected' fired by items-slider-controllet when the user selects a datalet
  808 + *
  809 + * @method _dataletSelected
  810 + *
  811 + * @param {Event} e
  812 + */
646 813 _dataletSelected : function(e){
647 814 this.selected_datalet = e.detail.datalet;
648 815 this.$.selected_datalet_request.url = this.deepUrl + e.detail.datalet;
649 816 this.$.selected_datalet_request.generateRequest();
650 817  
651 818 },
652   -
  819 + /**
  820 + * Callback related to event 'treeview-controllet-fileds-selected' fired by treeview-controllet when the user selects a field
  821 + *
  822 + * @method _fieldsSelected
  823 + *
  824 + * @param {Event} e
  825 + */
653 826 _fieldsSelected : function(e){
654 827  
655 828 this.$.selected_fields_container.innerHTML = "";
... ... @@ -674,7 +847,13 @@
674 847 ComponentService.getComponent(table_params);
675 848  
676 849 },
677   -
  850 + /**
  851 + * 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
  852 + *
  853 + * @method _fieldsMapped
  854 + *
  855 + * @param {Event} e
  856 + */
678 857 _fieldsMapped : function(e){
679 858  
680 859 var input_mapped_fields = Polymer.dom(this.$.datalet_idm_fields_container).querySelectorAll('draggable-element-controllet[is-target=true]');
... ... @@ -700,11 +879,23 @@
700 879 ComponentService.getComponent(datalet_params);
701 880  
702 881 },
703   -
  882 + /**
  883 + * Callback related to the drag operation in the dataUrl input area. It's used to delete previous value.
  884 + *
  885 + * @method _handleDatasourceDragOver
  886 + *
  887 + * @param {Event} e
  888 + */
704 889 _handleDatasourceDragOver : function(e){
705 890 this.$.data_url.value = "";
706 891 },
707   -
  892 + /**
  893 + * Callback related to the finish button.
  894 + *
  895 + * @method _onFinish
  896 + *
  897 + * @param {Event} e
  898 + */
708 899 _onFinish : function(e){
709 900  
710 901 if(this.selected_fields.length == 0 || this.selected_datalet == ""){
... ...
controllets/draggable-element-controllet/draggable-element-controllet.html
  View file @938d192
  1 +<!--
  2 +@license
  3 +
  4 +The MIT License (MIT)
  5 +
  6 +Copyright (c) 2015 ROUTE-TO-PA CONSORTIUM
  7 +
  8 + Permission is hereby granted, free of charge, to any person obtaining a copy
  9 + of this software and associated documentation files (the "Software"), to deal
  10 + in the Software without restriction, including without limitation the rights
  11 + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  12 + copies of the Software, and to permit persons to whom the Software is
  13 + furnished to do so, subject to the following conditions:
  14 +
  15 + The above copyright notice and this permission notice shall be included in
  16 + all copies or substantial portions of the Software.
  17 +
  18 + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  19 + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  20 + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  21 + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  22 + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  23 + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  24 + THE SOFTWARE.
  25 +-->
  26 +
1 27 <link rel="import" href="../../bower_components/polymer/polymer.html">
2 28 <link rel="import" href="../../bower_components/paper-styles/color.html">
3 29  
  30 +<!--
  31 +`draggable-element-controllet` is a controllet that represents a draggable element. It can be a target or source. When it's a suorce is possible to drag the content in to a
  32 + container( a draggable-element-controllet with target feature active). When it's a target it manage the drag-and event to get the the text and id value of the source content.
  33 + During the dragging phase all the target border will be emphasize to facilitate the drop phase.
  34 +
  35 +Example:
  36 +
  37 + <data-sevc-controllet deep-url="http://192.168.214.128/DEEalerProvider/DEEP/"
  38 + datalets-list-url="http://192.168.214.128/DEEalerProvider/DEEP/datalets-list"
  39 + organization="2" >
  40 + </data-sevc-controllet>
  41 +
  42 +
  43 +@element draggable-element-controllet
  44 +@status beta
  45 +@homepage
  46 +@group controllets
  47 +-->
  48 +
  49 +
4 50 <dom-module id="draggable-element-controllet">
5 51 <template>
6 52  
... ... @@ -123,35 +169,77 @@
123 169  
124 170 is: 'draggable-element-controllet',
125 171  
  172 + /**
  173 + * Fired when the user drags a suorce in to a target element.
  174 + *
  175 + * @event draggable-element-controllet_content-dragged
  176 + */
  177 +
126 178 targets : null,
127 179  
128 180 properties: {
129   -
  181 + /**
  182 + * It's a boolean flag to give to the controllet the role of target.
  183 + *
  184 + * @attribute isTarget
  185 + * @type Boolean
  186 + * @default false
  187 + */
130 188 isTarget : {
131 189 type : Boolean,
132 190 value: false
133 191 },
134   -
  192 + /**
  193 + * It's a string value the represent the current number of target. It will be use in the label section.
  194 + *
  195 + * @attribute number
  196 + * @type Strig
  197 + * @default '0'
  198 + */
135 199 number: {
136 200 type: String,
137 201 value : "0"
138 202 },
139   -
  203 + /**
  204 + * It's the name of the target field
  205 + *
  206 + * @attribute heading
  207 + * @type Strig
  208 + * @default 'Heading'
  209 + */
140 210 heading : {
141 211 type : String,
142 212 value : "Heading"
143 213 },
144   -
  214 + /**
  215 + * It's the description of the target field
  216 + *
  217 + * @attribute description
  218 + * @type Strig
  219 + * @default 'Description'
  220 + */
145 221 description: {
146 222 type: String,
147 223 value: "Description"
148 224 },
149   -
  225 + /**
  226 + * It's the value of the source field
  227 + *
  228 + * @attribute label
  229 + * @type Strig
  230 + * @default 'Label'
  231 + */
150 232 label : {
151 233 type : String,
152 234 value : "Label"
153 235 },
154   -
  236 + /**
  237 + * It's the identifier associated to the source field element
  238 + *
  239 + * @attribute identifier
  240 + * @type Strig
  241 + * @default ''
  242 + */
155 243 identifier : {
156 244 type : String,
157 245 value : ""
... ... @@ -188,7 +276,13 @@
188 276 }*/
189 277 return false;
190 278 },
191   -
  279 + /**
  280 + * Callback associated to event on-drag for the source element. When the user is dragging a source element all the target border will be emphasized.
  281 + *
  282 + * @method _handleOnDrag
  283 + *
  284 + * @param {Event} e
  285 + */
192 286 _handleOnDrag : function(e){
193 287 this.targets = document.querySelectorAll('draggable-element-controllet[is-target=true]');
194 288 for (var i = 0; i < this.targets.length; i++) {
... ... @@ -196,7 +290,14 @@
196 290 }
197 291  
198 292 },
199   -
  293 + /**
  294 + * Callback associated to event on-trak for the source element. When the user stops dragging a source element the relative target is recognized and an event will be
  295 + * fired to broadcast to all listeners the information about the current dragging operation.
  296 + *
  297 + * @method _handleTrack
  298 + *
  299 + * @param {Event} e
  300 + */
200 301 _handleTrack : function(e) {
201 302  
202 303 switch(e.detail.state) {
... ...
controllets/items-slider-controllet/items-slider-controllet.html
  View file @938d192
  1 +<!--
  2 +@license
  3 +
  4 +The MIT License (MIT)
  5 +
  6 +Copyright (c) 2015 ROUTE-TO-PA CONSORTIUM
  7 +
  8 + Permission is hereby granted, free of charge, to any person obtaining a copy
  9 + of this software and associated documentation files (the "Software"), to deal
  10 + in the Software without restriction, including without limitation the rights
  11 + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  12 + copies of the Software, and to permit persons to whom the Software is
  13 + furnished to do so, subject to the following conditions:
  14 +
  15 + The above copyright notice and this permission notice shall be included in
  16 + all copies or substantial portions of the Software.
  17 +
  18 + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  19 + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  20 + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  21 + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  22 + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  23 + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  24 + THE SOFTWARE.
  25 +-->
  26 +
1 27 <link rel="import" href="../../bower_components/polymer/polymer.html">
2 28 <link rel="import" href="../../bower_components/paper-styles/color.html">
3   -<!--<link rel="import" href="../../bower_components/paper-styles/demo.css">-->
4 29  
5 30 <link rel="import" href="../../bower_components/neon-animation/neon-animated-pages.html">
6 31 <link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">
... ... @@ -251,9 +276,6 @@
251 276  
252 277 attached : function(){
253 278 this.selected = 1;
254   - /*this.$.pages.notifyResize();
255   - this.selected = 0;
256   - this.$.pages.notifyResize();*/
257 279 }
258 280 });
259 281  
... ...
controllets/treeview-controllet/treeview-controllet.html
  View file @938d192
  1 +<!--
  2 +The MIT License (MIT)
  3 +
  4 +Copyright (c) 2015 ROUTE-TO-PA CONSORTIUM
  5 +
  6 + Permission is hereby granted, free of charge, to any person obtaining a copy
  7 + of this software and associated documentation files (the "Software"), to deal
  8 + in the Software without restriction, including without limitation the rights
  9 + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  10 + copies of the Software, and to permit persons to whom the Software is
  11 + furnished to do so, subject to the following conditions:
  12 +
  13 + The above copyright notice and this permission notice shall be included in
  14 + all copies or substantial portions of the Software.
  15 +
  16 + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  17 + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  18 + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  19 + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  20 + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  21 + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  22 + THE SOFTWARE.
  23 +-->
  24 +
1 25 <link rel="import" href="../../bower_components/polymer/polymer.html">
2 26 <link rel="import" href="../../bower_components/paper-styles/color.html">
3 27 <link rel="import" href="../../bower_components/paper-checkbox/paper-checkbox.html">
... ...