Commit 34c460f1626b4deade834b59bfcbb9c8af08935b
1 parent
170197f1
datalet creator
Showing
2 changed files
with
102 additions
and
498 deletions
controllets/data-sevc-controllet/demo/index.html
| @@ -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 |
demo.html
| 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 |