Sdash

dashboard.
xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
class="no-js no-touch"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> </met
a>
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0"
/>
<link rel="icon" type="image/png" href="#{request.contextPath}/resources
/images/picto_site.png" />
<!-<link rel="stylesheet" media="all" href="#{request.contextPath}/reso
urces/css/style-min.css"/>-->
<link rel="stylesheet" media="all" href="#{request.contextPath}/resource
s/css/responsive.css"/>
s/css/lessframework.css"/>
s/maprepos/jquery-jvectormap.css"/>
<h:outputText value="" escape="false" />
<h:outputText value="" escape="false" />
<script src="#{request.contextPath}/resources/js/tabview.js"></script>

<script src="#{request.contextPath}/resources/js/map-min.js"></script>

<script src="#{request.contextPath}/resources/js/Highcharts-min.js"></sc
ript>
<script src="#{request.contextPath}/resources/js/jquery.history.js"></sc
ript>
<script src="#{request.contextPath}/resources/js/main.js"></script>
<!-<script src="#{request.contextPath}/resources/js/main-min.js"></
script>-->
<script src="#{request.contextPath}/js/css3-mediaqueries.js"></script>
<script src="#{request.contextPath}/js/custom.js"></script>
<script src="#{request.contextPath}/js/respond.min.js"></script>
<script src="#{request.contextPath}/js/modernizr.js"></script>



<script type="text/javascript" src="#{request.contextPath}/dashboard/js/

jquery-1.8.3.js"></script>
jquery-ui-1.9.2.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="#{request.contextPath}/dash
board/css/jquery-ui.css" />
<!-grid-->
board/css/jquery.gridster.min.css" />
jquery.gridster.js"></script>
<!-FeedReader-->
board/css/FeedEk.css" />
<script src="#{request.contextPath}/dashboard/js/feedReader/FeedEk.js"><
/script>
<script src="#{request.contextPath}/dashboard/js/feedReader/moment.min.j
s"></script>
<!-clock che-->
<script src="#{request.contextPath}/dashboard/js/plugins/Clock.js"></scr
ipt>
<script src="#{request.contextPath}/dashboard/js/plugins/highstock.js"><
/script>
<script src="#{request.contextPath}/dashboard/js/plugins/exporting.js"><
/script>
<script src="#{request.contextPath}/dashboard/js/plugins/highcharts-more
.js"></script>
board/css/dashboard.css" />
<script>
Highcharts.setOptions({
lang: {
months: [#{msg['months']}],
weekdays: [#{msg['weekdays']}]
}, global: {
useUTC: false
}
});
function constructIndexCountryMap(seri, divId)
{
$('#' + divId).vectorMap({
map: 'world_mill_en',
backgroundColor: '#FFFFFF',
zoomOnScroll: true,
zoomButtons: true,
regionStyle: {
initial: {
fill: '#e2e3e4'
},
selected: {
fill: '#FF5E00'
}
},
series: {
regions: [{
scale: ['#C8EEFF', '#0071A4'],
normalizeFunction: 'polynomial',
values: seri
}]
},
onRegionOver: function(event, code)
{
if (seri[code] >= 0) {
// the hovered region is part of the regionResults,
show hand cursor
$('.jvectormap-container').css('cursor', 'pointer');
}
},
onRegionOut: function(e, code) {
// return to normal cursor
$('.jvectormap-container').css('cursor', 'default');
},
onRegionLabelShow: function(event, label, code) {
if (seri[code] >= 0) {
label.html(label.html() + ' <span> </span> <span sty
le="color:#0073CF;font-weight:bold;">' + Math.round(seri[code] * 100) / 100 +
' % </span> <span> </span>');
}
else {
return false;
}
},
});
}
</script>
<style>
.ui-growl {
position: fixed;
top: 100px;
right: 20px;
width: 301px;
}
.jqplot-title{
display: none !important;
}
.jvectormap-label {
position: absolute;
display: none;
border: solid 1px #4D9BF4;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #F5F5F5;
color: #2D2A2A;
font-family: sans-serif, Verdana;
font-size: 12px;
padding: 3px;
z-index: 11;
}
.navs .mCSB_container , .divident .mCSB_container {
margin-right: 0 !important;
}
.navs .mCSB_scrollTools {
left: 97% !important;
}
.divident .mCSB_scrollTools {
left: 96.8% !important;
}
.navs .ui-datatable-odd {
background: none repeat scroll 0 0 #F3F3F3 !important;
}
.divident .ui-datatable-odd {
}
.doc .ui-datatable-odd {
}
.highcharts-range-selector{
top: 43px !important;
border: none !important;
margin-left: 1px;
}
</style>
<script>
var selectedSwapShare = [];
var selectedSwapShareSeries = [];
var arrayIndexForSwap = 0;
function getSwapDataForLineChart(resp, idName)
{
var dataArray = $.makeArray(resp);
var swapData = $.map(dataArray[0], function(value, key) {
var arrayname = [parseInt(key), value];
return [arrayname];
});
swapData.sort(function(a, b) {
return a[0] - b[0];
});
var swapSeriesOptions = [];
swapSeriesOptions[0] = {
name: "name",
data: swapData, lineWidth: 2,stickyTracking: false,
dataGrouping: {
groupPixelWidth: 40,
approximation: "average",
enabled: true,
units: [[
'week',
[1]
]]
}}
;
if ($.inArray(idName, selectedSwapShare) === -1)
{
selectedSwapShare[arrayIndexForSwap] = idName;
selectedSwapShareSeries[arrayIndexForSwap] = swapSeriesOptio
ns;
arrayIndexForSwap++;
}
plotSwapLineChart(swapSeriesOptions, idName);
}
function plotSwapLineChart(seri, idName)
{
$('#' + idName).highcharts('StockChart', {
credits: {
enabled: false
},
colors: ['#7cb5ec', '#01ABC4'],
yAxis: {
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
}, xAxis: {
type: 'datetime', ordinal: false
},
exporting: {
enabled: false
},
navigator: {
enabled: false,
},
tooltip: {
pointFormat: '<span style="color:{series.color}">Value</
span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2
},rangeSelector: {
enabled :false
},
series: selectedSwapShareSeries[$.inArray(idName, selectedSw
apShare)]
}, function() {
// apply the date pickers
setTimeout(function() {
$('input.highcharts-range-selector', $('#' + idName)).da
tepicker();
}, 0);
});
$.datepicker.setDefaults({
dateFormat: 'yy-mm-dd',
onSelect: function(dateText) {
this.onchange();
this.onblur();
}
});
}
</script>
<script>
var allKeyNameForIndex = '';
var allKeyNameForHolding = '';
var selectedShare = [];
var selectedShareReturn = [];
var arrayIndexForReturn = 0;
var arrayIndexForFicShareIndex = 0;
var selectedFixShareForIndex = [];
var selectedSumForIndex = [];
var arrayIndexForFicShareHolding = 0;
var selectedFixShareForHolding = [];
var selectedSumForHolding = [];
var redrawLineChart = [];
function getDataForLineChart(resp, resp2, idName, index, shareName)
{
var realArray = $.makeArray(resp);
var Data1 = $.map(realArray[0], function(value, key) {
return [arrayname];
});
Data1.sort(function(a, b) {
return a[0] - b[0];
});
var realArray2 = $.makeArray(resp2);
var Data2 = $.map(realArray2[0], function(value, key) {
return [arrayname];
});
Data2.sort(function(a, b) {
return a[0] - b[0];
});
var seriesOptions = [];
seriesOptions[0] = {
name: shareName,
data: Data1, lineWidth: 2
};
seriesOptions[1] = {
name: index,
data: Data2, lineWidth: 2
};
plotLineChart(seriesOptions, idName);
}
function getIndexDataForPieChart(resp, divId, charTitle) {
var Data = $.map(realArray[0], function(value, key) {
var arrayname = [key, value];
return [arrayname];
});
if (Data.length > 0)
{
plotPieChart(Data, divId, charTitle);
}
}
function getIndexDataForBarChart(resp, divId, charTitle) {
allKeyNameForIndex = '';
var sumForIndex = 0;

allKeyNameForIndex = allKeyNameForIndex + key + ',';
sumForIndex += value;
return [arrayname];
});
if ($.inArray(divId, selectedFixShareForIndex) === -1)
{
selectedFixShareForIndex[arrayIndexForFicShareIndex] = divId
;
selectedSumForIndex[arrayIndexForFicShareIndex] = sumForInde
x;
arrayIndexForFicShareIndex++;
}
{
plotBarChart(Data, divId, charTitle, allKeyNameForIndex, 'in
dex');
}
}
function getHoldingDataForPieChart(resp, divId, charTitle) {
return [arrayname];
});
{
plotPieChart(Data, divId, charTitle);
}
}
function getHoldingDataForBarChart(resp, divId, charTitle) {
var sumForHolding = 0;
allKeyNameForHolding = '';
allKeyNameForHolding = allKeyNameForHolding + key + ',';
sumForHolding += value;
return [arrayname];
});
if ($.inArray(divId, selectedFixShareForHolding) === -1)
{
selectedFixShareForHolding[arrayIndexForFicShareHolding] = d
ivId;
selectedSumForHolding[arrayIndexForFicShareHolding] = sumFor
Holding;
arrayIndexForFicShareHolding++;
}
{
plotBarChart(Data, divId, charTitle, allKeyNameForHolding, '
holding');
}
}
function plotLineChart(seri, idName)
{
$('#' + idName).highcharts('StockChart', {
credits: {
enabled: false
},
colors: ['#116cb5', '#01ABC4'],
yAxis: {
labels: {
formatter: function() {
return (this.value > 0 ? ' + ' : '') + this.valu
e + '%';
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},
xAxis: {
type: 'datetime', ordinal: false
},
plotOptions: {
series: {
lineWidth: 1,
compare: 'percent'
}
},
exporting: {
enabled: false
},
navigator: {
enabled: true,
adaptToUpdatedData: true,
},
rangeSelector: {
enabled: true,
inputDateFormat: '%Y/%m/%d',
buttonTheme: {// styles for the buttons
fill: '#f7f7f7',
stroke: 'none',
'stroke-width': 0,
r: 8,
style: {
color: '#4d4d4d',
fontSize: '10px',
fontWeight: 'normal',
paddingTop: '5px'
},
states: {
hover: {
},
select: {
fill: '#0073CF ',
style: {
color: 'white'
}
}
}
},
inputBoxBorderColor: 'gray',
inputBoxWidth: 120,
inputBoxHeight: 18,
inputPosition: {
y: -5
},
inputStyle: {
color: '#454545',
background: '#fff',
fontSize: '11px',
padding: '5px'
//
},
labelStyle: {
color: '#0073CF',
fontSize: '11px'
display:'none'
},
selected: 1,
buttons: [{
type: 'ytd',
text: 'YTD'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'year',
count: 3,
text: '3y'
}, {
type: 'year',
count: 5,
text: '5y'
}, {
type: 'all',
text: 'All'
}]
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series
.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2
},
series: seri
}, function(chart){
// apply the date pickers
setTimeout(function () {
var rangeSelector = $('#' + idName + ' input.highcha
rts-range-selector');
rangeSelector.datepicker({
autoclose: true,
todayHighlight: true,
beforeShow: function (input, inst) {
var datePickerGraphtop = $('#' + idName).
offset().top + 65;
setTimeout(function () {
inst.dpDiv.css({
top: datePickerGraphtop
});
}, 0);
}
});
}, 0);
});
// Set the datepicker's date format
$.datepicker.setDefaults({
dateFormat: 'yy-mm-dd',
onSelect: function(dateText) {
this.onchange();
this.onblur();
}
});
}
;
function plotPieChart(seri, idName, title) {
Highcharts.setOptions({
colors: ['#116cb5', '#037089','#683f75' , '#7d4682', '#747ba
8', '#6d98bf', '#919997','#b6aea7']
});
$('#' + idName).highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
style: {
overflow: 'visible',
fontWeight: 'normal'
},
height: 250
},
exporting: {
buttons: {
contextButton: {
enabled: false
}
}
},
credits: {
enabled: false
},
tooltip: {
headerFormat: '<span style="font-size: 10px">{series.nam
e}</span><br/>',
pointFormat: '{point.name}: <b>{point.percentage:.1f}%</
b>'
},
title: {
text: ''
},
legend: {
align: 'right',
verticalAlign: 'middle',
width: 180,
layout: 'vertical',
x: -10,
y: 10,
padding: -3,
useHTML: true,
itemStyle: {
width: '180px',
fontSize: '10px'
},
labelFormatter: function() {
return '<div style="width:170px;height: auto;float
: left;"><span style="float:left;clear:both;width: 67%;word-wrap: break-word;whi
te-space: pre-wrap;">' + this.name + '</span> <span style="font-weight:normal;fl
oat:right;">' + (this.y * 100).toFixed(2) + '%</span></div>';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
innerSize: '50%',
center: ['50%', '50%'],
borderWidth: 0,
dataLabels: {
format: '{point.percentage:.1f}%',
enabled: false,
distance: -10,
shadow: false,
style: {
color: '#ffffff',
textShadow: '0px',
fontSize: '9px'
}
},
showInLegend: true
}
},
series: [{
animation: true,
type: 'pie',
name: title,
data: seri,
}]
},
function(chart) { // on complete
var xpos = '25.5%';
var ypos = '49%';
var circleradius = 60;
// Render the circle
chart.renderer.circle(xpos, ypos, circleradius).attr({
fill: 'rgba(51, 51, 51, 0.05)',
zIndex: 3333,
}).add();
});
}
function plotBarChart(seri, idName, title, allKeyName, type) {
$('#' + idName).highcharts({
chart: {
type: 'bar',
style: {
overflow: 'visible'
}
},
title: {
text: ''
},
exporting: {
buttons: {
contextButton: {
enabled: false
}
}
},
tooltip: {
pointFormat: '{series.name}'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
var indexByShare;
var sum;
if (type === 'index')
{
indexByShare = $.inArray(idName, selecte
dFixShareForIndex);
sum = selectedSumForIndex[indexByShare];
}
else {
indexByShare = $.inArray(idName, selecte
dFixShareForHolding);
sum = selectedSumForHolding[indexByShare
];
}
var pcnt = (this.y / sum) * 100;
return Highcharts.numberFormat(pcnt) + '%';
}
}
}
},
xAxis: {
categories: allKeyName.split(','),
lineColor: '#999',
lineWidth: 1,
tickColor: '#666',
tickLength: 3
},
yAxis: {
lineColor: '#999',
lineWidth: 1,
tickColor: '#666',
tickWidth: 1,
tickLength: 3,
gridLineColor: '#ddd',
title: {
text: null
},
labels: {
var indexByShare;
var sum;
if (type === 'index')
{
indexByShare = $.inArray(idName, selectedFix
ShareForIndex);
sum = selectedSumForIndex[indexByShare];
}
else {
indexByShare = $.inArray(idName, selectedFix
ShareForHolding);
sum = selectedSumForHolding[indexByShare];
}
var pcnt = (this.value / sum) * 100;
return Highcharts.numberFormat(pcnt, 0, ',') + '
%';
}
}
},
series: [{
showInLegend: false,
animation: false,
data: seri
}]
});
}
</script>
<script>
function gotoFilter(id) {
var leftPos = -100 * id + '%';
$(".FilterWrapper").animate({left: leftPos}, 300);
$('.FilternavButton').removeClass('ActiveFilternavButton');
if (id === "0") {
$("#tabViewForm\\:tabView\\:0\\:iconsFilterButtonId").addCla
ss('ActiveFilternavButton');
$("#FilterPanel1").css('height', 'auto');
$("#FilterPanel2").css('height', '180px');
} else {
$("#tabViewForm\\:tabView\\:0\\:advancedFilterButtonId").add
Class('ActiveFilternavButton');
$("#FilterPanel1").css('height', '180px');
$("#FilterPanel2").css('height', 'auto');
}
}
</script>
<style>
/* Using box shadows to create 3D effects */
#calculator {
width:286px;
height: auto;
padding: 20px 20px 9px;
background: #9dd2ea;
background: linear-gradient(#9dd2ea, #8bceec);
border-radius: 3px;
box-shadow: 0px 4px #009de4, 0px 10px 15px rgba(0, 0, 0, 0.2);
}
/* Top portion */
.top span.clear {
float: left;
}
/* Inset shadow on the screen to create indent */
.top .screen {
height: 40px;
width: 192px;
float: right;
padding: 0 10px;
background: rgba(0, 0, 0, 0.2);
border-radius: 3px;
box-shadow: inset 0px 4px rgba(0, 0, 0, 0.2);
/* Typography */
font-size: 17px;
line-height: 40px;
color: white;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
text-align: right;
letter-spacing: 1px;
}
/* Clear floats */
.keys, .top {overflow: hidden;}
/* Applying same to the keys */
.keys span, .top span.clear {
float: left;
position: relative;
top: 0;
cursor: pointer;
width: 66px;
height: 36px;
background: white;
border-radius: 3px;
box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
margin: 0 7px 11px 0;
color: #888;
line-height: 36px;
text-align: center;
/* prevent selection of text inside keys */
user-select: none;
/* Smoothing out hover and active states using css3 transitions
*/
transition: all 0.2s ease;
}
/* Remove right margins from operator keys */
/* style different type of keys (operators/evaluate/clear) different
ly */
.keys span.operator {
background: #FFF0F5;
margin-right: 0;
}
.keys span.eval {
background: #f1ff92;
box-shadow: 0px 4px #9da853;
color: #888e5f;
}
.top span.clear {
background: #ff9fa8;
box-shadow: 0px 4px #ff7c87;
color: white;
}
/* Some hover effects */
.keys span:hover {
background: #9c89f6;
box-shadow: 0px 4px #6b54d3;
color: white;
}
.keys span.eval:hover {
background: #abb850;
box-shadow: 0px 4px #717a33;
color: #ffffff;
}
.top span.clear:hover {
background: #f68991;
box-shadow: 0px 4px #d3545d;
color: white;
}
/* Simulating "pressed" effect on active state of the keys by removi
ng the box-shadow and moving the keys down a bit */
.keys span:active {
top: 4px;
}
.keys span.eval:active {
top: 4px;
}
.top span.clear:active {
top: 4px;
}
</style>
</h:head>
<h:body id="body" styleClass="body-wrapper DashbordPage" onload="loadPage()"
>
<f:view locale="#{indexBean.selectedLocale}"/>
<a id="totop" href="#"></a>
<div id="primaryContainer" class="primaryContainer clearfix">
<ui:include src="/WEB-INF/include/Disclaimer.xhtml"/>
<div class="row TopPageContainer">
<div class="container row FrontPageContainer">
<div class="row" >
<ui:include src="/WEB-INF/include/header.xhtml">
<ui:param value="#{indexBean.selectedLanguage}" name
="language"/>
<ui:param value="#{indexBean.selectedCountry}" name=
"country"/>
<ui:param value="#{indexBean.userProfile}" name="use
rProfile"/>
<ui:param value="#{indexBean.site.mailInstit}" name=
"mailInstit"/>
<ui:param value="#{indexBean.site.mailRetail}" name=
"mailRetail"/>
<ui:param value="#{indexBean.site.telInstit}" name="
telInstit"/>
<ui:param value="#{indexBean.site.telRetail}" name="
telRetail"/>
</ui:include>
</div>
<div class="topmenu row">
<ui:include src="#{indexBean.site.menu.xhtmlLink}">
<ui:param value="#{indexBean.site.menu}" name="compo
nent"/>
<ui:param value="#{indexBean.selectedLanguage}" name
="language"/>
<ui:param value="#{indexBean.selectedCountry}" name=
"country"/>
<ui:param value="#{indexBean.userProfile}" name="use
rProfile"/>
</ui:include>
</div>
</div>
</div>
<div class="container row" style="margin-bottom: 48px !important;bac
kground: #F1F1F1;">
<div>
<div id = "newDashe" class="record">
<button class="newDash"> New Dashboard</button>
</div>
<div id = "dashMap" class="record">
<h:form id="dashboardForm">
<p:selectOneButton id="dashboardElement" value="#{currentDash}">
<f:selectItems value="#{dashboardBean.dashClient}" var="das
hboard" itemLabel="#{dashboard.name}" itemValue="#{dashboard}"/>
</p:selectOneButton>
</h:form>
</div>
</div>
<div id="DashElement" class="DashElement-container">

