<!--
@group ROUTETOPA Polymer Core Elements
The `select-visualization-form-controllet` is a slider container of elements.
Pass to this component an array of components, a data url(CKAN api uri) and a string with one or multiple query in JsonPath format(separated by spaces) and it'll show a
slider with all components initialized with data and query attributes
### Code
Example
@class select-visualization-form-controllet
-->
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<!--<link rel="import" href="../../bower_components/iron-ajax/iron-request.html">
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">-->
<dom-module id="datalet-selection-controllet">
<template>
<link rel="stylesheet" href="../shared_js/bootstrap-3.3.4-dist/css/bootstrap.paper.style.min.css">
<link rel="stylesheet" href="../shared_js/bootstrap-toggle-master/css/bootstrap-toggle.min.css">
<style is="custom-style">
body {
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
font-size: 14px;
margin: 0;
padding: 24px;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
}
paper-input {
width: 80%;
}
paper-checkbox {
display: block;
margin-bottom: 40px;
}
</style>
<!--<iron-ajax
auto
id="data_request"
url={{data_url}}
handle-as="json"
verbose="true"
on-response="this.handleResponseData"
debounce-duration="300">
</iron-ajax>
<iron-ajax
auto
url="http://service.routetopa.eu/WebComponentsDEV/DEEP/datalets-list"
handle-as="json"
on-response="handleResponseDatalets"
debounce-duration="300">
</iron-ajax>
<iron-request id="xhr"></iron-request>-->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Data source</h3>
</div>
<div class="panel-body">
<section>
<paper-input id="data_url" label="CKAN api data url" floatingLabel value="{{data_url}}"></paper-input>
</section>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Selection data fileds to visualize</h3>
</div>
<div class="panel-body">
<section>
<div class="horizontal center-justified layout">
<div id="fields_placeholder" class="horizontal-section">
<!-- <template is="dom-repeat" items="{{fields}}">
<paper-checkbox>{{item}}</paper-checkbox>
</template>-->
</div>
</div>
</section>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Visualization tools selection</h3>
</div>
<div class="panel-body">
<div id="datalets_menu" class="layout"></div>
</div>
</div>
<section>
<!--<paper-button on-click="goto" raised>Go to visualization</paper-button>-->
<button id="goto" type="button" class="btn btn-primary">Go to visualization</button>
</section>
<content></content>
</template>
<script src="../shared_js/bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
<script src="../shared_js/bootstrap-toggle-master/js/bootstrap-toggle.min.js"></script>
<script>
DataletSelectionControllet = Polymer({
is: 'datalet-selection-controllet',
properties: {
/**
* It represent the data url from CKAN api
*
* @attribute data_url
* @type string
* @default 'null'
*/
data_url: {
type: String,
value: "http://demo.ckan.org/api/action/datastore_search?resource_id=8324a4c9-66d6-47bf-a898-94237cc39b9f&limit=50",
observer: '_data_urlChanged'
},
/**
* It stores all tools available in WebComponent server
*
* @attribute tools
* @type array
* @default 'null'
*/
tools:{
type: Array,
value: []
},
/**
* It stores all fields related to data retrieved from CKAN api url
*
* @attribute fields
* @type array
* @default 'null'
*/
fields:{
type: Array,
value: []
},
fieldsMap: {
type: Map,
value: null
}
},
/**
* data-url member changed watcher. It's called when data_url changes its value
*
* @method data_urlChanged
*/
_data_urlChanged: function(newValue, oldValue){
//this.$.xhr.send({url: newValue, body: {}}).then(function (e){this.handleResponseData(e)});
//get the data fields
var comp = this;
$.ajax({
url: newValue,
dataType: "json",
success: function(e){comp.handleResponseData(e)}
});
//get datalets list
$.ajax({
url: "http://service.routetopa.eu/WebComponentsDEV/DEEP/datalets-list",
dataType: "json",
success: function(e){comp.handleResponseDatalets(e)}
});
},
createFieldsContainer: function(id, heading){
var panelDefault = document.createElement('div');
panelDefault.className = 'panel panel-default';
var panelHeading = document. createElement('div');
panelHeading.className = 'panel-heading';
panelHeading.innerHTML = heading;
var panelBody = document. createElement('div');
panelBody.className = 'panel-body';
panelBody.id = id;
var fieldPanel = document.createElement('div');
fieldPanel.className = 'panel-body';
panelBody.appendChild(fieldPanel);
panelDefault.appendChild(panelHeading);
panelDefault.appendChild(panelBody);
return panelDefault;
},
cretePaperCheckbox: function (id, label ) {
var html = '<paper-checkbox id="' + id + '" role="checkbox" tabindex="0" toggles="" aria-pressed="false" aria-disabled="false" aria-checked="false" aria-label="' + label + '" class="x-scope paper-checkbox-0">'
+ '<div id="checkboxContainer" class="style-scope paper-checkbox">'
+ '<paper-ripple id="ink" class="circle style-scope paper-checkbox" center="">'
+ '<div id="background" class="style-scope paper-ripple"></div>'
+ '<div id="waves" class="style-scope paper-ripple"></div>'
+ '</paper-ripple>'
+ '<div id="checkbox" class="style-scope paper-checkbox">'
+ '<div id="checkmark" class="hidden style-scope paper-checkbox"></div>'
+ '</div>'
+ '</div>'
+ '<div id="checkboxLabel" aria-hidden="true" class="style-scope paper-checkbox">' + label + '</div>'
+ '</paper-checkbox>';
return html;
},
createBootstrapCheckbox: function(id, label) {
return '<div class="checkbox checkbox-primary">'
+ '<label class="checkbox-inline">'
+ '<input type="checkbox" data-label="'+ label +'" id="'+ id +'"/>' + label
+ '</label>'
+ '</div>';
},
createBootstrapToggle: function(id, label) {
return '<div class="checkbox">'
+ '<label style="padding-left: 3px; text-decoration: double;">'
+ '<input type="checkbox" data-label="'+ label +'" id="'+ id +'" data-toggle="toggle" /> ' + label
+ '</label>'
+ '</div>';
},
/**
* Callback to parse the data requested when data_url change its value
*
* @method handleResponseData
*/
handleResponseData: function(e){
//crete root node and insert it in to shadow dom
var mainPanel = this.createFieldsContainer("root", "Data fields");
this.$.fields_placeholder.appendChild(mainPanel);
this.fieldsMap = new Map;
this.fieldsMap["root"] = mainPanel;
//call recursive analyze function for current json to get all fields user can select
this.analyzeObject("root", null, e);
},
analyzeObject: function(parent, curr_field, object) {
if(curr_field != null){
var parent_list = parent.split('.');
var ele = null;
if(object.constructor == Array || object.constructor == Object){
var panel = this.createFieldsContainer(curr_field, parent_list[parent_list.length - 1]);
this.fieldsMap[curr_field] = panel;
this.fieldsMap[parent_list[parent_list.length - 2]].childNodes[1].appendChild(this.fieldsMap[curr_field]);
}else{
/*var checkbox = document.createElement('paper-checkbox');
checkbox.innerHTML = "<b>" + curr_field + '</b><br>';
checkbox.id = parent;
this.fieldsMap[parent_list[parent_list.length - 2]].childNodes[1].childNodes[0].appendChild(checkbox);*/
//Polymer.dom.flush();
//this.fieldsMap[parent_list[parent_list.length - 2]].childNodes[1].childNodes[0].innerHTML += this.cretePaperCheckbox(parent, curr_field);
this.fieldsMap[parent_list[parent_list.length - 2]].childNodes[1].childNodes[0].innerHTML += this.createBootstrapToggle(parent, curr_field);
}
}
if(object.constructor == Array || object.constructor == Object) {
var obj = (object.constructor == Array) ? object[0] : object;
for (var field in obj) {
if (obj[field] != null) {
parent_list = parent.split('.');
this.analyzeObject(parent + '.' + field, field, obj[field]);
}
}
}
},
/**
* Callback to parse the components response object
*
* @method handleResponseComponents
*/
handleResponseDatalets: function(e){
this.tools = e;
/*html = '<paper-menu>';
for(i=0;i < e.length;i++){
html += '<paper-item>' + e[i] + '</paper-item>';
}
html += '</paper-menu>';*/
html = '<label for="datalets_selector">Available Datalets list:</label>'
+ '<select class="form-control" id="datalets_selector">';
for(i=0;i < e.length;i++){
html += '<option>' + e[i] + '</option>';
}
html += '</select>';
$(this.$.datalets_menu).append(html);
},
/**
* Callback called when "Go to visualization" button is pressed
*
* @method handleResponseComponents
*/
goto: function(){
var url = "http://service.routetopa.eu/oxwall/webcomp";
var query = "$result$records[";
var cbs = this.shadowRoot.querySelectorAll("paper-checkbox");
for(i=0;i<cbs.length;i++){
if(cbs[i].checked){
query += cbs[i].id + ",";
}
}
query = query.slice(0,-1);
query += "]";
var cmp = this.$.toolsmenu.selectedItemLabel;
url += "/" + cmp + "/" + btoa(this.data_url) + "/" + query + "/0";
window.location = url;
},
ready: function(){
/*this.fields = [
{parent:"root", name :"No fields available"}
];*/
this.tools = [
'No tools available'
];
//this.$.data_request.addEventListener('response', this.handleResponseData);
/* var comp = this;
$.ajax({
url: "http://service.routetopa.eu/WebComponentsDEV/DEEP/datalets-list",
dataType: "json",
success: comp.handleResponseDatalets
});*/
$(this.$.goto).click(this.goto());
}
});
</script>
</dom-module>