WebCompDev / COMPONENTS

Compare View

switch
from
...
to
 
Commits (2)
Inline Side-by-side
Showing 17 changed files
controllet.html 0 → 100644
  View file @cf7f48a
  1 +<script type="text/javascript" src="controllets/shared_js/jquery-1.11.2.min.js"></script>
  2 +<script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
  3 +<link rel="import" href="controllets/data-sevc-controllet/demo-data-sevc-controllet.html" />
  4 +
  5 +<style>
  6 + #controllet paper-material {
  7 + overflow: hidden;
  8 + }
  9 +</style>
  10 +
  11 +<script type="text/javascript">
  12 + $(document).ready(function () {
  13 + var datasets = {"result":{
  14 + "providers":{"1":{"title":"CKAN","api_url":"http://ckan.routetopa.eu","image_hash":"11","id":"1"}},
  15 + "datasets":[
  16 + {"w":1,"provider_name":"p:1","organization_name":"SPOD","package_name":"isislab","resource_name":"SPOD SUPER HEROES","url":"http:\/\/ckan.routetopa.eu\/\/api/action\/datastore_search?resource_id=642ceea8-711e-4124-b450-0d23010c44e6","metas":"{\"organization\":\"SPOD\",\"description\":\"This is a test datasets.\",\"format\":\"CSV\"}"},
  17 + {"w":1,"provider_name":"p:1","organization_name":"SPOD","package_name":"isislab","resource_name":"Wonders of the World","url":"http:\/\/ckan.routetopa.eu\/\/api\/action\/datastore_search?resource_id=1d9c8e62-47ab-40d5-8943-b4c3bca14b50","metas":"{\"organization\":\"SPOD\",\"description\":\"This is a test datasets.\",\"format\":\"CSV\"}"},
  18 + {"w":1,"provider_name":"p:1","organization_name":"SPOD","package_name":"isislab","resource_name":"Animal Sounds","url":"http:\/\/ckan.routetopa.eu\/\/api\/action\/datastore_search?resource_id=1d9c8e62-47ab-40d5-8943-b4c3bca14b50","metas":"{\"organization\":\"SPOD\",\"description\":\"This is a test datasets.\",\"format\":\"CSV\"}"}
  19 + ]}};
  20 +
  21 + var controllet = document.getElementById("controllet");
  22 + controllet.setAttribute("datasets", JSON.stringify(datasets));
  23 +
  24 + window.addEventListener("data-sevc-controllet.dataletCreated", function(e){parent.createHTML(e);});
  25 + });
  26 +
  27 + //http://ckan.routetopa.eu/api/action/datastore_search?resource_id=1d9c8e62-47ab-40d5-8943-b4c3bca14b50
  28 +
  29 +</script>
  30 +
  31 +<demo-data-sevc-controllet id="controllet"
  32 + deep-url="http://172.16.15.38/DEEalerProvider/DEEP/"
  33 + datalets-list-url="http://172.16.15.38/DEEalerProvider/DEEP/datalets-list"
  34 + >
  35 +</demo-data-sevc-controllet>
  36 +
  37 +<!--datasets='{"result":{"providers":{"1":{"title":"CKAN","api_url":"http:\/\/ckan.routetopa.eu","image_hash":"11","id":"1"}},"datasets":[{"w":1,"provider_name":"p:1","organization_name":"SPOD","package_name":"isislab","resource_name":"EXAMPLE 1","url":"http:\/\/ckan.routetopa.eu\/\/api\/action\/datastore_search?resource_id=642ceea8-711e-4124-b450-0d23010c44e6","metas":"{\"organization\":\"SPOD\",\"description\":\"This is a test datasets.\",\"format\":\"CSV\"}"}, {"w":1,"provider_name":"p:1","organization_name":"SPOD","package_name":"isislab","resource_name":"EXAMPLE 2","url":"http:\/\/ckan2.routetopa.eu\/\/api\/action\/datastore_search?resource_id=642ceea8-711e-4124-b450-0d23010c44e6","metas":"{\"organization\":\"SPOD\",\"description\":\"This is a test datasets.\",\"format\":\"CSV\"}"}, {"w":1,"provider_name":"p:1","organization_name":"SPOD","package_name":"isislab","resource_name":"EXAMPLE 3","url":"http:\/\/ckan3.routetopa.eu\/\/api\/action\/datastore_search?resource_id=642ceea8-711e-4124-b450-0d23010c44e6","metas":"{\"organization\":\"SPOD\",\"description\":\"This is a test datasets.\",\"format\":\"CSV\"}"}]}}'-->
... ...
controllets/cocreation-paper-card-controllet/cocreation-paper-card-controllet.html
  View file @cf7f48a