<div id = "savePositions" class="record">
<p:commandButton id = "savePositions" value="Save Dashbo
ard" action="#{dashboardBean.saveDashboard()}"/>
</div>
<div id = "removeDash" class="record">
<p:commandButton value="Remove Dashboard" action="#"/>
</div>
<div id = "addNotePad" class="record">
<button class="addNotePad">Add NotePad </button>
</div>
</div>
<div class="layouts_grid" id="layouts_grid" >
<ul class="dashbordWidget">
</ul>
</div>
<div id="newDashDialog" title="DASHBOARD DESCRIPTION">
<div id="newDashDiv" class="ui-widget">
<label for="newDashInput"> Title: </label>
<input id="newDashInput" />
</div>
</div>
<div id="savedDashList" title="DASHBOARD DESCRIPTION">
<div id="savedDashDiv" class="ui-widget">
<label for="savedDashInput"> Title: </label>
<input class="dashList" id="savedDashInput" />
</div>
</div>

<!-<div id ="portfeuille" style="display:none ">
<h:form>
<img src="#{request.contextPath}/images/portfolio.png" s
tyle="display: block;width: 31%;margin: auto; "/>
<h:commandLink style="display: block;text-align: center;
margin-top: 32px;color: #005EB0;" value="#{msg['portfolioMsg']}" action="/privat
e/portfolio?faces-redirect=true" >
</h:commandLink>
</h:form>
</div> -->
</div>
<div id="chartDialog" >
</div>
<div id="fade" >
</div>
<div class="row ButtonPageContainer" >
<ui:include src="/WEB-INF/include/Footer.xhtml">
<ui:param value="#{indexBean.site.footer}" name="component"/
>
<ui:param value="#{indexBean.selectedLanguage}" name="langua
ge"/>
<ui:param value="#{indexBean.selectedCountry}" name="country
"/>
<ui:param value="#{indexBean.userProfile}" name="userProfile
"/>
</ui:include>
</div>
</div>
<script defer="defer" src="#{request.contextPath}/resources/js/jquery.m
CustomScrollbar.concat.min.js"></script>
<script type="text/javascript" >
//var $ = jQuery.noConflict(true);
var user = "#{userBean.userClient.login}";

var url = window.location.href;
var arr = url.split("/");
var adressIp = arr[arr.indexOf("LyxorETF")-1];
var highHisto, highData;

