<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-styles/color.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animated-pages.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animations.html">
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="../../bower_components/paper-tabs/paper-tab.html">
<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../../bower_components/paper-item/paper-item.html">
<link rel="import" href="../items-slider-controllet/items-slider-controllet.html">
<link rel="import" href="../draggable-element-controllet/draggable-element-controllet.html">
<link rel="import" href="../treeview-controllet/treeview-controllet.html">
<dom-module id="data-sevc-controllet">
<template>
<link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
<style is="custom-style">
body {
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
font-size: 1em;
margin: 0;
padding: 1.5em;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
overflow: hidden;
}
#pages{
min-width: 1336px;
max-width: 1634px;
}
.fields-card-content {
padding-left: 1.5em;
}
.fancy .fields-title {
/*position: absolute;
top: 30px;
left: 100px;
display: inline-block;*/
color: var(--paper-indigo-500);
}
.fancy-content {
/*padding: 25px;*/
}
.avatar {
display: inline-block;
height: 2em;
width: 2em;
border-radius: 50%;
/*background: var(--paper-pink-500);*/
background: var(--paper-blue-500);
color: white;
line-height: 2em;
font-size: 1.87em;
text-align: center;
}
.fancy .title {
/*position: absolute;
top: 30px;
left: 100px;*/
display: inline-block;
position: relative;
top: .75em;
left: .625em;
color: var(--paper-indigo-500);
}
.fancy .big {
font-size: 1.37em;
padding: 0.5em 0 1em;
color: var(--google-grey-500);
}
.fancy .medium {
font-size: 1em;
padding-bottom: 0.5em;
color : #000000;
font-weight: bold;
}
paper-input {
width: 80%;
}
paper-dropdown-menu {
text-align: left;
margin: auto;
width: 100%;
}
:host ::content paper-menu-button{
display: block;
width: 100%;
}
#visualization_slider_area{
position:relative;
float:left;
height: 22vh;
/*width: 50%;*/
min-width: 670px;
min-height: 180px;
}
#datalet_area{
position:relative;
/*height: 30em;*/
width: 46%;
min-height: 500px;
min-width: 600px;
float: right;
}
#fields_mapping_area{
position:relative;
height: auto;/*70%;*/
/*width: 50%;*/
float:left;
min-width: 670px;
}
#visualization_customization_area{
position:relative;
/*height:auto;*/
width: 46%;
float:right;
background-color: white;
}
.field-mapping-card{
width: 50%;
height: 50vh;
overflow: auto;
position: relative;
float: left;
}
.horizontal-section-container .vertical-section {
/*max-width: 130px;*/
diplay:block;
float: left;
}
.colorful {
background: #4285f4;
color: #fff;
}
.toolbar_button{
/*height: 100%;
display: inline-block;*/
float: left;
margin-top: 2em;
--iron-icon-height: 32px;
--iron-icon-width: 32px;
}
/*paper-iron-button.toolbar_button{
height: 34px;
width: 34px;
}*/
.toolbar-center{
display: inline-block;
position: relative;
float: left;
width: 90%;
}
.toolbar{
width: 100%;
height : 8em;
vertical-align: middle;
min-width: 975px;
}
#datalet_created_idm_fields_container{
position: relative;
float: left;
width: 100%;
height: 50vh;
overflow: auto;
}
#finish{
position: relative;
float: left;
width: 100%;
height : 20%;
align-content: center;
}
#datalet_created_placehorder {
width: 100%;
}
#finish_button{
float: left;
margin-top: 2em;
--iron-icon-height: 64px;
--iron-icon-width: 64px;
color: var(--paper-blue-500);
}
#finish_button:hover{
--iron-icon : "add-circle-outline"
}
/* #finish_button iron-icon:hover{
icon : "add-circle";
}
#finish_button iron-icon{
height: 4vh;
width: 4vw;
}*/
.area_container{
margin : 0.8em;
padding : 0.8em;
border-width: 1em;
border-radius: 0.125rem;
box-shadow: 0.125em 0.125em 0.1125em 0.125em rgba(0, 0, 0, 0.25);
}
#fields_placeholder{
width: 40%;
height: 50vh;
position: relative;
float: left;
overflow: auto;
}
#table_fields_container{
height: 50vh;
width: 55%;
/*max-width: 100vw;
max-height: 50vh;*/
position: relative;
float: left;
overflow: auto;
}
paper-tabs, paper-toolbar {
background-color: var(--paper-blue-500);
color: #ffffff;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
}
paper-toolbar paper-tabs {
box-shadow: none;
--paper-tabs-selection-bar-color : var(--google-gray-500);
}
paper-tabs[noink][no-bar] paper-tab.iron-selected {
background-color: var(--google-gray-500);
}
paper-tabs[align-bottom] {
box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.15);
}
</style>
<iron-ajax
auto
id="data_request"
url={{dataUrl}}
verbose="true"
on-response="handleResponseData"
debounce-duration="300">
</iron-ajax>
<iron-ajax
id="datales_list_request"
auto
url={{dataletsListUrl}}
handle-as="json"
on-response="handleResponseDatalets"
debounce-duration="300">
</iron-ajax>
<iron-ajax
id="selected_datalet_request"
url={{deepUrl}}
verbose="true"
on-response="handleSelectedDatalet"
debounce-duration="300">
</iron-ajax>
<content>
<div class="toolbar">
<paper-icon-button id="PrevButton" class="toolbar_button x-scope" on-click="_onPrevClick" icon="chevron-left" alt="arrow-back" title="arrow-back"></paper-icon-button>
<div class="fancy toolbar-center">
<div class="fancy-content">
<div id="toolbar_number" class="avatar">1</div>
<div class="title">
<div id="toolbar_title" class="big">Dataset source</div>
<div id="toolbar_description" class="small">Copy and paste/drag and drop in the textarea the url of datasource</div>
</div>
</div>
</div>
<paper-icon-button id="NextButton" class="toolbar_button x-scope" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button>
</div>
<neon-animated-pages id="pages" class="flex" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
<neon-animatable>
<div class="fancy area_container">
<paper-tabs selected="{{DatasourceTabSelected}}">
<paper-tab>Select data source</paper-tab>
<paper-tab>Most popular</paper-tab>
<paper-tab>Search</paper-tab>
</paper-tabs>
<iron-pages selected="{{DatasourceTabSelected}}">
<div>
<div class="card-content">
<paper-textarea id="data_url" label="Dataset api data url" floatingLabel value="{{dataUrl}}" on-dragover="_handleDatasourceDragOver"></paper-textarea>
</div>
<div class="card-content">
<paper-dropdown-menu id="datasets-sources" label="Available datasets">
<paper-menu class="dropdown-content">
<template is="dom-repeat" items="{{datasets}}" as="dataset" index-as="index">
<paper-item id="{{index}}" on-tap="_datasourceSelected">{{dataset}}</paper-item>
</template>
</paper-menu>
</paper-dropdown-menu>
</div>
</div>
<div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div>
<div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div>
</iron-pages>
</div>
</neon-animatable>
<neon-animatable>
<div class="fancy">
<div class="fancy-content">
<div id="fields_placeholder" class="area_container">
<treeview-controllet id="fields_treeview"></treeview-controllet>
</div>
<div id="table_fields_container" class="area_container">
<div id="table_component_place_holder"></div>
</div>
</div>
</div>
</neon-animatable>
<neon-animatable>
<div class='fancy'>
<div class="fancy-content">
<div id="visualization_slider_area" class="area_container"></div>
<div id="datalet_area" class="area_container">
<div id="datalet_placeholder"></div>
</div>
<div id="fields_mapping_area" class="area_container">
<div id="selected_fields_main_container" class="field-mapping-card">
<div class="title">
<div class="medium">Selected fields</div>
</div>
<div id="selected_fields_container" class="area_container"></div>
</div>
<div id="idm_fields_main_container" class="field-mapping-card">
<div class="title">
<div class="medium">Datalet fields</div>
</div>
<div id="datalet_idm_fields_container" class="area_container"></div>
</div>
</div>
<div id="visualization_customization_area">
<paper-icon-button id="finish_button" on-click="_onFinish" icon="add-circle" alt="Conforms the creation" title="finish"></paper-icon-button>
</div>
</div>
</div>
</neon-animatable>
<!--<neon-animatable>
<div class="fancy">
<div class="card-content area_container">
<div id="datalet_created_placehorder"></div>
</div>
<div class="card-content area_container">
<paper-icon-button id="finish_button" on-click="_onFinish" icon="add-circle-outline" alt="Conforms the creation" title="finish"></paper-icon-button>
</div>
</div>
</neon-animatable>-->
</neon-animated-pages>
</content>
</template>
<script src="../shared_js/bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
<script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
<script src="../../../DEEPCLIENT/js/deepClient.js"></script>
<script>
var datasetsPrato = {
names:[
'Consuntivo entrate 2009',
'Consuntivo entrate 2010',
'Consuntivo entrate 2011',
'Consuntivo entrate 2012',
'Consuntivo entrate 2014'
],
urls: [
'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=07843fc3-07e1-4c66-9be4-fed43ca4a26f&limit=10000',
'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=48a4db73-d3d4-4639-bbc2-9c797d0e6cda&limit=10000',
'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=a14cc2fb-0c24-48d7-9370-834045797d89&limit=10000',
'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=fb32fcb6-5e44-4e52-b132-01c6540ddbee&limit=10000',
'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=0cb600fc-19ad-4aaf-9794-1e6ea851840a&limit=10000'
]
}
var datasetsGroeningen = {
names:[
'Vestigingen register gemeente Groningen',
'Woonruimte gemeente Groningen'
],
urls: [
'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=ba554c1f-02a7-4d76-b449-fb9daa1f8bfd&limit=10000',
'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=af7b3916-4347-469a-8354-3c2d559bd92f&limit=10000'
]
}
var datasetsDublin = {
names:[
'SDCC Traffic Cameras',
'Derelict Site Register',
'Dublin City Council Commencement Notices',
'Dublin City Council Planning Applications',
'Dun Laoghaire-Rathdown County Council Planning Application 2008-2014',
'Fingal Council Planning Applications for last 7 years',
'Planning Register',
'Fingal Development Plan 2011-2017 Record of Protected Structures'
],
urls: [
'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52&limit=10000',
'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=fcbee83e-3d3d-4303-a568-24dd33d02adc&limit=10000',
'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=ee00de68-f2e4-482f-a003-3c0561351075&limit=10000',
'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=2f4a9d44-b52f-4c8b-a5db-d8f4a676d81e&limit=10000',
'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=c479f061-9638-489d-ac55-0c68765548ff&limit=10000',
'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=d29a477a-4734-43ef-8002-048c8640d441&limit=10000',
'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=2b23f32d-e27e-4eef-af1e-27e05103df7d&limit=10000',
'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=5ea813bc-fdf9-4edb-b3b1-0142b593d5c6&limit=10000',
]
}
var AvailableDatasets = [datasetsPrato, datasetsGroeningen, datasetsDublin]
Polymer({
is : 'data-sevc-controllet',
listeners : {
'items-slider-controllet_item-selected' : '_dataletSelected',
'draggable-element-controllet_content-dragged' : '_fieldsMapped',
'treeview-controllet-fileds-selected' : '_fieldsSelected'
},
properties : {
entryAnimation : {
type : String,
value : ""
},
exitAnimation : {
type : String,
value : ""
},
selected : {
type : Number,
value : 0
},
/**
* It represent the data url from CKAN api
*
* @attribute dataUrl
* @type string
* @default 'null'
*/
dataUrl : {
type : String,
value : "",/*"http://demo.ckan.org/api/action/datastore_search?resource_id=8324a4c9-66d6-47bf-a898-94237cc39b9f&limit=50",*/
observer : '_dataUrlChanged'
},
/**
* It represent the DEEP url to get information about the datalets
*
* @attribute deepUrl
* @type string
* @default 'null'
*/
deepUrl : {
type : String,
value : ""
},
organization : {
type : Number,
value : 2
},
datalet_query : {
type : String,
value : ""
},
datalets_list : {
type : Array ,
value : []
},
selected_datalet : {
type : String,
value : ""
},
selected_fields : {
type : Array,
value : []
},
DatasourceTabSelected : {
type : Number,
value : 0
},
datasets :
{
type : Array,
value : AvailableDatasets[0].names
},
datasets_urls :
{
type : Array,
value :AvailableDatasets[0].urls
}
},
ready : function(){
this.datasets = AvailableDatasets[this.organization].names;
this.datasets_urls = AvailableDatasets[this.organization].urls;
$(this.$.fields_placeholder).perfectScrollbar();
$(this.$.selected_fields_main_container).perfectScrollbar();
$(this.$.idm_fields_main_container).perfectScrollbar();
$(this.$.table_fields_container).perfectScrollbar();
},
/**
* Callback to parse the data requested when dataUrl change its value
*
* @method handleResponseData
*/
handleResponseData : function(e){
this.$.fields_treeview.init(e.detail.response);
var table_params ={
component : "datatable-datalet",
params :{
'data-url' : this.dataUrl
},
fields : [],
placeHolder : (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) ? this.$.table_component_place_holder : this.$.table_component_place_holder[Object.keys(this.$.table_component_place_holder)[0]]
};
ComponentService.deep_url = this.deepUrl;
ComponentService.getComponent(table_params);
},
/**
* Callback to parse the components response object
*
* @method handleResponseDatalets
*/
handleResponseDatalets : function(e){
this.datalets_list = new Array();
for(var i=0;i < e.detail.response.length;i++){
var datalet_info = { name : e.detail.response[i].name ,
image : e.detail.response[i].url + e.detail.response[i].name + ".png"
};
this.datalets_list.push(datalet_info);
}
/*var w = $(this.$.visualization_slider_area).width();
var pages = 2;
var numItemsPerPage = 3;*/
this.$.visualization_slider_area.innerHTML = '<items-slider-controllet items=\'' + JSON.stringify(this.datalets_list) + '\'' +
'\'></items-slider-controllet>';
},
handleSelectedDatalet : function(e){
var response = e.detail.response;
//<draggable-element-controllet is-target="true" heading="Field 1" description="This fields is used for ..." number="1"></draggable-element-controllet>
this.$.datalet_idm_fields_container.innerHTML = "";
for(var i =0; i < response.idm.inputs.input.length; i++){
var input = response.idm.inputs.input[i];
this.$.datalet_idm_fields_container.innerHTML += '<draggable-element-controllet is-target="true" id="' + input.name + '" heading="' + input.name + '" description="' + input.description + '" number="' + (i + 1) + '"></draggable-element-controllet><br>';
}
if(response.idm.inputs.input.constructor == Object) {
var input = response.idm.inputs.input;
if(input.selection == "*") {
var input_selected_fields = Polymer.dom(this.$.selected_fields_container).querySelectorAll('draggable-element-controllet');
for (var j = 0; j < input_selected_fields.length; j++) {
this.$.datalet_idm_fields_container.innerHTML += '<draggable-element-controllet is-target="true" heading="Field ' + (j + 1) + '" description="' + input.description + '" number="' + (i + 1) + '"></draggable-element-controllet><br>';
}
}
}
},
assignToolbar : function(){
this.$.toolbar_number.innerHTML = (this.selected + 1);
switch(this.selected){
case 0:
this.$.toolbar_title.innerHTML = "Dataset source";
this.$.toolbar_description.innerHTML = "Copy and paste/drag and drop in the textarea the url of datasource";
break;
case 1:
this.$.toolbar_title.innerHTML = "Data fields selection";
this.$.toolbar_description.innerHTML = "Select the fields you want to visualize";
break;
case 2:
this.$.toolbar_title.innerHTML = "Data mapping";
this.$.toolbar_description.innerHTML = "Select the visualization from the slider, drag and drop the selected fields in visualization parameter area, customize the visualization if you need";
break;
case 3:
this.$.toolbar_title.innerHTML = "Finish";
this.$.toolbar_description.innerHTML = "Confirms the creation of the datalet";
break;
}
},
_onPrevClick : function() {
this.entryAnimation = 'slide-from-left-animation';
this.exitAnimation = 'slide-right-animation';
this.selected = this.selected === 0 ? 0 : (this.selected - 1);
this.assignToolbar();
},
_onNextClick : function() {
this.entryAnimation = 'slide-from-right-animation';
this.exitAnimation = 'slide-left-animation';
this.selected = this.selected === 2 ? 2 : (this.selected + 1);
this.assignToolbar();
},
_datasourceSelected : function(e){
if(Object.getPrototypeOf(e) !== CustomEvent.prototype) {
e = e[Object.keys(e)[0]];
}
this.$.data_url.value = this.datasets_urls[parseInt(e.target.id)];
},
_dataUrlChanged : function(newValue, oldValue){
this.$.data_request.generateRequest();
},
_dataletSelected : function(e){
this.selected_datalet = e.detail.datalet;
this.$.selected_datalet_request.url = this.deepUrl + e.detail.datalet;
this.$.selected_datalet_request.generateRequest();
},
_fieldsSelected : function(e){
this.$.selected_fields_container.innerHTML = "";
for(var i=0;i<e.detail.fields.length;i++) {
this.$.selected_fields_container.innerHTML += '<draggable-element-controllet identifier="' + e.detail.fields[i] +
'" label="' + e.detail.fields[i].split(",")[e.detail.fields[i].split(",").length -1] +
'"></draggable-element-controllet><br>';
}
var place_holder = (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) ? this.$.table_component_place_holder : this.$.table_component_place_holder[Object.keys(this.$.table_component_place_holder)[0]];
var table_params ={
component : "datatable-datalet",
params :{
'data-url' : this.dataUrl
},
fields : e.detail.fields,
placeHolder : this.$.table_component_place_holder
};
ComponentService.deep_url = this.deepUrl;
ComponentService.getComponent(table_params);
},
_fieldsMapped : function(e){
var input_mapped_fields = Polymer.dom(this.$.datalet_idm_fields_container).querySelectorAll('draggable-element-controllet[is-target=true]');
this.selected_fields = Array();
for (var i = 0; i < input_mapped_fields.length; i++) {
if (input_mapped_fields[i].value != "") {
this.selected_fields.push(input_mapped_fields[i].value);
}
}
var datalet_params ={
component : this.selected_datalet,
params :{
'data-url' : this.dataUrl
},
fields : this.selected_fields,
placeHolder : this.$.datalet_placeholder
};
var datalet_finish_params ={
component : this.selected_datalet,
params :{
'data-url' : this.dataUrl
},
fields : this.selected_fields,
placeHolder : this.$.datalet_created_placehorder
};
ComponentService.deep_url = this.deepUrl;
ComponentService.getComponent(datalet_params);
ComponentService.getComponent(datalet_finish_params);
},
_handleDatasourceDragOver : function(e){
this.$.data_url.value = "";
},
_onFinish : function(e){
var data = {
dataUrl : this.dataUrl,
fields : this.selected_fields,
datalet : this.selected_datalet
}
this.fire('data-sevc-controllet.dataletCreated', {data : data});
}
});
</script>
</dom-module>