... ... @@ -186,10 +186,10 @@
186 186 <iron-icon class="icon-to" icon="alarm-off"></iron-icon>&nbsp; {{to}}
187 187 </div>
188 188 </div>
189   - <template is="dom-if" if="{{!checkRoomType(roomType)}}">
  189 + <template is="dom-if" if="{{!_checkRoomType(roomType)}}">
190 190 <paper-fab mini icon="assessment" class="assessment" noink></paper-fab>
191 191 </template>
192   - <template is="dom-if" if="{{checkRoomType(roomType)}}">
  192 + <template is="dom-if" if="{{_checkRoomType(roomType)}}">
193 193 <paper-fab mini icon="description" class="description" noink></paper-fab>
194 194 </template>
195 195 </div>
... ... @@ -274,15 +274,15 @@
274 274 this.$.explore.innerHTML = cocreation_room_ln["explore_" + cocreation_room_ln["ln"]];
275 275 },
276 276  
277   - _handleDeleteClick: function(e){
  277 + _handleDeleteClick: function(){
278 278 this.fire("cocreation-paper-card-controllet_delete", {roomId: this.roomId});
279 279 },
280 280  
281   - _onExplore: function(e){
  281 + _onExplore: function(){
282 282 window.location = this.roomUrl;
283 283 },
284 284  
285   - checkRoomType: function(type){
  285 + _checkRoomType: function(type){
286 286 return (type == "knowledge") ? true : false;
287 287 }
288 288 })
... ...
controllets/data-sevc-controllet/demo-data-sevc-controllet.html 0 → 100644
  View file @cf7f48a
  1 +<script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
  2 +<link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
  3 +
  4 +<script src="../../locales/controllet_ln.js"></script>
  5 +
  6 +<link rel="import" href="../../bower_components/polymer/polymer.html">
  7 +
  8 +<link rel="import" href="../page-slider-controllet/page-slider-controllet.html">
  9 +
  10 +<link rel="import" href="../select-dataset-controllet/demo-select-dataset-controllet.html">
  11 +<link rel="import" href="../select-data-controllet/select-data-controllet.html" />
  12 +<link rel="import" href="../select-visualization-controllet/select-visualization-controllet.html" />
  13 +
  14 +<dom-module id="demo-data-sevc-controllet">
  15 +
  16 + <template>
  17 +
  18 + <page-slider-controllet id="slider">
  19 +
  20 + <neon-animatable>
  21 +
  22 + <demo-select-dataset-controllet id="select_dataset" datasets={{datasets}} suggested-datasets={{suggestedDatasets}}></demo-select-dataset-controllet>
  23 +
  24 + </neon-animatable>
  25 +
  26 + <neon-animatable>
  27 +
  28 + <select-data-controllet id="select_data"></select-data-controllet>
  29 +
  30 + </neon-animatable>
  31 +
  32 + <neon-animatable>
  33 +
  34 + <select-visualization-controllet id="select_visualization" deep-url={{deepUrl}} datalets-list-url={{dataletsListUrl}}></select-visualization-controllet>
  35 +
  36 + </neon-animatable>
  37 +
  38 + </page-slider-controllet>
  39 +
  40 + </template>
  41 +
  42 + <script>
  43 +
  44 + Polymer({
  45 +
  46 + is : 'demo-data-sevc-controllet',
  47 +
  48 + listeners : {
  49 + 'page-slider-controllet_selected' : '_updateSlider',
  50 + 'select-dataset-controllet_data-url' : '_allowSecondStep',
  51 + 'select-fields-controllet_selected-fields' : '_allowThirdStep',
  52 + 'filters-controllet_filters': '_allowThirdStep',
  53 + 'aggregators-controllet_aggregators': '_allowThirdStep',
  54 + 'data-ready': '_dataReady'
  55 + },
  56 +
  57 + properties : {
  58 +
  59 + datasets : {
  60 + type : Object,
  61 + value : undefined
  62 + },
  63 +
  64 + suggestedDatasets : {
  65 + type : Array,
  66 + value : undefined
  67 + },
  68 +
  69 + deepUrl : {
  70 + type : String,
  71 + value : undefined
  72 + },
  73 +
  74 + dataletsListUrl : {
  75 + type : String ,
  76 + value : undefined
  77 + },
  78 +
  79 + localization : {
  80 + type : String,
  81 + value : "en"
  82 + }
  83 +
  84 + },
  85 +
  86 + ready : function(){
  87 + ln["localization"] = this.localization;
  88 + },
  89 +
  90 + _updateSlider : function(e){
  91 + switch (e.detail.selected) {
  92 + case 0:
  93 + this.$.slider.setTitle(ln["slide1Title_" + this.localization], ln["slide1Subtitle_" + this.localization]);
  94 +
  95 + this.$.slider.chevronLeft("invisible");
  96 + this.$.slider.chevronRight(false);
  97 +
  98 + if(this.$.slider.getPrevSelected() == 1)
  99 + this.$.slider.chevronRight(true);
  100 + break;
  101 + case 1:
  102 + this.$.slider.setTitle(ln["slide2Title_" + this.localization], ln["slide2Subtitle_" + this.localization]);
  103 +
  104 + this.$.slider.chevronLeft(true);
  105 + this.$.slider.chevronRight(false);
  106 +
  107 + if(this.$.slider.getPrevSelected() == 2)
  108 + this.$.slider.chevronRight(true);
  109 + break;
  110 + case 2:
  111 + this.$.slider.setTitle(ln["slide3Title_" + this.localization], ln["slide3Subtitle_" + this.localization]);
  112 +
  113 + this.$.slider.chevronLeft(true);
  114 + this.$.slider.chevronRight("invisible");
  115 + }
  116 + },
  117 +
  118 + _allowSecondStep : function(e){
  119 + this.$.slider.chevronRight(false);
  120 +
  121 + var f = Object.create(providerFactory);
  122 + var provider = f.getProvider(e.detail.url);
  123 + var dataUrl = provider.addLimit(e.detail.url);
  124 +
  125 + this.$.select_data.dataUrl = dataUrl;
  126 + this.$.select_data.init();
  127 + this.$.select_visualization.dataUrl = dataUrl;
  128 + this.$.select_visualization.init();
  129 + },
  130 +
  131 + _dataReady : function(e){
  132 + if(e.detail.ready) {
  133 + this.$.slider.chevronRight(true);
  134 + this.$.select_dataset.$.selected_url.invalid = false;
  135 + }
  136 + else
  137 + this.$.select_dataset.$.selected_url.invalid = true;
  138 +
  139 + this.$.select_dataset.showDatasetInfo();
  140 + },
  141 +
  142 + _allowThirdStep : function(){
  143 + this.$.slider.chevronRight(false);
  144 + var selectedFields = this.$.select_data.getSelectedFields();
  145 + var filters = this.$.select_data.getFilters();
  146 + var aggregators = this.$.select_data.getAggregators();
  147 + var data = this.$.select_data.getData();
  148 + if(selectedFields.length > 0) {
  149 + this.$.select_visualization.init();
  150 + this.$.select_visualization.setSelectedFields(selectedFields);
  151 + this.$.select_visualization.setFilters(filters);
  152 + this.$.select_visualization.setAggregators(aggregators);
  153 + this.$.select_visualization.setData(data);
  154 + this.$.slider.chevronRight(true);
  155 + }
  156 + }
  157 +
  158 + });
  159 +
  160 + </script>
  161 +
  162 +</dom-module>
0 163 \ No newline at end of file
... ...
controllets/select-dataset-controllet/demo-select-dataset-controllet.html 0 → 100644
  View file @cf7f48a
  1 +<link rel="import" href="../../bower_components/polymer/polymer.html">
  2 +
  3 +<link rel="import" href="../../bower_components/paper-material/paper-material.html" />
  4 +<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
  5 +<link rel="import" href="../../bower_components/paper-tabs/paper-tab.html">
  6 +<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
  7 +<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
  8 +<link rel="import" href="../../bower_components/paper-item/paper-item.html">
  9 +<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
  10 +<link rel="import" href="../../bower_components/paper-tooltip/paper-tooltip.html">
  11 +
  12 +<link rel="import" href="../datasets-list-controllet/datasets-list-controllet.html">
  13 +
  14 +<dom-module id="demo-select-dataset-controllet">
  15 + <template>
  16 + <style>
  17 +
  18 + #select_dataset_container {
  19 + margin-top: 8px;
  20 + }
  21 +
  22 + #select_dataset_container * {
  23 + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  24 + font-size: 16px;
  25 + line-height: 24px;
  26 + }
  27 +
  28 + #select_dataset_container #options {
  29 + display: flex;
  30 + flex-direction: row;
  31 +
  32 + height: 48px;
  33 + padding: 0;
  34 + font-weight: 700;
  35 + background: #B6B6B6;
  36 +
  37 + margin-top: 2px;
  38 +
  39 + overflow: hidden;
  40 + }
  41 +
  42 + #select_dataset_container #options_header {
  43 + width: calc(100% - 96px);
  44 + text-align: center;
  45 + padding: 12px 0 12px 48px;
  46 + }
  47 +
  48 + #select_dataset_container .header_block {
  49 + /*width: calc((100% - 48px) / 2);*/
  50 + /*max-width: 400px;*/
  51 + width: calc(50% - 24px);
  52 + padding:0 12px;
  53 +
  54 + line-height: 40px;
  55 +
  56 + display: none;
  57 + }
  58 +
  59 + #select_dataset_container #url {
  60 + padding: 0 12px 12px 12px;
  61 + height: 60px;
  62 +
  63 + border: 2px solid #B6B6B6;
  64 + border-top: 0;
  65 + }
  66 +
  67 + #select_dataset_container #datasets_list_container {
  68 + height: calc(100% - 96px - 2px - 74px);
  69 + width: 100%;
  70 + }
  71 +
  72 + paper-tabs {
  73 + background: #B6B6B6;
  74 + }
  75 +
  76 + paper-tab {
  77 + font-weight: 700;
  78 + border-right: 2px solid #FFFFFF;
  79 + }
  80 +
  81 + paper-tab:nth-last-child(2) {
  82 + border-right: 0;
  83 + }
  84 +
  85 + paper-tab.iron-selected {
  86 + color: #FFFFFF;
  87 + background: #2196F3;;
  88 + }
  89 +
  90 + paper-tab:not(.iron-selected):hover {
  91 + color: #2196F3;
  92 + }
  93 +
  94 + paper-input {
  95 + --paper-input-container-focus-color: #2196F3;
  96 + }
  97 +
  98 + paper-icon-button {
  99 + height: 48px;
  100 + width: 48px;
  101 + padding: 8px;
  102 + }
  103 +
  104 + paper-icon-button[icon="settings"] {
  105 + cursor: pointer;
  106 + color: #00BCD4;
  107 + --paper-icon-button-ink-color: #00BCD4;
  108 +
  109 + background: #E0E0E0;
  110 + float: right;
  111 + position: absolute;
  112 + right: 0;
  113 + }
  114 +
  115 + paper-icon-button[icon="info-outline"] {
  116 + cursor: help;
  117 + }
  118 +
  119 + :host {
  120 + --paper-dropdown-menu-icon: {
  121 + color: #000000;
  122 + };
  123 + --paper-dropdown-menu-ripple: {
  124 + color: #FFFFFF;
  125 + };
  126 + }
  127 +
  128 + paper-dropdown-menu {
  129 + /*width: 200px;*/
  130 + width: 50%;
  131 + --paper-input-container-focus-color: #2196F3;
  132 + }
  133 +
  134 + paper-item {
  135 + min-width: 128px;
  136 + white-space: nowrap;
  137 + }
  138 +
  139 + paper-item.iron-selected {
  140 + background-color: #2196F3;
  141 + color: #FFFFFF;
  142 + }
  143 +
  144 + paper-tooltip {
  145 + min-width: 400px;
  146 + --paper-tooltip-background: black;
  147 + }
  148 +
  149 + #select_dataset_container br {
  150 + display: block;
  151 + margin-top: 8px;
  152 + content: " ";
  153 + }
  154 +
  155 + #select_dataset_container p {
  156 + margin: 0;
  157 + padding: 0;
  158 + }
  159 +
  160 + #select_dataset_container p .option {
  161 + color: #2196F3;;
  162 + font-weight: 700;
  163 + }
  164 +
  165 + #select_dataset_container p .description {
  166 + }
  167 +
  168 + </style>
  169 +
  170 + <paper-material id="select_dataset_container" elevation="5">
  171 + <paper-tabs selected={{tabIndex}} no-bar>
  172 + <paper-tab noink on-tap="">EXAMPLE DATASETS LIST</paper-tab>
  173 + <!--<paper-tab noink on-tap="_setLocalDatasets"><span id="spod_users_datasets"></span></paper-tab>-->
  174 + <!--<paper-tab noink on-tap="_setExtendedDatasets"><span id="extended_datasets"></span></paper-tab>-->
  175 + </paper-tabs>
  176 +
  177 + <div id="options">
  178 +
  179 + <div id="options_header"></div>
  180 +
  181 + <div id="provider_option" class="header_block">
  182 + {{_getLocalization('provider')}}:&nbsp;
  183 + <paper-dropdown-menu id="ddl_provider" label="" no-label-float>
  184 + <paper-menu id="menu_provider" class="dropdown-content">
  185 + <paper-item id="0" on-tap="_setProvidersDatasets"><span id="all"></span></paper-item>
  186 + <template is="dom-repeat" items={{_toArray(providers)}}>
  187 + <paper-item id={{item.value.id}} on-tap="_setProvidersDatasets">{{item.value.title}}</paper-item>
  188 + </template>
  189 + </paper-menu>
  190 + </paper-dropdown-menu>
  191 + <paper-icon-button id="info_provider" icon="info-outline" noink></paper-icon-button>
  192 + <paper-tooltip id="tooltip_provider" for="info_provider" offset="8">
  193 + <p>
  194 + <span class="option">{{_getLocalization('all')}}</span><br>
  195 + <span class="description">{{_getLocalization('allDescription')}}</span><br>
  196 + <span class="option">{{_getLocalization('providerName')}}</span><br>
  197 + <span class="description">{{_getLocalization('providerNameDescription')}}</span><br>
  198 + </p>
  199 + </paper-tooltip>
  200 + </div>
  201 +
  202 + <!--<div id="view_option" class="header_block">-->
  203 + <!--{{_getLocalization('view')}}:&nbsp;-->
  204 + <!--<paper-dropdown-menu id="ddl_view" label="" no-label-float>-->
  205 + <!--<paper-menu id="menu_view" class="dropdown-content">-->
  206 + <!--<paper-item id="0" on-tap=""><span id="list"></span></paper-item>-->
  207 + <!--<paper-item id="1" on-tap="" disabled><span id="tree"></span></paper-item>-->
  208 + <!--</paper-menu>-->
  209 + <!--</paper-dropdown-menu>-->
  210 + <!--<paper-icon-button id="info_view" icon="info-outline" noink></paper-icon-button>-->
  211 + <!--<paper-tooltip id="tooltip_view" for="info_view" offset="8">-->
  212 + <!--<p>-->
  213 + <!--<span class="option">{{_getLocalization('list')}}</span><br>-->
  214 + <!--<span class="description">{{_getLocalization('listDescription')}}</span><br>-->
  215 + <!--<span class="option">{{_getLocalization('tree')}}</span><br>-->
  216 + <!--<span class="description">{{_getLocalization('treeDescription')}}</span><br>-->
  217 + <!--</p>-->
  218 + <!--</paper-tooltip>-->
  219 + <!--</div>-->
  220 +
  221 + <!--<div id="search_option" class="header_block">-->
  222 + <!--{{_getLocalization('search')}}:&nbsp;-->
  223 + <!--<paper-dropdown-menu id="ddl_search" label="" no-label-float>-->
  224 + <!--<paper-menu id="menu_search" class="dropdown-content">-->
  225 + <!--<paper-item><span id="standard"></span></paper-item>-->
  226 + <!--<paper-item disabled><span id="extended"></span></paper-item>-->
  227 + <!--</paper-menu>-->
  228 + <!--</paper-dropdown-menu>-->
  229 + <!--<paper-icon-button id="info_search" icon="info-outline" noink></paper-icon-button>-->
  230 + <!--<paper-tooltip id="tooltip_search" for="info_search" offset="8">-->
  231 + <!--<p>-->
  232 + <!--<span class="option">{{_getLocalization('standard')}}</span><br>-->
  233 + <!--<span class="description">{{_getLocalization('standardDescription')}}</span><br>-->
  234 + <!--<span class="option">{{_getLocalization('extended')}}</span><br>-->
  235 + <!--<span class="description">{{_getLocalization('extendedDescription')}}</span><br>-->
  236 + <!--</p>-->
  237 + <!--</paper-tooltip>-->
  238 + <!--</div>-->
  239 +
  240 + <div id="version_option" class="header_block">
  241 + {{_getLocalization('version')}}:&nbsp;
  242 + <paper-dropdown-menu id="ddl_version" label="" no-label-float>
  243 + <paper-menu id="menu_version" class="dropdown-content">
  244 + <paper-item id="0" on-tap="_showLast"><span id="show_last"></span></paper-item>
  245 + <paper-item id="1" on-tap="_showAll"><span id="show_all"></span></paper-item>
  246 + </paper-menu>
  247 + </paper-dropdown-menu>
  248 + <paper-icon-button id="tooltip_version" icon="info-outline" noink></paper-icon-button>
  249 + <paper-tooltip id="tooltip_version" for="tooltip_version" offset="8">
  250 + <p>
  251 + <span class="option">{{_getLocalization('showLast')}}</span><br>
  252 + <span class="description">{{_getLocalization('showLastDescription')}}</span><br>
  253 + <span class="option">{{_getLocalization('showAll')}}</span><br>
  254 + <span class="description">{{_getLocalization('showAllDescription')}}</span><br>
  255 + </p>
  256 + </paper-tooltip>
  257 + </div>
  258 +
  259 + <!--<paper-icon-button icon="settings" on-click="_optionsMenu"></paper-icon-button>-->
  260 +
  261 + </div>
  262 +
  263 + <div id="datasets_list_container">
  264 + <datasets-list-controllet id="datasets_list"></datasets-list-controllet>
  265 + </div>
  266 +
  267 + <div id="url"><paper-input id="selected_url" label="" value={{dataUrl}} error-message={{errorMessage}}></paper-input></div>
  268 + </paper-material>
  269 +
  270 + </template>
  271 +
  272 + <script>
  273 + HTMLImports.whenReady(function() {
  274 + Polymer({
  275 + is: 'demo-select-dataset-controllet',
  276 +
  277 + properties: {
  278 +
  279 + tabIndex: {
  280 + type: Number,
  281 + value: 0
  282 + },
  283 +
  284 + datasets: {
  285 + type: Object,
  286 + value: undefined
  287 + },
  288 +
  289 + suggestedDatasets : {
  290 + type : Array,
  291 + value : undefined
  292 + },
  293 +
  294 + dataUrl : {
  295 + type : String,
  296 + value : undefined,
  297 + observer : '_fireDataUrl'
  298 + }
  299 +
  300 + },
  301 +
  302 + listeners: {
  303 + 'datasets-list-controllet_dataset' : '_selectDataUrl'
  304 + },
  305 +
  306 + ready : function() {
  307 + this._translate();
  308 +
  309 + $(this.$.list_container).perfectScrollbar();
  310 + $(this.$.info).perfectScrollbar();
  311 +
  312 + this.options = true;
  313 + },
  314 +
  315 + attached : function() {
  316 + this._translate();
  317 +
  318 + this._resize();
  319 + var that = this;
  320 + window.addEventListener("resize", function() { that._resize() });
  321 +
  322 + this.providers = this.datasets["result"]["providers"];
  323 + this.providersDatasets = this.datasets["result"]["datasets"];
  324 +
  325 + if(this.suggestedDatasets)
  326 + this.providersDatasets = this.suggestedDatasets.concat(this.providersDatasets);
  327 +
  328 + $.ajax({
  329 + url: "/cocreation/ajax/get-all-dataset",
  330 + dataType: "json",
  331 + success: function(localDatasets){
  332 + that.localDatasets = localDatasets;
  333 + that.lastLocalDatasets = [];
  334 + var resource_name = "";
  335 + for(var i in localDatasets)
  336 + if(localDatasets[i].resource_name != resource_name) {
  337 + that.lastLocalDatasets.push(localDatasets[i]);
  338 + resource_name = localDatasets[i].resource_name;
  339 + }
  340 + },
  341 + error: function(){
  342 + that.localDatasets = [];
  343 + that.lastLocalDatasets = [];
  344 + }
  345 + });
  346 +
  347 + this._setProvidersDatasets();
  348 + },
  349 +
  350 + showDatasetInfo : function() {
  351 + this.$.datasets_list.showDatasetInfo();
  352 + },
  353 +
  354 + _translate : function(){
  355 + this.$.selected_url.setAttribute("label", ln["selectedUrl_" + ln["localization"]]);
  356 + this.errorMessage = ln["wrongUrl_" + ln["localization"]];
  357 +
  358 +// this.$.providers_datasets.innerHTML = ln["providersDatasets_" + ln["localization"]];
  359 +// this.$.spod_users_datasets.innerHTML = ln["spodUsersDatasets_" + ln["localization"]];
  360 +// this.$.extended_datasets.innerHTML = ln["extendedDatasets_" + ln["localization"]];
  361 +
  362 + this.$.options_header.innerHTML = ln["datasets_" + ln["localization"]];
  363 +
  364 + this.$.all.innerHTML = ln["all_" + ln["localization"]];
  365 +// this.$.list.innerHTML = ln["list_" + ln["localization"]];
  366 +// this.$.tree.innerHTML = ln["tree_" + ln["localization"]];
  367 +// this.$.standard.innerHTML = ln["standard_" + ln["localization"]];
  368 +// this.$.extended.innerHTML = ln["extended_" + ln["localization"]];
  369 + this.$.show_last.innerHTML = ln["showLast_" + ln["localization"]];
  370 + this.$.show_all.innerHTML = ln["showAll_" + ln["localization"]];
  371 +
  372 + this.$.menu_provider.select(0);
  373 +// this.$.menu_view.select(0);
  374 +// this.$.menu_search.select(0);
  375 + this.$.menu_version.select(0);
  376 + },
  377 +
  378 + _setProvidersDatasets : function() {
  379 + this.async(function () {
  380 + var ddl_provider = $(this.$.ddl_provider).find("paper-menu")[0].selectedItem;
  381 + var name = ddl_provider.innerHTML.trim();
  382 + var id = this._getIdByProviderName(name);
  383 + if (id) {
  384 + var providerDatasets = this.providersDatasets.filter(function (el) {
  385 + return el.provider_name == "p:" + id;
  386 + });
  387 + this.$.datasets_list.setDatasets(providerDatasets);
  388 + }
  389 + else
  390 + this.$.datasets_list.setDatasets(this.providersDatasets);
  391 +
  392 + this._showOptions();
  393 + }, 0);
  394 + },
  395 +
  396 + _setLocalDatasets : function() {
  397 + if(this.$.ddl_version.selectedItem.id == 0)
  398 + this._showLast();
  399 + else
  400 + this._showAll();
  401 + this._showOptions();
  402 + },
  403 +
  404 + _setExtendedDatasets : function() {
  405 + this.$.datasets_list.setDatasets([]);//tutto molto bello, clap, clap, clapù
  406 + this._showOptions()
  407 + },
  408 +
  409 + _getIdByProviderName : function(name) {
  410 + for(var id in this.providers) {
  411 + if (this.providers[id].title == name)
  412 + return this.providers[id].id;
  413 + }
  414 + },
  415 +
  416 + _optionsMenu : function() {
  417 + this.options = !this.options;
  418 + this._showOptions();
  419 + },
  420 +
  421 + _showOptions : function() {
  422 + this.async(function () {
  423 + if(!this.options) {
  424 + this.$.options_header.style.display = "block";
  425 + this.$.provider_option.style.display = "none";
  426 +// this.$.view_option.style.display = "none";
  427 +// this.$.search_option.style.display = "none";
  428 + this.$.version_option.style.display = "none";
  429 + }
  430 + else if(this.tabIndex == 0) {
  431 + this.$.options_header.style.display = "none";
  432 + this.$.provider_option.style.display = "block";
  433 +// this.$.view_option.style.display = "block";
  434 +// this.$.search_option.style.display = "block";
  435 + this.$.version_option.style.display = "none";
  436 + }
  437 + else if(this.tabIndex == 1) {
  438 + this.$.options_header.style.display = "none";
  439 + this.$.provider_option.style.display = "none";
  440 +// this.$.view_option.style.display = "none";
  441 +// this.$.search_option.style.display = "none";
  442 + this.$.version_option.style.display = "block";
  443 + }
  444 + else if(this.tabIndex == 2) {
  445 + this.$.options_header.style.display = "block";
  446 + this.$.provider_option.style.display = "none";
  447 +// this.$.view_option.style.display = "none";
  448 +// this.$.search_option.style.display = "none";
  449 + this.$.version_option.style.display = "none";
  450 + }
  451 + }, 0);
  452 + },
  453 +
  454 + _showAll : function() {
  455 + this.$.datasets_list.showVersion(true);
  456 + this.$.datasets_list.setDatasets(this.localDatasets);
  457 + },
  458 +
  459 + _showLast : function() {
  460 + this.$.datasets_list.showVersion(false);
  461 + this.$.datasets_list.setDatasets(this.lastLocalDatasets);
  462 + },
  463 +
  464 + _getLocalization : function(text){
  465 + return ln[text + "_" + ln["localization"]];
  466 + },
  467 +
  468 + _toArray: function(obj) {
  469 + return Object.keys(obj).map(function(key) {
  470 + return {
  471 + name: key,
  472 + value: obj[key]
  473 + };
  474 + });
  475 + },
  476 +
  477 + _selectDataUrl : function(e){
  478 + this.async(function () {
  479 + this.dataUrl = e.detail.dataset.url;
  480 + }, 0);
  481 + },
  482 +
  483 + _fireDataUrl : function(){
  484 + this.fire('select-dataset-controllet_data-url', {url: this.dataUrl});
  485 + },
  486 +
  487 + _resize : function(){
  488 + var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16;
  489 + h = h - 64 - 8; //height with page scroller
  490 + $("#select_dataset_container").height(h);
  491 + }
  492 + });
  493 + });
  494 + </script>
  495 +</dom-module>
