WebCompDev / COMPONENTS

Commit e0e4a976d80f2a0c8112e9e5d009c1bbaf86dfb6

Authored by Renato De Donato
1 parent 707a1508

data-sevc-controlled: MODIFY-view + michellaneus

Inline Side-by-side
Showing 13 changed files with 361 additions and 1034 deletions
controllets/data-sevc-controllet/data-sevc-controllet.html
  View file @e0e4a97
... ... @@ -19,20 +19,20 @@
19 19 <page-slider-controllet id="slider">
20 20  
21 21 <neon-animatable>
22   -
23   - <dataset-selection-controllet id="dataset_selection" datasets={{datasets}}></dataset-selection-controllet>
24   -
  22 + <template is="dom-if" if={{!modify}}>
  23 + <dataset-selection-controllet id="dataset_selection" datasets={{datasets}} suggested-datasets={{suggestedDatasets}}></dataset-selection-controllet>
  24 + </template>
25 25 </neon-animatable>
26 26  
27 27 <neon-animatable>
28 28  
29   - <tree-view-multi-table-controllet id="tree_view_multi_table" data-url={{dataUrl}}></tree-view-multi-table-controllet>
  29 + <tree-view-multi-table-controllet id="tree_view_multi_table" data-url={{dataUrl}} preselected-fields={{selectedFields}}></tree-view-multi-table-controllet>
30 30  
31 31 </neon-animatable>
32 32  
33 33 <neon-animatable>
34 34  
35   - <datalet-selection-controllet id="datalet_selection" deep-url={{deepUrl}} datalets-list-url={{dataletsListUrl}} data-url={{dataUrl}} fields={{fields}}></datalet-selection-controllet>
  35 + <datalet-selection-controllet id="datalet_selection" deep-url={{deepUrl}} datalets-list-url={{dataletsListUrl}} data-url={{dataUrl}} preselected-datalet={{selectedDatalet}}></datalet-selection-controllet>
36 36  
37 37 </neon-animatable>
38 38  
... ... @@ -69,6 +69,11 @@
69 69 value : undefined
70 70 },
71 71  
  72 + suggestedDatasets : {
  73 + type : Array,
  74 + value : undefined
  75 + },
  76 +
72 77 dataUrl : {
73 78 type : String,
74 79 value : undefined
... ... @@ -77,11 +82,38 @@
77 82 jsonData : {
78 83 type : Object,
79 84 value : undefined
  85 + },
  86 +
  87 + modify : {
  88 + type : Boolean,
  89 + value : false
  90 + },
  91 +
  92 + selectedDatalet : {
  93 + type : String,
  94 + value : undefined
  95 + },
  96 +
  97 + selectedFields : {
  98 + type : Array,
  99 + value : []
  100 + },
  101 +
  102 + dataletPreset : {
  103 + type : Object,
  104 + value : []
80 105 }
81 106  
82 107 },
83 108  
84 109 ready : function(){
  110 + if(this.selectedDatalet){
  111 + this.modify = true;
  112 + this.$.slider.selected = 1;
  113 +// console.log(this.selectedDatalet);
  114 + this.dataUrl = this.dataletPreset["data-url"];
  115 +
  116 + }
85 117 },
86 118  
87 119 _updateSlider : function(e){
... ... @@ -90,18 +122,27 @@
90 122 slider.setTitle("SELECT DATASET", "Search or copy and paste the url of dataset.");
91 123 slider.chevronLeft("invisible");
92 124 slider.chevronRight(false);
93   - this.$.dataset_selection._fireDataUrl();
94   -// http://designpieces.com/palette/google-new-logo-2015-color-palette-hex-and-rgb/
95   - break;
  125 + if(slider.getPrevSelected() == 1)
  126 + slider.chevronRight(true);
  127 +
  128 +// this.$.dataset_selection._fireDataUrl();
  129 +// console.log(this.$.dataset_selection);
  130 + break;
96 131 case 1:
97   - slider.setTitle("SELECT FIELDS", "Select the fields from tree-view. The multi-table will show the values related to the selected fields.");
98   - slider.chevronLeft(true);
  132 + slider.setTitle("SELECT DATA", "Select the fields from tree-view. The multi-table will show the values related to the selected fields.");
  133 + if(this.modify){
  134 + slider.chevronLeft("invisible");
  135 + slider.setAvatar("2");
  136 + }
  137 + else{
  138 + slider.chevronLeft(true);
  139 + }
99 140 slider.chevronRight(false);
100 141 this.$.tree_view_multi_table.ready();
101   - this._allowThirdStep({detail: {fields: tree_view_multi_table.getFlatFields()}})
  142 + this._allowThirdStep({detail: {fields: tree_view_multi_table.getFlatFields()}});
102 143 break;
103 144 case 2:
104   - slider.setTitle("SELECT DATALET", "Select a visualization, fill out inputs and labels (optional).");
  145 + slider.setTitle("SELECT VISUALIZATION", "Select a visualization, fill out inputs and labels (optional).");
105 146 slider.chevronLeft(true);
106 147 slider.chevronRight("invisible");
107 148 //reset when?
... ... @@ -126,6 +167,8 @@
126 167 slider.chevronRight(false);
127 168 }
128 169 });
  170 +
  171 + this.$.datalet_selection.reset();
129 172 },
130 173  
131 174 _allowThirdStep : function(e){
... ...
controllets/data-sevc-controllet/data-sevc-controllet_ddr.html deleted
View file @707a150
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   -/********************************************************************************************************************************
7   -
8   -<link rel="import" href="../../bower_components/polymer/polymer.html">
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   -
14   -<dom-module id="data-sevc-controllet">
15   -
16   - <template>
17   -
18   - <page-slider-controllet id="slider">
19   -
20   - <neon-animatable>
21   -
22   - <dataset-selection-controllet id="dataset_selection" datasets={{datasets}}></dataset-selection-controllet>
23   -
24   - </neon-animatable>
25   -
26   - <neon-animatable>
27   -
28   - <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>
29   -
30   - </neon-animatable>
31   -
32   - <neon-animatable>
33   - <div class="page" style="background-color: #BBDEFB;"><p>Pagina due</p><p>Page two</p><p>P&aacute;gina dos</p></div>
34   - </neon-animatable>
35   -
36   - </page-slider-controllet>
37   -
38   - </template>
39   -
40   - <script>
41   -
42   - Polymer({
43   -
44   - is : 'data-sevc-controllet',
45   -
46   - listeners : {
47   - 'page-slider-controllet_selected' : '_updateSlider',
48   - 'dataset-selection-controllet_data-url' : '_updateDataUrl'
49   - },
50   -
51   - properties : {
52   -
53   - deepUrl : {
54   - type : String,
55   - value : undefined
56   - },
57   -
58   - dataletsListUrl : {
59   - type : String ,
60   - value : undefined
61   - },
62   -
63   - datasets : {
64   - type : Array,
65   - value : undefined
66   - },
67   -
68   - dataUrl : {
69   - type : String,
70   - value : undefined
71   - },
72   -
73   - jsonData : {
74   - type : Object,
75   - value : undefined
76   - }
77   -
78   - },
79   -
80   - ready : function(){
81   - },
82   -
83   - _updateSlider : function(e){
84   - switch (e.detail.selected) {
85   - case 0:
86   - slider.setTitle("SELECT DATASET", "Select, copy and paste or search the url of dataset.");
87   - slider.chevronLeft(false);
88   - slider.chevronRight(false);
89   - this.$.dataset_selection._fireDataUrl();
90   - http://designpieces.com/palette/google-new-logo-2015-color-palette-hex-and-rgb/
91   - break;
92   - case 1:
93   - slider.setTitle("SELECT FIELDS", "Select the fields from tree-view. The multi-table will show the values related to the selected fields.");
94   - slider.chevronRight(false);
95   - this.$.tree_view_multi_table.ready();
96   - break;
97   - case 2:
98   - slider.setTitle("SELECT DATALET", "Sbiricuda antani siempre!");
99   - }
100   - },
101   -
102   - _updateDataUrl : function(e){
103   - this.dataUrl = e.detail.url;
104   -
105   - $.ajax({
106   - url: e.detail.url,
107   - dataType: "json",
108   - success: function(data){
109   -// this.dataUrl = e.detail.url
110   -// this.jsonData = JSON.stringify(data);
111   - slider.chevronRight(true);
112   - },
113   - error: function(){
114   -// this.jsonData = undefined;
115   - slider.chevronRight(false);
116   - }
117   - });
118   - }
119   -
120   - });
121   -
122   - </script>
123   -
124   -</dom-module>
125 0 \ No newline at end of file
controllets/data-sevc-controllet/demo/index.html
  View file @e0e4a97
... ... @@ -39,9 +39,12 @@
39 39 var dataset2 = {description: "", name: "Klassen", url: "http://ckan.routetopa.eu/api/action/datastore_search?resource_id=dfd27de5-0790-466c-af59-6a82509e7fbb"};
40 40 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"};
41 41 var datasets = [dataset1, dataset2, dataset3];
  42 + var s_datasets = [dataset1, dataset3];
42 43  
43 44 var dsc = document.getElementById('dsc');
44 45 dsc.setAttribute("datasets", JSON.stringify(datasets));
  46 +
  47 + dsc.setAttribute("suggested-datasets", JSON.stringify(s_datasets));
45 48 </script>
46 49  
47 50 </body>
... ...
controllets/datalet-selection-controllet/datalet-selection-controllet.html
  View file @e0e4a97
... ... @@ -23,6 +23,11 @@
23 23 <template>
24 24  
25 25 <style is="custom-style">
  26 + :host {
  27 + --paper-dropdown-menu-icon: {
  28 + color: #2196F3;
  29 + };
  30 + }
26 31  
27 32 #datalet_selection_container {
28 33 display: flex;
... ... @@ -35,14 +40,16 @@
35 40 position: relative;
36 41 height: 100vh;
37 42 margin-left: 32px;
38   - width: 344px;
  43 + /*width: 344px;*/
  44 + min-width: 258px;
39 45 }
40 46  
41 47 #datalet_selection_labels {
42 48 position: relative;
43 49 height: 100vh;
44 50 margin-left: 32px;
45   - width: 344px;
  51 + /*width: 344px;*/
  52 + min-width: 258px;
