Add CLI console

locales/en/messages.json

@@ -3255,6 +3255,12 @@
     "cliConfirmSnippetBtn": {
         "message": "Execute"
     },
+    "cliPanelTitle": {
+        "message": "Command Line Interface"
+    },
+    "cliCommand": {
+        "message": "Enter Command"
+    },
     "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/index.html

@@ -279,5 +279,27 @@ <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>
+        <!-- <input type="text" class="dialogInteractive-input" /> -->
+
+        <div id="preview-cli-response">
+            <textarea id="cli-response" cols="96" rows="24" readonly style="font-size: 8pt"></textarea>
+            <div class="default_btn">
+                <a class="confirm" href="#" i18n="cliConfirmSnippetBtn"></a>
+            </div>
+        </div>
+
+        <div class="cli-command">
+            <!-- <div class="cli-command-title" i18n="cliCommand"></div> -->
+            <input type="text" id="cli-command" width="39.5rem">
+        </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, buttonConfirmText, buttonCancelText, buttonConfirmCallback, buttonCancelCallback
+        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,37 @@ 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-response').text(output);
+            $("#cli-command").val('');
+        }
+
+        // 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"),
+        };
+
+        this.showInteractiveDialog(cliPanelDialog);
+    }
 }
 
 function GUI_checkOperatingSystem() {

src/js/main.js

@@ -366,8 +366,30 @@ function startProcess() {
         if (whitelist.indexOf(e.keyCode) === -1) {
             e.preventDefault();
         }
+
+        if (e.keyCode === 190 || e.keyCode === 110) {
+            // only allow one decimal point
+            if ($(this).val().indexOf('.') !== -1) {
+                e.preventDefault();
+            }
+        }
+
+        if (e.keyCode === 189 || e.keyCode === 109) {
+            // only allow minus sign at the beginning
+            if ($(this).val().indexOf('-') !== -1 || $(this).prop('selectionStart') !== 0) {
+                e.preventDefault();
+            }
+        }
     });
 
+    // show interactive CLI on Control+C
+    document.onkeydown = function (e) {
+        if (e.ctrlKey && e.keyCode === 67) {
+            console.log('Interactive CLI requested');
+            GUI.showCliPanel();
+        }
+    };
+
     $("#content").on('change', 'input[type="number"]', function () {
         const element = $(this);
         const min = parseFloat(element.prop('min'));