var savedDash = "false";
var numberOfdash = 0;
var i = 0;
var currentDashTitle;
$(window).on('beforeunload', function() {
savePositions(false);
createCookie('currentDashTitle', currentDashTitle, 1);
});
var chart_element = new Array();
var chart_data = new Array();
var chart_title = new Array();
var chart_container = new Array();
var dashButtonList = new Array();
var selectedRSSTitle = "Indicators News";
var widgetList = new Array();
var rssListWidget = new Array();
var etfData;
var etfMap;
var dashMap;
var selectedEtf = "";
var etfName = "";
var attribute;
var selectedRSS = "http://www.aweber.com/blog/feed/";
var numberOfDiv = 0;
var jqPlotData;
var layout;
var grid_size = 50;
var grid_margin = 15;
var block_params = {
max_width: 20,
max_height: 20
};
//
Grid
function createWidget(size_x, size_y, col, row, divID, type, data) {
var widgetName;
var idName;
var divC = document.createElement('div');
var li = document.createElement('li');
li.setAttribute('id', "li_" + divID);
li.className = "layout_block gs_w ui-resizable ui-resizable-auto
hide";
li.style.backgroundColor = "#64A7DB";
divC.appendChild(li);
var div2 = document.createElement('div');
div2.className = "remove_element";
div2.setAttribute('id', "title_" + divID);
// close span
var span = document.createElement('span');
span.setAttribute('id', "close_" + divID);
span.setAttribute('style',"width: 20px;height: 20px; display: bl

ock;");
span.innerHTML = "";
div2.appendChild(span);
$('#close_' + divID).live('click', function() {
layout.remove_widget('#li_' + divID, false);
});
div2.style.backgroundColor = "blue";
li.appendChild(div2);
// handle
var handlediv = document.createElement('div');
handlediv.className = "handle_div";
handlediv.setAttribute('id', "handle_" + divID);
li.appendChild(handlediv);
if (type === "clock")
{
div3.setAttribute('id', "clock_" + divID);
div3.className = "info";
idName = "clock_" + divID;
widgetName = "clock";
}
if (type === "portfolio")
{
div3.setAttribute('id', "portfolio_" + divID);
idName = "portfolio_" + divID;
widgetName = "portfolio";
}
if (type === "information")
{
div3.setAttribute('id', "dataDiv_" + divID);
idName = "dataDiv_" + divID;
widgetName = "information:" + data;
}
if (type === "rss")
{
// Rss Title
var div = document.createElement('div');
div.setAttribute('id', "title_div" + divID);
div.className = "title_div";
$(div).text(data.split(":")[2]);
li.appendChild(div);
div3.setAttribute('id', "rssDiv_" + divID);
idName = "rssDiv_" + divID;
widgetName = "rss:" + data;
}
if (type === "note")
{
div3.setAttribute('id', "noteDiv_" + divID);
div3.className = "textArea_container";
var tex = document.createElement('textarea');
tex.setAttribute('id', "note_" + divID);

tex.style.resize = "none";
//save button
div4.setAttribute('id', "save_text_" + divID);
div4.className = "saveEdit_Container";
var saveButton = document.createElement('button');
saveButton.setAttribute('id', "#save_text_" + divID);
saveButton.setAttribute('role', "button");
saveButton.setAttribute('aria-disabled', "false");
saveButton.className = "save_text ui-button ui-widget ui-sta
te-default ui-corner-all ui-button-text-icon-primary";
var span1 = document.createElement('span');
span1.setAttribute('id', "span_" + divID);
span1.className = "ui-button-text";
span1.innerHTML = "SAVE";
span2.className = "ui-button-icon-primary ui-icon ui-icon-do
cument";
saveButton.appendChild(span2);
div4.appendChild(saveButton);
div3.appendChild(tex);
idName = "note_" + divID;
widgetName = "note";
}
if (type === "chart")
{
div3.setAttribute('id', "chart_" + divID);
idName = "chart_" + divID;
widgetName = "chart:" + data;
}
s = divC.innerHTML;
layout.add_widget(s, size_x, size_y, col, row, widgetName, 0);
return idName;
}
function numberOfDynmicDiv()
{
numberOfDiv++;
return numberOfDiv;
}
function resizeBlock(elmObj, id, type) {
var elmObj = $(elmObj);
var w = elmObj.width() - grid_size;
var h = elmObj.height() - grid_size;
for (var grid_w = 1; w > 0; w -= (grid_size + (grid_margin * 2))
) {
grid_w++;
}
for (var grid_h = 1; h > 0; h -= (grid_size + (grid_margin * 2))
) {
grid_h++;
}
layout.resize_widget(elmObj, grid_w, grid_h);
{
replotetheChart(id);
}
}
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
function replotetheChart(divID)
{
var enabled = false;
chart_data[divID].sort(function(a, b) {
return a[0] - b[0];
});
if (($('#' + chart_container[divID]).width() > 500))
{
if ($('#' + chart_container[divID]).height() > 300)
enabled = true;
}
var op = {
chart: {renderTo: chart_container[divID], zoomType: 'x'},
rangeSelector: {
selected: 1,
inputEnabled: enabled,
enabled: enabled
},
title: {
text: chart_title[divID]
},
navigator: {
enabled: enabled
},
scrollbar: {
enabled: enabled
},
credits: {
enabled: false
},
exporting: {enabled: enabled},
series: [{
name: 'AAPL',
data: chart_data[divID],
tooltip: {
valueDecimals: 2
}
}]
};
chart_element[divID] = new Highcharts.StockChart(op);
}
function plotTheChart(seri, divID, idName, title)

{
//
//
//
//
//
//
//
//
//
//
//
;
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
seri.sort(function(a, b) {
return a[0] - b[0];
});
if (($('#' + idName).width() > 500))
{
if ($('#' + idName).height() > 300)
enabled = true;
}
//
chart_element[divID] = new Highcharts.Chart(options)
var op = {
chart: {renderTo: idName, zoomType: 'x'},
rangeSelector: {
selected: 1,
inputEnabled: $('#' + idName).width() > 500,
enabled: enabled
},
title: {
text: title
},
navigator: {
enabled: enabled
},
scrollbar: {
enabled: enabled
},
credits: {
enabled: false
},
series: [{
name: 'AAPL',
data: seri,
tooltip: {
valueDecimals: 2
}
}]
};
chart_container[divID] = idName;
chart_data[divID] = seri;
chart_title[divID] = title;
$('#' + idName).live('dblclick', function(event) {
var op = {
chart: {renderTo: "chartDialog", zoomType: 'x'},
rangeSelector: {
selected: 1
},
title: {
text: title
},
credits: {
enabled: false
},
exporting: {
enabled: true,
//
exportButton: {
//
x: 50,
//
enabled: true
//
},
//
buttons:
//
{
//
customButton:
//
{
//
x: 0,
//
symbol: 'url(#{request.con
textPath}/images/closechart.png)',
//
onclick: function() {
//
document.getElementByI
d('fade').style.display = 'none';
//
document.getElementByI
d('chartDialog').style.display = 'none';
//
}
//
}
//
}
//
},
//
series: [{
//
name: 'AAPL',
//
data: seri,
//
tooltip: {
//
valueDecimals: 2
//
}
//
}]
//
//
};
//
var chart = new Highcharts.StockChart(op);
//
// $("#chartDialog").dialog( "option", "width", 900 );
//
//
//
// $("#chartDialog").dialog("open");
//
document.getElementById('fade').style.display = 'block';
//
document.getElementById('chartDialog').style.display = 'bl
ock';
//
});
//
}
// ui
function createUiButton(divID, name, text)
{
div5.setAttribute('id', name + divID);
var editButton = document.createElement('button');
editButton.setAttribute('id', name + divID);
editButton.setAttribute('role', "button");
editButton.setAttribute('aria-disabled', "false");
editButton.className = "save_text ui-button ui-widget ui-state-d
efault ui-corner-all ui-button-text-icon-primary";
span1.innerHTML = text;
span2.className = "ui-button-icon-primary ui-icon ui-icon-docume
nt";
editButton.appendChild(span2);
div5.appendChild(editButton);
}
//
//
//
//
//
s", data);
//
//
//
rgin * 2)],
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
n(event) {
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
, data);
//
//
//
//
function addFeedReader(size_x, size_y, col, row, rssValue, title)

{
var divID = numberOfDynmicDiv();
var data = rssListWidget.indexOf(rssValue) + ":" + title;
var idName = createWidget(size_x, size_y, col, row, divID, "rs
elementId = "#li_" + divID;
$(elementId).resizable({
grid: [grid_size + (grid_margin * 2), grid_size + (grid_ma
animate: false,
minWidth: grid_size,
minHeight: grid_size,
containment: '#layouts_grid .dashbordWidget',
autoHide: true,
start: function(event, ui) {
$('#rssDiv_' + divID).css({"visibility": "hidden"});
$(this).css({"border": "3px solid #333"});
$(this).css({"background-color": ""});
},
stop: function(event, ui) {
var resized = $(this);
$(this).css({"border": ""});
$(this).css({"background-color": "#64A7DB"});
$('#rssDiv_' + divID).css({"visibility": ""});
resizeBlock(resized, divID);
}, 0);
}
});
$(elementId + " > .ui-resizable-handle").live('hover', functio
if (event.type === 'mouseenter') {
layout.disable();
} else {
layout.enable();
}
});
$('#' + idName).addClass("rssDiv", true);
$('#' + idName).FeedEk({
FeedUrl: rssListWidget[parseInt(rssValue)],
MaxCount: 5
});
}
function addChart(size_x, size_y, col, row, code, title) {
var idName;
var data = code + ":" + title;
idName = createWidget(size_x, size_y, col, row, divID, "chart"
code = code.trim();
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
//
url: "http://" + adressIp + "/LyxorETF/webresources/servic
es/getHistory/" + code + "/" + attribute,
//
dataType: "json",
//
success: function(resp) {
//
//
jqPlotData = $.map(realArray[0], function(value, key)
{
//
//
return [arrayname];
//
});
//
highHisto = $.map(realArray[0], function(value, key) {
//
//
return [parseInt(key)];
//
});
//
highData = $.map(realArray[0], function(value, key) {
//
//
return [value];
//
});
//
// renderMasterDetailChart(highHisto,idName ) ;
//
plotTheChart(jqPlotData, divID, idName, title);
//
},
//
error: function(e) {
//
// alert('chart error ' + e);
//
}
//
});
//
//
//
grid: [grid_size + (grid_margin * 2), grid_size + (grid_ma
rgin * 2)],
//
animate: false,
//
minWidth: grid_size * 6,
//
minHeight: grid_size * 4,
//
//
autoHide: true,
//
//
$('#chart_' + divID).css({"height": $(this).height() *
70 / 100});
//
$('#chart_' + divID).css({"width": $(this).width() * 9
5 / 100});
//
$('#chart_' + divID).css({"visibility": "hidden"});
//
//
//
},
//
//
//
//
resizeBlock(resized, divID, "chart");
//
$('#chart_' + divID).css({"visibility": ""});
//
}, 0);
//
//
//
$('#chart_' + divID).css({"height": ""});
//
$('#chart_' + divID).css({"width": ""});
//
}
//
});
//
n(event) {
//
//
layout.disable();
//
} else {
//
//
//
//
layout.enable();
}
});
}
function addNotePad(size_x, size_y, col, row, text)
{
var idName;
idName = createWidget(size_x, size_y, col, row, divID, "note");
buttonSaveId = "#save_text_" + divID;
var h = $('#save_text_' + divID).css("height");
$('#noteDiv_' + divID).css({"height": "calc(100% - ( 60px))"});
if (text)
{
document.getElementById('note_' + divID).value = text;
}
var te = document.getElementById('note_' + divID).value;
if (te)
{
$("#li_" + divID).attr("data-name", "note:" + te);
}
$(buttonSaveId)
.button({icons: {primary: "ui-icon-document"}})
.click(function() {
if ($('#span_' + divID).text() === "SAVE")
{
var te = document.getElementById('note_' + divID
).value;
if (te)
{
$("#li_" + divID).attr("data-name", "note:"
+ te);
}
$('#note_' + divID).attr("disabled", "disabled")
;
$('#span_' + divID).text("EDIT");
}
else {
$('#note_' + divID).removeAttr("disabled");
$('#span_' + divID).text("SAVE");
}
});
grid: [grid_size + (grid_margin * 2), grid_size + (grid_marg
in * 2)],
animate: false,
autoHide: true,
$('note_' + divID).css({"resize": ""});
$('#noteDiv_' + divID).css({"visibility": "hidden"});
$('#save_text_' + divID).css({"visibility": "hidden"});
},

