WebCompDev / COMPONENTS

Commit fb05b400c1e8f4efa4ff29d6cbf0a9422590aa69

Authored by Renato De Donato
1 parent dcd5b28b

controllet 2.0, new datalets

Inline Side-by-side
Showing 48 changed files with 2750 additions and 2411 deletions
controllets/data-sevc-controllet/data-sevc-controllet.html
  View file @fb05b40
... ... @@ -8,7 +8,8 @@
8 8 <link rel="import" href="../page-slider-controllet/page-slider-controllet.html">
9 9 <link rel="import" href="../dataset-selection-controllet/dataset-selection-controllet.html">
10 10 <link rel="import" href="../select-data-controllet/select-data-controllet.html" />
11   -<link rel="import" href="../datalet-selection-controllet/datalet-selection-controllet.html">
  11 +<link rel="import" href="../select-visualization-controllet/select-visualization-controllet.html" />
  12 +<!--<link rel="import" href="../datalet-selection-controllet/datalet-selection-controllet.html">-->
12 13  
13 14 <dom-module id="data-sevc-controllet">
14 15  
... ... @@ -32,7 +33,8 @@
32 33  
33 34 <neon-animatable>
34 35  
35   - <datalet-selection-controllet id="select_visualization" deep-url={{deepUrl}} datalets-list-url={{dataletsListUrl}} data-url={{dataUrl}} preselected-datalet={{selectedDatalet}} datalet-preset={{dataletPreset}}></datalet-selection-controllet>
  36 + <!--<datalet-selection-controllet id="select_visualization" deep-url={{deepUrl}} datalets-list-url={{dataletsListUrl}} data-url={{dataUrl}} preselected-datalet={{selectedDatalet}} datalet-preset={{dataletPreset}}></datalet-selection-controllet>-->
  37 + <select-visualization-controllet id="select_visualization" deep-url={{deepUrl}} datalets-list-url={{dataletsListUrl}} data-url={{dataUrl}} preselected-datalet={{selectedDatalet}} datalet-preset={{dataletPreset}}></select-visualization-controllet>
36 38  
37 39 </neon-animatable>
38 40  
... ...
controllets/datalet-selection-controllet/datalet-selection-controllet.html
  View file @fb05b40
... ... @@ -226,7 +226,7 @@
226 226 <div class="inputs">
227 227 <paper-dropdown-menu id="group_by">
228 228 <paper-menu class="dropdown-content">
229   - <template is="dom-repeat" items={{selectedFields}}>
  229 + <template is="dom-repeat" items={{fields}}>
230 230 <paper-item id={{index}} on-tap="_showGroupedFields">{{_fieldName(item)}}</paper-item>
231 231 </template>
232 232 </paper-menu>
... ...
controllets/filters-controllet/demo/index.html 100644 → 100755
  View file @fb05b40
controllets/filters-controllet/filters-controllet.html 100644 → 100755
  View file @fb05b40
controllets/items-vslider-controllet/items-vslider-controllet.html
  View file @fb05b40
... ... @@ -17,8 +17,8 @@
17 17 <style is="custom-style">
18 18 paper-icon-button{
19 19 color: #FFFFFF;
20   - height: 48px;
21   - width: 48px;
  20 + height: 32px;/*48*/
  21 + width: 32px;/*48*/
22 22 padding: 0px;
23 23 margin: 0px;
24 24 --paper-icon-button-ink-color: white;
... ... @@ -27,7 +27,7 @@
27 27 #items_vslider_container{
28 28 display: flex;
29 29 flex-direction: column;
30   - height: 100vh;
  30 + height: 100%;
31 31 width: 172px;
32 32 background-color: #E0E0E0;
33 33 }
... ... @@ -39,18 +39,17 @@
39 39  
40 40 .arrow-up{
41 41 background-color: #2196F3;
42   - padding-left: 63px;
  42 + padding-left: 70px;/*62*/
43 43 }
44 44  
45 45 .arrow-down{
46 46 background-color: #2196F3;
47   - padding-left: 63px;
  47 + padding-left: 70px;
48 48 }
49 49  
50 50 .content-card{
51 51 position: relative;
52 52 float: left;/*firefox*/
53   - /*margin : 16px;*/
54 53 margin : 16px 16px 0px 16px;
55 54 padding: 8px;
56 55 height: 124px;
... ... @@ -60,7 +59,6 @@
60 59 }
61 60  
62 61 img{
63   - /*height: 100%;*/
64 62 width: 100%;
65 63 }
66 64  
... ... @@ -70,23 +68,24 @@
70 68 bottom: 16px;
71 69 padding: 8px;
72 70 width: 124px;
73   - background-color: #9E9E9E;
74   - color: #FFFFFF;
75   - opacity: 0.87;
  71 + color: #000000;
  72 + background-color: rgba(158, 158, 158, 0.8);
76 73 z-index: 1;
77 74 font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
78 75 font-size: 16px;
  76 + line-height: 16px;
  77 + font-weight: 700;
79 78 }
80 79  
81 80 .legend.selected {
82   - font-weight: 700;
83 81 background-color: #2196F3;
84   - opacity: 1;
  82 + color: #FFFFFF;
85 83 }
86 84  
87 85 #items_vslider_search{
88 86 height: 48px;
89 87 padding: 0px 8px;
  88 + /*padding-top: 8px;*/
90 89 background-color: #B6B6B6;
91 90 --paper-input-container-focus-color: #2196F3;
92 91 }
... ... @@ -99,7 +98,7 @@
99 98 width: 24px;
100 99 height: 24px;
101 100 padding: 0px 4px;
102   - color: #FFFFFF;
  101 + color: #F44336;
103 102 --paper-icon-button-ink-color: #FFFFFF;
104 103 }
105 104 </style>
... ... @@ -108,7 +107,7 @@
108 107  
109 108 <paper-material id="items_vslider_container" elevation="5">
110 109  
111   - <paper-input id="items_vslider_search" value={{filter}} no-label-float> <!--label="search"-->
  110 + <paper-input id="items_vslider_search" value={{filter}} no-label-float label="">