46 53 }
47 54  
48 55 #datalet_selection_column {
... ... @@ -62,6 +69,7 @@
62 69  
63 70 #datalet_selection_comment{
64 71 width: 100%;
  72 + /*height: 112px;*/
65 73 margin-bottom: 32px;
66 74 }
67 75  
... ... @@ -75,39 +83,54 @@
75 83 /*margin-right: 16px;*/
76 84 }
77 85  
78   - .input_name{
79   - height: 16px;
80   - padding: 16px;
81   - /*background-color: #B6B6B6;*/
  86 + /*.input_name{*/
  87 + /*height: 16px;*/
  88 + /*padding: 16px;*/
  89 + /*/!*background-color: #B6B6B6;*!/*/
82 90  
83   - background-color: #2196F3;
84   - color: #FFFFFF;
85   - font-weight: 700;
86   - }
  91 + /*background-color: #2196F3;*/
  92 + /*color: #FFFFFF;*/
  93 + /*font-weight: 700;*/
  94 + /*}*/
87 95  
88 96 .input_header{
89   - /*height: 16px;*/
90   - padding: 16px;
  97 + height: 32px;
  98 + padding-top: 16px;
  99 + /*padding: 16px;*/
91 100 background-color: #B6B6B6;
92 101 text-align: center;
93 102 font-weight: 700;
94 103 }
95 104  
96 105 .info_button {
  106 + /*background-color: red;*/
97 107 position: absolute;
98   - top: 4px;
  108 + top: 18px;
99 109 right: 0px;
100 110 }
101 111  
102 112 paper-textarea {
  113 + display: inline-block;
103 114 height: 48px;
104   - padding: 0px 8px;
  115 + /*padding: 0px 8px;*/
  116 + width: 210px;
  117 + padding-left: 8px;
  118 + padding-bottom: 8px;
105 119 --paper-input-container-focus-color: #2196F3;
106 120 }
107 121  
  122 + #datalet_selection_comment paper-textarea {
  123 + padding-bottom: 0px;
  124 + width: calc(100% - 16px);
  125 + }
  126 +
108 127 paper-dropdown-menu {
  128 + /*display: inline-block;*/
109 129 height: 48px;
110   - padding: 0px 8px;
  130 + width: 210px;;
  131 + /*padding: 0px 8px;*/
  132 + padding-left: 8px;
  133 + padding-bottom: 8px;
111 134 --paper-input-container-focus-color: #2196F3;
112 135 }
113 136  
... ... @@ -117,9 +140,11 @@
117 140 }
118 141  
119 142 paper-icon-button {
120   - /*color: #2196F3;*/
121   - color: #FFFFFF;
  143 + /*display: inline-block;*/
  144 + color: #2196F3;
  145 + /*color: #FFFFFF;*/
122 146 --paper-icon-button-ink-color: #2196F3;
  147 + margin: 0px;
123 148 /*padding: 0px;*/
124 149 }
125 150  
... ... @@ -149,26 +174,29 @@
149 174 <iron-ajax id="selectedDatalet_request" on-response="_handleSelectedDatalet"></iron-ajax>
150 175  
151 176 <div id="datalet_selection_container">
152   - <items-vslider-controllet datalets-list-url={{dataletsListUrl}}></items-vslider-controllet>
  177 + <items-vslider-controllet id="vslider" datalets-list-url={{dataletsListUrl}} preselected-datalet={{preselectedDatalet}}></items-vslider-controllet>
153 178  
154 179  
155 180 <paper-material id="datalet_selection_inputs" elevation="5">
156 181 <div class="input_header">INPUTS</div>
157   - <template is="dom-repeat" items="{{inputs}}" index-as="index">
  182 + <template is="dom-repeat" items="{{inputs}}" index-as="ddl_index">
158 183 <div class="inputs">
159   - <div class="input_name">
160   - {{item.name}}
161   - <div class="info_button">
162   - <paper-icon-button id="info_button" on-click="_showInfo" icon="info-outline" title="{{item.name}} info"></paper-icon-button>
163   - </div>
164   - </div>
165   - <paper-dropdown-menu no-label-float label={{item.name}}>
  184 + <!--<div class="input_name">-->
  185 + <!--{{item.name}}-->
  186 + <!--<div class="info_button">-->
  187 + <!--<paper-icon-button id="info_button" on-click="_showInfo" icon="info-outline" title="{{item.name}} info"></paper-icon-button>-->
  188 + <!--</div>-->
  189 + <!--</div>-->
  190 + <paper-dropdown-menu id={{ddl_index}} label={{item.name}}>
166 191 <paper-menu class="dropdown-content">
167   - <template is="dom-repeat" items={{selectableFields}}>
168   - <paper-item id={{index}} on-tap="_loadDatalet">{{item}}</paper-item>
  192 + <template is="dom-repeat" items={{fields}}>
  193 + <paper-item id={{index}} on-tap="_addInput">{{item}}</paper-item>
169 194 </template>
170 195 </paper-menu>
171 196 </paper-dropdown-menu>
  197 + <div class="info_button">
  198 + <paper-icon-button id="info_button" on-click="_showInfo" icon="info-outline" title="{{item.name}} info"></paper-icon-button>
  199 + </div>
172 200 </div>
173 201 </template>
174 202 </paper-material>
... ... @@ -177,23 +205,29 @@
177 205 <div class="input_header">LABELS</div>
178 206 <template is="dom-repeat" items="{{labels}}" index-as="index">
179 207 <div class="inputs">
180   - <div class="input_name">
181   - {{item.name}}
182   - <div class="info_button">
183   - <paper-icon-button id="info_button" on-click="_showInfo" icon="info-outline" title="{{item.name}} info"></paper-icon-button>
184   - </div>
  208 + <!--<div class="input_name">-->
  209 + <!--{{item.name}}-->
  210 + <!--<div class="info_button">-->
  211 + <!--<paper-icon-button id="info_button" on-click="_showInfo" icon="info-outline" title="{{item.name}} info"></paper-icon-button>-->
  212 + <!--</div>-->
  213 + <!--</div>-->
  214 + <paper-textarea label={{item.name}}></paper-textarea>
  215 + <div class="info_button">
  216 + <paper-icon-button id="info_button" on-click="_showInfo" icon="info-outline" title="{{item.name}} info"></paper-icon-button>
