SGH / COMPONENTS

Commit 88b60b91e6d6be7f47a48e7566f3f213fb53a9dd

Authored by Luigi Serra
2 parents b420f252 4143bce6

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

Inline Side-by-side
Showing 5 changed files with 212 additions and 562 deletions
controllets/animated-grid-controllet/animated-grid-controllet.html
  View file @88b60b9
@@ -16,7 +16,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN @@ -16,7 +16,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
16 16
17 :host { 17 :host {
18 display: block; 18 display: block;
19 - /*background: #000;*/ 19 + background: #FFFFFF;
  20 + /*margin-top: 16px;;*/
20 } 21 }
21 22
22 /* clearfix */ 23 /* clearfix */
@@ -28,7 +29,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN @@ -28,7 +29,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
28 } 29 }
29 30
30 /* ---- grid-item ---- */ 31 /* ---- grid-item ---- */
31 - ::content .grid-item {float: left;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;border: 3px solid white;} 32 + ::content .grid-item {
  33 + float: left;
  34 + box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;
  35 + border-top: 4px solid white;
  36 + border-left: 4px solid white;
  37 + cursor: pointer;
  38 + }
32 ::content .grid-sizer {width: 200px;} 39 ::content .grid-sizer {width: 200px;}
33 ::content .grid-item-w20 {width: 200px;} 40 ::content .grid-item-w20 {width: 200px;}
34 ::content .grid-item-w40 {width: 400px;} 41 ::content .grid-item-w40 {width: 400px;}
@@ -42,44 +49,41 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN @@ -42,44 +49,41 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
42 ::content .grid-item-c4 {background-color: #2C29FF;} 49 ::content .grid-item-c4 {background-color: #2C29FF;}
43 /* ---- grid-item ---- */ 50 /* ---- grid-item ---- */
44 51
45 - ::content .room-body {color:#FFFFFF;} 52 + ::content .room-body
  53 + {
  54 + height: calc(100% - 40px);/* 100% =*200/400 -4 border*/
  55 + width: calc(100% - 16px);
  56 + color:#FFFFFF;
  57 + padding: 8px;
  58 + word-wrap: break-word;
  59 + overflow: hidden;
  60 + text-overflow: ellipsis;
  61 + }
46 ::content .room-subject 62 ::content .room-subject
47 { 63 {
48 position: absolute; 64 position: absolute;
49 - width: 100%;  
50 - height: 30px;  
51 - bottom: 30px;  
52 - background-color: rgba(0,0,0,0.6); 65 + width: calc(100% - 16px);
  66 + height: 32px;
  67 + bottom: 32px;
  68 + background-color: rgba(0,0,0,0.8);
  69 + padding: 16px 0px 0px 16px;
53 color: #FFFFFF; 70 color: #FFFFFF;
54 - }  
55 - ::content .room-subject span  
56 - {  
57 - top: 5px;  
58 - left: 5px;  
59 - position: relative;  
60 - text-overflow: ellipsis; 71 + font-weight: 700;
  72 + white-space: nowrap;
  73 + word-wrap: break-word;
61 overflow: hidden; 74 overflow: hidden;
62 - white-space:nowrap;  
63 - text-overflow:ellipsis;  
64 - display:inline-block;  
65 - }  
66 - ::content .room-body span  
67 - {  
68 - top: 5px;  
69 - left: 5px;  
70 - position: relative;  
71 text-overflow: ellipsis; 75 text-overflow: ellipsis;
72 - overflow: hidden;  
73 - text-overflow:ellipsis;  
74 - display:inline-block;  
75 } 76 }
  77 +
76 ::content .room-timestamp 78 ::content .room-timestamp
77 { 79 {
78 position: absolute; 80 position: absolute;
79 - right:3px;  
80 - bottom: 3px;  
81 - font-size: 8px;  
82 - color: #CCCCCC; 81 + bottom: 0px;
  82 + right:0px;
  83 + color: #FFFFFF;
  84 + padding: 8px;
  85 + font-size: small;
  86 + line-height: 16px;
83 } 87 }
84 </style> 88 </style>
85 89
controllets/data-sevc-controllet/demo/index.html
  View file @88b60b9
@@ -21,7 +21,7 @@ @@ -21,7 +21,7 @@
21 <body> 21 <body>
22 22
23 <!--<span data-l10n-id="name"></span>--> 23 <!--<span data-l10n-id="name"></span>-->
24 - <data-sevc-controllet localization="fr" id="dsc" deep-url="http://192.168.232.128/DEEalerProvider/DEEP/" datalets-list-url="http://192.168.232.128/DEEalerProvider/DEEP/datalets-list"></data-sevc-controllet> 24 + <data-sevc-controllet localization="it" id="dsc" deep-url="http://172.16.15.77/DEEalerProvider/DEEP/" datalets-list-url="http://172.16.15.77/DEEalerProvider/DEEP/datalets-list"></data-sevc-controllet>
25 25
26 <script> 26 <script>
27 27
controllets/room-controllet/room-controllet.html
  View file @88b60b9
@@ -2,46 +2,79 @@ @@ -2,46 +2,79 @@
2 2
3 <link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html"> 3 <link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
4 4
  5 +<link rel="import" href="../../bower_components/iron-icons/editor-icons.html">
  6 +<link rel="import" href="../../bower_components/iron-icons/communication-icons.html">
  7 +<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
  8 +
5 <dom-module id="room-controllet"> 9 <dom-module id="room-controllet">
6 10
7 <template> 11 <template>
8 12
9 <style is="custom-style"> 13 <style is="custom-style">
10 14
11 - .room {  
12 - cursor: pointer; 15 + iron-icon {
  16 + padding: 0px;
  17 + margin: 0px;
13 } 18 }
14 19
15 - .room-body { 20 + iron-icon.this {
  21 + position: absolute;
  22 + top: -3px;
  23 + left: -3px;
  24 +
  25 + -moz-transform: scaleX(-1);
  26 + -o-transform: scaleX(-1);
  27 + -webkit-transform: scaleX(-1);
  28 + transform: scaleX(-1);
  29 + filter: FlipH;
  30 + -ms-filter: "FlipH";
16 31
17 } 32 }
18 33
19 - .room-subject { 34 + paper-dialog {
  35 + margin: 0px;
  36 + }
20 37
  38 + .room-tooltip {
  39 + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  40 + position: absolute;
  41 + min-width: 250px;
  42 + top: 49px;
  43 + left: 98px;
  44 + padding: 16px;
21 } 45 }
22 46
23 - .room-timestamp { 47 + .div_icon{
  48 + display: inline-block;
  49 + height: 20px;
  50 + width: 20px;
  51 + margin:4px 6px 4px 2px;
  52 + }
24 53
  54 + p {
  55 + padding-top: 8px;
  56 + margin: 0px;
  57 + white-space: nowrap;
25 } 58 }
26 59
27 - .room-tooltip {  
28 - position: absolute;  
29 - border: 2px solid #2196F3;  
30 - background-color: #E0E0E0;  
31 - min-width: 248px;  
32 - top: 0px;  
33 - left: 0px; 60 + .ptop{
  61 + padding-top: 0px;
34 } 62 }
35 63
36 </style> 64 </style>
37 65
38 - <div id={{roomId}} class$="grid-item room {{roomHeight}} {{roomWidth}}" on-mouseover="_showTooltip" on-mouseout="_hideTooltip">  
39 - <div class="room-body"><span>{{body}}</span></div> 66 + <div id={{roomId}} class$="grid-item {{roomHeight}} {{roomWidth}}" on-mouseover="_showTooltip" on-mouseout="_hideTooltip" style$="background-color: {{roomColor}};">
  67 + <div class="room-body">{{body}}</div>
40 <div class="room-subject"><span>{{subject}}</span></div> 68 <div class="room-subject"><span>{{subject}}</span></div>
41 <div class="room-timestamp">{{timestamp}}</div> 69 <div class="room-timestamp">{{timestamp}}</div>
42 70
43 - <paper-dialog id="pippo" class="room-tooltip">  
44 - {{roomId}} 71 + <paper-dialog id="room_info" class="room-tooltip">
  72 + <iron-icon icon="communication:call-made" class="this" style="color: #2196F3;"></iron-icon>
  73 + <p class="ptop">This room <b style="color: #2196F3;">{{subject}}</b>,</p>
  74 + <p>created by <b style="color: #2196F3;">{{roomOwner}}</b> has:</p>
  75 + <p><iron-icon class="div_icon" style$="background-color: {{roomColor}};"></iron-icon><b style$="color: {{roomColor}};">{{_howMany(roomShape, 0)}} views</b> (<b style$="color: {{roomColor}};">{{roomViews}}</b>),</p>
  76 + <p><iron-icon icon="editor:border-left"></iron-icon> <b>{{_howMany(roomShape, 1)}} comments</b> (<b>{{comments}}</b>) and</p>
  77 + <p><iron-icon icon="editor:border-bottom"></iron-icon> <b>{{_howMany(roomShape, 2)}} datasets</b> (<b>{{datasets}}</b>).</p>
45 </paper-dialog> 78 </paper-dialog>
46 </div> 79 </div>
47 80
@@ -75,6 +108,16 @@ @@ -75,6 +108,16 @@
75 value : "" 108 value : ""
76 }, 109 },
77 110
  111 + roomOwner : {
  112 + type : String,
  113 + value : ""
  114 + },
  115 +
  116 + roomShape : {
  117 + type : Array,
  118 + value : undefined
  119 + },
  120 +
