APIs

Show:
  1. /**
  2. Dashboard view
  3. @class DashboardView
  4. @constructor
  5. @return {Object} instantiated DashboardView
  6. **/
  7. define(['jquery', 'backbone', 'highcharts'], function ($, Backbone) {
  8.  
  9. BB.SERVICES['DASHBOARD_VIEW'] = 'DashboardView';
  10.  
  11. var DashboardView = BB.View.extend({
  12.  
  13. /**
  14. Init the ChannelList component and enable sortable channels UI via drag and drop operations.
  15. @method initialize
  16. **/
  17. initialize: function () {
  18. var self = this;
  19. BB.comBroker.setService(BB.SERVICES['DASHBOARD_VIEW'], self);
  20. self.m_bgColor = '#F4F4F4';
  21. self._listenResourcesChanged();
  22. self._listenRefresh();
  23. self._refreshData();
  24. self._listenSave();
  25. self._listenThemeChange();
  26. },
  27.  
  28. /**
  29. Listen theme changed
  30. @method _listenThemeChange
  31. @param {Number} i_playerData
  32. **/
  33. _listenThemeChange: function(){
  34. var self = this;
  35. BB.comBroker.listen(BB.EVENTS.THEME_CHANGED, function(){
  36. self._refreshData();
  37. });
  38. },
  39.  
  40. /**
  41. Listen to save
  42. @method _listenSave
  43. **/
  44. _listenSave: function () {
  45. var self = this;
  46. pepper.listen(Pepper.SAVE_TO_SERVER, function () {
  47. self.m_xdate = BB.comBroker.getService('XDATE');
  48. $(Elements.LAST_SAVE).text('SAVED ON ' + self.m_xdate.setTime(new Date()).toString('HH:mm'));
  49. });
  50. },
  51.  
  52. /**
  53. Listen to user refresh of dashboard
  54. @method _listenRefresh
  55. **/
  56. _listenRefresh: function () {
  57. var self = this;
  58. $(Elements.DASHBOARD_REFRESH).on('click', function (e) {
  59. self._refreshData();
  60. });
  61. },
  62.  
  63. /**
  64. Refresh dashboard data
  65. @method _refreshData
  66. **/
  67. _refreshData: function () {
  68. var self = this;
  69. if (BB.CONSTS['THEME'] != 'light')
  70. self.m_bgColor = '#535353';
  71. self._renderTotalCloudStorage();
  72. self._getRemoteStations();
  73. self._getServerResponseTime();
  74. },
  75.  
  76. /**
  77. Get server response time
  78. @method _getServerResponseTime
  79. **/
  80. _getServerResponseTime: function () {
  81. var self = this;
  82. 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=?';
  83. var sendDate = (new Date()).getTime();
  84. try {
  85. $.ajax({
  86. url: url,
  87. dataType: "jsonp",
  88. type: "post",
  89. complete: function (response) {
  90. var receiveDate = (new Date()).getTime();
  91. var responseTimeMs = receiveDate - sendDate;
  92. var resColor = 'green';
  93. var rest = 2000;
  94. if (responseTimeMs > 2000)
  95. responseTimeMs = rest;
  96. if (responseTimeMs > 600)
  97. resColor = 'yellow';
  98. if (responseTimeMs > 1000)
  99. resColor = 'orange';
  100. if (responseTimeMs > 1600)
  101. resColor = 'red';
  102. rest = rest - responseTimeMs;
  103.  
  104. $(Elements.SERVER_RESPONSETIME).highcharts({
  105. chart: {
  106. type: 'bar',
  107. plotBackgroundColor: self.m_bgColor,
  108. renderTo: 'container',
  109. margin: [0, 0, 0, 0],
  110. spacingTop: 0,
  111. spacingBottom: 0,
  112. spacingLeft: 0,
  113. spacingRight: 0
  114. },
  115. colors: ['#BABABA', resColor],
  116. credits: {
  117. enabled: false
  118. },
  119. tooltip: {
  120. enabled: false
  121. },
  122. title: {
  123. text: '',
  124. style: {
  125. display: 'none'
  126. }
  127. },
  128. yAxis: {
  129. min: 0,
  130. title: {
  131. text: ''
  132. }
  133. },
  134. legend: {
  135. enabled: false
  136. },
  137. plotOptions: {
  138. column: {
  139. colorByPoint: true
  140. },
  141. series: {
  142. stacking: 'normal'
  143. }
  144. },
  145. series: [
  146. {
  147. data: [rest],
  148. pointWidth: 20
  149. },
  150. {
  151. data: [responseTimeMs],
  152. pointWidth: 20
  153. }
  154. ]
  155. });
  156. },
  157. error: function (jqXHR, exception) {
  158. log(jqXHR, exception);
  159. }
  160. });
  161. } catch (e) {
  162. log('error on ajax' + e);
  163. }
  164.  
  165. },
  166.  
  167. /**
  168. Retrieve remote station list and status from remote mediaSERVER
  169. @method _getRemoteStations
  170. **/
  171. _getRemoteStations: function () {
  172. var self = this;
  173. var userData = pepper.getUserData();
  174. var url = window.g_protocol + userData.domain + '/WebService/getStatus.ashx?user=' + userData.userName + '&password=' + userData.userPass + '&callback=?';
  175. $.getJSON(url,
  176. function (data) {
  177. var s64 = data['ret'];
  178. var str = $.base64.decode(s64);
  179. var xml = $.parseXML(str);
  180. self._populateCollection(xml);
  181. }
  182. );
  183. },
  184.  
  185. /**
  186. Create the stations collection with data received from remote mediaSERVER, create corresponding Backbone.models
  187. @method _populateCollection
  188. @param {Object} i_xmlStations
  189. **/
  190. _populateCollection: function (i_xmlStations) {
  191. var self = this;
  192.  
  193. // fresh account
  194. if (_.isNull(i_xmlStations) || $(i_xmlStations).find('Station').length == 0) {
  195. $(Elements.DASHBOARD_TOTAL_STATION, self.$el).text('00');
  196. self._renderStationsDonut(0, 1);
  197. return;
  198. }
  199. var totalStation = 0;
  200. var totalStationOnline = 0;
  201. var totalStationOffline = 0;
  202. $(i_xmlStations).find('Station').each(function (key, value) {
  203. totalStation++;
  204. var stationID = $(value).attr('id');
  205. var stationData = {
  206. status: $(value).attr('status'),
  207. socket: $(value).attr('socket'),
  208. connection: $(value).attr('connection')
  209. };
  210. if (stationData.connection == '0') {
  211. totalStationOffline++;
  212. } else {
  213. totalStationOnline++;
  214. }
  215. if (totalStation < 10)
  216. totalStation = '0' + '' + totalStation;
  217. $(Elements.DASHBOARD_TOTAL_STATION, self.$el).text(totalStation);
  218. self._renderStationsDonut(totalStationOnline, totalStationOffline);
  219. });
  220. },
  221.  
  222. /**
  223. Listen to resource removed or added
  224. @method _listenResourcesChanged
  225. **/
  226. _listenResourcesChanged: function () {
  227. var self = this;
  228. BB.comBroker.listen(BB.EVENTS.REMOVED_RESOURCE, function (e) {
  229. self._renderTotalCloudStorage();
  230. });
  231.  
  232. BB.comBroker.listen(BB.EVENTS.ADDED_RESOURCE, function (e) {
  233. self._renderTotalCloudStorage();
  234. });
  235. },
  236.  
  237. /**
  238. Render the station donut chart
  239. @method _renderStationsDonut
  240. **/
  241. _renderStationsDonut: function (i_totalStationOnline, i_totalStationOffline) {
  242. var self = this;
  243.  
  244. $(Elements.DONUT_STATIONS).highcharts({
  245. chart: {
  246. plotBackgroundColor: self.m_bgColor,
  247. renderTo: 'container',
  248. type: 'pie',
  249. margin: [0, 0, 0, 0],
  250. spacingTop: 0,
  251. spacingBottom: 0,
  252. spacingLeft: 0,
  253. spacingRight: 0
  254. },
  255. credits: {
  256. enabled: false
  257. },
  258. title: {
  259. text: '',
  260. style: {
  261. display: 'none'
  262. }
  263. },
  264. subtitle: {
  265. text: '',
  266. style: {
  267. display: 'none'
  268. }
  269. },
  270. yAxis: {
  271. title: {
  272. text: 'Total percent market share'
  273. }
  274. },
  275. plotOptions: {
  276. pie: {
  277. shadow: false,
  278. colors: ['green', 'red'],
  279. size: '50%'
  280. }
  281. },
  282. tooltip: {
  283. formatter: function () {
  284. return '<b>' + this.point.name;
  285. }
  286. },
  287. series: [
  288. {
  289. name: 'Browsers',
  290. data: [
  291. ["ONLINE", i_totalStationOnline],
  292. ["OFFLINE", i_totalStationOffline]
  293. ],
  294. size: '60%',
  295. innerSize: '50%',
  296. showInLegend: false,
  297. dataLabels: {
  298. enabled: false
  299. }
  300. }
  301. ]
  302. });
  303.  
  304. },
  305.  
  306. /**
  307. Render the total storage used in cloud
  308. @method _renderTotalCloudStorage
  309. **/
  310. _renderTotalCloudStorage: function () {
  311. var self = this;
  312. var bytesTotal = 0;
  313. var totalCapacity = pepper.getUserData().resellerID == 1 ? 1000 : 25000;
  314. $(Elements.CLOUD_STORAGE_CAPACITY).text(totalCapacity / 1000 + 'GB');
  315. var recResources = pepper.getResources();
  316. $(recResources).each(function (i) {
  317. if (recResources[i]['change_type'] != 3)
  318. bytesTotal = bytesTotal + parseInt(recResources[i]['resource_bytes_total']);
  319. });
  320. // log(bytesTotal);
  321. var mbTotalPercent = BB.lib.parseToFloatDouble((Math.ceil(bytesTotal / 1000000) / totalCapacity) * 100);
  322. var mbTotalPercentRounded = Math.round(mbTotalPercent);
  323. if (String(mbTotalPercentRounded).length == 1)
  324. mbTotalPercentRounded = '0' + mbTotalPercentRounded;
  325. $(Elements.CLOUD_STORAGE_PERC).text(mbTotalPercentRounded + '%');
  326.  
  327. $(Elements.CLOUD_STORAGE).highcharts({
  328. chart: {
  329. type: 'solidgauge',
  330. backgroundColor: 'transparent',
  331. margin: [0, 0, 0, 0],
  332. spacingTop: 0,
  333. spacingBottom: 0,
  334. spacingLeft: 0,
  335. spacingRight: 0
  336. },
  337. title: null,
  338. pane: {
  339. center: ['50%', '70%'],
  340. size: '130%',
  341. startAngle: -90,
  342. endAngle: 90,
  343. background: {
  344. backgroundColor: '#BBBBBB',
  345. innerRadius: '60%',
  346. outerRadius: '100%',
  347. shape: 'arc',
  348. borderColor: 'transparent'
  349. }
  350. },
  351. tooltip: {
  352. enabled: false
  353. },
  354. // the value axis
  355. yAxis: {
  356. min: 0,
  357. max: 100,
  358. stops: [
  359. [0.1, '#2ecc71'],
  360. [0.5, '#f1c40f'],
  361. [0.9, '#e74c3c']
  362. ],
  363. minorTickInterval: null,
  364. tickPixelInterval: 400,
  365. tickWidth: 0,
  366. gridLineWidth: 0,
  367. gridLineColor: 'transparent',
  368. labels: {
  369. enabled: false,
  370. y: 16
  371. },
  372. title: {
  373. enabled: true,
  374. y: 16
  375. }
  376. },
  377. credits: {
  378. enabled: false
  379. },
  380. plotOptions: {
  381. solidgauge: {
  382. dataLabels: {
  383. y: 5,
  384. borderWidth: 0,
  385. useHTML: true
  386. }
  387. }
  388. },
  389. series: [
  390. {
  391. data: [mbTotalPercent],
  392. dataLabels: {
  393. format: '<span style="text-align:center;">12%</span>'
  394. }
  395. }
  396. ]
  397. });
  398. }
  399. });
  400.  
  401. return DashboardView;
  402.  
  403. });
  404.  
  405.  
  406. /*
  407.  
  408.  
  409.  
  410. $('#subscribersPie').highcharts({
  411. chart: {
  412. plotBackgroundColor: '#F4F4F4',
  413. renderTo: 'container',
  414. type: 'pie',
  415. margin: [0, 0, 0, 0],
  416. spacingTop: 0,
  417. spacingBottom: 0,
  418. spacingLeft: 0,
  419. spacingRight: 0
  420. },
  421. credits: {
  422. enabled: false
  423. },
  424. title: {
  425. text: '',
  426. style: {
  427. display: 'none'
  428. }
  429. },
  430. subtitle: {
  431. text: '',
  432. style: {
  433. display: 'none'
  434. }
  435. },
  436. yAxis: {
  437. title: {
  438. text: 'Total percent market share'
  439. }
  440. },
  441. plotOptions: {
  442. pie: {
  443. shadow: false,
  444. colors: ['green','red'],
  445. size: '50%'
  446. }
  447. },
  448. tooltip: {
  449. formatter: function() {
  450. return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
  451. }
  452. },
  453. series: [{
  454. name: 'Browsers',
  455. data: [["RUNNING",2],["OFF",4]],
  456. size: '60%',
  457. innerSize: '50%',
  458. showInLegend:false,
  459. dataLabels: {
  460. enabled: false
  461. }
  462. }]
  463. });
  464. */