Add CLI console (#4207)

locales/en/messages.json

@@ -3255,6 +3255,12 @@
     "cliConfirmSnippetBtn": {
         "message": "Execute"
     },
+    "cliPanelTitle": {
+        "message": "Command Line Interface"
+    },
+    "cliCommand": {
+        "message": "Enter command here"
+    },
     "loggingNote": {
         "message": "Data will be logged in this tab <span class=\"message-negative\">only</span>, leaving the tab will <span class=\"message-negative\">cancel</span> logging and application will return to its normal <strong>\"configurator\"</strong> state.<br /> You are free to select the global update period, data will be written into the log file every <strong>1</strong> second for performance reasons."
     },

src/css/main.less

@@ -882,6 +882,31 @@ dialog {
     width: fit-content;
     max-width: 400px;
 }
+.dialogInteractive {
+    .dialogInteractive-closeButton {
+        margin: 0px;
+    }
+    .cli-command {
+        input {
+            width: 100%;
+            margin-top: 12px;
+            margin-bottom: 12px;
+        }
+    }
+    .cli-response {
+        margin-top: 12px;
+        margin-bottom: 12px;
+        white-space: pre-line;
+        height: 100%;
+        width: 100%;
+        textarea {
+            font-size: 11px;
+            object-fit: contain;
+        }
+    }
+    width: fit-content;
+}
+
 .tab_title {
     border-bottom: 2px solid var(--primary-500);
     font-size: 2rem;

src/index.html

@@ -279,5 +279,25 @@ <h3 class="dialogInformationTitle"></h3>
             <a href="#" class="dialogInformation-confirmButton regular-button"></a>
         </div>
     </dialog>
+
+    <dialog class="dialogInteractive">
+        <h3 class="dialogInteractiveTitle"></h3>
+        <div class="dialogInteractiveContent"></div>
+
+        <div class="cli-response">
+            <textarea id="cli-response" readonly rows="32" cols="96"></textarea>
+            <div class="default_btn">
+                <a class="confirm" href="#" i18n="cliConfirmSnippetBtn"></a>
+            </div>
+        </div>
+
+        <div class="cli-command">
+            <input type="text" id="cli-command" i18n_placeholder="cliCommand">
+        </div>
+
+        <div class="buttons">
+            <a href="#" class="dialogInteractive-closeButton regular-button"></a>
+        </div>
+    </dialog>
 </body>
 </html>

src/js/gui.js

@@ -422,6 +422,29 @@ class GuiControl {
             dialog[0].showModal();
         });
     }
+    showInteractiveDialog(interactiveDialogSettings) {
+        // interactiveDialogSettings:
+        // title, text, buttonCloseText
+        return new Promise(resolve => {
+            const dialog = $(".dialogInteractive");
+            const title = dialog.find(".dialogInteractiveTitle");
+            const content = dialog.find(".dialogInteractiveContent");
+            const buttonClose = dialog.find(".dialogInteractive-closeButton");
+
+            title.html(interactiveDialogSettings.title);
+            content.html(interactiveDialogSettings.text);
+            buttonClose.html(interactiveDialogSettings.buttonCloseText);
+
+            buttonClose.off("click");
+
+            buttonClose.on("click", () => {
+                dialog[0].close();
+                resolve();
+            });
+
+            dialog[0].showModal();
+        });
+    }
     escapeHtml(unsafe) {
         return unsafe
             .replace(/&/g, "&")
@@ -435,6 +458,41 @@ class GuiControl {
             $(this).attr('target', '_blank');
         });
     }
+    showCliPanel() {
+        function set_cli_response(response) {
+            const eol = '\n';
+            let output = `${eol}`;
+            for (const line of response) {
+                output += `${line}${eol}`;
+            }
+            // gui_log(output.split(eol).join('<br>'));
+            $("#cli-command").val('');
+            $('#cli-response').text(output);
+        }
+
+        // cli-command button hook
+        $('input#cli-command').change(function () {
+            const _self = $(this);
+            const command = _self.val();
+            if (!command) {
+                return;
+            }
+            MSP.send_cli_command(command, function (response) {
+                set_cli_response(response);
+            });
+        });
+
+        const cliPanelDialog = {
+            title : i18n.getMessage("cliPanelTitle"),
+            buttonCloseText: i18n.getMessage("Close"),
+        };
+
+        // clear any text leftovers from previous session
+        $('#cli-command').val('');
+        $('#cli-response').text('');
+
+        this.showInteractiveDialog(cliPanelDialog);
+    }
 }
 
 function GUI_checkOperatingSystem() {

src/js/serial_backend.js

@@ -10,7 +10,7 @@ import MSP from "./msp";
 import MSPCodes from "./msp/MSPCodes";
 import PortUsage from "./port_usage";
 import PortHandler from "./port_handler";
-import CONFIGURATOR, { API_VERSION_1_45, API_VERSION_1_46 } from "./data_storage";
+import CONFIGURATOR, { API_VERSION_1_45, API_VERSION_1_46, API_VERSION_1_47 } from "./data_storage";
 import { bit_check } from './bit.js';
 import { sensor_status, have_sensor } from "./sensor_helpers";
 import { update_dataflash_global } from "./update_dataflash_global";
@@ -169,6 +169,15 @@ function connectDisconnect() {
 
             mspHelper?.setArmingEnabled(true, false, onFinishCallback);
         }
+
+        // show CLI panel on Control+I
+        document.onkeydown = function (e) {
+            if (e.code === 'KeyI' && e.ctrlKey && !e.shiftKey && !e.altKey && !e.metaKey) {
+                if (isConnected && GUI.active_tab !== 'cli' && semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_47)) {
+                    GUI.showCliPanel();
+                }
+            }
+        };
     }
 }
 
@@ -208,6 +217,9 @@ function finishClose(finishedCallback) {
     if (wasConnected) {
         // detach listeners and remove element data
         $('#content').empty();
+
+        // close cliPanel if left open
+        $(".dialogInteractive")[0].close();
     }
 
     $('#tabs .tab_landing a').click();