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 186 <iron-icon class="icon-to" icon="alarm-off"></iron-icon>&nbsp; {{to}}
187 187 </div>
188 188 </div>
189   - <template is="dom-if" if="{{!checkRoomType(roomType)}}">
  189 + <template is="dom-if" if="{{!_checkRoomType(roomType)}}">
190 190 <paper-fab mini icon="assessment" class="assessment" noink></paper-fab>
191 191 </template>
192   - <template is="dom-if" if="{{checkRoomType(roomType)}}">
  192 + <template is="dom-if" if="{{_checkRoomType(roomType)}}">
193 193 <paper-fab mini icon="description" class="description" noink></paper-fab>
194 194 </template>
195 195 </div>
... ... @@ -274,15 +274,15 @@
274 274 this.$.explore.innerHTML = cocreation_room_ln["explore_" + cocreation_room_ln["ln"]];
275 275 },
276 276  
277   - _handleDeleteClick: function(e){
  277 + _handleDeleteClick: function(){
278 278 this.fire("cocreation-paper-card-controllet_delete", {roomId: this.roomId});
279 279 },
280 280  
281   - _onExplore: function(e){
  281 + _onExplore: function(){
282 282 window.location = this.roomUrl;
283 283 },
284 284  
285   - checkRoomType: function(type){
  285 + _checkRoomType: function(type){
286 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 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 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 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 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 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 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 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 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 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 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 0 \ No newline at end of file
demo.html
  View file @8d261aa
... ... @@ -5,21 +5,18 @@
5 5  
6 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 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 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 14 <script type="text/javascript" src="docs/js/editarea_0_8_2/edit_area/edit_area_full.js"></script>
17 15  
18   -
19 16 <script type="text/javascript">
20 17 $(document).ready(function () {
21 18 editAreaLoader.init({
22   - id : "sbiricuda", // textarea id
  19 + id : "text_area", // textarea id
23 20 syntax: "html", // syntax to be uses for highgliting
24 21 start_highlight: true, // to display with highlight mode on start-up
25 22 replace_tab_by_spaces: 4,
... ... @@ -51,118 +48,115 @@
51 48  
52 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 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 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 100 background-repeat: no-repeat;
75 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 131 </style>
79 132  
80 133 </head>
81 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 146 Using this page you can create a Datalet, a off-the-shelf, reusable web-component able to load,
98 147 query, filter, and visualise any dataset content (e.g. through HighCharts Javascript library).
99 148 Datalet are reusable since they can be placed in every web page, like institutional web-sites,
100 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 161 </body>
168 162 </html>
169 163 \ No newline at end of file
... ...