185 217 </div>
186   - <paper-textarea no-label-float label={{item.name}}></paper-textarea>
187 218 </div>
188 219 </template>
189 220 </paper-material>
190 221  
191 222  
192 223 <div id="datalet_selection_column">
193   - <paper-material id="datalet_selection_comment" elevation="5">
194   - <div class="input_header">COMMENT</div>
195   - <paper-textarea id="comment" no-label-float maxlength="100" label="comment (max 100 characters)"></paper-textarea>
196   - </paper-material>
  224 +
  225 + <template is="dom-if" if={{modify}}>
  226 + <paper-material id="datalet_selection_comment" elevation="5">
  227 + <div class="input_header">COMMENT</div>
  228 + <paper-textarea id="comment" no-label-float maxlength="100" label="comment (max 100 characters)"></paper-textarea>
  229 + </paper-material>
  230 + </template>
197 231  
198 232 <paper-material id="datalet_selection_datalet" elevation="5">
199 233 <div class="input_header">DATALET PREVIEW</div>
... ... @@ -232,6 +266,11 @@
232 266 value : undefined
233 267 },
234 268  
  269 + preselectedDatalet : {
  270 + type : String,
  271 + value : undefined
  272 + },
  273 +
235 274 inputs : {
236 275 type : Array,
237 276 value : []
... ... @@ -252,20 +291,25 @@
252 291 value : []
253 292 },
254 293  
255   - selectableFields : {
256   - type : Array,
257   - value : []
258   - },
  294 +// selectableFields : {
  295 +// type : Array,
  296 +// value : []
  297 +// },
259 298  
260 299 dataUrl : {
261 300 type : String,
262 301 value : undefined
  302 + },
  303 +
  304 + modify : {
  305 + type : Boolean,
  306 + value : false
263 307 }
264 308  
265 309 },
266 310  
267 311 listeners: {
268   - 'items-vslider-controllet_selected-datalet': '_dataletSelected'
  312 + 'items-vslider-controllet_selected-datalet': '_selectDatalet'
269 313 // 'tree-view-controllet_selected-fields': '_updateSelectedFields'
270 314 },
271 315  
... ... @@ -275,20 +319,38 @@
275 319 $(this.$.datalet_selection_labels).perfectScrollbar();
276 320 $(this.$.datalet_selection_datalet).perfectScrollbar();
277 321  
278   - this.selectableFields = this._copy(this.fields);
  322 + if(this.preselectedDatalet){
  323 + this.modify = true;
  324 + this._preselectDatalet();
  325 + this.preselectedDatalet = undefined;
  326 + }
279 327 },
280 328  
281 329 attached : function() {
282 330 this._resize();
283 331 var that = this;
284 332 window.addEventListener("resize", function() { that._resize(); });
  333 +
  334 +// var inputs = document.getElementsByTagName("paper-dropdown-menu");
  335 +// console.log(inputs);
  336 +// for(var i in inputs)
  337 +// console.log(i);
  338 +// for(var i=0; i < inputs.length; i++)
  339 +// console.log($(inputs[i]).children("paper-menu"));
285 340 },
286 341  
287 342 setFields : function(fields) {
288 343 this.fields = fields;
289 344 },
290 345  
291   - _dataletSelected : function(e){
  346 + reset : function() {
  347 + this.selectedDatalet = undefined;
  348 + this.inputs = [];
  349 + this.labels = [];
  350 + this.$.datalet_selection_datalet_placeholder.innerHTML = "";
  351 + },
  352 +
  353 + _selectDatalet : function(e){
292 354 this.$.add_button.setAttribute("disabled", "true");
293 355  
294 356 this.selectedDatalet = e.detail.datalet;
... ... @@ -304,19 +366,27 @@
304 366 // this.labels = [];
305 367 // }
306 368  
307   - this.$.datalet_selection_datalet_placeholder.innerHTML = "";
308   - this.selectedFields = [];
309   - this.selectableFields = this._copy(this.fields);
  369 +// this.$.datalet_selection_datalet_placeholder.innerHTML = "";
  370 +// this.selectedFields = [];
  371 + },
310 372  
311   -// this.async(function(){this._loadPreview();}, 1000);
312   - this._loadPreview();
  373 + _preselectDatalet : function() {
  374 + this.$.add_button.innerText = "MODIFY DATALET";
  375 +
  376 +
  377 + this.selectedDatalet = this.preselectedDatalet;
  378 + this.selectedFields = this._copy(this.fields);
  379 +
  380 + var inputs = document.getElementsByTagName("paper-dropdown-menu");
  381 + for(var i=0; i < inputs.length; i++)
  382 + $(inputs[i]).find("paper-menu")[0].select(i);
  383 +
  384 + this._loadDatalet(this.selectedFields);
313 385 },
314 386  
315 387 _handleSelectedDatalet : function(e){
  388 + this.$.datalet_selection_datalet_placeholder.innerHTML = "";
316 389  
317   -
318   -// console.log(e.detail.response.idm.inputs);
319   -// console.log(e.detail.response.idm.inputs.layouts.input);
320 390 var inputs = e.detail.response.idm.inputs.input;
321 391 var labels = e.detail.response.idm.inputs.layouts.input;
322 392  
... ... @@ -327,78 +397,70 @@
327 397 inputs = [];
328 398 for(var i in this.fields)
329 399 inputs.push({name: name + " " + i, description: description, selection: selection});
330   -
331 400 }
332 401  
333 402 this.inputs = inputs;
334 403 this.labels = labels;
335   - },
336 404  
337   - _copy : function(o) {
338   - var out, v, key;
339   - out = Array.isArray(o) ? [] : {};
340   - for (key in o) {
341   - v = o[key];
342   - out[key] = (typeof v === "object") ? this._copy(v) : v;
343   - }
344   - return out;
  405 +// if(this.inputs[0].selection == "*")
  406 +// this.selectedFields = [];
  407 +// else
  408 + this.selectedFields = new Array(inputs.length);
345 409 },
346 410  
347   - _loadDatalet : function(e){
  411 + _addInput : function(e){
348 412 var selectedFields = this._copy(this.selectedFields);
349   - var selectableFields = this._copy(this.selectableFields);
350   -
351   - if($(e.target).parents("paper-dropdown-menu")[0].selectedItem) {
352   - var prevSelected = $(e.target).parents("paper-dropdown-menu")[0].selectedItem.innerText;
353   - var index = this.selectedFields.indexOf(prevSelected);
354   - selectedFields.splice(index, 1);
355   -// selectableFields.push(prevSelected);
356   - }
357 413  
358   - var selected = e.target.innerText;
359   -// var index = this.selectableFields.indexOf(selected);
360   -// selectableFields.splice(index, 1);
361   - selectedFields.push(selected);
  414 + var index = $(e.target).parents("paper-dropdown-menu")[0].id;
  415 + selectedFields[index] = e.target.innerText;
362 416  
363   - this.selectedFields = selectedFields;
364   - this.selectableFields = selectableFields;
  417 + this.selectedFields = this._copy(selectedFields);
365 418  
366   - console.log(this.selectedFields);
367   - console.log(this.selectableFields);
  419 + var load = true;
368 420  
369   - var load = false;
370   - if(this.selectedFields.length > 0 && this.inputs[0].selection == "*")
371   - load = true;
372   - else if(this.selectedFields.length == this.inputs.length)
373   - load = true;
  421 + if(this.inputs[0].selection == "*"){
  422 + var temp = [];
  423 + for (var i = 0; i < selectedFields.length; i++)
  424 + if(selectedFields[i])
  425 + temp.push(selectedFields[i]);
  426 + selectedFields = temp;
  427 + }
  428 + else {
  429 + for (var i = 0; i < selectedFields.length; i++)
  430 + if (!selectedFields[i]) {
  431 + load = false;
  432 + break;
  433 + }
  434 + }
374 435  
375 436 if(load){
376   - var params = {'data-url' : this.dataUrl};
  437 + this._loadDatalet(selectedFields);
  438 + }
377 439  
378   - var dataletParams ={
379   - component : this.selectedDatalet+"-datalet",
380   - params : params,
381   - fields : this.selectedFields,
382   - placeHolder : datalet_selection_datalet_placeholder
383   - };
  440 +// $("#base_datalet_container").html("");
  441 +// $("#base_datalet_container").css('visibility','hidden');
  442 +// $("#base_datalet_container").css('padding','0px');
  443 +// $("#base_datalet_container").css('height','0px');
  444 +// console.log($("#base_datalet_container"));
  445 + },
384 446  
385   - ComponentService.deep_url = this.deepUrl;
386   - ComponentService.getComponent(dataletParams);
  447 + _loadDatalet : function(selectedFields){
  448 + var params = {'data-url' : this.dataUrl};
387 449  
388   - this.async(function(){this.$.add_button.removeAttribute("disabled");}, 1111);
389   - }
  450 + var dataletParams ={
  451 + component : this.selectedDatalet+"-datalet",
  452 + params : params,
  453 + fields : selectedFields,
  454 + placeHolder : this.$.datalet_selection_datalet_placeholder
  455 + };
390 456  
391   -// 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";
392   -// this.$.datalet_selection_datalet_placeholder.innerHTML = "<"+this.selectedDatalet+"-datalet data-url=\""+this.dataUrl+"\" fields='"+JSON.stringify(this.fields)+"'></"+this.selectedDatalet+">";
  457 + ComponentService.deep_url = this.deepUrl;
  458 + ComponentService.getComponent(dataletParams);
393 459  
394   -// $("#base_datalet_container").html("");
395   - $("#base_datalet_container").css('visibility','hidden');
396   - $("#base_datalet_container").css('padding','0px');
397   - $("#base_datalet_container").css('height','0px');
398   -// console.log($("#base_datalet_container"));
  460 + this.async(function(){this.$.add_button.removeAttribute("disabled");}, 1111);
399 461 },
400 462  
401   - _addDatalet : function(){console.log("we");
  463 + _addDatalet : function(){
402 464  
403 465 var data = {
404 466 dataUrl : this.dataUrl,
... ... @@ -414,6 +476,16 @@
414 476  
415 477 },
416 478  
  479 + _copy : function(o) {
  480 + var out, v, key;
  481 + out = Array.isArray(o) ? new Array(o.length) : {};
  482 + for (key in o) {
  483 + v = o[key];
  484 + out[key] = (typeof v === "object") ? this._copy(v) : v;
  485 + }
  486 + return out;
  487 + },
  488 +
417 489 _resize : function(){
418 490 var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16;
419 491 h = h - 64 - 8; //height with page scroller
... ... @@ -422,7 +494,10 @@
422 494  
423 495 $("#datalet_selection_inputs").height(h);
424 496 $("#datalet_selection_labels").height(h);
425   - $("#datalet_selection_datalet").height(h-132);
  497 + if(this.modify)
  498 + $("#datalet_selection_datalet").height(h-128);
  499 + else
  500 + $("#datalet_selection_datalet").height(h);
426 501 }
427 502  
428 503 });
... ...
controllets/dataset-selection-controllet/dataset-selection-controllet.html
  View file @e0e4a97
