WebCompDev / COMPONENTS

Commit 8d261aa1227a647a43ac7b09c255313a4acbfeb9

Authored by Renato De Donato
1 parent 9a8ed768

creator

Inline Side-by-side
Showing 17 changed files with 787 additions and 3982 deletions
controllet.html 0 → 100644
  View file @8d261aa
  1 +<script type="text/javascript" src="controllets/shared_js/jquery-1.11.2.min.js"></script>
  2 +<script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
  3 +<link rel="import" href="controllets/data-sevc-controllet/demo-data-sevc-controllet.html" />
  4 +
  5 +<style>
  6 + #controllet paper-material {
  7 + overflow: hidden;
  8 + }
  9 +</style>
  10 +
  11 +<script type="text/javascript">
  12 + $(document).ready(function () {
  13 + var datasets = {"result":{
  14 + "providers":{"1":{"title":"CKAN","api_url":"http://ckan.routetopa.eu","image_hash":"11","id":"1"}},
  15 + "datasets":[
  16 + {"w":1,"provider_name":"p:1","organization_name":"SPOD","package_name":"isislab","resource_name":"SPOD SUPER HEROES","url":"http:\/\/ckan.routetopa.eu\/\/api/action\/datastore_search?resource_id=642ceea8-711e-4124-b450-0d23010c44e6","metas":"{\"organization\":\"SPOD\",\"description\":\"This is a test datasets.\",\"format\":\"CSV\"}"},
  17 + {"w":1,"provider_name":"p:1","organization_name":"SPOD","package_name":"isislab","resource_name":"Wonders of the World","url":"http:\/\/ckan.routetopa.eu\/\/api\/action\/datastore_search?resource_id=1d9c8e62-47ab-40d5-8943-b4c3bca14b50","metas":"{\"organization\":\"SPOD\",\"description\":\"This is a test datasets.\",\"format\":\"CSV\"}"},
  18 + {"w":1,"provider_name":"p:1","organization_name":"SPOD","package_name":"isislab","resource_name":"Animal Sounds","url":"http:\/\/ckan.routetopa.eu\/\/api\/action\/datastore_search?resource_id=1d9c8e62-47ab-40d5-8943-b4c3bca14b50","metas":"{\"organization\":\"SPOD\",\"description\":\"This is a test datasets.\",\"format\":\"CSV\"}"}
  19 + ]}};
  20 +
  21 + var controllet = document.getElementById("controllet");
  22 + controllet.setAttribute("datasets", JSON.stringify(datasets));
  23 +
  24 + window.addEventListener("data-sevc-controllet.dataletCreated", function(e){parent.createHTML(e);});
  25 + });
  26 +
  27 + //http://ckan.routetopa.eu/api/action/datastore_search?resource_id=1d9c8e62-47ab-40d5-8943-b4c3bca14b50
  28 +
  29 +</script>
  30 +
  31 +<demo-data-sevc-controllet id="controllet"
  32 + deep-url="http://172.16.15.38/DEEalerProvider/DEEP/"
  33 + datalets-list-url="http://172.16.15.38/DEEalerProvider/DEEP/datalets-list"
  34 + >
  35 +</demo-data-sevc-controllet>
  36 +
  37 +<!--datasets='{"result":{"providers":{"1":{"title":"CKAN","api_url":"http:\/\/ckan.routetopa.eu","image_hash":"11","id":"1"}},"datasets":[{"w":1,"provider_name":"p:1","organization_name":"SPOD","package_name":"isislab","resource_name":"EXAMPLE 1","url":"http:\/\/ckan.routetopa.eu\/\/api\/action\/datastore_search?resource_id=642ceea8-711e-4124-b450-0d23010c44e6","metas":"{\"organization\":\"SPOD\",\"description\":\"This is a test datasets.\",\"format\":\"CSV\"}"}, {"w":1,"provider_name":"p:1","organization_name":"SPOD","package_name":"isislab","resource_name":"EXAMPLE 2","url":"http:\/\/ckan2.routetopa.eu\/\/api\/action\/datastore_search?resource_id=642ceea8-711e-4124-b450-0d23010c44e6","metas":"{\"organization\":\"SPOD\",\"description\":\"This is a test datasets.\",\"format\":\"CSV\"}"}, {"w":1,"provider_name":"p:1","organization_name":"SPOD","package_name":"isislab","resource_name":"EXAMPLE 3","url":"http:\/\/ckan3.routetopa.eu\/\/api\/action\/datastore_search?resource_id=642ceea8-711e-4124-b450-0d23010c44e6","metas":"{\"organization\":\"SPOD\",\"description\":\"This is a test datasets.\",\"format\":\"CSV\"}"}]}}'-->
controllets/cocreation-paper-card-controllet/cocreation-paper-card-controllet.html
  View file @8d261aa
@@ -186,10 +186,10 @@ @@ -186,10 +186,10 @@
186 <iron-icon class="icon-to" icon="alarm-off"></iron-icon>&nbsp; {{to}} 186 <iron-icon class="icon-to" icon="alarm-off"></iron-icon>&nbsp; {{to}}
187 </div> 187 </div>
188 </div> 188 </div>
189 - <template is="dom-if" if="{{!checkRoomType(roomType)}}"> 189 + <template is="dom-if" if="{{!_checkRoomType(roomType)}}">
190 <paper-fab mini icon="assessment" class="assessment" noink></paper-fab> 190 <paper-fab mini icon="assessment" class="assessment" noink></paper-fab>
191 </template> 191 </template>
192 - <template is="dom-if" if="{{checkRoomType(roomType)}}"> 192 + <template is="dom-if" if="{{_checkRoomType(roomType)}}">
193 <paper-fab mini icon="description" class="description" noink></paper-fab> 193 <paper-fab mini icon="description" class="description" noink></paper-fab>
194 </template> 194 </template>
195 </div> 195 </div>
@@ -274,15 +274,15 @@ @@ -274,15 +274,15 @@
274 this.$.explore.innerHTML = cocreation_room_ln["explore_" + cocreation_room_ln["ln"]]; 274 this.$.explore.innerHTML = cocreation_room_ln["explore_" + cocreation_room_ln["ln"]];
275 }, 275 },
276 276
277 - _handleDeleteClick: function(e){ 277 + _handleDeleteClick: function(){
278 this.fire("cocreation-paper-card-controllet_delete", {roomId: this.roomId}); 278 this.fire("cocreation-paper-card-controllet_delete", {roomId: this.roomId});
279 }, 279 },
280 280
281 - _onExplore: function(e){ 281 + _onExplore: function(){
282 window.location = this.roomUrl; 282 window.location = this.roomUrl;
283 }, 283 },
284 284
285 - checkRoomType: function(type){ 285 + _checkRoomType: function(type){
286 return (type == "knowledge") ? true : false; 286 return (type == "knowledge") ? true : false;
287 } 287 }
288 }) 288 })
controllets/data-sevc-controllet/data-sevc-controllet_old.html deleted
View file @9a8ed76
1 -<script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>  
2 -<link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">  
3 -  
4 -<script src="../../locales/controllet_ln.js"></script>  
5 -  
6 -<link rel="import" href="../../bower_components/polymer/polymer.html">  
7 -  
8 -<link rel="import" href="../page-slider-controllet/page-slider-controllet.html">  
9 -  
10 -<link rel="import" href="../select-dataset-controllet/select-dataset-controllet.html">  
11 -<link rel="import" href="../select-data-controllet/select-data-controllet.html" />  
12 -<link rel="import" href="../select-visualization-controllet/select-visualization-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 - <template is="dom-if" if={{!modify}}>  
23 - <select-dataset-controllet id="select_dataset" data={{data}} datasets={{datasets}} suggested-datasets={{suggestedDatasets}}></select-dataset-controllet>  
24 - </template>  
25 -  
26 - </neon-animatable>  
27 -  
28 - <neon-animatable>  
29 -  
30 - <select-data-controllet id="select_data" data-url={{dataUrl}} preselected-fields={{selectedFields}} datalet-preset="{{dataletPreset}}"></select-data-controllet>  
31 -  
32 - </neon-animatable>  
33 -  
34 - <neon-animatable>  
35 -  
36 - <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>  
37 -  
38 - </neon-animatable>  
39 -  
40 - </page-slider-controllet>  
41 -  
42 - </template>  
43 -  
44 - <script>  
45 -  
46 - Polymer({  
47 -  
48 - is : 'data-sevc-controllet',  
49 -  
50 - listeners : {  
51 - 'page-slider-controllet_selected' : '_updateSlider',  
52 - 'dataset-selection-controllet_data-url' : '_allowSecondStep',  
53 - 'tree-view-controllet_selected-fields' : '_allowThirdStep'  
54 - },  
55 -  
56 - properties : {  
57 -  
58 - deepUrl : {  
59 - type : String,  
60 - value : undefined  
61 - },  
62 -  
63 - dataletsListUrl : {  
64 - type : String ,  
65 - value : undefined  
66 - },  
67 -  
68 - datasets : {  
69 - type : Array,  
70 - value : undefined  
71 - },  
72 -  
73 - suggestedDatasets : {  
74 - type : Array,  
75 - value : undefined  
76 - },  
77 -  
78 - dataUrl : {  
79 - type : String,  
80 - value : undefined  
81 - },  
82 -  
83 - jsonData : {  
84 - type : Object,  
85 - value : undefined  
86 - },  
87 -  
88 - modify : {  
89 - type : Boolean,  
90 - value : false  
91 - },  
92 -  
93 - selectedDatalet : {  
94 - type : String,  
95 - value : undefined  
96 - },  
97 -  
98 - selectedFields : {  
99 - type : Array,  
100 - value : []  
101 - },  
102 -  
103 - dataletPreset : {  
104 - type : Object,  
105 - value : []  
106 - },  
107 -  
108 - localization : {  
109 - type : String,  
110 - value : "en"  
111 - }  
112 -  
113 - },  
114 -  
115 - ready : function(){  
116 - if(this.selectedDatalet){  
117 - this.modify = true;  
118 - this.$.slider.selected = 1;  
119 - this.dataUrl = this.dataletPreset["data-url"];  
120 - }  
121 - ln["localization"] = this.localization;  
122 - },  
123 -  
124 - _updateSlider : function(e){  
125 - switch (e.detail.selected) {  
126 - case 0:  
127 - slider.setTitle(ln["slide1Title_" + this.localization], ln["slide1Subtitle_" + this.localization]);  
128 - slider.chevronLeft("invisible");  
129 - slider.chevronRight(false);  
130 - if(slider.getPrevSelected() == 1)  
131 - slider.chevronRight(true);  
132 - break;  
133 - case 1:  
134 - slider.setTitle(ln["slide2Title_" + this.localization], ln["slide2Subtitle_" + this.localization]);  
135 - if(this.modify){  
136 - slider.chevronLeft("invisible");  
137 - }  
138 - else{  
139 - slider.chevronLeft(true);  
140 - }  
141 - slider.chevronRight(false);  
142 - this._allowThirdStep({detail: {fields: select_data.getSelectedFields()}});  
143 - if(this.modify){  
144 - this.$.select_visualization.setFields(select_data.getSelectedFields());  
145 - this.$.select_visualization.setFilters(select_data.getFilters());  
146 - }  
147 - break;  
148 - case 2:  
149 - slider.setTitle(ln["slide3Title_" + this.localization], ln["slide3Subtitle_" + this.localization]);  
150 - slider.chevronLeft(true);  
151 - slider.chevronRight("invisible");  
152 -  
153 - this.$.select_visualization.setFields(select_data.getSelectedFields());  
154 - this.$.select_visualization.setFilters(select_data.getFilters());  
155 - if(this.modify) {  
156 - this.$.select_visualization.show();//resize  
157 - }  
158 - }  
159 - },  
160 -  
161 - _allowSecondStep : function(e){  
162 - if(e.detail.url == "") {  
163 - slider.chevronRight(false);  
164 - select_dataset.$.selected_url.invalid = false;  
165 - return;  
166 - }  
167 -  
168 - this.dataUrl = e.detail.url;  
169 -  
170 - var that = this;  
171 -  
172 - $.ajax({  
173 - url: e.detail.url,  
174 - dataType: "json",  
175 - success: function(data){  
176 -// this.dataUrl = e.detail.url  
177 -// this.jsonData = JSON.stringify(data);  
178 - slider.chevronRight(true);  
179 - select_dataset.$.selected_url.invalid = false;  
180 -  
181 - that.$.select_data._init();  
182 - },  
183 - error: function(){  
184 -// this.jsonData = undefined;  
185 - slider.chevronRight(false);  
186 - select_dataset.$.selected_url.invalid = true;  
187 -  
188 - that.$.select_data._reset();  
189 - }  
190 - });  
191 -  
192 - //NOT HERE ma quando VADO al secondo passo e l'url è cambiato  
193 -// this.$.select_data._init();  
194 - this.$.select_visualization.reset();  
195 - },  
196 -  
197 - _allowThirdStep : function(e){  
198 - if(e.detail.fields.length > 0)  
199 - slider.chevronRight(true);  
200 - else  
201 - slider.chevronRight(false);  
202 -  
203 - //this.$.select_visualization.reset();  
204 - }  
205 -  
206 - });  
207 -  
208 - </script>  
209 -  
210 -</dom-module>  
211 \ No newline at end of file 0 \ No newline at end of file
controllets/data-sevc-controllet/datalets-modifier-controllet.html deleted
View file @9a8ed76
1 -<script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>  
2 -<link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">  
3 -  
4 -<script src="../../locales/controllet_ln.js"></script>  
5 -  
6 -<link rel="import" href="../../bower_components/polymer/polymer.html">  
7 -  
8 -<link rel="import" href="../page-slider-controllet/page-slider-controllet.html">  
9 -  
10 -<link rel="import" href="../select-data-controllet/select-data-controllet.html" />  
11 -<link rel="import" href="../select-visualization-controllet/select-visualization-controllet.html" />  
12 -  
13 -<dom-module id="datalets-modifier-controllet">  
14 -  
15 - <template>  
16 -  
17 - <page-slider-controllet id="slider">  
18 -  
19 - <neon-animatable>  
20 -  
21 - <select-data-controllet id="select_data"></select-data-controllet>  
22 -  
23 - </neon-animatable>  
24 -  
25 - <neon-animatable>  
26 -  
27 - <select-visualization-controllet id="select_visualization" deep-url={{deepUrl}} datalets-list-url={{dataletsListUrl}}></select-visualization-controllet>  
28 -  
29 - </neon-animatable>  
30 -  
31 - </page-slider-controllet>  
32 -  
33 - </template>  
34 -  
35 - <script>  
36 -  
37 - Polymer({  
38 -  
39 - is : 'datalets-modifier-controllet',  
40 -  
41 - listeners : {  
42 - 'page-slider-controllet_selected' : '_updateSlider',  
43 - 'dataset-selection-controllet_data-url' : '_allowSecondStep',  
44 - 'tree-view-controllet_selected-fields' : '_allowThirdStep'  
45 - },  
46 -  
47 - properties : {  
48 -// dataUrl : {  
49 -// type : String,  
50 -// value : undefined  
51 -// },  
52 -  
53 - preselectedDatalet : { //datalet  
54 - type : String,  
55 - value : undefined  
56 - },  
57 -  
58 - preselectedFields : { //fields  
59 - type : Array,  
60 - value : undefined  
61 - },  
62 -  
63 - dataletPreset : { //params  
64 - type : String,  
65 - value : undefined  
66 - },  
67 -  
68 - deepUrl : {  
69 - type : String,  
70 - value : undefined  
71 - },  
72 -  
73 - dataletsListUrl : {  
74 - type : String ,  
75 - value : undefined  
76 - },  
77 -  
78 - localization : {  
79 - type : String,  
80 - value : "en"  
81 - }  
82 -  
83 - },  
84 -  
85 - ready : function(){  
86 - if(this.selectedDatalet){  
87 - this.modify = true;  
88 - this.$.slider.selected = 1;  
89 - this.dataUrl = this.dataletPreset["data-url"];  
90 - }  
91 - ln["localization"] = this.localization;  
92 - },  
93 -  
94 - _updateSlider : function(e){  
95 - switch (e.detail.selected) {  
96 - case 0:  
97 - slider.setTitle(ln["slide1Title_" + this.localization], ln["slide1Subtitle_" + this.localization]);  
98 - slider.chevronLeft("invisible");  
99 - slider.chevronRight(false);  
100 - if(slider.getPrevSelected() == 1)  
101 - slider.chevronRight(true);  
102 - break;  
103 - case 1:  
104 - slider.setTitle(ln["slide2Title_" + this.localization], ln["slide2Subtitle_" + this.localization]);  
105 - if(this.modify){  
106 - slider.chevronLeft("invisible");  
107 - }  
108 - else{  
109 - slider.chevronLeft(true);  
110 - }  
111 - slider.chevronRight(false);  
112 - this._allowThirdStep({detail: {fields: select_data.getSelectedFields()}});  
113 - if(this.modify){  
114 - this.$.select_visualization.setFields(select_data.getSelectedFields());  
115 - this.$.select_visualization.setFilters(select_data.getFilters());  
116 - }  
117 - break;  
118 - case 2:  
119 - slider.setTitle(ln["slide3Title_" + this.localization], ln["slide3Subtitle_" + this.localization]);  
120 - slider.chevronLeft(true);  
121 - slider.chevronRight("invisible");  
122 -  
123 - this.$.select_visualization.setFields(select_data.getSelectedFields());  
124 - this.$.select_visualization.setFilters(select_data.getFilters());  
125 - if(this.modify) {  
126 - this.$.select_visualization.show();//resize  
127 - }  
128 - }  
129 - },  
130 -  
131 - _allowSecondStep : function(e){  
132 - if(e.detail.url == "") {  
133 - slider.chevronRight(false);  
134 - select_dataset.$.selected_url.invalid = false;  
135 - return;  
136 - }  
137 -  
138 - this.dataUrl = e.detail.url;  
139 -  
140 - var that = this;  
141 -  
142 - $.ajax({  
143 - url: e.detail.url,  
144 - dataType: "json",  
145 - success: function(data){  
146 -// this.dataUrl = e.detail.url  
147 -// this.jsonData = JSON.stringify(data);  
148 - slider.chevronRight(true);  
149 - select_dataset.$.selected_url.invalid = false;  
150 -  
151 - that.$.select_data._init();  
152 - },  
153 - error: function(){  
154 -// this.jsonData = undefined;  
155 - slider.chevronRight(false);  
156 - select_dataset.$.selected_url.invalid = true;  
157 -  
158 - that.$.select_data._reset();  
159 - }  
160 - });  
161 -  
162 - //NOT HERE ma quando VADO al secondo passo e l'url è cambiato  
163 -// this.$.select_data._init();  
164 - this.$.select_visualization.reset();  
165 - },  
166 -  
167 - _allowThirdStep : function(e){  
168 - if(e.detail.fields.length > 0)  
169 - slider.chevronRight(true);  
170 - else  
171 - slider.chevronRight(false);  
172 -  
173 - //this.$.select_visualization.reset();  
174 - }  
175 -  
176 - });  
177 -  
178 - </script>  
179 -  
180 -</dom-module>  
181 \ No newline at end of file 0 \ No newline at end of file
controllets/data-sevc-controllet/demo-data-sevc-controllet.html 0 → 100644
  View file @8d261aa
  1 +<script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
  2 +<link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
  3 +
  4 +<script src="../../locales/controllet_ln.js"></script>
  5 +
  6 +<link rel="import" href="../../bower_components/polymer/polymer.html">
  7 +
  8 +<link rel="import" href="../page-slider-controllet/page-slider-controllet.html">
  9 +
  10 +<link rel="import" href="../select-dataset-controllet/demo-select-dataset-controllet.html">
  11 +<link rel="import" href="../select-data-controllet/select-data-controllet.html" />
  12 +<link rel="import" href="../select-visualization-controllet/select-visualization-controllet.html" />
  13 +
  14 +<dom-module id="demo-data-sevc-controllet">
  15 +
  16 + <template>
  17 +
  18 + <page-slider-controllet id="slider">
  19 +
  20 + <neon-animatable>
  21 +
  22 + <demo-select-dataset-controllet id="select_dataset" datasets={{datasets}} suggested-datasets={{suggestedDatasets}}></demo-select-dataset-controllet>
  23 +
  24 + </neon-animatable>
  25 +
  26 + <neon-animatable>
  27 +
  28 + <select-data-controllet id="select_data"></select-data-controllet>
  29 +
  30 + </neon-animatable>
  31 +
  32 + <neon-animatable>
  33 +
  34 + <select-visualization-controllet id="select_visualization" deep-url={{deepUrl}} datalets-list-url={{dataletsListUrl}}></select-visualization-controllet>
  35 +
  36 + </neon-animatable>
  37 +
  38 + </page-slider-controllet>
  39 +
  40 + </template>
  41 +
  42 + <script>
  43 +
  44 + Polymer({
  45 +
  46 + is : 'demo-data-sevc-controllet',
  47 +
  48 + listeners : {
  49 + 'page-slider-controllet_selected' : '_updateSlider',
  50 + 'select-dataset-controllet_data-url' : '_allowSecondStep',
  51 + 'select-fields-controllet_selected-fields' : '_allowThirdStep',
  52 + 'filters-controllet_filters': '_allowThirdStep',
  53 + 'aggregators-controllet_aggregators': '_allowThirdStep',
  54 + 'data-ready': '_dataReady'
  55 + },
  56 +
  57 + properties : {
  58 +
  59 + datasets : {
  60 + type : Object,
  61 + value : undefined
  62 + },
  63 +
  64 + suggestedDatasets : {
  65 + type : Array,
  66 + value : undefined
  67 + },
  68 +
  69 + deepUrl : {
  70 + type : String,
  71 + value : undefined
  72 + },
  73 +
  74 + dataletsListUrl : {
  75 + type : String ,
  76 + value : undefined
  77 + },
  78 +
  79 + localization : {
  80 + type : String,
  81 + value : "en"
  82 + }
  83 +
  84 + },
  85 +
  86 + ready : function(){
  87 + ln["localization"] = this.localization;
  88 + },
  89 +
  90 + _updateSlider : function(e){
  91 + switch (e.detail.selected) {
  92 + case 0:
  93 + this.$.slider.setTitle(ln["slide1Title_" + this.localization], ln["slide1Subtitle_" + this.localization]);
  94 +
  95 + this.$.slider.chevronLeft("invisible");
  96 + this.$.slider.chevronRight(false);
  97 +
  98 + if(this.$.slider.getPrevSelected() == 1)
  99 + this.$.slider.chevronRight(true);
  100 + break;
  101 + case 1:
  102 + this.$.slider.setTitle(ln["slide2Title_" + this.localization], ln["slide2Subtitle_" + this.localization]);
  103 +
  104 + this.$.slider.chevronLeft(true);
  105 + this.$.slider.chevronRight(false);
  106 +
  107 + if(this.$.slider.getPrevSelected() == 2)
  108 + this.$.slider.chevronRight(true);
  109 + break;
  110 + case 2:
  111 + this.$.slider.setTitle(ln["slide3Title_" + this.localization], ln["slide3Subtitle_" + this.localization]);
  112 +
  113 + this.$.slider.chevronLeft(true);
  114 + this.$.slider.chevronRight("invisible");
  115 + }
  116 + },
  117 +
  118 + _allowSecondStep : function(e){
  119 + this.$.slider.chevronRight(false);
  120 +
  121 + var f = Object.create(providerFactory);
  122 + var provider = f.getProvider(e.detail.url);
  123 + var dataUrl = provider.addLimit(e.detail.url);
  124 +
  125 + this.$.select_data.dataUrl = dataUrl;
  126 + this.$.select_data.init();
  127 + this.$.select_visualization.dataUrl = dataUrl;
  128 + this.$.select_visualization.init();
  129 + },
  130 +
  131 + _dataReady : function(e){
  132 + if(e.detail.ready) {
  133 + this.$.slider.chevronRight(true);
  134 + this.$.select_dataset.$.selected_url.invalid = false;
  135 + }
  136 + else
  137 + this.$.select_dataset.$.selected_url.invalid = true;
  138 +
  139 + this.$.select_dataset.showDatasetInfo();
  140 + },
  141 +
  142 + _allowThirdStep : function(){
  143 + this.$.slider.chevronRight(false);
  144 + var selectedFields = this.$.select_data.getSelectedFields();
  145 + var filters = this.$.select_data.getFilters();
  146 + var aggregators = this.$.select_data.getAggregators();
  147 + var data = this.$.select_data.getData();
  148 + if(selectedFields.length > 0) {
  149 + this.$.select_visualization.init();
  150 + this.$.select_visualization.setSelectedFields(selectedFields);
  151 + this.$.select_visualization.setFilters(filters);
  152 + this.$.select_visualization.setAggregators(aggregators);
  153 + this.$.select_visualization.setData(data);
  154 + this.$.slider.chevronRight(true);
  155 + }
  156 + }
  157 +
  158 + });
  159 +
  160 + </script>
  161 +
  162 +</dom-module>