$('#noteDiv_' + divID).css({"visibility": ""});
$('#save_text_' + divID).css({"visibility": ""});
$('note_' + divID).css({"resize": "none"});
}, 0);
}
});
$(elementId + " > .ui-resizable-handle").live('hover', function(
event) {
layout.disable();
} else {
layout.enable();
}
});
}
//
//
//
//
//
);
//
//
//
//
//
n(event) {
//
//
//
//
//
//
//
//
//
//
//
//
e"});
//
//
//
//
//
//
//
//
lio");
//
//
//
function createClock(size_x, size_y, col, row)

{
var idName;
idName = createWidget(size_x, size_y, col, row, divID, "clock"
$('#handle_' + divID).css({"z-index": "1"});
$('#clock_' + divID).css({"height": "calc(100% - ( 60px))"});
var clockId = '#clock_' + divID;
layout.disable();
} else {
layout.enable();
}
});
$('#clock_' + divID).Clock({
timeZone: "rssValue",
title: "test Clock"
});
$(clockId + " > .highcharts-container").css({"top": "-19px"});
$(clockId + " > .highcharts-container rect").css({"fill": "non
}
function createPortfolio(size_x, size_y, col, row)
{
var idName;
idName = createWidget(size_x, size_y, col, row, divID, "portfo
var portfolioId = "#portfolio_" + divID;
var $port = $('#portfeuille').clone();
//
//
//
//
n(event) {
//
//
//
//
//
//
//
//
$('#' + idName).html($port);
var elementId = "#li_" + divID;
layout.disable();
} else {
layout.enable();
}
});
$(portfolioId + " > #portfeuille").css({"display": ""});
}
function createSelectOneMenu(idName, data, divID ) {
var divParent = document.createElement('div');
divParent.className = "data";
var dataType = data.split(":");
var valueList = dataType[1].split("|");
var firstValue;
dataType = dataType[0];
// DataName
var divName = document.createElement('div');
divName.className = "dataType";
$(divName).text(dataType);
$(divName).appendTo($(divParent));
//DataValue
var divSelect = document.createElement('div');
divSelect.className = "dataType";
var select = document.createElement('select');
select.setAttribute('id', "select_" + dataType + divID);
for (var op in valueList) {
var tab = valueList[op].split(";");
var option = document.createElement('option');
option.value = tab[1];
$(option).text(tab[0]);
if (op === "0")
{
option.selected = true;
firstValue = tab[1];
}
$(option).appendTo($(select));
}
$(select).appendTo($(divSelect));
$(divSelect).appendTo($(divParent));
// Data Input
var divInput = document.createElement('div');
divInput.className = "dataType";
var input = document.createElement('input');
input.className = "inputData";
input.setAttribute('id', "input_" + dataType + divID);
input.setAttribute('value', firstValue);
$(input).appendTo($(divInput));
$("#input_" + dataType + divID).val(firstValue);
$(divInput).appendTo($(divParent));
// add change event to the selectOne Menu
$("#select_" + dataType + divID).live('change', function(event)
{
$("#input_" + dataType + divID).val(($(this).val()));
});
$(divParent).appendTo($("#" + idName));
}
//
function writeEtfData(idName, dataTitle, divID)
//
{ // saveETFCODE
//
//
//
//
//
$(div).text(dataTitle);
//
// DIV LAST
//
//
div5.setAttribute('id', "last_" + divID);
//
div5.className = "lastdata";
//
$(div5).text(etfData[1]);
//
//Div Bid
//
//
div6.setAttribute('id', "bid_" + divID);
//
div6.className = "biddata";
//
//
// Div Ask
//
//
div7.setAttribute('id', "ask_" + divID);
//
div7.className = "askdata";
//
//
//
div8.setAttribute('id', "upComing_" + divID);
//
div8.className = "data";
//
//
$(div).appendTo($("#" + idName));
//
$(div5).appendTo($("#" + idName));
//
//
//
createSelectOneMenu(idName, etfData[5], divID);
//
//
//
}
//
function addEtfInformationWidget(size_x, size_y, col, row, code, n
ame)
//
{
//
var idName;
//
var data = code + ":" + name;
//
code = code.trim();
//
//
idName = createWidget(size_x, size_y, col, row, divID, "inform
ation", data);
//
//Add code of ETF
//
var divCode = document.createElement('div');
//
divCode.setAttribute('id', "codEtf_div" + divID);
//
divCode.className = "hiddenCodeEtf";
//
$(divCode).text(code);
//
$(divCode).appendTo($("#" + idName));
//
$.ajax({
//
type: "GET",
//
//
es/getData/" + code,
//
dataType: "json",
//
//
//
//
//
//
//
//
//
//
//
//
//
//
etfData = $.map(realArray[0], function(value, key) {
var text = key + ": " + value;
return [text];
});
writeEtfData(idName, name, divID);
},
// alert('data error ' + e);
}
});
}
function updateLastAskBid(divID, result)
{
divID = divID.split(":");
divID = divID[1];
divID = divID.trim();
document.getElementById("last_" + divID).innerHTML = result[0];
document.getElementById("ask_" + divID).innerHTML = result[1];
document.getElementById("bid_" + divID).innerHTML = result [2];
}
//
function sendToUpdate()
//
{
//
i++;
//
$.ajax({
//
type: "GET",
//
//
es/updateSpot/" + user,
//
dataType: "json",
//
//
// alert("done");
//
},
//
//
sendToUpdate();
//
findAllEtfWidgetToUpdate();
//
}
//
});
//
}
//
function updateEtfWidget(listOfWidget)
//
{
//
var result;
//
var index;
//
var code;
//
for (var i = listOfWidget.length - 1; i >= 0; i--) {
//
code = document.getElementById("codEtf_div" + listOfWidget
[i]).innerHTML;
//
index = listOfWidget[i];
//
$.ajax({
//
type: "GET",
//
//
url: "http://" + adressIp + "/LyxorETF/webresources/se
rvices/updateEtfWidget/" + code + "/" + index,
//
dataType: "json",
//
//
//
//
{
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
tion() {
//
//
//
//
//
//
//
result = $.map(realArray[0], function(value, key)

return [text];
});
updateLastAskBid(result[3], result);
},
}
});
}
}
function findAllEtfWidgetToUpdate()
{
var allDataWidget = new Array();
var elems = document.getElementsByTagName("*");
for (var i = elems.length - 1; i >= 0; i--) {
if (elems[i].hasAttribute("id"))
{
if (elems[i].id.indexOf("dataDiv_") === 0)
{
var idOfElement = elems[i].id;
var divId = idOfElement.split("_");
divId = divId[1];
allDataWidget.push(divId);
}
}
}
updateEtfWidget(allDataWidget);
}
// to remove element
Element.prototype.remove = function() {
this.parentElement.removeChild(this);
};
NodeList.prototype.remove = HTMLCollection.prototype.remove = func
for (var i = this.length - 1; i >= 0; i--) {
if (this[i]) {
if (this[i].parentElement)
this[i].parentElement.removeChild(this[i]);
}
}
};
function removeDash()
{
var indexOfDash;
var inexistnatDash = true;
var idOfButton;
for (var i = dashMap.length - 1; i >= 0; i--)
{
if (dashMap[i].label === currentDashTitle)
{
inexistnatDash = false;
indexOfDash = i;
break;
}
}
if (!inexistnatDash)
{
dashMap.splice(indexOfDash, 1);
for (var i = dashButtonList.length - 1; i >= 0; i--)
{
if (dashButtonList[i].title === currentDashTitle)
{
indexOfDash = i;
idOfButton = dashButtonList[i].id;
break;
}
}
;
dashButtonList.splice(indexOfDash, 1);
document.getElementById(idOfButton).remove();
$.ajax({
type: "POST",
url: "http://" + adressIp + "/LyxorETF/webresources/serv
ices/removeDashboard/" + user + "/" + currentDashTitle,
}
});
}
}
function savePositions(dataBaseCookie)
{
widgetList = [];
eraseCookie('widgetList');
$('.layouts_grid > ul > li.gs_w').each(function() {
if (!$(this).hasClass("deleted")) {
var $item = $(this);
var wid = {
col: $item.data('col'),
row: $item.data('row'),
size_x: $item.data('sizex'),
size_y: $item.data('sizey'),
name: $item.data('name')
};
widgetList.push(wid);
}
});
createCookie('widgetList', JSON.stringify(widgetList), 1);
if (dataBaseCookie) {
{
{
dashMap[i].content = JSON.stringify(widgetList);
break;
}
}
;
if (inexistnatDash)
{
var newDash = {
label: currentDashTitle,
content: JSON.stringify(widgetList)
};
dashMap.push(newDash);
#{dashboardBean.dashMap} = dashMap;
createDashButton("newDash", numberOfdash, newDash);
}
}
}
function buildDash(dashContents)
{
layout.remove_all_widgets();
if (dashContents.indexOf("{") > -1)
{
dashContents = JSON.parse(dashContents);
if (dashContents.length > 0)
{
$('#DashElement').css({"display": "block"});
$.each(dashContents, function() {
var widgetRef = this.name.split(":");
var type = widgetRef[0];
if (type === "rss") {
var href = rssListWidget[parseInt(widgetRef[1])]
+ ":" + widgetRef[2];
addFeedReader(this.size_x, this.size_y, this.col
, this.row, href, widgetRef[3]);
}
if (type === "chart") {
addChart(this.size_x, this.size_y, this.col, thi
s.row, widgetRef[1], widgetRef[2]);
}
{
createClock(this.size_x, this.size_y, this.col,
this.row);
}
if (type === "note") {
if (widgetRef[1] !== null)
{
addNotePad(this.size_x, this.size_y, this.co
l, this.row, widgetRef[1]);
}
else
{
l, this.row);
}
}
{
addEtfInformationWidget(this.size_x, this.size_y
, this.col, this.row, widgetRef[1], widgetRef[2]);
}
{
createPortfolio(this.size_x, this.size_y, this.c
ol, this.row);
}
});
}
}
}
function createDashButton(ConrainerId, dashID, dash)
{
editButton.setAttribute('id', "dash_" + dashID);
var buttonDash = {title: dash.label,
id: "dash_" + dashID
};
dashButtonList.push(buttonDash);
span1.innerHTML = dash.label;
nt";
$(editButton).appendTo($("#" + ConrainerId));
$('#dash_' + dashID).live('click', function() {
currentDashTitle = dash.label;
buildDash(dash.content);
});
}
//
//
//
function createNewDash(title)
{
currentDashTitle = title;
createClock(3, 3, 1, 1);
createPortfolio(3, 3, 4, 1);
addNotePad(3, 3, 1, 1);
}
function loadPage() {
//
rssListWidget = ["http://www.aweber.com/blog/feed/", "http://w
ww.economist.com/feeds/print-sections/84/indicators.xml", "http://www.economist.
com/feeds/print-sections/77/business.xml",
//
"http://www.economist.com/feeds/print-sections/80/scienceand-technology.xml", "http://www.economist.com/feeds/print-sections/74/internati
onal.xml",
//
"http://www.economist.com/topics/banking/index.xml", "http
://www.economist.com/topics/economics/index.xml"];
layout = $('.layouts_grid > .dashbordWidget').gridster({

widget_margins: [grid_margin, grid_margin],
widget_base_dimensions: [grid_size, grid_size],
avoid_overlapped_widgets: true,
extra_cols: 0,
min_rows: block_params.max_height,
draggable: {
handle: '.handle_div'
},
serialize_params: function($w, wgd) {
return {
x: wgd.col,
y: wgd.row,
width: wgd.size_x,
height: wgd.size_y,
id: $($w).attr('data-id'),
name: $($w).find('.block_name').html()
};
}
}).data('gridster');
//EtfList
//
$.ajax({
//
type: "GET",
//
//
es/EtfList/" + lan,
//
dataType: "json",
//
//
etfMap = $.map(resp, function(key, value) {
//
var res = key.split(";");
//
var etf = {
//
label: res[0],
//
possibleValues: value,
//
etfCode: res[1]
//
};
//
return [etf];
//
});
//
$(".tags").autocomplete({
//
source: function(req, responseFn) {
//
var re = $.ui.autocomplete.escapeRegex(req.ter
m);
//
var a = $.grep(etfMap, function(item, index) {
//
if (item.possibleValues.toUpperCase().sear
ch(re.toUpperCase()) > -1)
//
{
//
return item.possibleValues;
//
}
//
});
//
responseFn(a);
//
},
//
select: function(event, ui) {
//
selectedEtf = ui.item.etfCode;
//
etfName = ui.item.label;
//
}
//
});
//
},
//
//
//
alert('List etf ' + e);
//
}
//
});
//
//DashList
//
$.ajax({
//
type: "GET",
//
//
es/DashList/" + user,
//
dataType: "json",
//
//
dashMap = $.map(resp, function(key, value) {
//
var dash = {
//
label: value,
//
content: key
//
};
//
return [dash];
//
});
//
numberOfdash = dashMap.length;
//
var counter = 0;
//
$.each(dashMap, function() {
//
createDashButton("newDash", counter, this);
//
//
counter++;
//
});
//
$(".dashList").autocomplete({
//
source: dashMap,
//
//
currentDash = ui.item.content;
//
}
//
});
//
},
//
//
//
//
}
//
});
//
// updateWidget
//
// sendToUpdate();
//
//currentDash
//
$('#DashElement').css({"display": "none"});
//
currentDashTitle = getCookie('currentDashTitle');
//
eraseCookie('currentDashTitle');
//
buildDash(getCookie('widgetList'));
};
$('.newDash')
.click(function() {
$("#newDashDialog").dialog("open");
});
$('.savePositions')
.click(function() {
savedDash = "true";
savePositions(true);
});
$('.removeDash')
.click(function() {
removeDash();
});
//
//
//
//
//
//
//
//
//
//
$('.addFeedReader')
.click(function() {
$("#rssLisdialog").dialog("open");
});
$('.addWidgetButton')
.click(function() {
$("#etfLisdialog").dialog("open");
});
$('.addEtfDataButton')
.click(function() {
$("#etfLisdialogData").dialog("open");
});
$('.addNotePad')
.click(function() {
});
$("#newDashDialog").dialog({
autoOpen: false,
resizable: false,
draggable: false,
modal: true,
buttons: {
Confirm: function() {
var title = $('#newDashInput').val();
if (title.length === 0)
{
$('#newDashInput').css({"background": "#FFEEEE"});
$('#newDashInput').css({"border-color": "#A70000"});
}
else
{
createNewDash(title);
$('#newDashInput').val('');
$(this).dialog("close");
}
},
Cancel: function() {
}
}
});
$("#savedDashList").dialog({
autoOpen: false,
resizable: false,
draggable: false,
modal: true,
buttons: {
var title = $('#savedDashInput').val();
{
$('#savedDashInput').css({"background": "#FFEEEE"});
$('#savedDashInput').css({"border-color": "#A70000"}
);
}
else
{
buildDash(currentDash);
$('#savedDashInput').val('');
}
},
}
}
});
$("#rssLisdialog").dialog({
autoOpen: false,
resizable: false,
draggable: false,
modal: true,
buttons: {
OK: function() {
addFeedReader(6, 6, 0, 0, selectedRSS, $("#rssSelectOneM
enu option:selected").text());
},
}
}
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
});
$("#etfLisdialogData").dialog({
autoOpen: false,
resizable: false,
draggable: false,
modal: true,
close: function() {
selectedEtf = "";
$('#etfTags').css({"background": ""});
$('#etfTags').css({"border-color": ""});
$('#etfTags').val('');
},
buttons: {
if (selectedEtf.length === 0)
{
$('#etfTags').css({"background": "#FFEEEE"});
$('#etfTags').css({"border-color": "#A70000"});
}
else
{
var title;
title = $('#titleData').val();
{
//
//
//
//
itle);
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
title = etfName;
}
$('#titleData').val('');
addEtfInformationWidget(4, 3, 0, 0, selectedEtf, t
}
},
}
}
});
$("#etfLisdialog").dialog({
autoOpen: false,
resizable: false,
draggable: false,
modal: true,
close: function() {
selectedEtf = "";
$('#tags').css({"background": ""});
$('#tags').css({"border-color": ""});
},
buttons: {
{
$('#tags').css({"background": "#FFEEEE"});
$('#tags').css({"border-color": "#A70000"});
}
else
{
var title;
title = $('#title').val();
{
title = etfName;
}
addChart(7, 6, 0, 0, selectedEtf, title);
$('#title').val('');
$('#tags').val('');
}
},
$('#tags').val('');
}
}
});
$("#attributeValue").change(function() {
attribute = ($(this).val());
});
$("#rssSelectOneMenu").change(function() {
selectedRSSTitle = $("#rssSelectOneMenu option:selected").text()
selectedRSS = ($(this).val());
});
//empty etf
$('#tags').keyup(function() {
if ($('#tags').val().length === 0)
{
selectedEtf = "";
}
});
$('#etfTags').keyup(function() {
if ($('#etfTags').val().length === 0)
{
selectedEtf = "";
}
});
</script>
</h:body>
</html>
welcom.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!-To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF8"> </meta
>
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0"
/>
<title>Welcome</title>