... ... @@ -33,6 +33,12 @@
33 33 <template>
34 34  
35 35 <style is="custom-style">
  36 + :host {
  37 + --paper-dropdown-menu-icon: {
  38 + color: #2196F3;
  39 + };
  40 + }
  41 +
36 42 paper-tabs {
37 43 font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
38 44 font-size: 16px;
... ... @@ -56,11 +62,16 @@
56 62 color: #B6B6B6;
57 63 }
58 64  
59   - /*paper-dropdown-menu {*/
60   - /*width: 45%;*/
61   - /*margin-bottom: 32px;*/
62   - /*--paper-input-container-focus-color: #2196F3;*/
63   - /*}*/
  65 + paper-dropdown-menu {
  66 + /*display: block;*/
  67 + width: 45%;
  68 + margin-bottom: 32px;
  69 + --paper-input-container-focus-color: #2196F3;
  70 + }
  71 +
  72 + paper-dropdown-menu paper-item {
  73 + white-space: nowrap;
  74 + }
64 75  
65 76 paper-input-search {
66 77 width: 45%;
... ... @@ -77,10 +88,21 @@
77 88 color: #FFFFFF;
78 89 }
79 90  
80   - paper-menu{
81   - /*visibility: visible ! important;*/
  91 + .ddl_container {
  92 + position: relative;
82 93 }
83 94  
  95 + .info_button {
  96 + /*background-color: red;*/
  97 + position: absolute;
  98 + top: 18px;
  99 + left: 45%;
  100 + }
  101 +
  102 + /*paper-menu{*/
  103 + /*/!*visibility: visible ! important;*!/*/
  104 + /*}*/
  105 +
84 106 /*paper-item[focused] {*/
85 107 /*background: #FFFFFF;*/
86 108 /*}*/
... ... @@ -129,7 +151,7 @@
129 151 <paper-material id="material_container" elevation="5">
130 152  
131 153 <paper-tabs selected="{{selected}}" on-tap="_loadTreeMap">
132   - <paper-tab noink>SELECT DATA SOURCE</paper-tab>
  154 + <paper-tab noink>LIST VIEW</paper-tab>
133 155 <paper-tab noink>TREE MAP VIEW</paper-tab>
134 156 <paper-tab noink disabled>MOST POPULAR</paper-tab>
135 157 </paper-tabs>
... ... @@ -139,20 +161,42 @@
139 161 <neon-animatable>
140 162  
141 163 <div id="div_selection">
  164 + <div class="ddl_container">
  165 + <paper-input-search id="input_search" label="Available datasets">
  166 + <paper-menu class="dropdown-content">
  167 + <template is="dom-repeat" items={{filteredDatasets}} as="dataset">
  168 + <paper-item id={{index}} on-tap="_selectDataUrl">{{dataset.name}}</paper-item>
  169 + <!--<paper-item id={{index}} on-tap="_selectDataUrl">{{_addHTMLSpace(dataset.name)}}</paper-item>-->
  170 + </template>
  171 + </paper-menu>
  172 + </paper-input-search>
  173 +
  174 + <div class="info_button">
  175 + <paper-icon-button id="info_dataset" disabled on-click="_showInfo" icon="info-outline" title="dataset info"></paper-icon-button>
  176 + </div>
  177 + </div>
  178 +
  179 + <template is="dom-if" if={{_isSuggested()}}>
  180 + <div class="ddl_container">
  181 + <paper-dropdown-menu label="Suggested datasets">
  182 + <paper-menu class="dropdown-content">
  183 + <template is="dom-repeat" items={{suggestedDatasets}} as="dataset">
  184 + <paper-item id={{index}} on-tap="_selectDataUrl">{{dataset.name}}</paper-item>
  185 + <!--<paper-item id={{index}} on-tap="_selectDataUrl">{{_addHTMLSpace(dataset.name)}}</paper-item>-->
  186 + </template>
  187 + </paper-menu>
  188 + </paper-dropdown-menu>
  189 +
  190 + <div class="info_button">
  191 + <paper-icon-button id="info_s_dataset" disabled on-click="_showInfo" icon="info-outline" title="dataset info"></paper-icon-button>
  192 + </div>
  193 + </div>
  194 +
  195 + </template>
142 196  
143   - <paper-input-search label="Available datasets">
144   - <paper-menu class="dropdown-content">
145   - <template is="dom-repeat" items={{filteredDatasets}} as="dataset">
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>-->
148   - </template>
149   - </paper-menu>
150   - </paper-input-search>
151   -
152   - <paper-icon-button id="info_button" disabled on-click="_showInfo" icon="info-outline" title="dataset info"></paper-icon-button>
153   - <!--aggiustami anche dialog...-->
154 197 <paper-textarea id="selected_url" label="Selected url" value={{dataUrl}}></paper-textarea>
155 198  
  199 + <!--aggiustami anche dialog...-->
156 200 <paper-dialog id="dialog_info">
157 201 <h2 id="dialog_name"></h2>
158 202 <p id="dialog_description"></p>
... ... @@ -163,11 +207,13 @@
163 207  
164 208 <neon-animatable>
165 209 <div id="div_datasetexplorer">
166   - <datasetexplorer-datalet class="datasetexplorer" data-url="/oxwall_x.y.z/openwall/api/datasetTree" fields='["result,provider_name","result,organization_name","result,package_name","result,resource_name","result,url","result,w"]'></datasetexplorer-datalet>
  210 + <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>
  211 + <!--<datasetexplorer-datalet class="datasetexplorer" data-url="/oxwall_x.y.z/openwall/api/datasetTree" fields='["result,provider_name","result,organization_name","result,package_name","result,resource_name","result,url","result,w"]'></datasetexplorer-datalet>-->
167 212 </div>
168 213 </neon-animatable>
169 214  
170 215 <neon-animatable>
  216 + <!--popular-->
171 217 </neon-animatable>
172 218  
173 219 </neon-animated-pages>
... ... @@ -199,6 +245,11 @@
199 245 value : []
200 246 },
201 247  
  248 + suggestedDatasets : {
  249 + type : Array,
  250 + value : undefined
  251 + },
  252 +
