From 1abcb99f78a541206557f8b40ec63320889938e7 Mon Sep 17 00:00:00 2001 From: Dane Everitt Date: Fri, 30 Jun 2017 20:41:16 -0500 Subject: [PATCH] Fix more of the console, add back support for arrow key command history --- public/themes/pterodactyl/css/terminal.css | 64 ++------------ .../themes/pterodactyl/js/frontend/console.js | 87 ++++++++++++++++--- .../pterodactyl/server/console.blade.php | 8 +- .../themes/pterodactyl/server/index.blade.php | 8 +- 4 files changed, 95 insertions(+), 72 deletions(-) diff --git a/public/themes/pterodactyl/css/terminal.css b/public/themes/pterodactyl/css/terminal.css index 2e5233fd0..222639a1d 100644 --- a/public/themes/pterodactyl/css/terminal.css +++ b/public/themes/pterodactyl/css/terminal.css @@ -28,72 +28,26 @@ padding: 1px 0; } -@keyframes cursorblink { - 0% { - background: transparent; - } - 100% { - background: rgba(170, 170, 170, 0.9); - } -} - -@-webkit-keyframes cursorblink { - 0% { - background: transparent; - } - 100% { - background: rgba(170, 170, 170, 0.9); - } -} - #terminal_input { width: 100%; background: rgb(26, 26, 26); border-radius: 0 0 5px 5px; - padding: 5px 10px; + padding: 0 0 0 10px !important; } -.terminal_input--input { - height: 0; - width: 0; - position: absolute; - top: -20px; -} - -.terminal_input--text, .terminal_input--prompt { - line-height: 14px; - width: 100%; - vertical-align: middle; - font-size: 12px; +.terminal_input--input, .terminal_input--prompt { font-family: 'Source Code Pro', monospace; margin-bottom: 0; - background: transparent; + border: 0 !important; + background: transparent !important; color: rgb(223, 223, 223); + font-size: 12px; + padding: 1px 0 4px !important; } - -.terminal_input--text:before, .terminal_input--text:after { - content: ""; - display: inline-block; - width: 7px; - height: 14px; - margin: 0 0 -12px -6px; - vertical-align: middle; -} - -.terminal_input--text:after { - position: relative; - bottom: 8px; - left: 8px; - background: #ff00; - animation: cursorblink 0.6s linear infinite alternate; - -webkit-animation: cursorblink 0.6s linear infinite alternate; -} - .terminal_input--input { - color: transparent; - background-color: transparent; - border: 0; - outline: none; + margin-left: 6px; + line-height: 1; + outline: none !important; } .terminal-notify { diff --git a/public/themes/pterodactyl/js/frontend/console.js b/public/themes/pterodactyl/js/frontend/console.js index 3d7a66d85..96639b156 100644 --- a/public/themes/pterodactyl/js/frontend/console.js +++ b/public/themes/pterodactyl/js/frontend/console.js @@ -21,32 +21,98 @@ var CONSOLE_PUSH_COUNT = Pterodactyl.config.console_count || 50; var CONSOLE_PUSH_FREQ = Pterodactyl.config.console_freq || 200; var CONSOLE_OUTPUT_LIMIT = Pterodactyl.config.console_limit || 2000; +var KEYCODE_UP_ARROW = 38; +var KEYCODE_DOWN_ARROW = 40; + var AnsiUp = new AnsiUp; AnsiUp.use_classes = true; var $terminal = $('#terminal'); -var $ghostInput = $('.terminal_input--input'); -var $visibleInput = $('.terminal_input--text'); +var $terminalInput = $('.terminal_input--input'); var $scrollNotify = $('#terminalNotify'); $(document).ready(function () { - $ghostInput.focus(); - $('.terminal_input--text, #terminal_input, #terminal, #terminalNotify').on('click', function () { - $ghostInput.focus(); + var storage = window.localStorage; + var activeHx = []; + var currentHxIndex = 0; + var currentKeyCount = 0; + + var storedConsoleHistory = storage.getItem('console_hx_' + Pterodactyl.server.uuid); + try { + activeHx = JSON.parse(storedConsoleHistory) || []; + currentKeyCount = activeHx.length - 1; + } catch (ex) { + // + } + + $terminalInput.focus(); + $('.terminal_input--prompt, #terminal_input, #terminal, #terminalNotify').on('click', function () { + $terminalInput.focus(); }); - $ghostInput.on('input', function () { - $visibleInput.html($(this).val()); - }); + $terminalInput.on('keyup', function (e) { + if (e.which === KEYCODE_DOWN_ARROW || e.which === KEYCODE_UP_ARROW) { + var value = consoleHistory(e.which); + + if (value !== false) { + $terminalInput.val(value); + } + } + + if (e.which === 27) { + $(this).val(''); + } - $ghostInput.on('keyup', function (e) { if (e.which === 13) { + saveToHistory($(this).val()); Socket.emit((ConsoleServerStatus !== 0) ? 'send command' : 'set status', $(this).val()); $(this).val(''); - $visibleInput.html(''); } }); + + function consoleHistory(key) { + // Get previous + if (key === KEYCODE_UP_ARROW) { + // currentHxIndex++; + var index = activeHx.length - (currentHxIndex + 1); + + if (typeof activeHx[index - 1] === 'undefined') { + return activeHx[index]; + } + + currentHxIndex++; + return activeHx[index]; + } + + // Get more recent + if (key === KEYCODE_DOWN_ARROW) { + var index = activeHx.length - currentHxIndex; + + if (typeof activeHx[index + 1] === 'undefined') { + return activeHx[index]; + } + + currentHxIndex--; + return activeHx[index]; + } + } + + function saveToHistory(command) { + if (command.length === 0) { + return; + } + + if (activeHx.length >= 50) { + activeHx.pop(); + } + + currentHxIndex = 0; + currentKeyCount++; + activeHx[currentKeyCount] = command; + + storage.setItem('console_hx_' + Pterodactyl.server.uuid, JSON.stringify(activeHx)); + } }); $terminal.on('scroll', function () { @@ -137,7 +203,6 @@ function pushToTerminal(string) { }); })(); - function updateServerPowerControls (data) { // Server is On or Starting if(data == 1 || data == 2) { diff --git a/resources/themes/pterodactyl/server/console.blade.php b/resources/themes/pterodactyl/server/console.blade.php index b946ad11d..babb44a66 100644 --- a/resources/themes/pterodactyl/server/console.blade.php +++ b/resources/themes/pterodactyl/server/console.blade.php @@ -28,9 +28,11 @@
-
- {{ $server->username }}:~$ - +
+
+
{{ $server->username }}:~$
+ +