0 \ No newline at end of file 163 \ No newline at end of file
controllets/data-sevc-controllet/static/css/reset.css deleted
View file @9a8ed76
1 -::content html {  
2 - color: #000;  
3 - background: #FFF;  
4 -}  
5 -  
6 -::content body, div, dl, dt, dd, ul, ol, li, h1, h2, h3,  
7 -h4, h5, h6, pre, code, form, fieldset, legend,  
8 -input, button, textarea, p, blockquote, th, td {  
9 - margin: 0;  
10 - padding: 0;  
11 -}  
12 -  
13 -::content table {  
14 - border-collapse: collapse;  
15 - border-spacing: 0;  
16 -}  
17 -  
18 -::content fieldset, img {  
19 - border: 0;  
20 -}  
21 -  
22 -::content address, caption, cite, code, dfn, em, strong,  
23 -th, var, optgroup {  
24 - font-style: inherit;  
25 - font-weight: inherit;  
26 -}  
27 -  
28 -::content del, ins {  
29 - text-decoration: none;  
30 -}  
31 -  
32 -::content li {  
33 - list-style: none;  
34 -}  
35 -  
36 -::content caption, th {  
37 - text-align: left;  
38 -}  
39 -  
40 -::content h1, h2, h3, h4, h5, h6 {  
41 - font-size: 100%;  
42 - font-weight: normal;  
43 -}  
44 -  
45 -::content q:before, q:after {  
46 - content: '';  
47 -}  
48 -  
49 -::content abbr, acronym {  
50 - border: 0;  
51 - font-variant: normal;  
52 -}  
53 -  
54 -::content sup {  
55 - vertical-align: baseline;  
56 -}  
57 -  
58 -::content sub {  
59 - vertical-align: baseline;  
60 -}  
61 -  
62 -/*because legend doesn't inherit in IE */  
63 -::content legend {  
64 - color: #000;  
65 -}  
66 -  
67 -::content input, button, textarea, select, optgroup, option {  
68 - font-family: inherit;  
69 - font-size: inherit;  
70 - font-style: inherit;  
71 - font-weight: inherit;  
72 -}  
73 -  
74 -/*@purpose To enable resizing for IE */  
75 -/*@branch For IE6-Win, IE7-Win */  
76 -::content input, button, textarea, select {  
77 - *font-size: 100%;  
78 -}  
79 \ No newline at end of file 0 \ No newline at end of file
controllets/data-sevc-controllet/static/images/UnderConstruction.png deleted
View file @9a8ed76

97.5 KB
controllets/data-sevc-controllet/static/images/or.png deleted
View file @9a8ed76