202 253 dataUrl : {
203 254 type : String,
204 255 value : undefined,
... ... @@ -224,6 +275,12 @@
224 275 this.filteredDatasets = this.datasets;
225 276 },
226 277  
  278 + _isSuggested : function(){
  279 + if(this.suggestedDatasets)
  280 + return true;
  281 + return false;
  282 + },
  283 +
227 284 _filterDatasets : function(e){
228 285 var filter = e.detail.inputValue;
229 286 var filteredDatasets = [];
... ... @@ -236,8 +293,8 @@
236 293 },
237 294  
238 295 _loadTreeMap : function(){
239   - if(this.selected == 0 && this.$.div_datasetexplorer.innerHTML == "")
240   - this.$.div_datasetexplorer.innerHTML = "<datasetexplorer-datalet class=\"datasetexplorer\" data-url=\"/oxwall_x.y.z/openwall/api/datasetTree\" fields='[\"result,provider_name\",\"result,organization_name\",\"result,package_name\",\"result,resource_name\",\"result,url\",\"result,w\"]'></datasetexplorer-datalet>";
  296 +// if(this.selected == 0 && this.$.div_datasetexplorer.innerHTML == "")
  297 +// this.$.div_datasetexplorer.innerHTML = "<datasetexplorer-datalet class=\"datasetexplorer\" data-url=\"/oxwall_x.y.z/openwall/api/datasetTree\" fields='[\"result,provider_name\",\"result,organization_name\",\"result,package_name\",\"result,resource_name\",\"result,url\",\"result,w\"]'></datasetexplorer-datalet>";
241 298 },
242 299  
243 300 _selectDataUrl_treeMap : function(e){
... ... @@ -258,15 +315,16 @@
258 315 _selectDataUrl : function(e){
259 316 var dataset = this.filteredDatasets[parseInt(e.target.id)]
260 317  
  318 +// this.$.input_search.value = "";
261 319 this.dataUrl = dataset.url;
262 320  
263   - if(dataset.description != ""){
264   - this.$.info_button.removeAttribute("disabled");
265   - this.$.dialog_name.innerHTML = dataset.name;
266   - this.$.dialog_description.innerHTML = dataset.description;
267   - }
268   - else
269   - this.$.info_button.setAttribute("disabled", "true");
  321 +// if(dataset.description != ""){
  322 +// this.$.info_button.removeAttribute("disabled");
  323 +// this.$.dialog_name.innerHTML = dataset.name;
  324 +// this.$.dialog_description.innerHTML = dataset.description;
  325 +// }
  326 +// else
  327 +// this.$.info_button.setAttribute("disabled", "true");
270 328 },
271 329  
272 330 _showInfo : function(){
... ...
controllets/dataset-selection-controllet/paper-input-search.html
  View file @e0e4a97
... ... @@ -321,13 +321,13 @@ respectively.
321 321 }
322 322 },
323 323  
324   - _fireInputValue: function() {console.log(this.inputValue);
  324 + _fireInputValue: function() {//console.log(this.inputValue);
325 325 if(this.fireInputValue) {//change NO DDL
326 326 this.fire('paper-input-search_input-value', {inputValue: this.inputValue});
327 327 if(this.contentElement.selectedItem){
328 328 // this._setSelectedItem(null);
329 329 this.contentElement.select(-1);
330   - console.log("deselected");
  330 +// console.log("deselected");
331 331 }
332 332 }
333 333  
... ...
controllets/items-vslider-controllet/items-vslider-controllet.html
  View file @e0e4a97
... ... @@ -108,7 +108,7 @@
108 108  
109 109 <paper-material id="items_vslider_container" elevation="5">
110 110  
111   - <paper-input id="items_vslider_search" value={{filter}} no-label-float label="search datalet">
  111 + <paper-input id="items_vslider_search" value={{filter}} no-label-float label="search">
112 112 <iron-icon class="search" icon="search" prefix></iron-icon>
113 113 <paper-icon-button class="clear" suffix on-click="_clearInput" icon="clear"></paper-icon-button>
114 114 </paper-input>
... ... @@ -152,6 +152,11 @@
152 152 value : undefined
153 153 },
154 154  
  155 + preselectedDatalet : {
  156 + type : String,
  157 + value : undefined
  158 + },
  159 +
155 160 datalets : {
156 161 type : Array,
157 162 value : []
... ... @@ -182,6 +187,11 @@
182 187 // this._resize();
183 188 // var that = this;
184 189 // window.addEventListener("resize", function() { that._resize(); });
  190 +
  191 + if(this.preselectedDatalet){
  192 + this._preselectDatalet();
  193 + this.preselectedDatalet = undefined;
  194 + }
185 195 },
186 196  
187 197 _clearInput : function() {
... ... @@ -238,7 +248,7 @@
238 248 dataletCard.getElementsByClassName("legend")[0].className = dataletCard.getElementsByClassName("legend")[0].className.replace(" selected", "");
239 249 }
240 250  
241   - if(e.currentTarget.id != this.selectedDatalet){
  251 + if (e.currentTarget.id != this.selectedDatalet) {
242 252 e.currentTarget.elevation = "5";
243 253 e.currentTarget.getElementsByClassName("legend")[0].className = e.currentTarget.getElementsByClassName("legend")[0].className + " selected";
244 254 this.selectedDatalet = e.currentTarget.id;
... ... @@ -249,6 +259,14 @@
249 259 this.fire('items-vslider-controllet_selected-datalet', {datalet: this.selectedDatalet});
250 260 },
251 261  
  262 + _preselectDatalet : function(){
  263 + var dataletCard = document.getElementById(this.preselectedDatalet);
  264 + dataletCard.elevation = "5";
  265 + dataletCard.getElementsByClassName("legend")[0].className = dataletCard.getElementsByClassName("legend")[0].className + " selected";
  266 + this.selectedDatalet = this.preselectedDatalet;
  267 +
  268 + this.fire('items-vslider-controllet_selected-datalet', {datalet: this.selectedDatalet});
  269 + },
252 270  
253 271 _getImageUrl : function(index){
254 272 return this.datalets[index].imageUrl;
... ...
controllets/items-vslider-controllet/items-vslider-controllet2.html deleted
View file @707a150
1   -<link rel="import" href="../../bower_components/polymer/polymer.html" />
2   -
3   -<!--<link rel="import" href="../../bower_components/neon-animation/neon-animation.html">-->
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">
7   -
8   -<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
9   -<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
10   -<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
11   -
12   -<link rel="import" href="../../bower_components/paper-material">
13   -
14   -<dom-module id="items-vslider-controllet">
15   -
16   - <template>
17   -
18   - <style is="custom-style">
19   - paper-icon-button{
20   - color: #00BCD4;
21   - height: 48px;
22   - width: 48px;
23   - --paper-icon-button-ink-color: #00BCD4;
24   - }
25   -
26   - paper-icon-button:hover{
27   - }
28   -
29   - .header{
30   - width: 100%;
31   - /*padding-bottom: 8px;*/
32   - /*border-bottom: 2px solid #B6B6B6;*/
33   - }
34   -
35   - .chevron-left{
36   - float: left;
37   - margin-top: 8px;
38   - }
39   -
40   - .chevron-right{
41   - float: right;
42   - margin-top: 8px;
43   - }
44   -
45   - .box{
46   - overflow: auto;
47   - }
48   -
49   - .avatar {
50   - display: inline-block;
51   - height: 64px;
52   - width: 64px;
53   - border-radius: 50%;
54   - background: #2196F3;
55   - color: #FFFFFF;
56   - line-height: 64px;
57   - font-size: 32px;
58   - vertical-align: middle;
59   - text-align: center;
60   - }
61   -
62   - .text {
63   - display: inline-block;
64   - height: 64px;
65   - vertical-align: middle;
66   - padding-left: 20px;
67   - }
68   -
69   - .title {
70   - font-size: 32px;
71   - color: #2196F3;
72   - }
73   -
74   - .subtitle {
75   - font-size: 16px;
76   - color: #727272;
77   - }
78   - </style>
79   -
80   - <iron-ajax
81   - auto
82   - handle-as="json"
83   - url={{dataletsListUrl}}
84   - on-response="getDatalets">
85   - </iron-ajax>
86   -
87   - <div class="header">
88   - <paper-icon-button class="chevron-left" on-click="_onPrevClick" icon="chevron-left"></paper-icon-button>
89   - <paper-icon-button class="chevron-right" on-click="_onNextClick" icon="chevron-right"></paper-icon-button>
90   -
91   - <div class="box">
92   - <div class="avatar">[[avatar]]</div>
93   - <div class="text">
94   - <div class="title">[[title]]</div>
95   - <div class="subtitle">[[subtitle]]</div>
96   - </div>
97   - </div>
98   - </div>
99   -
100   - <paper-material id="material_tree_view" elevation="5">
101   -
102   - <neon-animated-pages on-neon-animation-finish="_onNeonAnimationFinish" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
103   - <!--<neon-animated-pages on-neon-animation-finish="_onNeonAnimationFinish" selected="[[selected]]" entry-animation="slide-from-bottom-animation" exit-animation="slide-down-animation">-->
104   -
105   - <template is="dom-repeat" items="{{pages}}" as="page">
106   -
107   - <neon-animatable>
108   -
109   - <template is="dom-repeat" items="{{dataletsPerPage}}" as="index">
110   -
111   - <!--<span> {{item.name}}</span>-->
112   - <!--<img src={{getdatalets.image}}>-->
113   - <img src={{_getImage(page,index)}}>
114   -
115   - </template>
116   - </neon-animatable>
117   -
118   - <!--<neon-animated-pages id="neon_animated_pages" class="flex" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">-->
119   - <!--<template is="dom-repeat" items="{{pages}}" as="page">-->
120   - <!--<neon-animatable>-->
121   - <!--<template is="dom-repeat" items="{{dataletsPerPage}}" as="index">-->
122   - <!--<paper-material elevation="1" class='content-card'>-->
123   - <!--<div class="legend"><span>sbiricuda siempre!</span></div>-->
124   - <!--<div class="card-content-image">-->
125   - <!--<img src="{{_getImageUrl(page,index)}}">-->
126   - <!--</div>-->
127   - <!--</paper-material>-->
128   - <!--</template>-->
129   - <!--</neon-animatable>-->
130   - <!--</template>-->
131   - <!--</neon-animated-pages>-->
132   -
133   - </template>
134   -
135   - </neon-animated-pages>
136   -
137   - </paper-material>
138   -
139   - </template>
140   -
141   - <script>
142   -
143   - Polymer({
144   -
145   - is : 'items-vslider-controllet',
146   -
147   - properties : {
148   -
149   - entryAnimation : {
150   - type : String,
151   - value : ""
152   - },
153   -
154   - exitAnimation : {
155   - type : String,
156   - value : ""
157   - },
158   -
159   - selected : {
160   - type : Number,
161   - value : 0
162   - },
163   -
164   - title : {
165   - type : String,
166   - value : ""
167   - },
168   -
169   - subtitle : {
170   - type : String,
171   - value : ""
172   - },
173   -
174   - avatar : {
175   - type : String,
176   - value : "1"
177   - },
178   -
179   - datalets : {
180   - type : Array,
181   - value : []
182   - },
183   -
184   - pages : {
185   - type : Array,
186   - value : []
187   - },
188   -
189   - dataletsPerPage : {
190   - type : Array,
191   - value : []
192   - }
193   -
194   -
195   - //dataletsListUrl or datalets as input
196   - },
197   -
198   - getDatalets : function(e){//imageUrllllllllllllllllllllllllllllllllllllllll
199   - datalets = new Array();
200   - for(var i=0; i < e.detail.response.length; i++){
201   - var datalet = { name : e.detail.response[i].name, image : e.detail.response[i].url + e.detail.response[i].name + ".png" };
202   - datalets.push(datalet);
203   - }
204   - this.datalets = datalets;
205   -
206   - console.log(this.datalets);
207   - this.pages = [0,1,2];
208   - this.dataletsPerPage = [0,1,2];
209   -
210   - },
211   -
212   -// getName : function(name){
213   -// return name;
214   -// },
215   -//
216   - _getImage : function(page, index){
217   - console.log(this.datalets[3*page+index].image);
218   - return this.datalets[3*page+index].image;
219   - },
220   -
221   - _resize : function(){//da cambiare rispetto al div container!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
222   - var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16;
223   - h = h - 64; //height with page scroller
224   - $("#material_tree_view").height(h);
225   - },
226   -
227   - attached : function() {
228   -// this.fire('items-vslider-controllet_selected', {selected : this.selected});
229   - this._resize();
230   - },
231   -
232   - setTitle : function(title, subtitle) {
233   - this.title = title;
234   - this.subtitle = subtitle;
235   - },
236   -
237   - setAvatar : function(innerText) {
238   - this.avatar = innerText;
239   - },
240   -
241   - chevronLeft : function(flag) {
242   - var buttons = document.getElementsByTagName("paper-icon-button");
243   - if(flag)
244   - buttons[0].removeAttribute("disabled");
245   - else
246   - buttons[0].setAttribute("disabled", "true");
247   - },
248   -
249   - chevronRight : function(flag) {
250   - var buttons = document.getElementsByTagName("paper-icon-button");
251   - if(flag)
252   - buttons[1].removeAttribute("disabled");
253   - else
254   - buttons[1].setAttribute("disabled", "true");
255   - },
256   -
257   - _onPrevClick : function() {
258   - var buttons = document.getElementsByTagName("paper-icon-button");
259   - buttons[0].setAttribute("disabled", "true");
260   - buttons[1].setAttribute("disabled", "true");
261   -
262   -// this.entryAnimation = 'slide-from-left-animation';
263   -// this.exitAnimation = 'slide-right-animation';
264   -
265   - this.entryAnimation = '';
266   - this.exitAnimation = 'slide-up-animation';
267   -
268   - this.selected = this.selected === 0 ? (this.pages.length-1) : (this.selected - 1);
269   - },
270   -
271   - _onNextClick : function() {
272   - var buttons = document.getElementsByTagName("paper-icon-button");
273   - buttons[0].setAttribute("disabled", "true");
274   - buttons[1].setAttribute("disabled", "true");
275   -
276   -// this.entryAnimation = 'slide-from-right-animation';
277   -// this.exitAnimation = 'slide-left-animation';
278   -
279   - this.entryAnimation = 'slide-down-animation';
280   - this.exitAnimation = '';
281   -
282   - this.selected = this.selected === (this.pages.length-1) ? 0 : (this.selected + 1);
283   - },
284   -
285   - _onNeonAnimationFinish: function() {
286   - var buttons = document.getElementsByTagName("paper-icon-button");
287   - buttons[0].removeAttribute("disabled");
288   - buttons[1].removeAttribute("disabled");
289   -
290   - this.avatar = this.selected+1;
291   -
292   - this.fire('page-slider-controllet_selected', {selected : this.selected});
293   - }
294   -
295   - });
296   -
297   - </script>
298   -
299   -</dom-module>
300 0 \ No newline at end of file
controllets/items-vslider-controllet/items-vslider-controllet3.html deleted
View file @707a150
1   -<link rel="import" href="../../bower_components/polymer/polymer.html" />
2   -
3   -<link rel="import" href="../../bower_components/neon-animation/neon-animated-pages.html">
4   -<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">
5   -<link rel="import" href="../../bower_components/neon-animation/neon-animations.html">
6   -
7   -<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
8   -<link rel="import" href="../../bower_components/iron-icons/hardware-icons.html">
9   -<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
10   -
11   -<link rel="import" href="../../bower_components/paper-material">
12   -
13   -<link rel="import" href="../../bower_components/paper-input/paper-input.html">
14   -
15   -<!--<link rel="import" href="../paper-input.html">-->
16   -<!--<link rel="import" href="../paper-input-container.html">-->
17   -<!--<link rel="import" href="../paper-input-error.html">-->
18   -<!--<link rel="import" href="../paper-input-char-counter.html">-->
19   -<!--<link rel="import" href="../paper-textarea.html">-->
20   -<!--<link rel="import" href="../../iron-input/iron-input.html">-->
21   -<!--<link rel="import" href="../../iron-icon/iron-icon.html">-->
22   -<!--<link rel="import" href="../../iron-icons/iron-icons.html">-->
23   -<!--<link rel="import" href="../../paper-icon-button/paper-icon-button.html">-->
24   -
25   -
26   -<dom-module id="items-vslider-controllet">
27   -
28   - <template>
29   -
30   - <style is="custom-style">
31   - #material_items_vslider{
32   - display: flex;
33   - flex-direction: column;
34   - width: 172px;
35   - background-color: #E0E0E0;
36   - }
37   -
38   - paper-icon-button{
39   - color: #FFFFFF;
40   - /*color: #2196F3;*/
41   - height: 48px;
42   - width: 48px;
43   - padding: 0px;
44   - margin: 0px;
45   - --paper-icon-button-ink-color: white;
46   - /*--paper-icon-button-ink-color: #2196F3;*/
47   -
48   - /*margin-left: 63px;*/
49   - }
50   -
51   - paper-icon-button:hover{
52   - }
53   -
54   - .arrow-up{
55   - background-color: #2196F3;
56   - /*float: left;*/
57   - /*margin-top: 8px;*/
58   - padding-left: 63px;
59   - }
60   -
61   - .arrow-down{
62   - background-color: #2196F3;
63   - /*float: right;*/
64   - /*margin-top: 8px;*/
65   - padding-left: 63px;
66   - }
67   -
68   - neon-animatable {
69   - position: relative;
70   - color: white;
71   - /*width: 248px;*/
72   - /*height: 100%;*/
73   - height: auto;/*???*/
74   - /*background-color: red;*/
75   - overflow: hidden;
76   - }
77   -
78   - #div_datalets_container {
79   - position: relative;
80   - /*color: white;*/
81   - /*width: 248px;*/
82   - /*height: 100%;*/
83   - /*height: auto;/!*???*!/*/
84   - /*background-color: red;*/
85   - /*overflow: hidden;*/
86   - }
87   -
88   - .content-card{
89   - position: relative;
90   - /*float: left;*/
91   - margin : 16px;
92   - /*width: 80px;*/
93   - /*height: 72px;*/
94   - background: #fff;
95   - padding: 8px;
96   -
97   - height: 124px;
98   - width: 124px;
99   -
100   - cursor: pointer;
101   - }
102   -
103   - img{
104   - height: 100%;
105   - width: 100%;
106   - }
107   -
108   - .legend {
109   - position: absolute;
110   - /*background: rgba(0,0,0,0.8);*/
111   - background: #9E9E9E;/*#9e9e9e;*/
112   - color: #FFFFFF;
113   - /*height: 32px;*/
114   - /*padding-left: 8px;*/
115   - /*padding: 0px 8px 0px 8px;*/
116   - padding: 8px;
117   - left: 0;
118   - bottom: 16px;
119   - z-index: 1;
120   - opacity: 0.87;
121   - width: 124px;
122   - font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
123   - font-size: 16px;
124   - }
125   -
126   - .legend.selected {
127   - font-weight: 700;
128   - background-color: #2196F3;
129   - opacity: 1;
130   - }
131   -
132   - .legend span{
133   - /*position: relative;*/
134   - /*top: 8px;*/
135   - }
136   -
137   - .div_search{
138   - /*height: 64px;*/
139   - height: 48px;
140   - padding: 0px 8px;
141   - background-color: #B6B6B6;
142   - --paper-input-container-focus-color: #2196F3;
143   - }
144   -
145   - .search{
146   - color: #FFFFFF
147   - /*height: 32px;*/
148   - }
149   -
150   - .clear {
151   - color: #2196F3;
152   - --paper-icon-button-ink-color: #2196F3;
153   - width: 16px; /* 15px + 2*4px for padding */
154   - height: 16px;
155   - /*padding: 0px 4px;*/
156   - margin-bottom: 3px;
157   - }
158   -
159   -
160   -
161   - </style>
162   -
163   - <iron-ajax auto handle-as="json" url={{dataletsListUrl}} on-response="_getDatalets"></iron-ajax>
164   -
165   - <paper-material id="material_items_vslider" elevation="5">
166   -
167   - <!--<div class="div_search">-->
168   - <!--<paper-icon-button class="search" icon="icons:search"></paper-icon-button>-->
169   -
170   - <paper-input id="div_search" value={{filter}} class="div_search" no-label-float label="search datalet" id="input_search">
171   - <iron-icon class="search" icon="search" prefix></iron-icon>
172   - <paper-icon-button class="clear" suffix on-click="_clearInput" icon="clear" ></paper-icon-button><!--tabindex="0"-->
173   - </paper-input>
174   -
175   - <!--</div>-->
176   -
177   -
178   -
179   - <div class="arrow-up"><paper-icon-button on-click="_onPrevClick" icon="hardware:keyboard-arrow-up"></paper-icon-button></div>
180   -
181   - <div id="div_datalets_container" class="flex">
182   - <template is="dom-repeat" items="{{filteredDatalets}}">
183   - <paper-material id={{item.imageName}} elevation="1" class='content-card' on-click="_selectDatalet">
184   - <div class="legend">{{item.imageName}}</div>
185   - <div class="card-content-image">
186   - <img src={{item.imageUrl}}>
187   - </div>
188   - </paper-material>
189   - </template>
190   - </div>
191   -
192   - <div class="arrow-down"><paper-icon-button on-click="_onNextClick" icon="hardware:keyboard-arrow-down"></paper-icon-button></div>
193   -
194   - </paper-material>
195   -
196   - </template>
197   -
198   - <script>
199   -
200   - Polymer({
201   -
202   - is : 'items-vslider-controllet',
203   -
204   - properties : {
205   -
206   -// entryAnimation : {
207   -// type : String,
208   -// value : ""
209   -// },
210   -//
211   -// exitAnimation : {
212   -// type : String,
213   -// value : ""
214   -// },
215   -
216   - selectedDatalet : {
217   - type : String,
218   - value : undefined
219   - },
220   -
221   -// prevSelectedCard : {
222   -// type : Object,
223   -// value : undefined
224   -// },
225   -
226   - datalets : {
227   - type : Array,
228   - value : []
229   - },
230   -
231   - filteredDatalets : {
232   - type : Array,
233   - value : []
234   - },
235   -
236   - pages : {
237   - type : Array,
238   - value : []
239   - },
240   -
241   - dataletsPerPage : {
242   - type : Array,
243   - value : []
244   - },
245   -
246   - filter : {
247   - type : String,
248   - value : "",
249   - observer : '_filterDatalets'
250   - }
251   - },
252   -
253   - listeners: {
254   - 'dom-change': '_onDomChange'
255   - },
256   -
257   - ready : function() {
258   - $(this.$.div_datalets_container).perfectScrollbar();
259   -
260   - this._resize();
261   - var that = this;
262   - window.addEventListener("resize", function() { that._resize(); });
263   - },
264   -
265   - _clearInput : function() {
266   - this.$.div_search.value = "";
267   - ///////usa sempre this.$!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
268   - ///////usa sempre this.$!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
269   - ///////usa sempre this.$!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
270   - ///////usa sempre this.$!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
271   - },
272   -// attached : function() {
273   -// this._resize();
274   -// var that = this;
275   -// window.addEventListener("resize", function() { that._resize(); });
276   -// },
277   -
278   - _getDatalets : function(e){
279   - var datalets = new Array();
280   - for(var i=0; i < e.detail.response.length; i++){
281   - var datalet = { imageName : e.detail.response[i].name.replace("-datalet", ""), imageUrl : e.detail.response[i].url + e.detail.response[i].name + ".png" };
282   - datalets.push(datalet);
283   -// datalets.push(datalet);
284   - }
285   -
286   - {{}}
287   - this.pages = [0,1,2];
288   - this.dataletsPerPage = [0,1,2];
289   -
290   - this.datalets = datalets;
291   - this.filteredDatalets = datalets;
292   -
293   -// console.log(this.datalets);
294   - },
295   -
296   - _filterDatalets : function(){//console.log(this.filter);
297   - var datalets = new Array();
298   - for(var i=0; i < this.datalets.length; i++){
299   - var datalet = this.datalets[i];
300   -// console.log(datalet.imageName.indexOf(this.filter));
301   -// console.log(datalet.imageName);
302   - if(datalet.imageName.indexOf(this.filter) != -1){
303   - datalets.push(datalet);
304   -// console.log("we");
305   - }
306   -
307   - }
308   -
309   -// console.log(datalets);
310   - this.filteredDatalets = datalets;
311   -
312   -
313   -
314   - ///////////////
315   -//
316   -// console.log(this.selectedDatalet);
317   -// if(this.selectedDatalet != undefined && (document.getElementById(this.selectedDatalet)) != null ){
318   -//
319   -// var datalet = document.getElementById(this.selectedDatalet);
320   -// console.log(datalet);
321   -// datalet.elevation = "5";
322   -// datalet.childNodes[2].className = datalet.childNodes[2].className + " selected";
323   -// }
324   -
325   - //////////////
326   -
327   -
328   - $("#div_datalets_container").animate({ scrollTop: 0}, 0);
329   -
330   - },
331   -
332   - _onDomChange : function() {
333   - console.log("dom changed");
334   - console.log(this.filteredDatalets);
335   -
336   - if(this.selectedDatalet != undefined ){
337   -// console.log(this.selectedDatalet);
338   -// var datalets = document.getElementsByClassName("content-card");
339   -// var datalets = document.getElementsByTagName("paper-material");
340   -
341   - for(var i=0; i < this.filteredDatalets.length; i++){
342   - var datalet = this.filteredDatalets[i];
343   -// console.log(datalet.imageName);
344   - datalet = document.getElementById(datalet.imageName);//dataletCarDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
345   - console.log(datalet);
346   - datalet.elevation = "1";
347   - datalet.childNodes[2].className = datalet.childNodes[2].className.replace("selected", "");
348   - }
349   -//
350   - if(document.getElementById(this.selectedDatalet) != null ){
351   -
352   - var datalet = document.getElementById(this.selectedDatalet);
353   - console.log(datalet);
354   - datalet.elevation = "5";
355   - datalet.childNodes[2].className = datalet.childNodes[2].className + " selected";
356   - }
357   -
358   - }
359   - },
360   -
361   - _selectDatalet : function(e){
362   -// var dataletId = e.currentTarget.id;
363   -// console.log(dataletId)
364   -
365   - if(this.selectedDatalet != undefined){
366   - var datalet = document.getElementById(this.selectedDatalet);
367   - datalet.elevation = "1";
368   - datalet.childNodes[2].className = datalet.childNodes[2].className.replace("selected", "");
369   - }
370   -
371   - e.currentTarget.elevation = "5";
372   - e.currentTarget.childNodes[2].className = e.currentTarget.childNodes[2].className + " selected";
373   -
374   - console.log("weeeeeeeeeeeeeeeeee");
375   - this.selectedDatalet = e.currentTarget.id;
376   - },
377   -
378   -// _onCardClick : function(e){//prevSelectedCard-->selectedCard, no selected!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
379   -//
380   -//// console.log(e.currentTarget);
381   -//
382   -//
383   -// //controlla sul search......................................................................
384   -//
385   -//// dai ID alle card e modifica funzione!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
386   -//// disabilita pulsante top o bottom e multiclick
387   -// if(this.prevSelectedCard != undefined){
388   -// this.prevSelectedCard.elevation = "1";
389   -// this.prevSelectedCard.childNodes[2].className = this.prevSelectedCard.childNodes[2].className.replace("selected", "");
390   -// }
391   -//
392   -//
393   -// e.currentTarget.elevation = "5";
394   -// e.currentTarget.childNodes[2].className = e.currentTarget.childNodes[2].className + " selected";
395   -//
396   -// var b = document.getElementById("barchart");
397   -//
398   -//// b.elevation = "5";
399   -//// b.childNodes[2].className = e.currentTarget.childNodes[2].className + " selected";
400   -//
401   -// this.prevSelectedCard = e.currentTarget;
402   -//
403   -//// this.fire('items-slider-controllet_item-selected', {datalet: e.currentTarget.id + "-datalet"});
404   -//
405   -// },
406   -
407   -// _getImageUrl : function(page, index){
408   -// return this.datalets[3*page+index].imageUrl;
409   -// },
410   -
411   - _getImageUrl : function(index){
412   - return this.datalets[index].imageUrl;
413   - },
414   -
415   - _onPrevClick : function() {
416   -
417   - var container = $("#div_datalets_container");
418   - var h = container.height();
419   - var dataletPerPage = parseInt(h/156);
420   - var scroll = $("#div_datalets_container").scrollTop()-156*dataletPerPage;
421   - var diff = scroll % 156;
422   -// scroll += 156-diff;
423   - scroll -= diff;
424   - $("#div_datalets_container").animate({ scrollTop: scroll}, 300);
425   -
426   -
427   -// var scroll = $("#div_datalets_container").scrollTop()-156*3;
428   -// console.log(scroll);
429   -
430   -// console.log(scroll);
431   - },
432   -
433   - _onNextClick : function() {
434   - var container = $("#div_datalets_container");
435   - var h = container.height();
436   - var dataletPerPage = parseInt(h/156);
437   - var scroll = $("#div_datalets_container").scrollTop()+156*dataletPerPage;
438   - var diff = scroll % 156;
439   - scroll -= diff;
440   - $("#div_datalets_container").animate({ scrollTop: scroll}, 300);
441   -
442   -// var scroll = $("#div_datalets_container").scrollTop()+156*3;
443   -//// console.log(scroll);
444   -// $("#div_datalets_container").animate({ scrollTop: scroll}, 300);
445   -//// console.log(scroll);
446   - },
447   -
448   - _resize : function(){console.log("we");
449   - var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16;
450   - h = h - 64 - 8; //height with page scroller
451   - $("#material_items_vslider").height(h);
452   - }
453   -
454   - });
455   -
456   - </script>
457   -
458   -</dom-module>
459 0 \ No newline at end of file
controllets/multi-table-controllet/multi-table-controllet.html
  View file @e0e4a97
... ... @@ -7,7 +7,7 @@
7 7 <link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">
8 8 <link rel="import" href="../../bower_components/neon-animation/neon-animations.html">
9 9  
10   -<link rel="import" href="../../datalets/dynamic-datatable-datalet/datatable-datalet.html" />
  10 +<link rel="import" href="../../datalets/dynamic-datatable-datalet/dynamic-datatable-datalet.html" />
11 11  
12 12 <dom-module id="multi-table-controllet">
13 13  
... ...
controllets/page-slider-controllet/page-slider-controllet.html
  View file @e0e4a97
... ... @@ -123,6 +123,11 @@
123 123 value : 0
124 124 },
125 125  
  126 + prevSelected : {
  127 + type : Number,
  128 + value : 0
  129 + },
  130 +
