WebCompDev / COMPONENTS

Commit 833ea9a946a5a27c2d0622798d552a568c84521c

Authored by pina
2 parents 5a7b6fc6 09e4db90

Merge branch 'master' of http://service.routetopa.eu:7480/WebCompDev/COMPONENTS

Inline Side-by-side
Showing 9 changed files with 461 additions and 4417 deletions
controllets/create-card-controllet/create-card-controllet.html
  View file @833ea9a
1 -<link rel="import" href="../../bower_components/polymer/polymer.html"/>  
2 -<link rel="import" href="../../bower_components/paper-material/paper-material.html"/>  
3 -<link rel="import" href="../../bower_components/paper-fab/paper-fab.html"/>  
4 -<link rel="import" href="../../bower_components/iron-icons/iron-icons.html"/>  
5 -<link rel="import" href="../../bower_components/paper-input/paper-textarea.html"/> 1 +<link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
  2 +<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
6 3
7 -<link rel="import" href="../../datalets/preview-datalet/preview-datalet.html" />  
8 -<link rel="import" href="../../controllets/paper-card-controllet/paper-card-controllet.html"/> 4 +<link rel="import" href="../../bower_components/polymer/polymer.html"/>
  5 +<link rel="import" href="../../bower_components/paper-material/paper-material.html" />
  6 +<link rel="import" href="../../bower_components/paper-input/paper-input.html">
  7 +<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
  8 +<link rel="import" href="../../bower_components/paper-button/paper-button.html">
  9 +
  10 +<!--per la lingua inportare nell' HEADER-->
  11 +<!--<link rel="localization" href="locales/{ln}.l20n">-->
  12 +<!--<script defer src="/dist/compat/web/l20n.js"></script>-->
  13 +<!--<card_Info "BASE INFO">-->
  14 +<!--<card_Text "TEXT">-->
  15 +<!--<card_Link "LINK">-->
  16 +<!--<card_Preview "PREVIEW">-->
9 17
10 <dom-module id="create-card-controllet"> 18 <dom-module id="create-card-controllet">
11 19
12 <template> 20 <template>
13 - <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">  
14 - <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>  
15 - <style>  
16 - :host {  
17 - display: inline-block;  
18 - margin: 0 8px 8px ;  
19 - font-size: 14px;  
20 - text-align: justify;  
21 - line-height: 10px;  
22 - --paper-fab-background: var(--accent-color);  
23 - font-family: 'Roboto', sans-serif;  
24 - padding-bottom: 30px; 21 +
  22 + <style is="custom-style">
  23 + #create_card_container {
  24 + display: flex;
  25 + height: 100%;
25 width: 100%; 26 width: 100%;
26 - }  
27 27
28 - paper-material {  
29 - background-color: white;  
30 - border-width: 1em;  
31 - padding: 5px;  
32 - margin-bottom: 20px; 28 + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  29 + font-size: 16px;
33 } 30 }
34 31
35 - paper-fab {  
36 - position: relative;  
37 - left: 90%;  
38 - --paper-fab-background:#2196F3; 32 + #create_card_info {
  33 + height: calc(100% - 16px);
  34 + width: 50%;
  35 + margin: 8px 16px 8px 8px;
39 } 36 }
40 37
41 - #content ::content {  
42 - /*padding: 0 16px 8px;*/  
43 - padding: 0 16px 8px;  
44 - font-weight: 300;  
45 - color: var(--secondary-text-color);  
46 - line-height: 24px;  
47 - max-height: 400px;  
48 - position:relative;  
49 - overflow: auto;  
50 - }  
51 - ::content.buttons {  
52 - margin-top: 8px;  
53 - }  
54 - ::content paper-button, ::content paper-icon-button {  
55 - font-weight: 500;  
56 - color: var(--accent-color); 38 + #create_card_content {
  39 + height: calc(100% - 16px);
  40 + width: 50%;
  41 + margin: 8px 8px 8px 16px;
57 } 42 }
58 43
59 - .avatar  
60 - {  
61 - display: inline-block;  
62 - height: 0.7em;  
63 - width: 0.7em;  
64 - border-radius: 50%;  
65 - background: var(--paper-blue-500);  
66 - color: white;  
67 - line-height: 2em;  
68 - font-size: 1.87em; 44 + .input_header {
  45 + height: 32px;
  46 + padding-top: 16px;
  47 + background-color: #B6B6B6;
69 text-align: center; 48 text-align: center;
  49 + font-weight: 700;
70 } 50 }
71 51
72 - .title  
73 - {  
74 - position: relative;  
75 - left: 0px;  
76 - /*top: 0.60vh;  
77 - margin-left: 20px;*/  
78 - }  
79 -  
80 - .big  
81 - {  
82 - font-size: 1.37em;  
83 - color: var(--google-grey-500); 52 + p {
  53 + margin: 16px 8px 0px 8px;
84 } 54 }
85 55
86 - .medium  
87 - {  
88 - font-size: 1em;  
89 - padding-bottom: 0.5em;  
90 - color : #000000; 56 + #create_card_title {
91 font-weight: bold; 57 font-weight: bold;
  58 + color: #2196F3;
  59 + text-align: center;
92 } 60 }
93 61
94 - .small  
95 - {  
96 - font-size: 0.8em;  
97 - padding-top: 10px;  
98 - color: var(--paper-blue-500);  
99 - font-weight: bold; 62 + #create_card_description {
  63 + font-style: italic;
  64 + color: #727272;
  65 + text-align: center;
100 } 66 }
101 67
102 - paper-textarea.custom_textarea{  
103 - /*max-width:40vw;*/ 68 + #create_card_text {
  69 +
104 } 70 }
105 71
106 - div.vertical{  
107 - margin: 20px; 72 + paper-input, paper-textarea {
  73 + height: 48px;
  74 + width: calc(100% - 16px);
  75 + margin: 0px 0px 8px 8px;
  76 + --paper-input-container-focus-color: #2196F3;
108 } 77 }
109 78
110 - ::content #card_preview .modify{  
111 - display: none; 79 + paper-button {
  80 + position: absolute;
  81 + bottom: 16px;
  82 + right: 11px;
  83 +
  84 + height: 48px;
  85 + width: 172px;
  86 + background-color: #00BCD4;
  87 + color: white;
  88 + font-weight: 700;
  89 + padding: 16px;
112 } 90 }
113 91
114 - ::content #card_preview .delete{  
115 - display: none; 92 + paper-button:hover {
  93 + background-color: #00AABF;
  94 +
  95 + box-shadow: 0px 8px 12px #888;
  96 + -webkit-box-shadow: 0px 8px 12px #888;
  97 + -moz-box-shadow: 0px 8px 12px #888;
116 } 98 }
117 99
118 - ::content #card_preview .fullscreen{  
119 - display: none; 100 + paper-button[disabled] {
  101 + background-color: #B6B6B6;
120 } 102 }
  103 + </style>
121 104
  105 + <div id="create_card_container">
122 106
123 - </style> 107 + <paper-material id="create_card_info" elevation="5">
  108 + <div class="input_header">BASE INFO</div>
124 109
125 - <div class="horizontal layout">  
126 -  
127 - <div class="vertical layout" style="width: 60%;">  
128 -  
129 - <div class="horizontal layout">  
130 - <div class="avatar"></div>  
131 - <div class="title">  
132 - <div class="big">Title</div>  
133 - <div class="small">This is the title for your new card. It'll be visualized in the bottom black section.</div>  
134 - </div>  
135 - </div>  
136 -  
137 - <paper-material animated elevation="2">  
138 - <paper-textarea class="custom_textarea" id="cardTitle"  
139 - label=""  
140 - char-counter  
141 - maxlength="25"  
142 - rows="1"  
143 - value="{{cardTitle}}">  
144 -  
145 - </paper-textarea>  
146 - </paper-material>  
147 -  
148 - <template is="dom-if" if="{{checkType(type, 'link')}}">  
149 -  
150 - <div class="horizontal layout">  
151 - <div class="avatar"></div>  
152 - <div class="title">  
153 - <div class="big">Link</div>  
154 - <div class="small">This is the link you want to share.</div>  
155 - </div>  
156 - </div>  
157 -  
158 - <paper-material animated elevation="2">  
159 - <paper-textarea class="custom_textarea" id="link"  
160 - label=""  
161 - auto-validate  
162 - pattern="^(http[s]?:\\/\\/(www\\.)?|ftp:\\/\\/(www\\.)?|www\\.){1}([0-9A-Za-z-\\.@:%_\+~#=]+)+((\\.[a-zA-Z]{2,3})+)(/(.)*)?(\\?(.)*)?"  
163 - error-message="Urls only!"  
164 - value="{{link}}">  
165 -  
166 - </paper-textarea>  
167 - </paper-material> 110 + <paper-input value="{{title}}" maxlength="32" label="title"></paper-input>
168 111
169 - </template> 112 + <paper-input value="{{description}}" maxlength="100" label="description"></paper-input>
  113 +
  114 + <template is="dom-if" if="{{_checkType(type, 'link')}}">
170 115
  116 + <div class="input_header" style="margin-top: 16px;">LINK</div>
171 117
172 - <template is="dom-if" if="{{checkType(type, 'text')}}"> 118 + <paper-input
  119 + id="create_card_link"
  120 + value="{{link}}"
  121 + label="link"
  122 + auto-validate
  123 + pattern="^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$"
  124 + error-message="Invalid link">
  125 + </paper-input>
  126 +
  127 + </template>
173 128
174 - <div class="horizontal layout">  
175 - <div class="avatar"></div>  
176 - <div class="title">  
177 - <div class="big">Text content</div>  
178 - <div class="small">It's the text content of your card. It'll be visualize in the body(yellow top section).</div>  
179 - </div>  
180 - </div> 129 + <template is="dom-if" if="{{_checkType(type, 'text')}}">
181 130
182 - <paper-material animated elevation="2">  
183 - <paper-textarea class="custom_textarea" id="text"  
184 - label=""  
185 - char-counter  
186 - max-rows="50"  
187 - maxlength="1024"  
188 - value="{{text}}"> 131 + <div class="input_header" style="margin-top: 16px;">TEXT</div>
189 132
190 - </paper-textarea>  
191 - </paper-material> 133 + <paper-textarea value="{{text}}" label="text"></paper-textarea>
192 134
193 </template> 135 </template>
194 136
195 - <div class="horizontal layout">  
196 - <div class="avatar"></div>  
197 - <div class="title">  
198 - <div class="big">Comment</div>  
199 - <div class="small">This is a comment you'll see on the bottom of the card.</div>  
200 - </div>  
201 - </div> 137 + <paper-button id="add_button" raised on-click="_addCard">SAVE</paper-button>
  138 + </paper-material>
202 139
203 - <paper-material animated elevation="2">  
204 - <paper-textarea class="custom_textarea" id="comment"  
205 - label=""  
206 - char-counter  
207 - maxlength="100"  
208 - value="{{comment}}"> 140 + <paper-material id="create_card_content" elevation="5">
  141 + <div class="input_header">PREVIEW</div>
209 142
210 - </paper-textarea>  
211 - </paper-material> 143 + <template is="dom-if" if="{{_checkType(type, 'link')}}">
212 144
213 - </div> 145 + <iframe id="create_card_iframe"></iframe>
214 146
215 - <div class="vertical layout" style="width: 40%;"> 147 + </template>
  148 +
  149 + <template is="dom-if" if="{{_checkType(type, 'text')}}">
216 150
217 - <paper-fab mini icon="add-circle" on-click="_handleAddClick"></paper-fab> 151 + <p id ="create_card_title">{{title}}</p>
  152 + <p id ="create_card_description">{{description}}</p>
  153 + <p id ="create_card_text">{{text}}</p>
218 154
219 - <div id="card_preview"></div>  
220 - </div> 155 + </template>
221 156
  157 + </paper-material>
222 158
223 </div> 159 </div>
224 160
225 </template> 161 </template>
226 162
227 - <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>  
228 -  
229 <script> 163 <script>
230 Polymer({ 164 Polymer({
231 is: "create-card-controllet", 165 is: "create-card-controllet",
232 properties: { 166 properties: {
233 type:{ 167 type:{
234 type: String, 168 type: String,
235 - value: "text" 169 + value: undefined//text or link
236 }, 170 },
237 171
238 - cardTitle:{ 172 + title:{//cardTitle
239 type: String, 173 type: String,
240 - value: "Title",  
241 - observer : '_valueChanged' 174 + value: ""
242 }, 175 },
243 - text:{  
244 - type: String,  
245 - value: "Text content",  
246 - observer : '_valueChanged'  
247 - },  
248 - content:{ 176 +
  177 + description:{//comment
249 type: String, 178 type: String,
250 - value: undefined,  
251 - observer : '_valueChanged' 179 + value: ""
252 }, 180 },
253 - comment:{ 181 +
  182 + text:{
254 type: String, 183 type: String,
255 - value: "comment",  
256 - observer : '_valueChanged' 184 + value: ""
257 }, 185 },
258 186
259 - timer :{  
260 - type: Number,  
261 - value : 0 187 + link:{
  188 + type: String,
  189 + value: "",
  190 + observer : '_load'
262 } 191 }
  192 +
263 }, 193 },
264 194
265 - ready: function(){ 195 + ready : function() {
  196 + $(this.$.create_card_info).perfectScrollbar();
  197 + $(this.$.create_card_content).perfectScrollbar();
266 198
267 - this._valueChanged('',''); 199 + var that = this;
  200 + window.addEventListener("resize", function() { that._resize(); });
268 }, 201 },
269 202
270 -  
271 - checkType: function(type, check){  
272 - return (type == check); 203 + attached : function() {
  204 + this.async(function(){this._load();},100);
273 }, 205 },
274 206
275 - _handleAddClick: function(e){  
276 - this.fire('create-card-controllet_add-clicked', {data : this}); 207 + _load : function() {
  208 + var link = this.$$("#create_card_link");
  209 + var iframe = this.$$("#create_card_iframe");
  210 +
  211 + if(link){
  212 + var value = link.value;
  213 +
  214 + if (value.indexOf("http") != 0)
  215 + value = "http://" + value;
  216 +
  217 + if(!link.invalid && value.length > 16) {
  218 + iframe.setAttribute("src", value);
  219 + this._resize();
  220 + }
  221 + }
277 }, 222 },
278 223
279 - _valueChanged: function(oldvalue, newValue) {  
280 - var card = '<paper-card-controllet' +  
281 - ' class="grid-item"' +  
282 - ' width="300"' +  
283 - ' height="300"' +  
284 - ' card-type="'+ this.type + '"' +  
285 - ' comment="'+ this.comment + '"' +  
286 - ' card-title="'+ this.cardTitle + '">';  
287 - if(this.type == 'link'){  
288 - card += '<preview-datalet data-url="'+ this.link + '" url="'+ this.link + '"></preview-datalet>';  
289 - }else{  
290 - card += this.text;  
291 - }  
292 -  
293 - card += '</paper-card-controllet>';  
294 -  
295 - clearTimeout (this.timer);  
296 - //Firefox stuff  
297 - var _this = this;  
298 - this.timer = setTimeout(function(){  
299 - _this.$.card_preview.innerHTML = card;  
300 - }, 1000); 224 + _checkType: function(type, check){
  225 + return (type == check);
  226 + },
301 227
  228 + _addCard: function(){
  229 + this.fire('create-card-controllet_add-clicked', {data : this});//create-card-controllet_data
  230 + },
302 231
  232 + _resize : function(){
  233 + var h = $("#create_card_info").height() -64;
  234 + $("#create_card_iframe").height(h);
303 } 235 }
  236 +
304 }) 237 })
305 </script> 238 </script>
306 239
controllets/create-card-controllet/create-card-controllet_old.html 0 โ†’ 100755
  View file @833ea9a
  1 +<link rel="import" href="../../bower_components/polymer/polymer.html"/>
  2 +<link rel="import" href="../../bower_components/paper-material/paper-material.html"/>
  3 +<link rel="import" href="../../bower_components/paper-fab/paper-fab.html"/>
  4 +<link rel="import" href="../../bower_components/iron-icons/iron-icons.html"/>
  5 +<link rel="import" href="../../bower_components/paper-input/paper-textarea.html"/>
  6 +
  7 +<link rel="import" href="../../datalets/preview-datalet/preview-datalet.html" />
  8 +<link rel="import" href="../../controllets/paper-card-controllet/paper-card-controllet.html"/>
  9 +
  10 +<dom-module id="create-card-controllet">
  11 +
  12 + <template>
  13 + <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
  14 + <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
  15 + <style>
  16 + :host {
  17 + display: inline-block;
  18 + margin: 0 8px 8px ;
  19 + font-size: 14px;
  20 + text-align: justify;
  21 + line-height: 10px;
  22 + --paper-fab-background: var(--accent-color);
  23 + font-family: 'Roboto', sans-serif;
  24 + padding-bottom: 30px;
  25 + width: 100%;
  26 + }
  27 +
  28 + paper-material {
  29 + background-color: white;
  30 + border-width: 1em;
  31 + padding: 5px;
  32 + margin-bottom: 20px;
  33 + }
  34 +
  35 + paper-fab {
  36 + position: relative;
  37 + left: 90%;
  38 + --paper-fab-background:#2196F3;
  39 + }
  40 +
  41 + #content ::content {
  42 + /*padding: 0 16px 8px;*/
  43 + padding: 0 16px 8px;
  44 + font-weight: 300;
  45 + color: var(--secondary-text-color);
  46 + line-height: 24px;
  47 + max-height: 400px;
  48 + position:relative;
  49 + overflow: auto;
  50 + }
  51 + ::content.buttons {
  52 + margin-top: 8px;
  53 + }
  54 + ::content paper-button, ::content paper-icon-button {
  55 + font-weight: 500;
  56 + color: var(--accent-color);
  57 + }
  58 +
  59 + .avatar
  60 + {
  61 + display: inline-block;
  62 + height: 0.7em;
  63 + width: 0.7em;
  64 + border-radius: 50%;
  65 + background: var(--paper-blue-500);
  66 + color: white;
  67 + line-height: 2em;
  68 + font-size: 1.87em;
  69 + text-align: center;
  70 + }
  71 +
  72 + .title
  73 + {
  74 + position: relative;
  75 + left: 0px;
  76 + /*top: 0.60vh;
  77 + margin-left: 20px;*/
  78 + }
  79 +
  80 + .big
  81 + {
  82 + font-size: 1.37em;
  83 + color: var(--google-grey-500);
  84 + }
  85 +
  86 + .medium
  87 + {
  88 + font-size: 1em;
  89 + padding-bottom: 0.5em;
  90 + color : #000000;
  91 + font-weight: bold;
  92 + }
  93 +
  94 + .small
  95 + {
  96 + font-size: 0.8em;
  97 + padding-top: 10px;
  98 + color: var(--paper-blue-500);
  99 + font-weight: bold;
  100 + }
  101 +
  102 + paper-textarea.custom_textarea{
  103 + /*max-width:40vw;*/
  104 + }
  105 +
  106 + div.vertical{
  107 + margin: 20px;
  108 + }
  109 +
  110 + ::content #card_preview .modify{
  111 + display: none;
  112 + }
  113 +
  114 + ::content #card_preview .delete{
  115 + display: none;
  116 + }
  117 +
  118 + ::content #card_preview .fullscreen{
  119 + display: none;
  120 + }
  121 +
  122 +
  123 + </style>
  124 +
  125 + <div class="horizontal layout">
  126 +
  127 + <div class="vertical layout" style="width: 60%;">
  128 +
  129 + <div class="horizontal layout">
  130 + <div class="avatar"></div>
  131 + <div class="title">
  132 + <div class="big">Title</div>
  133 + <div class="small">This is the title for your new card. It'll be visualized in the bottom black section.</div>
  134 + </div>
  135 + </div>
  136 +
  137 + <paper-material animated elevation="2">
  138 + <paper-textarea class="custom_textarea" id="cardTitle"
  139 + label=""
  140 + char-counter
  141 + maxlength="25"
  142 + rows="1"
  143 + value="{{cardTitle}}">
  144 +
  145 + </paper-textarea>
  146 + </paper-material>
  147 +
  148 + <template is="dom-if" if="{{checkType(type, 'link')}}">
  149 +
  150 + <div class="horizontal layout">
  151 + <div class="avatar"></div>
  152 + <div class="title">
  153 + <div class="big">Link</div>
  154 + <div class="small">This is the link you want to share.</div>
  155 + </div>
  156 + </div>
  157 +
  158 + <paper-material animated elevation="2">
  159 + <paper-textarea class="custom_textarea" id="link"
  160 + label=""
  161 + auto-validate
  162 + pattern="^(http[s]?:\\/\\/(www\\.)?|ftp:\\/\\/(www\\.)?|www\\.){1}([0-9A-Za-z-\\.@:%_\+~#=]+)+((\\.[a-zA-Z]{2,3})+)(/(.)*)?(\\?(.)*)?"
  163 + error-message="Urls only!"
  164 + value="{{link}}">
  165 +
  166 + </paper-textarea>
  167 + </paper-material>
  168 +
  169 + </template>
  170 +
  171 +
  172 + <template is="dom-if" if="{{checkType(type, 'text')}}">
  173 +
  174 + <div class="horizontal layout">
  175 + <div class="avatar"></div>
  176 + <div class="title">
  177 + <div class="big">Text content</div>
  178 + <div class="small">It's the text content of your card. It'll be visualize in the body(yellow top section).</div>
  179 + </div>
  180 + </div>
  181 +
  182 + <paper-material animated elevation="2">
  183 + <paper-textarea class="custom_textarea" id="text"
  184 + label=""
  185 + char-counter
  186 + max-rows="50"
  187 + maxlength="1024"
  188 + value="{{text}}">
  189 +
  190 + </paper-textarea>
  191 + </paper-material>
  192 +
  193 + </template>
  194 +
  195 + <div class="horizontal layout">
  196 + <div class="avatar"></div>
  197 + <div class="title">
  198 + <div class="big">Comment</div>
  199 + <div class="small">This is a comment you'll see on the bottom of the card.</div>
  200 + </div>
  201 + </div>
  202 +
  203 + <paper-material animated elevation="2">
  204 + <paper-textarea class="custom_textarea" id="comment"
  205 + label=""
  206 + char-counter
  207 + maxlength="100"
  208 + value="{{comment}}">
  209 +
  210 + </paper-textarea>
  211 + </paper-material>
  212 +
  213 + </div>
  214 +
  215 + <div class="vertical layout" style="width: 40%;">
  216 +
  217 + <paper-fab mini icon="add-circle" on-click="_handleAddClick"></paper-fab>
  218 +
  219 + <div id="card_preview"></div>
  220 + </div>
  221 +
  222 +
  223 + </div>
  224 +
  225 + </template>
  226 +
  227 + <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
  228 +
  229 + <script>
  230 + Polymer({
  231 + is: "create-card-controllet",
  232 + properties: {
  233 + type:{
  234 + type: String,
  235 + value: "text"
  236 + },
  237 +
  238 + cardTitle:{
  239 + type: String,
  240 + value: "Title",
  241 + observer : '_valueChanged'
  242 + },
  243 + text:{
  244 + type: String,
  245 + value: "Text content",
  246 + observer : '_valueChanged'
  247 + },
  248 + content:{
  249 + type: String,
  250 + value: undefined,
  251 + observer : '_valueChanged'
  252 + },
  253 + comment:{
  254 + type: String,
  255 + value: "comment",
  256 + observer : '_valueChanged'
  257 + },
  258 +
  259 + timer :{
  260 + type: Number,
  261 + value : 0
  262 + }
  263 + },
  264 +
  265 + ready: function(){
  266 +
  267 + this._valueChanged('','');
  268 + },
  269 +
  270 +
  271 + checkType: function(type, check){
  272 + return (type == check);
  273 + },
  274 +
  275 + _handleAddClick: function(e){
  276 + this.fire('create-card-controllet_add-clicked', {data : this});
  277 + },
  278 +
  279 + _valueChanged: function(oldvalue, newValue) {
  280 + var card = '<paper-card-controllet' +
  281 + ' class="grid-item"' +
  282 + ' width="300"' +
  283 + ' height="300"' +
  284 + ' card-type="'+ this.type + '"' +
  285 + ' comment="'+ this.comment + '"' +
  286 + ' card-title="'+ this.cardTitle + '">';
  287 + if(this.type == 'link'){
  288 + card += '<preview-datalet data-url="'+ this.link + '" url="'+ this.link + '"></preview-datalet>';
  289 + }else{
  290 + card += this.text;
  291 + }
  292 +
  293 + card += '</paper-card-controllet>';
  294 +
  295 + clearTimeout (this.timer);
  296 + //Firefox stuff
  297 + var _this = this;
  298 + this.timer = setTimeout(function(){
  299 + _this.$.card_preview.innerHTML = card;
  300 + }, 1000);
  301 +
  302 +
  303 + }
  304 + })
  305 + </script>
  306 +
  307 +</dom-module>