0 496 \ No newline at end of file
... ...
demo.html
  View file @cf7f48a
... ... @@ -5,21 +5,18 @@
5 5  
6 6 <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
7 7  
  8 + <script type="text/javascript" src="datalets/shared_js/jquery-1.11.2.min.js"></script>
  9 + <script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
  10 +
8 11 <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 12 <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 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 14 <script type="text/javascript" src="docs/js/editarea_0_8_2/edit_area/edit_area_full.js"></script>
17 15  
18   -
19 16 <script type="text/javascript">
20 17 $(document).ready(function () {
21 18 editAreaLoader.init({
22   - id : "sbiricuda", // textarea id
  19 + id : "text_area", // textarea id
23 20 syntax: "html", // syntax to be uses for highgliting
24 21 start_highlight: true, // to display with highlight mode on start-up
25 22 replace_tab_by_spaces: 4,
... ... @@ -51,118 +48,115 @@
51 48  
52 49 var dataletLink = '<link rel="import" href="http://deep.routetopa.eu/deep_1_7/COMPONENTS/datalets/'+e.detail.data.datalet+'/'+e.detail.data.datalet+'.html" /> \n';
53 50  
54   - editAreaLoader.setValue("sbiricuda", dataletImport+dataletLink+dataletHTML);
  51 + editAreaLoader.setValue("text_area", dataletImport+dataletLink+dataletHTML);
55 52 }
56 53  
57 54 </script>
58 55  
59   - <style>
  56 + <style is="custom-style">
  57 +
  58 + #creator_container {
  59 + width: 100%;
  60 + height: 100%;
  61 + }
  62 +
  63 + #creator_container * {
  64 + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  65 + font-size: 16px;
  66 + line-height: 24px;
  67 + }
  68 +
  69 + #text_container {
  70 + padding: 8px;
  71 + background: #BBDEFB;
  72 +
  73 + margin-top: 8px;
  74 + }
  75 +
  76 + #controllet_iframe {
  77 + height: 100%;
  78 + width: 100%;
  79 + }
  80 +
  81 + #iframe_container {
  82 + border: 2px solid #BBDEFB;
  83 + border-top: 0;
  84 + width: calc(100% - 4px);
  85 + height: 698px;
  86 + }