78 body : { 121 body : {
79 type : String, 122 type : String,
80 value : "" 123 value : ""
@@ -90,7 +133,7 @@ @@ -90,7 +133,7 @@
90 value : "" 133 value : ""
91 }, 134 },
92 135
93 - openData : { 136 + roomViews : {
94 type : Number, 137 type : Number,
95 value : undefined 138 value : undefined
96 }, 139 },
@@ -98,31 +141,31 @@ @@ -98,31 +141,31 @@
98 comments : { 141 comments : {
99 type : Number, 142 type : Number,
100 value : undefined 143 value : undefined
  144 + },
  145 +
  146 + datasets : {
  147 + type : Number,
  148 + value : undefined
101 } 149 }
102 150
103 }, 151 },
104 152
105 attached : function() { 153 attached : function() {
106 - var room = document.getElementById(this.roomId);  
107 - $(room).css('background', this.roomColor); 154 + console.log(this.views);
108 }, 155 },
109 156
110 _showTooltip: function() { 157 _showTooltip: function() {
111 -  
112 - var room = document.getElementById(this.roomId);  
113 - var pos = room.getBoundingClientRect();  
114 - console.log(pos.top);  
115 - console.log(pos.left);  
116 -// $(this.$.pippo).css("top", 1000);  
117 -// $(this.$.pippo).css("left", 100);  
118 -// $("#pippo").css("top", pos.top - 4);  
119 -// $("#pippo").css("left", pos.left - 4);  
120 - this.$.pippo.open(); 158 + this.$.room_info.open();
121 }, 159 },
122 160
123 _hideTooltip: function() { 161 _hideTooltip: function() {
124 - this.$.pippo.close();  
125 - console.log("eeeeeeeeeeeeeeeeee") 162 + this.$.room_info.close();
  163 + },
  164 +
  165 + _howMany: function(A, i) {
  166 +// return this.roomShape[i];
  167 +// console.log(i);
  168 + return A[i];
126 } 169 }
127 170
128 }); 171 });
datalets/datasetexplorer-datalet/js/buildtreemap.js
  View file @88b60b9