0 \ No newline at end of file 308 \ No newline at end of file
controllets/data-sevc-controllet/colors deleted
View file @5a7b6fc
1 -Dark primary #1976D2; /** OW_Control type:color, key:darkPrimaryColor, section:2. Colors, label:1. Dark primary **/  
2 -  
3 -Primary #2196F3; /** OW_Control type:color, key:primaryColor, section:2. Colors, label:2. Primary **/  
4 -  
5 -Light primary #BBDEFB; /** OW_Control type:color, key:lightPrimaryColor, section:2. Colors, label:3. Light primary **/  
6 -  
7 -Text/Icons #FFFFFF; /** OW_Control type:color, key:textIconsColor, section:2. Colors, label:4. Text/Icons **/  
8 -  
9 -Accent #00BCD4; /** OW_Control type:color, key:accentColor, section:2. Colors, label:5. Accent **/  
10 -  
11 -Primary text #212121; /** OW_Control type:color, section:2. Colors, key:textColor, label:6. Text **/  
12 -  
13 -Secondary text #727272; /** OW_Control type:color, section:2. Colors, key:secondaryTextColor, label:7. Secondary text **/  
14 -  
15 -Divider #B6B6B6; /** OW_Control type:color, section:2. Colors, key:dividerColor, label:8. Divider **/  
16 -  
17 -  
18 -  
19 -  
20 -E0E0E0  
21 -  
22 -9E9E9E 0.87  
23 -  
24 -  
25 -  
26 -00AABF  
27 -  
28 -goole colors: {"#3366cc","#dc3912","#ff9900","#109618","#990099","#0099c6","#dd4477","#66aa00","#b82e2e","#316395","#994499","#22aa99","#aaaa11","#6633cc","#e67300","#8b0707","#651067","#329262","#5574a6","#3b3eac","#b77322","#16d620","#b91383","#f4359e","#9c5935","#a9c413","#2a778d","#668d1c","#bea413","#0c5922","#743411"}  
29 -use ['']  
30 -  
31 -  
32 -  
33 -'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif  
34 -  
35 -  
36 -  
37 -a {  
38 - color: #00BCD4 ; /** OW_Control type:color, key:accentColor, section:2. Colors, label:5. Accent **/  
39 - text-decoration: none;  
40 -}  
41 -a:hover {  
42 - color: #2db395;  
43 - text-decoration: underline;  
44 -}  
45 \ No newline at end of file 0 \ No newline at end of file
controllets/data-sevc-controllet/data-sevc-controllet-orig.html deleted
View file @5a7b6fc
1 -<!--  
2 -@license  
3 - The MIT License (MIT)  
4 -  
5 - Copyright (c) 2015 Dipartimento di Informatica - Universit๏ฟฝ di Salerno - Italy  
6 -  
7 - Permission is hereby granted, free of charge, to any person obtaining a copy  
8 - of this software and associated documentation files (the "Software"), to deal  
9 - in the Software without restriction, including without limitation the rights  
10 - to use, copy, modify, merge, publish, distribute, sublicense, and/or sell  
11 - copies of the Software, and to permit persons to whom the Software is  
12 - furnished to do so, subject to the following conditions:  
13 -  
14 - The above copyright notice and this permission notice shall be included in  
15 - all copies or substantial portions of the Software.  
16 -  
17 - THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR  
18 - IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,  
19 - FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE  
20 - AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER  
21 - LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,  
22 - OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN  
23 - THE SOFTWARE.  
24 --->  
25 -  
26 -<!--  
27 -* Developed by :  
28 -* ROUTE-TO-PA Project - grant No 645860. - www.routetopa.eu  
29 -*  
30 --->  
31 -  
32 -<link rel="import" href="../../bower_components/polymer/polymer.html">  
33 -<link rel="import" href="../../bower_components/paper-styles/color.html">  
34 -  
35 -<link rel="import" href="../../bower_components/neon-animation/neon-animated-pages.html">  
36 -<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">  
37 -<link rel="import" href="../../bower_components/neon-animation/neon-animations.html">  
38 -  
39 -<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">  
40 -<link rel="import" href="../../bower_components/paper-input/paper-input.html">  
41 -<link rel="import" href="../../bower_components/paper-material/paper-material.html">  
42 -<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">  
43 -<link rel="import" href="../../bower_components/paper-button/paper-button.html">  
44 -<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">  
45 -<link rel="import" href="../../bower_components/paper-tabs/paper-tab.html">  
46 -<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">  
47 -<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">  
48 -<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">  
49 -<link rel="import" href="../../bower_components/paper-item/paper-item.html">  
50 -<link rel="import" href="../../bower_components/paper-toast/paper-toast.html">  
51 -<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">  
52 -<link rel="import" href="../../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">  
53 -  
54 -<link rel="import" href="../items-list-controllet/item-list-controllet.html">  
55 -<link rel="import" href="../draggable-element-controllet/draggable-element-controllet.html">  
56 -<link rel="import" href="../tree-view-controllet/tree-view-controllet.html">  
57 -<link rel="import" href="../tree-view-multi-table-controllet/tree-view-multi-table-controllet.html">  
58 -<link rel="import" href="../text-element-controllet/text-element-controllet.html">  
59 -<link rel="import" href="../animated-button-container-controllet/animated-button-container-controllet.html">  
60 -<link rel="import" href="../../datalets/datasetexplorer-datalet/datasetexplorer-datalet.html">  
61 -  
62 -<!--  
63 -The `data-sevc-controllet` is a controllet to generate visualization from a dataset accessible through api. A json response is required.  
64 -It's composed by three steps. First, user have to select a datasource to access to a dataset. He can copy and paste/drag and drop an url(an api url with json response) or select  
65 -from select contextual menu an available one. Second, the user selects the fields he want to visualize from a treeview by checking on it. A table preview of selected fields will show  
66 -the currently selected values. Third, the users selects a visualization(datalet) from a slider and drags the previous selected fields in to the input data model fields area. A preview  
67 -is available every time a fields is dragged in the input data model fields area.  
68 -  
69 -Example:  
70 -  
71 - <data-sevc-controllet deep-url="http://192.168.36.128/DatalEts-Ecosystem-Provider/DEEP/"  
72 - datalets-list-url="http://192.168.36.128/DatalEts-Ecosystem-Provider/DEEP/datalets-list"  
73 - datasets='{[{name : 'dataset1', url : dataset1Urls}, ... , {name : 'datasetN', url : datasetNUrls}]'>  
74 - </data-sevc-controllet>  
75 -  
76 -  
77 -@element data-sevc-controllet  
78 -@status beta  
79 -@homepage  
80 -@group controllets  
81 --->  
82 -  
83 -  
84 -<dom-module id="data-sevc-controllet">  
85 - <template>  
86 - <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">  
87 -  
88 - <style is="custom-style">  
89 -  
90 - ::content body {  
91 - font-family: 'Roboto', sans-serif;  
92 - }  
93 -  
94 - .flexchild  
95 - {  
96 - @apply(--layout-flex);  
97 - }  
98 -  
99 - .flex2child  
100 - {  
101 - @apply(--layout-flex-2);  
102 - }  
103 -  
104 - .avatar  
105 - {  
106 - display: inline-block;  
107 - height: 2em;  
108 - width: 2em;  
109 - border-radius: 50%;  
110 - background: var(--paper-blue-500);  
111 - color: white;  
112 - line-height: 2em;  
113 - font-size: 1.87em;  
114 - text-align: center;  
115 - }  
116 -  
117 - .title  
118 - {  
119 - position: relative;  
120 - top: 0.60vh;  
121 - margin-left: 20px;  
122 - }  
123 -  
124 - .big  
125 - {  
126 - font-size: 1.37em;  
127 - color: var(--google-grey-500);  
128 - }  
129 -  
130 - .medium  
131 - {  
132 - font-size: 1em;  
133 - padding-bottom: 0.5em;  
134 - color : #000000;  
135 - font-weight: bold;  
136 - }  
137 -  
138 - .small  
139 - {  
140 - font-size: 0.8em;  
141 - padding-top: 10px;  
142 - color: var(--paper-blue-500);  
143 - font-weight: bold;  
144 - }  
145 -  
146 - paper-input  
147 - {  
148 - width: 80%;  
149 - }  
150 -  
151 - paper-dropdown-menu  
152 - {  
153 - text-align: left;  
154 - margin: auto;  
155 - width: 100%;  
156 - }  
157 -  
158 - ::content paper-menu-button  
159 - {  
160 - display: block;  
161 - width: 100%;  
162 - }  
163 -  
164 - #visualization_slider_area  
165 - {  
166 - padding-top: 20px;  
167 - overflow: visible;  
168 - }  
169 -  
170 - #fields_mapping_area  
171 - {  
172 - min-width: 670px;  
173 - min-height: 180px;  
174 - }  
175 -  
176 - #datalet_placeholder  
177 - {  
178 - height: 60vh;  
179 - min-height: 60vh;  
180 - min-width: 45%;  
181 - margin-top:10px;  
182 - }  
183 -  
184 - .datalet_right_container  
185 - {  
186 - width: 100vh;  
187 - }  
188 -  
189 - .field-mapping-card  
190 - {  
191 - width: 50%;  
192 - float: left;  
193 - }  
194 -  
195 - .toolbar_button  
196 - {  
197 - --iron-icon-height: 32px;  
198 - --iron-icon-width: 32px;  
199 - }  
200 -  
201 - #finish_button  
202 - {  
203 - --iron-icon-height: 32px;  
204 - --iron-icon-width: 32px;  
205 - color: var(--paper-blue-500);  
206 - }  
207 -  
208 - .area_container  
209 - {  
210 - overflow: hidden;  
211 - margin : 0.8em;  
212 - padding : 0.8em;  
213 - }  
214 -  
215 - /*#fields_placeholder{*/  
216 - /*width: 40%;*/  
217 - /*height: 75vh;*/  
218 - /*position: relative;*/  
219 - /*float: left;*/  
220 - /*overflow: auto;*/  
221 - /*}*/  
222 -  
223 - #fields_placeholder{  
224 - width: 100%;  
225 - /*height: 75vh;*/  
226 - /*position: relative;*/  
227 - /*float: right;*/  
228 - /*overflow: auto;*/  
229 - }  
230 -  
231 - #table_fields_container{  
232 - height: 75vh;  
233 - width: 55%;  
234 - position: relative;  
235 - float: left;  
236 - overflow: auto;  
237 - }  
238 -  
239 - #idm_fields_main_container{  
240 - position: relative;  
241 - height: 60vh;  
242 - }  
243 -  
244 - #selectedFields_main_container{  
245 - position: relative;  
246 - height: 60vh;  
247 - }  
248 -  
249 - #idm_layout_main_container{  
250 - position: relative;  
251 - height: 50vh;  
252 - }  
253 -  
254 - #comment{  
255 - position: relative;  
256 - width: 35vw;  
257 - }  
258 -  
259 - paper-menu{  
260 - width: 100%;  
261 - }  
262 -  
263 - paper-dialog {  
264 - position: fixed;  
265 - top: 16px;  
266 - width: auto;  
267 - height: auto;  
268 - overflow: auto;  
269 - padding : 30px;  
270 - }  
271 -  
272 - paper-tabs, paper-toolbar  
273 - {  
274 - background-color: var(--paper-blue-500);  
275 - color: #ffffff;  
276 - box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);  
277 - --paper-tabs-selection-bar-color: var(--google-gray-500);  
278 - }  
279 -  
280 - paper-toolbar paper-tabs  
281 - {  
282 - box-shadow: none;  
283 - }  
284 -  
285 - paper-tabs[noink][no-bar] paper-tab.iron-selected  
286 - {  
287 - background-color: var(--google-gray-500);  
288 - }  
289 -  
290 - paper-tabs[align-bottom]  
291 - {  
292 - box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.15);  
293 - }  
294 - </style>  
295 -  
296 - <iron-ajax  
297 - auto  
298 - id="data_request"  
299 - url={{dataUrl}}  
300 - verbose="true"  
301 - on-response="handleResponseData"  
302 - debounce-duration="300">  
303 - </iron-ajax>  
304 -  
305 - <iron-ajax  
306 - id="datales_list_request"  
307 - auto  
308 - url={{dataletsListUrl}}  
309 - handle-as="json"  
310 - on-response="handleResponseDatalets"  
311 - debounce-duration="300">  
312 - </iron-ajax>  
313 -  
314 - <iron-ajax  
315 - id="selectedDatalet_request"  
316 - url={{deepUrl}}  
317 - verbose="true"  
318 - on-response="handleSelectedDatalet"  
319 - debounce-duration="300">  
320 - </iron-ajax>  
321 -  
322 - <content>  
323 -  
324 - <neon-animated-pages id="pages" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">  
325 -  
326 - <neon-animatable>  
327 -  
328 - <div class="vertical justified layout">  
329 -  
330 - <div class="horizontal layout">  
331 - <div class="avatar" style="margin-left:15px">1</div>  
332 - <div class="title flex">  
333 - <div id="toolbar_title" class="big">Dataset source</div>  
334 - <div id="toolbar_description" class="small">Copy and paste/drag and drop in the textarea the url of datasource</div>  
335 - </div>  
336 - <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button>  
337 - </div>  
338 -  
339 - <paper-material elevation="2" class="area_container">  
340 - <paper-tabs selected="{{DatasourceTabSelected}}">  
341 - <paper-tab>Select data source</paper-tab>  
342 - <paper-tab>Tree Map view</paper-tab>  
343 - <paper-tab>Most popular</paper-tab>  
344 - </paper-tabs>  
345 - <iron-pages selected="{{DatasourceTabSelected}}">  
346 - <div>  
347 - <div class="card-content">  
348 - <paper-dropdown-menu id="datasets-sources" name="datasets-sources" label="Available datasets">  
349 - <paper-menu class="dropdown-content">  
350 - <template is="dom-repeat" items="{{datasets}}" as="dataset" index-as="index">  
351 - <paper-item id="{{index}}" on-tap="_datasourceSelected">{{dataset.name}}</paper-item>  
352 - </template>  
353 - </paper-menu>  
354 - </paper-dropdown-menu>  
355 - <paper-icon-button id="infoButton" on-click="_onInfoClick" icon="info-outline" alt="Information about selected dataset" title="info-button" style="color:#9e9e9e;"></paper-icon-button>  
356 - </div>  
357 -  
358 - <div><img src="static/images/or.png" style="position: relative;left: 50%;padding-top:20px"></div>  
359 -  
360 - <div class="card-content">  
361 - <paper-textarea class="custom_textarea" id="data_url" label="Dataset api data url" floatingLabel value="{{dataUrl}}" on-dragover="_handleDatasourceDragOver"></paper-textarea>  
362 - </div>  
363 -  
364 -  
365 - </div>  
366 - <!--<div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div>-->  
367 - <div>  
368 - <datasetexplorer-datalet class="datasetexplorer" data-url="/openwall/api/datasetTree" fields='["result,provider_name","result,organization_name","result,package_name","result,resource_name","result,url","result,w"]'></datasetexplorer-datalet>  
369 - </div>  
370 - <div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div>  
371 - </iron-pages>  
372 - </paper-material>  
373 -  
374 - </div>  
375 -  
376 - </neon-animatable>  
377 -  
378 - <neon-animatable>  
379 -  
380 - <div class="vertical justified layout">  
381 -  
382 - <div class="horizontal layout">  
383 - <paper-icon-button id="PrevButton" class="toolbar_button x-scope" on-click="_onPrevClick" icon="chevron-left" alt="arrow-back" title="arrow-back"></paper-icon-button>  
384 - <div class="avatar">2</div>  
385 - <div class="title flex">  
386 - <div id="toolbar_title" class="big">Dataset source</div>  
387 - <div id="toolbar_description" class="small">Select the fields you want to use for visualization from tree on the right side. The table on the left side will show you the values related to the selected fields.</div>  
388 - </div>  
389 - <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button>  
390 - </div>  
391 -  
392 - <div class="horizontal layout">  
393 -  
394 - <!--<paper-material elevation="2" id="fields_placeholder" class="area_container flexchild" style="min-width:300px">-->  
395 - <!--<tree-view-controllet id="fields_treeview" root-name="data" opened-path="result,records"></tree-view-controllet>-->  
396 - <!--</paper-material>-->  
397 -  
398 - <!--<paper-material elevation="2" id="table_fields_container" class="area_container flex2child">-->  
399 - <!--<div id="table_component_place_holder"></div>-->  
400 - <!--</paper-material>-->  
401 -  
402 - <!--<paper-material elevation="2" id="fields_placeholder" class="area_container flexchild" style="min-width:300px">-->  
403 - <div id="fields_placeholder">  
404 - <tree-view-multi-table-controllet id="fields_treeview" root-name="data" opened-path="result,records" data-url={{dataUrl}}></tree-view-multi-table-controllet>  
405 - </div>  
406 - <!--</paper-material>-->  
407 -  
408 - </div>  
409 -  
410 - </div>  
411 -  
412 - </neon-animatable>  
413 -  
414 - <neon-animatable>  
415 -  
416 - <div class="vertical justified layout">  
417 -  
418 - <div class="horizontal layout">  
419 - <paper-icon-button id="PrevButton" class="toolbar_button x-scope" on-click="_onPrevClick" icon="chevron-left" alt="arrow-back" title="arrow-back"></paper-icon-button>  
420 - <div class="avatar">3</div>  
421 - <div class="title flex">  
422 - <div id="toolbar_title" class="big">Data mapping</div>  
423 - <div id="toolbar_description" class="small">Select the visualization by clicking on the button(a window will appear with all available visualization).After, drag and drop the selected fields into datalet parameters area. A preview will be shown on the right side.</div>  
424 - </div>  
425 - <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button>  
426 - </div>  
427 -  
428 -  
429 - <div class="horizontal layout">  
430 -  
431 - <div class="">  
432 - <paper-material elevation="0" id="visualization_slider_area"></paper-material>  
433 - <paper-material elevation="2" id="fields_mapping_area" class="area_container">  
434 -  
435 - <div id="selectedFields_main_container" class="field-mapping-card">  
436 - <div class="title">  
437 - <div class="medium">Selected fields</div>  
438 - </div>  
439 - <paper-material elevation="2" id="selectedFields_container" class="area_container"></paper-material>  
440 - </div>  
441 -  
442 - <div id="idm_fields_main_container" class="field-mapping-card">  
443 - <div class="title">  
444 - <div class="medium">Datalet fields</div>  
445 - </div>  
446 - <paper-material elevation="2" id="datalet_idm_fields_container" class="area_container"></paper-material>  
447 - </div>  
448 - </paper-material>  
449 - </div>  
450 -  
451 - <div id="datalet_placeholder"></div>  
452 -  
453 - </div>  
454 -  
455 - </div>  
456 -  
457 - </neon-animatable>  
458 -  
459 - <neon-animatable>  
460 - <div class="vertical justified layout">  
461 -  
462 - <div class="horizontal layout">  
463 - <paper-icon-button id="PrevButton" class="toolbar_button x-scope" on-click="_onPrevClick" icon="chevron-left" alt="arrow-back" title="arrow-back"></paper-icon-button>  
464 - <div class="avatar">4</div>  
465 - <div class="title flex">  
466 - <div id="toolbar_title" class="big">Finalize visualization</div>  
467 - <div id="toolbar_description" class="small">Assign the values for layout parameters (e.g. title for you visualization) and look at the final visualization. You can also add a comment if you are in the private room. </div>  
468 - </div>  
469 - <paper-icon-button id="finish_button" on-click="_onFinish" icon="add-circle" alt="Conforms the creation" title="finish"></paper-icon-button>  
470 - </div>  
471 -  
472 - <div class="horizontal layout">  
473 - <div style="margin-top: 10px;">  
474 - <div class="title">  
475 - <div class="medium">Layout fields</div>  
476 - </div>  
477 - <paper-material elevation="2" id="idm_layout_main_container" class="area_container">  
478 - <paper-material elevation="2" id="idm_layout_container" class="area_container"></paper-material>  
479 - </paper-material>  
480 -  
481 - <div id="comment">  
482 - <paper-textarea class="custom_textarea" id="commentArea" label="Max 100 characters comment" maxlength="100"></paper-textarea>  
483 - </div>  
484 -  
485 - </div>  
486 -  
487 - <div id="datalet_placeholder_2" style="min-width: 45%;margin-top: 10px;"></div>  
488 -  
489 - </div>  
490 - </div>  
491 -  
492 - </neon-animatable>  
493 -  
494 - </neon-animated-pages>  
495 -  
496 - <paper-toast id="message" text=""></paper-toast>  
497 -  
498 - <paper-dialog id="infoDialog">  
499 - <h2 id="infoDialogTitle"></h2>  
500 - <paper-dialog-scrollable id="infoDialogContent">  
501 - </paper-dialog-scrollable>  
502 - </paper-dialog>  
503 -  
504 - </content>  
505 - </template>  
506 -  
507 - <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>  
508 - <script src="../../../DEEPCLIENT/js/deepClient.js"></script>  
509 -  
510 - <script>  
511 -  
512 - Polymer({  
513 -  
514 - is : 'data-sevc-controllet',  
515 -  
516 - /**  
517 - * Received when the user selects a datalet from slider.  
518 - *  
519 - * @event items-list-controllet_item-selected  
520 - */  
521 -  
522 - /**  
523 - * Received when the user drags a selected fields in to one of the source input data model field  
524 - *  
525 - * @event draggable-element-controllet_content-dragged  
526 - */  
527 -  
528 - /**  
529 - * Received when the user selects one field from treeview controllet  
530 - *  
531 - * @event treeview-controllet-fileds-selected  
532 - */  
533 -  
534 - /**  
535 - * Received when the user drags a selected fields in to one of the source input data model field  
536 - *  
537 - * @event draggable-element-controllet_content-dragged  
538 - */  
539 -  
540 - /**  
541 - * Received when the user change text value of the selected datalet layout inputs  
542 - *  
543 - * @event text-element-controllet_content-changed  
544 - */  
545 -  
546 - /**  
547 - * Fired when the user press to finish button. At this event are attached all information about the visualization currently created  
548 - *  
549 - * @event data-sevc-controllet.dataletCreated  
550 - */  
551 -  
552 - listeners : {  
553 - 'items-list-controllet_item-selected' : '_dataletSelected',  
554 - 'draggable-element-controllet_content-dragged' : '_fieldsMapped',  
555 - 'tree-view-controllet_selected-fields' : '_fieldsSelected',  
556 - 'text-element-controllet_content-changed' : '_textElementChanged',  
557 - 'datasetexplorer-datalet_data-url': '_selectDataUrl_treeMap'  
558 - },  
559 -  
560 - properties : {  
561 -  
562 - entryAnimation : {  
563 - type : String,  
564 - value : ""  
565 - },  
566 -  
567 - exitAnimation : {  
568 - type : String,  
569 - value : ""  
570 - },  
571 -  
572 - selected : {  
573 - type : Number,  
574 - value : 0  
575 - },  
576 -  
577 - /**  
578 - * It represents the data url from CKAN api  
579 - *  
580 - * @attribute dataUrl  
581 - * @type string  
582 - * @default 'null'  
583 - */  
584 - dataUrl : {  
585 - type : String,  
586 - value : undefined,  
587 - observer : '_dataUrlChanged'  
588 - },  
589 - /**  
590 - * It represents the DEEP url to get information about the datalets  
591 - *  
592 - * @attribute deepUrl  
593 - * @type string  
594 - * @default 'null'  
595 - */  
596 - deepUrl : {  
597 - type : String,  
598 - value : undefined  
599 - },  
600 - /**  
601 - * It's used to store the list of datalets returned from DEEP  
602 - *  
603 - * @attribute datalets_list  
604 - * @type Array  
605 - * @default empty  
606 - */  
607 - datalets_list : {  
608 - type : Array ,  
609 - value : []  
610 - },  
611 - /**  
612 - * It's used to store the selected datalet. It will be set when the controllet get the event of selection by item slider (items-list-controllet_item-selected)  
613 - *  
614 - * @attribute selectedDatalet  
615 - * @type String  
616 - * @default ''  
617 - */  
618 - selectedDatalet : {  
619 - type : String,  
620 - value : undefined  
621 - },  
622 - /**  
623 - * It's used to store the list of selected fields by user  
624 - *  
625 - * @attribute selectedFields  
626 - * @type Array  
627 - * @default empty  
628 - */  
629 - selectedFields : {  
630 - type : Array,  
631 - value : undefined  
632 - },  
633 - /**  
634 - * It contains all attributes for the datalet preset. It'll be used when the controllet is called to modify an exsting datalet.  
635 - */  
636 - dataletPreset:{  
637 - type: Object,  
638 - value: undefined  
639 - },  
640 - /**  
641 - * It's used to store the params to give to datalet. This kind of params will not processed by selection step  
642 - *  
643 - * @attribute paramsFields  
644 - * @type Object  
645 - * @default empty  
646 - */  
647 - paramsFields:{  
648 - type: Object,  
649 - value: undefined  
650 - },  
651 - /**  
652 - * It's used to store the tab index in the first pass  
653 - *  
654 - * @attribute DatasourceTabSelected  
655 - * @type Number  
656 - * @default 0  
657 - */  
658 - DatasourceTabSelected : {  
659 - type : Number,  
660 - value : 0  
661 - },  
662 - /**  
663 - * It's used to store the datasets to show in the contexual menu  
664 - *  
665 - * @attribute datasets  
666 - * @type Array  
667 - * @default empty  
668 - */  
669 - datasets :  
670 - {  
671 - type : Array,  
672 - value : []  
673 - }  
674 - },  
675 - /**  
676 - * It is called after the element๏ฟฝs template has been stamped and all elements inside the element๏ฟฝs local DOM have been configured (with values bound from parents, deserialized attributes, or else default values) and had their ready method called.  
677 - * In this phase the scrollbar will be initialized  
678 - *  
679 - * @method handleResponseData  
680 - *  
681 - * @param {Event} e  
682 - */  
683 -  
684 - ready : function(){  
685 -  
686 -// $(this.$.fields_placeholder).perfectScrollbar();  
687 - $(this.$.selectedFields_main_container).perfectScrollbar();  
688 - $(this.$.idm_fields_main_container).perfectScrollbar();  
689 - $(this.$.idm_layout_main_container).perfectScrollbar();  
690 - $(this.$.table_fields_container).perfectScrollbar();  
691 -  
692 - if(this.dataletPreset != undefined) {  
693 - this.$.data_url.value = this.dataletPreset['data-url'];  
694 - this.selected = 1;  
695 - }  
696 -  
697 - //Fiefox force :O  
698 - var table_params ={  
699 - component : "datatable-datalet",  
700 - params :{  
701 - 'data-url' : this.dataUrl  
702 - },  
703 - fields : [],  
704 - placeHolder : this.$.table_component_place_holder  
705 - };  
706 -  
707 - ComponentService.deep_url = this.deepUrl;  
708 - ComponentService.getComponent(table_params);  
709 - },  
710 - /**  
711 - * Utility function to inject datalet in a placeholder  
712 - */  
713 - injectDatalet: function(place_holder){  
714 -  
715 - var datalet_params ={  
716 - component : this.selectedDatalet,  
717 - params : this.paramsFields,  
718 - fields : this.selectedFields,  
719 - placeHolder : place_holder  
720 - };  
721 - ComponentService.deep_url = this.deepUrl;  
722 - ComponentService.getComponent(datalet_params);  
723 - },  
724 -  
725 - /**  
726 - * Callback to parse the data requested when dataUrl change its value  
727 - *  
728 - * @method handleResponseData  
729 - *  
730 - * @param {Event} e  
731 - */  
732 - handleResponseData : function(e){  
733 - this.$.fields_treeview.setAttribute("json-data", JSON.stringify(e.detail.response));  
734 - this.$.fields_treeview.setAttribute("preselected-fields", JSON.stringify(this.selectedFields));  
735 - this.$.fields_treeview.ready();//chrome  
736 - },  
737 -  
738 - /**  
739 - * Callback to parse the components response object  
740 - *  
741 - * @method handleResponseDatalets  
742 - *  
743 - * @param {Event} e  
744 - */  
745 - handleResponseDatalets : function(e){  
746 - this.datalets_list = new Array();  
747 - for(var i=0;i < e.detail.response.length;i++){  
748 - var datalet_info = { name : e.detail.response[i].name ,  
749 - image : e.detail.response[i].url + e.detail.response[i].name + ".png"  
750 - };  
751 -  
752 - this.datalets_list.push(datalet_info);  
753 - }  
754 -  
755 - if(this.selectedDatalet == undefined)  
756 - this.$.visualization_slider_area.innerHTML = '<animated-button-container-controllet height="300" width="450" icon="assessment" icon-width="64" icon-height="64" background-button-color="#2196F3">' +  
757 - '<items-list-controllet' +  
758 - ' replace-string="-datalet"' +  
759 - ' items=\'' + JSON.stringify(this.datalets_list) + '\'>' +  
760 - '</items-list-controllet>' +  
761 - '</animated-button-container-controllet>';  
762 - else  
763 - this.$.visualization_slider_area.innerHTML = '<animated-button-container-controllet height="300" width="450" icon="assessment" icon-width="64" icon-height="64" background-button-color="#2196F3">' +  
764 - '<items-list-controllet' +  
765 - ' replace-string="-datalet"' +  
766 - ' selected-card=\'' + this.selectedDatalet + '\'' +  
767 - ' items=\'' + JSON.stringify(this.datalets_list) + '\'>' +  
768 - '</items-list-controllet>' +  
769 - '</animated-button-container-controllet>';  
770 -  
771 - },  
772 - /**  
773 - * Callback to dataset selection from list in the phase three. When a datalet is selected this function will build a bundle of box items, based on the datalet input data model,  
774 - * to allow user to drag the fields, from the selected fields box, and create a new visualization.  
775 - *  
776 - * @method handleSelectedDatalet  
777 - *  
778 - * @param {Event} e  
779 - */  
780 - handleSelectedDatalet : function(e){  
781 -  
782 - var response = e.detail.response;  
783 - this.$.datalet_idm_fields_container.innerHTML = "";  
784 - this.$.idm_layout_container.innerHTML = "";  
785 -  
786 - var input;  
787 - var layouts = jQuery.extend(true, {}, response.idm.inputs.layouts);  
788 -  
789 - if(response.idm.inputs.input.constructor == Object) {  
790 - if(response.idm.inputs.input.selection == "*")  
791 - {  
792 - var fields = this.$.selectedFields_container.querySelectorAll('draggable-element-controllet');  
793 - input = response.idm.inputs.input;  
794 - response.idm.inputs.input = new Array();  
795 - for(var i=0;i<fields.length;i++){  
796 - var newInput = jQuery.extend(true, {}, input);  
797 - newInput.name = input.name + ' ' + (i + 1);  
798 - response.idm.inputs.input.push(newInput);  
799 - }  
800 - }  
801 - }  
802 -  
803 - var heading;  
804 - var id;  
805 -  
806 - for(var i =0; i < response.idm.inputs.input.length; i++) {  
807 - var html = '<draggable-element-controllet is-target="true" ';  
808 - input = response.idm.inputs.input[i];  
809 -  
810 - heading = ' heading="' + input.name + '"';  
811 - id = ' id="' + (i + 1) + '"';  
812 -  
813 - html += heading + id;  
814 - html += ' description="' + input.description + '"' +  
815 - ' number="' + (i + 1) + '"';  
816 -  
817 - if(this.selectedFields != undefined) {  
818 - if(this.selectedFields[i] != undefined) {  
819 - html += ' value="' + this.selectedFields[i] + '"' +  
820 - ' label="' + this.selectedFields[i].split(",")[this.selectedFields[i].split(",").length - 1] + '"';  
821 - }  
822 - }  
823 -  
824 - html += '></draggable-element-controllet>';  
825 - this.$.datalet_idm_fields_container.innerHTML += html;  
826 -  
827 - }  
828 -  
829 - if(layouts.input != undefined) {  
830 - if(layouts.input.constructor == Object){  
831 - layouts.input = new Array(jQuery.extend(true, {}, layouts.input));  
832 - }  
833 -  
834 - html = '<text-element-controllet ';  
835 - for (var i = 0; i < layouts.input.length; i++) {  
836 - html += '<text-element-controllet heading="' + layouts.input[i].name + '" ' +  
837 - 'description="' + layouts.input[i].description + '" ' +  
838 - 'number="' + (i + 1) + '" ';  
839 - if(this.dataletPreset != undefined){  
840 - html += 'value="' + this.dataletPreset[Object.keys(this.dataletPreset)[(i + 1)]] + '"';  
841 - }  
842 -  
843 - html += '></text-element-controllet>';  
844 - }  
845 - this.$.idm_layout_container.innerHTML = html;  
846 - }  
847 -  
848 - if(this.selectedFields != undefined) this.generateDataletPreview();  
849 -  
850 - },  
851 - /**  
852 - * Generate the datalet preview when user mapped fields. it even retrieves the value of layout inputs values.  
853 - *  
854 - * @method generateDataletPreview  
855 - */  
856 - generateDataletPreview : function(){  
857 -  
858 - var input_mapped_fields = this.$.datalet_idm_fields_container.querySelectorAll('draggable-element-controllet[is-target=true]');  
859 - this.selectedFields = Array();  
860 -  
861 - for (var i = 0; i < input_mapped_fields.length; i++) {  
862 - if (input_mapped_fields[i].value != "") {  
863 - this.selectedFields.push(input_mapped_fields[i].value);  
864 - }  
865 - }  
866 -  
867 - var input_layouts_fields = this.$.idm_layout_container.querySelectorAll('text-element-controllet');  
868 - this.paramsFields = {'data-url' : this.dataUrl};  
869 -  
870 - for (var i = 0; i < input_layouts_fields.length; i++) {  
871 - if (input_layouts_fields[i].value != "") {  
872 - this.paramsFields[input_layouts_fields[i].heading] = input_layouts_fields[i].value;  
873 - }  
874 - }  
875 -  
876 - this.injectDatalet(this.$.datalet_placeholder);  
877 -  
878 - },  
879 - /**  
880 - * Validate the current pass in order to access to next one.  
881 - *  
882 - * @method validateCurrentPass  
883 - *  
884 - * @param {Number} next_selected_pass  
885 - */  
886 - validateCurrentPass : function(next_selected_pass){  
887 -  
888 - switch(next_selected_pass){  
889 - case 0:  
890 - this.$.data_url.value = "";  
891 - this.$.fields_treeview.setAttribute("json-data", null);  
892 - this.$.fields_treeview.setAttribute("preselected-fields", null);  
893 - this.$.fields_treeview.ready();//chrome  
894 - return true;  
895 - case 1:  
896 - var x = this.$.fields_treeview.getAttribute("json-data");  
897 - if(this.$.data_url.value == undefined || this.$.fields_treeview.getAttribute('json-data') == "null" || this.$.fields_treeview.getAttribute('json-data') == null){  
898 - this.$.message.text = "You have to select a dataset to access to pass 2. It's possible that the data you selected are not available.";  
899 - this.$.message.show();  
900 - return false;  
901 - }else{  
902 - return true;  
903 - }  
904 -  
905 - case 2:  
906 - if(this.selectedFields == undefined || this.selectedFields.length == 0){  
907 - this.$.message.text = "You have to select a set of fields to access to pass 3.";  
908 - this.$.message.show();  
909 - return false;  
910 - }else{  
911 - this.$.datalet_placeholder_2.innerHTML = "";  
912 - if(this.selectedDatalet != undefined) this.injectDatalet(this.$.datalet_placeholder);  
913 - return true;  
914 - }  
915 - case 3:  
916 - if(this.paramsFields == undefined){  
917 - this.$.message.text = "You have to select a datalet and map the selected fields to datalets fields(by drag and drop) to access to pass 4.";  
918 - this.$.message.show();  
919 - return false;  
920 - }else{  
921 - this.$.datalet_placeholder.innerHTML = "";  
922 - this.injectDatalet(this.$.datalet_placeholder_2);  
923 - return true;  
924 - }  
925 - }  
926 -  
927 - },  
928 - /**  
929 - * Callback for manage the previous pass button  
930 - *  
931 - * @method _onPrevClick  
932 - *  
933 - */  
934 - _onPrevClick : function() {  
935 - if(!this.validateCurrentPass(this.selected === 0 ? 0 : (this.selected - 1))) return;  
936 -  
937 - this.entryAnimation = 'slide-from-left-animation';  
938 - this.exitAnimation = 'slide-right-animation';  
939 - this.selected = this.selected === 0 ? 0 : (this.selected - 1);  
940 - },  
941 - /**  
942 - * Callback to manage the next pass button  
943 - *  
944 - * @method _onNextClick  
945 - *  
946 - */  
947 - _onNextClick : function() {  
948 -  
949 - if(!this.validateCurrentPass(this.selected === 3 ? 3 : (this.selected + 1))) return;  
950 -  
951 - this.entryAnimation = 'slide-from-right-animation';  
952 - this.exitAnimation = 'slide-left-animation';  
953 - this.selected = this.selected === 3 ? 3 : (this.selected + 1);  
954 - },  
955 - /**  
956 - * Callback to manage InfoButton click to give user information about the selected dataset  
957 - *  
958 - */  
959 - _onInfoClick : function(){  
960 -  
961 - this.$.infoDialog.open();  
962 -  
963 - },  
964 - /**  
965 - * Callback related to datasource selection from select menu  
966 - *  
967 - * @method _datasourceSelected  
968 - *  
969 - * @param {Event} e  
970 - */  
971 - _datasourceSelected : function(e){  
972 -  
973 - this.$.data_url.value = this.datasets[parseInt(e.target.id)].url;  
974 - this.$.infoDialogTitle.innerHTML = this.datasets[parseInt(e.target.id)].name;  
975 - this.$.infoDialogContent.innerHTML = this.datasets[parseInt(e.target.id)].description;  
976 -  
977 - },  
978 - /**  
979 - * Callback related to data url change  
980 - *  
981 - * @method _dataUrlChanged  
982 - *  
983 - * @param {Event} e  
984 - */  
985 - _dataUrlChanged : function(newValue, oldValue){  
986 - this.$.data_request.generateRequest();  
987 - },  
988 - /**  
989 - * Callback related to event 'items-slider-controllet_item-selected' fired by items-slider-controllet when the user selects a datalet  
990 - *  
991 - * @method _dataletSelected  
992 - *  
993 - * @param {Event} e  
994 - */  
995 - _dataletSelected : function(e){  
996 - this.selectedDatalet = e.detail.datalet;  
997 - this.$.selectedDatalet_request.url = this.deepUrl + e.detail.datalet;  
998 - this.$.selectedDatalet_request.generateRequest();  
999 -  
1000 - },  
1001 - /**  
1002 - * Callback related to event 'treeview-controllet-fileds-selected' fired by treeview-controllet when the user selects a field  
1003 - *  
1004 - * @method _fieldsSelected  
1005 - *  
1006 - * @param {Event} e  
1007 - */  
1008 - _fieldsSelected : function(e){  
1009 -  
1010 - this.selectedFields = e.detail.fields;  
1011 - this.$.selectedFields_container.innerHTML = "";  
1012 - for(var i=0;i<e.detail.fields.length;i++) {  
1013 - this.$.selectedFields_container.innerHTML += '<draggable-element-controllet identifier="' + e.detail.fields[i] +  
1014 - '" label="' + e.detail.fields[i].split(",")[e.detail.fields[i].split(",").length -1] +  
1015 - '"></draggable-element-controllet><br>';  
1016 - }  
1017 -  
1018 - var table_params ={  
1019 - component : "datatable-datalet",  
1020 - params :{  
1021 - 'data-url' : this.dataUrl  
1022 - },  
1023 - fields : e.detail.fields,  
1024 - placeHolder : this.$.table_component_place_holder  
1025 - };  
1026 -  
1027 - ComponentService.deep_url = this.deepUrl;  
1028 - ComponentService.getComponent(table_params);  
1029 -  
1030 -  
1031 - },  
1032 - /**  
1033 - * Callback related to event 'draggable-element-controllet_content-dragged' fired by draggable-element-controllet when the user drags a selected field in to input data model field  
1034 - *  
1035 - * @method _fieldsMapped  
1036 - *  
1037 - * @param {Event} e  
1038 - */  
1039 - _fieldsMapped : function(e){  
1040 -  
1041 - this.generateDataletPreview();  
1042 -  
1043 - },  
1044 - /**  
1045 - * Callback related to event 'text-element-controllet_content-changed' fired by text-element-controllet when the user change the value of text  
1046 - *  
1047 - * @method _textElementChanged  
1048 - *  
1049 - * @param {Event} e  
1050 - */  
1051 - _textElementChanged : function(e){  
1052 - if(this.selected == 3) {  
1053 - this.generateDataletPreview();  
1054 - this.$.datalet_placeholder.innerHTML = "";  
1055 - this.injectDatalet(this.$.datalet_placeholder_2);  
1056 - }  
1057 - },  
1058 - /**  
1059 - * Callback related to the drag operation in the dataUrl input area. It's used to delete previous value.  
1060 - *  
1061 - * @method _handleDatasourceDragOver  
1062 - *  
1063 - * @param {Event} e  
1064 - */  
1065 - _handleDatasourceDragOver : function(e){  
1066 - this.$.data_url.value = "";  
1067 - },  
1068 - /**  
1069 - * Callback related to the finish button.  
1070 - *  
1071 - * @method _onFinish  
1072 - *  
1073 - * @param {Event} e  
1074 - */  
1075 - _onFinish : function(e){  
1076 -  
1077 - if((this.selectedFields.length == 0) || this.selectedDatalet == ""){  
1078 - this.$.message.text = "You have to map the selected fields with datalets fields(by dragging) and select a datalet to export a new visualization.";  
1079 - this.$.message.show();  
1080 - return;  
1081 - }  
1082 -  
1083 - var data = {  
1084 - dataUrl : this.dataUrl,  
1085 - params : this.paramsFields,  
1086 - fields : this.selectedFields,  
1087 - datalet : this.selectedDatalet,  
1088 - comment : this.$.commentArea.value,  
1089 - staticData : JSON.stringify(this.$.datalet_placeholder_2.children[1].behavior.data)  
1090 - }  
1091 -  
1092 - this.fire('data-sevc-controllet.dataletCreated', {data : data});  
1093 -  
1094 - },  
1095 -  
1096 - //tree map  
1097 - _selectDataUrl_treeMap : function(e){  
1098 - var url = e.detail.url;  
1099 -// url = url.split('/');  
1100 -// var index = url.indexOf('resource')  
1101 -// if (index != -1) { // ckan  
1102 -// var resourceId = url[index + 1];  
1103 -// url = "http://ckan.routetopa.eu/api/action/datastore_search?resource_id=" + resourceId;  
1104 -//  
1105 -// } else  
1106 -// url = "sorry, data provider not supported yet";  
1107 -  
1108 - this.dataUrl = url;  
1109 - this.DatasourceTabSelected=0;  
1110 - },  
1111 -  
1112 - });  
1113 -  
1114 - </script>  
1115 -  
1116 -</dom-module>  
1117 \ No newline at end of file 0 \ No newline at end of file
controllets/data-sevc-controllet/data-sevc-controllet_2.html deleted
View file @5a7b6fc
1 -<!--  
2 -@license  
3 - The MIT License (MIT)  
4 -  
5 - Copyright (c) 2015 Dipartimento di Informatica - Universitร  di Salerno - Italy  
6 -  
7 - Permission is hereby granted, free of charge, to any person obtaining a copy  
8 - of this software and associated documentation files (the "Software"), to deal  
9 - in the Software without restriction, including without limitation the rights  
10 - to use, copy, modify, merge, publish, distribute, sublicense, and/or sell  
11 - copies of the Software, and to permit persons to whom the Software is  
12 - furnished to do so, subject to the following conditions:  
13 -  
14 - The above copyright notice and this permission notice shall be included in  
15 - all copies or substantial portions of the Software.  
16 -  
17 - THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR  
18 - IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,  
19 - FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE  
20 - AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER  
21 - LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,  
22 - OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN  
23 - THE SOFTWARE.  
24 --->  
25 -  
26 -<!--  
27 -* Developed by :  
28 -* ROUTE-TO-PA Project - grant No 645860. - www.routetopa.eu  
29 -*  
30 --->  
31 -  
32 -<link rel="import" href="../../bower_components/polymer/polymer.html">  
33 -<link rel="import" href="../../bower_components/paper-styles/color.html">  
34 -  
35 -<link rel="import" href="../../bower_components/neon-animation/neon-animated-pages.html">  
36 -<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">  
37 -<link rel="import" href="../../bower_components/neon-animation/neon-animations.html">  
38 -  
39 -<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">  
40 -<link rel="import" href="../../bower_components/paper-input/paper-input.html">  
41 -<link rel="import" href="../../bower_components/paper-material/paper-material.html">  
42 -<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">  
43 -<link rel="import" href="../../bower_components/paper-button/paper-button.html">  
44 -<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">  
45 -<link rel="import" href="../../bower_components/paper-tabs/paper-tab.html">  
46 -<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">  
47 -<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">  
48 -<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">  
49 -<link rel="import" href="../../bower_components/paper-item/paper-item.html">  
50 -<link rel="import" href="../../bower_components/paper-toast/paper-toast.html">  
51 -<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">  
52 -<link rel="import" href="../../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">  
53 -  
54 -<link rel="import" href="../items-slider-controllet/items-slider-controllet.html">  
55 -<link rel="import" href="../draggable-element-controllet/draggable-element-controllet.html">  
56 -<link rel="import" href="../tree-view-controllet/tree-view-controllet.html">  
57 -<link rel="import" href="../text-element-controllet/text-element-controllet.html">  
58 -  
59 -<!--  
60 -The `data-sevc-controllet` is a controllet to generate visualization from a dataset accessible through api. A json response is required.  
61 -It's composed by three steps. First, user have to select a datasource to access to a dataset. He can copy and paste/drag and drop an url(an api url with json response) or select  
62 -from select contextual menu an available one. Second, the user selects the fields he want to visualize from a treeview by checking on it. A table preview of selected fields will show  
63 -the currently selected values. Third, the users selects a visualization(datalet) from a slider and drags the previous selected fields in to the input data model fields area. A preview  
64 -is available every time a fields is dragged in the input data model fields area.  
65 -  
66 -Example:  
67 -  
68 - <data-sevc-controllet deep-url="http://192.168.36.128/DatalEts-Ecosystem-Provider/DEEP/"  
69 - datalets-list-url="http://192.168.36.128/DatalEts-Ecosystem-Provider/DEEP/datalets-list"  
70 - datasets='{[{name : 'dataset1', url : dataset1Urls}, ... , {name : 'datasetN', url : datasetNUrls}]'>  
71 - </data-sevc-controllet>  
72 -  
73 -  
74 -@element data-sevc-controllet  
75 -@status beta  
76 -@homepage  
77 -@group controllets  
78 --->  
79 -  
80 -  
81 -<dom-module id="data-sevc-controllet">  
82 - <template>  
83 - <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">  
84 -  
85 - <style is="custom-style">  
86 -  
87 - ::content body {  
88 - font-family: 'Roboto', sans-serif;  
89 - }  
90 -  
91 - .flexchild  
92 - {  
93 - @apply(--layout-flex);  
94 - }  
95 -  
96 - .flex2child  
97 - {  
98 - @apply(--layout-flex-2);  
99 - }  
100 -  
101 - .avatar  
102 - {  
103 - display: inline-block;  
104 - height: 2em;  
105 - width: 2em;  
106 - border-radius: 50%;  
107 - background: var(--paper-blue-500);  
108 - color: white;  
109 - line-height: 2em;  
110 - font-size: 1.87em;  
111 - text-align: center;  
112 - }  
113 -  
114 - .title  
115 - {  
116 - position: relative;  
117 - top: 0.60vh;  
118 - margin-left: 20px;  
119 - }  
120 -  
121 - .big  
122 - {  
123 - font-size: 1.37em;  
124 - color: var(--google-grey-500);  
125 - }  
126 -  
127 - .medium  
128 - {  
129 - font-size: 1em;  
130 - padding-bottom: 0.5em;  
131 - color : #000000;  
132 - font-weight: bold;  
133 - }  
134 -  
135 - .small  
136 - {  
137 - font-size: 0.8em;  
138 - padding-top: 10px;  
139 - color: var(--paper-blue-500);  
140 - font-weight: bold;  
141 - }  
142 -  
143 - paper-input  
144 - {  
145 - width: 80%;  
146 - }  
147 -  
148 - paper-dropdown-menu  
149 - {  
150 - text-align: left;  
151 - margin: auto;  
152 - width: 100%;  
153 - }  
154 -  
155 - ::content paper-menu-button  
156 - {  
157 - display: block;  
158 - width: 100%;  
159 - }  
160 -  
161 - #visualization_slider_area  
162 - {  
163 - /*min-width: 670px;  
164 - min-height: 180px;*/  
165 - padding: 0;  
166 - }  
167 -  
168 - #fields_mapping_area  
169 - {  
170 - min-width: 670px;  
171 - min-height: 180px;  
172 - }  
173 -  
174 - #datalet_placeholder  
175 - {  
176 - height: 60vh;  
177 - min-height: 60vh;  
178 -  
179 - }  
180 -  
181 - .datalet_right_container  
182 - {  
183 - width: 100vh;  
184 - }  
185 -  
186 - .field-mapping-card  
187 - {  
188 - width: 50%;  
189 - float: left;  
190 - }  
191 -  
192 - .toolbar_button  
193 - {  
194 - --iron-icon-height: 32px;  
195 - --iron-icon-width: 32px;  
196 - }  
197 -  
198 - #finish_button  
199 - {  
200 - --iron-icon-height: 32px;  
201 - --iron-icon-width: 32px;  
202 - color: var(--paper-blue-500);  
203 - }  
204 -  
205 - .area_container  
206 - {  
207 - overflow: hidden;  
208 - margin : 0.8em;  
209 - padding : 0.8em;  
210 - }  
211 -  
212 - #fields_placeholder{  
213 - width: 40%;  
214 - height: 75vh;  
215 - position: relative;  
216 - float: left;  
217 - overflow: auto;  
218 - }  
219 -  
220 - #table_fields_container{  
221 - height: 75vh;  
222 - width: 55%;  
223 - position: relative;  
224 - float: left;  
225 - overflow: auto;  
226 - }  
227 -  
228 - paper-tabs, paper-toolbar  
229 - {  
230 - background-color: var(--paper-blue-500);  
231 - color: #ffffff;  
232 - box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);  
233 - }  
234 -  
235 - paper-toolbar paper-tabs  
236 - {  
237 - box-shadow: none;  
238 - --paper-tabs-selection-bar-color : var(--google-gray-500);  
239 - }  
240 -  
241 - paper-tabs[noink][no-bar] paper-tab.iron-selected  
242 - {  
243 - background-color: var(--google-gray-500);  
244 - }  
245 -  
246 - paper-tabs[align-bottom]  
247 - {  
248 - box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.15);  
249 - }  
250 -  
251 - #idm_fields_main_container{  
252 - position: relative;  
253 - height: 60vh;  
254 - }  
255 -  
256 - #selectedFields_main_container{  
257 - position: relative;  
258 - height: 60vh;  
259 - }  
260 -  
261 - #idm_layout_main_container{  
262 - position: relative;  
263 - height: 50vh;  
264 - }  
265 -  
266 - #comment{  
267 - position: relative;  
268 - width: 35vw;  
269 - }  
270 -  
271 - paper-menu{  
272 - width: 100%;  
273 - }  
274 -  
275 - paper-dialog {  
276 - position: fixed;  
277 - top: 16px;  
278 - width: auto;  
279 - height: auto;  
280 - overflow: auto;  
281 - padding : 30px;  
282 - }  
283 -  
284 - </style>  
285 -  
286 - <iron-ajax  
287 - auto  
288 - id="data_request"  
289 - url={{dataUrl}}  
290 - verbose="true"  
291 - on-response="handleResponseData"  
292 - debounce-duration="300">  
293 - </iron-ajax>  
294 -  
295 - <iron-ajax  
296 - id="datales_list_request"  
297 - auto  
298 - url={{dataletsListUrl}}  
299 - handle-as="json"  
300 - on-response="handleResponseDatalets"  
301 - debounce-duration="300">  
302 - </iron-ajax>  
303 -  
304 - <iron-ajax  
305 - id="selectedDatalet_request"  
306 - url={{deepUrl}}  
307 - verbose="true"  
308 - on-response="handleSelectedDatalet"  
309 - debounce-duration="300">  
310 - </iron-ajax>  
311 -  
312 - <content>  
313 -  
314 - <neon-animated-pages id="pages" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">  
315 -  
316 - <neon-animatable>  
317 -  
318 - <div class="vertical justified layout">  
319 -  
320 - <div class="horizontal layout">  
321 - <div class="avatar" style="margin-left:15px">1</div>  
322 - <div class="title flex">  
323 - <div id="toolbar_title" class="big">Dataset source</div>  
324 - <div id="toolbar_description" class="small">Copy and paste/drag and drop in the textarea the url of datasource</div>  
325 - </div>  
326 - <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button>  
327 - </div>  
328 -  
329 - <paper-material elevation="2" class="area_container">  
330 - <paper-tabs selected="{{DatasourceTabSelected}}">  
331 - <paper-tab>Select data source</paper-tab>  
332 - <paper-tab>Most popular</paper-tab>  
333 - <paper-tab>Search</paper-tab>  
334 - </paper-tabs>  
335 - <iron-pages selected="{{DatasourceTabSelected}}">  
336 - <div>  
337 - <div class="card-content">  
338 - <paper-dropdown-menu id="datasets-sources" name="datasets-sources" label="Available datasets">  
339 - <paper-menu class="dropdown-content">  
340 - <template is="dom-repeat" items="{{datasets}}" as="dataset" index-as="index">  
341 - <paper-item id="{{index}}" on-tap="_datasourceSelected">{{dataset.name}}</paper-item>  
342 - </template>  
343 - </paper-menu>  
344 - </paper-dropdown-menu>  
345 - <paper-icon-button id="infoButton" on-click="_onInfoClick" icon="info-outline" alt="Information about selected dataset" title="info-button" style="color:#9e9e9e;"></paper-icon-button>  
346 - </div>  
347 -  
348 - <div><img src="static/images/or.png" style="position: relative;left: 50%;padding-top:20px"></div>  
349 -  
350 - <div class="card-content">  
351 - <paper-textarea class="custom_textarea" id="data_url" label="Dataset api data url" floatingLabel value="{{dataUrl}}" on-dragover="_handleDatasourceDragOver"></paper-textarea>  
352 - </div>  
353 -  
354 -  
355 - </div>  
356 - <div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div>  
357 - <div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div>  
358 - </iron-pages>  
359 - </paper-material>  
360 -  
361 - </div>  
362 -  
363 - </neon-animatable>  
364 -  
365 - <neon-animatable>  
366 -  
367 - <div class="vertical justified layout">  
368 -  
369 - <div class="horizontal layout">  
370 - <paper-icon-button id="PrevButton" class="toolbar_button x-scope" on-click="_onPrevClick" icon="chevron-left" alt="arrow-back" title="arrow-back"></paper-icon-button>  
371 - <div class="avatar">2</div>  
372 - <div class="title flex">  
373 - <div id="toolbar_title" class="big">Dataset source</div>  
374 - <div id="toolbar_description" class="small">Copy and paste/drag and drop in the textarea the url of datasource</div>  
375 - </div>  
376 - <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button>  
377 - </div>  
378 -  
379 - <div class="horizontal layout">  
380 -  
381 - <paper-material elevation="2" id="fields_placeholder" class="area_container flexchild" style="min-width:300px">  
382 - <tree-view-controllet id="fields_treeview" root-name="data" opened-path="result,records"></tree-view-controllet>  
383 - </paper-material>  
384 -  
385 - <paper-material elevation="2" id="table_fields_container" class="area_container flex2child">  
386 - <div id="table_component_place_holder"></div>  
387 - </paper-material>  
388 -  
389 - </div>  
390 -  
391 - </div>  
392 -  
393 - </neon-animatable>  
394 -  
395 - <neon-animatable style="height:100vh">  
396 -  
397 - <div class="vertical justified layout">  
398 -  
399 - <div class="horizontal layout">  
400 - <paper-icon-button id="PrevButton" class="toolbar_button x-scope" on-click="_onPrevClick" icon="chevron-left" alt="arrow-back" title="arrow-back"></paper-icon-button>  
401 - <div class="avatar">3</div>  
402 - <div class="title flex">  
403 - <div id="toolbar_title" class="big">Data mapping</div>  
404 - <div id="toolbar_description" class="small">Select the visualization from the slider, drag and drop the selected fields in visualization parameter area, customize the visualization if you need</div>  
405 - </div>  
406 - <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button>  
407 - </div>  
408 -  
409 -  
410 - <div class="horizontal layout">  
411 -  
412 - <div class="">  
413 - <paper-material elevation="2" id="visualization_slider_area" class="area_container"></paper-material>  
414 - <paper-material elevation="2" id="fields_mapping_area" class="area_container">  
415 -  
416 - <div id="selectedFields_main_container" class="field-mapping-card">  
417 - <div class="title">  
418 - <div class="medium">Selected fields</div>  
419 - </div>  
420 - <paper-material elevation="2" id="selectedFields_container" class="area_container"></paper-material>  
421 - </div>  
422 -  
423 - <div id="idm_fields_main_container" class="field-mapping-card">  
424 - <div class="title">  
425 - <div class="medium">Datalet fields</div>  
426 - </div>  
427 - <paper-material elevation="2" id="datalet_idm_fields_container" class="area_container"></paper-material>  
428 - </div>  
429 - </paper-material>  
430 - </div>  
431 -  
432 - <div id="datalet_placeholder" style="min-width: 45%;margin-top:10px;"></div>  
433 -  
434 - </div>  
435 -  
436 - </div>  
437 -  
438 - </neon-animatable>  
439 -  
440 - <neon-animatable>  
441 - <div class="vertical justified layout">  
442 -  
443 - <div class="horizontal layout">  
444 - <paper-icon-button id="PrevButton" class="toolbar_button x-scope" on-click="_onPrevClick" icon="chevron-left" alt="arrow-back" title="arrow-back"></paper-icon-button>  
445 - <div class="avatar">4</div>  
446 - <div class="title flex">  
447 - <div id="toolbar_title" class="big">Finalize visualization</div>  
448 - <div id="toolbar_description" class="small">Assign the values for label parameters (e.g. title for you visualization).</div>  
449 - </div>  
450 - <paper-icon-button id="finish_button" on-click="_onFinish" icon="add-circle" alt="Conforms the creation" title="finish"></paper-icon-button>  
451 - </div>  
452 -  
453 - <div class="horizontal layout">  
454 - <div style="margin-top: 10px;">  
455 - <div class="title">  
456 - <div class="medium">Layout fields</div>  
457 - </div>  
458 - <paper-material elevation="2" id="idm_layout_main_container" class="area_container">  
459 - <paper-material elevation="2" id="idm_layout_container" class="area_container"></paper-material>  
460 - </paper-material>  
461 -  
462 - <div id="comment">  
463 - <paper-textarea class="custom_textarea" id="commentArea" label="Max 100 character comment" maxlength="100"></paper-textarea>  
464 - </div>  
465 -  
466 - </div>  
467 -  
468 - <div id="datalet_placeholder_2" style="min-width: 45%;margin-top: 10px;"></div>  
469 -  
470 - </div>  
471 - </div>  
472 -  
473 - </neon-animatable>  
474 -  
475 - </neon-animated-pages>  
476 -  
477 - <paper-toast id="message" text=""></paper-toast>  
478 -  
479 - <paper-dialog id="infoDialog">  
480 - <h2 id="infoDialogTitle"></h2>  
481 - <paper-dialog-scrollable id="infoDialogContent">  
482 - </paper-dialog-scrollable>  
483 - </paper-dialog>  
484 -  
485 - </content>  
486 - </template>  
487 -  
488 - <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>  
489 - <script src="../../../DEEPCLIENT/js/deepClient.js"></script>  
490 -  
491 - <script>  
492 -  
493 - Polymer({  
494 -  
495 - is : 'data-sevc-controllet',  
496 -  
497 - /**  
498 - * Received when the user selects a datalet from slider.  
499 - *  
500 - * @event items-slider-controllet_item-selected  
501 - */  
502 -  
503 - /**  
504 - * Received when the user drags a selected fields in to one of the source input data model field  
505 - *  
506 - * @event draggable-element-controllet_content-dragged  
507 - */  
508 -  
509 - /**  
510 - * Received when the user selects one field from treeview controllet  
511 - *  
512 - * @event treeview-controllet-fileds-selected  
513 - */  
514 -  
515 - /**  
516 - * Received when the user drags a selected fields in to one of the source input data model field  
517 - *  
518 - * @event draggable-element-controllet_content-dragged  
519 - */  
520 -  
521 - /**  
522 - * Received when the user change text value of the selected datalet layout inputs  
523 - *  
524 - * @event text-element-controllet_content-changed  
525 - */  
526 -  
527 - /**  
528 - * Fired when the user press to finish button. At this event are attached all information about the visualization currently created  
529 - *  
530 - * @event data-sevc-controllet.dataletCreated  
531 - */  
532 -  
533 - listeners : {  
534 - 'items-slider-controllet_item-selected' : '_dataletSelected',  
535 - 'draggable-element-controllet_content-dragged' : '_fieldsMapped',  
536 - 'tree-view-controllet_selected-fields' : '_fieldsSelected',  
537 - 'text-element-controllet_content-changed' : '_textElementChanged'  
538 - },  
539 -  
540 - properties : {  
541 -  
542 - entryAnimation : {  
543 - type : String,  
544 - value : ""  
545 - },  
546 -  
547 - exitAnimation : {  
548 - type : String,  
549 - value : ""  
550 - },  
551 -  
552 - selected : {  
553 - type : Number,  
554 - value : 0  
555 - },  
556 -  
557 - /**  
558 - * It represents the data url from CKAN api  
559 - *  
560 - * @attribute dataUrl  
561 - * @type string  
562 - * @default 'null'  
563 - */  
564 - dataUrl : {  
565 - type : String,  
566 - value : undefined,  
567 - observer : '_dataUrlChanged'  
568 - },  
569 - /**  
570 - * It represents the DEEP url to get information about the datalets  
571 - *  
572 - * @attribute deepUrl  
573 - * @type string  
574 - * @default 'null'  
575 - */  
576 - deepUrl : {  
577 - type : String,  
578 - value : undefined  
579 - },  
580 - /**  
581 - * It's used to store the list of datalets returned from DEEP  
582 - *  
583 - * @attribute datalets_list  
584 - * @type Array  
585 - * @default empty  
586 - */  
587 - datalets_list : {  
588 - type : Array ,  
589 - value : []  
590 - },  
591 - /**  
592 - * It's used to store the selected datalet. It will be set when the controllet get the event of selection by item slider (items-slider-controllet_item-selected)  
593 - *  
594 - * @attribute selectedDatalet  
595 - * @type String  
596 - * @default ''  
597 - */  
598 - selectedDatalet : {  
599 - type : String,  
600 - value : undefined  
601 - },  
602 - /**  
603 - * It's used to store the list of selected fields by user  
604 - *  
605 - * @attribute selectedFields  
606 - * @type Array  
607 - * @default empty  
608 - */  
609 - selectedFields : {  
610 - type : Array,  
611 - value : undefined  
612 - },  
613 - /**  
614 - * It contains all attributes for the datalet preset. It'll be used when the controllet is called to modify an exsting datalet.  
615 - */  
616 - dataletPreset:{  
617 - type: Object,  
618 - value: undefined  
619 - },  
620 - /**  
621 - * It's used to store the params to give to datalet. This kind of params will not processed by selection step  
622 - *  
623 - * @attribute paramsFields  
624 - * @type Object  
625 - * @default empty  
626 - */  
627 - paramsFields:{  
628 - type: Object,  
629 - value: {}  
630 - },  
631 - /**  
632 - * It's used to store the tab index in the first pass  
633 - *  
634 - * @attribute DatasourceTabSelected  
635 - * @type Number  
636 - * @default 0  
637 - */  
638 - DatasourceTabSelected : {  
639 - type : Number,  
640 - value : 0  
641 - },  
642 - /**  
643 - * It's used to store the datasets to show in the contexual menu  
644 - *  
645 - * @attribute datasets  
646 - * @type Array  
647 - * @default empty  
648 - */  
649 - datasets :  
650 - {  
651 - type : Array,  
652 - value : []  
653 - }  
654 - },  
655 - /**  
656 - * It is called after the elementย’s template has been stamped and all elements inside the elementย’s local DOM have been configured (with values bound from parents, deserialized attributes, or else default values) and had their ready method called.  
657 - * In this phase the scrollbar will be initialized  
658 - *  
659 - * @method handleResponseData  
660 - *  
661 - * @param {Event} e  
662 - */  
663 -  
664 - ready : function(){  
665 -  
666 - $(this.$.fields_placeholder).perfectScrollbar();  
667 - $(this.$.selectedFields_main_container).perfectScrollbar();  
668 - $(this.$.idm_fields_main_container).perfectScrollbar();  
669 - $(this.$.idm_layout_main_container).perfectScrollbar();  
670 - $(this.$.table_fields_container).perfectScrollbar();  
671 -  
672 - if(this.dataletPreset != undefined) {  
673 - this.$.data_url.value = this.dataletPreset['data-url'];  
674 - this.selected = 1;  
675 - }  
676 - },  
677 - /**  
678 - * Utility function to inject datalet in a placeholder  
679 - */  
680 - injectDatalet: function(place_holder){  
681 -  
682 - var datalet_params ={  
683 - component : this.selectedDatalet,  
684 - params : this.paramsFields,  
685 - fields : this.selectedFields,  
686 - placeHolder : place_holder  
687 - };  
688 - ComponentService.deep_url = this.deepUrl;  
689 - ComponentService.getComponent(datalet_params);  
690 - },  
691 -  
692 - /**  
693 - * Callback to parse the data requested when dataUrl change its value  
694 - *  
695 - * @method handleResponseData  
696 - *  
697 - * @param {Event} e  
698 - */  
699 - handleResponseData : function(e){  
700 - this.$.fields_treeview.setAttribute("json-data", JSON.stringify(e.detail.response));  
701 - this.$.fields_treeview.setAttribute("preselected-fields", JSON.stringify(this.selectedFields));  
702 - this.$.fields_treeview.ready();//chrome  
703 - },  
704 -  
705 - /**  
706 - * Callback to parse the components response object  
707 - *  
708 - * @method handleResponseDatalets  
709 - *  
710 - * @param {Event} e  
711 - */  
712 - handleResponseDatalets : function(e){  
713 - this.datalets_list = new Array();  
714 - for(var i=0;i < e.detail.response.length;i++){  
715 - var datalet_info = { name : e.detail.response[i].name ,  
716 - image : e.detail.response[i].url + e.detail.response[i].name + ".png"  
717 - };  
718 -  
719 - this.datalets_list.push(datalet_info);  
720 - }  
721 -  
722 - if(this.selectedDatalet == undefined)  
723 - this.$.visualization_slider_area.innerHTML = '<items-slider-controllet items=\'' + JSON.stringify(this.datalets_list) + '\'' +  
724 - '\'></items-slider-controllet>';  
725 - else  
726 - this.$.visualization_slider_area.innerHTML = '<items-slider-controllet items=\'' + JSON.stringify(this.datalets_list) + '\'' +  
727 - 'selected-card=\'' + this.selectedDatalet + '\'></items-slider-controllet>';  
728 -  
729 - },  
730 - /**  
731 - * Callback to dataset selection from list in the phase three. When a datalet is selected this function will build a bundle of box items, based on the datalet input data model,  
732 - * to allow user to drag the fields, from the selected fields box, and create a new visualization.  
733 - *  
734 - * @method handleSelectedDatalet  
735 - *  
736 - * @param {Event} e  
737 - */  
738 - handleSelectedDatalet : function(e){  
739 -  
740 - var response = e.detail.response;  
741 - this.$.datalet_idm_fields_container.innerHTML = "";  
742 - this.$.idm_layout_container.innerHTML = "";  
743 -  
744 - var input;  
745 - var layouts = jQuery.extend(true, {}, response.idm.inputs.layouts);  
746 -  
747 - if(response.idm.inputs.input.constructor == Object) {  
748 - if(response.idm.inputs.input.selection == "*")  
749 - {  
750 - var fields = this.$.selectedFields_container.querySelectorAll('draggable-element-controllet');  
751 - input = response.idm.inputs.input;  
752 - response.idm.inputs.input = new Array();  
753 - for(var i=0;i<fields.length;i++){  
754 - var newInput = jQuery.extend(true, {}, input);  
755 - newInput.name = input.name + ' ' + (i + 1);  
756 - response.idm.inputs.input.push(newInput);  
757 - }  
758 - }  
759 - }  
760 -  
761 - var heading;  
762 - var id;  
763 -  
764 - for(var i =0; i < response.idm.inputs.input.length; i++) {  
765 - var html = '<draggable-element-controllet is-target="true" ';  
766 - input = response.idm.inputs.input[i];  
767 -  
768 - heading = ' heading="' + input.name + '"';  
769 - id = ' id="' + (i + 1) + '"';  
770 -  
771 - html += heading + id;  
772 - html += ' description="' + input.description + '"' +  
773 - ' number="' + (i + 1) + '"';  
774 -  
775 - if(this.selectedFields != undefined) {  
776 - if(this.selectedFields[i] != undefined) {  
777 - html += ' value="' + this.selectedFields[i] + '"' +  
778 - ' label="' + this.selectedFields[i].split(",")[this.selectedFields[i].split(",").length - 1] + '"';  
779 - }  
780 - }  
781 -  
782 - html += '></draggable-element-controllet>';  
783 - this.$.datalet_idm_fields_container.innerHTML += html;  
784 -  
785 - }  
786 -  
787 - if(layouts.input != undefined) {  
788 - if(layouts.input.constructor == Object){  
789 - layouts.input = new Array(jQuery.extend(true, {}, layouts.input));  
790 - }  
791 -  
792 - html = '<text-element-controllet ';  
793 - for (var i = 0; i < layouts.input.length; i++) {  
794 - html += '<text-element-controllet heading="' + layouts.input[i].name + '" ' +  
795 - 'description="' + layouts.input[i].description + '" ' +  
796 - 'number="' + (i + 1) + '" ';  
797 - if(this.dataletPreset != undefined){  
798 - html += 'value="' + this.dataletPreset[Object.keys(this.dataletPreset)[(i + 1)]] + '"';  
799 - }  
800 -  
801 - html += '></text-element-controllet>';  
802 - }  
803 - this.$.idm_layout_container.innerHTML = html;  
804 - }  
805 -  
806 - if(this.selectedFields != undefined) this.generateDataletPreview();  
807 -  
808 - },  
809 - /**  
810 - * Generate the datalet preview when user mapped fields. it even retrieves the value of layout inputs values.  
811 - *  
812 - * @method generateDataletPreview  
813 - */  
814 - generateDataletPreview : function(){  
815 -  
816 - var input_mapped_fields = this.$.datalet_idm_fields_container.querySelectorAll('draggable-element-controllet[is-target=true]');  
817 - this.selectedFields = Array();  
818 -  
819 - for (var i = 0; i < input_mapped_fields.length; i++) {  
820 - if (input_mapped_fields[i].value != "") {  
821 - this.selectedFields.push(input_mapped_fields[i].value);  
822 - }  
823 - }  
824 -  
825 - var input_layouts_fields = this.$.idm_layout_container.querySelectorAll('text-element-controllet');  
826 - this.paramsFields = {'data-url' : this.dataUrl};  
827 -  
828 - for (var i = 0; i < input_layouts_fields.length; i++) {  
829 - if (input_layouts_fields[i].value != "") {  
830 - this.paramsFields[input_layouts_fields[i].heading] = input_layouts_fields[i].value;  
831 - }  
832 - }  
833 -  
834 - this.injectDatalet(this.$.datalet_placeholder);  
835 -  
836 - },  
837 - /**  
838 - * Validate the current pass in order to access to next one.  
839 - *  
840 - * @method validateCurrentPass  
841 - *  
842 - * @param {Number} next_selected_pass  
843 - */  
844 - validateCurrentPass : function(next_selected_pass){  
845 -  
846 - switch(next_selected_pass){  
847 - case 0:  
848 - return true;  
849 - case 1:  
850 - if(this.$.data_url.value == undefined){  
851 - this.$.message.text = "You have to select a dataset to access to pass 2.";  
852 - this.$.message.show();  
853 - return false;  
854 - }else{  
855 - return true;  
856 - }  
857 -  
858 - case 2:  
859 - if(this.selectedFields.length == 0){  
860 - this.$.message.text = "You have to select a set of fields to access to pass 3.";  
861 - this.$.message.show();  
862 - return false;  
863 - }else{  
864 - return true;  
865 - }  
866 - case 3:  
867 - this.injectDatalet(this.$.datalet_placeholder_2);  
868 - return true;  
869 - }  
870 -  
871 - },  
872 - /**  
873 - * Callback for manage the previous pass button  
874 - *  
875 - * @method _onPrevClick  
876 - *  
877 - */  
878 - _onPrevClick : function() {  
879 - if(!this.validateCurrentPass(this.selected === 0 ? 0 : (this.selected - 1))) return;  
880 -  
881 - this.entryAnimation = 'slide-from-left-animation';  
882 - this.exitAnimation = 'slide-right-animation';  
883 - this.selected = this.selected === 0 ? 0 : (this.selected - 1);  
884 - },  
885 - /**  
886 - * Callback to manage the next pass button  
887 - *  
888 - * @method _onNextClick  
889 - *  
890 - */  
891 - _onNextClick : function() {  
892 -  
893 - if(!this.validateCurrentPass(this.selected === 3 ? 3 : (this.selected + 1))) return;  
894 -  
895 - this.entryAnimation = 'slide-from-right-animation';  
896 - this.exitAnimation = 'slide-left-animation';  
897 - this.selected = this.selected === 3 ? 3 : (this.selected + 1);  
898 - },  
899 - /**  
900 - * Callback to manage InfoButton click to give user information about the selected dataset  
901 - *  
902 - */  
903 - _onInfoClick : function(){  
904 -  
905 - this.$.infoDialog.open();  
906 -  
907 - },  
908 - /**  
909 - * Callback related to datasource selection from select menu  
910 - *  
911 - * @method _datasourceSelected  
912 - *  
913 - * @param {Event} e  
914 - */  
915 - _datasourceSelected : function(e){  
916 -  
917 - this.$.data_url.value = this.datasets[parseInt(e.target.id)].url;  
918 - this.$.infoDialogTitle.innerHTML = this.datasets[parseInt(e.target.id)].name;  
919 - this.$.infoDialogContent.innerHTML = this.datasets[parseInt(e.target.id)].description;  
920 -  
921 - },  
922 - /**  
923 - * Callback related to data url change  
924 - *  
925 - * @method _dataUrlChanged  
926 - *  
927 - * @param {Event} e  
928 - */  
929 - _dataUrlChanged : function(newValue, oldValue){  
930 - this.$.data_request.generateRequest();  
931 - },  
932 - /**  
933 - * Callback related to event 'items-slider-controllet_item-selected' fired by items-slider-controllet when the user selects a datalet  
934 - *  
935 - * @method _dataletSelected  
936 - *  
937 - * @param {Event} e  
938 - */  
939 - _dataletSelected : function(e){  
940 - this.selectedDatalet = e.detail.datalet;  
941 - this.$.selectedDatalet_request.url = this.deepUrl + e.detail.datalet;  
942 - this.$.selectedDatalet_request.generateRequest();  
943 -  
944 - },  
945 - /**  
946 - * Callback related to event 'treeview-controllet-fileds-selected' fired by treeview-controllet when the user selects a field  
947 - *  
948 - * @method _fieldsSelected  
949 - *  
950 - * @param {Event} e  
951 - */  
952 - _fieldsSelected : function(e){  
953 -  
954 - this.selectedFields = e.detail.fields;  
955 - this.$.selectedFields_container.innerHTML = "";  
956 - for(var i=0;i<e.detail.fields.length;i++) {  
957 - this.$.selectedFields_container.innerHTML += '<draggable-element-controllet identifier="' + e.detail.fields[i] +  
958 - '" label="' + e.detail.fields[i].split(",")[e.detail.fields[i].split(",").length -1] +  
959 - '"></draggable-element-controllet><br>';  
960 - }  
961 -  
962 - //firefox stuff -- ???:)) :O  
963 - var place_holder = (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) ? this.$.table_component_place_holder : this.$.table_component_place_holder[Object.keys(this.$.table_component_place_holder)[0]];  
964 -  
965 - var table_params ={  
966 - component : "datatable-datalet",  
967 - params :{  
968 - 'data-url' : this.dataUrl  
969 - },  
970 - fields : e.detail.fields,  
971 - placeHolder : this.$.table_component_place_holder  
972 - };  
973 -  
974 - ComponentService.deep_url = this.deepUrl;  
975 - ComponentService.getComponent(table_params);  
976 -  
977 - },  
978 - /**  
979 - * Callback related to event 'draggable-element-controllet_content-dragged' fired by draggable-element-controllet when the user drags a selected field in to input data model field  
980 - *  
981 - * @method _fieldsMapped  
982 - *  
983 - * @param {Event} e  
984 - */  
985 - _fieldsMapped : function(e){  
986 -  
987 - this.generateDataletPreview();  
988 -  
989 - },  
990 - /**  
991 - * Callback related to event 'text-element-controllet_content-changed' fired by text-element-controllet when the user change the value of text  
992 - *  
993 - * @method _textElementChanged  
994 - *  
995 - * @param {Event} e  
996 - */  
997 - _textElementChanged : function(e){  
998 - if(this.selected == 3) {  
999 - this.injectDatalet(this.$.datalet_placeholder_2);  
1000 - }  
1001 - },  
1002 - /**  
1003 - * Callback related to the drag operation in the dataUrl input area. It's used to delete previous value.  
1004 - *  
1005 - * @method _handleDatasourceDragOver  
1006 - *  
1007 - * @param {Event} e  
1008 - */  
1009 - _handleDatasourceDragOver : function(e){  
1010 - this.$.data_url.value = "";  
1011 - },  
1012 - /**  
1013 - * Callback related to the finish button.  
1014 - *  
1015 - * @method _onFinish  
1016 - *  
1017 - * @param {Event} e  
1018 - */  
1019 - _onFinish : function(e){  
1020 -  
1021 - if((this.selectedFields.length == 0) || this.selectedDatalet == ""){  
1022 - this.$.message.text = "You have to map the selected fields with datalets fields(by dragging) and select a datalet to export a new visualization.";  
1023 - this.$.message.show();  
1024 - return;  
1025 - }  
1026 -  
1027 - var data = {  
1028 - dataUrl : this.dataUrl,  
1029 - params : this.paramsFields,  
1030 - fields : this.selectedFields,  
1031 - datalet : this.selectedDatalet,  
1032 - comment : this.$.commentArea.value,  
1033 - staticData : JSON.stringify(this.$.datalet_placeholder.children[1].behavior.data)  
1034 - }  
1035 -  
1036 - this.fire('data-sevc-controllet.dataletCreated', {data : data});  
1037 -  
1038 - }  
1039 -  
1040 - });  
1041 -  
1042 - </script>  
1043 -  
1044 -</dom-module>  
1045 \ No newline at end of file 0 \ No newline at end of file
controllets/data-sevc-controllet/data-sevc-controllet_beckup.html deleted
View file @5a7b6fc
1 -<!--  
2 -@license  
3 - The MIT License (MIT)  
4 -  
5 - Copyright (c) 2015 Dipartimento di Informatica - Universitร  di Salerno - Italy  
6 -  
7 - Permission is hereby granted, free of charge, to any person obtaining a copy  
8 - of this software and associated documentation files (the "Software"), to deal  
9 - in the Software without restriction, including without limitation the rights  
10 - to use, copy, modify, merge, publish, distribute, sublicense, and/or sell  
11 - copies of the Software, and to permit persons to whom the Software is  
12 - furnished to do so, subject to the following conditions:  
13 -  
14 - The above copyright notice and this permission notice shall be included in  
15 - all copies or substantial portions of the Software.  
16 -  
17 - THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR  
18 - IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,  
19 - FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE  
20 - AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER  
21 - LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,  
22 - OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN  
23 - THE SOFTWARE.  
24 --->  
25 -  
26 -<!--  
27 -* Developed by :  
28 -* ROUTE-TO-PA Project - grant No 645860. - www.routetopa.eu  
29 -*  
30 --->  
31 -  
32 -<link rel="import" href="../../bower_components/polymer/polymer.html">  
33 -<link rel="import" href="../../bower_components/paper-styles/color.html">  
34 -  
35 -<link rel="import" href="../../bower_components/neon-animation/neon-animated-pages.html">  
36 -<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">  
37 -<link rel="import" href="../../bower_components/neon-animation/neon-animations.html">  
38 -  
39 -<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">  
40 -<link rel="import" href="../../bower_components/paper-input/paper-input.html">  
41 -<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">  
42 -<link rel="import" href="../../bower_components/paper-button/paper-button.html">  
43 -<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">  
44 -<link rel="import" href="../../bower_components/paper-tabs/paper-tab.html">  
45 -<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">  
46 -<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">  
47 -<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">  
48 -<link rel="import" href="../../bower_components/paper-item/paper-item.html">  
49 -<link rel="import" href="../../bower_components/paper-toast/paper-toast.html">  
50 -<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">  
51 -<link rel="import" href="../../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">  
52 -  
53 -<link rel="import" href="../items-slider-controllet/items-slider-controllet.html">  
54 -<link rel="import" href="../draggable-element-controllet/draggable-element-controllet.html">  
55 -<link rel="import" href="../treeview-controllet/treeview-controllet.html">  
56 -<link rel="import" href="../text-element-controllet/text-element-controllet.html">  
57 -  
58 -<!--  
59 -The `data-sevc-controllet` is a controllet to generate visualization from a dataset accessible through api. A json response is required.  
60 -It's composed by three steps. First, user have to select a datasource to access to a dataset. He can copy and paste/drag and drop an url(an api url with json response) or select  
61 -from select contextual menu an available one. Second, the user selects the fields he want to visualize from a treeview by checking on it. A table preview of selected fields will show  
62 -the currently selected values. Third, the users selects a visualization(datalet) from a slider and drags the previous selected fields in to the input data model fields area. A preview  
63 -is available every time a fields is dragged in the input data model fields area.  
64 -  
65 -Example:  
66 -  
67 - <data-sevc-controllet deep-url="http://192.168.36.128/DatalEts-Ecosystem-Provider/DEEP/"  
68 - datalets-list-url="http://192.168.36.128/DatalEts-Ecosystem-Provider/DEEP/datalets-list"  
69 - datasets='{[{name : 'dataset1', url : dataset1Urls}, ... , {name : 'datasetN', url : datasetNUrls}]'>  
70 - </data-sevc-controllet>  
71 -  
72 -  
73 -@element data-sevc-controllet  
74 -@status beta  
75 -@homepage  
76 -@group controllets  
77 --->  
78 -  
79 -  
80 -<dom-module id="data-sevc-controllet">  
81 - <template>  
82 - <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">  
83 - <link rel="stylesheet" href="static/css/reset.css">  
84 -  
85 - <style is="custom-style">  
86 -  
87 - ::content body {  
88 - font-family: 'Roboto', sans-serif;  
89 - }  
90 -  
91 - .flexchild  
92 - {  
93 - @apply(--layout-flex);  
94 - }  
95 -  
96 - .flex2child  
97 - {  
98 - @apply(--layout-flex-2);  
99 - }  
100 -  
101 - .avatar  
102 - {  
103 - display: inline-block;  
104 - height: 2em;  
105 - width: 2em;  
106 - border-radius: 50%;  
107 - background: var(--paper-blue-500);  
108 - color: white;  
109 - line-height: 2em;  
110 - font-size: 1.87em;  
111 - text-align: center;  
112 - }  
113 -  
114 - .title  
115 - {  
116 - position: relative;  
117 - top: 0.60vh;  
118 - margin-left: 20px;  
119 - }  
120 -  
121 - .big  
122 - {  
123 - font-size: 1.37em;  
124 - color: var(--google-grey-500);  
125 - }  
126 -  
127 - .medium  
128 - {  
129 - font-size: 1em;  
130 - padding-bottom: 0.5em;  
131 - color : #000000;  
132 - font-weight: bold;  
133 - }  
134 -  
135 - .small  
136 - {  
137 - font-size: 0.8em;  
138 - padding-top: 10px;  
139 - color: var(--paper-blue-500);  
140 - font-weight: bold;  
141 - }  
142 -  
143 - paper-input  
144 - {  
145 - width: 80%;  
146 - }  
147 -  
148 - paper-dropdown-menu  
149 - {  
150 - text-align: left;  
151 - margin: auto;  
152 - width: 100%;  
153 - }  
154 -  
155 - ::content paper-menu-button  
156 - {  
157 - display: block;  
158 - width: 100%;  
159 - }  
160 -  
161 - #visualization_slider_area  
162 - {  
163 - min-width: 670px;  
164 - min-height: 180px;  
165 - }  
166 -  
167 - #fields_mapping_area  
168 - {  
169 - min-width: 670px;  
170 - min-height: 180px;  
171 - }  
172 -  
173 - #datalet_placeholder  
174 - {  
175 - height: 360px;  
176 - min-height: 360px;  
177 -  
178 - }  
179 -  
180 - .datalet_right_container  
181 - {  
182 - width: 100vh;  
183 - }  
184 -  
185 - .field-mapping-card  
186 - {  
187 - width: 50%;  
188 - float: left;  
189 - }  
190 -  
191 - .toolbar_button  
192 - {  
193 - --iron-icon-height: 32px;  
194 - --iron-icon-width: 32px;  
195 - }  
196 -  
197 - #finish_button  
198 - {  
199 - --iron-icon-height: 32px;  
200 - --iron-icon-width: 32px;  
201 - color: var(--paper-blue-500);  
202 - }  
203 -  
204 - .area_container  
205 - {  
206 - overflow: hidden;  
207 - margin : 0.8em;  
208 - padding : 0.8em;  
209 - border-width: 1em;  
210 - border-radius: 0.125rem;  
211 - box-shadow: 0.125em 0.125em 0.1125em 0.125em rgba(0, 0, 0, 0.25);  
212 - }  
213 -  
214 - #fields_placeholder{  
215 - width: 40%;  
216 - height: 75vh;  
217 - position: relative;  
218 - float: left;  
219 - overflow: auto;  
220 - }  
221 -  
222 - #table_fields_container{  
223 - height: 75vh;  
224 - width: 55%;  
225 - position: relative;  
226 - float: left;  
227 - overflow: auto;  
228 - }  
229 -  
230 - paper-tabs, paper-toolbar  
231 - {  
232 - background-color: var(--paper-blue-500);  
233 - color: #ffffff;  
234 - box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);  
235 - }  
236 -  
237 - paper-toolbar paper-tabs  
238 - {  
239 - box-shadow: none;  
240 - --paper-tabs-selection-bar-color : var(--google-gray-500);  
241 - }  
242 -  
243 - paper-tabs[noink][no-bar] paper-tab.iron-selected  
244 - {  
245 - background-color: var(--google-gray-500);  
246 - }  
247 -  
248 - paper-tabs[align-bottom]  
249 - {  
250 - box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.15);  
251 - }  
252 -  
253 - #idm_fields_main_container{  
254 - position: relative;  
255 - height: 50vh;  
256 - }  
257 -  
258 - #selected_fields_main_container{  
259 - position: relative;  
260 - height: 50vh;  
261 - }  
262 -  
263 - #idm_layout_main_container{  
264 - position: relative;  
265 - height: 25vh;  
266 - }  
267 -  
268 - paper-menu{  
269 - width: 100%;  
270 - }  
271 -  
272 - paper-dialog {  
273 - position: fixed;  
274 - top: 16px;  
275 - width: auto;  
276 - height: auto;  
277 - overflow: auto;  
278 - padding : 30px;  
279 - }  
280 -  
281 - </style>  
282 -  
283 - <iron-ajax  
284 - auto  
285 - id="data_request"  
286 - url={{dataUrl}}  
287 - verbose="true"  
288 - on-response="handleResponseData"  
289 - debounce-duration="300">  
290 - </iron-ajax>  
291 -  
292 - <iron-ajax  
293 - id="datales_list_request"  
294 - auto  
295 - url={{dataletsListUrl}}  
296 - handle-as="json"  
297 - on-response="handleResponseDatalets"  
298 - debounce-duration="300">  
299 - </iron-ajax>  
300 -  
301 - <iron-ajax  
302 - id="selected_datalet_request"  
303 - url={{deepUrl}}  
304 - verbose="true"  
305 - on-response="handleSelectedDatalet"  
306 - debounce-duration="300">  
307 - </iron-ajax>  
308 -  
309 - <content>  
310 -  
311 - <neon-animated-pages id="pages" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">  
312 -  
313 - <neon-animatable>  
314 -  
315 - <div class="vertical justified layout">  
316 -  
317 - <div class="horizontal layout">  
318 - <div class="avatar" style="margin-left:15px">1</div>  
319 - <div class="title flex">  
320 - <div id="toolbar_title" class="big">Dataset source</div>  
321 - <div id="toolbar_description" class="small">Copy and paste/drag and drop in the textarea the url of datasource</div>  
322 - </div>  
323 - <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button>  
324 - </div>  
325 -  
326 - <div class="area_container">  
327 - <paper-tabs selected="{{DatasourceTabSelected}}">  
328 - <paper-tab>Select data source</paper-tab>  
329 - <paper-tab>Most popular</paper-tab>  
330 - <paper-tab>Search</paper-tab>  
331 - </paper-tabs>  
332 - <iron-pages selected="{{DatasourceTabSelected}}">  
333 - <div>  
334 - <div class="card-content">  
335 - <paper-dropdown-menu id="datasets-sources" label="Available datasets">  
336 - <paper-menu class="dropdown-content">  
337 - <template is="dom-repeat" items="{{datasets}}" as="dataset" index-as="index">  
338 - <paper-item id="{{index}}" on-tap="_datasourceSelected">{{dataset.name}}</paper-item>  
339 - </template>  
340 - </paper-menu>  
341 - </paper-dropdown-menu>  
342 - <paper-icon-button id="infoButton" on-click="_onInfoClick" icon="info-outline" alt="Information about selected dataset" title="info-button" style="color:#9e9e9e;"></paper-icon-button>  
343 - </div>  
344 -  
345 - <div><img src="static/images/or.png" style="position: relative;left: 50%;padding-top:20px"></div>  
346 -  
347 - <div class="card-content">  
348 - <paper-textarea id="data_url" label="Dataset api data url" floatingLabel value="{{dataUrl}}" on-dragover="_handleDatasourceDragOver"></paper-textarea>  
349 - </div>  
350 -  
351 -  
352 - </div>  
353 - <div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div>  
354 - <div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div>  
355 - </iron-pages>  
356 - </div>  
357 -  
358 - </div>  
359 -  
360 - </neon-animatable>  
361 -  
362 - <neon-animatable>  
363 -  
364 - <div class="vertical justified layout">  
365 -  
366 - <div class="horizontal layout">  
367 - <paper-icon-button id="PrevButton" class="toolbar_button x-scope" on-click="_onPrevClick" icon="chevron-left" alt="arrow-back" title="arrow-back"></paper-icon-button>  
368 - <div class="avatar">2</div>  
369 - <div class="title flex">  
370 - <div id="toolbar_title" class="big">Dataset source</div>  
371 - <div id="toolbar_description" class="small">Copy and paste/drag and drop in the textarea the url of datasource</div>  
372 - </div>  
373 - <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button>  
374 - </div>  
375 -  
376 - <div class="horizontal layout">  
377 -  
378 - <div id="fields_placeholder" class="area_container flexchild" style="min-width:300px">  
379 - <treeview-controllet id="fields_treeview"></treeview-controllet>  
380 - </div>  
381 -  
382 - <div id="table_fields_container" class="area_container flex2child">  
383 - <div id="table_component_place_holder"></div>  
384 - </div>  
385 -  
386 - </div>  
387 -  
388 - </div>  
389 -  
390 - </neon-animatable>  
391 -  
392 - <neon-animatable style="height:100vh">  
393 -  
394 - <div class="vertical justified layout">  
395 -  
396 - <div class="horizontal layout">  
397 - <paper-icon-button id="PrevButton" class="toolbar_button x-scope" on-click="_onPrevClick" icon="chevron-left" alt="arrow-back" title="arrow-back"></paper-icon-button>  
398 - <div class="avatar">3</div>  
399 - <div class="title flex">  
400 - <div id="toolbar_title" class="big">Data mapping</div>  
401 - <div id="toolbar_description" class="small">Select the visualization from the slider, drag and drop the selected fields in visualization parameter area, customize the visualization if you need</div>  
402 - </div>  
403 - <paper-icon-button id="finish_button" on-click="_onFinish" icon="add-circle" alt="Conforms the creation" title="finish"></paper-icon-button>  
404 - </div>  
405 -  
406 -  
407 - <div class="horizontal layout">  
408 -  
409 - <div class="">  
410 - <div id="visualization_slider_area" class="area_container"></div>  
411 - <div id="fields_mapping_area" class="area_container">  
412 -  
413 - <div id="selected_fields_main_container" class="field-mapping-card">  
414 - <div class="title">  
415 - <div class="medium">Selected fields</div>  
416 - </div>  
417 - <div id="selected_fields_container" class="area_container"></div>  
418 - </div>  
419 -  
420 - <div id="idm_fields_main_container" class="field-mapping-card">  
421 - <div class="title">  
422 - <div class="medium">Datalet fields</div>  
423 - </div>  
424 - <div id="datalet_idm_fields_container" class="area_container"></div>  
425 - </div>  
426 -  
427 - <div id="idm_layout_main_container" class="area_container">  
428 - <div class="title">  
429 - <div class="medium">Layout fields</div>  
430 - </div>  
431 - <div id="idm_layout_container" class="area_container"></div>  
432 - </div>  
433 - </div>  
434 - </div>  
435 -  
436 - <div id="datalet_placeholder" style="min-width: 43%;"></div>  
437 -  
438 -  
439 - </div>  
440 -  
441 - </div>  
442 -  
443 - </neon-animatable>  
444 -  
445 - </neon-animated-pages>  
446 -  
447 - <paper-toast id="message" text=""></paper-toast>  
448 -  
449 - <paper-dialog id="infoDialog">  
450 - <h2 id="infoDialogTitle"></h2>  
451 - <paper-dialog-scrollable id="infoDialogContent">  
452 - </paper-dialog-scrollable>  
453 - </paper-dialog>  
454 -  
455 - </content>  
456 - </template>  
457 -  
458 - <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>  
459 - <script src="../../../DEEPCLIENT/js/deepClient.js"></script>  
460 -  
461 - <script>  
462 -  
463 - Polymer({  
464 -  
465 - is : 'data-sevc-controllet',  
466 -  
467 - /**  
468 - * Received when the user selects a datalet from slider.  
469 - *  
470 - * @event items-slider-controllet_item-selected  
471 - */  
472 -  
473 - /**  
474 - * Received when the user drags a selected fields in to one of the source input data model field  
475 - *  
476 - * @event draggable-element-controllet_content-dragged  
477 - */  
478 -  
479 - /**  
480 - * Received when the user selects one field from treeview controllet  
481 - *  
482 - * @event treeview-controllet-fileds-selected  
483 - */  
484 -  
485 - /**  
486 - * Received when the user drags a selected fields in to one of the source input data model field  
487 - *  
488 - * @event draggable-element-controllet_content-dragged  
489 - */  
490 -  
491 - /**  
492 - * Received when the user change text value of the selected datalet layout inputs  
493 - *  
494 - * @event text-element-controllet_content-changed  
495 - */  
496 -  
497 - /**  
498 - * Fired when the user press to finish button. At this event are attached all information about the visualization currently created  
499 - *  
500 - * @event data-sevc-controllet.dataletCreated  
501 - */  
502 -  
503 - listeners : {  
504 - 'items-slider-controllet_item-selected' : '_dataletSelected',  
505 - 'draggable-element-controllet_content-dragged' : '_fieldsMapped',  
506 - 'treeview-controllet_fileds-selected' : '_fieldsSelected',  
507 - 'text-element-controllet_content-changed' : '_textElementChanged'  
508 - },  
509 -  
510 - properties : {  
511 -  
512 - entryAnimation : {  
513 - type : String,  
514 - value : ""  
515 - },  
516 -  
517 - exitAnimation : {  
518 - type : String,  
519 - value : ""  
520 - },  
521 -  
522 - selected : {  
523 - type : Number,  
524 - value : 0  
525 - },  
526 -  
527 - /**  
528 - * It represents the data url from CKAN api  
529 - *  
530 - * @attribute dataUrl  
531 - * @type string  
532 - * @default 'null'  
533 - */  
534 - dataUrl : {  
535 - type : String,  
536 - value : "",  
537 - observer : '_dataUrlChanged'  
538 - },  
539 - /**  
540 - * It represents the DEEP url to get information about the datalets  
541 - *  
542 - * @attribute deepUrl  
543 - * @type string  
544 - * @default 'null'  
545 - */  
546 - deepUrl : {  
547 - type : String,  
548 - value : ""  
549 - },  
550 - /**  
551 - * It's used to store the list of datalets returned from DEEP  
552 - *  
553 - * @attribute datalets_list  
554 - * @type Array  
555 - * @default empty  
556 - */  
557 - datalets_list : {  
558 - type : Array ,  
559 - value : []  
560 - },  
561 - /**  
562 - * It's used to store the selected datalet. It will be set when the controllet get the event of selection by item slider (items-slider-controllet_item-selected)  
563 - *  
564 - * @attribute selected_datalet  
565 - * @type String  
566 - * @default ''  
567 - */  
568 - selected_datalet : {  
569 - type : String,  
570 - value : ""  
571 - },  
572 - /**  
573 - * It's used to store the list of selected fields by user  
574 - *  
575 - * @attribute selected_fields  
576 - * @type Array  
577 - * @default empty  
578 - */  
579 - selected_fields : {  
580 - type : Array,  
581 - value : []  
582 - },  
583 - /**  
584 - * It's used to store the params to give to datalet. This kind of params will not processed by selection step  
585 - *  
586 - * @attribute params_fields  
587 - * @type Object  
588 - * @default empty  
589 - */  
590 - params_fields:{  
591 - type: Object,  
592 - value: {}  
593 - },  
594 - /**  
595 - * It's used to store the tab index in the first pass  
596 - *  
597 - * @attribute DatasourceTabSelected  
598 - * @type Number  
599 - * @default 0  
600 - */  
601 - DatasourceTabSelected : {  
602 - type : Number,  
603 - value : 0  
604 - },  
605 - /**  
606 - * It's used to store the datasets to show in the contexual menu  
607 - *  
608 - * @attribute datasets  
609 - * @type Array  
610 - * @default empty  
611 - */  
612 - datasets :  
613 - {  
614 - type : Array,  
615 - value : []  
616 - }  
617 - },  
618 - /**  
619 - * It is called after the elementย’s template has been stamped and all elements inside the elementย’s local DOM have been configured (with values bound from parents, deserialized attributes, or else default values) and had their ready method called.  
620 - * In this phase the scrollbar will be initialized  
621 - *  
622 - * @method handleResponseData  
623 - *  
624 - * @param {Event} e  
625 - */  
626 -  
627 - ready : function(){  
628 -  
629 - $(this.$.fields_placeholder).perfectScrollbar();  
630 - $(this.$.selected_fields_main_container).perfectScrollbar();  
631 - $(this.$.idm_fields_main_container).perfectScrollbar();  
632 - $(this.$.idm_layout_main_container).perfectScrollbar();  
633 - $(this.$.table_fields_container).perfectScrollbar();  
634 -  
635 - },  
636 -  
637 - /**  
638 - * Callback to parse the data requested when dataUrl change its value  
639 - *  
640 - * @method handleResponseData  
641 - *  
642 - * @param {Event} e  
643 - */  
644 - handleResponseData : function(e){  
645 -  
646 - this.$.fields_treeview.init(e.detail.response);  
647 -  
648 - },  
649 -  
650 - /**  
651 - * Callback to parse the components response object  
652 - *  
653 - * @method handleResponseDatalets  
654 - *  
655 - * @param {Event} e  
656 - */  
657 - handleResponseDatalets : function(e){  
658 - this.datalets_list = new Array();  
659 - for(var i=0;i < e.detail.response.length;i++){  
660 - var datalet_info = { name : e.detail.response[i].name ,  
661 - image : e.detail.response[i].url + e.detail.response[i].name + ".png"  
662 - };  
663 -  
664 - this.datalets_list.push(datalet_info);  
665 - }  
666 -  
667 - this.$.visualization_slider_area.innerHTML = '<items-slider-controllet items=\'' + JSON.stringify(this.datalets_list) + '\'' +  
668 - '\'></items-slider-controllet>';  
669 - },  
670 - /**  
671 - * Callback to dataset selection from list in the phase three. When a datalet is selected this function will build a bundle of box items, based on the datalet input data model,  
672 - * to allow user to drag the fields, from the selected fields box, and create a new visualization.  
673 - *  
674 - * @method handleSelectedDatalet  
675 - *  
676 - * @param {Event} e  
677 - */  
678 - handleSelectedDatalet : function(e){  
679 -  
680 - var response = e.detail.response;  
681 - this.$.datalet_idm_fields_container.innerHTML = "";  
682 - this.$.idm_layout_container.innerHTML = "";  
683 -  
684 - if(response.idm.inputs.input.constructor == Object) {  
685 - var input = response.idm.inputs.input;  
686 - if(input.selection == "*") {  
687 - var input_selected_fields = Polymer.dom(this.$.selected_fields_container).querySelectorAll('draggable-element-controllet');  
688 - for (var j = 0; j < input_selected_fields.length; j++) {  
689 - this.$.datalet_idm_fields_container.innerHTML += '<draggable-element-controllet is-target="true" heading="Field ' + (j + 1) + '" description="' + input.description + '" number="' + (j + 1) + '"></draggable-element-controllet><br>';  
690 - }  
691 - }  
692 - }else{  
693 - for(var i =0; i < response.idm.inputs.input.length; i++){  
694 - var input = response.idm.inputs.input[i];  
695 - this.$.datalet_idm_fields_container.innerHTML += '<draggable-element-controllet is-target="true" id="' + input.name + '" heading="' + input.name + '" description="' + input.description + '" number="' + (i + 1) + '"></draggable-element-controllet><br>';  
696 - }  
697 - }  
698 -  
699 - if(response.idm.inputs.layouts.input.constructor == Object) {  
700 - var input = response.idm.inputs.layouts.input;  
701 - this.$.idm_layout_container.innerHTML += '<text-element-controllet heading="' + input.name + '" description="' + input.description + '" number="1"></text-element-controllet>';  
702 - }else{  
703 - for(var i =0; i < response.idm.inputs.layouts.input.length; i++){  
704 - var input = response.idm.inputs.layouts.input[i];  
705 - this.$.idm_layout_container.innerHTML += '<text-element-controllet heading="' + input.name + '" ' +  
706 - 'description="' + input.description + '" ' +  
707 - 'number="' + (i+1) + '">' +  
708 - '</text-element-controllet>';  
709 - }  
710 -  
711 - }  
712 -  
713 - },  
714 - /**  
715 - * Generate the datalet preview when user mapped fields. it even retrieves the value of layout inputs values.  
716 - *  
717 - * @method generateDataletPreview  
718 - */  
719 - generateDataletPreview : function(){  
720 -  
721 - var input_mapped_fields = Polymer.dom(this.$.datalet_idm_fields_container).querySelectorAll('draggable-element-controllet[is-target=true]');  
722 - this.selected_fields = Array();  
723 -  
724 - for (var i = 0; i < input_mapped_fields.length; i++) {  
725 - if (input_mapped_fields[i].value != "") {  
726 - this.selected_fields.push(input_mapped_fields[i].value);  
727 - }  
728 - }  
729 -  
730 - var input_layouts_fields = Polymer.dom(this.$.idm_layout_container).querySelectorAll('text-element-controllet');  
731 - this.params_fields = {'data-url' : this.dataUrl};  
732 -  
733 - for (var i = 0; i < input_layouts_fields.length; i++) {  
734 - if (input_layouts_fields[i].value != "") {  
735 - this.params_fields[input_layouts_fields[i].heading] = input_layouts_fields[i].value;  
736 - }  
737 - }  
738 -  
739 -  
740 - var datalet_params ={  
741 - component : this.selected_datalet,  
742 - params : this.params_fields,  
743 - fields : this.selected_fields,  
744 - placeHolder : this.$.datalet_placeholder  
745 - };  
746 -  
747 -  
748 - ComponentService.deep_url = this.deepUrl;  
749 - ComponentService.getComponent(datalet_params);  
750 -  
751 - },  
752 - /**  
753 - * Validate the current pass in order to access to next one.  
754 - *  
755 - * @method validateCurrentPass  
756 - *  
757 - * @param {Number} next_selected_pass  
758 - */  
759 - validateCurrentPass : function(next_selected_pass){  
760 -  
761 - switch(next_selected_pass){  
762 - case 0:  
763 - return true;  
764 - case 1:  
765 - if(this.$.data_url.value == ""){  
766 - this.$.message.text = "You have to select a dataset to access to pass 2.";  
767 - this.$.message.show();  
768 - return false;  
769 - }else{  
770 - return true;  
771 - }  
772 -  
773 - case 2:  
774 - if(Polymer.dom(this.$.selected_fields_container).querySelectorAll('draggable-element-controllet') == 0){  
775 - this.$.message.text = "You have to select a set of fields to access to pass 3.";  
776 - this.$.message.show();  
777 - return false;  
778 - }else{  
779 - return true;  
780 - }  
781 - }  
782 -  
783 - },  
784 - /**  
785 - * Callback for manage the previous pass button  
786 - *  
787 - * @method _onPrevClick  
788 - *  
789 - */  
790 - _onPrevClick : function() {  
791 - if(!this.validateCurrentPass(this.selected === 0 ? 0 : (this.selected - 1))) return;  
792 -  
793 - this.entryAnimation = 'slide-from-left-animation';  
794 - this.exitAnimation = 'slide-right-animation';  
795 - this.selected = this.selected === 0 ? 0 : (this.selected - 1);  
796 - },  
797 - /**  
798 - * Callback to manage the next pass button  
799 - *  
800 - * @method _onNextClick  
801 - *  
802 - */  
803 - _onNextClick : function() {  
804 -  
805 - if(!this.validateCurrentPass(this.selected === 2 ? 2 : (this.selected + 1))) return;  
806 -  
807 - this.entryAnimation = 'slide-from-right-animation';  
808 - this.exitAnimation = 'slide-left-animation';  
809 - this.selected = this.selected === 2 ? 2 : (this.selected + 1);  
810 - },  
811 - /**  
812 - * Callback to manage InfoButton click to give user information about the selected dataset  
813 - *  
814 - */  
815 - _onInfoClick : function(){  
816 -  
817 - this.$.infoDialog.open();  
818 -  
819 - },  
820 - /**  
821 - * Callback related to datasource selection from select menu  
822 - *  
823 - * @method _datasourceSelected  
824 - *  
825 - * @param {Event} e  
826 - */  
827 - _datasourceSelected : function(e){  
828 -  
829 - this.$.data_url.value = this.datasets[parseInt(e.target.id)].url;  
830 - this.$.infoDialogTitle.innerHTML = this.datasets[parseInt(e.target.id)].name;  
831 - this.$.infoDialogContent.innerHTML = this.datasets[parseInt(e.target.id)].description;  
832 -  
833 - },  
834 - /**  
835 - * Callback related to data url change  
836 - *  
837 - * @method _dataUrlChanged  
838 - *  
839 - * @param {Event} e  
840 - */  
841 - _dataUrlChanged : function(newValue, oldValue){  
842 - this.$.data_request.generateRequest();  
843 - },  
844 - /**  
845 - * Callback related to event 'items-slider-controllet_item-selected' fired by items-slider-controllet when the user selects a datalet  
846 - *  
847 - * @method _dataletSelected  
848 - *  
849 - * @param {Event} e  
850 - */  
851 - _dataletSelected : function(e){  
852 - this.selected_datalet = e.detail.datalet;  
853 - this.$.selected_datalet_request.url = this.deepUrl + e.detail.datalet;  
854 - this.$.selected_datalet_request.generateRequest();  
855 -  
856 - },  
857 - /**  
858 - * Callback related to event 'treeview-controllet-fileds-selected' fired by treeview-controllet when the user selects a field  
859 - *  
860 - * @method _fieldsSelected  
861 - *  
862 - * @param {Event} e  
863 - */  
864 - _fieldsSelected : function(e){  
865 -  
866 - this.$.selected_fields_container.innerHTML = "";  
867 - for(var i=0;i<e.detail.fields.length;i++) {  
868 - this.$.selected_fields_container.innerHTML += '<draggable-element-controllet identifier="' + e.detail.fields[i] +  
869 - '" label="' + e.detail.fields[i].split(",")[e.detail.fields[i].split(",").length -1] +  
870 - '"></draggable-element-controllet><br>';  
871 - }  
872 -  
873 - var place_holder = (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) ? this.$.table_component_place_holder : this.$.table_component_place_holder[Object.keys(this.$.table_component_place_holder)[0]];  
874 -  
875 - var table_params ={  
876 - component : "datatable-datalet",  
877 - params :{  
878 - 'data-url' : this.dataUrl  
879 - },  
880 - fields : e.detail.fields,  
881 - placeHolder : this.$.table_component_place_holder  
882 - };  
883 -  
884 - ComponentService.deep_url = this.deepUrl;  
885 - ComponentService.getComponent(table_params);  
886 -  
887 - },  
888 - /**  
889 - * Callback related to event 'draggable-element-controllet_content-dragged' fired by draggable-element-controllet when the user drags a selected field in to input data model field  
890 - *  
891 - * @method _fieldsMapped  
892 - *  
893 - * @param {Event} e  
894 - */  
895 - _fieldsMapped : function(e){  
896 -  
897 - this.generateDataletPreview();  
898 -  
899 - },  
900 - /**  
901 - * Callback related to event 'text-element-controllet_content-changed' fired by text-element-controllet when the user change the value of text  
902 - *  
903 - * @method _textElementChanged  
904 - *  
905 - * @param {Event} e  
906 - */  
907 - _textElementChanged : function(e){  
908 - this.generateDataletPreview();  
909 - },  
910 - /**  
911 - * Callback related to the drag operation in the dataUrl input area. It's used to delete previous value.  
912 - *  
913 - * @method _handleDatasourceDragOver  
914 - *  
915 - * @param {Event} e  
916 - */  
917 - _handleDatasourceDragOver : function(e){  
918 - this.$.data_url.value = "";  
919 - },  
920 - /**  
921 - * Callback related to the finish button.  
922 - *  
923 - * @method _onFinish  
924 - *  
925 - * @param {Event} e  
926 - */  
927 - _onFinish : function(e){  
928 -  
929 - if((this.selected_fields.length == 0) || this.selected_datalet == ""){  
930 - this.$.message.text = "You have to map the selected fields with datalets fields(by dragging) and select a datalet to export a new visualization.";  
931 - this.$.message.show();  
932 - return;  
933 - }  
934 -  
935 - var data = {  
936 - dataUrl : this.dataUrl,  
937 - params : this.params_fields,  
938 - fields : this.selected_fields,  
939 - datalet : this.selected_datalet,  
940 - staticData : JSON.stringify(this.$.datalet_placeholder.children[1].behavior.data)  
941 - }  
942 -  
943 - this.fire('data-sevc-controllet.dataletCreated', {data : data});  
944 -  
945 - }  
946 -  
947 - });  
948 -  
949 - </script>  
950 -  
951 -</dom-module>  
952 \ No newline at end of file 0 \ No newline at end of file
controllets/data-sevc-controllet/data-sevc-controllet_treeview_checkbox.html deleted
View file @5a7b6fc
1 -<!--  
2 -@license  
3 - The MIT License (MIT)  
4 -  
5 - Copyright (c) 2015 Dipartimento di Informatica - Universitร  di Salerno - Italy  
6 -  
7 - Permission is hereby granted, free of charge, to any person obtaining a copy  
8 - of this software and associated documentation files (the "Software"), to deal  
9 - in the Software without restriction, including without limitation the rights  
10 - to use, copy, modify, merge, publish, distribute, sublicense, and/or sell  
11 - copies of the Software, and to permit persons to whom the Software is  
12 - furnished to do so, subject to the following conditions:  
13 -  
14 - The above copyright notice and this permission notice shall be included in  
15 - all copies or substantial portions of the Software.  
16 -  
17 - THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR  
18 - IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,  
19 - FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE  
20 - AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER  
21 - LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,  
22 - OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN  
23 - THE SOFTWARE.  
24 --->  
25 -  
26 -<!--  
27 -* Developed by :  
28 -* ROUTE-TO-PA Project - grant No 645860. - www.routetopa.eu  
29 -*  
30 --->  
31 -  
32 -<link rel="import" href="../../bower_components/polymer/polymer.html">  
33 -<link rel="import" href="../../bower_components/paper-styles/color.html">  
34 -  
35 -<link rel="import" href="../../bower_components/neon-animation/neon-animated-pages.html">  
36 -<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">  
37 -<link rel="import" href="../../bower_components/neon-animation/neon-animations.html">  
38 -  
39 -<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">  
40 -<link rel="import" href="../../bower_components/paper-input/paper-input.html">  
41 -<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">  
42 -<link rel="import" href="../../bower_components/paper-button/paper-button.html">  
43 -<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">  
44 -<link rel="import" href="../../bower_components/paper-tabs/paper-tab.html">  
45 -<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">  
46 -<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">  
47 -<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">  
48 -<link rel="import" href="../../bower_components/paper-item/paper-item.html">  
49 -<link rel="import" href="../../bower_components/paper-toast/paper-toast.html">  
50 -<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">  
51 -<link rel="import" href="../../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">  
52 -  
53 -<link rel="import" href="../items-slider-controllet/items-slider-controllet.html">  
54 -<link rel="import" href="../draggable-element-controllet/draggable-element-controllet.html">  
55 -<link rel="import" href="../treeview-controllet/treeview-controllet.html">  
56 -<link rel="import" href="../text-element-controllet/text-element-controllet.html">  
57 -  
58 -<!--  
59 -The `data-sevc-controllet` is a controllet to generate visualization from a dataset accessible through api. A json response is required.  
60 -It's composed by three steps. First, user have to select a datasource to access to a dataset. He can copy and paste/drag and drop an url(an api url with json response) or select  
61 -from select contextual menu an available one. Second, the user selects the fields he want to visualize from a treeview by checking on it. A table preview of selected fields will show  
62 -the currently selected values. Third, the users selects a visualization(datalet) from a slider and drags the previous selected fields in to the input data model fields area. A preview  
63 -is available every time a fields is dragged in the input data model fields area.  
64 -  
65 -Example:  
66 -  
67 - <data-sevc-controllet deep-url="http://192.168.36.128/DatalEts-Ecosystem-Provider/DEEP/"  
68 - datalets-list-url="http://192.168.36.128/DatalEts-Ecosystem-Provider/DEEP/datalets-list"  
69 - datasets='{[{name : 'dataset1', url : dataset1Urls}, ... , {name : 'datasetN', url : datasetNUrls}]'>  
70 - </data-sevc-controllet>  
71 -  
72 -  
73 -@element data-sevc-controllet  
74 -@status beta  
75 -@homepage  
76 -@group controllets  
77 --->  
78 -  
79 -  
80 -<dom-module id="data-sevc-controllet">  
81 - <template>  
82 - <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">  
83 - <link rel="stylesheet" href="static/css/reset.css">  
84 -  
85 - <style is="custom-style">  
86 -  
87 - ::content body {  
88 - font-family: 'Roboto', sans-serif;  
89 - }  
90 -  
91 - .flexchild  
92 - {  
93 - @apply(--layout-flex);  
94 - }  
95 -  
96 - .flex2child  
97 - {  
98 - @apply(--layout-flex-2);  
99 - }  
100 -  
101 - .avatar  
102 - {  
103 - display: inline-block;  
104 - height: 2em;  
105 - width: 2em;  
106 - border-radius: 50%;  
107 - background: var(--paper-blue-500);  
108 - color: white;  
109 - line-height: 2em;  
110 - font-size: 1.87em;  
111 - text-align: center;  
112 - }  
113 -  
114 - .title  
115 - {  
116 - position: relative;  
117 - top: 0.60vh;  
118 - margin-left: 20px;  
119 - }  
120 -  
121 - .big  
122 - {  
123 - font-size: 1.37em;  
124 - color: var(--google-grey-500);  
125 - }  
126 -  
127 - .medium  
128 - {  
129 - font-size: 1em;  
130 - padding-bottom: 0.5em;  
131 - color : #000000;  
132 - font-weight: bold;  
133 - }  
134 -  
135 - .small  
136 - {  
137 - font-size: 0.8em;  
138 - padding-top: 10px;  
139 - color: var(--paper-blue-500);  
140 - font-weight: bold;  
141 - }  
142 -  
143 - paper-input  
144 - {  
145 - width: 80%;  
146 - }  
147 -  
148 - paper-dropdown-menu  
149 - {  
150 - text-align: left;  
151 - margin: auto;  
152 - width: 100%;  
153 - }  
154 -  
155 - ::content paper-menu-button  
156 - {  
157 - display: block;  
158 - width: 100%;  
159 - }  
160 -  
161 - #visualization_slider_area  
162 - {  
163 - min-width: 670px;  
164 - min-height: 180px;  
165 - }  
166 -  
167 - #fields_mapping_area  
168 - {  
169 - min-width: 670px;  
170 - min-height: 180px;  
171 - }  
172 -  
173 - #datalet_placeholder  
174 - {  
175 - height: 360px;  
176 - min-height: 360px;  
177 -  
178 - }  
179 -  
180 - .datalet_right_container  
181 - {  
182 - width: 100vh;  
183 - }  
184 -  
185 - .field-mapping-card  
186 - {  
187 - width: 50%;  
188 - float: left;  
189 - }  
190 -  
191 - .toolbar_button  
192 - {  
193 - --iron-icon-height: 32px;  
194 - --iron-icon-width: 32px;  
195 - }  
196 -  
197 - #finish_button  
198 - {  
199 - --iron-icon-height: 32px;  
200 - --iron-icon-width: 32px;  
201 - color: var(--paper-blue-500);  
202 - }  
203 -  
204 - .area_container  
205 - {  
206 - overflow: hidden;  
207 - margin : 0.8em;  
208 - padding : 0.8em;  
209 - border-width: 1em;  
210 - border-radius: 0.125rem;  
211 - box-shadow: 0.125em 0.125em 0.1125em 0.125em rgba(0, 0, 0, 0.25);  
212 - }  
213 -  
214 - #fields_placeholder{  
215 - width: 40%;  
216 - height: 75vh;  
217 - position: relative;  
218 - float: left;  
219 - overflow: auto;  
220 - }  
221 -  
222 - #table_fields_container{  
223 - height: 75vh;  
224 - width: 55%;  
225 - position: relative;  
226 - float: left;  
227 - overflow: auto;  
228 - }  
229 -  
230 - paper-tabs, paper-toolbar  
231 - {  
232 - background-color: var(--paper-blue-500);  
233 - color: #ffffff;  
234 - box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);  
235 - }  
236 -  
237 - paper-toolbar paper-tabs  
238 - {  
239 - box-shadow: none;  
240 - --paper-tabs-selection-bar-color : var(--google-gray-500);  
241 - }  
242 -  
243 - paper-tabs[noink][no-bar] paper-tab.iron-selected  
244 - {  
245 - background-color: var(--google-gray-500);  
246 - }  
247 -  
248 - paper-tabs[align-bottom]  
249 - {  
250 - box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.15);  
251 - }  
252 -  
253 - #idm_fields_main_container{  
254 - position: relative;  
255 - height: 50vh;  
256 - }  
257 -  
258 - #selectedFields_main_container{  
259 - position: relative;  
260 - height: 50vh;  
261 - }  
262 -  
263 - #idm_layout_main_container{  
264 - position: relative;  
265 - height: 50vh;  
266 - }  
267 -  
268 - #comment{  
269 - position: relative;  
270 - width: 35vw;  
271 - }  
272 -  
273 - paper-menu{  
274 - width: 100%;  
275 - }  
276 -  
277 - paper-dialog {  
278 - position: fixed;  
279 - top: 16px;  
280 - width: auto;  
281 - height: auto;  
282 - overflow: auto;  
283 - padding : 30px;  
284 - }  
285 -  
286 - </style>  
287 -  
288 - <iron-ajax  
289 - auto  
290 - id="data_request"  
291 - url={{dataUrl}}  
292 - verbose="true"  
293 - on-response="handleResponseData"  
294 - debounce-duration="300">  
295 - </iron-ajax>  
296 -  
297 - <iron-ajax  
298 - id="datales_list_request"  
299 - auto  
300 - url={{dataletsListUrl}}  
301 - handle-as="json"  
302 - on-response="handleResponseDatalets"  
303 - debounce-duration="300">  
304 - </iron-ajax>  
305 -  
306 - <iron-ajax  
307 - id="selectedDatalet_request"  
308 - url={{deepUrl}}  
309 - verbose="true"  
310 - on-response="handleSelectedDatalet"  
311 - debounce-duration="300">  
312 - </iron-ajax>  
313 -  
314 - <content>  
315 -  
316 - <neon-animated-pages id="pages" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">  
317 -  
318 - <neon-animatable>  
319 -  
320 - <div class="vertical justified layout">  
321 -  
322 - <div class="horizontal layout">  
323 - <div class="avatar" style="margin-left:15px">1</div>  
324 - <div class="title flex">  
325 - <div id="toolbar_title" class="big">Dataset source</div>  
326 - <div id="toolbar_description" class="small">Copy and paste/drag and drop in the textarea the url of datasource</div>  
327 - </div>  
328 - <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button>  
329 - </div>  
330 -  
331 - <div class="area_container">  
332 - <paper-tabs selected="{{DatasourceTabSelected}}">  
333 - <paper-tab>Select data source</paper-tab>  
334 - <paper-tab>Most popular</paper-tab>  
335 - <paper-tab>Search</paper-tab>  
336 - </paper-tabs>  
337 - <iron-pages selected="{{DatasourceTabSelected}}">  
338 - <div>  
339 - <div class="card-content">  
340 - <paper-dropdown-menu id="datasets-sources" label="Available datasets">  
341 - <paper-menu class="dropdown-content">  
342 - <template is="dom-repeat" items="{{datasets}}" as="dataset" index-as="index">  
343 - <paper-item id="{{index}}" on-tap="_datasourceSelected">{{dataset.name}}</paper-item>  
344 - </template>  
345 - </paper-menu>  
346 - </paper-dropdown-menu>  
347 - <paper-icon-button id="infoButton" on-click="_onInfoClick" icon="info-outline" alt="Information about selected dataset" title="info-button" style="color:#9e9e9e;"></paper-icon-button>  
348 - </div>  
349 -  
350 - <div><img src="static/images/or.png" style="position: relative;left: 50%;padding-top:20px"></div>  
351 -  
352 - <div class="card-content">  
353 - <paper-textarea class="custom_textarea" id="data_url" label="Dataset api data url" floatingLabel value="{{dataUrl}}" on-dragover="_handleDatasourceDragOver"></paper-textarea>  
354 - </div>  
355 -  
356 -  
357 - </div>  
358 - <div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div>  
359 - <div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div>  
360 - </iron-pages>  
361 - </div>  
362 -  
363 - </div>  
364 -  
365 - </neon-animatable>  
366 -  
367 - <neon-animatable>  
368 -  
369 - <div class="vertical justified layout">  
370 -  
371 - <div class="horizontal layout">  
372 - <paper-icon-button id="PrevButton" class="toolbar_button x-scope" on-click="_onPrevClick" icon="chevron-left" alt="arrow-back" title="arrow-back"></paper-icon-button>  
373 - <div class="avatar">2</div>  
374 - <div class="title flex">  
375 - <div id="toolbar_title" class="big">Dataset source</div>  
376 - <div id="toolbar_description" class="small">Copy and paste/drag and drop in the textarea the url of datasource</div>  
377 - </div>  
378 - <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button>  
379 - </div>  
380 -  
381 - <div class="horizontal layout">  
382 -  
383 - <div id="fields_placeholder" class="area_container flexchild" style="min-width:300px">  
384 - <treeview-controllet id="fields_treeview"></treeview-controllet>  
385 - </div>  
386 -  
387 - <div id="table_fields_container" class="area_container flex2child">  
388 - <div id="table_component_place_holder"></div>  
389 - </div>  
390 -  
391 - </div>  
392 -  
393 - </div>  
394 -  
395 - </neon-animatable>  
396 -  
397 - <neon-animatable style="height:100vh">  
398 -  
399 - <div class="vertical justified layout">  
400 -  
401 - <div class="horizontal layout">  
402 - <paper-icon-button id="PrevButton" class="toolbar_button x-scope" on-click="_onPrevClick" icon="chevron-left" alt="arrow-back" title="arrow-back"></paper-icon-button>  
403 - <div class="avatar">3</div>  
404 - <div class="title flex">  
405 - <div id="toolbar_title" class="big">Data mapping</div>  
406 - <div id="toolbar_description" class="small">Select the visualization from the slider, drag and drop the selected fields in visualization parameter area, customize the visualization if you need</div>  
407 - </div>  
408 - <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button>  
409 - </div>  
410 -  
411 -  
412 - <div class="horizontal layout">  
413 -  
414 - <div class="">  
415 - <div id="visualization_slider_area" class="area_container"></div>  
416 - <div id="fields_mapping_area" class="area_container">  
417 -  
418 - <div id="selectedFields_main_container" class="field-mapping-card">  
419 - <div class="title">  
420 - <div class="medium">Selected fields</div>  
421 - </div>  
422 - <div id="selectedFields_container" class="area_container"></div>  
423 - </div>  
424 -  
425 - <div id="idm_fields_main_container" class="field-mapping-card">  
426 - <div class="title">  
427 - <div class="medium">Datalet fields</div>  
428 - </div>  
429 - <div id="datalet_idm_fields_container" class="area_container"></div>  
430 - </div>  
431 - </div>  
432 - </div>  
433 -  
434 - <div id="datalet_placeholder" style="min-width: 43%;margin-top:10px;"></div>  
435 -  
436 - </div>  
437 -  
438 - </div>  
439 -  
440 - </neon-animatable>  
441 -  
442 - <neon-animatable>  
443 - <div class="vertical justified layout">  
444 -  
445 - <div class="horizontal layout">  
446 - <paper-icon-button id="PrevButton" class="toolbar_button x-scope" on-click="_onPrevClick" icon="chevron-left" alt="arrow-back" title="arrow-back"></paper-icon-button>  
447 - <div class="avatar">4</div>  
448 - <div class="title flex">  
449 - <div id="toolbar_title" class="big">Finalize visualization</div>  
450 - <div id="toolbar_description" class="small">Assign the values for label parameters (e.g. title for you visualization).</div>  
451 - </div>  
452 - <paper-icon-button id="finish_button" on-click="_onFinish" icon="add-circle" alt="Conforms the creation" title="finish"></paper-icon-button>  
453 - </div>  
454 -  
455 - <div class="horizontal layout">  
456 - <div style="margin-top: 10px;">  
457 - <div class="title">  
458 - <div class="medium">Layout fields</div>  
459 - </div>  
460 - <div id="idm_layout_main_container" class="area_container">  
461 - <div id="idm_layout_container" class="area_container"></div>  
462 - </div>  
463 -  
464 - <div id="comment">  
465 - <paper-textarea class="custom_textarea" id="commentArea" label="Max 100 character comment" maxlength="100"></paper-textarea>  
466 - </div>  
467 -  
468 - </div>  
469 -  
470 - <div id="datalet_placeholder_2" style="min-width: 43%;margin-top: 10px;"></div>  
471 -  
472 - </div>  
473 - </div>  
474 -  
475 - </neon-animatable>  
476 -  
477 - </neon-animated-pages>  
478 -  
479 - <paper-toast id="message" text=""></paper-toast>  
480 -  
481 - <paper-dialog id="infoDialog">  
482 - <h2 id="infoDialogTitle"></h2>  
483 - <paper-dialog-scrollable id="infoDialogContent">  
484 - </paper-dialog-scrollable>  
485 - </paper-dialog>  
486 -  
487 - </content>  
488 - </template>  
489 -  
490 - <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>  
491 - <script src="../../../DEEPCLIENT/js/deepClient.js"></script>  
492 -  
493 - <script>  
494 -  
495 - Polymer({  
496 -  
497 - is : 'data-sevc-controllet',  
498 -  
499 - /**  
500 - * Received when the user selects a datalet from slider.  
501 - *  
502 - * @event items-slider-controllet_item-selected  
503 - */  
504 -  
505 - /**  
506 - * Received when the user drags a selected fields in to one of the source input data model field  
507 - *  
508 - * @event draggable-element-controllet_content-dragged  
509 - */  
510 -  
511 - /**  
512 - * Received when the user selects one field from treeview controllet  
513 - *  
514 - * @event treeview-controllet-fileds-selected  
515 - */  
516 -  
517 - /**  
518 - * Received when the user drags a selected fields in to one of the source input data model field  
519 - *  
520 - * @event draggable-element-controllet_content-dragged  
521 - */  
522 -  
523 - /**  
524 - * Received when the user change text value of the selected datalet layout inputs  
525 - *  
526 - * @event text-element-controllet_content-changed  
527 - */  
528 -  
529 - /**  
530 - * Fired when the user press to finish button. At this event are attached all information about the visualization currently created  
531 - *  
532 - * @event data-sevc-controllet.dataletCreated  
533 - */  
534 -  
535 - listeners : {  
536 - 'items-slider-controllet_item-selected' : '_dataletSelected',  
537 - 'draggable-element-controllet_content-dragged' : '_fieldsMapped',  
538 - 'treeview-controllet_fileds-selected' : '_fieldsSelected',  
539 - 'text-element-controllet_content-changed' : '_textElementChanged'  
540 - },  
541 -  
542 - properties : {  
543 -  
544 - entryAnimation : {  
545 - type : String,  
546 - value : ""  
547 - },  
548 -  
549 - exitAnimation : {  
550 - type : String,  
551 - value : ""  
552 - },  
553 -  
554 - selected : {  
555 - type : Number,  
556 - value : 0  
557 - },  
558 -  
559 - /**  
560 - * It represents the data url from CKAN api  
561 - *  
562 - * @attribute dataUrl  
563 - * @type string  
564 - * @default 'null'  
565 - */  
566 - dataUrl : {  
567 - type : String,  
568 - value : undefined,  
569 - observer : '_dataUrlChanged'  
570 - },  
571 - /**  
572 - * It represents the DEEP url to get information about the datalets  
573 - *  
574 - * @attribute deepUrl  
575 - * @type string  
576 - * @default 'null'  
577 - */  
578 - deepUrl : {  
579 - type : String,  
580 - value : undefined  
581 - },  
582 - /**  
583 - * It's used to store the list of datalets returned from DEEP  
584 - *  
585 - * @attribute datalets_list  
586 - * @type Array  
587 - * @default empty  
588 - */  
589 - datalets_list : {  
590 - type : Array ,  
591 - value : []  
592 - },  
593 - /**  
594 - * It's used to store the selected datalet. It will be set when the controllet get the event of selection by item slider (items-slider-controllet_item-selected)  
595 - *  
596 - * @attribute selectedDatalet  
597 - * @type String  
598 - * @default ''  
599 - */  
600 - selectedDatalet : {  
601 - type : String,  
602 - value : undefined  
603 - },  
604 - /**  
605 - * It's used to store the list of selected fields by user  
606 - *  
607 - * @attribute selectedFields  
608 - * @type Array  
609 - * @default empty  
610 - */  
611 - selectedFields : {  
612 - type : Array,  
613 - value : undefined  
614 - },  
615 - /**  
616 - * It contains all attributes for the datalet preset. It'll be used when the controllet is called to modify an exsting datalet.  
617 - */  
618 - dataletPreset:{  
619 - type: Object,  
620 - value: undefined  
621 - },  
622 - /**  
623 - * It's used to store the params to give to datalet. This kind of params will not processed by selection step  
624 - *  
625 - * @attribute paramsFields  
626 - * @type Object  
627 - * @default empty  
628 - */  
629 - paramsFields:{  
630 - type: Object,  
631 - value: {}  
632 - },  
633 - /**  
634 - * It's used to store the tab index in the first pass  
635 - *  
636 - * @attribute DatasourceTabSelected  
637 - * @type Number  
638 - * @default 0  
639 - */  
640 - DatasourceTabSelected : {  
641 - type : Number,  
642 - value : 0  
643 - },  
644 - /**  
645 - * It's used to store the datasets to show in the contexual menu  
646 - *  
647 - * @attribute datasets  
648 - * @type Array  
649 - * @default empty  
650 - */  
651 - datasets :  
652 - {  
653 - type : Array,  
654 - value : []  
655 - }  
656 - },  
657 - /**  
658 - * It is called after the elementย’s template has been stamped and all elements inside the elementย’s local DOM have been configured (with values bound from parents, deserialized attributes, or else default values) and had their ready method called.  
659 - * In this phase the scrollbar will be initialized  
660 - *  
661 - * @method handleResponseData  
662 - *  
663 - * @param {Event} e  
664 - */  
665 -  
666 - ready : function(){  
667 -  
668 - $(this.$.fields_placeholder).perfectScrollbar();  
669 - $(this.$.selectedFields_main_container).perfectScrollbar();  
670 - $(this.$.idm_fields_main_container).perfectScrollbar();  
671 - $(this.$.idm_layout_main_container).perfectScrollbar();  
672 - $(this.$.table_fields_container).perfectScrollbar();  
673 -  
674 - if(this.dataletPreset != undefined) {  
675 - this.$.data_url.value = this.dataletPreset['data-url'];  
676 - this.selected = 1;  
677 - }  
678 - },  
679 - /**  
680 - * Utility function to inject datalet in a placeholder  
681 - */  
682 - injectDatalet: function(place_holder){  
683 - var datalet_params_2 ={  
684 - component : this.selectedDatalet,  
685 - params : this.paramsFields,  
686 - fields : this.selectedFields,  
687 - placeHolder : place_holder  
688 - };  
689 - ComponentService.deep_url = this.deepUrl;  
690 - ComponentService.getComponent(datalet_params_2);  
691 - },  
692 -  
693 - /**  
694 - * Callback to parse the data requested when dataUrl change its value  
695 - *  
696 - * @method handleResponseData  
697 - *  
698 - * @param {Event} e  
699 - */  
700 - handleResponseData : function(e){  
701 -  
702 - this.$.fields_treeview.init(e.detail.response, this.selectedFields);  
703 -  
704 - },  
705 -  
706 - /**  
707 - * Callback to parse the components response object  
708 - *  
709 - * @method handleResponseDatalets  
710 - *  
711 - * @param {Event} e  
712 - */  
713 - handleResponseDatalets : function(e){  
714 - this.datalets_list = new Array();  
715 - for(var i=0;i < e.detail.response.length;i++){  
716 - var datalet_info = { name : e.detail.response[i].name ,  
717 - image : e.detail.response[i].url + e.detail.response[i].name + ".png"  
718 - };  
719 -  
720 - this.datalets_list.push(datalet_info);  
721 - }  
722 -  
723 - if(this.selectedDatalet == undefined)  
724 - this.$.visualization_slider_area.innerHTML = '<items-slider-controllet items=\'' + JSON.stringify(this.datalets_list) + '\'' +  
725 - '\'></items-slider-controllet>';  
726 - else  
727 - this.$.visualization_slider_area.innerHTML = '<items-slider-controllet items=\'' + JSON.stringify(this.datalets_list) + '\'' +  
728 - 'selected-card=\'' + this.selectedDatalet + '\'></items-slider-controllet>';  
729 -  
730 - },  
731 - /**  
732 - * Callback to dataset selection from list in the phase three. When a datalet is selected this function will build a bundle of box items, based on the datalet input data model,  
733 - * to allow user to drag the fields, from the selected fields box, and create a new visualization.  
734 - *  
735 - * @method handleSelectedDatalet  
736 - *  
737 - * @param {Event} e  
738 - */  
739 - handleSelectedDatalet : function(e){  
740 -  
741 - var response = e.detail.response;  
742 - this.$.datalet_idm_fields_container.innerHTML = "";  
743 - this.$.idm_layout_container.innerHTML = "";  
744 -  
745 - var input;  
746 - var layouts = jQuery.extend(true, {}, response.idm.inputs.layouts);  
747 -  
748 - if(response.idm.inputs.input.constructor == Object) {  
749 - if(response.idm.inputs.input.selection == "*")  
750 - {  
751 - input = response.idm.inputs.input;  
752 - response.idm.inputs.input = new Array();  
753 - for(var i=0;i<this.selectedFields.length;i++){  
754 - var newInput = jQuery.extend(true, {}, input);  
755 - newInput.name = input.name + ' ' + (i + 1);  
756 - response.idm.inputs.input.push(newInput);  
757 - }  
758 - }  
759 - }  
760 -  
761 - var heading;  
762 - var id;  
763 -  
764 - for(var i =0; i < response.idm.inputs.input.length; i++) {  
765 - var html = '<draggable-element-controllet is-target="true" ';  
766 - input = response.idm.inputs.input[i];  
767 -  
768 - heading = ' heading="' + input.name + '"';  
769 - id = ' id="' + (i + 1) + '"';  
770 -  
771 - html += heading + id;  
772 - html += ' description="' + input.description + '"' +  
773 - ' number="' + (i + 1) + '"';  
774 -  
775 - if(this.selectedFields != undefined) {  
776 - if(this.selectedFields[i] != undefined) {  
777 - html += ' value="' + this.selectedFields[i] + '"' +  
778 - ' label="' + this.selectedFields[i].split(",")[this.selectedFields[i].split(",").length - 1] + '"';  
779 - }  
780 - }  
781 -  
782 - html += '></draggable-element-controllet><br>';  
783 - this.$.datalet_idm_fields_container.innerHTML += html;  
784 -  
785 - }  
786 -  
787 - if(layouts.input != undefined) {  
788 - if(layouts.input.constructor == Object){  
789 - layouts.input = new Array(jQuery.extend(true, {}, layouts.input));  
790 - }  
791 -  
792 - html = '<text-element-controllet ';  
793 - for (var i = 0; i < layouts.input.length; i++) {  
794 - html += '<text-element-controllet heading="' + layouts.input[i].name + '" ' +  
795 - 'description="' + layouts.input[i].description + '" ' +  
796 - 'number="' + (i + 1) + '" ';  
797 - if(this.dataletPreset != undefined){  
798 - html += 'value="' + this.dataletPreset[Object.keys(this.dataletPreset)[(i + 1)]] + '"';  
799 - }  
800 -  
801 - html += '></text-element-controllet>';  
802 - }  
803 - this.$.idm_layout_container.innerHTML = html;  
804 - }  
805 -  
806 - if(this.selectedFields != undefined) this.generateDataletPreview();  
807 -  
808 - },  
809 - /**  
810 - * Generate the datalet preview when user mapped fields. it even retrieves the value of layout inputs values.  
811 - *  
812 - * @method generateDataletPreview  
813 - */  
814 - generateDataletPreview : function(){  
815 -  
816 - var input_mapped_fields = Polymer.dom(this.$.datalet_idm_fields_container).querySelectorAll('draggable-element-controllet[is-target=true]');  
817 - this.selectedFields = Array();  
818 -  
819 - for (var i = 0; i < input_mapped_fields.length; i++) {  
820 - if (input_mapped_fields[i].value != "") {  
821 - this.selectedFields.push(input_mapped_fields[i].value);  
822 - }  
823 - }  
824 -  
825 - var input_layouts_fields = Polymer.dom(this.$.idm_layout_container).querySelectorAll('text-element-controllet');  
826 - this.paramsFields = {'data-url' : this.dataUrl};  
827 -  
828 - for (var i = 0; i < input_layouts_fields.length; i++) {  
829 - if (input_layouts_fields[i].value != "") {  
830 - this.paramsFields[input_layouts_fields[i].heading] = input_layouts_fields[i].value;  
831 - }  
832 - }  
833 -  
834 - this.injectDatalet(this.$.datalet_placeholder);  
835 -  
836 - },  
837 - /**  
838 - * Validate the current pass in order to access to next one.  
839 - *  
840 - * @method validateCurrentPass  
841 - *  
842 - * @param {Number} next_selected_pass  
843 - */  
844 - validateCurrentPass : function(next_selected_pass){  
845 -  
846 - switch(next_selected_pass){  
847 - case 0:  
848 - return true;  
849 - case 1:  
850 - if(this.$.data_url.value == undefined){  
851 - this.$.message.text = "You have to select a dataset to access to pass 2.";  
852 - this.$.message.show();  
853 - return false;  
854 - }else{  
855 - return true;  
856 - }  
857 -  
858 - case 2:  
859 - if(Polymer.dom(this.$.selectedFields_container).querySelectorAll('draggable-element-controllet') == 0){  
860 - this.$.message.text = "You have to select a set of fields to access to pass 3.";  
861 - this.$.message.show();  
862 - return false;  
863 - }else{  
864 - return true;  
865 - }  
866 - case 3:  
867 - this.injectDatalet(this.$.datalet_placeholder_2);  
868 - return true;  
869 - }  
870 -  
871 - },  
872 - /**  
873 - * Callback for manage the previous pass button  
874 - *  
875 - * @method _onPrevClick  
876 - *  
877 - */  
878 - _onPrevClick : function() {  
879 - if(!this.validateCurrentPass(this.selected === 0 ? 0 : (this.selected - 1))) return;  
880 -  
881 - this.entryAnimation = 'slide-from-left-animation';  
882 - this.exitAnimation = 'slide-right-animation';  
883 - this.selected = this.selected === 0 ? 0 : (this.selected - 1);  
884 - },  
885 - /**  
886 - * Callback to manage the next pass button  
887 - *  
888 - * @method _onNextClick  
889 - *  
890 - */  
891 - _onNextClick : function() {  
892 -  
893 - if(!this.validateCurrentPass(this.selected === 3 ? 3 : (this.selected + 1))) return;  
894 -  
895 - this.entryAnimation = 'slide-from-right-animation';  
896 - this.exitAnimation = 'slide-left-animation';  
897 - this.selected = this.selected === 3 ? 3 : (this.selected + 1);  
898 - },  
899 - /**  
900 - * Callback to manage InfoButton click to give user information about the selected dataset  
901 - *  
902 - */  
903 - _onInfoClick : function(){  
904 -  
905 - this.$.infoDialog.open();  
906 -  
907 - },  
908 - /**  
909 - * Callback related to datasource selection from select menu  
910 - *  
911 - * @method _datasourceSelected  
912 - *  
913 - * @param {Event} e  
914 - */  
915 - _datasourceSelected : function(e){  
916 -  
917 - this.$.data_url.value = this.datasets[parseInt(e.target.id)].url;  
918 - this.$.infoDialogTitle.innerHTML = this.datasets[parseInt(e.target.id)].name;  
919 - this.$.infoDialogContent.innerHTML = this.datasets[parseInt(e.target.id)].description;  
920 -  
921 - },  
922 - /**  
923 - * Callback related to data url change  
924 - *  
925 - * @method _dataUrlChanged  
926 - *  
927 - * @param {Event} e  
928 - */  
929 - _dataUrlChanged : function(newValue, oldValue){  
930 - this.$.data_request.generateRequest();  
931 - },  
932 - /**  
933 - * Callback related to event 'items-slider-controllet_item-selected' fired by items-slider-controllet when the user selects a datalet  
934 - *  
935 - * @method _dataletSelected  
936 - *  
937 - * @param {Event} e  
938 - */  
939 - _dataletSelected : function(e){  
940 - this.selectedDatalet = e.detail.datalet;  
941 - this.$.selectedDatalet_request.url = this.deepUrl + e.detail.datalet;  
942 - this.$.selectedDatalet_request.generateRequest();  
943 -  
944 - },  
945 - /**  
946 - * Callback related to event 'treeview-controllet-fileds-selected' fired by treeview-controllet when the user selects a field  
947 - *  
948 - * @method _fieldsSelected  
949 - *  
950 - * @param {Event} e  
951 - */  
952 - _fieldsSelected : function(e){  
953 -  
954 - this.selectedFields = e.detail.fields;  
955 - this.$.selectedFields_container.innerHTML = "";  
956 - for(var i=0;i<e.detail.fields.length;i++) {  
957 - this.$.selectedFields_container.innerHTML += '<draggable-element-controllet identifier="' + e.detail.fields[i] +  
958 - '" label="' + e.detail.fields[i].split(",")[e.detail.fields[i].split(",").length -1] +  
959 - '"></draggable-element-controllet><br>';  
960 - }  
961 -  
962 - var place_holder = (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) ? this.$.table_component_place_holder : this.$.table_component_place_holder[Object.keys(this.$.table_component_place_holder)[0]];  
963 -  
964 - var table_params ={  
965 - component : "datatable-datalet",  
966 - params :{  
967 - 'data-url' : this.dataUrl  
968 - },  
969 - fields : e.detail.fields,  
970 - placeHolder : this.$.table_component_place_holder  
971 - };  
972 -  
973 - ComponentService.deep_url = this.deepUrl;  
974 - ComponentService.getComponent(table_params);  
975 -  
976 - },  
977 - /**  
978 - * Callback related to event 'draggable-element-controllet_content-dragged' fired by draggable-element-controllet when the user drags a selected field in to input data model field  
979 - *  
980 - * @method _fieldsMapped  
981 - *  
982 - * @param {Event} e  
983 - */  
984 - _fieldsMapped : function(e){  
985 -  
986 - this.generateDataletPreview();  
987 -  
988 - },  
989 - /**  
990 - * Callback related to event 'text-element-controllet_content-changed' fired by text-element-controllet when the user change the value of text  
991 - *  
992 - * @method _textElementChanged  
993 - *  
994 - * @param {Event} e  
995 - */  
996 - _textElementChanged : function(e){  
997 - this.generateDataletPreview();  
998 - this.injectDatalet(this.$.datalet_placeholder_2);  
999 - },  
1000 - /**  
1001 - * Callback related to the drag operation in the dataUrl input area. It's used to delete previous value.  
1002 - *  
1003 - * @method _handleDatasourceDragOver  
1004 - *  
1005 - * @param {Event} e  
1006 - */  
1007 - _handleDatasourceDragOver : function(e){  
1008 - this.$.data_url.value = "";  
1009 - },  
1010 - /**  
1011 - * Callback related to the finish button.  
1012 - *  
1013 - * @method _onFinish  
1014 - *  
1015 - * @param {Event} e  
1016 - */  
1017 - _onFinish : function(e){  
1018 -  
1019 - if((this.selectedFields.length == 0) || this.selectedDatalet == ""){  
1020 - this.$.message.text = "You have to map the selected fields with datalets fields(by dragging) and select a datalet to export a new visualization.";  
1021 - this.$.message.show();  
1022 - return;  
1023 - }  
1024 -  
1025 - var data = {  
1026 - dataUrl : this.dataUrl,  
1027 - params : this.paramsFields,  
1028 - fields : this.selectedFields,  
1029 - datalet : this.selectedDatalet,  
1030 - comment : this.$.commentArea.value,  
1031 - staticData : JSON.stringify(this.$.datalet_placeholder.children[1].behavior.data)  
1032 - }  
1033 -  
1034 - this.fire('data-sevc-controllet.dataletCreated', {data : data});  
1035 -  
1036 - }  
1037 -  
1038 - });  
1039 -  
1040 - </script>  
1041 -  
1042 -</dom-module>  
1043 \ No newline at end of file 0 \ No newline at end of file
controllets/fullsize-page-with-card-controllet/fullsize-page-with-card-controllet.html
  View file @833ea9a
@@ -38,7 +38,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN @@ -38,7 +38,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
38 <div id="fixed" class="fixed" style$="background-color:{{color}}"></div> 38 <div id="fixed" class="fixed" style$="background-color:{{color}}"></div>
39 <div id="card" class="card" style$="background-color:{{color}}"> 39 <div id="card" class="card" style$="background-color:{{color}}">
40 <template is="dom-if" if="{{_checkUndefined(publicRoom)}}"> 40 <template is="dom-if" if="{{_checkUndefined(publicRoom)}}">
41 - <iframe id="public_room_iframe" src="/public-room/{{publicRoom}}" width="100%" height="100%"></iframe> 41 + <iframe id="public_room_iframe" src="public-room/{{publicRoom}}" width="100%" height="100%"></iframe>
42 </template> 42 </template>
43 </div> 43 </div>
44 44
datalets/base-datalet/base-datalet.html
  View file @833ea9a
@@ -96,6 +96,7 @@ Example : @@ -96,6 +96,7 @@ Example :
96 } 96 }
97 97
98 #span_description{ 98 #span_description{
  99 + font-style: italic;
99 color: #727272; 100 color: #727272;
100 } 101 }
101 </style> 102 </style>