Slight refactoring of a PR

Corrected indentation, removed jumpy cursor, fixed off-by-one errors on history limits, limited history to a maximum of 300 entries ("300 items of command history should really be enough for anybody!")

src/octoprint/static/js/app/viewmodels/terminal.js

@@ -33,25 +33,25 @@ function TerminalViewModel(loginStateViewModel, settingsViewModel) {
     self.fromCurrentData = function(data) {
         self._processStateData(data.state);
         self._processCurrentLogData(data.logs);
-    }
+    };
 
     self.fromHistoryData = function(data) {
         self._processStateData(data.state);
         self._processHistoryLogData(data.logHistory);
-    }
+    };
 
     self._processCurrentLogData = function(data) {
         if (!self.log)
-            self.log = []
-        self.log = self.log.concat(data)
-        self.log = self.log.slice(-300)
+            self.log = [];
+        self.log = self.log.concat(data);
+        self.log = self.log.slice(-300);
         self.updateOutput();
-    }
+    };
 
     self._processHistoryLogData = function(data) {
         self.log = data;
         self.updateOutput();
-    }
+    };
 
     self._processStateData = function(data) {
         self.isErrorOrClosed(data.flags.closedOrError);
@@ -61,7 +61,7 @@ function TerminalViewModel(loginStateViewModel, settingsViewModel) {
         self.isError(data.flags.error);
         self.isReady(data.flags.ready);
         self.isLoading(data.flags.loading);
-    }
+    };
 
     self.updateFilterRegex = function() {
         var filterRegexStr = self.activeFilters().join("|").trim();
@@ -71,7 +71,7 @@ function TerminalViewModel(loginStateViewModel, settingsViewModel) {
             self.filterRegex = new RegExp(filterRegexStr);
         }
         console.log("Terminal filter regex: " + filterRegexStr);
-    }
+    };
 
     self.updateOutput = function() {
         if (!self.log)
@@ -89,10 +89,13 @@ function TerminalViewModel(loginStateViewModel, settingsViewModel) {
         if (self.autoscrollEnabled()) {
             container.scrollTop(container[0].scrollHeight - container.height())
         }
-    }
+    };
 
     self.sendCommand = function() {
         var command = self.command();
+        if (!command) {
+            return;
+        }
 
         var re = /^([gmt][0-9]+)(\s.*)?/;
         var commandMatch = command.match(re);
@@ -108,24 +111,45 @@ function TerminalViewModel(loginStateViewModel, settingsViewModel) {
                 contentType: "application/json; charset=UTF-8",
                 data: JSON.stringify({"command": command})
             });
-	    self.cmdHistory.push(command);
+
+            self.cmdHistory.push(command);
+            self.cmdHistory.slice(-300); // just to set a sane limit to how many manually entered commands will be saved...
             self.cmdHistoryIdx = self.cmdHistory.length;
             self.command("");
         }
-    }
+    };
 
-    self.handleKeys = function(event) {
+    self.handleKeyDown = function(event) {
+        var keyCode = event.keyCode;
+
+        if (keyCode == 38 || keyCode == 40) {
+            if (keyCode == 38 && self.cmdHistory.length > 0 && self.cmdHistoryIdx > 0) {
+                self.cmdHistoryIdx--;
+            } else if (keyCode == 40 && self.cmdHistoryIdx < self.cmdHistory.length - 1) {
+                self.cmdHistoryIdx++;
+            }
+
+            if (self.cmdHistoryIdx >= 0 && self.cmdHistoryIdx < self.cmdHistory.length) {
+                self.command(self.cmdHistory[self.cmdHistoryIdx]);
+            }
+
+            // prevent the cursor from being moved to the beginning of the input field (this is actually the reason
+            // why we do the arrow key handling in the keydown event handler, keyup would be too late already to
+            // prevent this from happening, causing a jumpy cursor)
+            return false;
+        }
+
+        // do not prevent default action
+        return true;
+    };
+
+    self.handleKeyUp = function(event) {
         if (event.keyCode == 13) {
             self.sendCommand();
-        } else if (event.keyCode == 38) {
-            if (self.cmdHistory.length >= 0 && self.cmdHistoryIdx >= 0) {
-                self.command(self.cmdHistory[--self.cmdHistoryIdx])
-            }
-        } else if (event.keyCode == 40) {
-            if (self.cmdHistoryIdx < self.cmdHistory.length) {
-                self.command(self.cmdHistory[++self.cmdHistoryIdx])
-            }
         }
-    }
+
+        // do not prevent default action
+        return true;
+    };
 
 }

src/octoprint/templates/index.jinja2

@@ -517,7 +517,7 @@
                             </div>
 
                             <div class="input-append" style="display: none;" data-bind="visible: loginState.isUser">
-                                <input type="text" id="terminal-command" data-bind="value: command, event: { keyup: function(d,e) { handleKeys(e); } }, enable: isOperational() && loginState.isUser()">
+                                <input type="text" id="terminal-command" data-bind="value: command, event: { keyup: function(d,e) { return handleKeyUp(e); }, keydown: function(d,e) { return handleKeyDown(e); } }, enable: isOperational() && loginState.isUser()">
                                 <button class="btn" type="button" id="terminal-send" data-bind="click: sendCommand, enable: isOperational() && loginState.isUser()">Send</button>
                             </div>
                         </div>