112 111 <iron-icon class="search" icon="search" prefix></iron-icon>
113 112 <paper-icon-button class="clear" suffix on-click="_clearInput" icon="clear" tabindex="0"></paper-icon-button>
114 113 </paper-input>
... ... @@ -179,19 +178,30 @@
179 178 },
180 179  
181 180 ready : function() {
182   -// this._resize();
183 181 $(this.$.div_datalets_container).perfectScrollbar();
184 182 },
185 183  
186 184 attached : function() {
187   -// this._resize();
188   -// var that = this;
189   -// window.addEventListener("resize", function() { that._resize(); });
190   -
191 185 if(this.preselectedDatalet){
192 186 this._preselectDatalet();
193 187 this.preselectedDatalet = undefined;
194 188 }
  189 +
  190 + this._translate();
  191 + },
  192 +
  193 + _reset : function() {
  194 + if(this.selectedDatalet != undefined && (document.getElementById(this.selectedDatalet) != null)){
  195 + var dataletCard = document.getElementById(this.selectedDatalet);
  196 + dataletCard.elevation = "1";
  197 + dataletCard.getElementsByClassName("legend")[0].className = dataletCard.getElementsByClassName("legend")[0].className.replace(" selected", "");
  198 + }
  199 + this.selectedDatalet = undefined;
  200 + this.filter = "";
  201 + },
  202 +
  203 + _translate : function(){
  204 + this.$.items_vslider_search.setAttribute("label", ln["search_" + ln["localization"]]);
195 205 },
196 206  
197 207 _clearInput : function() {
... ... @@ -214,7 +224,10 @@
214 224 var datalets = new Array();
215 225 for(var i=0; i < this.datalets.length; i++){
216 226 var datalet = this.datalets[i];
217   - if(datalet.imageName.indexOf(this.filter) != -1)
  227 + var imageName = this._getChartName(datalet.imageName).toLowerCase();
  228 + console.log(imageName);
  229 + console.log(this.filter);
  230 + if(imageName.indexOf(this.filter.toLowerCase()) > -1)
218 231 datalets.push(datalet);
219 232 }
220 233  
... ...
controllets/paper-card-controllet/paper-card-controllet.html
  View file @fb05b40
... ... @@ -212,11 +212,14 @@
212 212 this.$.card_modify.setAttribute("title", paper_ln["modify_"+paper_ln["ln"]]);
213 213 this.$.card_delete.setAttribute("title", paper_ln["delete_"+paper_ln["ln"]]);
214 214 if(this.checkType(this.cardType, 'link'))
215   - this.$$("#card_open_link").setAttribute("title", paper_ln["open_"+paper_ln["ln"]]);
  215 + if(this.$$("#card_open_link"))
  216 + this.$$("#card_open_link").setAttribute("title", paper_ln["open_"+paper_ln["ln"]]);
216 217 if(this.checkType(this.cardType, 'text'))
217   - this.$$("#card_open_text").setAttribute("title", paper_ln["open_"+paper_ln["ln"]]);
  218 + if(this.$$("#card_open_text"))
  219 + this.$$("#card_open_text").setAttribute("title", paper_ln["open_"+paper_ln["ln"]]);
218 220 if(this.checkType(this.cardType, 'datalet'))
219   - this.$$("#card_open_datalet").setAttribute("title", paper_ln["open_"+paper_ln["ln"]]);
  221 + if(this.$$("#card_open_datalet"))
  222 + this.$$("#card_open_datalet").setAttribute("title", paper_ln["open_"+paper_ln["ln"]]);
220 223 },
221 224  
222 225 _changeWidth: function(){
... ...
controllets/select-dataset-controllet/demo/index.html
  View file @fb05b40
... ... @@ -13,21 +13,59 @@
13 13 ln["localization"] = "en";
14 14 </script>
15 15  
16   - <link rel="import" href="../datalet-selection-controllet.html" />
  16 + <link rel="import" href="../select-dataset-controllet.html" />
17 17 </head>
18 18  
19 19 <body>
20 20  
21   -<!--<datalet-selection-controllet fields='["result,records,Anno","result,records,Cinesi","result,records,Albanesi","result,records,Rumeni","result,records,Pakistani","result,records,Marocchini","result,records,Altri stranieri" ]' data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=e04338cf-7a92-4221-81c6-fe12f41003d5" deep-url="http://172.16.15.38/DEEalerProvider/DEEP/" datalets-list-url="http://172.16.15.38/DEEalerProvider/DEEP/datalets-list"></datalet-selection-controllet>-->
  21 +<style>
22 22  
23   -<!--<datalet-selection-controllet fields='["records,fields,title", "records,fields,published"]' data-url="https://data.issy.com/api/records/1.0/search?dataset=flux-rss-des-offres-demplois-a-issy-les-moulineaux&sort=published&facet=published&refine.published=2015%2F10" deep-url="http://172.16.15.38/DEEalerProvider/DEEP/" datalets-list-url="http://172.16.15.38/DEEalerProvider/DEEP/datalets-list"></datalet-selection-controllet>-->
24   -<datalet-selection-controllet fields='["records,fields,annee", "records,fields,preteur", "records,fields,capital_restant_du"]' data-url="https://data.issy.com/api/records/1.0/search/?dataset=repartitiondeladetteparpreteursau3112n-feuille1&rows=56&sort=-annee" deep-url="http://172.16.15.38/DEEalerProvider/DEEP/" datalets-list-url="http://172.16.15.38/DEEalerProvider/DEEP/datalets-list"></datalet-selection-controllet>
  23 + .container {
  24 + height: calc(90px * 5 - 8px);
  25 + width: 50%;
  26 + /*width: 400px;*/
  27 + position: relative;
  28 + top: 100px;
  29 + left:25%;
  30 + /*background-color: red;*/
  31 + }
  32 +
  33 +</style>
  34 +
  35 +<div class="container">
  36 + <select-dataset-controllet id="ds"></select-dataset-controllet>
  37 +</div>
  38 +
  39 +<script>
  40 + var description = "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa "+
  41 + " aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa "+
  42 + " aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa "+
  43 + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
  44 + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
  45 + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
  46 + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
  47 + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
  48 + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
  49 + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
  50 + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
  51 + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
  52 + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
  53 + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
  54 + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
  55 + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+
  56 + "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa";
  57 +
  58 + var dataset1 = {description: description, name: "Data", url: "http://ckan.routetopa.eu/api/action/datastore_search?resource_id=c3b52992-ba61-4a73-a637-0f2e1ca26aab"};
  59 + var dataset2 = {description: "", name: "Klassen", url: "http://ckan.routetopa.eu/api/action/datastore_search?resource_id=dfd27de5-0790-466c-af59-6a82509e7fbb"};
  60 + 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"};
  61 + var datasets = [dataset1, dataset2, dataset3];
  62 + var datasets = [dataset1, dataset2, dataset3, dataset1, dataset2, dataset3, dataset1, dataset2, dataset3, dataset1, dataset2, dataset3, dataset1, dataset2, dataset3];
  63 +
  64 + var ds = document.getElementById('ds');
  65 + ds.setAttribute("items", JSON.stringify(datasets));
  66 +
  67 +</script>
25 68  
26 69 </body>
27 70  
28   -<!--urls:-->
29   -<!--https://yperdiavgeia.gr/analytics/counts/source:Decision/query:linux/method:count_organization.json-->
30   -<!--http://dati.lazio.it/catalog/api/action/datastore_search?resource_id=114baf3d-6d4f-42ff-b4af-481beef59ae1-->
31   -<!--url: 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52&limit=5',-->
32   -<!--url: 'https://data.issy.com/api/records/1.0/search?dataset=liste-des-restaurants-a-issy-les-moulineaux&sort=type&facet=type&facet=terrasse',-->
33   -<!--url: 'https://data.issy.com/api/records/1.0/search?dataset=flux-rss-des-offres-demplois-a-issy-les-moulineaux&sort=published&facet=published&refine.published=2015',-->
34 71 \ No newline at end of file
  72 +</html>
35 73 \ No newline at end of file
... ...
controllets/select-dataset-controllet/select-dataset-controllet.html
  View file @fb05b40
1   -<link rel="import" href="../../bower_components/polymer/polymer.html" />
2   -
3   -<link rel="import" href="../../bower_components/paper-material/paper-material.html" />
4   -
5   -<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
6   -<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
7   -<link rel="import" href="../../bower_components/paper-item/paper-item.html">
8   -
  1 +<link rel="import" href="../../bower_components/polymer/polymer.html">
  2 +<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
  3 +<!--<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">-->
9 4 <link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
  5 +<link rel="import" href="../../bower_components/paper-styles/color.html">
  6 +<link rel="import" href="../../bower_components/paper-styles/typography.html">
  7 +<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
10 8 <link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
11   -<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
12   -
13   -<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
14   -<link rel="import" href="../../bower_components/paper-input/paper-input.html">
15   -
16   -<link rel="import" href="../../bower_components/paper-button/paper-button.html">
  9 +<link rel="import" href="../../bower_components/iron-image/iron-image.html">
  10 +<link rel="import" href="../../bower_components/iron-list/iron-list.html">
17 11  
18   -<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
19   -
20   -<link rel="import" href="../items-vslider-controllet/items-vslider-controllet.html" />
21   -
22   -<script src="../../../DEEPCLIENT/js/deepClient.js"></script>
23   -
24   -<dom-module id="datalet-selection-controllet">
25 12  
  13 +<dom-module id="select-dataset-controllet">
26 14 <template>
27   -
28   - <style is="custom-style">
29   - :host {
30   - --paper-dropdown-menu-icon: {
31   - color: #2196F3;
32   - };
33   - }
34   -
35   - #datalet_selection_container {
36   - display: flex;
37   - font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  15 + <style>
  16 + /*:host {*/
  17 + /*display: block;*/
  18 + /*@apply(--paper-font-common-base);*/
  19 + /*}*/
  20 + /*app-toolbar {*/
  21 + /*background-color: var(--google-green-700);*/
  22 + /*box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);*/
  23 + /*font-weight: bold;*/
  24 + /*color: white;*/
  25 + /*z-index: 1;*/
  26 + /*position: fixed;*/
  27 + /*top: 0;*/
  28 + /*left: 0;*/
  29 + /*right: 0;*/
  30 + /*}*/
  31 + /*app-toolbar paper-icon-button {*/
  32 + /*--paper-icon-button-ink-color: white;*/
  33 + /*}*/
  34 + /*iron-list {*/
  35 + /*padding-top: 64px;*/
  36 + /*--iron-list-items-container: {*/
  37 + /*max-width: 800px;*/
  38 + /*margin: auto;*/
  39 + /*margin-top: 60px;*/
  40 + /*margin-bottom: 60px;*/
  41 + /*border-bottom: 1px solid #ddd;*/
  42 + /*};*/
  43 + /*}*/
  44 + .item {
  45 + @apply(--layout-horizontal);
  46 + padding: 16px;
  47 + background-color: #FFFFFF;
  48 + border: 1px solid #B6B6B6;/*2196F3*/
  49 + cursor: pointer;
  50 + margin-bottom: 8px;
  51 + /*border-radius: 8px;*/
  52 + }
  53 +
  54 + /*.avatar {*/
  55 + /*height: 40px;*/
  56 + /*width: 40px;*/
  57 + /*border-radius: 20px;*/
  58 + /*box-sizing: border-box;*/
  59 + /*background-color: #DDD;*/
  60 + /*}*/
  61 + .pad {
  62 + /*padding: 0 16px;*/
  63 + @apply(--layout-flex);
  64 + @apply(--layout-vertical);
  65 + }
  66 + .primary {
  67 + /*font-size: 16px;*/
  68 + font-weight: bold;
  69 + /*padding-top: 5px;*/
  70 + }
  71 + .shortText/*, .longText*/ {
38 72 font-size: 16px;
39   - margin-top: 8px;
40   - }
41   -
42   - #items_vslider_controllet {
43   - position: relative;
44   - min-width: 172px;
45 73 }
46   -
47   - #datalet_selection_inputs {
48   - position: relative;
49   - height: 100vh;
50   - margin-left: 32px;
51   - min-width: 258px;
  74 + .longText {
  75 + color: gray;
  76 + display: none;
52 77 }
53   -
54   - #datalet_selection_labels {
  78 + .item:hover .shortText::after {
  79 + content: ' [+]';
  80 + color: gray;
  81 + }
  82 + .item.expanded:hover .shortText::after {
  83 + content: '';
  84 + }
  85 + .item.expanded .longText {
  86 + display: block;
  87 + }
  88 + .item.expanded:hover .longText::after {
  89 + content: ' [–]';
  90 + }
  91 + /*.spacer {*/
  92 + /*@apply(--layout-flex);*/
  93 + /*}*/
  94 + /*@media (max-width: 460px) {*/
  95 + /*paper-toolbar .bottom.title {*/
  96 + /*font-size: 14px;*/
  97 + /*}*/
  98 + /*}*/
  99 +
  100 + /*.item.selected {*/
  101 + /*border: 1px solid #2196F3;/!**!/*/
  102 + /*}*/
  103 +
  104 + #list_container {
  105 + /*background-color: #ccc;*/
  106 + height: 100%;
  107 + width: calc(100% - 16px);
  108 + /*overflow: scroll;*/
