From 96f5d158116c4d4be14c904a3e4170bd974c3e38 Mon Sep 17 00:00:00 2001 From: Jakob Schrettenbrunner Date: Thu, 26 Jan 2017 22:12:33 +0100 Subject: [PATCH] switch console javascript code to revealing module pattern to avoid global variables --- .../themes/pterodactyl/js/frontend/console.js | 369 +++++++++--------- 1 file changed, 195 insertions(+), 174 deletions(-) diff --git a/public/themes/pterodactyl/js/frontend/console.js b/public/themes/pterodactyl/js/frontend/console.js index 2d30586ec..bbee56465 100644 --- a/public/themes/pterodactyl/js/frontend/console.js +++ b/public/themes/pterodactyl/js/frontend/console.js @@ -20,187 +20,208 @@ var CONSOLE_PUSH_COUNT = 50; var CONSOLE_PUSH_FREQ = 200; -(function initConsole() { - window.TerminalQueue = []; - window.Terminal = $('#terminal').terminal(function (command, term) { - Socket.emit('send command', command); - }, { - greetings: '', - name: Pterodactyl.server.uuid, - height: 450, - exit: false, - prompt: Pterodactyl.server.username + ':~$ ', - scrollOnEcho: false, - scrollBottomOffset: 5, - onBlur: function (terminal) { - return false; - } - }); +const Console = (function () { - Socket.on('initial status', function (data) { - Terminal.clear(); - if (data.status === 1 || data.status === 2) { - Socket.emit('send server log'); - } - }); -})(); + var terminalQueue; + var terminal; -(function pushOutputQueue() { - if (TerminalQueue.length > CONSOLE_PUSH_COUNT) { - // console throttled warning show + function initConsole() { + termianlQueue = []; + terminal = $('#terminal').terminal(function (command, term) { + Socket.emit('send command', command); + }, { + greetings: '', + name: Pterodactyl.server.uuid, + height: 450, + exit: false, + prompt: Pterodactyl.server.username + ':~$ ', + scrollOnEcho: false, + scrollBottomOffset: 5, + onBlur: function (terminal) { + return false; + } + }); + + Socket.on('initial status', function (data) { + terminal.clear(); + if (data.status === 1 || data.status === 2) { + Socket.emit('send server log'); + } + }); } - if (TerminalQueue.length > 0) { - for (var i = 0; i < CONSOLE_PUSH_COUNT && TerminalQueue.length > 0; i++) { - Terminal.echo(TerminalQueue[0]); - TerminalQueue.shift(); + function pushOutputQueue() { + if (termianlQueue.length > CONSOLE_PUSH_COUNT) { + // console throttled warning show } + + if (termianlQueue.length > 0) { + for (var i = 0; i < CONSOLE_PUSH_COUNT && termianlQueue.length > 0; i++) { + terminal.echo(termianlQueue[0]); + termianlQueue.shift(); + } + } + + window.setTimeout(pushOutputQueue, CONSOLE_PUSH_FREQ); } - window.setTimeout(pushOutputQueue, CONSOLE_PUSH_FREQ); -})(); + return { + init: function () { + $('[data-attr="power"]').click(function (event) { + if (! $(this).hasClass('disabled')) { + Socket.emit('set status', $(this).data('action')); + } + }); + + var ctc = $('#chart_cpu'); + var timeLabels = []; + var cpuData = []; + var CPUChart = new Chart(ctc, { + type: 'line', + data: { + labels: timeLabels, + datasets: [ + { + label: "Percent Use", + fill: false, + lineTension: 0.03, + backgroundColor: "#00A1CB", + borderColor: "#00A1CB", + borderCapStyle: 'butt', + borderDash: [], + borderDashOffset: 0.0, + borderJoinStyle: 'miter', + pointBorderColor: "rgba(75,192,192,1)", + pointBackgroundColor: "#fff", + pointBorderWidth: 1, + pointHoverRadius: 5, + pointHoverBackgroundColor: "rgba(75,192,192,1)", + pointHoverBorderColor: "rgba(220,220,220,1)", + pointHoverBorderWidth: 2, + pointRadius: 1, + pointHitRadius: 10, + data: cpuData, + spanGaps: false, + } + ] + }, + options: { + title: { + display: true, + text: 'CPU Usage (as Percent Total)' + }, + legend: { + display: false, + }, + animation: { + duration: 1, + } + } + }); + + var ctm = $('#chart_memory'); + var memoryData = []; + var MemoryChart = new Chart(ctm, { + type: 'line', + data: { + labels: timeLabels, + datasets: [ + { + label: "Memory Use", + fill: false, + lineTension: 0.03, + backgroundColor: "#01A4A4", + borderColor: "#01A4A4", + borderCapStyle: 'butt', + borderDash: [], + borderDashOffset: 0.0, + borderJoinStyle: 'miter', + pointBorderColor: "rgba(75,192,192,1)", + pointBackgroundColor: "#fff", + pointBorderWidth: 1, + pointHoverRadius: 5, + pointHoverBackgroundColor: "rgba(75,192,192,1)", + pointHoverBorderColor: "rgba(220,220,220,1)", + pointHoverBorderWidth: 2, + pointRadius: 1, + pointHitRadius: 10, + data: memoryData, + spanGaps: false, + } + ] + }, + options: { + title: { + display: true, + text: 'Memory Usage (in Megabytes)' + }, + legend: { + display: false, + }, + animation: { + duration: 1, + } + } + }); + Socket.on('proc', function (proc) { + if (cpuData.length > 10) { + cpuData.shift(); + memoryData.shift(); + timeLabels.shift(); + } + + var cpuUse = (Pterodactyl.server.cpu > 0) ? parseFloat(((proc.data.cpu.total / Pterodactyl.server.cpu) * 100).toFixed(3).toString()) : proc.data.cpu.total; + cpuData.push(cpuUse); + memoryData.push(parseInt(proc.data.memory.total / (1024 * 1024))); + + var m = new Date(); + timeLabels.push($.format.date(new Date(), 'HH:mm:ss')); + + CPUChart.update(); + MemoryChart.update(); + }); + + // Update Listings on Initial Status + Socket.on('initial status', function (data) { + updateServerPowerControls(data.status); + }); + + // Update Listings on Status + Socket.on('status', function (data) { + updateServerPowerControls(data.status); + }); + + function updateServerPowerControls (data) { + // Server is On or Starting + if(data == 1 || data == 2) { + $('[data-attr="power"][data-action="start"]').addClass('disabled'); + $('[data-attr="power"][data-action="stop"], [data-attr="power"][data-action="restart"]').removeClass('disabled'); + } else { + if (data == 0) { + $('[data-attr="power"][data-action="start"]').removeClass('disabled'); + } + $('[data-attr="power"][data-action="stop"], [data-attr="power"][data-action="restart"]').addClass('disabled'); + } + + if(data !== 0) { + $('[data-attr="power"][data-action="kill"]').removeClass('disabled'); + } else { + $('[data-attr="power"][data-action="kill"]').addClass('disabled'); + } + } + }, + + getTerminal: function() { + return terminal + }, + + getTerminalQueue: function() { + return terminalQueue + }, + } + +}); $(document).ready(function () { - $('[data-attr="power"]').click(function (event) { - if (! $(this).hasClass('disabled')) { - Socket.emit('set status', $(this).data('action')); - } - }); - - var ctc = $('#chart_cpu'); - var timeLabels = []; - var cpuData = []; - var CPUChart = new Chart(ctc, { - type: 'line', - data: { - labels: timeLabels, - datasets: [ - { - label: "Percent Use", - fill: false, - lineTension: 0.03, - backgroundColor: "#00A1CB", - borderColor: "#00A1CB", - borderCapStyle: 'butt', - borderDash: [], - borderDashOffset: 0.0, - borderJoinStyle: 'miter', - pointBorderColor: "rgba(75,192,192,1)", - pointBackgroundColor: "#fff", - pointBorderWidth: 1, - pointHoverRadius: 5, - pointHoverBackgroundColor: "rgba(75,192,192,1)", - pointHoverBorderColor: "rgba(220,220,220,1)", - pointHoverBorderWidth: 2, - pointRadius: 1, - pointHitRadius: 10, - data: cpuData, - spanGaps: false, - } - ] - }, - options: { - title: { - display: true, - text: 'CPU Usage (as Percent Total)' - }, - legend: { - display: false, - }, - animation: { - duration: 1, - } - } - }); - - var ctm = $('#chart_memory'); - var memoryData = []; - var MemoryChart = new Chart(ctm, { - type: 'line', - data: { - labels: timeLabels, - datasets: [ - { - label: "Memory Use", - fill: false, - lineTension: 0.03, - backgroundColor: "#01A4A4", - borderColor: "#01A4A4", - borderCapStyle: 'butt', - borderDash: [], - borderDashOffset: 0.0, - borderJoinStyle: 'miter', - pointBorderColor: "rgba(75,192,192,1)", - pointBackgroundColor: "#fff", - pointBorderWidth: 1, - pointHoverRadius: 5, - pointHoverBackgroundColor: "rgba(75,192,192,1)", - pointHoverBorderColor: "rgba(220,220,220,1)", - pointHoverBorderWidth: 2, - pointRadius: 1, - pointHitRadius: 10, - data: memoryData, - spanGaps: false, - } - ] - }, - options: { - title: { - display: true, - text: 'Memory Usage (in Megabytes)' - }, - legend: { - display: false, - }, - animation: { - duration: 1, - } - } - }); - Socket.on('proc', function (proc) { - if (cpuData.length > 10) { - cpuData.shift(); - memoryData.shift(); - timeLabels.shift(); - } - - var cpuUse = (Pterodactyl.server.cpu > 0) ? parseFloat(((proc.data.cpu.total / Pterodactyl.server.cpu) * 100).toFixed(3).toString()) : proc.data.cpu.total; - cpuData.push(cpuUse); - memoryData.push(parseInt(proc.data.memory.total / (1024 * 1024))); - - var m = new Date(); - timeLabels.push($.format.date(new Date(), 'HH:mm:ss')); - - CPUChart.update(); - MemoryChart.update(); - }); - - // Update Listings on Initial Status - Socket.on('initial status', function (data) { - updateServerPowerControls(data.status); - }); - - // Update Listings on Status - Socket.on('status', function (data) { - updateServerPowerControls(data.status); - }); - - function updateServerPowerControls (data) { - // Server is On or Starting - if(data == 1 || data == 2) { - $('[data-attr="power"][data-action="start"]').addClass('disabled'); - $('[data-attr="power"][data-action="stop"], [data-attr="power"][data-action="restart"]').removeClass('disabled'); - } else { - if (data == 0) { - $('[data-attr="power"][data-action="start"]').removeClass('disabled'); - } - $('[data-attr="power"][data-action="stop"], [data-attr="power"][data-action="restart"]').addClass('disabled'); - } - - if(data !== 0) { - $('[data-attr="power"][data-action="kill"]').removeClass('disabled'); - } else { - $('[data-attr="power"][data-action="kill"]').addClass('disabled'); - } - } + Console.init(); });