WebCompDev / COMPONENTS

Commit 1d629743405581a0357f677f72530d92167cb109

Authored by isisadmin
1 parent 39b76991

datalet creator stg

Inline Side-by-side
Showing 1 changed file with 168 additions and 0 deletions
demo-stg.html 0 → 100755
  View file @1d62974
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta charset="UTF-8">
  5 +
  6 + <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
  7 +
  8 + <link rel="import" href="bower_components/iron-component-page/iron-component-page.html">
  9 + <link rel="import" href="bower_components/paper-item/paper-item.html">
  10 + <link rel="import" href="bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
  11 + <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
  12 + <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
  13 +
  14 + <script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
  15 + <script type="text/javascript" src="datalets/shared_js/jquery-1.11.2.min.js"></script>
  16 + <script type="text/javascript" src="docs/js/editarea_0_8_2/edit_area/edit_area_full.js"></script>
  17 +
  18 +
  19 + <script type="text/javascript">
  20 + $(document).ready(function () {
  21 + editAreaLoader.init({
  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
  27 + });
  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 += '\'>';
  46 + dataletHTML += '</'+e.detail.data.datalet+'>';
  47 +
  48 + var dataletImport = '\<script type="text/javascript" src="https://cdn.jsdelivr.net/webcomponentsjs/0.7.16/webcomponents-lite.min.js"\>\<\/script\>\n' +
  49 + '\<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"\>\<\/script\>\n' +
  50 + '<!-- REMOVE THE PREVIOUS SCRIPT TAGS IF YOUR PAGE ALREADY USES JQUERY AND POLYFILL LIBRARIES -->\n';
  51 +
  52 + var dataletLink = '<link rel="import" href="http://stage.routetopa.eu/deep/COMPONENTS/datalets/'+e.detail.data.datalet+'/'+e.detail.data.datalet+'.html" /> \n';
  53 +
  54 + editAreaLoader.setValue("sbiricuda", dataletImport+dataletLink+dataletHTML);
  55 + }
  56 +
  57 + </script>
  58 +
  59 + <style>
  60 +
  61 + body {
  62 + font-family: 'Roboto', sans-serif;
  63 + }
  64 +
  65 + #toolbar{
  66 + background: #2196F3 ;
  67 + }
  68 +
  69 + #logo{
  70 + width: 56px;
  71 + height: 56px;
  72 + background-image: url("http://spod.routetopa.eu/ow_static/themes/rtpa_matter/images/logo.png");
  73 + background-size: auto 41px;
  74 + background-repeat: no-repeat;
  75 + background-position: center center;
  76 +
  77 + }
  78 + </style>
  79 +
  80 +</head>
  81 +<body>
  82 +
  83 + <paper-toolbar id="toolbar">
  84 + <paper-menu-button>
  85 + <paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
  86 + <paper-menu class="dropdown-content">
  87 + <paper-item><a href="http://routetopa.eu/" target="_blank">ROUTE-TO PA European Project</a></paper-item>
  88 + <paper-item><a href="docs/docs.html" target="_blank">DEEP Documentation</a></paper-item>
  89 + </paper-menu>
  90 + </paper-menu-button>
  91 + <span class="title">DatalEts-Ecosystem Provider - Datalet Creator</span>
  92 + <a href="http://routetopa.eu/" target="_blank"><paper-icon-button id="logo"></paper-icon-button></a>
  93 + </paper-toolbar>
  94 +
  95 + <div class="">
  96 + <p>
  97 + Using this page you can create a Datalet, a off-the-shelf, reusable web-component able to load,
  98 + query, filter, and visualise any dataset content (e.g. through HighCharts Javascript library).
  99 + Datalet are reusable since they can be placed in every web page, like institutional web-sites,
  100 + blogs, forums and so on, without any knowledge on how it effectively is implemented.
  101 + </p>
  102 + </div>
  103 +
  104 + <iframe style="width:100%; height:62vh" frameborder="0" srcdoc='
  105 + <head>
  106 + <script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
  107 + <script type="text/javascript" src="datalets/shared_js/jquery-1.11.2.min.js"></script>
  108 + <link rel="import" href="controllets/data-sevc-controllet/data-sevc-controllet.html" />
  109 + <script src="controllets/shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
  110 + <link rel="stylesheet" href="controllets/shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
  111 + <script type="text/javascript">
  112 + $(document).ready(function () {
  113 +
  114 + var datasets = [
  115 + {decription:"", name:"Italy - Consuntivo entrate 2009", url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=07843fc3-07e1-4c66-9be4-fed43ca4a26f"},
  116 + {decription:"", name:"Italy - Consuntivo entrate 2010",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=48a4db73-d3d4-4639-bbc2-9c797d0e6cda"},
  117 + {decription:"", name:"Italy - Consuntivo entrate 2011",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=a14cc2fb-0c24-48d7-9370-834045797d89"},
  118 + {decription:"", name:"Italy - Consuntivo entrate 2012",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=fb32fcb6-5e44-4e52-b132-01c6540ddbee"},
  119 + {decription:"", name:"Italy - Consuntivo entrate 2014",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=0cb600fc-19ad-4aaf-9794-1e6ea851840a"},
  120 + {decription:"", name:"Holland - Vestigingen register gemeente Groningen",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=ba554c1f-02a7-4d76-b449-fb9daa1f8bfd"},
  121 + {decription:"", name:"Holland - Woonruimte gemeente Groningen",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=af7b3916-4347-469a-8354-3c2d559bd92f"},
  122 + {decription:"", name:"Ireland - SDCC Traffic Cameras",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52"},
  123 + {decription:"", name:"Ireland - Derelict Site Register",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=fcbee83e-3d3d-4303-a568-24dd33d02adc"},
  124 + {decription:"", name:"Ireland - Dublin City Council Commencement Notices",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=ee00de68-f2e4-482f-a003-3c0561351075"},
  125 + {decription:"", name:"Ireland - Dublin City Council Planning Applications",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=2f4a9d44-b52f-4c8b-a5db-d8f4a676d81e"},
  126 + {decription:"", name:"Ireland - Dun Laoghaire-Rathdown County Council Planning Application 2008-2014",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=c479f061-9638-489d-ac55-0c68765548ff"},
  127 + {decription:"", name:"Ireland - Fingal Council Planning Applications for last 7 years",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=d29a477a-4734-43ef-8002-048c8640d441"},
  128 + {decription:"", name:"Ireland - Planning Register",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=2b23f32d-e27e-4eef-af1e-27e05103df7d"},
  129 + {decription:"", name:"Ireland - Fingal Development Plan 2011-2017 Record of Protected Structures",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=5ea813bc-fdf9-4edb-b3b1-0142b593d5c6"},
  130 + {decription:"", name:"Bubble example",url:"http://ckan.routetopa.eu/api/action/datastore_search?resource_id=0cb600fc-19ad-4aaf-9794-1e6ea851840a"},
  131 + {decription:"", name:"Issy - 3d pie chart", url:"https://data.issy.com/api/records/1.0/search?dataset=flux-rss-des-offres-demplois-a-issy-les-moulineaux&sort=published&facet=published&refine.published=2015%2F10"}
  132 + ];
  133 +
  134 + var dsc = document.getElementById("dsc");
  135 + dsc.setAttribute("datasets", JSON.stringify(datasets));
  136 +
  137 + $("#treeMapView").parent().parent().hide();
  138 + window.addEventListener("data-sevc-controllet.dataletCreated", function(e){parent.createHTML(e);});
  139 +
  140 + /*var h = $("#material_container").height() - 48;
  141 + var w = $("#material_container").width();
  142 + console.log($("#div_datasetexplorer"));
  143 + console.log($("#div_datasetexplorer").html());
  144 + $("#div_datasetexplorer").html("CIAO !!");
  145 + console.log($("#div_datasetexplorer").html());
  146 + $("#div_datasetexplorer").html("<datasetexplorer-datalet width=\""+w+"\" height=\""+h+"\" data-url=\"http://spod.routetopa.eu/openwall/api/datasetTree\" fields=\"[\"result,datasets,provider_name\",\"result,datasets,organization_name\",\"result,datasets,package_name\",\"result,datasets,resource_name\",\"result,datasets,url\",\"result,datasets,w\"]\"></datasetexplorer-datalet>");
  147 + console.log($("#div_datasetexplorer").html());*/
  148 + });
  149 + </script>
  150 + </head>
  151 + <body>
  152 + <data-sevc-controllet localization="en" id="dsc" deep-url="http://stage.routetopa.eu/deep/DEEP/" datalets-list-url="http://stage.routetopa.eu/deep/DEEP/datalets-list"></data-sevc-controllet>
  153 + </body>
  154 + '>
  155 + </iframe>
  156 +
  157 + <div id="code_area">
  158 + <textarea id="sbiricuda" style="position:relative;width: 100%;min-height: 15vh;max-height: 15vh;" style="" rows="4" cols="50">
  159 +Copy and paste this code to inject the datalet in you page.
  160 + </textarea>
  161 + </div>
  162 +
  163 + <!--<div>
  164 + <textarea style="width: 90%; margin-left:10px; height: 110px" id="code-textarea"></textarea>
  165 + </div>-->
  166 +
  167 +</body>
  168 +</html>