/**
Dashboard view
@class DashboardView
@constructor
@return {Object} instantiated DashboardView
**/
define(['jquery', 'backbone', 'highcharts'], function ($, Backbone) {
BB.SERVICES['DASHBOARD_VIEW'] = 'DashboardView';
var DashboardView = BB.View.extend({
/**
Init the ChannelList component and enable sortable channels UI via drag and drop operations.
@method initialize
**/
initialize: function () {
var self = this;
BB.comBroker.setService(BB.SERVICES['DASHBOARD_VIEW'], self);
self.m_bgColor = '#F4F4F4';
self._listenResourcesChanged();
self._listenRefresh();
self._refreshData();
self._listenSave();
self._listenThemeChange();
},
/**
Listen theme changed
@method _listenThemeChange
@param {Number} i_playerData
**/
_listenThemeChange: function(){
var self = this;
BB.comBroker.listen(BB.EVENTS.THEME_CHANGED, function(){
self._refreshData();
});
},
/**
Listen to save
@method _listenSave
**/
_listenSave: function () {
var self = this;
pepper.listen(Pepper.SAVE_TO_SERVER, function () {
self.m_xdate = BB.comBroker.getService('XDATE');
$(Elements.LAST_SAVE).text('SAVED ON ' + self.m_xdate.setTime(new Date()).toString('HH:mm'));
});
},
/**
Listen to user refresh of dashboard
@method _listenRefresh
**/
_listenRefresh: function () {
var self = this;
$(Elements.DASHBOARD_REFRESH).on('click', function (e) {
self._refreshData();
});
},
/**
Refresh dashboard data
@method _refreshData
**/
_refreshData: function () {
var self = this;
if (BB.CONSTS['THEME'] != 'light')
self.m_bgColor = '#535353';
self._renderTotalCloudStorage();
self._getRemoteStations();
self._getServerResponseTime();
},
/**
Get server response time
@method _getServerResponseTime
**/
_getServerResponseTime: function () {
var self = this;
var url = window.g_protocol + pepper.getUserData().domain + '/WebService/sendCommand.ashx?i_user=' + pepper.getUserData().userName + '&i_password=' + pepper.getUserData().userPass + '&i_stationId=' + 0 + '&i_command=event&i_param1=' + 'gps' + '&i_param2=' + '0' + ',' + '0' + '&callback=?';
var sendDate = (new Date()).getTime();
try {
$.ajax({
url: url,
dataType: "jsonp",
type: "post",
complete: function (response) {
var receiveDate = (new Date()).getTime();
var responseTimeMs = receiveDate - sendDate;
var resColor = 'green';
var rest = 2000;
if (responseTimeMs > 2000)
responseTimeMs = rest;
if (responseTimeMs > 600)
resColor = 'yellow';
if (responseTimeMs > 1000)
resColor = 'orange';
if (responseTimeMs > 1600)
resColor = 'red';
rest = rest - responseTimeMs;
$(Elements.SERVER_RESPONSETIME).highcharts({
chart: {
type: 'bar',
plotBackgroundColor: self.m_bgColor,
renderTo: 'container',
margin: [0, 0, 0, 0],
spacingTop: 0,
spacingBottom: 0,
spacingLeft: 0,
spacingRight: 0
},
colors: ['#BABABA', resColor],
credits: {
enabled: false
},
tooltip: {
enabled: false
},
title: {
text: '',
style: {
display: 'none'
}
},
yAxis: {
min: 0,
title: {
text: ''
}
},
legend: {
enabled: false
},
plotOptions: {
column: {
colorByPoint: true
},
series: {
stacking: 'normal'
}
},
series: [
{
data: [rest],
pointWidth: 20
},
{
data: [responseTimeMs],
pointWidth: 20
}
]
});
},
error: function (jqXHR, exception) {
log(jqXHR, exception);
}
});
} catch (e) {
log('error on ajax' + e);
}
},
/**
Retrieve remote station list and status from remote mediaSERVER
@method _getRemoteStations
**/
_getRemoteStations: function () {
var self = this;
var userData = pepper.getUserData();
var url = window.g_protocol + userData.domain + '/WebService/getStatus.ashx?user=' + userData.userName + '&password=' + userData.userPass + '&callback=?';
$.getJSON(url,
function (data) {
var s64 = data['ret'];
var str = $.base64.decode(s64);
var xml = $.parseXML(str);
self._populateCollection(xml);
}
);
},
/**
Create the stations collection with data received from remote mediaSERVER, create corresponding Backbone.models
@method _populateCollection
@param {Object} i_xmlStations
**/
_populateCollection: function (i_xmlStations) {
var self = this;
// fresh account
if (_.isNull(i_xmlStations) || $(i_xmlStations).find('Station').length == 0) {
$(Elements.DASHBOARD_TOTAL_STATION, self.$el).text('00');
self._renderStationsDonut(0, 1);
return;
}
var totalStation = 0;
var totalStationOnline = 0;
var totalStationOffline = 0;
$(i_xmlStations).find('Station').each(function (key, value) {
totalStation++;
var stationID = $(value).attr('id');
var stationData = {
status: $(value).attr('status'),
socket: $(value).attr('socket'),
connection: $(value).attr('connection')
};
if (stationData.connection == '0') {
totalStationOffline++;
} else {
totalStationOnline++;
}
if (totalStation < 10)
totalStation = '0' + '' + totalStation;
$(Elements.DASHBOARD_TOTAL_STATION, self.$el).text(totalStation);
self._renderStationsDonut(totalStationOnline, totalStationOffline);
});
},
/**
Listen to resource removed or added
@method _listenResourcesChanged
**/
_listenResourcesChanged: function () {
var self = this;
BB.comBroker.listen(BB.EVENTS.REMOVED_RESOURCE, function (e) {
self._renderTotalCloudStorage();
});
BB.comBroker.listen(BB.EVENTS.ADDED_RESOURCE, function (e) {
self._renderTotalCloudStorage();
});
},
/**
Render the station donut chart
@method _renderStationsDonut
**/
_renderStationsDonut: function (i_totalStationOnline, i_totalStationOffline) {
var self = this;
$(Elements.DONUT_STATIONS).highcharts({
chart: {
plotBackgroundColor: self.m_bgColor,
renderTo: 'container',
type: 'pie',
margin: [0, 0, 0, 0],
spacingTop: 0,
spacingBottom: 0,
spacingLeft: 0,
spacingRight: 0
},
credits: {
enabled: false
},
title: {
text: '',
style: {
display: 'none'
}
},
subtitle: {
text: '',
style: {
display: 'none'
}
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
pie: {
shadow: false,
colors: ['green', 'red'],
size: '50%'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.point.name;
}
},
series: [
{
name: 'Browsers',
data: [
["ONLINE", i_totalStationOnline],
["OFFLINE", i_totalStationOffline]
],
size: '60%',
innerSize: '50%',
showInLegend: false,
dataLabels: {
enabled: false
}
}
]
});
},
/**
Render the total storage used in cloud
@method _renderTotalCloudStorage
**/
_renderTotalCloudStorage: function () {
var self = this;
var bytesTotal = 0;
var totalCapacity = pepper.getUserData().resellerID == 1 ? 1000 : 25000;
$(Elements.CLOUD_STORAGE_CAPACITY).text(totalCapacity / 1000 + 'GB');
var recResources = pepper.getResources();
$(recResources).each(function (i) {
if (recResources[i]['change_type'] != 3)
bytesTotal = bytesTotal + parseInt(recResources[i]['resource_bytes_total']);
});
// log(bytesTotal);
var mbTotalPercent = BB.lib.parseToFloatDouble((Math.ceil(bytesTotal / 1000000) / totalCapacity) * 100);
var mbTotalPercentRounded = Math.round(mbTotalPercent);
if (String(mbTotalPercentRounded).length == 1)
mbTotalPercentRounded = '0' + mbTotalPercentRounded;
$(Elements.CLOUD_STORAGE_PERC).text(mbTotalPercentRounded + '%');
$(Elements.CLOUD_STORAGE).highcharts({
chart: {
type: 'solidgauge',
backgroundColor: 'transparent',
margin: [0, 0, 0, 0],
spacingTop: 0,
spacingBottom: 0,
spacingLeft: 0,
spacingRight: 0
},
title: null,
pane: {
center: ['50%', '70%'],
size: '130%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: '#BBBBBB',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc',
borderColor: 'transparent'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
min: 0,
max: 100,
stops: [
[0.1, '#2ecc71'],
[0.5, '#f1c40f'],
[0.9, '#e74c3c']
],
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
gridLineWidth: 0,
gridLineColor: 'transparent',
labels: {
enabled: false,
y: 16
},
title: {
enabled: true,
y: 16
}
},
credits: {
enabled: false
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
},
series: [
{
data: [mbTotalPercent],
dataLabels: {
format: '<span style="text-align:center;">12%</span>'
}
}
]
});
}
});
return DashboardView;
});
/*
$('#subscribersPie').highcharts({
chart: {
plotBackgroundColor: '#F4F4F4',
renderTo: 'container',
type: 'pie',
margin: [0, 0, 0, 0],
spacingTop: 0,
spacingBottom: 0,
spacingLeft: 0,
spacingRight: 0
},
credits: {
enabled: false
},
title: {
text: '',
style: {
display: 'none'
}
},
subtitle: {
text: '',
style: {
display: 'none'
}
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
pie: {
shadow: false,
colors: ['green','red'],
size: '50%'
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
}
},
series: [{
name: 'Browsers',
data: [["RUNNING",2],["OFF",4]],
size: '60%',
innerSize: '50%',
showInLegend:false,
dataLabels: {
enabled: false
}
}]
});
*/
digitalsignage.com - open source docs