@@ -15,7 +15,6 @@ function build(root, meta, place_holder, select_listener, width, height) { @@ -15,7 +15,6 @@ function build(root, meta, place_holder, select_listener, width, height) {
15 15
16 var x = d3.scale.linear() 16 var x = d3.scale.linear()
17 .domain([0, width]) 17 .domain([0, width])
18 - .domain([0, width])  
19 .range([0, width]); 18 .range([0, width]);
20 19
21 var y = d3.scale.linear() 20 var y = d3.scale.linear()
@@ -247,8 +246,8 @@ function build(root, meta, place_holder, select_listener, width, height) { @@ -247,8 +246,8 @@ function build(root, meta, place_holder, select_listener, width, height) {
247 line = [word], 246 line = [word],
248 lineNumber = 0, 247 lineNumber = 0,
249 lineHeight = 1.1, // ems 248 lineHeight = 1.1, // ems
250 - x = parseFloat(text.attr("x")),  
251 - y = parseFloat(text.attr("y")), 249 + //x = parseFloat(text.attr("x")),
  250 + //y = parseFloat(text.attr("y")),
252 dy = parseFloat(text.attr("dy")); 251 dy = parseFloat(text.attr("dy"));
253 text.selectAll("tspan").remove(); 252 text.selectAll("tspan").remove();
254 253
demo.html
  View file @88b60b9
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html lang="en"> 2 <html lang="en">
3 <head> 3 <head>
  4 + <meta charset="UTF-8">
  5 +
  6 + <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
  7 +
4 <link rel="import" href="bower_components/iron-component-page/iron-component-page.html"> 8 <link rel="import" href="bower_components/iron-component-page/iron-component-page.html">
5 - <link rel="import" href="bower_components/paper-drawer-panel/paper-drawer-panel.html">  
6 - <link rel="import" href="bower_components/paper-menu/paper-menu.html">  
7 <link rel="import" href="bower_components/paper-item/paper-item.html"> 9 <link rel="import" href="bower_components/paper-item/paper-item.html">
8 <link rel="import" href="bower_components/paper-dropdown-menu/paper-dropdown-menu.html"> 10 <link rel="import" href="bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
9 <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html"> 11 <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
10 - <link rel="import" href="bower_components/paper-styles/color.html">  
11 - <link rel="import" href="bower_components/paper-input/paper-textarea.html">  
12 - <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">  
13 - <link rel="import" href="bower_components/iron-ajax/iron-ajax.html">  
14 -  
15 - <link rel="import" href="controllets/animated-button-container-controllet/animated-button-container-controllet.html">  
16 - <link rel="import" href="controllets/items-list-controllet/item-list-controllet.html">  
17 - <link rel="import" href="controllets/draggable-element-controllet/draggable-element-controllet.html">  
18 - <link rel="import" href="controllets/treeview-controllet/treeview-controllet.html">  
19 - <link rel="import" href="controllets/text-element-controllet/text-element-controllet.html"> 12 + <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
20 13
21 - <script type="text/javascript" src="datalets/shared_js/jquery-1.11.2.min.js"></script>  
22 <script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> 14 <script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
23 - <script src="controllets/shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>  
24 - <script src="../DEEPCLIENT/js/deepClient.js"></script> 15 + <script type="text/javascript" src="datalets/shared_js/jquery-1.11.2.min.js"></script>
25 <script type="text/javascript" src="docs/js/editarea_0_8_2/edit_area/edit_area_full.js"></script> 16 <script type="text/javascript" src="docs/js/editarea_0_8_2/edit_area/edit_area_full.js"></script>
26 17
27 - <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>  
28 - <link rel="stylesheet" href="controllets/shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">  
29 - <link rel="import" href="bower_components/paper-menu-button/paper-menu-button.html">  
30 - <meta charset="UTF-8">  
31 -  
32 18
33 <script type="text/javascript"> 19 <script type="text/javascript">
34 - selected_component_url = "";  
35 -  
36 $(document).ready(function () { 20 $(document).ready(function () {
37 - window.addEventListener("treeview-controllet_fileds-selected", DEEP._fieldsSelected, false);  
38 - window.addEventListener("items-list-controllet_item-selected", DEEP._dataletSelected, false);  
39 - window.addEventListener("draggable-element-controllet_content-dragged", DEEP._fieldsMapped, false);  
40 - window.addEventListener("text-element-controllet_content-changed", DEEP._textElementChanged, false);  
41 -  
42 editAreaLoader.init({ 21 editAreaLoader.init({
43 - id : "sbiricuda" // textarea id  
44 - ,syntax: "html" // syntax to be uses for highgliting  
45 - ,start_highlight: true // to display with highlight mode on start-up  
46 - ,syntax: "html"  
47 - ,replace_tab_by_spaces: 4,  
48 - isEditable : false, 22 + id : "sbiricuda", // textarea id
  23 + syntax: "html", // syntax to be uses for highgliting
  24 + start_highlight: true, // to display with highlight mode on start-up
  25 + replace_tab_by_spaces: 4,
  26 + isEditable : false
49 }); 27 });
50 }); 28 });
  29 +
  30 + var createHTML = function(e)
  31 + {
  32 + var dataletHTML = "";
  33 +
  34 + dataletHTML = '<' + e.detail.data.datalet;
  35 +
  36 + for (var property in e.detail.data.params) {
  37 + if (e.detail.data.params.hasOwnProperty(property)) {
  38 + if(property != "_colorIndex")
  39 + dataletHTML += ' ' + property + '="' + e.detail.data.params[property] + '"';
  40 + }
  41 + }
  42 +
  43 + dataletHTML += ' fields=\'' + JSON.stringify(e.detail.data.fields) + '\'';
  44 + dataletHTML += ' data=\'' + e.detail.data.staticData + '\'>';
  45 + dataletHTML += '</'+e.detail.data.datalet+'>';
  46 +
  47 + var dataletImport = '\<script type="text/javascript" src="https://cdn.jsdelivr.net/webcomponentsjs/0.7.16/webcomponents-lite.min.js"\>\<\/script\>\n' +
  48 + '\<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"\>\<\/script\>\n' +
  49 + '<!-- REMOVE THE PREVIOUS SCRIPT TAGS IF YOUR PAGE ALREADY USES JQUERY AND POLYFILL LIBRARIES -->\n';
  50 +
  51 + var dataletLink = '<link rel="import" href="http://deep.routetopa.eu/COMPONENTS/datalets/'+e.detail.data.datalet+'/'+e.detail.data.datalet+'.html" /> \n';
  52 +
  53 + editAreaLoader.setValue("sbiricuda", dataletImport+dataletLink+dataletHTML);
  54 + }
  55 +
51 </script> 56 </script>
52 57
53 <style> 58 <style>
  59 +
54 body { 60 body {
55 font-family: 'Roboto', sans-serif; 61 font-family: 'Roboto', sans-serif;
56 } 62 }
57 63
58 - .avatar  
59 - {  
60 - display: inline-block;  
61 - height: 0.5em;  
62 - width: 0.5em;  
63 - border-radius: 50%;  
64 - /*background: #3f51b5;*/  
65 - color: white;  
66 - line-height: 2em;  
67 - font-size: 1.87em;  
68 - text-align: center;  
69 - margin-right: 5px;  
70 - }  
71 -  
72 #toolbar{ 64 #toolbar{
73 background: #2196F3 ; 65 background: #2196F3 ;
74 } 66 }
  67 +
75 #logo{ 68 #logo{
76 width: 56px; 69 width: 56px;
77 height: 56px; 70 height: 56px;
@@ -81,90 +74,10 @@ @@ -81,90 +74,10 @@
81 background-position: center center; 74 background-position: center center;
82 75
83 } 76 }
84 - .area_container  
85 - {  
86 - overflow: hidden;  
87 - margin : 0.8em;  
88 - padding : 0.8em;  
89 - border-width: 1em;  
90 - border-radius: 0.125rem;  
91 - box-shadow: 0.125em 0.125em 0.1125em 0.125em rgba(0, 0, 0, 0.25);  
92 - }  
93 -  
94 - #visualization_slider_area  
95 - {  
96 - min-width: 566px;  
97 - height: 100px;  
98 - }  
99 - .content-card {  
100 - position: relative;  
101 - float: left;  
102 - margin: .2em;  
103 - width: 14%;  
104 - min-height: 100px;  
105 - height: 40%;  
106 - background: #fff;  
107 - -moz-border-radius: 0.125rem;  
108 - -webkit-border-radius: 0.125rem;  
109 - border-radius: 0.125rem;  
110 - box-shadow: 0 0.625em 0.5125em 0 rgba(0, 0, 0, 0.25);  
111 - -webkit-box-shadow: 0 0.625em 0.5125em 0 rgba(0, 0, 0, 0.25);  
112 - -moz-box-shadow: 0 0.625em 0.5125em 0 rgba(0, 0, 0, 0.25);  
113 - padding: 1em;  
114 - }  
115 -  
116 - .content-selected{  
117 - position: relative;  
118 - float: left;  
119 - top : 5%;  
120 - margin : .2em;  
121 - width: 14%;  
122 - height: 40%;  
123 -  
124 - background: #fff;  
125 - border-style: solid;  
126 - border-width: 0.03em;  
127 - -moz-border-radius: 0.125rem;; /* Firefox */  
128 - -webkit-border-radius: 0.125rem;; /* Safari, Chrome */  
129 - border-radius: 0.125rem;  
130 - box-shadow: 0 1.825em 1.7125em 0 rgba(0, 0, 0, 0.50);  
131 - -webkit-box-shadow: 0 1.825em 1.7125em 0 rgba(0, 0, 0, 0.50);  
132 - -moz-box-shadow: 0 1.825em 1.7125em 0 rgba(0, 0, 0, 0.50);  
133 - padding: 1em;  
134 - }  
135 -  
136 </style> 77 </style>
137 78
138 </head> 79 </head>
139 -<body unresolved>  
140 -  
141 -<template id="DEEP" is="dom-bind">  
142 -  
143 - <iron-ajax  
144 - auto  
145 - id="data_request"  
146 - url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=07843fc3-07e1-4c66-9be4-fed43ca4a26f"  
147 - verbose="true"  
148 - on-response="handleResponseData"  
149 - debounce-duration="300">  
150 - </iron-ajax>  
151 -  
152 - <iron-ajax  
153 - id="datales_list_request"  
154 - auto  
155 - url={{datasetsList}}  
156 - handle-as="json"  
157 - on-response="handleResponseDatalets"  
158 - debounce-duration="300">  
159 - </iron-ajax>  
160 -  
161 - <iron-ajax  
162 - id="selected_datalet_request"  
163 - url={{deepUrl}}  
164 - verbose="true"  
165 - on-response="handleSelectedDatalet"  
166 - debounce-duration="300">  
167 - </iron-ajax> 80 +<body>
168 81
169 <paper-toolbar id="toolbar"> 82 <paper-toolbar id="toolbar">
170 <paper-menu-button> 83 <paper-menu-button>
@@ -175,380 +88,71 @@ @@ -175,380 +88,71 @@
175 </paper-menu> 88 </paper-menu>
176 </paper-menu-button> 89 </paper-menu-button>
177 <span class="title">DatalEts-Ecosystem Provider - Datalet Creator</span> 90 <span class="title">DatalEts-Ecosystem Provider - Datalet Creator</span>
178 - <a href="http://routetopa.eu/" target="_blank"><paper-icon-button id="logo" ></paper-icon-button></a> 91 + <a href="http://routetopa.eu/" target="_blank"><paper-icon-button id="logo"></paper-icon-button></a>
179 </paper-toolbar> 92 </paper-toolbar>
180 - <div id="main_content">  
181 - <div class="vertical justified layout" style="margin-top: 40px;">  
182 -  
183 - <div class="horizontal layout area_container">  
184 - <p>  
185 - Using this page you can create a Datalet, a off-the-shelf, reusable web-component able to load,  
186 - query, filter, and visualise any dataset content (e.g. through HighCharts Javascript library).  
187 - Datalet are reusable since they can be placed in every web page, like institutional web-sites,  
188 - blogs, forums and so on, without any knowledge on how it effectively is implemented.  
189 - </p>  
190 - </div>  
191 -  
192 - <div class="horizontal layout">  
193 - <paper-textarea style="width: 80%;margin-top: 8px;" id="data_url" label="Dataset api data url" floatingLabel value="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=07843fc3-07e1-4c66-9be4-fed43ca4a26f" on-change="_textElementChanged"></paper-textarea>  
194 - <paper-dropdown-menu style="width: 20%;" id="datasets-sources" label="Example datasets">  
195 - <paper-menu class="dropdown-content">  
196 - <template is="dom-repeat" items="[[Datasets.names]]" as="dataset" index-as="i">  
197 - <paper-item id="[[i]]" on-tap="_datasourceSelected">[[dataset]]</paper-item>  
198 - </template>  
199 - </paper-menu>  
200 - </paper-dropdown-menu>  
201 - </div>  
202 -  
203 - <div class="horizontal layout">  
204 -  
205 - <div style="position:relative;width: 50%;min-height: 40vh;max-height: 40vh;" id="fields_placeholder" class="area_container flexchild" style="min-width:300px">  
206 - <treeview-controllet id="fields_treeview"></treeview-controllet>  
207 - </div>  
208 -  
209 - <div style="position:relative;width: 50%;min-height: 40vh;max-height: 40vh;" id="table_fields_container" class="area_container flex2child">  
210 - <div id="table_component_place_holder"></div>  
211 - </div>  
212 -  
213 - </div>  
214 -  
215 - <div class="horizontal layout">  
216 -  
217 - <div style="position:relative;width: 50%;min-height: 80vh;max-height: 80vh;" id="datalet_params_main_placeholder" class="area_container flexchild" style="min-width:300px">  
218 - <div class="">  
219 - <div id="visualization_slider_area" class="area_container"></div>  
220 - <div id="fields_mapping_area" class="area_container horizontal layout">  
221 -  
222 - <div id="selected_fields_main_container" class="field-mapping-card" style="position:relative;width: 50%;min-height: 40vh;max-height: 40vh;">  
223 - <div class="title">  
224 - <div class="medium">Selected fields</div>  
225 - </div>  
226 - <div id="selected_fields_container" class="area_container"></div>  
227 - </div>  
228 -  
229 - <div id="idm_fields_main_container" class="field-mapping-card" style="position:relative;width: 50%;min-height: 40vh;max-height: 40vh;">  
230 - <div class="title">  
231 - <div class="medium">Datalet fields</div>  
232 - </div>  
233 - <div id="datalet_idm_fields_container" class="area_container"></div>  
234 - </div>  
235 - </div>  
236 - <div id="idm_layout_main_container" class="area_container" style="position:relative;min-height: 20vh;max-height: 20vh;">  
237 - <div class="title">  
238 - <div class="medium">Layout fields</div>  
239 - </div>  
240 - <div id="idm_layout_container" class="area_container"></div>  
241 - </div>  
242 - </div>  
243 -  
244 - </div>  
245 -  
246 - <div style="position:relative;width: 50%;min-height: 80vh;max-height: 80vh;" id="datalet_main_container" class="area_container flex2child">  
247 - </div>  
248 -  
249 - </div>  
250 -  
251 - <div class="horizontal layout">  
252 - <div id="code_area" style="position:relative;width: 100%;min-height: 20vh;max-height: 20vh;" class="area_container flex2child">  
253 - <textarea id="sbiricuda" style="position:relative;width: 100%;min-height: 20vh;max-height: 20vh;" style="" rows="4" cols="50">  
254 - Copy and paste this code to inject the datalet in you page.  
255 - </textarea>  
256 - </div>  
257 - </div>  
258 -  
259 - </div>  
260 93
  94 + <div class="">
  95 + <p>
  96 + Using this page you can create a Datalet, a off-the-shelf, reusable web-component able to load,
  97 + query, filter, and visualise any dataset content (e.g. through HighCharts Javascript library).
  98 + Datalet are reusable since they can be placed in every web page, like institutional web-sites,
  99 + blogs, forums and so on, without any knowledge on how it effectively is implemented.
  100 + </p>