55 109 position: relative;
56   - height: 100vh;
57   - margin-left: 32px;
58   - min-width: 258px;
59   - }
60 110  
61   - #datalet_selection_column {
62   - position: relative;
63   - width: 100%;
64   - margin-left: 32px;
65   - }
  111 + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  112 + font-size: 16px;
  113 + line-height: 24px;/*???*/
66 114  
67   - #datalet_selection_datalet {
68   - position: relative;
69   - height: 100vh;
70   - width: 100%;
71   - }
  115 + margin: 8px;
72 116  
73   - #datalet_selection_datalet_placeholder {
74   - padding: 16px;
75 117 }
76 118  
77   - .inputs{
78   - position: relative;
  119 + #select_dataset_container {
  120 + /*padding: 8px;*/
  121 + /*background-color: #B6B6B6;*/
  122 + border: 4px solid #B6B6B6;/*2196F3*/
79 123 }
80 124  
81   - .input_header {
82   - height: 32px;
83   - padding-top: 16px;
84   - text-align: center;
85   - font-weight: 700;
  125 + #toolbar {
  126 + /*padding: 8px;*/
  127 + /*background-color: #B6B6B6;*/
  128 + width: calc(100% - 12px);
  129 + height: 20px;
86 130 background-color: #B6B6B6;
87   - }
88 131  
89   - #expert_container {
90   - display: none;
91   - }
92   -
93   - #expert_header {
94   - display: none;
95   -
96   - height: 32px;
97   - padding-top: 16px;
98   - margin-top: 8px;
99   - text-align: center;
100   - font-weight: 700;
101   - color: #00BCD4;
102   - cursor: pointer;
103   - }
104   -
105   - .field_nema {
106   - height: 40px;
107   - padding-top: 8px;
108   -
109   - margin-top: 8px;
110   - padding-left: 16px;
111   - font-weight: 700;
112   - color: #2196F3;
113   - background-color: #E0E0E0;
114   - }
115   -
116   - .info_button {
117   - position: absolute;
118   - top: 18px;
119   - right: 0px;
120   - }
121   -
122   - paper-input {
123   - display: inline-block;
124   - height: 48px;
125   - /*padding: 0px 8px;*/
126   - width: 210px;
127   - padding-left: 8px;
128   - padding-bottom: 8px;
129   - --paper-input-container-focus-color: #2196F3;
130   - }
131   -
132   - paper-input.base_input {
133   - width: 242px;
134   - }
135   -
136   - paper-textarea {
137   - width: 242px;
138   - padding-left: 8px;
139   - padding-bottom: 4px;
140   - --paper-input-container-focus-color: #2196F3;
141   - }
142   -
143   - paper-dropdown-menu {
144   - height: 48px;
145   - width: 210px;;
146   - padding-left: 8px;
147   - padding-bottom: 8px;
148   - --paper-input-container-focus-color: #2196F3;
149   - }
150   -
151   - paper-item.iron-selected {
152   - background-color: #2196F3;
153   - color: #FFFFFF;
154   - }
155   -
156   - paper-icon-button {
157   - color: #2196F3;
158   - --paper-icon-button-ink-color: #2196F3;
159   - margin: 0px;
160   - }
161   -
162   - paper-button {
163   - position: absolute;
164   - bottom: 16px;
165   - right: 11px;
166   -
167   - height: 48px;
168   - width: 172px;
169   - background-color: #00BCD4;
170   - color: white;
171   - font-weight: 700;
172   - padding: 16px;
173   - }
174   -
175   - paper-button:hover {
176   - background-color: #00AABF;
177   -
178   - box-shadow: 0px 8px 12px #888;
179   - -webkit-box-shadow: 0px 8px 12px #888;
180   - -moz-box-shadow: 0px 8px 12px #888;
  132 + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  133 + font-size: 16px;
  134 + font-weight: bold;
  135 + /*line-height: 24px;*/
  136 + padding-left: 12px;
  137 + padding-top: 12px;
  138 + padding-bottom: 12px;
181 139 }
182   -
183   - paper-button[disabled] {
184   - background-color: #B6B6B6;
  140 + .ssssssssseeeel {
  141 + background-color: red;
185 142 }
186 143  
187   - #dialog_info_input {
188   - border: 2px solid #2196F3;
189   - background-color: #E0E0E0;
190   - min-width: 248px;
191   - }
192 144 </style>
193 145  
194   - <iron-ajax id="selectedDatalet_request" on-response="_handleSelectedDatalet"></iron-ajax>
  146 + <div id="select_dataset_container">
195 147  
196   - <div id="datalet_selection_container">
  148 + <div id="toolbar">
  149 + AVAILABLE DATASETS