126 131 pages : {
127 132 type : Number,
128 133 value : document.querySelectorAll('neon-animatable').length
... ... @@ -190,6 +195,10 @@
190 195 buttons[1].setAttribute("disabled", "true");
191 196 },
192 197  
  198 + getPrevSelected : function() {
  199 + return this.prevSelected;
  200 + },
  201 +
193 202 _onPrevClick : function() {
194 203 var buttons = document.getElementsByTagName("paper-icon-button");
195 204 buttons[0].setAttribute("disabled", "true");
... ... @@ -198,6 +207,7 @@
198 207 this.entryAnimation = 'slide-from-left-animation';
199 208 this.exitAnimation = 'slide-right-animation';
200 209  
  210 + this.prevSelected = this.selected;
201 211 this.selected = this.selected === 0 ? (this.pages-1) : (this.selected - 1);
202 212 },
203 213  
... ... @@ -209,6 +219,7 @@
209 219 this.entryAnimation = 'slide-from-right-animation';
210 220 this.exitAnimation = 'slide-left-animation';
211 221  
  222 + this.prevSelected = this.selected;
212 223 this.selected = this.selected === (this.pages-1) ? 0 : (this.selected + 1);
213 224 },
214 225  
... ...
controllets/tree-view-multi-table-controllet/tree-view-multi-table-controllet.html
  View file @e0e4a97
... ... @@ -117,8 +117,8 @@
117 117 },
118 118  
119 119 _filterJson : function(data){
120   - console.log(data);
121   - console.log(this.dataUrl);
  120 +// console.log(data);
  121 +// console.log(this.dataUrl);
122 122 if(data.result != undefined && data.result.resource_id != undefined) {
123 123 this.rootName = "result,records"
124 124 return data.result.records;
... ...
datalets/dynamic-datatable-datalet/datatable-datalet.html renamed to datalets/dynamic-datatable-datalet/dynamic-datatable-datalet.html
  View file @e0e4a97