CLI

index.html

@@ -8,6 +8,7 @@
     <script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
     <script type="text/javascript" src="./js/main.js"></script>
     <script type="text/javascript" src="./js/sitl.js"></script>
+    <script type="text/javascript" src="./js/CliAutoComplete.js"></script>
     <script type="text/javascript" src="./js/libraries/d3.min.js"></script>
     <script type="text/javascript" src="./js/libraries/jquery.nouislider.all.min.js"></script>
     <script type="text/javascript" src="./js/libraries/three/three.min.js"></script>

js/main.js

@@ -1,5 +1,8 @@
 window.$ = window.jQuery =  require('jquery'), 
-    require('jquery-ui-dist/jquery-ui');
+                            require('jquery-ui-dist/jquery-ui'), 
+                            require('jquery-textcomplete');
+
+             
 const { SerialPort } = require('serialport');
 const path = require('path');
 const { app, dialog } = require('@electron/remote');
@@ -34,7 +37,7 @@ let globalSettings = {
     docsTreeLocation: 'master',
 };
 
-$(document).on("ready", () => {
+$(function() {
     localization = new Localiziation("en");
     localization.localize();
 
@@ -46,6 +49,11 @@ $(document).on("ready", () => {
     globalSettings.showProfileParameters = store.get('show_profile_parameters', 1);
     updateProfilesHighlightColours();
 
+    if (store.get('cli_autocomplete', false)) {
+        globalSettings.cliAutocomplete = true;
+        CliAutoComplete.setEnabled(true);
+    };
+
     // Resets the OSD units used by the unit coversion when the FC is disconnected.
     if (!CONFIGURATOR.connectionValid) {
         globalSettings.osdUnits = null;
@@ -233,7 +241,7 @@ $(document).on("ready", () => {
             el.addClass('active');
             el.after('<div id="options-window"></div>');
 
-            $('div#options-window').load('/html//options.html', function () {
+            $('div#options-window').load('./tabs/options.html', function () {
 
                 // translate to user-selected language
                 localization.localize();
@@ -265,12 +273,21 @@ $(document).on("ready", () => {
                     activeTab.find('a').click();
                 });
 
+                $('div.cli_autocomplete input').change(function () {
+                    globalSettings.cliAutocomplete = $(this).is(':checked');
+                     store.set('cli_autocomplete', globalSettings.cliAutocomplete);
+
+                    CliAutoComplete.setEnabled($(this).is(':checked'));
+                });
+
                 $('#ui-unit-type').val(globalSettings.unitType);
                 $('#map-provider-type').val(globalSettings.mapProviderType);
                 $('#map-api-key').val(globalSettings.mapApiKey);
                 $('#proxyurl').val(globalSettings.proxyURL);
                 $('#proxylayer').val(globalSettings.proxyLayer);
                 $('#showProfileParameters').prop('checked', globalSettings.showProfileParameters);
+                $('#cliAutocomplete').prop('checked', globalSettings.cliAutocomplete);
+
 
                 // Set the value of the unit type
                 // none, OSD, imperial, metric

package.json

@@ -36,6 +36,7 @@
     "fs": "0.0.1-security",
     "jquery": "3.7.1",
     "jquery-ui-dist": "1.12.1",
+    "jquery-textcomplete": "^1.8.5",
     "marked": "^11.2.0",
     "minimist": "^1.2.0",
     "openlayers": "^4.6.5",

src/css/styles.css

@@ -1,12 +1,12 @@
 @import 'main.css';
-@import '../js/libraries/jquery.nouislider.min.css';
+@import '../../js/libraries/jquery.nouislider.min.css';
-@import '../js/libraries/jquery.nouislider.pips.min.css';
+@import '../../js/libraries/jquery.nouislider.pips.min.css';
-@import '../js/libraries/flightindicators.css';
+@import '../../js/libraries/flightindicators.css';
 @import 'opensans_webfontkit/fonts.css';
 @import 'font-awesome/css/font-awesome.css';
 @import 'dropdown-lists/css/style_lists.css';
-@import '../js/libraries/switchery/switchery.css';
+@import '../../js/libraries/switchery/switchery.css';
-@import '../js/libraries/jbox/jBox.css';
+@import '../../js/libraries/jbox/jBox.css';
 @import 'logic.css';
 @import 'defaults_dialog.css';
 @import './../../node_modules/openlayers/dist/ol.css';

src/css/tabs/cli.css

@@ -79,6 +79,24 @@
     color: white;
 }
 
+.cli-textcomplete-dropdown {
+    border: 1px solid black;
+    background-color: #4f4f4f;
+    border-radius: 5px;
+    max-height: 50%;
+    overflow: auto;
+    list-style: none;
+    padding: 5px;
+    margin: 0;
+}
+.cli-textcomplete-dropdown a {
+    color: white;
+    cursor: pointer;
+}
+.cli-textcomplete-dropdown .active {
+    background-color: #000000;
+}
+
 @media only screen and (max-width: 1055px) , only screen and (max-device-width: 1055px) {
 
 .tab-cli .content_wrapper {

tabs/cli.js

@@ -130,6 +130,19 @@ TABS.cli.initialize = function (callback) {
         CONFIGURATOR.cliActive = true;
 
         var textarea = $('.tab-cli textarea[name="commands"]');
+        CliAutoComplete.initialize(textarea, self.sendLine.bind(self), writeToOutput);
+        $(CliAutoComplete).on('build:start', function() {
+            textarea
+                .val('')
+                .attr('placeholder', localization.getMessage('cliInputPlaceholderBuilding'))
+                .prop('disabled', true);
+        });
+        $(CliAutoComplete).on('build:stop', function() {
+            textarea
+                .attr('placeholder', localization.getMessage('cliInputPlaceholder'))
+                .prop('disabled', false)
+                .focus();
+        });
 
         $('.tab-cli .save').click(function() {
             
@@ -252,6 +265,7 @@ TABS.cli.initialize = function (callback) {
             if (event.which == tabKeyCode) {
                 // prevent default tabbing behaviour
                 event.preventDefault();
+                if (!CliAutoComplete.isEnabled()) {
                     const outString = textarea.val();
                     const lastCommand = outString.split("\n").pop();
                     const command = getCliCommand(lastCommand, self.cliBuffer);
@@ -260,6 +274,11 @@ TABS.cli.initialize = function (callback) {
                         textarea.val('');
                     }
                 }
+                else if (!CliAutoComplete.isOpen() && !CliAutoComplete.isBuilding()) {
+                    // force show autocomplete on Tab
+                    CliAutoComplete.openLater(true);
+                }
+            }
         });
 
         textarea.keypress(function (event) {
@@ -267,6 +286,10 @@ TABS.cli.initialize = function (callback) {
             if (event.which == enterKeyCode) {
                 event.preventDefault(); // prevent the adding of new line
 
+                if (CliAutoComplete.isBuilding()) {
+                    return; // silently ignore commands if autocomplete is still building
+                }
+
                 var out_string = textarea.val();
                 self.history.add(out_string.trim());
 
@@ -285,6 +308,10 @@ TABS.cli.initialize = function (callback) {
             var keyUp = {38: true},
                 keyDown = {40: true};
 
+                if (CliAutoComplete.isOpen()) {
+                    return; // disable history keys if autocomplete is open
+                }
+
             if (event.keyCode in keyUp) {
                 textarea.val(self.history.prev());
             }
@@ -355,6 +382,11 @@ function writeToOutput(text) {
 }
 
 function writeLineToOutput(text) {
+    if (CliAutoComplete.isBuilding()) {
+        CliAutoComplete.builderParseLine(text);
+        return; // suppress output if in building state
+    }
+
     if (text.startsWith("### ERROR: ")) {
         writeToOutput('<span class="error_message">' + text + '</span><br>');
     } else {
@@ -429,7 +461,10 @@ TABS.cli.read = function (readInfo) {
                 this.cliBuffer += currentChar;
         }
 
+        if (!CliAutoComplete.isBuilding()) {
+            // do not include the building dialog into the history
             this.outputHistory += currentChar;
+        }
 
         if (this.cliBuffer == 'Rebooting') {
             CONFIGURATOR.cliActive = false;
@@ -444,7 +479,16 @@ TABS.cli.read = function (readInfo) {
     if (!CONFIGURATOR.cliValid && validateText.indexOf('CLI') !== -1) {
         GUI.log(localization.getMessage('cliEnter'));
         CONFIGURATOR.cliValid = true;
-        validateText = "";
+
+        if (CliAutoComplete.isEnabled() && !CliAutoComplete.isBuilding()) {
+            // start building autoComplete
+            CliAutoComplete.builderStart();
+        }
+    }
+
+    // fallback to native autocomplete
+    if (!CliAutoComplete.isEnabled()) {
+        setPrompt(removePromptHash(this.cliBuffer));
     }
 
     setPrompt(removePromptHash(this.cliBuffer));
@@ -483,5 +527,8 @@ TABS.cli.cleanup = function (callback) {
             if (callback) callback();
         }, 1000); // if we dont allow enough time to reboot, CRC of "first" command sent will fail, keep an eye for this one
         CONFIGURATOR.cliActive = false;
+
+        CliAutoComplete.cleanup();
+        $(CliAutoComplete).off();
     });
 };

tabs/options.html

@@ -20,6 +20,10 @@
                     <input id="showProfileParameters" type="checkbox" />
                     <label for="showProfileParameters"><span data-i18n="options_showProfileParameters"></span></label>
                 </div>
+                <div class="checkbox cli_autocomplete">
+                    <input id="cliAutocomplete" type="checkbox" />
+                    <label for="cliAutocomplete"><span data-i18n="options_cliAutocomplete"></span></label>
+                </div>
             </div>
         </div>