197 150  
198   - <div id="items_vslider_controllet">
199   - <items-vslider-controllet id="vslider" datalets-list-url={{dataletsListUrl}} preselected-datalet={{preselectedDatalet}}></items-vslider-controllet>
200 151 </div>
201 152  
202   - <paper-material id="datalet_selection_inputs" elevation="5">
203   - <div class="input_header"><span id="inputs"></span></div>
204   - <template is="dom-repeat" items="{{inputs}}" index-as="ddl_index">
205   - <div class="inputs">
206   - <paper-dropdown-menu id={{ddl_index}} label={{_getLabelName(item.name)}}>
207   - <paper-menu class="dropdown-content">
208   - <template is="dom-repeat" items={{fields}}>
209   - <paper-item id={{index}} on-tap="_addInput">{{_fieldName(item)}}</paper-item>
210   - <!--{{_fieldName(item)}}-->
211   - </template>
212   - </paper-menu>
213   - </paper-dropdown-menu>
214   - <div class="info_button">
215   - <paper-icon-button id={{item.name}} on-click="_showInfo" icon="info-outline" title="{{_getLabelName(item.name)}} info"></paper-icon-button>
216   - </div>
217   - </div>
218   - </template>
219   -
220   - <!-- EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE -->
221   -
222   - <div id="expert_header" on-click="_showExpertMode"><span id="groupBy"></span></div>
223   -
224   - <div id="expert_container">
225   -
226   - <div class="inputs">
227   - <paper-dropdown-menu id="group_by">
228   - <paper-menu class="dropdown-content">
229   - <template is="dom-repeat" items={{selectedFields}}>
230   - <paper-item id={{index}} on-tap="_showGroupedFields">{{_fieldName(item)}}</paper-item>
231   - </template>
232   - </paper-menu>
233   - </paper-dropdown-menu>
234   - <div class="info_button">
235   - <paper-icon-button id="gb" on-click="_addOrder" icon="unfold-more" title=""></paper-icon-button>
236   - </div>
237   - </div>
238   -
239   - <template is="dom-repeat" items="{{groupedFields}}">
240   - <div class="inputs">
241   - <paper-dropdown-menu id="calculate_{{index}}" label="{{_calculateLabel()}}">
242   - <paper-menu class="dropdown-content">
243   - <!--foreach functions-->
244   - <paper-item id="0" on-tap="_addGroupByInput">{{_operationName(0)}} {{_fieldName(item)}}</paper-item>
245   - <paper-item id="1" on-tap="_addGroupByInput">{{_operationName(1)}} {{_fieldName(item)}}</paper-item>
246   - <paper-item id="2" on-tap="_addGroupByInput">{{_operationName(2)}} {{_fieldName(item)}}</paper-item>
247   - <paper-item id="3" on-tap="_addGroupByInput">{{_operationName(3)}} {{_fieldName(item)}}</paper-item>
248   - <paper-item id="4" on-tap="_addGroupByInput">{{_operationName(4)}} {{_fieldName(item)}}</paper-item>
249   - <paper-item id="5" on-tap="_addGroupByInput">{{_operationName(5)}} {{_fieldName(item)}}</paper-item>
250   - <paper-item id="6" on-tap="_addGroupByInput">{{_operationName(6)}} {{_fieldName(item)}}</paper-item>
251   - </paper-menu>
252   - </paper-dropdown-menu>
253   - <div class="info_button">
254   - <paper-icon-button id={{_fieldName(item)}} on-click="_addOrder" icon="unfold-more" title=""></paper-icon-button>
  153 + <div id="list_container">
  154 +
  155 + <!--<iron-ajax url="data/contacts.json" last-response="{{items}}" auto></iron-ajax>-->
  156 +
  157 + <!--<app-toolbar>-->
  158 + <!--<div title>Collapsable items</div>-->
  159 + <!--<paper-icon-button icon="search" alt="Search"></paper-icon-button>-->
  160 + <!--<paper-icon-button icon="more-vert" alt="More options"></paper-icon-button>-->
  161 + <!--</app-toolbar>-->
  162 +
  163 + <iron-list id="list" items="[[items]]" as="item" selection-enabled><!--multi-selection-->
  164 + <template>
  165 + <div>
  166 + <div class$="[[getClassForItem(item, selected)]]" tabindex$="[[tabIndex]]" on-tap="_prova">
  167 + <!--<iron-image class="avatar" sizing="contain" src="[[item.image]]"></iron-image>-->
  168 + <div class="pad">
  169 + <div class="primary">[[item.name]]</div>
  170 + <!--<div class="shortText">[[item.url]]</div>-->
  171 + <!--substring description-->
  172 + <div class="longText">[[item.description]]</div>
  173 + </div>
  174 + <iron-icon icon$="[[iconForItem(item)]]"></iron-icon>
255 175 </div>
256 176 </div>
257 177 </template>
258   -
259   - </div>
260   -
261   - <!-- EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE -->
262   -
263   - </paper-material>
264   -
265   - <paper-material id="datalet_selection_labels" elevation="5">
266   - <div class="input_header"><span id="baseInfo"></span></div>
267   -
268   - <div class="inputs">
269   - <paper-input id="base_title" maxlength="32" class="base_input"></paper-input>
270   - </div>
271   -
272   - <div class="inputs">
273   - <paper-textarea id="base_description" maxlength="100" class="base_input"></paper-textarea>
274   - </div>
275   -
276   - <div class="input_header"><span id="layouts"></span></div>
277   -
278   - <template is="dom-repeat" items="{{labels}}" index-as="index">
279   - <div class="inputs">
280   - <paper-input label={{_getLabelName(item.name)}}></paper-input>
281   - <div class="info_button">
282   - <paper-icon-button id={{item.name}} on-click="_showInfo" icon="info-outline" title="{{_getLabelName(item.name)}} info"></paper-icon-button>
283   - </div>
284   - </div>
285   - </template>
286   - </paper-material>
287   -
288   -
289   - <div id="datalet_selection_column">
290   -
291   - <paper-material id="datalet_selection_datalet" elevation="5">
292   - <div class="input_header"><span id="dataletPreview"></span></div>
293   - <div id="datalet_selection_datalet_placeholder"></div>
294   -
295   - </paper-material>
296   -
297   - <paper-button id="add_button" disabled raised on-click="_addDatalet"></paper-button>
  178 + </iron-list>