733 Bytes
controllets/datalet-selection-controllet/datalet-selection-controllet.html deleted
View file @9a8ed76
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="datalet-selection-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 - <div id="items_vslider_controllet">  
199 - <items-vslider-controllet id="vslider" datalets-list-url={{dataletsListUrl}} preselected-datalet={{preselectedDatalet}}></items-vslider-controllet>  
200 - </div>  
201 -  
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={{fields}}>  
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>  
255 - </div>  
256 - </div>  
257 - </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>  
298 -  
299 - </div>  
300 -  
301 - <paper-dialog id="dialog_info_input">  
302 - <h2 id="dialog_name"></h2>  
303 - <p id="dialog_description"></p>  
304 - </paper-dialog>  
305 -  
306 - </div>  
307 -  
308 - </template>  
309 -  
310 - <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 : []  
391 - },  
392 -  
393 -// selectableFields : {  
394 -// type : Array,  
395 -// value : []  
396 -// },  
397 -  
398 - dataUrl : {  
399 - type : String,  
400 - value : undefined  
401 - },  
402 -  
403 - params:{  
404 - type: Object,  
405 - value: undefined  
406 - },  
407 -  
408 - expert : {  
409 - type : Boolean,  
410 - value : false  
411 - },  
412 -  
413 - functions : {  
414 - type : Array,  
415 - value : ["COUNT", "SUM", "MIN", "MAX", "AVG", "FIRST", "LAST"]  
416 - },  
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";  
436 - }  
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 -  
949 - });  
950 -  
951 - </script>  
952 -  
953 -</dom-module>  
954 \ No newline at end of file 0 \ No newline at end of file
controllets/datalet-selection-controllet/demo/index.html deleted
View file @9a8ed76
1 -<html>  
2 -  
3 -<head>  
4 - <script src="../../shared_js/jquery-1.11.2.min.js"></script>  
5 -  
6 - <script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>  
7 -  
8 - <script src="../../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>  
9 - <link rel="stylesheet" href="../../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">  
10 -  
11 - <script src="../../../locales/controllet_ln.js"></script>  
12 - <script>  
13 - ln["localization"] = "en";  
14 - </script>  
15 -  
16 - <link rel="import" href="../datalet-selection-controllet.html" />  
17 -</head>  
18 -  
19 -<body>  
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>-->  
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>  
25 -  
26 -</body>  
27 -  
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 \ No newline at end of file 0 \ No newline at end of file
controllets/dataset-selection-controllet/dataset-selection-controllet.html deleted
View file @9a8ed76
1 -<link rel="import" href="../../bower_components/polymer/polymer.html">  
2 -  
3 -<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">  
4 -<link rel="import" href="../../bower_components/paper-tabs/paper-tab.html">  
5 -  
6 -<link rel="import" href="../../bower_components/neon-animation/neon-animation.html">  
7 -<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">  
8 -<link rel="import" href="../../bower_components/neon-animation/neon-animations.html">  
9 -  
10 -<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">  
11 -<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">  
12 -<link rel="import" href="../../bower_components/paper-item/paper-item.html">  
13 -  
14 -<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">  
15 -  
16 -<link rel="import" href="../../bower_components/paper-material/paper-material.html" />  
17 -  
18 -<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">  
19 -<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">  
20 -<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">  
21 -  
22 -<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">  
23 -  
24 -<link rel="import" href="../../datalets/datasetexplorer-datalet/datasetexplorer-datalet.html">  
25 -  
26 -<link rel="import" href="paper-input-search.html">  
27 -  
28 -<dom-module id="dataset-selection-controllet">  
29 -  
30 - <template>  
31 -  
32 - <style is="custom-style">  
33 - :host {  
34 - --paper-dropdown-menu-icon: {  
35 - color: #2196F3;  
36 - };  
37 - }  
38 -  
39 - paper-tabs {  
40 - font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;  
41 - font-size: 16px;  
42 - font-weight: bold;  
43 - --paper-tabs-selection-bar-color: #2196F3;  
44 - }  
45 -  
46 - paper-tab {  
47 - transition: all 1.0s;  
48 - }  
49 -  
50 - paper-tab.iron-selected {  
51 - background-color: #B6B6B6;  
52 - }  
53 -  
54 - paper-tab:hover {  
55 - color: #2196F3;  
56 - }  
57 -  
58 - paper-tab[disabled] {  
59 - color: #B6B6B6;  
60 - }  
61 -  
62 - paper-dropdown-menu {  
63 - width: 45%;  
64 - margin-bottom: 32px;  
65 - --paper-input-container-focus-color: #2196F3;  
66 - }  
67 -  
68 - paper-dropdown-menu paper-item {  
69 - white-space: nowrap;  
70 - }  
71 -  
72 - paper-input-search {  
73 - width: 45%;  
74 - margin-bottom: 32px;  
75 - --paper-input-container-focus-color: #2196F3;  
76 - }  
77 -  
78 - paper-input-search paper-item {  
79 - white-space: nowrap;  
80 - }  
81 -  
82 - paper-item.iron-selected {  
83 - background-color: #2196F3;  
84 - color: #FFFFFF;  
85 - }  
86 -  
87 - .ddl_container {  
88 - position: relative;  
89 - }  
90 -  
91 - .info_button {  
92 - position: absolute;  
93 - top: 18px;  
94 - left: 45%;  
95 - }  
96 -  
97 - paper-textarea {  
98 - width: 90%;  
99 - margin-bottom: 32px;  
100 - --paper-input-container-focus-color: #2196F3;  
101 - }  
102 -  
103 - paper-icon-button {  
104 - color: #2196F3;  
105 - --paper-icon-button-ink-color: #2196F3;  
106 - }  
107 -  
108 - paper-icon-button[disabled] {  
109 - color: #B6B6B6;  
110 - }  
111 -  
112 - #material_container {  
113 - margin-top: 8px;  
114 - }  
115 -  
116 - #div_selection {  
117 - padding-left: 10%;  
118 - padding-top: 64px;  
119 - }  
120 -  
121 - #dialog_info {  
122 - border: 2px solid #2196F3;  
123 - background-color: #E0E0E0;  
124 - }  
125 - </style>  
126 -  
127 - <paper-material id="material_container" elevation="5">  
128 -  
129 - <paper-tabs selected="{{selected}}">  
130 - <paper-tab noink><span id="listView"></span></paper-tab>  
131 - <paper-tab noink><span id="treeMapView"></span></paper-tab>  
132 - <!--<paper-tab noink disabled><span data-l10n-id="mostPopular"></span></paper-tab>-->  
133 - </paper-tabs>  
134 -  
135 - <neon-animated-pages selected="{{selected}}" entry-animation="fade-in-animation" exit-animation="fade-out-animation">  
136 -  
137 - <neon-animatable>  
138 -  
139 - <div id="div_selection">  
140 - <div class="ddl_container">  
141 - <paper-input-search id="_datasets" label="Available datasets">  
142 - <paper-menu class="dropdown-content">  
143 - <template is="dom-repeat" items={{filteredDatasets}} as="dataset">  
144 - <paper-item id={{index}} on-tap="_selectDataUrl">{{dataset.name}}</paper-item>  
145 - </template>  
146 - </paper-menu>  
147 - </paper-input-search>  
148 -  
149 - <div class="info_button">  
150 - <paper-icon-button id="info_dataset" disabled on-click="_showInfo" icon="info-outline" title="dataset info"></paper-icon-button>  
151 - </div>  
152 - </div>  
153 -  
154 - <template is="dom-if" if={{isSuggested}}>  
155 -  
156 - <div class="ddl_container">  
157 - <paper-dropdown-menu id="s_datasets" label="Suggested datasets">  
158 - <paper-menu class="dropdown-content">  
159 - <template is="dom-repeat" items={{suggestedDatasets}} as="dataset">  
160 - <paper-item id={{index}} on-tap="_selectSuggestedDataUrl">{{dataset.name}}</paper-item>  
161 - </template>  
162 - </paper-menu>  
163 - </paper-dropdown-menu>  
164 -  
165 - <div class="info_button">  
166 - <paper-icon-button id="info_s_dataset" disabled on-click="_showInfo" icon="info-outline" title="dataset info"></paper-icon-button>  
167 - </div>  
168 - </div>  
169 -  
170 - </template>  
171 -  
172 - <paper-textarea id="selected_url" label="Selected url" value={{dataUrl}} error-message={{errorMessage}}></paper-textarea>  
173 -  
174 - <paper-dialog id="dialog_info">  
175 - <h2 id="dialog_name"></h2>  
176 - <p id="dialog_description"></p>  
177 - </paper-dialog>  
178 - </div>  
179 -  
180 - </neon-animatable>  
181 -  
182 - <neon-animatable>  
183 - <div id="div_datasetexplorer"></div>  
184 - </neon-animatable>  
185 -  
186 - <neon-animatable>  
187 - <!--popular-->  
188 - </neon-animatable>  
189 -  
190 - </neon-animated-pages>  
191 -  
192 - </paper-material>  
193 -  
194 - </template>  
195 -  
196 - <script>  
197 -  
198 - Polymer({  
199 -  
200 - is : 'dataset-selection-controllet',  
201 -  
202 - properties : {  
203 -  
204 - selected : {  
205 - type : Number,  
206 - value : 0  
207 - },  
208 -  
209 - datasets : {  
210 - type : Array,  
211 - value : undefined  
212 - },  
213 -  
214 - filteredDatasets : {  
215 - type : Array,  
216 - value : []  
217 - },  
218 -  
219 - suggestedDatasets : {  
220 - type : Array,  
221 - value : undefined  
222 - },  
223 -  
224 - isSuggested : {  
225 - type : Boolean,  
226 - value : false  
227 - },  
228 -  
229 - dataUrl : {  
230 - type : String,  
231 - value : undefined,  
232 - observer : '_fireDataUrl'  
233 - },  
234 -  
235 - errorMessage : {  
236 - type : String,  
237 - value : "",  
238 - }  
239 -  
240 - },  
241 -  
242 - listeners: {  
243 - 'datasetexplorer-datalet_data-url': '_selectDataUrl_treeMap',  
244 - 'paper-input-search_input-value' : '_filterDatasets'  
245 - },  
246 -  
247 - ready : function(){  
248 - $(this.$.material_container).perfectScrollbar();  
249 - $(this.$.dialog_info).perfectScrollbar();  
250 -  
251 - this.errorMessage = ln["wrongUrl_" + ln["localization"]];  
252 - },  
253 -  
254 - attached : function(){  
255 - this._resize();  
256 - var that = this;  
257 - window.addEventListener("resize", function() { that._resize(); });  
258 -  
259 - this.filteredDatasets = this.datasets;  
260 -  
261 - if(this.suggestedDatasets)  
262 - this.isSuggested = true;  
263 -  
264 - this._loadTreeMap();  
265 -  
266 - this.async(function(){this._translate();},100);  
267 - },  
268 -  
269 - _translate : function(){  
270 - this.$._datasets.setAttribute("label", ln["availableDatasets_" + ln["localization"]]);  
271 - this.$.listView.innerHTML = ln["listView_" + ln["localization"]];  
272 - this.$.treeMapView.innerHTML = ln["treeMapView_" + ln["localization"]];  
273 -  
274 - if(this.isSuggested)  
275 - this.$$("#s_datasets").setAttribute("label", ln["suggestedDatasets_" + ln["localization"]]);  
276 - this.$.selected_url.setAttribute("label", ln["selectedUrl_" + ln["localization"]]);  
277 - },  
278 -  
279 - _filterDatasets : function(e){  
280 - var filter = e.detail.inputValue;  
281 - var filteredDatasets = [];  
282 - for (var i in this.datasets){  
283 - if(this.datasets[i].name.toLowerCase().indexOf(filter.toLowerCase()) != -1)  
284 - filteredDatasets.push(this.datasets[i]);  
285 - }  
286 -  
287 - this.filteredDatasets = filteredDatasets;  
288 - },  
289 -  
290 - _loadTreeMap : function(){  
291 - var h = $("#material_container").height() - 48;  
292 - var w = $("#material_container").width();  
293 -  
294 - this.$.div_datasetexplorer.innerHTML = "<datasetexplorer-datalet data='"+this.data+"' width=\""+w+"\" height=\""+h+"\" data-url=\"/openwall/api/datasetTree\" fields='[\"result,datasets,provider_name\",\"result,datasets,organization_name\",\"result,datasets,package_name\",\"result,datasets,resource_name\",\"result,datasets,url\",\"result,datasets,w\"]'></datasetexplorer-datalet>";  
295 - },  
296 -  
297 - _selectDataUrl_treeMap : function(e) {  
298 - $("#_datasets")[0]._setSelectedItem(null);  
299 - $("#_datasets")[0].inputValue = "";  
300 - $("#info_dataset")[0].setAttribute("disabled", "true");  
301 -  
302 - if (this.isSuggested) {  
303 - $("#s_datasets")[0]._setSelectedItem(null);  
304 - $("#s_datasets")[0].contentElement.select(-1);  
305 - $("#info_s_dataset")[0].setAttribute("disabled", "true");  
306 - }  
307 -  
308 - this.dataUrl = this._addlimitUrl(e.detail.url);  
309 - this.selected=0;  
310 - },  
311 -  
312 - _selectDataUrl : function(e){this._translate();  
313 - if (this.isSuggested) {  
314 - $("#s_datasets")[0]._setSelectedItem(null);  
315 - $("#s_datasets")[0].contentElement.select(-1);  
316 - $("#info_s_dataset")[0].setAttribute("disabled", "true");  
317 - }  
318 -  
319 - var dataset = this.filteredDatasets[parseInt(e.target.id)]  
320 -  
321 - this.dataUrl = this._addlimitUrl(dataset.url);  
322 -  
323 - if(dataset.description != ""){  
324 - $("#info_dataset")[0].removeAttribute("disabled");  
325 - this.$.dialog_name.innerHTML = dataset.name;  
326 - this.$.dialog_description.innerHTML = dataset.description;  
327 - }  
328 - else  
329 - $("#info_dataset")[0].setAttribute("disabled", "true");  
330 - },  
331 -  
332 - _selectSuggestedDataUrl : function(e){  
333 - $("#_datasets")[0]._setSelectedItem(null);  
334 - $("#_datasets")[0].inputValue = "";  
335 - $("#info_dataset")[0].setAttribute("disabled", "true");  
336 -  
337 - var dataset = this.suggestedDatasets[parseInt(e.target.id)]  
338 -  
339 - this.dataUrl = this._addlimitUrl(dataset.url);  
340 -  
341 - if(dataset.description != ""){  
342 - $("#info_s_dataset")[0].removeAttribute("disabled");  
343 - this.$.dialog_name.innerHTML = dataset.name;  
344 - this.$.dialog_description.innerHTML = dataset.description;  
345 - }  
346 - else  
347 - $("#info_s_dataset")[0].setAttribute("disabled", "true");  
348 - },  
349 -  
350 - _showInfo : function(e){  
351 - var t = e.target;  
352 - if(t.tagName.indexOf("IRON-ICON") != -1)  
353 - t = $(e.target).parents("paper-icon-button")[0];  
354 -  
355 - this.$.dialog_info.open();  
356 -  
357 - var pos = t.getBoundingClientRect();  
358 - $("#dialog_info").css("top", pos.top - 4);  
359 - $("#dialog_info").css("left", pos.left - 4);  
360 - },  
361 -  
362 - _fireDataUrl : function(){  
363 - this.fire('dataset-selection-controllet_data-url', {url: this.dataUrl});  
364 - },  
365 -  
366 - _addlimitUrl : function(url){  
367 - //CKAN --> action no limit  
368 - if((url.indexOf("api/action") > -1) && !(url.indexOf("limit") > -1))  
369 - {  
370 - url += "&limit=99999";  
371 - }  
372 - //OpenDataSoft --> action no limit  
373 - if((url.indexOf("api/records") > -1) && !(url.indexOf("rows") > -1)){  
374 - url += "&rows=10000";  
375 - }  
376 - return url;  
377 - },  
378 -  
379 - _resize : function(){  
380 - var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16;  
381 - h = h - 64 - 8; //height with page scroller  
382 - $("#material_container").height(h);  
383 - }  
384 -  
385 - });  
386 -  
387 - </script>  
388 -  
389 -</dom-module>  
controllets/dataset-selection-controllet/demo/index.html deleted
View file @9a8ed76
1 -<html>  
2 -  
3 -<head>  
4 - <script src="../../shared_js/jquery-1.11.2.min.js"></script>  
5 -  
6 - <script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>  
7 -  
8 - <script src="../../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>  
9 - <link rel="stylesheet" href="../../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">  
10 -  
11 - <link rel="import" href="../dataset-selection-controllet.html" />  
12 -</head>  
13 -  
14 -<body>  
15 -  
16 -<dataset-selection-controllet id="ds"></dataset-selection-controllet>  
17 -  
18 -<script>  
19 - var description = "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa "+  
20 - " aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa "+  
21 - " aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa "+  
22 - "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+  
23 - "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+  
24 - "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+  
25 - "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+  
26 - "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+  
27 - "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+  
28 - "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+  
29 - "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+  
30 - "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+  
31 - "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+  
32 - "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+  
33 - "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+  
34 - "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa"+  
35 - "aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa";  
36 -  
37 - var dataset1 = {description: description, name: "Data", url: "http://ckan.routetopa.eu/api/action/datastore_search?resource_id=c3b52992-ba61-4a73-a637-0f2e1ca26aab"};  
38 - var dataset2 = {description: "", name: "Klassen", url: "http://ckan.routetopa.eu/api/action/datastore_search?resource_id=dfd27de5-0790-466c-af59-6a82509e7fbb"};  
39 - var dataset3 = {description: "descrizione bellissima purissima levissima sbiricuda antani", name: "Derelict Sites", url: "http://ckan.routetopa.eu/api/action/datastore_search?resource_id=fcbee83e-3d3d-4303-a568-24dd33d02adc"};  
40 - var datasets = [dataset1, dataset2, dataset3];  
41 - var datasets = [dataset1, dataset2, dataset3, dataset1, dataset2, dataset3, dataset1, dataset2, dataset3, dataset1, dataset2, dataset3, dataset1, dataset2, dataset3];  
42 -  
43 - var ds = document.getElementById('ds');  
44 - ds.setAttribute("datasets", JSON.stringify(datasets));  
45 -  
46 -</script>  
47 -  
48 -</body>  
49 -  
50 -</html>  
51 \ No newline at end of file 0 \ No newline at end of file
controllets/dataset-selection-controllet/paper-input-search.html deleted
View file @9a8ed76
1 -<!--  
2 -@license  
3 -Copyright (c) 2015 The Polymer Project Authors. All rights reserved.  
4 -This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt  
5 -The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt  
6 -The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt  
7 -Code distributed by Google as part of the polymer project is also  
8 -subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt  
9 --->  
10 -  
11 -<link rel="import" href="../../bower_components/polymer/polymer.html">  
12 -<link rel="import" href="../../bower_components/paper-styles/default-theme.html">  
13 -<link rel="import" href="../../bower_components/paper-input/paper-input.html">  
14 -<link rel="import" href="../../bower_components/paper-menu-button/paper-menu-button.html">  
15 -<link rel="import" href="../../bower_components/paper-ripple/paper-ripple.html">  
16 -<link rel="import" href="../../bower_components/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">  
17 -<link rel="import" href="../../bower_components/iron-behaviors/iron-control-state.html">  
18 -<link rel="import" href="../../bower_components/iron-behaviors/iron-button-state.html">  
19 -<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">  
20 -<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">  
21 -<link rel="import" href="../../bower_components/iron-selector/iron-selectable.html">  
22 -<link rel="import" href="../../bower_components/iron-form-element-behavior/iron-form-element-behavior.html">  
23 -<link rel="import" href="../../bower_components/iron-validatable-behavior/iron-validatable-behavior.html">  
24 -  
25 -<!--  
26 -Material design: [Dropdown menus](https://www.google.com/design/spec/components/buttons.html#buttons-dropdown-buttons)  
27 -  
28 -`paper-dropdown-menu` is similar to a native browser select element.  
29 -`paper-dropdown-menu` works with selectable content. The currently selected  
30 -item is displayed in the control. If no item is selected, the `label` is  
31 -displayed instead.  
32 -  
33 -The child element with the class `dropdown-content` will be used as the dropdown  
34 -menu. It could be a `paper-menu` or element that triggers `iron-select` when  
35 -selecting its children.  
36 -  
37 -Example:  
38 -  
39 - <paper-dropdown-menu label="Your favourite pastry">  
40 - <paper-menu class="dropdown-content">  
41 - <paper-item>Croissant</paper-item>  
42 - <paper-item>Donut</paper-item>  
43 - <paper-item>Financier</paper-item>  
44 - <paper-item>Madeleine</paper-item>  
45 - </paper-menu>  
46 - </paper-dropdown-menu>  
47 -  
48 -This example renders a dropdown menu with 4 options.  
49 -  
50 -Similarly to using `iron-select`, `iron-deselect` events will cause the  
51 -current selection of the `paper-dropdown-menu` to be cleared.  
52 -  
53 -### Styling  
54 -  
55 -The following custom properties and mixins are also available for styling:  
56 -  
57 -Custom property | Description | Default  
58 -----------------|-------------|----------  
59 -`--paper-dropdown-menu` | A mixin that is applied to the element host | `{}`  
60 -`--paper-dropdown-menu-disabled` | A mixin that is applied to the element host when disabled | `{}`  
61 -`--paper-dropdown-menu-ripple` | A mixin that is applied to the internal ripple | `{}`  
62 -`--paper-dropdown-menu-button` | A mixin that is applied to the internal menu button | `{}`  
63 -`--paper-dropdown-menu-input` | A mixin that is applied to the internal paper input | `{}`  
64 -`--paper-dropdown-menu-icon` | A mixin that is applied to the internal icon | `{}`  
65 -  
66 -You can also use any of the `paper-input-container` and `paper-menu-button`  
67 -style mixins and custom properties to style the internal input and menu button  
68 -respectively.  
69 -  
70 -@group Paper Elements  
71 -@element paper-dropdown-menu  
72 -@hero hero.svg  
73 -@demo demo/index.html  
74 --->  
75 -  
76 -<dom-module id="paper-input-search">  
77 - <style>  
78 - :host {  
79 - display: inline-block;  
80 - position: relative;  
81 - text-align: left;  
82 - cursor: pointer;  
83 -  
84 - /* NOTE(cdata): Both values are needed, since some phones require the  
85 - * value to be `transparent`.  
86 - */  
87 - -webkit-tap-highlight-color: rgba(0,0,0,0);  
88 - -webkit-tap-highlight-color: transparent;  
89 -  
90 - --paper-input-container-input: {  
91 - overflow: hidden;  
92 - white-space: nowrap;  
93 - text-overflow: ellipsis;  
94 - max-width: 100%;  
95 - box-sizing: border-box;  
96 - /*cursor: pointer;*/  
97 - };  
98 -  
99 - @apply(--paper-dropdown-menu);  
100 - }  
101 -  
102 - :host([disabled]) {  
103 - @apply(--paper-dropdown-menu-disabled);  
104 - }  
105 -  
106 - :host([noink]) paper-ripple {  
107 - display: none;  
108 - }  
109 -  
110 - :host([no-label-float]) paper-ripple {  
111 - top: 8px;  
112 - }  
113 -  
114 - paper-ripple {  
115 - top: 12px;  
116 - left: 0px;  
117 - bottom: 8px;  
118 - right: 0px;  
119 -  
120 - @apply(--paper-dropdown-menu-ripple);  
121 - }  
122 -  
123 - paper-menu-button {  
124 - display: block;  
125 - padding: 0;  
126 - @apply(--paper-dropdown-menu-button);  
127 - }  
128 -  
129 - paper-input {  
130 - @apply(--paper-dropdown-menu-input);  
131 - }  
132 -  
133 - iron-icon {  
134 - /*color: var(--disabled-text-color);*/  
135 - color: #2196F3;  
136 -  
137 - @apply(--paper-dropdown-menu-icon);  
138 - }  
139 -  
140 - </style>  
141 - <template>  
142 - <paper-menu-button  
143 - id="menuButton"  
144 - vertical-align="top"  
145 - horizontal-align="left"  
146 - vertical-offset="[[_computeMenuVerticalOffset(noLabelFloat)]]"  
147 - disabled="[[disabled]]"  
148 - no-animations="[[noAnimations]]"  
149 - on-iron-select="_onIronSelect"  
150 - on-iron-deselect="_onIronDeselect"  
151 - opened="{{opened}}">  
152 - <div class="dropdown-trigger">  
153 - <!--<paper-ripple></paper-ripple>-->  
154 - <paper-input  
155 - id="inputField"  
156 - invalid="[[invalid]]"  
157 - value="{{inputValue}}"  
158 - placeholder="[[placeholder]]"  
159 - always-float-label="[[alwaysFloatLabel]]"  
160 - no-label-float="[[noLabelFloat]]"  
161 - label="[[label]]">  
162 - <iron-icon icon="search" prefix></iron-icon>  
163 - <iron-icon icon="arrow-drop-down" suffix></iron-icon>  
164 - </paper-input>  
165 - </div>  
166 - <content id="content" select=".dropdown-content"></content>  
167 - </paper-menu-button>  
168 - </template>  
169 -</dom-module>  
170 -<script>  
171 - (function() {  
172 - 'use strict';  
173 -  
174 - Polymer({  
175 - is: 'paper-input-search',  
176 -  
177 - /**  
178 - * Fired when the dropdown opens.  
179 - *  
180 - * @event paper-dropdown-open  
181 - */  
182 -  
183 - /**  
184 - * Fired when the dropdown closes.  
185 - *  
186 - * @event paper-dropdown-close  
187 - */  
188 -  
189 - behaviors: [  
190 - Polymer.IronControlState,  
191 - Polymer.IronButtonState,  
192 - Polymer.IronFormElementBehavior,  
193 - Polymer.IronValidatableBehavior  
194 - ],  
195 -  
196 - properties: {  
197 - /**  
198 - * The derived "label" of the currently selected item. This value  
199 - * is the `label` property on the selected item if set, or else the  
200 - * trimmed text content of the selected item.  
201 - */  
202 - selectedItemLabel: {  
203 - type: String,  
204 - notify: true,  
205 - readOnly: true  
206 - },  
207 -  
208 - /**  
209 - * The last selected item. An item is selected if the dropdown menu has  
210 - * a child with class `dropdown-content`, and that child triggers an  
211 - * `iron-select` event with the selected `item` in the `detail`.  
212 - *  
213 - * @type {?Object}  
214 - */  
215 - selectedItem: {  
216 - type: Object,  
217 - notify: true,  
218 - readOnly: true  
219 - },  
220 -  
221 - /**  
222 - * The value for this element that will be used when submitting in  
223 - * a form. It is read only, and will always have the same value  
224 - * as `selectedItemLabel`.  
225 - */  
226 - value: {  
227 - type: String,  
228 - notify: true,  
229 - readOnly: true  
230 - },  
231 -  
232 - /**  
233 - * The label for the dropdown.  
234 - */  
235 - label: {  
236 - type: String  
237 - },  
238 -  
239 - /**  
240 - * The placeholder for the dropdown.  
241 - */  
242 - placeholder: {  
243 - type: String  
244 - },  
245 -  
246 - /**  
247 - * True if the dropdown is open. Otherwise, false.  
248 - */  
249 - opened: {  
250 - type: Boolean,  
251 - notify: true,  
252 - value: false  
253 - },  
254 -  
255 - /**  
256 - * Set to true to disable the floating label. Bind this to the  
257 - * `<paper-input-container>`'s `noLabelFloat` property.  
258 - */  
259 - noLabelFloat: {  
260 - type: Boolean,  
261 - value: false,  
262 - reflectToAttribute: true  
263 - },  
264 -  
265 - /**  
266 - * Set to true to always float the label. Bind this to the  
267 - * `<paper-input-container>`'s `alwaysFloatLabel` property.  
268 - */  
269 - alwaysFloatLabel: {  
270 - type: Boolean,  
271 - value: false  
272 - },  
273 -  
274 - /**  
275 - * Set to true to disable animations when opening and closing the  
276 - * dropdown.  
277 - */  
278 - noAnimations: {  
279 - type: Boolean,  
280 - value: false  
281 - },  
282 -  
283 - inputValue: {  
284 - type: String,  
285 - value: undefined,  
286 - observer: '_fireInputValue'  
287 - },  
288 -  
289 - fireInputValue: {  
290 - type: Boolean,  
291 - value: true,  
292 - }  
293 - },  
294 -  
295 - listeners: {  
296 - 'tap': '_onTap'  
297 - },  
298 -  
299 - keyBindings: {  
300 - 'up down': 'open',  
301 - 'esc': 'close'  
302 - },  
303 -  
304 - hostAttributes: {  
305 - role: 'group',  
306 - 'aria-haspopup': 'true'  
307 - },  
308 -  
309 - observers: [  
310 -// '_selectedItemChanged(selectedItem)'  
311 - ],  
312 -  
313 - attached: function() {  
314 - // NOTE(cdata): Due to timing, a preselected value in a `IronSelectable`  
315 - // child will cause an `iron-select` event to fire while the element is  
316 - // still in a `DocumentFragment`. This has the effect of causing  
317 - // handlers not to fire. So, we double check this value on attached:  
318 - var contentElement = this.contentElement;  
319 - if (contentElement && contentElement.selectedItem) {  
320 - this._setSelectedItem(contentElement.selectedItem);  
321 - }  
322 - },  
323 -  
324 - _fireInputValue: function() {//console.log(this.inputValue);  
325 - if(this.fireInputValue) {//change NO DDL  
326 - this.fire('paper-input-search_input-value', {inputValue: this.inputValue});  
327 - if(this.contentElement.selectedItem){  
328 -// this._setSelectedItem(null);  
329 - this.contentElement.select(-1);  
330 -// console.log("deselected");  
331 - }  
332 - }  
333 -  
334 - this.fireInputValue = true;  
335 - },  
336 -  
337 - /**  
338 - * The content element that is contained by the dropdown menu, if any.  
339 - */  
340 - get contentElement() {  
341 - return Polymer.dom(this.$.content).getDistributedNodes()[0];  
342 - },  
343 -  
344 - /**  
345 - * Show the dropdown content.  
346 - */  
347 - open: function() {  
348 - this.$.menuButton.open();  
349 - },  
350 -  
351 - /**  
352 - * Hide the dropdown content.  
353 - */  
354 - close: function() {  
355 - this.$.menuButton.close();  
356 - },  
357 -  
358 - /**  
359 - * A handler that is called when `iron-select` is fired.  
360 - *  
361 - * @param {CustomEvent} event An `iron-select` event.  
362 - */  
363 - _onIronSelect: function(event) {  
364 -// console.log("select");  
365 - this.fireInputValue = false;  
366 - this._setSelectedItem(event.detail.item);  
367 - this.inputValue = event.detail.item.label || event.detail.item.textContent.trim();  
368 - },  
369 -  
370 - /**  
371 - * A handler that is called when `iron-deselect` is fired.  
372 - *  
373 - * @param {CustomEvent} event An `iron-deselect` event.  
374 - */  
375 - _onIronDeselect: function(event) {  
376 -// console.log("deselect");  
377 - this.fireInputValue = false;  
378 - this._setSelectedItem(null);  
379 - },  
380 -  
381 - /**  
382 - * A handler that is called when the dropdown is tapped.  
383 - *  
384 - * @param {CustomEvent} event A tap event.  
385 - */  
386 - _onTap: function(event) {  
387 - if (Polymer.Gestures.findOriginalTarget(event) === this) {  
388 - this.open();  
389 - }  
390 - this.async(function(){this.$.inputField.$.input.focus();},200);//to improve  
391 -// console.log(this.selectedItemLabel);  
392 -// console.log(this.value);  
393 -// console.log(this.$.inputField.value);  
394 -// console.log(this.inputValue);  
395 - },  
396 -  
397 - /**  
398 - * Compute the label for the dropdown given a selected item.  
399 - *  
400 - * @param {Element} selectedItem A selected Element item, with an  
401 - * optional `label` property.  
402 - */  
403 -// _selectedItemChanged: function(selectedItem) {  
404 -// var value = '';  
405 -// if (!selectedItem) {  
406 -// value = '';  
407 -// } else {  
408 -// value = selectedItem.label || selectedItem.textContent.trim();  
409 -// }  
410 -//  
411 -// this._setValue(value);  
412 -// this._setSelectedItemLabel(value);  
413 -// this.inputValue = selectedItem.label || selectedItem.textContent.trim();  
414 -// },  
415 -  
416 - /**  
417 - * Compute the vertical offset of the menu based on the value of  
418 - * `noLabelFloat`.  
419 - *  
420 - * @param {boolean} noLabelFloat True if the label should not float  
421 - * above the input, otherwise false.  
422 - */  
423 - _computeMenuVerticalOffset: function(noLabelFloat) {  
424 - // NOTE(cdata): These numbers are somewhat magical because they are  
425 - // derived from the metrics of elements internal to `paper-input`'s  
426 - // template. The metrics will change depending on whether or not the  
427 - // input has a floating label.  
428 -// return noLabelFloat ? -4 : 8;  
429 - return noLabelFloat ? 46-4 : 46+8;  
430 -// return 64;  
431 - },  
432 -  
433 - /**  
434 - * Returns false if the element is required and does not have a selection,  
435 - * and true otherwise.  
436 - * @return {Boolean} true if `required` is false, or if `required` is true  
437 - * and the element has a valid selection.  
438 - */  
439 - _getValidity: function() {  
440 - return this.disabled || !this.required || (this.required && this.value);  
441 - }  
442 - });  
443 - })();  
444 -</script>  
445 \ No newline at end of file 0 \ No newline at end of file
controllets/select-dataset-controllet/demo-select-dataset-controllet.html 0 → 100644
  View file @8d261aa
  1 +<link rel="import" href="../../bower_components/polymer/polymer.html">
  2 +
  3 +<link rel="import" href="../../bower_components/paper-material/paper-material.html" />
  4 +<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
  5 +<link rel="import" href="../../bower_components/paper-tabs/paper-tab.html">
  6 +<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
  7 +<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
  8 +<link rel="import" href="../../bower_components/paper-item/paper-item.html">
  9 +<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
  10 +<link rel="import" href="../../bower_components/paper-tooltip/paper-tooltip.html">
  11 +
  12 +<link rel="import" href="../datasets-list-controllet/datasets-list-controllet.html">
  13 +
  14 +<dom-module id="demo-select-dataset-controllet">
  15 + <template>
  16 + <style>
  17 +
  18 + #select_dataset_container {
  19 + margin-top: 8px;
  20 + }
  21 +
  22 + #select_dataset_container * {
  23 + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  24 + font-size: 16px;
  25 + line-height: 24px;
  26 + }
  27 +
  28 + #select_dataset_container #options {
  29 + display: flex;
  30 + flex-direction: row;
  31 +
  32 + height: 48px;
  33 + padding: 0;
  34 + font-weight: 700;
  35 + background: #B6B6B6;
  36 +
  37 + margin-top: 2px;
  38 +
  39 + overflow: hidden;
  40 + }
  41 +
  42 + #select_dataset_container #options_header {
  43 + width: calc(100% - 96px);
  44 + text-align: center;
  45 + padding: 12px 0 12px 48px;
  46 + }
  47 +
  48 + #select_dataset_container .header_block {
  49 + /*width: calc((100% - 48px) / 2);*/
  50 + /*max-width: 400px;*/
  51 + width: calc(50% - 24px);
  52 + padding:0 12px;
  53 +
  54 + line-height: 40px;
  55 +
  56 + display: none;
  57 + }
  58 +
  59 + #select_dataset_container #url {
  60 + padding: 0 12px 12px 12px;
  61 + height: 60px;
  62 +
  63 + border: 2px solid #B6B6B6;
  64 + border-top: 0;
  65 + }
  66 +
  67 + #select_dataset_container #datasets_list_container {
  68 + height: calc(100% - 96px - 2px - 74px);
  69 + width: 100%;
  70 + }
  71 +
  72 + paper-tabs {
  73 + background: #B6B6B6;
  74 + }
  75 +
  76 + paper-tab {
  77 + font-weight: 700;
  78 + border-right: 2px solid #FFFFFF;
  79 + }
  80 +
  81 + paper-tab:nth-last-child(2) {
  82 + border-right: 0;
  83 + }
  84 +
  85 + paper-tab.iron-selected {
  86 + color: #FFFFFF;
  87 + background: #2196F3;;
  88 + }
  89 +
  90 + paper-tab:not(.iron-selected):hover {
  91 + color: #2196F3;
  92 + }
  93 +
  94 + paper-input {
  95 + --paper-input-container-focus-color: #2196F3;
  96 + }
  97 +
  98 + paper-icon-button {
  99 + height: 48px;
  100 + width: 48px;
  101 + padding: 8px;
  102 + }
  103 +
  104 + paper-icon-button[icon="settings"] {
  105 + cursor: pointer;
  106 + color: #00BCD4;
  107 + --paper-icon-button-ink-color: #00BCD4;
  108 +
  109 + background: #E0E0E0;
  110 + float: right;
  111 + position: absolute;
  112 + right: 0;
  113 + }
  114 +
  115 + paper-icon-button[icon="info-outline"] {
  116 + cursor: help;
  117 + }
  118 +
  119 + :host {
  120 + --paper-dropdown-menu-icon: {
  121 + color: #000000;
  122 + };
  123 + --paper-dropdown-menu-ripple: {
  124 + color: #FFFFFF;
  125 + };
  126 + }
  127 +
  128 + paper-dropdown-menu {
  129 + /*width: 200px;*/
  130 + width: 50%;
  131 + --paper-input-container-focus-color: #2196F3;
  132 + }
  133 +
  134 + paper-item {
  135 + min-width: 128px;
  136 + white-space: nowrap;
  137 + }
  138 +
  139 + paper-item.iron-selected {
  140 + background-color: #2196F3;
  141 + color: #FFFFFF;
  142 + }
  143 +
  144 + paper-tooltip {
  145 + min-width: 400px;
  146 + --paper-tooltip-background: black;
  147 + }
  148 +
  149 + #select_dataset_container br {
  150 + display: block;
  151 + margin-top: 8px;
  152 + content: " ";
  153 + }
  154 +
  155 + #select_dataset_container p {
  156 + margin: 0;
  157 + padding: 0;
  158 + }
  159 +
  160 + #select_dataset_container p .option {
  161 + color: #2196F3;;
  162 + font-weight: 700;
  163 + }
  164 +
  165 + #select_dataset_container p .description {
  166 + }
  167 +
  168 + </style>
  169 +
  170 + <paper-material id="select_dataset_container" elevation="5">
  171 + <paper-tabs selected={{tabIndex}} no-bar>
  172 + <paper-tab noink on-tap="">EXAMPLE DATASETS LIST</paper-tab>
  173 + <!--<paper-tab noink on-tap="_setLocalDatasets"><span id="spod_users_datasets"></span></paper-tab>-->
  174 + <!--<paper-tab noink on-tap="_setExtendedDatasets"><span id="extended_datasets"></span></paper-tab>-->
  175 + </paper-tabs>
  176 +
  177 + <div id="options">
  178 +
  179 + <div id="options_header"></div>
  180 +
  181 + <div id="provider_option" class="header_block">
  182 + {{_getLocalization('provider')}}:&nbsp;
  183 + <paper-dropdown-menu id="ddl_provider" label="" no-label-float>
  184 + <paper-menu id="menu_provider" class="dropdown-content">
  185 + <paper-item id="0" on-tap="_setProvidersDatasets"><span id="all"></span></paper-item>
  186 + <template is="dom-repeat" items={{_toArray(providers)}}>
  187 + <paper-item id={{item.value.id}} on-tap="_setProvidersDatasets">{{item.value.title}}</paper-item>
  188 + </template>
  189 + </paper-menu>
  190 + </paper-dropdown-menu>
  191 + <paper-icon-button id="info_provider" icon="info-outline" noink></paper-icon-button>
  192 + <paper-tooltip id="tooltip_provider" for="info_provider" offset="8">
  193 + <p>
  194 + <span class="option">{{_getLocalization('all')}}</span><br>
  195 + <span class="description">{{_getLocalization('allDescription')}}</span><br>
  196 + <span class="option">{{_getLocalization('providerName')}}</span><br>
  197 + <span class="description">{{_getLocalization('providerNameDescription')}}</span><br>
  198 + </p>
  199 + </paper-tooltip>
  200 + </div>
  201 +
  202 + <!--<div id="view_option" class="header_block">-->
  203 + <!--{{_getLocalization('view')}}:&nbsp;-->
  204 + <!--<paper-dropdown-menu id="ddl_view" label="" no-label-float>-->
  205 + <!--<paper-menu id="menu_view" class="dropdown-content">-->
  206 + <!--<paper-item id="0" on-tap=""><span id="list"></span></paper-item>-->
  207 + <!--<paper-item id="1" on-tap="" disabled><span id="tree"></span></paper-item>-->
  208 + <!--</paper-menu>-->
  209 + <!--</paper-dropdown-menu>-->
  210 + <!--<paper-icon-button id="info_view" icon="info-outline" noink></paper-icon-button>-->
  211 + <!--<paper-tooltip id="tooltip_view" for="info_view" offset="8">-->
  212 + <!--<p>-->
  213 + <!--<span class="option">{{_getLocalization('list')}}</span><br>-->
  214 + <!--<span class="description">{{_getLocalization('listDescription')}}</span><br>-->
  215 + <!--<span class="option">{{_getLocalization('tree')}}</span><br>-->
  216 + <!--<span class="description">{{_getLocalization('treeDescription')}}</span><br>-->
  217 + <!--</p>-->
  218 + <!--</paper-tooltip>-->
  219 + <!--</div>-->
  220 +
  221 + <!--<div id="search_option" class="header_block">-->
  222 + <!--{{_getLocalization('search')}}:&nbsp;-->
  223 + <!--<paper-dropdown-menu id="ddl_search" label="" no-label-float>-->
  224 + <!--<paper-menu id="menu_search" class="dropdown-content">-->
  225 + <!--<paper-item><span id="standard"></span></paper-item>-->
  226 + <!--<paper-item disabled><span id="extended"></span></paper-item>-->
  227 + <!--</paper-menu>-->
  228 + <!--</paper-dropdown-menu>-->
  229 + <!--<paper-icon-button id="info_search" icon="info-outline" noink></paper-icon-button>-->
  230 + <!--<paper-tooltip id="tooltip_search" for="info_search" offset="8">-->
  231 + <!--<p>-->
  232 + <!--<span class="option">{{_getLocalization('standard')}}</span><br>-->
  233 + <!--<span class="description">{{_getLocalization('standardDescription')}}</span><br>-->
  234 + <!--<span class="option">{{_getLocalization('extended')}}</span><br>-->
  235 + <!--<span class="description">{{_getLocalization('extendedDescription')}}</span><br>-->
  236 + <!--</p>-->
  237 + <!--</paper-tooltip>-->
  238 + <!--</div>-->
  239 +
  240 + <div id="version_option" class="header_block">
  241 + {{_getLocalization('version')}}:&nbsp;
  242 + <paper-dropdown-menu id="ddl_version" label="" no-label-float>
  243 + <paper-menu id="menu_version" class="dropdown-content">
  244 + <paper-item id="0" on-tap="_showLast"><span id="show_last"></span></paper-item>
  245 + <paper-item id="1" on-tap="_showAll"><span id="show_all"></span></paper-item>
  246 + </paper-menu>
  247 + </paper-dropdown-menu>
  248 + <paper-icon-button id="tooltip_version" icon="info-outline" noink></paper-icon-button>
  249 + <paper-tooltip id="tooltip_version" for="tooltip_version" offset="8">
  250 + <p>
  251 + <span class="option">{{_getLocalization('showLast')}}</span><br>
  252 + <span class="description">{{_getLocalization('showLastDescription')}}</span><br>
  253 + <span class="option">{{_getLocalization('showAll')}}</span><br>
  254 + <span class="description">{{_getLocalization('showAllDescription')}}</span><br>
  255 + </p>
  256 + </paper-tooltip>
  257 + </div>
  258 +
  259 + <!--<paper-icon-button icon="settings" on-click="_optionsMenu"></paper-icon-button>-->
  260 +
  261 + </div>
  262 +
  263 + <div id="datasets_list_container">
  264 + <datasets-list-controllet id="datasets_list"></datasets-list-controllet>
  265 + </div>
  266 +
  267 + <div id="url"><paper-input id="selected_url" label="" value={{dataUrl}} error-message={{errorMessage}}></paper-input></div>
  268 + </paper-material>
  269 +
  270 + </template>
  271 +
  272 + <script>
  273 + HTMLImports.whenReady(function() {
  274 + Polymer({
  275 + is: 'demo-select-dataset-controllet',
  276 +
  277 + properties: {
  278 +
  279 + tabIndex: {
  280 + type: Number,
  281 + value: 0
  282 + },
  283 +
  284 + datasets: {
  285 + type: Object,
  286 + value: undefined
  287 + },
  288 +
  289 + suggestedDatasets : {
  290 + type : Array,
  291 + value : undefined
  292 + },
  293 +
  294 + dataUrl : {
  295 + type : String,
  296 + value : undefined,
  297 + observer : '_fireDataUrl'
  298 + }
  299 +
  300 + },
  301 +
  302 + listeners: {
  303 + 'datasets-list-controllet_dataset' : '_selectDataUrl'
  304 + },
  305 +
  306 + ready : function() {
  307 + this._translate();
  308 +
  309 + $(this.$.list_container).perfectScrollbar();
  310 + $(this.$.info).perfectScrollbar();
  311 +
  312 + this.options = true;
  313 + },
  314 +
  315 + attached : function() {
  316 + this._translate();
  317 +
  318 + this._resize();
  319 + var that = this;
  320 + window.addEventListener("resize", function() { that._resize() });
  321 +
  322 + this.providers = this.datasets["result"]["providers"];
  323 + this.providersDatasets = this.datasets["result"]["datasets"];
  324 +
  325 + if(this.suggestedDatasets)
  326 + this.providersDatasets = this.suggestedDatasets.concat(this.providersDatasets);
  327 +
  328 + $.ajax({
  329 + url: "/cocreation/ajax/get-all-dataset",
  330 + dataType: "json",
  331 + success: function(localDatasets){
  332 + that.localDatasets = localDatasets;
  333 + that.lastLocalDatasets = [];
  334 + var resource_name = "";
  335 + for(var i in localDatasets)
  336 + if(localDatasets[i].resource_name != resource_name) {
  337 + that.lastLocalDatasets.push(localDatasets[i]);
  338 + resource_name = localDatasets[i].resource_name;
  339 + }
  340 + },
  341 + error: function(){
  342 + that.localDatasets = [];
  343 + that.lastLocalDatasets = [];
  344 + }
  345 + });
  346 +
  347 + this._setProvidersDatasets();
  348 + },
  349 +
  350 + showDatasetInfo : function() {
  351 + this.$.datasets_list.showDatasetInfo();
  352 + },
  353 +
  354 + _translate : function(){
  355 + this.$.selected_url.setAttribute("label", ln["selectedUrl_" + ln["localization"]]);
  356 + this.errorMessage = ln["wrongUrl_" + ln["localization"]];
  357 +
  358 +// this.$.providers_datasets.innerHTML = ln["providersDatasets_" + ln["localization"]];
  359 +// this.$.spod_users_datasets.innerHTML = ln["spodUsersDatasets_" + ln["localization"]];
  360 +// this.$.extended_datasets.innerHTML = ln["extendedDatasets_" + ln["localization"]];
  361 +
  362 + this.$.options_header.innerHTML = ln["datasets_" + ln["localization"]];
  363 +
  364 + this.$.all.innerHTML = ln["all_" + ln["localization"]];
  365 +// this.$.list.innerHTML = ln["list_" + ln["localization"]];
  366 +// this.$.tree.innerHTML = ln["tree_" + ln["localization"]];
  367 +// this.$.standard.innerHTML = ln["standard_" + ln["localization"]];
  368 +// this.$.extended.innerHTML = ln["extended_" + ln["localization"]];
  369 + this.$.show_last.innerHTML = ln["showLast_" + ln["localization"]];
  370 + this.$.show_all.innerHTML = ln["showAll_" + ln["localization"]];
  371 +
  372 + this.$.menu_provider.select(0);
  373 +// this.$.menu_view.select(0);
  374 +// this.$.menu_search.select(0);
  375 + this.$.menu_version.select(0);
  376 + },
  377 +
  378 + _setProvidersDatasets : function() {
  379 + this.async(function () {
  380 + var ddl_provider = $(this.$.ddl_provider).find("paper-menu")[0].selectedItem;
  381 + var name = ddl_provider.innerHTML.trim();
  382 + var id = this._getIdByProviderName(name);
  383 + if (id) {
  384 + var providerDatasets = this.providersDatasets.filter(function (el) {
  385 + return el.provider_name == "p:" + id;
  386 + });
  387 + this.$.datasets_list.setDatasets(providerDatasets);
  388 + }
  389 + else
  390 + this.$.datasets_list.setDatasets(this.providersDatasets);
  391 +
  392 + this._showOptions();
  393 + }, 0);
  394 + },
  395 +
  396 + _setLocalDatasets : function() {
  397 + if(this.$.ddl_version.selectedItem.id == 0)
  398 + this._showLast();
  399 + else
  400 + this._showAll();
  401 + this._showOptions();
  402 + },
  403 +
  404 + _setExtendedDatasets : function() {
  405 + this.$.datasets_list.setDatasets([]);//tutto molto bello, clap, clap, clapù
  406 + this._showOptions()
  407 + },
  408 +
  409 + _getIdByProviderName : function(name) {
  410 + for(var id in this.providers) {
  411 + if (this.providers[id].title == name)
  412 + return this.providers[id].id;
  413 + }
  414 + },
  415 +
  416 + _optionsMenu : function() {
  417 + this.options = !this.options;
  418 + this._showOptions();
  419 + },
  420 +
  421 + _showOptions : function() {
  422 + this.async(function () {
  423 + if(!this.options) {
  424 + this.$.options_header.style.display = "block";
  425 + this.$.provider_option.style.display = "none";
  426 +// this.$.view_option.style.display = "none";
  427 +// this.$.search_option.style.display = "none";
  428 + this.$.version_option.style.display = "none";
  429 + }
  430 + else if(this.tabIndex == 0) {
  431 + this.$.options_header.style.display = "none";
  432 + this.$.provider_option.style.display = "block";
  433 +// this.$.view_option.style.display = "block";
  434 +// this.$.search_option.style.display = "block";
  435 + this.$.version_option.style.display = "none";
  436 + }
  437 + else if(this.tabIndex == 1) {
  438 + this.$.options_header.style.display = "none";
  439 + this.$.provider_option.style.display = "none";
  440 +// this.$.view_option.style.display = "none";
  441 +// this.$.search_option.style.display = "none";
  442 + this.$.version_option.style.display = "block";
  443 + }
  444 + else if(this.tabIndex == 2) {
  445 + this.$.options_header.style.display = "block";
  446 + this.$.provider_option.style.display = "none";
  447 +// this.$.view_option.style.display = "none";
  448 +// this.$.search_option.style.display = "none";
  449 + this.$.version_option.style.display = "none";
  450 + }
  451 + }, 0);
  452 + },
  453 +
  454 + _showAll : function() {
  455 + this.$.datasets_list.showVersion(true);
  456 + this.$.datasets_list.setDatasets(this.localDatasets);
  457 + },
  458 +
  459 + _showLast : function() {
  460 + this.$.datasets_list.showVersion(false);
  461 + this.$.datasets_list.setDatasets(this.lastLocalDatasets);
  462 + },
  463 +
  464 + _getLocalization : function(text){
  465 + return ln[text + "_" + ln["localization"]];
  466 + },
  467 +
  468 + _toArray: function(obj) {
  469 + return Object.keys(obj).map(function(key) {
  470 + return {
  471 + name: key,
  472 + value: obj[key]
  473 + };
  474 + });
  475 + },
  476 +
  477 + _selectDataUrl : function(e){
  478 + this.async(function () {
  479 + this.dataUrl = e.detail.dataset.url;
  480 + }, 0);
  481 + },
  482 +
  483 + _fireDataUrl : function(){
  484 + this.fire('select-dataset-controllet_data-url', {url: this.dataUrl});
  485 + },
  486 +
  487 + _resize : function(){
  488 + var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16;
  489 + h = h - 64 - 8; //height with page scroller
  490 + $("#select_dataset_container").height(h);
  491 + }
  492 + });
  493 + });
  494 + </script>
  495 +</dom-module>
