Basic draft of a debug console

nginx/public_html/index.css

@@ -411,3 +411,43 @@ div#about {
 div#tab-block-template, div#tab-mempool-table, div#tab-blocks, div#tab-peers, div#tab-network-chart {
     padding: 1rem;
 }
+
+div#debug-console {
+    width: 120rem;
+    max-width: 90%;
+    max-height: 90vh;
+    height: 65rem;
+    margin: 1rem auto;
+
+    border: 0.5rem solid var(--neutral-0);
+    background-color: var(--neutral-0);
+    border-radius: 0.3rem;
+
+    display: grid;
+    grid-template-rows: 1fr 2rem;
+
+}
+
+input#debug-console-input {
+    border: 0.5rem solid var(--neutral-1);
+    background-color: var(--neutral-1);
+    border-radius: 0.3rem;
+}
+
+div#debug-console-output, input#debug-console-input {
+    color: var(--neutral-6);
+    font-family: monospace;
+    font-size: 1rem;
+}
+
+div#debug-console-output {
+    overflow-x: hidden; /* TODO: word-wrap of sorts */
+    overflow-y: auto;
+    white-space: pre;
+}
+input#debug-console-input {
+    display: block;
+    width: 100%;
+    font-weight: bold;
+    border: none;
+}

nginx/public_html/index.html

@@ -372,6 +372,22 @@ along with bitcoin-top.  If not, see <http://www.gnu.org/licenses/>.
 
         </div>
 
+
+        <div id="tab-debug-console" class="tab"
+            :class="tab === 'debug-console' ? 'visible' : 'invisible'"
+        >
+            <div id="debug-console">
+                <div id="debug-console-output">{{ debug_output }}</div>
+                <input
+                    id="debug-console-input"
+                    type="text"
+                    v-model="debug_input"
+                    v-on:change="submitDebugInput()"
+                >
+                </input>
+            </div>
+        </div>
+
         <div id="tab-about" class="tab"
             :class="tab === 'about' ? 'visible' : 'invisible'"
         >

nginx/public_html/index.js

@@ -29,6 +29,7 @@ const TABS = [
     ["blocks", "Blocks"],
     ["peers", "Peers"],
     ["network-chart", "Network chart"],
+    ["debug-console", "Debug console"],
     ["about", "About"],
 ];
 
@@ -123,6 +124,8 @@ onload = function() {
             git_status: null,
             authors_md: null,
             bt_logscale: true,
+            debug_input: "",
+            debug_output: "",
             peers: null,
             data: 7,
             datas: DATAS,
@@ -181,6 +184,11 @@ onload = function() {
             },
         },
         methods: {
+            submitDebugInput: function() {
+                let request = app.debug_input.split(" ").join("/");
+                asyncRequest(request, dealWithDebugOutput);
+                app.debug_input = "";
+            },
             toggleNav: function() {
                 app.nav_hidden = !app.nav_hidden;
             },
@@ -299,6 +307,24 @@ onload = function() {
         asyncRequest(`nettotalsrange/${range}`, processAsyncResponse);
     }
 
+    let dealWithDebugOutput = function(r, j) {
+        let jj = j.result;
+        if (jj === null) {
+            jj = j.error;
+        }
+
+        let stringified = JSON.stringify(jj, null, 4) + "\n";
+
+        let output = r + "\n" + stringified;
+        app.debug_output = app.debug_output + output;
+
+        // hacky...
+        setTimeout(function() {
+            let el = document.getElementById("debug-console-output");
+            el.scrollTop = el.scrollHeight;
+        }, 250);
+    }
+
     let dealWithChaininfo = function(chaininfo) {
         app.chaininfo = chaininfo;
         app.getBlockIfRequired(chaininfo.bestblockhash);