298 179  
299 180 </div>
300 181  
301   - <paper-dialog id="dialog_info_input">
302   - <h2 id="dialog_name"></h2>
303   - <p id="dialog_description"></p>
304   - </paper-dialog>
305   -
306 182 </div>
307 183  
308 184 </template>
309 185  
310 186 <script>
311   -
312   - Polymer({
313   -
314   - is : 'datalet-selection-controllet',
315   -
316   - properties : {
317   -
318   - deepUrl : {
319   - type : String,
320   - value : undefined
321   - },
322   -
323   - dataletsListUrl : {
324   - type : String,
325   - value : undefined
326   - },
327   -
328   - selectedDatalet : {
329   - type : String,
330   - value : undefined
331   - },
332   -
333   - preselectedDatalet : {
334   - type : String,
335   - value : undefined
336   - },
337   -
338   - loadPreview : {
339   - type : Boolean,
340   - value : false
341   - },
342   -
343   - type : {
344   - type : String,
345   - value : undefined
346   - },
347   -
348   - inputs : {
349   - type : Array,
350   - value : []
351   - },
352   -
353   - labels : {
354   - type : Array,
355   - value : []
356   - },
357   -
358   - filters : {
359   - type : Array,
360   - value : []
361   - },
362   -
363   - aggregators : {
364   - type : Array,
365   - value : []
366   - },
367   -
368   - orders : {
369   - type : Array,
370   - value : []
371   - },
372   -
373   - fields : {
374   - type : Array,
375   - value : []
376   - },
377   -
378   - selectedFields : {
379   - type : Array,
380   - value : []
381   - },
382   -
383   - groupedFields : {
384   - type : Array,
385   - value : []
386   - },
387   -
388   - dataletPreset : {
389   - type : Object,
390   - value : []
  187 + HTMLImports.whenReady(function() {
  188 + Polymer({
  189 + is: 'select-dataset-controllet',
  190 + properties: {
  191 + items: {
  192 + type: Array,
  193 + value: [
  194 +// {"name": "Bob"},
  195 +// {"name": "Tim"},
  196 +// {"name": "Mike"}
  197 + ]
  198 + }
391 199 },
392   -
393   -// selectableFields : {
394   -// type : Array,
395   -// value : []
396   -// },
397   -
398   - dataUrl : {
399   - type : String,
400   - value : undefined
  200 + ready : function() {
  201 + $(this.$.list_container).perfectScrollbar();
401 202 },
402   -
403   - params:{
404   - type: Object,
405   - value: undefined
  203 + _prova : function(e) {
  204 +// console.log(e.target);
  205 +// e.target.style.background = "#B6B6B6";
406 206 },
407 207  
408   - expert : {
409   - type : Boolean,
410   - value : false
  208 + attached: function() {
  209 + // Use the document element
  210 + this.$.list.scrollTarget = this.ownerDocument.documentElement;
411 211 },
412   -
413   - functions : {
414   - type : Array,
415   - value : ["COUNT", "SUM", "MIN", "MAX", "AVG", "FIRST", "LAST"]
  212 + iconForItem: function(item) {
  213 + return item ? (item.integer < 50 ? 'star-border' : 'info-outline') : '';
416 214 },
417   -
418   - modify : {
419   - type : Boolean,
420   - value : false
421   - }
422   -
423   - },
424   -
425   - listeners: {
426   - 'items-vslider-controllet_selected-datalet': '_selectDatalet',
427   -// 'tree-view-controllet_selected-fields': '_updateSelectedFields'
428   - 'change': '_paramsChanged'
429   - },
430   -
431   - _showExpertMode : function() {
432   - if(!this.expert) {
433   - this.$.expert_header.style.color = "#000000";
434   - this.$.expert_header.style.background = "#B6B6B6";
435   - this.$.expert_container.style.display = "block";
  215 + getClassForItem: function(item, selected) {
  216 + console.log(item);
  217 + console.log(selected);
  218 + return selected ? 'item expanded' : 'item';
436 219 }
437   - else {
438   - this.$.expert_header.style.color = "#00BCD4";
439   - this.$.expert_header.style.background = "#FFFFFF";
440   - this.$.expert_container.style.display = "none";
441   - }
442   -
443   - this.expert = !this.expert;
444   - },
445   -
446   - _showGroupedFields : function(e) {
447   - var index = e.target.id;
448   - var temp = [];
449   -
450   -// var isSelected = false;
451   -// for (var i = 0; i < this.selectedFields.length; i++) {
452   -// if (this.selectedFields[i]) {
453   -// if (this.selectedFields[i].indexOf(this.fields[index]) > -1) {
454   -// isSelected = true;
455   -// }
456   -// else {
457   -// temp.push(this.selectedFields[i]);
458   -// }
459   -// }
460   -// }
461   -//
462   -// if (isSelected)
463   -// this.groupedFields = this._copy(temp);
464   -// else
465   -// this.groupedFields =[];
466   -
467   - for (var i = 0; i < this.selectedFields.length; i++) {
468   - if (this.selectedFields[i]) {
469   - if (i != index) {
470   - temp.push(this.selectedFields[i]);
471   - }
472   - }
473   - }
474   -
475   - this.groupedFields = this._copy(temp);
476   -
477   - this.async(function() {
478   - var ddls = document.getElementsByTagName("paper-dropdown-menu");
479   - for (var i = 0; i < ddls.length; i++){
480   - var id = ddls[i].id;
481   - if(id.indexOf("calculate") > -1) {
482   - $(ddls[i]).find("paper-menu")[0].select(-1);
483   - $(ddls[i]).find("paper-menu")[0].select(0);
484   - }
485   - }
486   - }, 0);
487   -
488   - this._addGroupByInput();
489   - },
490   -
491   - ready : function() {
492   - this._resize();
493   - $(this.$.datalet_selection_inputs).perfectScrollbar();
494   - $(this.$.datalet_selection_labels).perfectScrollbar();
495   - $(this.$.datalet_selection_datalet).perfectScrollbar();
496   -
497   - this.params = {'data-url' : this.dataUrl};
498   -
499   - //this.modify = true;//da eliminare in futuro
500   - if(this.preselectedDatalet){
501   - if(this.modify)
502   - this._preselectDatalet();
503   -
504   - this.modify = true;
505   - this.preselectedDatalet = undefined;
506   - }
507   - },
508   -
509   - attached : function() {
510   - this._resize();
511   - var that = this;
512   - window.addEventListener("resize", function() { that._resize(); });
513   -
514   - this._translate();
515   - },
516   -
517   - setFilters : function(filters) {
518   - this.filters = filters;
519   - },
520   -
521   - setFields : function(fields) {
522   - this.fields = fields;
523   - },
524   -
525   - reset : function() {
526   - this.selectedDatalet = undefined;//non va!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
527   - this.preselectedDatalet = undefined;
528   - this.type = undefined;
529   - this.inputs = [];
530   - this.labels = [];
531   - this.$.expert_header.style.display = "none";
532   - this.expert = true;
533   - this._showExpertMode();
534   - this.loadPreview = false;
535   - this.$.datalet_selection_datalet_placeholder.innerHTML = "";
536   - this._resetGroupBy();
537   - },
538   -
539   - _translate : function(){
540   -
541   - this.$.add_button.innerHTML = ln["addDatalet_" + ln["localization"]];
542   - this.$.inputs.innerHTML = ln["inputs_" + ln["localization"]];
543   - this.$.baseInfo.innerHTML = ln["baseInfo_" + ln["localization"]];
544   - this.$.layouts.innerHTML = ln["layouts_" + ln["localization"]];
545   - this.$.dataletPreview.innerHTML = ln["dataletPreview_" + ln["localization"]];
546   -
547   - this.$.base_title.label = ln["title_" + ln["localization"]];
548   - this.$.base_description.label = ln["description_" + ln["localization"]];
549   -
550   - this.$.groupBy.innerHTML = ln["groupBy_" + ln["localization"]];
551   - this.$.group_by.setAttribute("label", ln["groupBy_" + ln["localization"]]);
552   -
553   - if(this.modify)
554   - this.$.add_button.innerHTML = ln["modifyDatalet_" + ln["localization"]];
555   - },
556   -
557   - _selectDatalet : function(e){
558   - this.$.add_button.setAttribute("disabled", "true");
559   -
560   - this.selectedDatalet = e.detail.datalet;
561   -
562   - this.$.datalet_selection_datalet_placeholder.innerHTML = "";
563   -
564   - if(!this.selectedDatalet){
565   - this.type = undefined;
566   - this.inputs = [];
567   - this.labels = [];
568   - this.$.expert_header.style.display = "none";
569   - this.expert = true;
570   - this._showExpertMode();
571   - this.loadPreview = false;
572   - }
573   - else{
574   - this.$.selectedDatalet_request.url = this.deepUrl + e.detail.datalet + "-datalet";
575   - this.$.selectedDatalet_request.generateRequest();
576   - this.$.expert_header.style.display = "block";
577   - }
578   - },
579   -
580   - _preselectDatalet : function() {
581   - this.type = "undefined";
582   - this.$.selectedDatalet_request.url = this.deepUrl + this.preselectedDatalet + "-datalet";
583   - this.$.selectedDatalet_request.generateRequest();
584   -
585   - this.selectedDatalet = this.preselectedDatalet;
586   - this.selectedFields = this._copy(this.fields);
587   -
588   -// this.filters = JSON.parse(this.dataletPreset["filters"]);
589   -// this.aggregators = JSON.parse(this.dataletPreset["aggregators"]);
590   -// this.orders = JSON.parse(this.dataletPreset["orders"]);
591   -
592   - this.async(function() {
593   - this.selectedFields = this._copy(this.fields);
594   -
595   - //set info labels options
596   - var textarea = this.$.datalet_selection_labels.querySelectorAll("paper-textarea");
597   - textarea[0].value = this.dataletPreset["description"];
598   -
599   - var inputs = this.$.datalet_selection_labels.querySelectorAll("paper-input");
600   - inputs[0].value = this.dataletPreset["title"];
601   -
602   - for (var i = 1; i < inputs.length; i++)
603   - inputs[i].value = this.dataletPreset[this.labels[i-1].name];
604   -
605   - //set inputs --> prima apri GB e riempi CALCULATE e poi gli ORDERBY???
606   - var ddls = document.getElementsByTagName("paper-dropdown-menu");
607   - for (var i = 0; i < ddls.length; i++) {
608   - var id = ddls[i].id;
609   - if (!isNaN(id)) {
610   -// id = parseInt(id);
611   - $(ddls[i]).find("paper-menu")[0].select(id);
612   - }
613   - else if (id.indexOf("group_by") > -1) {
614   - ;
615   - }
616   - else if (id.indexOf("calculate") > -1) {
617   - ;
618   - }
619   - }
620   -
621   - this.loadPreview = true;
622   - this._loadDatalet(this.selectedFields);
623   - }, 300);
624   - },
625   -
626   - _handleSelectedDatalet : function(e){
627   -
628   - if(this.type != e.detail.response.type) {
629   -
630   - this.inputs = [];
631   - this.labels = [];
632   -
633   - var inputs = e.detail.response.idm.inputs.input;
634   -
635   - if (inputs.constructor == Object) {//not Array && inputs.input.selection == "*"
636   - var name = inputs.name;
637   - var description = inputs.description;
638   - var selection = inputs.selection;
639   - inputs = [];
640   - for (var i in this.fields)
641   - inputs.push({name: name + " " + i, description: description, selection: selection});
642   - }
643   -
644   - this.async(function(){
645   - this.type = e.detail.response.type;
646   - this.inputs = inputs;
647   - this.labels = e.detail.response.idm.inputs.layouts.input;
648   -
649   - this.selectedFields = new Array(inputs.length);
650   - },0);
651   -
652   - this._resetGroupBy();
653   -
654   - this.loadPreview = false;
655   - }
656   -
657   - else if (this.loadPreview)
658   - this._loadDatalet(this.selectedFields);
659   - },
660   -
661   - _resetGroupBy : function(){
662   - $(this.$.group_by).find("paper-menu")[0].select(-1);
663   - this.groupedFields = [];
664   - this.aggregators = [];
665   - },
666   -
667   - _addGroupByInput : function(){
668   - this.async(function() {//codice reprlicato!
669   - var selectedFields = this.selectedFields;
670   -
671   - var load = true;
672   -
673   - if(this.inputs[0].selection == "*"){
674   - var temp = [];
675   - for (var i = 0; i < selectedFields.length; i++)
676   - if(selectedFields[i])
677   - temp.push(selectedFields[i]);
678   - selectedFields = temp;
679   - }
680   - else {
681   - for (var i = 0; i < selectedFields.length; i++)
682   - if (!selectedFields[i]) {
683   - load = false;
684   - break;
685   - }
686   - }
687   -
688   - if(load){
689   - this.loadPreview = true;
690   - this._loadDatalet(selectedFields);
691   - }
692   - }, 0);
693   - },
694   -
695   - _addOrder : function(e){
696   - var t = e.target;
697   - if(t.tagName.indexOf("IRON-ICON") > -1)
698   - t = $(e.target).parents("paper-icon-button")[0];
699   -
700   - var icon = t.getAttribute("icon");
701   - var name = t.getAttribute("id");
702   -
703   - if(name.indexOf("gb") > -1){
704   - var selectedItem = $(this.$.group_by).find("paper-menu")[0].selectedItem;
705   - if(selectedItem)
706   - name = selectedItem.textContent.trim();
707   -// name = "[" + selectedItem.textContent.trim() + "]";
708   - else
709   - return;
710   - }// else {
711   -// var i = name;
712   -// var ddl = $("#calculate_"+i);
713   -//
714   -// var label = $(ddl).find("paper-menu")[0].selectedItem.textContent.trim();
715   -// var index = label.split(" ", 2).join(" ").length;
716   -// var field = label.substring(index+1, label.length);
717   -// var operation = label.substring(0, label.indexOf(" "));
718   -// name = operation + "([" + field + "])";
719   -// }
720   -
721   - if(icon.indexOf("unfold-more") > -1){
722   - t.setAttribute("icon", "expand-less");
723   - t.setAttribute("title", ln["sortAscending_" + ln["localization"]]);
724   - var orders = this.orders.filter(function (el) { return el.field !== name; });
725   - orders.push({"field": name, "operation": "ASC"});
726   - this.orders = this._copy(orders);
727   - }
728   - else if(icon.indexOf("expand-less") > -1){
729   - t.setAttribute("icon", "expand-more");
730   - t.setAttribute("title", ln["sortDescending_" + ln["localization"]]);
731   - var orders = this.orders.filter(function (el) { return el.field !== name; });
732   - orders.push({"field": name, "operation": "DESC"});
733   - this.orders = this._copy(orders);
734   - }
735   - else if(icon.indexOf("expand-more") > -1){
736   - t.setAttribute("icon", "unfold-more");
737   - t.setAttribute("title", ln["unsort_" + ln["localization"]]);
738   - var orders = this.orders.filter(function (el) { return el.field !== name; });
739   - this.orders = this._copy(orders);
740   - }
741   -
742   - this._addGroupByInput();//no buoono
743   -// if(load){
744   -// this.loadPreview = true;
745   -// this._loadDatalet(selectedFields);
746   -// }
747   - },
748   -
749   - _addInput : function(e){
750   - var selectedFields = this._copy(this.selectedFields);
751   -
752   -// var index = $(e.target).parents("paper-dropdown-menu")[0].id;
753   -// selectedFields[index] = e.target.innerHTML.trim();
754   -
755   - var ddl_index = $(e.target).parents("paper-dropdown-menu")[0].id;
756   - var index = e.target.id;
757   - selectedFields[ddl_index] = this.fields[index];
758   -
759   - this.selectedFields = this._copy(selectedFields);
760   -
761   - var load = true;
762   -
763   - if(this.inputs[0].selection == "*"){
764   - var temp = [];
765   - for (var i = 0; i < selectedFields.length; i++)
766   - if(selectedFields[i])
767   - temp.push(selectedFields[i]);
768   - selectedFields = temp;
769   - }
770   - else {
771   - for (var i = 0; i < selectedFields.length; i++)
772   - if (!selectedFields[i]) {
773   - load = false;
774   - break;
775   - }
776   - }
777   -
778   - this._resetGroupBy();//--> conflitto, in _updateparams valorizza this.aggregators
779   -
780   - if(load){
781   - this.loadPreview = true;
782   - this._loadDatalet(selectedFields);
783   - }
784   - },
785   -
786   - _updateParams : function(){
787   - var textarea = this.$.datalet_selection_labels.querySelectorAll("paper-textarea");
788   - this.params["description"] = textarea[0].value;
789   -
790   - if(!textarea[0].value)
791   - this.params[textarea[0].label] = "";
792   -
793   - var inputs = this.$.datalet_selection_labels.querySelectorAll("paper-input");
794   - this.params["title"] = inputs[0].value;
795   -
796   - for (var i = 1; i < inputs.length; i++)
797   - this.params[this.labels[i-1].name] = inputs[i].value;
798   -
799   - this.aggregators = [];
800   -
801   - var ddls = document.getElementsByTagName("paper-dropdown-menu");
802   - for (var i = 0; i < ddls.length; i++){
803   - var id = ddls[i].id;
804   - if(id.indexOf("group_by") > -1 && $(ddls[i]).find("paper-menu")[0].selectedItem) {
805   - var label = $(ddls[i]).find("paper-menu")[0].selectedItem.textContent.trim();
806   - this.aggregators.push({"field": label, "operation": "GROUP BY"});
807   - }
808   - if(id.indexOf("calculate") > -1) {
809   - var menu = $(ddls[i]).find("paper-menu")[0];
810   - var label = menu.selectedItem.textContent.trim();
811   - var index = menu.selectedItem.id;
812   - var ii = label.split(" ", 2).join(" ").length;
813   - //attenzione BUG --> non funziona se la traduzione non ha solo 1 spazio
814   - var field = label.substring(ii+1, label.length);
815   -// var operation = label.substring(0, label.indexOf(" "));
816   - this.aggregators.push({"field": field, "operation": this.functions[index]});
817   - }
818   - }
819   - },
820   -
821   - _paramsChanged : function(){
822   -
823   - this._updateParams();
824   -
825   - if(this.$.datalet_selection_datalet_placeholder.children[1])
826   - this.$.datalet_selection_datalet_placeholder.children[1].behavior.setParameters(this.params);
827   - },
828   -
829   - _loadDatalet : function(selectedFields){
830   -
831   - this._updateParams();
832   -
833   - this.params["filters"] = JSON.stringify(this.filters);
834   - this.params["aggregators"] = JSON.stringify(this.aggregators);
835   - this.params["orders"] = JSON.stringify(this.orders);
836   -
837   -// this.params["filters"] = '[{"field": "Lat", "operation": ">=", "value": "53.298164"}, {"field": "Lat", "operation": "<", "value": "54"}]';
838   -// this.params["aggregators"] = '[{"field": "Lat", "operation": "GROUP BY"}, {"field": "Lng", "operation": "COUNT"}]';
839   -// this.params["orders"] = '[{"field": "Lat", "operation": "DESC"}, {"field": "Lat", "operation": "ASC"}]';
840   -
841   - //this.params["aggregators"] = '[{"field": "Value", "operation": "GROUP BY"}, {"field": "LOCATION", "operation": "COUNT"}]';
842   - //this.params["orders"] = '[{"field": "Value", "operation": "ASC"}, {"field": "Value", "operation": "ASC"}]';
843   -
844   - var dataletParams ={
845   - component : this.selectedDatalet+"-datalet",
846   - params : this.params,
847   - fields : selectedFields,
848   - placeHolder : this.$.datalet_selection_datalet_placeholder
849   - };
850   -
851   - ComponentService.deep_url = this.deepUrl;
852   - ComponentService.getComponent(dataletParams);
853   -
854   - this.$.add_button.removeAttribute("disabled");
855   - },
856   -
857   - _addDatalet : function(){
858   -
859   - this._updateParams();
860   -
861   - var selectedFields = [];
862   - for (var i = 0; i < this.selectedFields.length; i++)
863   - if(this.selectedFields[i])
864   - selectedFields.push(this.selectedFields[i]);
865   -
866   - var data = {
867   - dataUrl : this.dataUrl,
868   - params : this.params,
869   - fields : selectedFields,
870   - datalet : this.selectedDatalet+"-datalet",
871   -// comment : "",//DEPRECATED!!!
872   - staticData : JSON.stringify(this.$.datalet_selection_datalet_placeholder.children[1].behavior.data)
873   - }
874   -
875   - this.fire('data-sevc-controllet.dataletCreated', {data : data});
876   -
877   - },
878   -
879   - _showInfo : function(e){
880   -// var that = this;
881   - var t = e.target;
882   - if(t.tagName.indexOf("IRON-ICON") != -1)
883   - t = $(e.target).parents("paper-icon-button")[0];
884   -
885   -// var name = t.getAttribute("title").replace(" info", "");
886   - var name = t.getAttribute("id");
887   -
888   - var dataset = $.grep(this.inputs, function(e){ return e.name == name; })[0];
889   - if(!dataset)
890   - dataset = $.grep(this.labels, function(e){ return e.name == name; })[0];
891   -
892   - this.$.dialog_name.innerHTML = this._getLabelName(dataset.name);
893   - this.$.dialog_description.innerHTML = ln[dataset.description + "_" + ln["localization"]];
894   - this.$.dialog_info_input.open();
895   -
896   - var pos = t.getBoundingClientRect();
897   - $("#dialog_info_input").css("top", pos.top - 4);
898   - $("#dialog_info_input").css("left", pos.left - 4);
899   - },
900   -
901   - _fieldName : function(field) {
902   - if(!field)//when?
903   - return "";
904   - return field.substring(field.lastIndexOf(",")+1, field.length);
905   - },
906   -
907   - _copy : function(o) {
908   - var out, v, key;
909   - out = Array.isArray(o) ? new Array(o.length) : {};
910   - for (key in o) {
911   - v = o[key];
912   - out[key] = (typeof v === "object") ? this._copy(v) : v;
913   - }
914   - return out;
915   - },
916   -
917   - _getLabelName: function(key) {
918   - //* exceptions
919   - if(key.indexOf("Cell") > -1) {
920   - return ln["Cell" + "_" +ln["localization"]] + key.slice(-2);
921   - }
922   - if(key.indexOf("Level") > -1) {
923   - return ln["Level" + "_" +ln["localization"]] + key.slice(-2);
924   - }
925   -
926   - return ln[key + "_" +ln["localization"]];
927   - },
928   -
929   - _calculateLabel: function() {
930   - return ln["calculate" + "_" +ln["localization"]];
931   - },
932   -
933   - _operationName: function(index) {
934   - var key = this.functions[index];
935   - return ln[key + "_" +ln["localization"]];
936   - },
937   -
938   - _resize : function(){
939   - var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16;
940   - h = h - 64 - 8; //height with page scroller
941   -
942   - $("#items_vslider_container").height(h);//vslider controllet
943   -
944   - $("#datalet_selection_inputs").height(h);
945   - $("#datalet_selection_labels").height(h);
946   - $("#datalet_selection_datalet").height(h);
947   - }
948   -
  220 + });
949 221 });
950   -
951 222 </script>
952   -
953 223 </dom-module>
954 224 \ No newline at end of file
... ...
controllets/select-visualization-controllet/demo/index.html
  View file @fb05b40
... ... @@ -13,19 +13,21 @@
13 13 ln["localization"] = "en";
14 14 </script>
15 15  
16   - <link rel="import" href="../datalet-selection-controllet.html" />
  16 + <link rel="import" href="../select-visualization-controllet.html" />
  17 + <link rel="import" href="../select-datalet-inputs_series.html" />
  18 + <link rel="import" href="../select-datalet-options.html" />
17 19 </head>
18 20  
19 21 <body>
20 22  
21   -<!--<datalet-selection-controllet fields='["result,records,Anno","result,records,Cinesi","result,records,Albanesi","result,records,Rumeni","result,records,Pakistani","result,records,Marocchini","result,records,Altri stranieri" ]' data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=e04338cf-7a92-4221-81c6-fe12f41003d5" deep-url="http://172.16.15.38/DEEalerProvider/DEEP/" datalets-list-url="http://172.16.15.38/DEEalerProvider/DEEP/datalets-list"></datalet-selection-controllet>-->
22   -
23   -<!--<datalet-selection-controllet fields='["records,fields,title", "records,fields,published"]' data-url="https://data.issy.com/api/records/1.0/search?dataset=flux-rss-des-offres-demplois-a-issy-les-moulineaux&sort=published&facet=published&refine.published=2015%2F10" deep-url="http://172.16.15.38/DEEalerProvider/DEEP/" datalets-list-url="http://172.16.15.38/DEEalerProvider/DEEP/datalets-list"></datalet-selection-controllet>-->
24   -<datalet-selection-controllet fields='["records,fields,annee", "records,fields,preteur", "records,fields,capital_restant_du"]' data-url="https://data.issy.com/api/records/1.0/search/?dataset=repartitiondeladetteparpreteursau3112n-feuille1&rows=56&sort=-annee" deep-url="http://172.16.15.38/DEEalerProvider/DEEP/" datalets-list-url="http://172.16.15.38/DEEalerProvider/DEEP/datalets-list"></datalet-selection-controllet>
  23 +<select-visualization-controllet fields='["records,fields,annee", "records,fields,preteur", "records,fields,capital_restant_du"]' data-url="https://data.issy.com/api/records/1.0/search/?dataset=repartitiondeladetteparpreteursau3112n-feuille1&rows=56&sort=-annee" deep-url="http://172.16.15.38/DEEalerProvider/DEEP/" datalets-list-url="http://172.16.15.38/DEEalerProvider/DEEP/datalets-list"></select-visualization-controllet>
  24 +<!--<select-datalet-inputs_series></select-datalet-inputs_series>-->
  25 +<!--<select-datalet-options></select-datalet-options>-->
25 26  
26 27 </body>
27 28  
28 29 <!--urls:-->
  30 +<!--https://data.issy.com/api/records/1.0/search/?dataset=repartitiondeladetteparpreteursau3112n-feuille1&rows=56&sort=-annee-->
29 31 <!--https://yperdiavgeia.gr/analytics/counts/source:Decision/query:linux/method:count_organization.json-->
30 32 <!--http://dati.lazio.it/catalog/api/action/datastore_search?resource_id=114baf3d-6d4f-42ff-b4af-481beef59ae1-->
31 33 <!--url: 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52&limit=5',-->
... ...
controllets/select-visualization-controllet/inputs-series.html deleted
View file @dcd5b28
1   -<link rel="import" href="../../bower_components/polymer/polymer.html" />
2   -
3   -<!--<link rel="import" href="../../bower_components/paper-material/paper-material.html" />-->
4   -
5   -<!--<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">-->
6   -<!--<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">-->
7   -<!--<link rel="import" href="../../bower_components/paper-item/paper-item.html">-->
8   -
9   -<!--<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">-->
10   -<!--<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">-->
11   -<!--<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">-->
12   -
13   -<!--<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">-->
14   -<!--<link rel="import" href="../../bower_components/paper-input/paper-input.html">-->
15   -
16   -<!--<link rel="import" href="../../bower_components/paper-button/paper-button.html">-->
17   -
18   -<!--<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">-->
19   -
20   -<!--<link rel="import" href="../items-vslider-controllet/items-vslider-controllet.html" />-->
21   -
22   -<!--<script src="../../../DEEPCLIENT/js/deepClient.js"></script>-->
23   -
24   -<dom-module id="select-visualization-controllet">
25   -
26   - <template>
27   -
28   - <style is="custom-style">
29   - :host {
30   - --paper-dropdown-menu-icon: {
31   - color: #2196F3;
32   - };
33   - }
34   -
35   - #datalet_selection_container {
36   - display: flex;
37   - font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
38   - font-size: 16px;
39   - margin-top: 8px;
40   - }
41   -
42   - #items_vslider_controllet {
43   - position: relative;
44   - min-width: 172px;
45   - }
46   -
47   - #datalet_selection_inputs {
48   - position: relative;
49   - height: 100vh;
50   - margin-left: 32px;
51   - min-width: 258px;
52   - }
53   -
54   - #datalet_selection_labels {
55   - position: relative;
56   - height: 100vh;
57   - margin-left: 32px;
58   - min-width: 258px;
59   - }
60   -
61   - #datalet_selection_column {
62   - position: relative;
63   - width: 100%;
64   - margin-left: 32px;
65   - }
66   -
67   - #datalet_selection_datalet {
68   - position: relative;
69   - height: 100vh;
70   - width: 100%;
71   - }
72   -
73   - #datalet_selection_datalet_placeholder {
74   - padding: 16px;
75   - }
76   -
77   - .inputs{
78   - position: relative;
79   - }
80   -
81   - .input_header {
82   - height: 32px;
83   - padding-top: 16px;
84   - text-align: center;
85   - font-weight: 700;
86   - background-color: #B6B6B6;
87   - }
88   -
89   - #expert_container {
90   - display: none;
91   - }
92   -
93   - #expert_header {
94   - display: none;
95   -
96   - height: 32px;
97   - padding-top: 16px;
98   - margin-top: 8px;
99   - text-align: center;
100   - font-weight: 700;
101   - color: #00BCD4;
102   - cursor: pointer;
103   - }
104   -
105   - .field_nema {
106   - height: 40px;
107   - padding-top: 8px;
108   -
109   - margin-top: 8px;
110   - padding-left: 16px;
111   - font-weight: 700;
112   - color: #2196F3;
113   - background-color: #E0E0E0;
114   - }
115   -
116   - .info_button {
117   - position: absolute;
118   - top: 18px;
119   - right: 0px;
120   - }
121   -
122   - paper-input {
123   - display: inline-block;
124   - height: 48px;
125   - /*padding: 0px 8px;*/
126   - width: 210px;
127   - padding-left: 8px;
128   - padding-bottom: 8px;
129   - --paper-input-container-focus-color: #2196F3;
130   - }
131   -
132   - paper-input.base_input {
133   - width: 242px;
134   - }
135   -
136   - paper-textarea {
137   - width: 242px;
138   - padding-left: 8px;
139   - padding-bottom: 4px;
140   - --paper-input-container-focus-color: #2196F3;
141   - }
142   -
143   - paper-dropdown-menu {
144   - height: 48px;
145   - width: 210px;;
146   - padding-left: 8px;
147   - padding-bottom: 8px;
148   - --paper-input-container-focus-color: #2196F3;
149   - }
150   -
151   - paper-item.iron-selected {
152   - background-color: #2196F3;
153   - color: #FFFFFF;
154   - }
155   -
156   - paper-icon-button {
157   - color: #2196F3;
158   - --paper-icon-button-ink-color: #2196F3;
159   - margin: 0px;
160   - }
161   -
162   - paper-button {
163   - position: absolute;
164   - bottom: 16px;
165   - right: 11px;
166   -
167   - height: 48px;
168   - width: 172px;
169   - background-color: #00BCD4;
170   - color: white;
171   - font-weight: 700;
172   - padding: 16px;
173   - }
174   -
175   - paper-button:hover {
176   - background-color: #00AABF;
177   -
178   - box-shadow: 0px 8px 12px #888;
179   - -webkit-box-shadow: 0px 8px 12px #888;
180   - -moz-box-shadow: 0px 8px 12px #888;
181   - }
182   -
183   - paper-button[disabled] {
184   - background-color: #B6B6B6;
185   - }
186   -
187   - #dialog_info_input {
188   - border: 2px solid #2196F3;
189   - background-color: #E0E0E0;
190   - min-width: 248px;
191   - }
192   - </style>
193   -
194   - <iron-ajax id="selectedDatalet_request" on-response="_handleSelectedDatalet"></iron-ajax>
195   -
196   - <div id="datalet_selection_container">
197   -
198   - <paper-material id="datalet_selection_inputs" elevation="5">
199   - <div class="input_header"><span id="inputs"></span></div>
200   - <template is="dom-repeat" items="{{inputs}}" index-as="ddl_index">
201   - <div class="inputs">
202   - <paper-dropdown-menu id={{ddl_index}} label={{_getLabelName(item.name)}}>
203   - <paper-menu class="dropdown-content">
204   - <template is="dom-repeat" items={{fields}}>
205   - <paper-item id={{index}} on-tap="_addInput">{{_fieldName(item)}}</paper-item>
206   - <!--{{_fieldName(item)}}-->
207   - </template>
208   - </paper-menu>
209   - </paper-dropdown-menu>
210   - <div class="info_button">
211   - <paper-icon-button id={{item.name}} on-click="_showInfo" icon="info-outline" title="{{_getLabelName(item.name)}} info"></paper-icon-button>
212   - </div>
213   - </div>
214   - </template>
215   -
216   - <!-- EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE EXPERT MODE -->
217   -
218   - <div id="expert_header" on-click="_showExpertMode"><span id="groupBy"></span></div>
219   -
220   - <div id="expert_container">
221   -
222   - <div class="inputs">
223   - <paper-dropdown-menu id="group_by">
224   - <paper-menu class="dropdown-content">
225   - <template is="dom-repeat" items={{fields}}>
226   - <paper-item id={{index}} on-tap="_showGroupedFields">{{_fieldName(item)}}</paper-item>
227   - </template>
228   - </paper-menu>
229   - </paper-dropdown-menu>
230   - <div class="info_button">
231   - <paper-icon-button id="gb" on-click="_addOrder" icon="unfold-more" title=""></paper-icon-button>
232   - </div>
233   - </div>
234   -
235   - <template is="dom-repeat" items="{{groupedFields}}">
236   - <div class="inputs">
237   - <paper-dropdown-menu id="calculate_{{index}}" label="{{_calculateLabel()}}">
238   - <paper-menu class="dropdown-content">
239   - <!--foreach functions-->
240   - <paper-item id="0" on-tap="_addGroupByInput">{{_operationName(0)}} {{_fieldName(item)}}</paper-item>
241   - <paper-item id="1" on-tap="_addGroupByInput">{{_operationName(1)}} {{_fieldName(item)}}</paper-item>
242   - <paper-item id="2" on-tap="_addGroupByInput">{{_operationName(2)}} {{_fieldName(item)}}</paper-item>
243   - <paper-item id="3" on-tap="_addGroupByInput">{{_operationName(3)}} {{_fieldName(item)}}</paper-item>
244   - <paper-item id="4" on-tap="_addGroupByInput">{{_operationName(4)}} {{_fieldName(item)}}</paper-item>
245   - <paper-item id="5" on-tap="_addGroupByInput">{{_operationName(5)}} {{_fieldName(item)}}</paper-item>
246   - <paper-item id="6" on-tap="_addGroupByInput">{{_operationName(6)}} {{_fieldName(item)}}</paper-item>
247   - </paper-menu>
248   - </paper-dropdown-menu>
249   - <div class="info_button">
250   - <paper-icon-button id={{_fieldName(item)}} on-click="_addOrder" icon="unfold-more" title=""></paper-icon-button>
251   - </div>
252   - </div>
253   - </template>
254   -
255   - </div>
256   -