60 87  
61   - body {
62   - font-family: 'Roboto', sans-serif;
  88 + #toolbar {
  89 + background: #2196F3;
63 90 }
64 91  
65   - #toolbar{
66   - background: #2196F3 ;
  92 + .title {
  93 + font-weight: 700 !important;
67 94 }
68 95  
69 96 #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;
  97 + width: 64px;
  98 + height: 64px;
  99 + background-image: url("http://spod.routetopa.eu/ow_static/themes/spod_theme_matter/images/logo.png");
74 100 background-repeat: no-repeat;
75 101 background-position: center center;
  102 + }
  103 +
  104 + paper-icon-button {
  105 + --paper-icon-button-ink-color: #FFFFFF;
  106 + height: 48px;
  107 + width: 48px;
  108 + padding: 8px;
  109 + }
  110 +
  111 + a {
  112 + color: #FFFFFF;
  113 + text-decoration: none;
  114 + }
  115 + #text_area_container {
  116 + width: 100%;
  117 + height: calc(100vh - 884px);
  118 + min-height: 192px;
76 119  
  120 + margin-top: 8px;
  121 + /*background: red;*/
77 122 }
  123 +
  124 + #text_area {
  125 + width: calc(100% - 18px);
  126 + height: calc(100% - 18px);
  127 + margin: 0;
  128 + padding: 8px;
  129 + }
  130 +