0 \ No newline at end of file 496 \ No newline at end of file
controllets/select-dataset-controllet/select-dataset-controllet_old.html deleted
View file @9a8ed76
1 -<link rel="import" href="../../bower_components/polymer/polymer.html">  
2 -  
3 -<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">  
4 -<link rel="import" href="../../bower_components/paper-tabs/paper-tab.html">  
5 -  
6 -<link rel="import" href="../../bower_components/neon-animation/neon-animation.html">  
7 -<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">  
8 -<link rel="import" href="../../bower_components/neon-animation/neon-animations.html">  
9 -  
10 -<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">  
11 -<!--<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">-->  
12 -<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">  
13 -<link rel="import" href="../../bower_components/paper-styles/color.html">  
14 -<link rel="import" href="../../bower_components/paper-styles/typography.html">  
15 -<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">  
16 -<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">  
17 -<link rel="import" href="../../bower_components/iron-image/iron-image.html">  
18 -<link rel="import" href="../../bower_components/iron-list/iron-list.html">  
19 -  
20 -<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">  
21 -<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">  
22 -<link rel="import" href="../../bower_components/paper-item/paper-item.html">  
23 -  
24 -<link rel="import" href="../../bower_components/paper-input/paper-input.html">  
25 -  
26 -<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">  
27 -  
28 -<link rel="import" href="../../bower_components/paper-material/paper-material.html" />  
29 -  
30 -<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">  
31 -<link rel="import" href="../../bower_components/iron-icons/hardware-icons.html">  
32 -<!--<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">-->  
33 -  
34 -<link rel="import" href="../../bower_components/paper-checkbox/paper-checkbox.html">  
35 -  
36 -<link rel="import" href="../providers-utility-controllet/providers-utility-controllet.html">  
37 -<link rel="import" href="ortelio-controllet.html">  
38 -<link rel="import" href="../../datalets/datasetexplorer-datalet/datasetexplorer-datalet.html">  
39 -  
40 -<dom-module id="select-dataset-controllet">  
41 - <template>  
42 - <style>  
43 - :host {  
44 - --paper-dropdown-menu-icon: {  
45 - color: #000000;  
46 - };  
47 - --paper-dropdown-menu-ripple: {  
48 - color: #FFFFFF;  
49 - };  
50 - /*--paper-tab-ink: {*/  
51 - /*color: #FFFFFF;*/  
52 - /*};*/  
53 - }  
54 -  
55 - iron-list {  
56 - --iron-list-items-container: {  
57 - margin:16px 16px 8px 16px;  
58 - };  
59 - }  
60 -  
61 - paper-textarea {  
62 - width: 100%;  
63 - --paper-input-container-focus-color: #2196F3;  
64 - }  
65 -  
66 - paper-input {  
67 - --paper-input-container-focus-color: #2196F3;  
68 - }  
69 - paper-dropdown-menu {  
70 - width: 100%;  
71 - --paper-input-container-focus-color: #2196F3;  
72 - }  
73 -  
74 - paper-item.iron-selected {  
75 - background-color: #2196F3;  
76 - color: #FFFFFF;  
77 - }  
78 -  
79 - paper-checkbox {  
80 - height: 24px;  
81 - /*margin-top: 8px*/  
82 - --paper-checkbox-checked-color: #2196F3;  
83 - --paper-checkbox-checked-ink-color: #FFFFFF;  
84 - --paper-checkbox-unchecked-color: #000000;  
85 - --paper-checkbox-unchecked-ink-color: #FFFFFF;  
86 - --paper-checkbox-label-color: #000000;  
87 - }  
88 -  
89 - paper-icon-button{  
90 - height: 48px;  
91 - width: 48px;  
92 - padding: 0px;  
93 - --paper-icon-button-ink-color: #FFFFFF;  
94 - }  
95 -  
96 - paper-icon-button:hover{  
97 - color: #2196F3;  
98 - }  
99 -  
100 - paper-icon-button[disabled]{  
101 - color: #B6B6B6;  
102 - }  
103 -  
104 - paper-icon-button.clear {  
105 - width: 24px;  
106 - height: 24px;  
107 - padding: 0px 4px;  
108 - color: #F44336;  
109 - --paper-icon-button-ink-color: #FFFFFF;  
110 - }  
111 -  
112 - paper-tabs {  
113 - font-weight: bold;  
114 - }  
115 -  
116 - paper-tab {  
117 - transition: all 1.0s;  
118 - }  
119 -  
120 - paper-tab.iron-selected {  
121 - background-color: #2196F3;  
122 - color: #FFFFFF;  
123 - }  
124 -  
125 - paper-tab:not(.iron-selected):hover {  
126 - color: #2196F3;  
127 - }  
128 -  
129 - .item {  
130 - /*@apply(--layout-horizontal);*/  
131 - display: flex;  
132 - padding: 11px;  
133 - border: 1px solid #B6B6B6;  
134 - border-radius: 4px;  
135 - cursor: pointer;  
136 - margin-bottom: 8px;  
137 - background-color: #E0E0E0;  
138 - }  
139 -  
140 - .item.expanded {  
141 - /*border: 2px solid #2196F3;*/  
142 - border-color: #2196F3;  
143 - }  
144 -  
145 - .pad {  
146 - @apply(--layout-flex);  
147 - /*@apply(--layout-vertical);*/  
148 - }  
149 -  
150 - .primary {  
151 - font-weight: bold;  
152 - }  
153 -  
154 - .item.expanded .primary {  
155 - color: #2196F3;  
156 - }  
157 -  
158 - .longText {  
159 - display: none;  
160 - }  
161 -  
162 - .item.expanded .longText {  
163 - display: block;  
164 - }  
165 -  
166 - #select_dataset_container {  
167 - margin-top: 8px;  
168 - }  
169 -  
170 - #select_dataset_container * {  
171 - font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;  
172 - font-size: 16px;  
173 - line-height: 24px;  
174 - }  
175 -  
176 - #select_dataset_container #neon_container {  
177 - height: calc(100% - 172px);  
178 - width: calc(100% - 8px);  
179 - }  
180 -  
181 - #select_dataset_container #list_info {  
182 - display: flex;  
183 - height: calc(100% - 48px);  
184 - width: calc(100% + 8px);/*bad*/  
185 - }  
186 -  
187 - #select_dataset_container #list_container {  
188 - position: relative;  
189 - height: 100%;  
190 - width: 50%;  
191 - border-left: 4px solid #B6B6B6;  
192 - }  
193 -  
194 - #select_dataset_container #info_container {  
195 - position: relative;  
196 - height: 100%;  
197 - width: 50%;  
198 - border-right: 4px solid #B6B6B6;  
199 - }  
200 -  
201 - #select_dataset_container #info {  
202 - position: relative;  
203 - height: calc(100% - 56px);  
204 - width: calc(100% - 56px);  
205 - padding: 11px;  
206 - border: 1px solid #B6B6B6;  
207 - border-radius: 4px;  
208 - background-color: #E0E0E0;  
209 - margin: 16px;  
210 - }  
211 -  
212 - #select_dataset_container #treemap_container {  
213 - /*height: calc(100% - 244px);*/  
214 - /*width: calc(100% - 8px);*/  
215 - height: calc(100% - 48px);  
216 - width: 100%;  
217 - border: 4px solid #B6B6B6;  
218 - border-top: 0px;  
219 - border-bottom: 0px;  
220 - position: relative;  
221 - }  
222 -  
223 - #select_dataset_container #header {  
224 - position: relative;  
225 - z-index: 1;  
226 - -webkit-box-shadow: 0 30px 24px -12px rgba(0, 0, 0, 0.14), 0 20px 30px -9px rgba(0, 0, 0, 0.12), 0 20px 10px -19px rgba(0, 0, 0, 0.4);  
227 - -moz-box-shadow: 0 30px 24px -12px rgba(0, 0, 0, 0.14), 0 20px 30px -9px rgba(0, 0, 0, 0.12), 0 20px 10px -19px rgba(0, 0, 0, 0.4);  
228 - box-shadow: 0 30px 24px -12px rgba(0, 0, 0, 0.14), 0 20px 30px -9px rgba(0, 0, 0, 0.12), 0 20px 10px -19px rgba(0, 0, 0, 0.4);  
229 -  
230 - background-color: #B6B6B6;  
231 - display: flex;  
232 - padding: 0px 4px;  
233 - }  
234 -  
235 - #select_dataset_container #footer_list {  
236 - position: relative;  
237 - z-index: 1;  
238 - -webkit-box-shadow: 0 -30px 24px -12px rgba(0, 0, 0, 0.14), 0 -20px 30px -9px rgba(0, 0, 0, 0.12), 0 -20px 10px -19px rgba(0, 0, 0, 0.4);  
239 - -moz-box-shadow: 0 -30px 24px -12px rgba(0, 0, 0, 0.14), 0 -20px 30px -9px rgba(0, 0, 0, 0.12), 0 -20px 10px -19px rgba(0, 0, 0, 0.4);  
240 - box-shadow: 0 -30px 24px -12px rgba(0, 0, 0, 0.14), 0 -20px 30px -9px rgba(0, 0, 0, 0.12), 0 -20px 10px -19px rgba(0, 0, 0, 0.4);  
241 - }  
242 -  
243 - .noshadow {  
244 - -webkit-box-shadow: none !important;  
245 - -moz-box-shadow: none !important;  
246 - box-shadow: none !important;  
247 - }  
248 -  
249 - #select_dataset_container #footer_list,  
250 - #select_dataset_container #footer_treemap {  
251 - width: 100%;  
252 - background-color: #B6B6B6;  
253 - display: flex;  
254 - padding: 0px 4px;  
255 - }  
256 -  
257 - #select_dataset_container #url {  
258 - height: 76px;/*100*/  
259 - border: 4px solid #B6B6B6;  
260 - border-top: 0px;  
261 - padding: 0px 16px;  
262 - margin-top: -4px;  
263 - }  
264 -  
265 - #header .header_block {  
266 - width: 20%;  
267 - height: 40px;  
268 - padding: 4px 16px 4px 16px;  
269 - }  
270 -  
271 - /*.header_block:nth-child(2), .header_block:nth-child(3), .header_block:nth-child(3), .header_block:nth-child(4){*/  
272 - /*visibility: hidden;*/  
273 - /*}*/  
274 -  
275 - #header .header_block:nth-child(4) {  
276 - text-align: center;  
277 - }  
278 -  
279 - .footer_block {  
280 - width: calc((100% - 0px) / 3);  
281 - height: 24px;  
282 - padding: 12px 8px 12px 8px;  
283 - text-align: center;  
284 - }  
285 -  
286 - .footer_block:nth-child(2) {  
287 - height: 48px;  
288 - padding: 0px 8px;  
289 - }  
290 -  
291 - #suggested_div {  
292 - visibility: hidden;  
293 - }  
294 -  
295 - /*.info_resource_name {*/  
296 - /*color: #2196F3;*/  
297 - /*font-weight: bold;*/  
298 - /*line-height: 48px;*/  
299 - /*}*/  
300 -  
301 - /*#ortelio {*/  
302 - /*/!*height: calc(100% - 172px);*!/*/  
303 - /*/!*width: calc(100% - 8px);*!/*/  
304 - /*height: 100%;*/  
305 - /*width: 100%;*/  
306 - /*background-color: red;*/  
307 - /*}*/  
308 - </style>  
309 -  
310 - <paper-material id="select_dataset_container" elevation="5">  
311 -  
312 - <paper-tabs selected="{{selected}}" no-bar>  
313 - <paper-tab on-tap="_refreshList" noink><span id="listView"></span></paper-tab>  
314 - <paper-tab on-tap="_noShadow" noink><span id="treeMapView"></span></paper-tab>  
315 - <paper-tab on-tap="_hideSearch" noink><span id="extendedSearch"></span></paper-tab>  
316 - </paper-tabs>  
317 -  
318 - <div id="header">  
319 - <div class="header_block">  
320 - <paper-dropdown-menu id="ddl_provider" label="" no-label-float>  
321 - <paper-menu class="dropdown-content" selected="0">  
322 - <paper-item id="0" on-tap="_filter"></paper-item>  
323 - <template is="dom-repeat" items={{_toArray(providers)}} as="provider">  
324 - <!--<paper-item id={{provider.value.id}} style$="background: {{_getProviderColor(provider.value.id)}};">{{provider.value.title}}</paper-item>-->  
325 - <paper-item id={{provider.value.id}} on-tap="_filter">{{provider.value.title}}</paper-item>  
326 - </template>  
327 - </paper-menu>  
328 - </paper-dropdown-menu>  
329 - </div>  
330 - <div class="header_block">  
331 - </div>  
332 - <div class="header_block">  
333 - </div>  
334 - <div class="header_block">  
335 - </div>  
336 - <div class="header_block">  
337 - <paper-input id="datasets_filter" value={{filter}} no-label-float label="">  
338 - <iron-icon class="search" icon="search" prefix></iron-icon>  
339 - <paper-icon-button class="clear" suffix on-click="_clearInput" icon="clear" tabindex="0"></paper-icon-button>  
340 - </paper-input>  
341 - </div>  
342 - </div>  
343 -  
344 - <neon-animated-pages id="neon_container" selected="{{selected}}" entry-animation="fade-in-animation" exit-animation="fade-out-animation">  
345 -  
346 - <neon-animatable>  
347 - <div id="list_info">  
348 - <div id="list_container">  
349 - <iron-list id="list" items="{{shownDatasets}}" selection-enabled>  
350 - <template>  
351 - <div>  
352 - <div class$="{{getClassForItem(selected)}}" on-tap="_selectDataUrl" style$="background: {{_getColorForItem(item)}};">  
353 - <span style="display:none;">{{item.url}}</span>  
354 - <div class="pad">  
355 - <div class="primary">{{item.resource_name}}</div>  
356 - <!--<div class="longText">-->  
357 - <!--<template is="dom-repeat" items="{{_stringToArray(item.metas)}}" as="mata">-->  
358 - <!--<b>{{mata.name}}:</b>-->  
359 - <!--<span inner-h-t-m-l="{{mata.value}}"></span> <br>-->  
360 - <!--</template>-->  
361 - <!--</div>-->  
362 - </div>  
363 - <iron-icon icon$="{{_getIconForItem(item)}}" style$="color: {{_getColorForIcon(item)}};"></iron-icon>  
364 - </div>  
365 - </div>  
366 - </template>  
367 - </iron-list>  
368 - </div>  
369 - <div id="info_container">  
370 - <div id="info">  
371 - </div>  
372 - </div>  
373 - </div>  
374 -  
375 - <div id="footer_list">  
376 - <div class="footer_block"><span id="showing"></span> {{shownPrev}} <span id="to"></span> {{shownNext}} <span id="of"></span> {{length}} <span id="datasets"></span></div>  
377 - <div class="footer_block">  
378 - <paper-icon-button id="slider_chevron_left" class="chevron-left" on-click="_onPrevClick" icon="chevron-left"></paper-icon-button>  
379 - <paper-icon-button id="slider_chevron_right" class="chevron-right" on-click="_onNextClick" icon="chevron-right"></paper-icon-button>  
380 - </div>  
381 - <div id="suggested_div" class="footer_block">  
382 - <!--<template is="dom-if" if={{suggestedDatasets}}>-->  
383 - <paper-checkbox checked on-change="showSuggested"><span id="suggested_datasets"></span></paper-checkbox>  
384 - <!--</template>-->  
385 - </div>  
386 - </div>  
387 - </neon-animatable>  
388 -  
389 - <neon-animatable>  
390 - <div id="treemap_container"></div>  
391 -  
392 - <div id="footer_treemap">  
393 - <div class="footer_block"><span id="showing2"></span> {{tLength}} <span id="datasets2"></span></div>  
394 - <div class="footer_block"></div>  
395 - <div class="footer_block"></div>  
396 - </div>  
397 - </neon-animatable>  
398 -  
399 - <neon-animatable>  
400 - <!--<div id="ortelio">-->  
401 - <ortelio-controllet datasets={{datasets}}></ortelio-controllet>  
402 - <!--</div>-->  
403 - </neon-animatable>  
404 -  
405 - </neon-animated-pages>  
406 -  
407 - <div id="url">  
408 - <paper-textarea id="selected_url" label="" value={{dataUrl}} error-message={{errorMessage}}></paper-textarea>  
409 - </div>  
410 -  
411 - </paper-material>  
412 -  
413 - </template>  
414 -  
415 - <script>  
416 - HTMLImports.whenReady(function() {  
417 - Polymer({  
418 - is: 'select-dataset-controllet',  
419 - properties: {  
420 - datasets: {  
421 - type: Object,  
422 - value: undefined  
423 - },  
424 - filteredDatasets : {  
425 - type : Array,  
426 - value : undefined  
427 - },  
428 - shownDatasets : {  
429 - type : Array,  
430 - value : undefined  
431 - },  
432 - suggestedDatasets : {  
433 - type : Array,  
434 - value : undefined  
435 - },  
436 -  
437 - providers : {  
438 - type : Array,  
439 - value : undefined  
440 - },  
441 - dataUrl : {  
442 - type : String,  
443 - value : undefined,  
444 - observer : '_fireDataUrl'  
445 - },  
446 - filter : {  
447 - type : String,  
448 - value : "",  
449 - observer : '_filter'  
450 - },  
451 - selected : {  
452 - type : Number,  
453 - value : 0  
454 - },  
455 - prev : {type : Number, value : undefined},  
456 - next : {type : Number, value : undefined},  
457 - shownPrev : {type : Number, value : undefined},  
458 - shownNext : {type : Number, value : undefined},  
459 - length : {type : Number, value : undefined},  
460 - tLength : {type : Number, computed : 'treemapLength(length)'},  
461 - step : {type : Number, value : 20},  
462 - colors : {  
463 - type : Array,  
464 - value : ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd","#ccebc5","#ffed6f"]  
465 - }  
466 - },  
467 -  
468 - listeners: {  
469 - 'datasetexplorer-datalet_data-url': '_selectDataUrl_treeMap'  
470 - },  
471 -  
472 - ready : function() {  
473 - $(this.$.list_container).perfectScrollbar();  
474 - $(this.$.info).perfectScrollbar();  
475 -  
476 -// this.$.selected_url.invalid = true;  
477 - },  
478 -  
479 - attached: function() {  
480 - this._resize();  
481 - var that = this;  
482 - window.addEventListener("resize", function() { that._resize(); that._loadTreeMap();});  
483 -  
484 -// this.providers = that.datasets["result"]["providers"];  
485 -// this.datasets = that.datasets["result"]["datasets"];  
486 -  
487 - $.ajax({  
488 - url: "/cocreation/ajax/get-all-dataset",  
489 - dataType: "json",  
490 - success: function(spodDatasets){  
491 -  
492 - that.providers = $.extend(that.datasets["result"]["providers"], {99: {api_url: "/cocreation/ajax/get-all-dataset", id: "99", image_hash: "SPOD", title: "SPOD"}});  
493 - that.datasets = $.merge(spodDatasets, that.datasets["result"]["datasets"]);  
494 -  
495 - if(that.suggestedDatasets) {  
496 - that.tempDatasets = that.datasets;  
497 - that.datasets = that.suggestedDatasets.concat(that.datasets);  
498 - that.$.suggested_div.style.visibility = "visible";  
499 - }  
500 -  
501 - that.filteredDatasets = that.datasets;  
502 -  
503 - that.prev = 1;  
504 - that.next = that.step;  
505 - that.length = that.filteredDatasets.length;  
506 -  
507 - that.shownPrev = Math.min(that.prev, that.length);  
508 - that.shownNext = Math.min(that.next, that.length);  
509 - that.shownDatasets = that.filteredDatasets.slice(that.prev-1, that.next);  
510 -  
511 - that.$.list.scrollTarget = that.ownerDocument.documentElement;  
512 -  
513 - that._translate();  
514 -  
515 - that._loadTreeMap();  
516 - }  
517 - });  
518 - },  
519 -  
520 - _translate : function(){  
521 - this.$.listView.innerHTML = ln["listView_" + ln["localization"]];  
522 - this.$.treeMapView.innerHTML = ln["treeMapView_" + ln["localization"]];  
523 - this.$.extendedSearch.innerHTML = ln["extendedSearch_" + ln["localization"]];  
524 -  
525 - this.$.ddl_provider.setAttribute("label", ln["provider_" + ln["localization"]]);  
526 - this.$.datasets_filter.setAttribute("label", ln["search_" + ln["localization"]]);  
527 -  
528 - this.$.suggested_datasets.innerHTML = ln["suggestedDatasets_" + ln["localization"]];  
529 -  
530 - this.$.showing.innerHTML = ln["showing_" + ln["localization"]];  
531 - this.$.showing2.innerHTML = ln["showing_" + ln["localization"]];  
532 - this.$.to.innerHTML = ln["to_" + ln["localization"]];  
533 - this.$.of.innerHTML = ln["of_" + ln["localization"]];  
534 - this.$.datasets.innerHTML = ln["datasets_" + ln["localization"]];  
535 - this.$.datasets2.innerHTML = ln["datasets_" + ln["localization"]];  
536 -  
537 - this.$.selected_url.setAttribute("label", ln["selectedUrl_" + ln["localization"]]);  
538 - this.errorMessage = ln["wrongUrl_" + ln["localization"]];  
539 - },  
540 -  
541 - showSuggested : function(e) {  
542 - if(e.target.checked)  
543 - this.datasets = this.suggestedDatasets.concat(this.tempDatasets);  
544 - else  
545 - this.datasets = this.tempDatasets;  
546 - this._filter();  
547 - },  
548 -  
549 - _loadTreeMap : function(){  
550 - var h = $("#neon_container").height() - 48;  
551 - var w = $("#neon_container").width();  
552 -  
553 - var data = JSON.stringify({result : {providers: this.providers, datasets: this.filteredDatasets}}).replace(/'/g, "");  
554 -  
555 - if(this.filteredDatasets.length > 0)  
556 - this.$.treemap_container.innerHTML = "<datasetexplorer-datalet data='"+data+"' width=\""+w+"\" height=\""+h+"\" fields='[\"provider_name\",\"organization_name\",\"package_name\",\"resource_name\",\"url\",\"w\",\"metas\"]'></datasetexplorer-datalet>";  
557 - else  
558 - this.$.treemap_container.innerHTML = "";  
559 - },  
560 -  
561 - _filter : function() {  
562 - if(this.filteredDatasets) {  
563 - this.async(function () {  
564 - var ddl_provider = $(this.$.ddl_provider).find("paper-menu")[0].selectedItem;  
565 - var name = ddl_provider.innerHTML.trim();  
566 - var id = this._getIdByProviderName(name);  
567 - this.prev = 1;  
568 - this.next = this.step;  
569 - if (id) {  
570 - //filtered by provider name  
571 - this.filteredDatasets = this.datasets.filter(function (el) {  
572 - return el.provider_name == "p:" + id;  
573 - });  
574 - }  
575 - else {  
576 - this.filteredDatasets = this.datasets;  
577 - }  
578 -  
579 - //filtered by filter  
580 - var filter = this.filter;  
581 - this.filteredDatasets = this.filteredDatasets.filter(function (el) {  
582 - return el.resource_name.toLowerCase().indexOf(filter.toLowerCase()) > -1;  
583 - });  
584 -  
585 - this.length = this.filteredDatasets.length;  
586 -  
587 - this.shownPrev = Math.min(this.prev, this.length);  
588 - this.shownNext = Math.min(this.next, this.length);  
589 - this.shownDatasets = this.filteredDatasets.slice(this.prev - 1, this.next);  
590 -  
591 - $("#list_container").animate({scrollTop: 0}, 0);  
592 -  
593 - this._loadTreeMap();  
594 - }, 0);  
595 - }  
596 - },  
597 -  
598 - _refreshList : function() {  
599 - this.shownDatasets = this.filteredDatasets.slice(this.prev - 1, this.next);  
600 -  
601 - this.$.header.style.display = "flex";  
602 - this.$.header.style.visibility = "visible";  
603 -// this.$.url.style.marginTop = "-4px";  
604 -  
605 - this.$.header.className = this.$.header.className.replace(" noshadow", "");  
606 - },  
607 -  
608 - _noShadow : function() {  
609 - this.$.header.style.display = "flex";  
610 - this.$.header.style.visibility = "visible";  
611 -// this.$.url.style.marginTop = "-4px";  
612 -  
613 - this.$.header.className += " noshadow";  
614 - },  
615 -  
616 - _hideSearch : function() {  
617 -// this.$.header.style.display = "none";  
618 - this.$.header.style.visibility = "hidden";  
619 -// this.$.url.style.marginTop = "44px";  
620 - },  
621 -  
622 - _clearInput : function() {  
623 - this.$.datasets_filter.value = "";  
624 - },  
625 -  
626 - _getIdByProviderName : function(name) {  
627 - for(var id in this.providers) {  
628 - if (this.providers[id].title == name)  
629 - return this.providers[id].id;  
630 - }  
631 - },  
632 -  
633 -// iconForItem: function(item) {  
634 -// return item ? (item.integer < 50 ? 'star-border' : 'info-outline') : '';  
635 -// },  
636 -  
637 - treemapLength : function(length) {  
638 - var ddl_provider = $(this.$.ddl_provider).find("paper-menu")[0].selectedItem;  
639 - var name = ddl_provider.innerHTML.trim();  
640 - var id = this._getIdByProviderName(name);  
641 -  
642 - if(this.suggestedDatasets && !id)  
643 - return Math.max(length - this.suggestedDatasets.length, 0);  
644 - return length;  
645 - },  
646 -  
647 - _getColorForIcon : function(item) {  
648 - var ddl_provider = $(this.$.ddl_provider).find("paper-menu")[0].selectedItem;  
649 - var name = ddl_provider.innerHTML.trim();  
650 - var id = this._getIdByProviderName(name);  
651 - if (id) {  
652 - return this.colors[0];  
653 - }  
654 - if(!item.provider_name) {  
655 - return "#00BCD4";  
656 - }  
657 - var id = item.provider_name.substring(2, item.provider_name.length);  
658 - var i = this.getProviderById(id) % this.colors.length;  
659 - return this.colors[i];  
660 - },  
661 -  
662 - _getColorForItem : function(item) {  
663 -// var ddl_provider = $(this.$.ddl_provider).find("paper-menu")[0].selectedItem;  
664 -// var name = ddl_provider.innerHTML.trim();  
665 -// var id = this._getIdByProviderName(name);  
666 -// if (id) {  
667 -// return this.colors[0];  
668 -// }  
669 - if(!item.provider_name) {  
670 - return "#FFEB3B";  
671 - }  
672 -// var id = item.provider_name.substring(2, item.provider_name.length);  
673 -// var i = this.getProviderById(id) % this.colors.length;  
674 -// return this.colors[i];  
675 - },  
676 -  
677 - _getIconForItem : function(item) {  
678 - return item.provider_name ? 'bookmark' : 'star';  
679 - },  
680 -  
681 -// _getProviderColor: function(id) {  
682 -// var i = this.getProviderById(id) % this.colors.length;  
683 -// return this.colors[i];  
684 -// },  
685 -  
686 - getClassForItem: function(selected) {  
687 - return selected ? 'item expanded' : 'item';  
688 - },  
689 -  
690 - getProviderById: function(providerId) {  
691 - var i = 0;  
692 - for(var id in this.providers){  
693 - if(this.providers[id].id == providerId)  
694 - return i;  
695 - i++;  
696 - }  
697 - },  
698 -  
699 - _onPrevClick : function(){  
700 - if(this.prev != 1) {  
701 - this.prev -= this.step;  
702 - this.next -= this.step;  
703 -  
704 - this.shownPrev = Math.min(this.prev, this.length);  
705 - this.shownNext = Math.min(this.next, this.length);  
706 - this.shownDatasets = this.filteredDatasets.slice(this.prev - 1, this.next);  
707 - }  
708 - $("#list_container").animate({ scrollTop: 0}, 0);  
709 - },  
710 -  
711 - _onNextClick : function(){  
712 - if(this.next < this.length) {  
713 - this.prev += this.step;  
714 - this.next += this.step;  
715 -  
716 - this.shownPrev = Math.min(this.prev, this.length);  
717 - this.shownNext = Math.min(this.next, this.length);  
718 - this.shownDatasets = this.filteredDatasets.slice(this.prev - 1, this.next);  
719 - }  
720 - $("#list_container").animate({ scrollTop: 0}, 0);  
721 - },  
722 -  
723 - _stringToArray: function(obj) {  
724 - obj = JSON.parse(obj);  
725 - return Object.keys(obj).map(function(key) {  
726 - return {  
727 - name: key,  
728 - value: obj[key]  
729 - };  
730 - });  
731 - },  
732 -  
733 - _toArray: function(obj) {  
734 - return Object.keys(obj).map(function(key) {  
735 - return {  
736 - name: key,  
737 - value: obj[key]  
738 - };  
739 - });  
740 - },  
741 -  
742 - _selectDataUrl : function(){  
743 - this.async(function () {  
744 - if(this.$.list.selectedItem) {  
745 -  
746 - var metas = JSON.parse(this.$.list.selectedItem.metas);  
747 - var html = "<span style=\"color: #2196F3; font-weight: bold;\">" + this.$.list.selectedItem.resource_name + "</span><br><br>";  
748 - /*font-weight: bold;*/  
749 - /*line-height: 48px;*/  
750 - for(var i in metas)  
751 - html += "<b>" + i + ":</b> " + metas[i] + "<br>";  
752 - this.$.info.innerHTML = html;  
753 -  
754 - this.dataUrl = this.$.list.selectedItem.url;  
755 -// var url = this.$.list.selectedItem.url;  
756 -  
757 -// url = utility_getResourceUrl(url);  
758 -  
759 -// // Check if CKAN  
760 -// var strDatasetPos = url.indexOf('/dataset/');  
761 -// var strResourcePos = (strDatasetPos >= 0) ? url.indexOf('/resource/') : -1;  
762 -// if (strDatasetPos >= 0 && strResourcePos > strDatasetPos) {  
763 -// var urlSegment1 = url.substring(0, strDatasetPos);  
764 -// var urlResourceEnd = url.indexOf('/', strResourcePos + 10);  
765 -// var resourceId = url.substring(strResourcePos + 10, urlResourceEnd);  
766 -// url = urlSegment1 + "/api/action/datastore_search?resource_id=" + resourceId;  
767 -// }  
768 -//  
769 -// // Check if OPENDATASOFT  
770 -// var strExploreDatasetPos = url.indexOf('/explore/dataset/');  
771 -// if (strExploreDatasetPos >= 0) {  
772 -// var urlSegment1 = url.substring(0, strExploreDatasetPos);  
773 -// var datasetEnd = url.indexOf(strExploreDatasetPos + 17, '/');  
774 -// var datasetId = url.substring(strExploreDatasetPos + 17, datasetEnd >= 0 ? datasetEnd : url.length);  
775 -// url = urlSegment1 + '/api/records/1.0/search?dataset=' + datasetId;  
776 -// }  
777 -  
778 -// this.dataUrl = this._addlimitUrl(url);  
779 -// this.dataUrl = url;  
780 - }  
781 - else {  
782 - this.dataUrl = "";  
783 - this.$.info.innerHTML = "";  
784 - }  
785 - }, 0);  
786 - },  
787 -  
788 - _selectDataUrl_treeMap : function(e) {  
789 -// this.dataUrl = this._addlimitUrl(e.detail.url);  
790 - this.dataUrl = e.detail.url;  
791 - },  
792 -  
793 - _fireDataUrl : function(){  
794 - this.fire('dataset-selection-controllet_data-url', {url: this.dataUrl});  
795 - },  
796 -  
797 -// _addlimitUrl : function(url){  
798 -// //CKAN --> action no limit  
799 -// if((url.indexOf("api/action") > -1) && !(url.indexOf("limit") > -1))  
800 -// {  
801 -// url += "&limit=99999";  
802 -// }  
803 -// //OpenDataSoft --> action no limit  
804 -// if((url.indexOf("api/records") > -1) && !(url.indexOf("rows") > -1)){  
805 -// url += "&rows=10000";  
806 -// }  
807 -// return url;  
808 -// },  
809 -  
810 - _resize : function(){  
811 - var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16;  
812 - h = h - 64 - 8; //height with page scroller  
813 - $("#select_dataset_container").height(h);  
814 - }  
815 - });  
816 - });  
817 - </script>  
818 -</dom-module>  
819 \ No newline at end of file 0 \ No newline at end of file
controllets/select-dataset-controllet/select-dataset-controllet_purelist.html deleted
View file @9a8ed76
1 -<link rel="import" href="../../bower_components/polymer/polymer.html">  
2 -  
3 -<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">  
4 -<link rel="import" href="../../bower_components/paper-tabs/paper-tab.html">  
5 -  
6 -<link rel="import" href="../../bower_components/neon-animation/neon-animation.html">  
7 -<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">  
8 -<link rel="import" href="../../bower_components/neon-animation/neon-animations.html">  
9 -  
10 -<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">  
11 -<!--<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">-->  
12 -<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">  
13 -<link rel="import" href="../../bower_components/paper-styles/color.html">  
14 -<link rel="import" href="../../bower_components/paper-styles/typography.html">  
15 -<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">  
16 -<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">  
17 -<link rel="import" href="../../bower_components/iron-image/iron-image.html">  
18 -<link rel="import" href="../../bower_components/iron-list/iron-list.html">  
19 -  
20 -<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">  
21 -<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">  
22 -<link rel="import" href="../../bower_components/paper-item/paper-item.html">  
23 -  
24 -<link rel="import" href="../../bower_components/paper-input/paper-input.html">  
25 -  
26 -<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">  
27 -  
28 -<link rel="import" href="../../bower_components/paper-material/paper-material.html" />  
29 -  
30 -<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">  
31 -<link rel="import" href="../../bower_components/iron-icons/hardware-icons.html">  
32 -<!--<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">-->  
33 -  
34 -<link rel="import" href="../../bower_components/paper-checkbox/paper-checkbox.html">  
35 -  
36 -<link rel="import" href="../../datalets/datasetexplorer-datalet/datasetexplorer-datalet.html">  
37 -  
38 -<dom-module id="select-dataset-controllet">  
39 - <template>  
40 - <style>  
41 - :host {  
42 - --paper-dropdown-menu-icon: {  
43 - color: #000000;  
44 - };  
45 - --paper-dropdown-menu-ripple: {  
46 - color: #FFFFFF;  
47 - };  
48 - /*--paper-tab-ink: {*/  
49 - /*color: #FFFFFF;*/  
50 - /*};*/  
51 - }  
52 -  
53 - iron-list {  
54 - --iron-list-items-container: {  
55 - margin:16px 16px 8px 16px;  
56 - };  
57 - }  
58 -  
59 - paper-textarea {  
60 - width: 100%;  
61 - --paper-input-container-focus-color: #2196F3;  
62 - }  
63 -  
64 - paper-input {  
65 - --paper-input-container-focus-color: #2196F3;  
66 - }  
67 - paper-dropdown-menu {  
68 - width: 100%;  
69 - --paper-input-container-focus-color: #2196F3;  
70 - }  
71 -  
72 - paper-item.iron-selected {  
73 - background-color: #2196F3;  
74 - color: #FFFFFF;  
75 - }  
76 -  
77 - paper-checkbox {  
78 - height: 24px;  
79 - /*margin-top: 8px*/  
80 - --paper-checkbox-checked-color: #2196F3;  
81 - --paper-checkbox-checked-ink-color: #FFFFFF;  
82 - --paper-checkbox-unchecked-color: #000000;  
83 - --paper-checkbox-unchecked-ink-color: #FFFFFF;  
84 - --paper-checkbox-label-color: #000000;  
85 - }  
86 -  
87 - paper-icon-button{  
88 - height: 48px;  
89 - width: 48px;  
90 - padding: 0px;  
91 - --paper-icon-button-ink-color: #FFFFFF;  
92 - }  
93 -  
94 - paper-icon-button:hover{  
95 - color: #2196F3;  
96 - }  
97 -  
98 - paper-icon-button[disabled]{  
99 - color: #B6B6B6;  
100 - }  
101 -  
102 - paper-icon-button.clear {  
103 - width: 24px;  
104 - height: 24px;  
105 - padding: 0px 4px;  
106 - color: #F44336;  
107 - --paper-icon-button-ink-color: #FFFFFF;  
108 - }  
109 -  
110 - paper-tabs {  
111 - font-weight: bold;  
112 - }  
113 -  
114 - paper-tab {  
115 - transition: all 1.0s;  
116 - }  
117 -  
118 - paper-tab.iron-selected {  
119 - background-color: #2196F3;  
120 - color: #FFFFFF;  
121 - }  
122 -  
123 - paper-tab:not(.iron-selected):hover {  
124 - color: #2196F3;  
125 - }  
126 -  
127 - .item {  
128 - /*@apply(--layout-horizontal);*/  
129 - display: flex;  
130 - padding: 11px;  
131 - border: 1px solid #B6B6B6;  
132 - border-radius: 4px;  
133 - cursor: pointer;  
134 - margin-bottom: 8px;  
135 - background-color: #E0E0E0;  
136 - }  
137 -  
138 - .pad {  
139 - @apply(--layout-flex);  
140 - /*@apply(--layout-vertical);*/  
141 - }  
142 -  
143 - .primary {  
144 - font-weight: bold;  
145 - }  
146 -  
147 - .item.expanded .primary {  
148 - color: #2196F3;  
149 - }  
150 -  
151 - .longText {  
152 - display: none;  
153 - }  
154 -  
155 - .item.expanded .longText {  
156 - display: block;  
157 - }  
158 -  
159 - #select_dataset_container {  
160 - margin-top: 8px;  
161 - }  
162 -  
163 - #select_dataset_container * {  
164 - font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;  
165 - font-size: 16px;  
166 - line-height: 24px;  
167 - }  
168 -  
169 - #select_dataset_container #neon_container {  
170 - height: calc(100% - 172px);  
171 - width: calc(100% - 8px);  
172 - }  
173 -  
174 - #select_dataset_container #list_container {  
175 - /*height: calc(100% - 244px);*/  
176 - /*width: calc(100% - 8px);*/  
177 - height: calc(100% - 48px);  
178 - width: 100%;  
179 - border: 4px solid #B6B6B6;  
180 - border-top: 0px;  
181 - border-bottom: 0px;  
182 - position: relative;  
183 - }  
184 -  
185 - #select_dataset_container #treemap_container {  
186 - /*height: calc(100% - 244px);*/  
187 - /*width: calc(100% - 8px);*/  
188 - height: calc(100% - 48px);  
189 - width: 100%;  
190 - border: 4px solid #B6B6B6;  
191 - border-top: 0px;  
192 - border-bottom: 0px;  
193 - position: relative;  
194 - }  
195 -  
196 - #select_dataset_container #header {  
197 - position: relative;  
198 - z-index: 1;  
199 - -webkit-box-shadow: 0 30px 24px -12px rgba(0, 0, 0, 0.14), 0 20px 30px -9px rgba(0, 0, 0, 0.12), 0 20px 10px -19px rgba(0, 0, 0, 0.4);  
200 - -moz-box-shadow: 0 30px 24px -12px rgba(0, 0, 0, 0.14), 0 20px 30px -9px rgba(0, 0, 0, 0.12), 0 20px 10px -19px rgba(0, 0, 0, 0.4);  
201 - box-shadow: 0 30px 24px -12px rgba(0, 0, 0, 0.14), 0 20px 30px -9px rgba(0, 0, 0, 0.12), 0 20px 10px -19px rgba(0, 0, 0, 0.4);  
202 -  
203 - background-color: #B6B6B6;  
204 - display: flex;  
205 - padding: 0px 4px;  
206 - }  
207 -  
208 - #select_dataset_container #footer_list {  
209 - position: relative;  
210 - z-index: 1;  
211 - -webkit-box-shadow: 0 -30px 24px -12px rgba(0, 0, 0, 0.14), 0 -20px 30px -9px rgba(0, 0, 0, 0.12), 0 -20px 10px -19px rgba(0, 0, 0, 0.4);  
212 - -moz-box-shadow: 0 -30px 24px -12px rgba(0, 0, 0, 0.14), 0 -20px 30px -9px rgba(0, 0, 0, 0.12), 0 -20px 10px -19px rgba(0, 0, 0, 0.4);  
213 - box-shadow: 0 -30px 24px -12px rgba(0, 0, 0, 0.14), 0 -20px 30px -9px rgba(0, 0, 0, 0.12), 0 -20px 10px -19px rgba(0, 0, 0, 0.4);  
214 - }  
215 -  
216 - .noshadow {  
217 - -webkit-box-shadow: none !important;  
218 - -moz-box-shadow: none !important;  
219 - box-shadow: none !important;  
220 - }  
221 -  
222 - #select_dataset_container #footer_list,  
223 - #select_dataset_container #footer_treemap {  
224 - width: 100%;  
225 - background-color: #B6B6B6;  
226 - display: flex;  
227 - padding: 0px 4px;  
228 - }  
229 -  
230 - #select_dataset_container #url {  
231 - height: 76px;/*100*/  
232 - border: 4px solid #B6B6B6;  
233 - border-top: 0px;  
234 - padding: 0px 16px;  
235 - margin-top: -4px;  
236 - }  
237 -  
238 - #header .header_block {  
239 - width: 20%;  
240 - height: 40px;  
241 - padding: 4px 16px 4px 16px;  
242 - }  
243 -  
244 - /*.header_block:nth-child(2), .header_block:nth-child(3), .header_block:nth-child(3), .header_block:nth-child(4){*/  
245 - /*visibility: hidden;*/  
246 - /*}*/  
247 -  
248 - #header .header_block:nth-child(4) {  
249 - text-align: center;  
250 - }  
251 -  
252 - .footer_block {  
253 - width: calc((100% - 0px) / 3);  
254 - height: 24px;  
255 - padding: 12px 8px 12px 8px;  
256 - text-align: center;  
257 - }  
258 -  
259 - .footer_block:nth-child(2) {  
260 - height: 48px;  
261 - padding: 0px 8px;  
262 - }  
263 -  
264 - #suggested_div {  
265 - visibility: hidden;  
266 - }  
267 - </style>  
268 -  
269 - <paper-material id="select_dataset_container" elevation="5">  
270 -  
271 - <paper-tabs selected="{{selected}}" no-bar>  
272 - <paper-tab noink on-tap="_refreshList"><span id="listView"></span></paper-tab>  
273 - <!--<paper-tab noink ><span id="listView"></span></paper-tab>-->  
274 - <paper-tab on-tap="_noShadow" noink><span id="treeMapView"></span></paper-tab>  
275 - </paper-tabs>  
276 -  
277 - <div id="header">  
278 - <div class="header_block">  
279 - <paper-dropdown-menu id="ddl_provider" label="" no-label-float>  
280 - <paper-menu class="dropdown-content" selected="0">  
281 - <paper-item id="0" on-tap="_filter"></paper-item>  
282 - <template is="dom-repeat" items={{_toArray(providers)}} as="provider">  
283 - <!--<paper-item id={{provider.value.id}} style$="background: {{_getProviderColor(provider.value.id)}};">{{provider.value.title}}</paper-item>-->  
284 - <paper-item id={{provider.value.id}} on-tap="_filter">{{provider.value.title}}</paper-item>  
285 - </template>  
286 - </paper-menu>  
287 - </paper-dropdown-menu>  
288 - </div>  
289 - <div class="header_block">  
290 - </div>  
291 - <div class="header_block">  
292 - </div>  
293 - <div class="header_block">  
294 - </div>  
295 - <div class="header_block">  
296 - <paper-input id="datasets_filter" value={{filter}} no-label-float label="">  
297 - <iron-icon class="search" icon="search" prefix></iron-icon>  
298 - <paper-icon-button class="clear" suffix on-click="_clearInput" icon="clear" tabindex="0"></paper-icon-button>  
299 - </paper-input>  
300 - </div>  
301 - </div>  
302 -  
303 - <neon-animated-pages id="neon_container" selected="{{selected}}" entry-animation="fade-in-animation" exit-animation="fade-out-animation">  
304 -  
305 - <neon-animatable>  
306 - <div id="list_container">  
307 - <iron-list id="list" items="{{shownDatasets}}" selection-enabled><!--multi-selection-->  
308 - <template>  
309 - <div>  
310 - <div class$="{{getClassForItem(selected)}}" on-tap="_selectDataUrl" style$="background: {{_getColorForItem(item)}};">  
311 - <!--<div class$="{{getClassForItem(selected)}}" on-tap="_selectDataUrl">-->  
312 - <span style="display:none;">{{item.url}}</span>  
313 - <div class="pad">  
314 - <div class="primary">{{item.resource_name}}</div>  
315 - <!--<div class="shortText" style="display:none;">{{item.url}}</div>-->  
316 - <div class="longText">  
317 - <template is="dom-repeat" items="{{_stringToArray(item.metas)}}" as="mata">  
318 - <b>{{mata.name}}:</b>  
319 - <span inner-h-t-m-l="{{mata.value}}"></span> <br>  
320 - </template>  
321 - </div>  
322 - </div>  
323 - <!--<iron-icon icon$="[[iconForItem(item)]]"></iron-icon>-->  
324 - <!--<iron-icon icon="bookmark" style$="color: {{_getColorForItem(item)}};"></iron-icon>-->  
325 - <iron-icon icon$="{{_getIconForItem(item)}}" style$="color: {{_getColorForIcon(item)}};"></iron-icon>  
326 - </div>  
327 - </div>  
328 - </template>  
329 - </iron-list>  
330 - </div>  
331 -  
332 - <div id="footer_list">  
333 - <div class="footer_block"><span id="showing"></span> {{shownPrev}} <span id="to"></span> {{shownNext}} <span id="of"></span> {{length}} <span id="datasets"></span></div>  
334 - <div class="footer_block">  
335 - <paper-icon-button id="slider_chevron_left" class="chevron-left" on-click="_onPrevClick" icon="chevron-left"></paper-icon-button>  
336 - <paper-icon-button id="slider_chevron_right" class="chevron-right" on-click="_onNextClick" icon="chevron-right"></paper-icon-button>  
337 - </div>  
338 - <div id="suggested_div" class="footer_block">  
339 - <!--<template is="dom-if" if={{suggestedDatasets}}>-->  
340 - <paper-checkbox checked on-change="showSuggested"><span id="suggested_datasets"></span></paper-checkbox>  
341 - <!--</template>-->  
342 - </div>  
343 - </div>  
344 - </neon-animatable>  
345 -  
346 - <neon-animatable>  
347 - <div id="treemap_container"></div>  
348 -  
349 - <div id="footer_treemap">  
350 - <div class="footer_block"><span id="showing2"></span> {{tLength}} <span id="datasets2"></span></div>  
351 - <div class="footer_block"></div>  
352 - <div class="footer_block"></div>  
353 - </div>  
354 - </neon-animatable>  
355 -  
356 - </neon-animated-pages>  
357 -  
358 - <div id="url">  
359 - <paper-textarea id="selected_url" label="" value={{dataUrl}} error-message={{errorMessage}}></paper-textarea>  
360 - </div>  
361 -  
362 - </paper-material>  
363 -  
364 - </template>  
365 -  
366 - <script>  
367 - HTMLImports.whenReady(function() {  
368 - Polymer({  
369 - is: 'select-dataset-controllet',  
370 - properties: {  
371 - datasets: {  
372 - type: Object,  
373 - value: undefined  
374 - },  
375 - filteredDatasets : {  
376 - type : Array,  
377 - value : undefined  
378 - },  
379 - shownDatasets : {  
380 - type : Array,  
381 - value : undefined  
382 - },  
383 - suggestedDatasets : {  
384 - type : Array,  
385 - value : undefined  
386 - },  
387 -  
388 - providers : {  
389 - type : Array,  
390 - value : undefined  
391 - },  
392 - dataUrl : {  
393 - type : String,  
394 - value : undefined,  
395 - observer : '_fireDataUrl'  
396 - },  
397 - filter : {  
398 - type : String,  
399 - value : "",  
400 - observer : '_filter'  
401 - },  
402 - selected : {  
403 - type : Number,  
404 - value : 0  
405 - },  
406 - prev : {type : Number, value : undefined},  
407 - next : {type : Number, value : undefined},  
408 - shownPrev : {type : Number, value : undefined},  
409 - shownNext : {type : Number, value : undefined},  
410 - length : {type : Number, value : undefined},  
411 - tLength : {type : Number, computed : 'treemapLength(length)'},  
412 - step : {type : Number, value : 20},  
413 - colors : {  
414 - type : Array,  
415 - value : ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd","#ccebc5","#ffed6f"]  
416 - }  
417 - },  
418 -  
419 - listeners: {  
420 - 'datasetexplorer-datalet_data-url': '_selectDataUrl_treeMap'  
421 - },  
422 -  
423 - ready : function() {  
424 - $(this.$.list_container).perfectScrollbar();  
425 -  
426 -// this.$.selected_url.invalid = true;  
427 - },  
428 -  
429 - attached: function() {  
430 - this._resize();  
431 - var that = this;  
432 - window.addEventListener("resize", function() { that._resize(); that._loadTreeMap();});  
433 -  
434 - this.providers = this.datasets["result"]["providers"];  
435 - this.datasets = this.datasets["result"]["datasets"];  
436 -  
437 - if(this.suggestedDatasets) {  
438 - this.tempDatasets = this.datasets;  
439 - this.datasets = this.suggestedDatasets.concat(this.datasets);  
440 - this.$.suggested_div.style.visibility = "visible";  
441 - }  
442 -  
443 - this.filteredDatasets = this.datasets;  
444 -  
445 - this.prev = 1;  
446 - this.next = this.step;  
447 - this.length = this.filteredDatasets.length;  
448 -  
449 - this.shownPrev = Math.min(this.prev, this.length);  
450 - this.shownNext = Math.min(this.next, this.length);  
451 - this.shownDatasets = this.filteredDatasets.slice(this.prev-1, this.next);  
452 -  
453 - this.$.list.scrollTarget = this.ownerDocument.documentElement;  
454 -  
455 - this._translate();  
456 -  
457 - this._loadTreeMap();  
458 - },  
459 -  
460 - _translate : function(){  
461 - this.$.listView.innerHTML = ln["listView_" + ln["localization"]];  
462 - this.$.treeMapView.innerHTML = ln["treeMapView_" + ln["localization"]];  
463 -  
464 - this.$.ddl_provider.setAttribute("label", ln["provider_" + ln["localization"]]);  
465 - this.$.datasets_filter.setAttribute("label", ln["search_" + ln["localization"]]);  
466 -  
467 - this.$.suggested_datasets.innerHTML = ln["suggestedDatasets_" + ln["localization"]];  
468 -  
469 - this.$.showing.innerHTML = ln["showing_" + ln["localization"]];  
470 - this.$.showing2.innerHTML = ln["showing_" + ln["localization"]];  
471 - this.$.to.innerHTML = ln["to_" + ln["localization"]];  
472 - this.$.of.innerHTML = ln["of_" + ln["localization"]];  
473 - this.$.datasets.innerHTML = ln["datasets_" + ln["localization"]];  
474 - this.$.datasets2.innerHTML = ln["datasets_" + ln["localization"]];  
475 -  
476 - this.$.selected_url.setAttribute("label", ln["selectedUrl_" + ln["localization"]]);  
477 - this.errorMessage = ln["wrongUrl_" + ln["localization"]];  
478 - },  
479 -  
480 - showSuggested : function(e) {  
481 - if(e.target.checked)  
482 - this.datasets = this.suggestedDatasets.concat(this.tempDatasets);  
483 - else  
484 - this.datasets = this.tempDatasets;  
485 - this._filter();  
486 - },  
487 -  
488 - _loadTreeMap : function(){  
489 - var h = $("#neon_container").height() - 48;  
490 - var w = $("#neon_container").width();  
491 -  
492 - var data = JSON.stringify({result : {providers: this.providers, datasets: this.filteredDatasets}}).replace(/'/g, "");  
493 -  
494 - if(this.filteredDatasets.length > 0)  
495 - this.$.treemap_container.innerHTML = "<datasetexplorer-datalet data='"+data+"' width=\""+w+"\" height=\""+h+"\" fields='[\"result,datasets,provider_name\",\"result,datasets,organization_name\",\"result,datasets,package_name\",\"result,datasets,resource_name\",\"result,datasets,url\",\"result,datasets,w\",\"result,datasets,metas\"]'></datasetexplorer-datalet>";  
496 - else  
497 - this.$.treemap_container.innerHTML = "";  
498 - },  
499 -  
500 - _filter : function() {  
501 - if(this.filteredDatasets) {  
502 - this.async(function () {  
503 - var ddl_provider = $(this.$.ddl_provider).find("paper-menu")[0].selectedItem;  
504 - var name = ddl_provider.innerHTML.trim();  
505 - var id = this._getIdByProviderName(name);  
506 - this.prev = 1;  
507 - this.next = this.step;  
508 - if (id) {  
509 - //filtered by provider name  
510 - this.filteredDatasets = this.datasets.filter(function (el) {  
511 - return el.provider_name == "p:" + id;  
512 - });  
513 - }  
514 - else {  
515 - this.filteredDatasets = this.datasets;  
516 - }  
517 -  
518 - //filtered by filter  
519 - var filter = this.filter;  
520 - this.filteredDatasets = this.filteredDatasets.filter(function (el) {  
521 - return el.resource_name.toLowerCase().indexOf(filter.toLowerCase()) > -1;  
522 - });  
523 -  
524 - this.length = this.filteredDatasets.length;  
525 -  
526 - this.shownPrev = Math.min(this.prev, this.length);  
527 - this.shownNext = Math.min(this.next, this.length);  
528 - this.shownDatasets = this.filteredDatasets.slice(this.prev - 1, this.next);  
529 -  
530 - $("#list_container").animate({scrollTop: 0}, 0);  
531 -  
532 - this._loadTreeMap();  
533 - }, 0);  
534 - }  
535 - },  
536 -  
537 - _refreshList : function() {  
538 - this.shownDatasets = this.filteredDatasets.slice(this.prev - 1, this.next);  
539 - this.$.header.className = this.$.header.className.replace(" noshadow", "");  
540 - },  
541 -  
542 - _noShadow : function() {  
543 - console.log(this.$.header);  
544 - this.$.header.className += " noshadow";  
545 - },  
546 -  
547 - _clearInput : function() {  
548 - this.$.datasets_filter.value = "";  
549 - },  
550 -  
551 - _getIdByProviderName : function(name) {  
552 - for(var id in this.providers) {  
553 - if (this.providers[id].title == name)  
554 - return this.providers[id].id;  
555 - }  
556 - },  
557 -  
558 -// iconForItem: function(item) {  
559 -// return item ? (item.integer < 50 ? 'star-border' : 'info-outline') : '';  
560 -// },  
561 -  
562 - treemapLength : function(length) {  
563 - var ddl_provider = $(this.$.ddl_provider).find("paper-menu")[0].selectedItem;  
564 - var name = ddl_provider.innerHTML.trim();  
565 - var id = this._getIdByProviderName(name);  
566 -  
567 - if(this.suggestedDatasets && !id)  
568 - return Math.max(length - this.suggestedDatasets.length, 0);  
569 - return length;  
570 - },  
571 -  
572 - _getColorForIcon : function(item) {  
573 - var ddl_provider = $(this.$.ddl_provider).find("paper-menu")[0].selectedItem;  
574 - var name = ddl_provider.innerHTML.trim();  
575 - var id = this._getIdByProviderName(name);  
576 - if (id) {  
577 - return this.colors[0];  
578 - }  
579 - if(!item.provider_name) {  
580 - return "#00BCD4";  
581 - }  
582 - var id = item.provider_name.substring(2, item.provider_name.length);  
583 - var i = this.getProviderById(id) % this.colors.length;  
584 - return this.colors[i];  
585 - },  
586 -  
587 - _getColorForItem : function(item) {  
588 -// var ddl_provider = $(this.$.ddl_provider).find("paper-menu")[0].selectedItem;  
589 -// var name = ddl_provider.innerHTML.trim();  
590 -// var id = this._getIdByProviderName(name);  
591 -// if (id) {  
592 -// return this.colors[0];  
593 -// }  
594 - if(!item.provider_name) {  
595 - return "#FFEB3B";  
596 - }  
597 -// var id = item.provider_name.substring(2, item.provider_name.length);  
598 -// var i = this.getProviderById(id) % this.colors.length;  
599 -// return this.colors[i];  
600 - },  
601 -  
602 - _getIconForItem : function(item) {  
603 - return item.provider_name ? 'bookmark' : 'star';  
604 - },  
605 -  
606 -// _getProviderColor: function(id) {  
607 -// var i = this.getProviderById(id) % this.colors.length;  
608 -// return this.colors[i];  
609 -// },  
610 -  
611 - getClassForItem: function(selected) {  
612 - return selected ? 'item expanded' : 'item';  
613 - },  
614 -  
615 - getProviderById: function(providerId) {  
616 - var i = 0;  
617 - for(var id in this.providers){  
618 - if(this.providers[id].id == providerId)  
619 - return i;  
620 - i++;  
621 - }  
622 - },  
623 -  
624 - _onPrevClick : function(){  
625 - if(this.prev != 1) {  
626 - this.prev -= this.step;  
627 - this.next -= this.step;  
628 -  
629 - this.shownPrev = Math.min(this.prev, this.length);  
630 - this.shownNext = Math.min(this.next, this.length);  
631 - this.shownDatasets = this.filteredDatasets.slice(this.prev - 1, this.next);  
632 - }  
633 - $("#list_container").animate({ scrollTop: 0}, 0);  
634 - },  
635 -  
636 - _onNextClick : function(){  
637 - if(this.next < this.length) {  
638 - this.prev += this.step;  
639 - this.next += this.step;  
640 -  
641 - this.shownPrev = Math.min(this.prev, this.length);  
642 - this.shownNext = Math.min(this.next, this.length);  
643 - this.shownDatasets = this.filteredDatasets.slice(this.prev - 1, this.next);  
644 - }  
645 - $("#list_container").animate({ scrollTop: 0}, 0);  
646 - },  
647 -  
648 - _stringToArray: function(obj) {  
649 - obj = JSON.parse(obj);  
650 - return Object.keys(obj).map(function(key) {  
651 - return {  
652 - name: key,  
653 - value: obj[key]  
654 - };  
655 - });  
656 - },  
657 -  
658 - _toArray: function(obj) {  
659 - return Object.keys(obj).map(function(key) {  
660 - return {  
661 - name: key,  
662 - value: obj[key]  
663 - };  
664 - });  
665 - },  
666 -  
667 - _selectDataUrl : function(){  
668 - this.async(function () {  
669 - if(this.$.list.selectedItem) {  
670 - var url = this.$.list.selectedItem.url;  
671 -  
672 - // Check if CKAN  
673 - var strDatasetPos = url.indexOf('/dataset/');  
674 - var strResourcePos = (strDatasetPos >= 0) ? url.indexOf('/resource/') : -1;  
675 - if (strDatasetPos >= 0 && strResourcePos > strDatasetPos) {  
676 - var urlSegment1 = url.substring(0, strDatasetPos);  
677 - var urlResourceEnd = url.indexOf('/', strResourcePos + 10);  
678 - var resourceId = url.substring(strResourcePos + 10, urlResourceEnd);  
679 - url = urlSegment1 + "/api/action/datastore_search?resource_id=" + resourceId;  
680 - }  
681 -  
682 - // Check if OPENDATASOFT  
683 - var strExploreDatasetPos = url.indexOf('/explore/dataset/');  
684 - if (strExploreDatasetPos >= 0) {  
685 - var urlSegment1 = url.substring(0, strExploreDatasetPos);  
686 - var datasetEnd = url.indexOf(strExploreDatasetPos + 17, '/');  
687 - var datasetId = url.substring(strExploreDatasetPos + 17, datasetEnd >= 0 ? datasetEnd : url.length);  
688 - url = urlSegment1 + '/api/records/1.0/search?dataset=' + datasetId;  
689 - }  
690 -  
691 - this.dataUrl = this._addlimitUrl(url);  
692 - }  
693 - else {  
694 - this.dataUrl = "";  
695 - }  
696 - }, 0);  
697 - },  
698 -  
699 - _selectDataUrl_treeMap : function(e) {  
700 - this.dataUrl = this._addlimitUrl(e.detail.url);  
701 - },  
702 -  
703 - _fireDataUrl : function(){  
704 - this.fire('dataset-selection-controllet_data-url', {url: this.dataUrl});  
705 - },  
706 -  
707 - _addlimitUrl : function(url){  
708 - //CKAN --> action no limit  
709 - if((url.indexOf("api/action") > -1) && !(url.indexOf("limit") > -1))  
710 - {  
711 - url += "&limit=99999";  
712 - }  
713 - //OpenDataSoft --> action no limit  
714 - if((url.indexOf("api/records") > -1) && !(url.indexOf("rows") > -1)){  
715 - url += "&rows=10000";  
716 - }  
717 - return url;  
718 - },  
719 -  
720 - _resize : function(){  
721 - var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16;  
722 - h = h - 64 - 8; //height with page scroller  
723 - $("#select_dataset_container").height(h);  
724 - }  
725 - });  
726 - });  
727 - </script>  
728 -</dom-module>  
729 \ No newline at end of file 0 \ No newline at end of file
demo.html
  View file @8d261aa
@@ -5,21 +5,18 @@ @@ -5,21 +5,18 @@
5 5
6 <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> 6 <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
7 7
  8 + <script type="text/javascript" src="datalets/shared_js/jquery-1.11.2.min.js"></script>
  9 + <script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
  10 +
8 <link rel="import" href="bower_components/iron-component-page/iron-component-page.html"> 11 <link rel="import" href="bower_components/iron-component-page/iron-component-page.html">
9 - <link rel="import" href="bower_components/paper-item/paper-item.html">  
10 - <link rel="import" href="bower_components/paper-dropdown-menu/paper-dropdown-menu.html">  
11 <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html"> 12 <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
12 - <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">  
13 13
14 - <script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>  
15 - <script type="text/javascript" src="datalets/shared_js/jquery-1.11.2.min.js"></script>  
16 <script type="text/javascript" src="docs/js/editarea_0_8_2/edit_area/edit_area_full.js"></script> 14 <script type="text/javascript" src="docs/js/editarea_0_8_2/edit_area/edit_area_full.js"></script>
17 15
18 -  
19 <script type="text/javascript"> 16 <script type="text/javascript">
20 $(document).ready(function () { 17 $(document).ready(function () {
21 editAreaLoader.init({ 18 editAreaLoader.init({
22 - id : "sbiricuda", // textarea id 19 + id : "text_area", // textarea id
23 syntax: "html", // syntax to be uses for highgliting 20 syntax: "html", // syntax to be uses for highgliting
24 start_highlight: true, // to display with highlight mode on start-up 21 start_highlight: true, // to display with highlight mode on start-up
25 replace_tab_by_spaces: 4, 22 replace_tab_by_spaces: 4,
@@ -51,118 +48,115 @@ @@ -51,118 +48,115 @@
51 48
52 var dataletLink = '<link rel="import" href="http://deep.routetopa.eu/deep_1_7/COMPONENTS/datalets/'+e.detail.data.datalet+'/'+e.detail.data.datalet+'.html" /> \n'; 49 var dataletLink = '<link rel="import" href="http://deep.routetopa.eu/deep_1_7/COMPONENTS/datalets/'+e.detail.data.datalet+'/'+e.detail.data.datalet+'.html" /> \n';
53 50
54 - editAreaLoader.setValue("sbiricuda", dataletImport+dataletLink+dataletHTML); 51 + editAreaLoader.setValue("text_area", dataletImport+dataletLink+dataletHTML);
55 } 52 }
56 53
57 </script> 54 </script>
58 55
59 - <style> 56 + <style is="custom-style">
  57 +
  58 + #creator_container {
  59 + width: 100%;
  60 + height: 100%;
  61 + }
  62 +
  63 + #creator_container * {
  64 + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  65 + font-size: 16px;
  66 + line-height: 24px;
  67 + }
  68 +
  69 + #text_container {
  70 + padding: 8px;
  71 + background: #BBDEFB;
  72 +
  73 + margin-top: 8px;
  74 + }
  75 +
  76 + #controllet_iframe {
  77 + height: 100%;
  78 + width: 100%;
  79 + }
  80 +
  81 + #iframe_container {
  82 + border: 2px solid #BBDEFB;
  83 + border-top: 0;
  84 + width: calc(100% - 4px);
  85 + height: 698px;
  86 + }
60 87
61 - body {  
62 - font-family: 'Roboto', sans-serif; 88 + #toolbar {
  89 + background: #2196F3;
63 } 90 }
64 91
65 - #toolbar{  
66 - background: #2196F3 ; 92 + .title {
  93 + font-weight: 700 !important;
67 } 94 }
68 95
69 #logo{ 96 #logo{
70 - width: 56px;  
71 - height: 56px;  
72 - background-image: url("http://spod.routetopa.eu/ow_static/themes/rtpa_matter/images/logo.png");  
73 - background-size: auto 41px; 97 + width: 64px;
  98 + height: 64px;
  99 + background-image: url("http://spod.routetopa.eu/ow_static/themes/spod_theme_matter/images/logo.png");