<link rel="stylesheet" media="all" href="../css/font.css"/>
<link rel="stylesheet" media="all" href="../css/style.css"/>
<link rel="stylesheet" media="all" href="../css/lessframework.css"/>
<link rel="stylesheet" media="all" href="../css/skin.css"/>
<link rel="stylesheet" media="all" href="../css/customstyle.css"/>
<link rel="stylesheet" href="../css/responsive.css" />
<link rel="stylesheet" href="../css/nav.css" />



<script src="../js/css3-mediaqueries.js"></script>
<script src="../js/custom.js"></script>
<script src="../js/respond.min.js"></script>
<script src="../js/modernizr.js"></script>


<!-jquery chema-->
<script type="text/javascript" src="../dashboard/js/jquery-1.8.3.js"></s
cript>
<script type="text/javascript" src="../dashboard/js/jquery-ui-1.9.2.cust
om.min.js"></script>
<link rel="stylesheet" type="text/css" href="../dashboard/css/jquery-ui.
css" />
<!-grid-->
<link rel="stylesheet" type="text/css" href="../dashboard/css/jquery.gri
dster.min.css" />
<script type="text/javascript" src="../dashboard/js/jquery.gridster.js">
</script>
<!-FeedReader-->
<link rel="stylesheet" type="text/css" href="../dashboard/css/FeedEk.css
" />
<script src="../dashboard/js/feedReader/FeedEk.js"></script>
<script src="../dashboard/js/feedReader/moment.min.js"></script>
<!-clock che-->
<script src="../dashboard/js/plugins/Clock.js"></script>
<script src="../dashboard/js/plugins/highstock.js"></script>
<script src="../dashboard/js/plugins/exporting.js"></script>

<script src="../dashboard/js/plugins/highcharts-more.js"></script>
<link rel="stylesheet" type="text/css" href="../dashboard/css/dashboard.
css" />
<style>
/* Using box shadows to create 3D effects */
#calculator {
width:286px;
height: auto;
padding: 20px 20px 9px;
background: #9dd2ea;
background: linear-gradient(#9dd2ea, #8bceec);
border-radius: 3px;
box-shadow: 0px 4px #009de4, 0px 10px 15px rgba(0, 0, 0, 0.2);
}
/* Top portion */
.top span.clear {
float: left;
}
/* Inset shadow on the screen to create indent */
.top .screen {
height: 40px;
width: 192px;
float: right;
padding: 0 10px;
background: rgba(0, 0, 0, 0.2);
border-radius: 3px;
box-shadow: inset 0px 4px rgba(0, 0, 0, 0.2);
/* Typography */
font-size: 17px;
line-height: 40px;
color: white;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
text-align: right;
letter-spacing: 1px;
}
/* Clear floats */
.keys, .top {overflow: hidden;}
/* Applying same to the keys */
.keys span, .top span.clear {
float: left;
position: relative;
top: 0;
cursor: pointer;
width: 66px;
height: 36px;
background: white;
border-radius: 3px;
box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
margin: 0 7px 11px 0;
color: #888;
line-height: 36px;
text-align: center;
/* prevent selection of text inside keys */
user-select: none;
/* Smoothing out hover and active states using css3 transitions
*/
transition: all 0.2s ease;
}
/* Remove right margins from operator keys */
/* style different type of keys (operators/evaluate/clear) different
ly */
.keys span.operator {
background: #FFF0F5;
margin-right: 0;
}
.keys span.eval {
background: #f1ff92;
box-shadow: 0px 4px #9da853;
color: #888e5f;
}
.top span.clear {
background: #ff9fa8;
box-shadow: 0px 4px #ff7c87;
color: white;
}
/* Some hover effects */
.keys span:hover {
background: #9c89f6;
color: white;
}
.keys span.eval:hover {
background: #abb850;
color: #ffffff;
}
.top span.clear:hover {
background: #f68991;
color: white;
}
/* Simulating "pressed" effect on active state of the keys by removi
ng the box-shadow and moving the keys down a bit */
.keys span:active {
top: 4px;
}
.keys span.eval:active {
top: 4px;
}
.top span.clear:active {
top: 4px;
}
</style>
</h:head>
<h:body id="body" style="margin: 0px;" >
<div id="primaryContainer" class="primaryContainer clearfix">
<div class="container row" style="margin-bottom: 48px !important;bac
kground: #F1F1F1;">
<div class="row" >
<ui:include src="../WEB-INF/include/header.xhtml"/>
</div>
<div id = "newDash" class="record">
<button class="newDash"> New Dashboard</button>
</div>
<div id="DashElement" class="DashElement-container">
<div id = "savePositions" class="record">
<button class="savePositions ">Save Dashboard </button>
</div>
<div id = "removeDash" class="record">
<button class="removeDash">Remove Dashboard </button>
</div>
<div id = "addWidgetButton" class="record">
<button class="addWidgetButton">Add ETF Chart</button>
</div>
<div id = "addEtfDataButton" class="record">
<button class="addEtfDataButton">add Etf Data</button>
</div>
<div id = "addFeedReader" class="record">
<button class="addFeedReader">Add Feed Reader</button>
</div>
<div id = "addNotePad" class="record">
<button class="addNotePad">Add NotePad </button>
</div>
</div>
<div class="layouts_grid" id="layouts_grid" >
<ul class="dashbordWidget">
</ul>
</div>
<div id="etfLisdialog" title="ETF">
<div class="ui-widget">
<label for="tags">Etf: </label>
<input class="tags" id="tags"/>
</div>
<div id="dataList">
<label >Data: </label>
<select id="attributeValue">
<option value="HighestPrice" selected="selected">Hig
hest Price</option>
<option value="LowestPrice">Lowest Price</option>
<option value="NetAssetValue">Net Asset Value</optio
n>
<option value="ActifsValorisation">Actifs Valorisati
on</option>
<option value="GlobalValueFonds">Global Value Fonds<
/option>
<option value="GlobalValueVolume">Global Value Volum
e</option>
<option value="NumberOfPartsFonds">Number Of Parts F
onds</option>
<option value="NumberOfPartsVolume">Number Of Parts
Volume</option>
<option value="OpeningPrice">Opening Price</option>
</select>
</div>
<div id="input">
<label >Title: </label>
<input id="title"/>
</div>
</div>
<div id="etfLisdialogData" title="ETF DESCRIPTION">
<div class="ui-widget">
<label for="etfTags">Etf: </label>
<input class="tags" id="etfTags"/>
</div>
<div id="input" class="ui-widget">
<label for="titleData"> Title: </label>
<input id="titleData" />
</div>
</div>
<div id="newDashDialog" title="DASHBOARD DESCRIPTION">
<div id="newDashDiv" class="ui-widget">
<label for="newDashInput"> Title: </label>
<input id="newDashInput" />
</div>
</div>
<div id="savedDashList" title="DASHBOARD DESCRIPTION">
<div id="savedDashDiv" class="ui-widget">
<label for="savedDashInput"> Title: </label>
<input class="dashList" id="savedDashInput" />
</div>
</div>
<div id="rssLisdialog" title="This is a dialog box">

