SGH / 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 18 <dom-module id="create-card-controllet">
11 19  
12 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 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 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 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 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 159 </div>
224 160  
225 161 </template>
226 162  
227   - <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
228   -
229 163 <script>
230 164 Polymer({
231 165 is: "create-card-controllet",
232 166 properties: {
233 167 type:{
234 168 type: String,
235   - value: "text"
  169 + value: undefined//text or link
236 170 },
237 171  
238   - cardTitle:{
  172 + title:{//cardTitle
239 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 178 type: String,
250   - value: undefined,
251   - observer : '_valueChanged'
  179 + value: ""
252 180 },
253   - comment:{
  181 +
  182 + text:{
254 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 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 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 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 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 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 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 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 38 <div id="fixed" class="fixed" style$="background-color:{{color}}"></div>
39 39 <div id="card" class="card" style$="background-color:{{color}}">
40 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 42 </template>
43 43 </div>
44 44  
... ...
datalets/base-datalet/base-datalet.html
  View file @833ea9a
... ... @@ -96,6 +96,7 @@ Example :
96 96 }
97 97  
98 98 #span_description{
  99 + font-style: italic;
99 100 color: #727272;
100 101 }
101 102 </style>
... ...