261 </div> 101 </div>
262 -</template>  
263 -<script>  
264 -  
265 - //DEEP.deepUrl = "http://deep.routetopa.eu/DEEP/";  
266 - //DEEP.datasetsList = "http://deep.routetopa.eu/DEEP/datalets-list";  
267 - DEEP.deepUrl = "http://192.168.164.128/DatalEts-Ecosystem-Provider/DEEP/";  
268 - DEEP.datasetsList = "http://192.168.164.128/DatalEts-Ecosystem-Provider/DEEP/datalets-list";  
269 -  
270 - DEEP.Datasets = {  
271 - names:[  
272 - 'Italy - Consuntivo entrate 2009',  
273 - 'Italy - Consuntivo entrate 2010',  
274 - 'Italy - Consuntivo entrate 2011',  
275 - 'Italy - Consuntivo entrate 2012',  
276 - 'Italy - Consuntivo entrate 2014',  
277 - 'Holland - Vestigingen register gemeente Groningen',  
278 - 'Holland - Woonruimte gemeente Groningen',  
279 - 'Ireland - SDCC Traffic Cameras',  
280 - 'Ireland - Derelict Site Register',  
281 - 'Ireland - Dublin City Council Commencement Notices',  
282 - 'Ireland - Dublin City Council Planning Applications',  
283 - 'Ireland - Dun Laoghaire-Rathdown County Council Planning Application 2008-2014',  
284 - 'Ireland - Fingal Council Planning Applications for last 7 years',  
285 - 'Ireland - Planning Register',  
286 - 'Ireland - Fingal Development Plan 2011-2017 Record of Protected Structures',  
287 - 'Bubble example',  
288 - 'Issy - 3d pie chart'  
289 - ],  
290 - urls: [  
291 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=07843fc3-07e1-4c66-9be4-fed43ca4a26f',  
292 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=48a4db73-d3d4-4639-bbc2-9c797d0e6cda',  
293 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=a14cc2fb-0c24-48d7-9370-834045797d89',  
294 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=fb32fcb6-5e44-4e52-b132-01c6540ddbee',  
295 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=0cb600fc-19ad-4aaf-9794-1e6ea851840a',  
296 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=ba554c1f-02a7-4d76-b449-fb9daa1f8bfd',  
297 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=af7b3916-4347-469a-8354-3c2d559bd92f',  
298 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52',  
299 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=fcbee83e-3d3d-4303-a568-24dd33d02adc',  
300 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=ee00de68-f2e4-482f-a003-3c0561351075',  
301 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=2f4a9d44-b52f-4c8b-a5db-d8f4a676d81e',  
302 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=c479f061-9638-489d-ac55-0c68765548ff',  
303 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=d29a477a-4734-43ef-8002-048c8640d441',  
304 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=2b23f32d-e27e-4eef-af1e-27e05103df7d',  
305 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=5ea813bc-fdf9-4edb-b3b1-0142b593d5c6',  
306 - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=0cb600fc-19ad-4aaf-9794-1e6ea851840a',  
307 - "https://data.issy.com/api/records/1.0/search?dataset=flux-rss-des-offres-demplois-a-issy-les-moulineaux&sort=published&facet=published&refine.published=2015%2F10"  
308 - ]  
309 - };  
310 -  
311 - DEEP.selected_fields = undefined;  
312 -  
313 - DEEP.handleResponseData = function(e){  
314 - DEEP.$.fields_treeview.init(e.detail.response);  
315 - $("#fields_placeholder").perfectScrollbar();  
316 - $("#table_fields_container").perfectScrollbar();  
317 - };  
318 -  
319 - DEEP.handleResponseDatalets = function(e){  
320 - DEEP.datalets_list = new Array();  
321 - for(var i=0;i < e.detail.response.length;i++){  
322 - var datalet_info = { name : e.detail.response[i].name ,  
323 - image : e.detail.response[i].url + e.detail.response[i].name + ".png"  
324 - };  
325 -  
326 - DEEP.datalets_list.push(datalet_info);  
327 - }  
328 102
329 - DEEP.$.visualization_slider_area.innerHTML = '<animated-button-container-controllet height="300" width="450" icon="assessment" icon-width="64" icon-height="64" background-button-color="#2196F3">' +  
330 - '<items-list-controllet' +  
331 - ' replace-string="-datalet"' +  
332 - ' items=\'' + JSON.stringify(DEEP.datalets_list) + '\'>' +  
333 - '</items-list-controllet>' +  
334 - '</animated-button-container-controllet>';  
335 - };  
336 -  
337 - DEEP.handleSelectedDatalet = function(e){  
338 -  
339 - var response = e.detail.response;  
340 - DEEP.$.datalet_idm_fields_container.innerHTML = "";  
341 - DEEP.$.idm_layout_container.innerHTML = "";  
342 -  
343 - var input;  
344 - var layouts = jQuery.extend(true, {}, response.idm.inputs.layouts);  
345 -  
346 - if(response.idm.inputs.input.constructor == Object) {  
347 - if(response.idm.inputs.input.selection == "*")  
348 - {  
349 - var fields = this.$.selected_fields_container.querySelectorAll('draggable-element-controllet');  
350 - input = response.idm.inputs.input;  
351 - response.idm.inputs.input = new Array();  
352 - for(var i=0;i<fields.length;i++){  
353 - var newInput = jQuery.extend(true, {}, input);  
354 - newInput.name = input.name + ' ' + (i + 1);  
355 - response.idm.inputs.input.push(newInput);  
356 - }  
357 - }  
358 - }  
359 -  
360 - var heading;  
361 - var id;  
362 -  
363 - for(var i =0; i < response.idm.inputs.input.length; i++) {  
364 - var html = '<draggable-element-controllet is-target="true" ';  
365 - input = response.idm.inputs.input[i];  
366 -  
367 - heading = ' heading="' + input.name + '"';  
368 - id = ' id="' + (i + 1) + '"';  
369 -  
370 - html += heading + id;  
371 - html += ' description="' + input.description + '"' +  
372 - ' number="' + (i + 1) + '"';  
373 -  
374 - if(DEEP.selected_fields != undefined) {  
375 - if(this.selected_fields[i] != undefined) {  
376 - html += ' value="' + this.selected_fields[i] + '"' +  
377 - ' label="' + this.selected_fields[i].split(",")[this.selected_fields[i].split(",").length - 1] + '"';  
378 - }  
379 - }  
380 -  
381 - html += '></draggable-element-controllet>';  
382 - this.$.datalet_idm_fields_container.innerHTML += html;  
383 -  
384 - }  
385 -  
386 - if(layouts.input != undefined) {  
387 - if(layouts.input.constructor == Object){  
388 - layouts.input = new Array(jQuery.extend(true, {}, layouts.input));  
389 - }  
390 -  
391 - html = '<text-element-controllet ';  
392 - for (var i = 0; i < layouts.input.length; i++) {  
393 - html += '<text-element-controllet heading="' + layouts.input[i].name + '" ' +  
394 - 'description="' + layouts.input[i].description + '" ' +  
395 - 'number="' + (i + 1) + '" ';  
396 -  
397 - html += '></text-element-controllet>';  
398 - }  
399 - DEEP.$.idm_layout_container.innerHTML = html;  
400 - }  
401 -  
402 - if(DEEP.selected_fields != undefined) DEEP.generateDataletPreview();  
403 -  
404 - $("#selected_fields_main_container").perfectScrollbar();  
405 - $("#idm_fields_main_container").perfectScrollbar();  
406 - $("#idm_layout_main_container").perfectScrollbar();  
407 - $("#datalet_params_main_placeholder").perfectScrollbar();  
408 - };  
409 -  
410 - DEEP._urlChanged = function(event){  
411 - DEEP.$.data_request.url = event.target.value;  
412 - DEEP.$.data_request.generateRequest();  
413 - DEEP.$.table_component_place_holder.innerHTML = "";  
414 - };  
415 -  
416 - DEEP._datasourceSelected = function(event){  
417 - DEEP.$.data_url.value = DEEP.Datasets.urls[parseInt(event.target.id)];  
418 - DEEP.$.data_request.url = DEEP.Datasets.urls[parseInt(event.target.id)];  
419 - DEEP.$.data_request.generateRequest();  
420 - DEEP.$.table_component_place_holder.innerHTML = "";  
421 - };  
422 -  
423 - DEEP._fieldsSelected = function(e){  
424 -  
425 - DEEP.$.selected_fields_container.innerHTML = "";  
426 - for(var i=0;i<e.detail.fields.length;i++) {  
427 - DEEP.$.selected_fields_container.innerHTML += '<draggable-element-controllet identifier="' + e.detail.fields[i] +  
428 - '" label="' + e.detail.fields[i].split(",")[e.detail.fields[i].split(",").length -1] +  
429 - '"></draggable-element-controllet><br>';  
430 - }  
431 -  
432 - ComponentService.deep_url = DEEP.deepUrl;  
433 -  
434 - ComponentService.getComponent({  
435 - component : "datatable-datalet",  
436 - params :{  
437 - 'data-url' : DEEP.$.data_url.value  
438 - },  
439 - fields : e.detail.fields,  
440 - placeHolder : DEEP.$.table_component_place_holder  
441 - });  
442 -  
443 - };  
444 -  
445 - DEEP._dataletSelected = function(e){  
446 - DEEP.selected_datalet = e.detail.datalet;  
447 - DEEP.$.selected_datalet_request.url = DEEP.deepUrl + e.detail.datalet;  
448 - DEEP.$.selected_datalet_request.generateRequest();  
449 - };  
450 -  
451 - DEEP._fieldsMapped = function(e){  
452 - DEEP.generateDataletPreview();  
453 - };  
454 -  
455 - DEEP.timer = 0;  
456 - DEEP._textElementChanged = function(e){  
457 - clearTimeout (DEEP.timer);  
458 - DEEP.timer = setTimeout(DEEP.generateDataletPreview, 1500);  
459 - };  
460 -  
461 - DEEP.getXMLHttpRequest = function()  
462 - {  
463 - if (window.XMLHttpRequest) {  
464 - return new XMLHttpRequest();  
465 - }  
466 - else {  
467 - try {  
468 - return new ActiveXObject("MSXML2.XMLHTTP.3.0");  
469 - }  
470 - catch(ex) {  
471 - return null;  
472 - }  
473 - }  
474 - };  
475 -  
476 - DEEP.generateDataletPreview = function(){  
477 -  
478 - var input_mapped_fields = Polymer.dom(DEEP.$.datalet_idm_fields_container).querySelectorAll('draggable-element-controllet[is-target=true]');  
479 - DEEP.selected_fields = Array();  
480 -  
481 - for (var i = 0; i < input_mapped_fields.length; i++) {  
482 - if (input_mapped_fields[i].value != "") {  
483 - DEEP.selected_fields.push(input_mapped_fields[i].value);  
484 - }  
485 - }  
486 -  
487 - var input_layouts_fields = Polymer.dom(DEEP.$.idm_layout_container).querySelectorAll('text-element-controllet');  
488 - DEEP.params_fields = {'data-url' : DEEP.$.data_url.value};  
489 -  
490 - for (var i = 0; i < input_layouts_fields.length; i++) {  
491 - if (input_layouts_fields[i].value != "") {  
492 - DEEP.params_fields[input_layouts_fields[i].heading] = input_layouts_fields[i].value;  
493 - }  
494 - }  
495 -  
496 - ComponentService.deep_url = DEEP.deepUrl;  
497 - ComponentService.getComponent({  
498 - component : DEEP.selected_datalet,  
499 - params : DEEP.params_fields,  
500 - fields : DEEP.selected_fields,  
501 - placeHolder : DEEP.$.datalet_main_container  
502 - });  
503 -  
504 - var request = DEEP.getXMLHttpRequest();  
505 -  
506 - request.onreadystatechange = function(){  
507 - if(request.readyState == 4){  
508 - try {  
509 - var resp = JSON.parse(request.response);  
510 - var link = '<link rel="import" href="' + resp.bridge_link + resp.component_link +'">\n';  
511 -  
512 - //Build datalet injecting html code  
513 - var datalet_code = link + '<' + DEEP.selected_datalet;  
514 - var keys = Object.keys(DEEP.params_fields);  
515 - for(var i = 0; i < keys.length; i++){  
516 - datalet_code += ' ' + keys[i] + '=\'' + DEEP.params_fields[keys[i]] +'\'';  
517 - }  
518 - datalet_code += " fields='" + JSON.stringify(DEEP.selected_fields) + "'></" + DEEP.selected_datalet + ">";  
519 -  
520 - //'<!-- ADD THE POLYFILL TO YOUR PAGE - https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.14/webcomponents.min.js -->\n'  
521 -  
522 - DEEP.$.code_area.innerHTML = '<textarea id="sbiricuda" style="position:relative;width: 100%;min-height: 20vh;max-height: 20vh;" style="" rows="4" cols="50" autofocus="false">' +  
523 - '\<script type="text/javascript" src="https://cdn.jsdelivr.net/webcomponentsjs/0.7.16/webcomponents-lite.min.js"\>\<\/script\>\n' +  
524 - '\<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"\>\<\/script\>\n' +  
525 - '<!-- REMOVE THE PREVIOUS SCRIPT TAGS IF YOUR PAGE ALREADY USES JQUERY AND POLYFILL LIBRARIES -->\n'  
526 - + datalet_code +  
527 - '</textarea>';  
528 -  
529 - editAreaLoader.init({  
530 - id : "sbiricuda" // textarea id  
531 - ,syntax: "html" // syntax to be uses for highgliting  
532 - ,start_highlight: true // to display with highlight mode on start-up  
533 - ,syntax: "html"  
534 - ,replace_tab_by_spaces: 4,  
535 - isEditable : false,  
536 - });  
537 -  
538 - } catch (e){  
539 - var resp = {  
540 - status: 'error',  
541 - data: 'Unknown error occurred: [' + request.response + ']'  
542 - };  
543 - }  
544 - }};  
545 -  
546 - request.open('GET', DEEP.deepUrl + DEEP.selected_datalet);  
547 - request.send();  
548 -  
549 - }; 103 + <iframe style="width:100%; height:62vh" frameborder="0" srcdoc='
  104 + <head>
  105 + <script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
  106 + <script type="text/javascript" src="datalets/shared_js/jquery-1.11.2.min.js"></script>
  107 + <link rel="import" href="controllets/data-sevc-controllet/data-sevc-controllet.html" />
  108 + <script src="controllets/shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
  109 + <link rel="stylesheet" href="controllets/shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
  110 + <script type="text/javascript">
  111 + $(document).ready(function () {
  112 +
  113 + var datasets = [
  114 + {decription:"", name:"Italy - Consuntivo entrate 2009", url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=07843fc3-07e1-4c66-9be4-fed43ca4a26f"},
  115 + {decription:"", name:"Italy - Consuntivo entrate 2010",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=48a4db73-d3d4-4639-bbc2-9c797d0e6cda"},
  116 + {decription:"", name:"Italy - Consuntivo entrate 2011",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=a14cc2fb-0c24-48d7-9370-834045797d89"},
  117 + {decription:"", name:"Italy - Consuntivo entrate 2012",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=fb32fcb6-5e44-4e52-b132-01c6540ddbee"},
  118 + {decription:"", name:"Italy - Consuntivo entrate 2014",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=0cb600fc-19ad-4aaf-9794-1e6ea851840a"},
  119 + {decription:"", name:"Holland - Vestigingen register gemeente Groningen",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=ba554c1f-02a7-4d76-b449-fb9daa1f8bfd"},
  120 + {decription:"", name:"Holland - Woonruimte gemeente Groningen",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=af7b3916-4347-469a-8354-3c2d559bd92f"},
  121 + {decription:"", name:"Ireland - SDCC Traffic Cameras",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52"},
  122 + {decription:"", name:"Ireland - Derelict Site Register",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=fcbee83e-3d3d-4303-a568-24dd33d02adc"},
  123 + {decription:"", name:"Ireland - Dublin City Council Commencement Notices",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=ee00de68-f2e4-482f-a003-3c0561351075"},
  124 + {decription:"", name:"Ireland - Dublin City Council Planning Applications",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=2f4a9d44-b52f-4c8b-a5db-d8f4a676d81e"},
  125 + {decription:"", name:"Ireland - Dun Laoghaire-Rathdown County Council Planning Application 2008-2014",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=c479f061-9638-489d-ac55-0c68765548ff"},
  126 + {decription:"", name:"Ireland - Fingal Council Planning Applications for last 7 years",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=d29a477a-4734-43ef-8002-048c8640d441"},
  127 + {decription:"", name:"Ireland - Planning Register",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=2b23f32d-e27e-4eef-af1e-27e05103df7d"},
  128 + {decription:"", name:"Ireland - Fingal Development Plan 2011-2017 Record of Protected Structures",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=5ea813bc-fdf9-4edb-b3b1-0142b593d5c6"},
  129 + {decription:"", name:"Bubble example",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=0cb600fc-19ad-4aaf-9794-1e6ea851840a"},
  130 + {decription:"", name:"Issy - 3d pie chart", url:"https://data.issy.com/api/records/1.0/search?dataset=flux-rss-des-offres-demplois-a-issy-les-moulineaux&sort=published&facet=published&refine.published=2015%2F10"}
  131 + ];
  132 +
  133 + var dsc = document.getElementById("dsc");
  134 + dsc.setAttribute("datasets", JSON.stringify(datasets));
  135 +
  136 + window.addEventListener("data-sevc-controllet.dataletCreated", function(e){parent.createHTML(e);});
  137 +
  138 + });
  139 + </script>
  140 + </head>
  141 + <body>
  142 + <data-sevc-controllet localization="en" id="dsc" deep-url="http://deep.routetopa.eu/DEEP/" datalets-list-url="http://deep.routetopa.eu/DEEP/datalets-list"></data-sevc-controllet>
  143 + </body>
  144 + '>
  145 + </iframe>
  146 +
  147 + <div id="code_area">
  148 + <textarea id="sbiricuda" style="position:relative;width: 100%;min-height: 15vh;max-height: 15vh;" style="" rows="4" cols="50">
  149 +Copy and paste this code to inject the datalet in you page.
  150 + </textarea>
  151 + </div>
550 152
551 -</script> 153 + <!--<div>
  154 + <textarea style="width: 90%; margin-left:10px; height: 110px" id="code-textarea"></textarea>
  155 + </div>-->
552 156
553 </body> 157 </body>
554 </html> 158 </html>
555 \ No newline at end of file 159 \ No newline at end of file