<div>
<select id="rssSelectOneMenu">
<option value="http://www.aweber.com/blog/feed/" sel
ected="selected">Indicators News</option>
<option value="http://www.economist.com/feeds/printsections/84/indicators.xml">Finance and Economics</option>
<option value="http://www.economist.com/feeds/printsections/77/business.xml">Business</option>
<option value="http://www.economist.com/feeds/printsections/80/science-and-technology.xml" >Science and Technology</option>
<option value="http://www.economist.com/feeds/printsections/74/international.xml">International</option>
<option value="http://www.economist.com/topics/banki
ng/index.xml">Banking</option>
<option value="http://www.economist.com/topics/econo
mics/index.xml" >Economics</option>
</select>
</div>
</div>
<div id ="portfeuille" style="display:none ">
<h:form>
<img src="../images/portfolio.png" style="display: block
;width: 31%;margin: auto; "/>
<h:commandLink style="display: block;text-align: center;
margin-top: 32px;color: #005EB0;" value="#{msg['portfolioMsg']}" action="/privat
e/portfolio?faces-redirect=true" >
</h:commandLink>
</h:form>
</div>
</div>
<div id="chartDialog" >
</div>
<div id="fade" >
</div>
<ui:include src="../WEB-INF/include/footer.xhtml"/>
<h:form id="infoBarAndFollowUsMsg">
<div>
<ui:include src="../WEB-INF/include/infoBar.xhtml"/>
</div>
</h:form>
</div>
<script>
//var $ = jQuery.noConflict(true);
var user = "#{userBean.userClient.username}";
var url = window.location.href;
var arr = url.split("/");
var adressIp = arr[arr.indexOf("LyxorETF")-1];
var highHisto, highData;

var savedDash = "false";
var numberOfdash = 0;
var i = 0;
var currentDashTitle;
$(window).on('beforeunload', function() {
savePositions(false);
createCookie('currentDashTitle', currentDashTitle, 1);
});
var chart_element = new Array();
var chart_data = new Array();
var chart_title = new Array();
var chart_container = new Array();
var dashButtonList = new Array();
var selectedRSSTitle = "Indicators News";
var widgetList = new Array();
var rssListWidget = new Array();
var
var
var
var
var
var
var
var
var
var
var
var
var
var
etfData;
etfMap;
selectedEtf = "";
etfName = "";
attribute;
dashMap;
selectedRSS = "http://www.aweber.com/blog/feed/";
numberOfDiv = 0;
jqPlotData;
layout;
grid_size = 50;
grid_margin = 15;
language;
block_params = {
max_width: 20,
max_height: 20
};
//
Grid
function createWidget(size_x, size_y, col, row, divID, type, data) {
var widgetName;
var idName;
var divC = document.createElement('div');
var li = document.createElement('li');
li.setAttribute('id', "li_" + divID);
li.className = "layout_block gs_w ui-resizable ui-resizable-auto
hide";
li.style.backgroundColor = "#64A7DB";
divC.appendChild(li);
div2.className = "remove_element";
div2.setAttribute('id', "title_" + divID);
// close span
var span = document.createElement('span');
span.setAttribute('id', "close_" + divID);
span.setAttribute('style',"width: 20px;height: 20px; display: bl
ock;");
span.innerHTML = "";
div2.appendChild(span);
$('#close_' + divID).live('click', function() {
layout.remove_widget('#li_' + divID, false);
});
div2.style.backgroundColor = "blue";
// handle
var handlediv = document.createElement('div');
handlediv.className = "handle_div";
handlediv.setAttribute('id', "handle_" + divID);
li.appendChild(handlediv);
{
div3.setAttribute('id', "clock_" + divID);
idName = "clock_" + divID;
widgetName = "clock";
}
{
div3.setAttribute('id', "portfolio_" + divID);
idName = "portfolio_" + divID;
widgetName = "portfolio";
}
{
div3.setAttribute('id', "dataDiv_" + divID);
idName = "dataDiv_" + divID;
widgetName = "information:" + data;
}
if (type === "rss")
{
// Rss Title
$(div).text(data.split(":")[2]);
li.appendChild(div);
div3.setAttribute('id', "rssDiv_" + divID);
idName = "rssDiv_" + divID;
widgetName = "rss:" + data;
}
if (type === "note")
{
div3.setAttribute('id', "noteDiv_" + divID);
div3.className = "textArea_container";
var tex = document.createElement('textarea');
tex.setAttribute('id', "note_" + divID);
tex.style.resize = "none";
//save button
div4.setAttribute('id', "save_text_" + divID);
var saveButton = document.createElement('button');
saveButton.setAttribute('id', "#save_text_" + divID);
saveButton.setAttribute('role', "button");
saveButton.setAttribute('aria-disabled', "false");
saveButton.className = "save_text ui-button ui-widget ui-sta
te-default ui-corner-all ui-button-text-icon-primary";
span1.setAttribute('id', "span_" + divID);
span1.innerHTML = "SAVE";
span2.className = "ui-button-icon-primary ui-icon ui-icon-do
cument";
div4.appendChild(saveButton);
div3.appendChild(tex);
idName = "note_" + divID;

widgetName = "note";
}
{
div3.setAttribute('id', "chart_" + divID);
idName = "chart_" + divID;
widgetName = "chart:" + data;
}
s = divC.innerHTML;
layout.add_widget(s, size_x, size_y, col, row, widgetName, 0);
return idName;
}
//
//
//
//
//
//
//
//
//
function numberOfDynmicDiv()
{
numberOfDiv++;
var divID = 0;
if (elems[i].id.indexOf("title_") === 0)
divID++;
}
divID++;
return numberOfDiv;
}
function resizeBlock(elmObj, id, type) {
var elmObj = $(elmObj);
var w = elmObj.width() - grid_size;
var h = elmObj.height() - grid_size;
for (var grid_w = 1; w > 0; w -= (grid_size + (grid_margin * 2))
) {
grid_w++;
}
for (var grid_h = 1; h > 0; h -= (grid_size + (grid_margin * 2))
) {
grid_h++;
}
layout.resize_widget(elmObj, grid_w, grid_h);
{
//
chart_element[id].setSize(((elmObj.width() * 95) / 100), (
elmObj.height() * 85) / 100);
//
chart_element[id].redraw();
replotetheChart(id);
}
}
function replotetheChart(divID)
{

chart_data[divID].sort(function(a, b) {
return a[0] - b[0];
});
if (($('#' + chart_container[divID]).width() > 500))
{
if ($('#' + chart_container[divID]).height() > 300)
enabled = true;
}
var op = {
chart: {renderTo: chart_container[divID], zoomType: 'x'},
rangeSelector: {
selected: 1,
inputEnabled: enabled,
enabled: enabled
},
title: {
text: chart_title[divID]
},
navigator: {
enabled: enabled
},
scrollbar: {
enabled: enabled
},
credits: {
enabled: false
},
series: [{
name: 'AAPL',
data: chart_data[divID],
tooltip: {
valueDecimals: 2
}
}]
};
}
function plotTheChart(seri, divID, idName, title)