74 background-repeat: no-repeat; 100 background-repeat: no-repeat;
75 background-position: center center; 101 background-position: center center;
  102 + }
  103 +
  104 + paper-icon-button {
  105 + --paper-icon-button-ink-color: #FFFFFF;
  106 + height: 48px;
  107 + width: 48px;
  108 + padding: 8px;
  109 + }
  110 +
  111 + a {
  112 + color: #FFFFFF;
  113 + text-decoration: none;
  114 + }
  115 + #text_area_container {
  116 + width: 100%;
  117 + height: calc(100vh - 884px);
  118 + min-height: 192px;
76 119
  120 + margin-top: 8px;
  121 + /*background: red;*/
77 } 122 }
  123 +
  124 + #text_area {
  125 + width: calc(100% - 18px);
  126 + height: calc(100% - 18px);
  127 + margin: 0;
  128 + padding: 8px;
  129 + }
  130 +
78 </style> 131 </style>
79 132
80 </head> 133 </head>
81 <body> 134 <body>
82 135
83 - <paper-toolbar id="toolbar">  
84 - <paper-menu-button>  
85 - <paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>  
86 - <paper-menu class="dropdown-content">  
87 - <paper-item><a href="http://routetopa.eu/" target="_blank">ROUTE-TO PA European Project</a></paper-item>  
88 - <paper-item><a href="docs/docs.html" target="_blank">DEEP Documentation</a></paper-item>  
89 - </paper-menu>  
90 - </paper-menu-button>  
91 - <span class="title">DatalEts-Ecosystem Provider - Datalet Creator</span>  
92 - <a href="http://routetopa.eu/" target="_blank"><paper-icon-button id="logo"></paper-icon-button></a>  
93 - </paper-toolbar>  
94 -  
95 - <div class="">  
96 - <p> 136 + <div id="creator_container">
  137 +
  138 + <paper-toolbar id="toolbar">
  139 + <a href="http://routetopa.eu/" target="_blank"><paper-icon-button id="logo" title="ROUTE-TO PA European Project"></paper-icon-button></a>
  140 + <span class="title">DatalEts-Ecosystem Provider - Datalet Creator</span>
  141 + <a href="docs/docs.html" target="_blank"><paper-icon-button icon="description" title="DEEP Documentation"></paper-icon-button></a>
  142 + <a href="http://routetopa.eu/" target="_blank"><paper-icon-button icon="forward" title="ROUTE-TO PA European Project"></paper-icon-button></a>
  143 + </paper-toolbar>
  144 +
  145 + <div id="text_container">