78 131 </style>
79 132  
80 133 </head>
81 134 <body>
82 135  
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>
  136 + <div id="creator_container">
  137 +
  138 + <paper-toolbar id="toolbar">
  139 + <a href="http://routetopa.eu/" target="_blank"><paper-icon-button id="logo" title="ROUTE-TO PA European Project"></paper-icon-button></a>
  140 + <span class="title">DatalEts-Ecosystem Provider - Datalet Creator</span>
  141 + <a href="docs/docs.html" target="_blank"><paper-icon-button icon="description" title="DEEP Documentation"></paper-icon-button></a>
  142 + <a href="http://routetopa.eu/" target="_blank"><paper-icon-button icon="forward" title="ROUTE-TO PA European Project"></paper-icon-button></a>
  143 + </paper-toolbar>
  144 +
  145 + <div id="text_container">
97 146 Using this page you can create a Datalet, a off-the-shelf, reusable web-component able to load,
98 147 query, filter, and visualise any dataset content (e.g. through HighCharts Javascript library).
99 148 Datalet are reusable since they can be placed in every web page, like institutional web-sites,
100 149 blogs, forums and so on, without any knowledge on how it effectively is implemented.
101   - </p>
102   - </div>
  150 + </div>
103 151  
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://deep.routetopa.eu/deep_1_7/DEEP/" datalets-list-url="http://deep.routetopa.eu/deep_1_7/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>
  152 + <div id="iframe_container">
  153 + <iframe id="controllet_iframe" frameborder="0" src="./controllet.html"></iframe>
  154 + </div>
162 155  
163   - <!--<div>
164   - <textarea style="width: 90%; margin-left:10px; height: 110px" id="code-textarea"></textarea>
165   - </div>-->
  156 + <div id="text_area_container">
  157 + <textarea id="text_area">Copy and paste this code to inject the datalet in you page.</textarea>
  158 + </div>
  159 + </div>
166 160  
167 161 </body>
168 162 </html>
169 163 \ No newline at end of file
... ...