{
seri.sort(function(a, b) {
return a[0] - b[0];
});
if (($('#' + idName).width() > 500))
{
if ($('#' + idName).height() > 300)
enabled = true;
}
//
chart_element[divID] = new Highcharts.Chart(options);
var op = {
chart: {renderTo: idName, zoomType: 'x'},

rangeSelector: {
selected: 1,
inputEnabled: $('#' + idName).width() > 500,
enabled: enabled
},
title: {
text: title
},
navigator: {
enabled: enabled
},
scrollbar: {
enabled: enabled
},
credits: {
enabled: false
},
series: [{
name: 'AAPL',
data: seri,
tooltip: {
valueDecimals: 2
}
}]
};
chart_container[divID] = idName;
chart_data[divID] = seri;
chart_title[divID] = title;
$('#' + idName).live('dblclick', function(event) {
var op = {
chart: {renderTo: "chartDialog", zoomType: 'x'},
rangeSelector: {
selected: 1
},
title: {
text: title
},
credits: {
enabled: false
},
exporting: {
enabled: true,
exportButton: {
x: 50,
enabled: true
},
buttons:
{
customButton:
{
x: 0,
symbol: 'url(../images/close
chart.png)',
onclick: function() {
document.getElementById(
'fade').style.display = 'none';
document.getElementById(
'chartDialog').style.display = 'none';
}
}
}
},
series: [{
name: 'AAPL',
data: seri,
tooltip: {
valueDecimals: 2
}
}]
};
var chart = new Highcharts.StockChart(op);
// $("#chartDialog").dialog( "option", "width", 900 );
//
// $("#chartDialog").dialog("open");
document.getElementById('fade').style.display = 'block';
document.getElementById('chartDialog').style.display = 'bloc
k';
});
}
// ui
function createUiButton(divID, name, text)
{
div5.setAttribute('id', name + divID);
editButton.setAttribute('id', name + divID);
span1.innerHTML = text;
nt";
div5.appendChild(editButton);
}
function addFeedReader(size_x, size_y, col, row, rssValue, title)
{
var data = rssListWidget.indexOf(rssValue) + ":" + title;
var idName = createWidget(size_x, size_y, col, row, divID, "rss"
, data);
in * 2)],
animate: false,
autoHide: true,
$('#rssDiv_' + divID).css({"visibility": "hidden"});
},
$('#rssDiv_' + divID).css({"visibility": ""});
}, 0);
}
});
event) {
layout.disable();
} else {
layout.enable();
}
});
$('#' + idName).addClass("rssDiv", true);
$('#' + idName).FeedEk({
FeedUrl: rssListWidget[parseInt(rssValue)],
MaxCount: 5
});
}
function addChart(size_x, size_y, col, row, code, title) {
var idName;
var data = code + ":" + title;
idName = createWidget(size_x, size_y, col, row, divID, "chart",
data);
code = code.trim();
$.ajax({
type: "GET",
url: "http://" + adressIp + "/LyxorETF/webresources/services
/getHistory/" + code + "/" + attribute,
dataType: "json",
jqPlotData = $.map(realArray[0], function(value, key) {
return [arrayname];
});
highHisto = $.map(realArray[0], function(value, key) {
return [parseInt(key)];
});
highData = $.map(realArray[0], function(value, key) {

return [value];
});
// renderMasterDetailChart(highHisto,idName ) ;
plotTheChart(jqPlotData, divID, idName, title);
},
// alert('chart error ' + e);
}
});
in * 2)],
animate: false,
minWidth: grid_size * 6,
minHeight: grid_size * 4,
autoHide: true,
$('#chart_' + divID).css({"height": $(this).height() * 7
0 / 100});
$('#chart_' + divID).css({"width": $(this).width() * 95
/ 100});
$('#chart_' + divID).css({"visibility": "hidden"});
},
resizeBlock(resized, divID, "chart");
$('#chart_' + divID).css({"visibility": ""});
}, 0);
$('#chart_' + divID).css({"height": ""});
$('#chart_' + divID).css({"width": ""});
}
});
event) {
layout.disable();
} else {
layout.enable();
}
});
}
function addNotePad(size_x, size_y, col, row, text)
{
var idName;
idName = createWidget(size_x, size_y, col, row, divID, "note");
buttonSaveId = "#save_text_" + divID;
var h = $('#save_text_' + divID).css("height");
$('#noteDiv_' + divID).css({"height": "calc(100% - ( 60px))"});
if (text)
{
document.getElementById('note_' + divID).value = text;
}
var te = document.getElementById('note_' + divID).value;
if (te)
{
$("#li_" + divID).attr("data-name", "note:" + te);
}
$(buttonSaveId)
.click(function() {
if ($('#span_' + divID).text() === "SAVE")
{
var te = document.getElementById('note_' + divID
).value;
if (te)
{
$("#li_" + divID).attr("data-name", "note:"
+ te);
}
$('#note_' + divID).attr("disabled", "disabled")
;
$('#span_' + divID).text("EDIT");
}
else {
$('#note_' + divID).removeAttr("disabled");
$('#span_' + divID).text("SAVE");
}
});
in * 2)],
animate: false,
autoHide: true,
$('note_' + divID).css({"resize": ""});
$('#noteDiv_' + divID).css({"visibility": "hidden"});
$('#save_text_' + divID).css({"visibility": "hidden"});
},
$('#noteDiv_' + divID).css({"visibility": ""});
$('#save_text_' + divID).css({"visibility": ""});
$('note_' + divID).css({"resize": "none"});
}, 0);
}
});
event) {

layout.disable();
} else {
layout.enable();
}
});
}
function createClock(size_x, size_y, col, row)
{
var idName;
idName = createWidget(size_x, size_y, col, row, divID, "clock");
$('#clock_' + divID).css({"height": "calc(100% - ( 60px))"});
var clockId = '#clock_' + divID;
event) {
layout.disable();
} else {
layout.enable();
}
});
$('#clock_' + divID).Clock({
timeZone: "rssValue",
title: "test Clock"
});
$(clockId + " > .highcharts-container").css({"top": "-19px"});
$(clockId + " > .highcharts-container rect").css({"fill": "none"
});
}
function createPortfolio(size_x, size_y, col, row)
{
var idName;
idName = createWidget(size_x, size_y, col, row, divID, "portfoli
o");
var portfolioId = "#portfolio_" + divID;
var $port = $('#portfeuille').clone();
$('#' + idName).html($port);
var elementId = "#li_" + divID;
event) {
layout.disable();
} else {
layout.enable();
}
});
$(portfolioId + " > #portfeuille").css({"display": ""});
}
function createSelectOneMenu(idName, data, divID ) {
var divParent = document.createElement('div');
divParent.className = "data";
var dataType = data.split(":");
var valueList = dataType[1].split("|");
var firstValue;
dataType = dataType[0];
// DataName
var divName = document.createElement('div');
divName.className = "dataType";
$(divName).text(dataType);
$(divName).appendTo($(divParent));
//DataValue
var divSelect = document.createElement('div');
divSelect.className = "dataType";
var select = document.createElement('select');
select.setAttribute('id', "select_" + dataType + divID);
for (var op in valueList) {
var tab = valueList[op].split(";");
var option = document.createElement('option');
option.value = tab[1];
$(option).text(tab[0]);
if (op === "0")
{
option.selected = true;
firstValue = tab[1];
}
$(option).appendTo($(select));
}
$(select).appendTo($(divSelect));
$(divSelect).appendTo($(divParent));
// Data Input
var divInput = document.createElement('div');
divInput.className = "dataType";
var input = document.createElement('input');
input.className = "inputData";
input.setAttribute('id', "input_" + dataType + divID);
input.setAttribute('value', firstValue);
$(input).appendTo($(divInput));
$("#input_" + dataType + divID).val(firstValue);
$(divInput).appendTo($(divParent));
// add change event to the selectOne Menu
$("#select_" + dataType + divID).live('change', function(event)
{
$("#input_" + dataType + divID).val(($(this).val()));
});
$(divParent).appendTo($("#" + idName));
}
function writeEtfData(idName, dataTitle, divID)
{ // saveETFCODE
$(div).text(dataTitle);
// DIV LAST
div5.setAttribute('id', "last_" + divID);
div5.className = "lastdata";
//Div Bid
div6.setAttribute('id', "bid_" + divID);
div6.className = "biddata";
// Div Ask
div7.setAttribute('id', "ask_" + divID);
div7.className = "askdata";
div8.setAttribute('id', "upComing_" + divID);
div8.className = "data";
$(div).appendTo($("#" + idName));
}
function addEtfInformationWidget(size_x, size_y, col, row, code, nam
e)
{
var idName;
var data = code + ":" + name;
code = code.trim();
idName = createWidget(size_x, size_y, col, row, divID, "informat
ion", data);
//Add code of ETF
var divCode = document.createElement('div');
divCode.setAttribute('id', "codEtf_div" + divID);
divCode.className = "hiddenCodeEtf";
$(divCode).text(code);
$(divCode).appendTo($("#" + idName));
$.ajax({
type: "GET",
/getData/" + code,
dataType: "json",
etfData = $.map(realArray[0], function(value, key) {
return [text];
});
writeEtfData(idName, name, divID);
},
}
});
}
function updateLastAskBid(divID, result)
{
divID = divID.split(":");
divID = divID[1];
divID = divID.trim();
document.getElementById("last_" + divID).innerHTML = result[0];
document.getElementById("ask_" + divID).innerHTML = result[1];
document.getElementById("bid_" + divID).innerHTML = result [2];
}
function sendToUpdate()
{
i++;
$.ajax({
type: "GET",
/updateSpot/" + user,
dataType: "json",
// alert("done");
},
sendToUpdate();
findAllEtfWidgetToUpdate();
}
});
}
function updateEtfWidget(listOfWidget)
{
var result;
var index;
var code;
for (var i = listOfWidget.length - 1; i >= 0; i--) {
code = document.getElementById("codEtf_div" + listOfWidget[i
]).innerHTML;
index = listOfWidget[i];
$.ajax({
type: "GET",
ices/updateEtfWidget/" + code + "/" + index,
dataType: "json",
result = $.map(realArray[0], function(value, key) {
return [text];
});
updateLastAskBid(result[3], result);
},
}
});
}
}
function findAllEtfWidgetToUpdate()
{
var allDataWidget = new Array();

{
if (elems[i].id.indexOf("dataDiv_") === 0)
{
var idOfElement = elems[i].id;
var divId = idOfElement.split("_");
divId = divId[1];
allDataWidget.push(divId);
}
}
}
updateEtfWidget(allDataWidget);
}
// to remove element
Element.prototype.remove = function() {
this.parentElement.removeChild(this);
};
NodeList.prototype.remove = HTMLCollection.prototype.remove = functi
on() {
for (var i = this.length - 1; i >= 0; i--) {
if (this[i]) {
if (this[i].parentElement)
this[i].parentElement.removeChild(this[i]);
}
}
};
function removeDash()
{
var indexOfDash;
var idOfButton;
{
{
indexOfDash = i;
break;
}
}
if (!inexistnatDash)
{
dashMap.splice(indexOfDash, 1);
for (var i = dashButtonList.length - 1; i >= 0; i--)
{
if (dashButtonList[i].title === currentDashTitle)
{
indexOfDash = i;
idOfButton = dashButtonList[i].id;
break;
}
}
;
dashButtonList.splice(indexOfDash, 1);
document.getElementById(idOfButton).remove();
$.ajax({
type: "POST",
ices/removeDashboard/" + user + "/" + currentDashTitle,
}
});
}
}
function savePositions(dataBaseCookie)
{
widgetList = [];
eraseCookie('widgetList');
$('.layouts_grid > ul > li.gs_w').each(function() {
if (!$(this).hasClass("deleted")) {
var $item = $(this);
var wid = {
col: $item.data('col'),
row: $item.data('row'),
size_x: $item.data('sizex'),
size_y: $item.data('sizey'),
name: $item.data('name')
};
widgetList.push(wid);
}
});
createCookie('widgetList', JSON.stringify(widgetList), 1);
if (dataBaseCookie) {
{
{
dashMap[i].content = JSON.stringify(widgetList);
break;
}
}
;
if (inexistnatDash)
{
var newDash = {
label: currentDashTitle,
content: JSON.stringify(widgetList)
};
dashMap.push(newDash);
createDashButton("newDash", numberOfdash, newDash);
}
$.ajax({
type: "POST",
ices/saveDashboard/" + user + "/" + encodeURIComponent(JSON.stringify(widgetList
)) + "/" + currentDashTitle,
// alert('save error ');

}
});
}
}
function buildDash(dashContents)
{
if (dashContents.indexOf("{") > -1)
{
dashContents = JSON.parse(dashContents);
if (dashContents.length > 0)
{
$.each(dashContents, function() {
var widgetRef = this.name.split(":");
var type = widgetRef[0];
if (type === "rss") {
var href = rssListWidget[parseInt(widgetRef[1])]
+ ":" + widgetRef[2];
addFeedReader(this.size_x, this.size_y, this.col
, this.row, href, widgetRef[3]);
}
if (type === "chart") {
addChart(this.size_x, this.size_y, this.col, thi
s.row, widgetRef[1], widgetRef[2]);
}
{
createClock(this.size_x, this.size_y, this.col,
this.row);
}
if (type === "note") {
if (widgetRef[1] !== null)
{
l, this.row, widgetRef[1]);
}
else
{
l, this.row);
}
}
{
addEtfInformationWidget(this.size_x, this.size_y
, this.col, this.row, widgetRef[1], widgetRef[2]);
}
{
createPortfolio(this.size_x, this.size_y, this.c
ol, this.row);
}
});
}
}
}
function createDashButton(ConrainerId, dashID, dash)
{
editButton.setAttribute('id', "dash_" + dashID);
var buttonDash = {title: dash.label,
id: "dash_" + dashID
};
dashButtonList.push(buttonDash);
span1.innerHTML = dash.label;
nt";
$(editButton).appendTo($("#" + ConrainerId));
$('#dash_' + dashID).live('click', function() {
currentDashTitle = dash.label;
buildDash(dash.content);
});
}
function createNewDash(title)
{
currentDashTitle = title;
createClock(3, 3, 1, 1);
createPortfolio(3, 3, 4, 1);
}
window.onload = function(evt) {
rssListWidget = ["http://www.aweber.com/blog/feed/", "http://www
.economist.com/feeds/print-sections/84/indicators.xml", "http://www.economist.co
m/feeds/print-sections/77/business.xml",
"http://www.economist.com/feeds/print-sections/80/science-an
d-technology.xml", "http://www.economist.com/feeds/print-sections/74/internation
al.xml",
"http://www.economist.com/topics/banking/index.xml", "http:/
/www.economist.com/topics/economics/index.xml"];
language = document.getElementById('chooseLanguageForm:languageS
electMenu').innerText;
var lan = language.replace(" ", "%20");
lan = lan.trim();
layout = $('.layouts_grid > .dashbordWidget').gridster({
widget_margins: [grid_margin, grid_margin],
widget_base_dimensions: [grid_size, grid_size],
avoid_overlapped_widgets: true,
extra_cols: 0,
min_rows: block_params.max_height,
draggable: {
handle: '.handle_div'
},
serialize_params: function($w, wgd) {
return {
x: wgd.col,
y: wgd.row,
width: wgd.size_x,
height: wgd.size_y,
id: $($w).attr('data-id'),
name: $($w).find('.block_name').html()
};
}
}).data('gridster');
//EtfList
$.ajax({
type: "GET",
/EtfList/" + lan,
dataType: "json",
etfMap = $.map(resp, function(key, value) {
var res = key.split(";");
var etf = {
label: res[0],
possibleValues: value,
etfCode: res[1]
};
return [etf];
});
$(".tags").autocomplete({
source: function(req, responseFn) {
var re = $.ui.autocomplete.escapeRegex(req.term)
;
var a = $.grep(etfMap, function(item, index) {
if (item.possibleValues.toUpperCase().search
(re.toUpperCase()) > -1)
{
return item.possibleValues;
}
});
responseFn(a);
},
selectedEtf = ui.item.etfCode;
etfName = ui.item.label;
}
});
},
//
}
});
//DashList
$.ajax({
type: "GET",

/DashList/" + user,
dataType: "json",
dashMap = $.map(resp, function(key, value) {
var dash = {
label: value,
content: key
};
return [dash];
});
numberOfdash = dashMap.length;
var counter = 0;
$.each(dashMap, function() {
createDashButton("newDash", counter, this);
counter++;
});
$(".dashList").autocomplete({
source: dashMap,
currentDash = ui.item.content;
}
});
},
//
}
});
// updateWidget
// sendToUpdate();
//currentDash
$('#DashElement').css({"display": "none"});
currentDashTitle = getCookie('currentDashTitle');
eraseCookie('currentDashTitle');
buildDash(getCookie('widgetList'));
};
</script>
<script>
$('.newDash')
.click(function() {
$("#newDashDialog").dialog("open");
});
$('.savePositions')
.click(function() {
savedDash = "true";
savePositions(true);
});
$('.removeDash')
.click(function() {
removeDash();
});
$('.addFeedReader')
.click(function() {
$("#rssLisdialog").dialog("open");
});
$('.addWidgetButton')
.click(function() {
$("#etfLisdialog").dialog("open");
});
$('.addEtfDataButton')
.click(function() {
$("#etfLisdialogData").dialog("open");
});
$('.addNotePad')
.click(function() {
});
$("#newDashDialog").dialog({
autoOpen: false,
resizable: false,
draggable: false,
modal: true,
buttons: {
var title = $('#newDashInput').val();
{
$('#newDashInput').css({"background": "#FFEEEE"});
$('#newDashInput').css({"border-color": "#A70000"});
}
else
{
createNewDash(title);
}
},
}
}
});
$("#savedDashList").dialog({
autoOpen: false,
resizable: false,
draggable: false,
modal: true,
buttons: {
var title = $('#savedDashInput').val();
{
$('#savedDashInput').css({"background": "#FFEEEE"});
$('#savedDashInput').css({"border-color": "#A70000"}
);
}
else
{
buildDash(currentDash);
}
},
}
}
});
$("#rssLisdialog").dialog({
autoOpen: false,
resizable: false,
draggable: false,
modal: true,
buttons: {
OK: function() {
addFeedReader(6, 6, 0, 0, selectedRSS, $("#rssSelectOneM
enu option:selected").text());
},
}
}
});
$("#etfLisdialogData").dialog({
autoOpen: false,
resizable: false,
draggable: false,
modal: true,
close: function() {
selectedEtf = "";
$('#etfTags').val('');
},
buttons: {
{
$('#etfTags').css({"background": "#FFEEEE"});
$('#etfTags').css({"border-color": "#A70000"});
}
else
{
var title;
title = $('#titleData').val();
{
title = etfName;
}
addEtfInformationWidget(4, 3, 0, 0, selectedEtf, tit
le);
}
},
}
}
});
$("#etfLisdialog").dialog({
autoOpen: false,
resizable: false,
draggable: false,
modal: true,
close: function() {
selectedEtf = "";
},
buttons: {
{
$('#tags').css({"background": "#FFEEEE"});
$('#tags').css({"border-color": "#A70000"});
}
else
{
var title;
title = $('#title').val();
{
title = etfName;
}
addChart(7, 6, 0, 0, selectedEtf, title);
$('#tags').val('');
}
},
$('#tags').val('');
}
}
});
$("#attributeValue").change(function() {
attribute = ($(this).val());
});
$("#rssSelectOneMenu").change(function() {
selectedRSSTitle = $("#rssSelectOneMenu option:selected").text()
;
selectedRSS = ($(this).val());
});
//empty etf
$('#tags').keyup(function() {
if ($('#tags').val().length === 0)
{
selectedEtf = "";
}
});
$('#etfTags').keyup(function() {
if ($('#etfTags').val().length === 0)
{
selectedEtf = "";
}
});</script>
</h:body>
</html>
dashboardBean
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
package com.ads.lyxoretf.beans;
import
import
import
import
import
import
import
import
import
import
import
import
import
import
com.ads.lyxoretf.entities.Dashboard;
com.ads.lyxoretf.entities.crm.Client;
com.ads.lyxoretf.metier.service.ClientService;
com.ads.lyxoretf.metier.service.DashboardService;
com.ads.lyxoretf.utils.ApplicationContextSingleton;
java.util.ArrayList;
java.util.HashMap;
java.util.List;
java.util.Map;
javax.annotation.PostConstruct;
javax.faces.bean.ManagedBean;
javax.faces.bean.ViewScoped;
org.springframework.security.core.context.SecurityContextHolder;
org.springframework.security.core.userdetails.User;
/**
*
* @author hamdi.masmoudi
*/
@ManagedBean
@ViewScoped
public class DashboardBean {
private
private
private
private
private
private
private
Long id;
String name;
String content;
Client client;
List<Dashboard> dashboards;
List<Dashboard> dashClient;
Dashboard currentDash;
private boolean dashboardElementShow;

private Map< String, String> dashMap = new HashMap<>();
public Map<String, String> getDashMap() {
return dashMap;
}
public void setDashMap(Map<String, String> dashMap) {
this.dashMap = dashMap;
}
public boolean isDashboardElementShow() {
return dashboardElementShow;
}
public void setDashboardElementShow(boolean dashboardElementShow) {
this.dashboardElementShow = dashboardElementShow;
}
public Dashboard getCurrentDash() {
return currentDash;
}
public void setCurrentDash(Dashboard currentDash) {
this.currentDash = currentDash;
}
public List<Dashboard> getDashClient() {
return dashClient;
}
public void setDashClient(List<Dashboard> dashClient) {
this.dashClient = dashClient;
}
public List<Dashboard> getDashboards() {
return dashboards;
}
public void setDashboards(List<Dashboard> dashboards) {
this.dashboards = dashboards;
}
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
public Client getClient() {
return client;
}
public void setClient(Client client) {
this.client = client;
}
public DashboardService getDashboardService() {
return (DashboardService) ApplicationContextSingleton.getApplicationCont
ext().getBean("dashboardService");
}
public ClientService getClientService() {
return (ClientService) ApplicationContextSingleton.getApplicationContext
().getBean("clientService");
}
public DashboardBean() {
}
@PostConstruct
public void init() {
dashboardElementShow = false;
dashboards = getDashboardService().getDashboardList();
User user = (User)SecurityContextHolder.getContext().getAuthentication()
.getPrincipal();
String username = user.getUsername();
client = getClientService().findClientByLogin(username);
dashClient = new ArrayList<>();
for (Dashboard dash : dashboards) {
if(dash.getClient().equals(client)) {
dashClient.add(dash);
}
}
for (Dashboard i : dashClient) {
dashMap.put(i.getName(), i.getContent());
}
}
public void saveDashboard() {
Dashboard dashboard = new Dashboard();
dashboard.setClient(client);
dashboard.setContent(content);
dashboard.setName(name);
boolean exist = false;
for(Dashboard dashboard1 : getDashboardService().getDashboardList()){
if(dashboard1.getName().equals(dashboard.getName())) {
exist = true;
}
if(exist){
getDashboardService().createDashboard(dashboard);
dashClient.add(dashboard);
dashboards.add(dashboard);
} else {
getDashboardService().editDashboard(dashboard);
}
}
}
}