97 Using this page you can create a Datalet, a off-the-shelf, reusable web-component able to load, 146 Using this page you can create a Datalet, a off-the-shelf, reusable web-component able to load,
98 query, filter, and visualise any dataset content (e.g. through HighCharts Javascript library). 147 query, filter, and visualise any dataset content (e.g. through HighCharts Javascript library).
99 Datalet are reusable since they can be placed in every web page, like institutional web-sites, 148 Datalet are reusable since they can be placed in every web page, like institutional web-sites,
100 blogs, forums and so on, without any knowledge on how it effectively is implemented. 149 blogs, forums and so on, without any knowledge on how it effectively is implemented.
101 - </p>  
102 - </div> 150 + </div>
103 151
104 - <iframe style="width:100%; height:62vh" frameborder="0" srcdoc='  
105 - <head>  
106 - <script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>  
107 - <script type="text/javascript" src="datalets/shared_js/jquery-1.11.2.min.js"></script>  
108 - <link rel="import" href="controllets/data-sevc-controllet/data-sevc-controllet.html" />  
109 - <script src="controllets/shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>  
110 - <link rel="stylesheet" href="controllets/shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">  
111 - <script type="text/javascript">  
112 - $(document).ready(function () {  
113 -  
114 - var datasets = [  
115 - {decription:"", name:"Italy - Consuntivo entrate 2009", url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=07843fc3-07e1-4c66-9be4-fed43ca4a26f"},  
116 - {decription:"", name:"Italy - Consuntivo entrate 2010",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=48a4db73-d3d4-4639-bbc2-9c797d0e6cda"},  
117 - {decription:"", name:"Italy - Consuntivo entrate 2011",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=a14cc2fb-0c24-48d7-9370-834045797d89"},  
118 - {decription:"", name:"Italy - Consuntivo entrate 2012",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=fb32fcb6-5e44-4e52-b132-01c6540ddbee"},  
119 - {decription:"", name:"Italy - Consuntivo entrate 2014",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=0cb600fc-19ad-4aaf-9794-1e6ea851840a"},  
120 - {decription:"", name:"Holland - Vestigingen register gemeente Groningen",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=ba554c1f-02a7-4d76-b449-fb9daa1f8bfd"},  
121 - {decription:"", name:"Holland - Woonruimte gemeente Groningen",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=af7b3916-4347-469a-8354-3c2d559bd92f"},  
122 - {decription:"", name:"Ireland - SDCC Traffic Cameras",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52"},  
123 - {decription:"", name:"Ireland - Derelict Site Register",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=fcbee83e-3d3d-4303-a568-24dd33d02adc"},  
124 - {decription:"", name:"Ireland - Dublin City Council Commencement Notices",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=ee00de68-f2e4-482f-a003-3c0561351075"},  
125 - {decription:"", name:"Ireland - Dublin City Council Planning Applications",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=2f4a9d44-b52f-4c8b-a5db-d8f4a676d81e"},  
126 - {decription:"", name:"Ireland - Dun Laoghaire-Rathdown County Council Planning Application 2008-2014",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=c479f061-9638-489d-ac55-0c68765548ff"},  
127 - {decription:"", name:"Ireland - Fingal Council Planning Applications for last 7 years",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=d29a477a-4734-43ef-8002-048c8640d441"},  
128 - {decription:"", name:"Ireland - Planning Register",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=2b23f32d-e27e-4eef-af1e-27e05103df7d"},  
129 - {decription:"", name:"Ireland - Fingal Development Plan 2011-2017 Record of Protected Structures",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=5ea813bc-fdf9-4edb-b3b1-0142b593d5c6"},  
130 - {decription:"", name:"Bubble example",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=0cb600fc-19ad-4aaf-9794-1e6ea851840a"},  
131 - {decription:"", name:"Issy - 3d pie chart", 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"}  
132 - ];  
133 -  
134 - var dsc = document.getElementById("dsc");  
135 - dsc.setAttribute("datasets", JSON.stringify(datasets));  
136 -  
137 - $("#treeMapView").parent().parent().hide();  
138 - window.addEventListener("data-sevc-controllet.dataletCreated", function(e){parent.createHTML(e);});  
139 -  
140 - /*var h = $("#material_container").height() - 48;  
141 - var w = $("#material_container").width();  
142 - console.log($("#div_datasetexplorer"));  
143 - console.log($("#div_datasetexplorer").html());  
144 - $("#div_datasetexplorer").html("CIAO !!");  
145 - console.log($("#div_datasetexplorer").html());  
146 - $("#div_datasetexplorer").html("<datasetexplorer-datalet width=\""+w+"\" height=\""+h+"\" data-url=\"http://spod.routetopa.eu/openwall/api/datasetTree\" fields=\"[\"result,datasets,provider_name\",\"result,datasets,organization_name\",\"result,datasets,package_name\",\"result,datasets,resource_name\",\"result,datasets,url\",\"result,datasets,w\"]\"></datasetexplorer-datalet>");  
147 - console.log($("#div_datasetexplorer").html());*/  
148 - });  
149 - </script>  
150 - </head>  
151 - <body>  
152 - <data-sevc-controllet localization="en" id="dsc" deep-url="http://deep.routetopa.eu/deep_1_7/DEEP/" datalets-list-url="http://deep.routetopa.eu/deep_1_7/DEEP/datalets-list"></data-sevc-controllet>  
153 - </body>  
154 - '>  
155 - </iframe>  
156 -  
157 - <div id="code_area">  
158 - <textarea id="sbiricuda" style="position:relative;width: 100%;min-height: 15vh;max-height: 15vh;" style="" rows="4" cols="50">  
159 -Copy and paste this code to inject the datalet in you page.  
160 - </textarea>  
161 - </div> 152 + <div id="iframe_container">
  153 + <iframe id="controllet_iframe" frameborder="0" src="./controllet.html"></iframe>
  154 + </div>
162 155
163 - <!--<div>  
164 - <textarea style="width: 90%; margin-left:10px; height: 110px" id="code-textarea"></textarea>  
165 - </div>--> 156 + <div id="text_area_container">
  157 + <textarea id="text_area">Copy and paste this code to inject the datalet in you page.</textarea>
  158 + </div>
  159 + </div>
166 160
167 </body> 161 </body>
168 </html> 162 </html>
169 \ No newline at end of file 163 \ No newline at end of file