Sdash

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Sdash

Enviado por

Direitos autorais:

Formatos disponíveis

dashboard.

<script type="text/javascript" src="#{request.contextPath}/dashboard/js/

var arrayname = [key, value];

<div id="DashElement" class="DashElement-container">

<div id="rssLisdialog" title="This is a dialog box">

var user = "#{userBean.userClient.login}";

var highHisto, highData;

span.setAttribute('style',"width: 20px;height: 20px; display: bl

tex.setAttribute('id', "note_" + divID);

function plotTheChart(seri, divID, idName, title)

chart_element[divID] = new Highcharts.Chart(options)

function addFeedReader(size_x, size_y, col, row, rssValue, title)

stop: function(event, ui) {

function createClock(size_x, size_y, col, row)

result = $.map(realArray[0], function(value, key)

layout = $('.layouts_grid > .dashbordWidget').gridster({

<div id="rssLisdialog" title="This is a dialog box">

var highHisto, highData;

idName = "note_" + divID;

var enabled = false;

function plotTheChart(seri, divID, idName, title)

chart: {renderTo: idName, zoomType: 'x'},

highData = $.map(realArray[0], function(value, key) {

if (event.type === 'mouseenter') {

var allDataWidget = new Array();

// alert('save error ');

url: "http://" + adressIp + "/LyxorETF/webresources/services

private boolean dashboardElementShow;

Você também pode gostar