From b039d852072b0b459a8c1e15aef47530763871c8 Mon Sep 17 00:00:00 2001 From: valentijn <120188387+HerpieDerpieee@users.noreply.github.com> Date: Tue, 16 Jan 2024 21:36:18 +0100 Subject: [PATCH] made it so if command is executed, it disables the input, and send the request to the backend --- httpdocs/index.html | 4 ++-- public/css/styles.css | 11 ++++++++- public/js/terminal.js | 52 ++++++++++++++++++++++++++++++++++--------- 3 files changed, 54 insertions(+), 13 deletions(-) diff --git a/httpdocs/index.html b/httpdocs/index.html index 2767fb2..26f7522 100644 --- a/httpdocs/index.html +++ b/httpdocs/index.html @@ -16,12 +16,12 @@
-
+

:

~/projects

$

- +
diff --git a/public/css/styles.css b/public/css/styles.css index d9e1ab2..ec50f15 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -57,7 +57,16 @@ } } -#terminalInput { +.terminalInput { + margin-left: 5px; + background: none; + outline:none; + border: none; + font-size: 16px; + font-family: "Source Code Pro", monospace; + color: white; +} +.terminalInput:disabled { margin-left: 5px; background: none; outline:none; diff --git a/public/js/terminal.js b/public/js/terminal.js index 7ba2266..47e6db6 100644 --- a/public/js/terminal.js +++ b/public/js/terminal.js @@ -1,4 +1,8 @@ -const hostname = `192.168.${Math.floor(Math.random()*100)}.${Math.floor(Math.random()*255)}`; +const terminalContainer = document.getElementById("terminal"); +const hostname = `192.168.${Math.floor(Math.random() * 100)}.${Math.floor(Math.random() * 255)}`; +let currentFolder = "~/projects"; + + document.addEventListener("DOMContentLoaded", function () { @@ -39,14 +43,12 @@ document.addEventListener("DOMContentLoaded", function () { async function sendCommand(e){ const command = e.target.value; - - e.target.value = ""; - resizeInput(); - + // e.target.value = ""; + // resizeInput(); + deactivateAllStuff(); console.log("COMMAND SENT: "+command); - try { // Construct the URL with the command parameter in the query string const url = "/execute?command=" + encodeURIComponent(command); @@ -70,6 +72,40 @@ async function sendCommand(e){ } + +function deactivateAllStuff() { + const blinkies = document.querySelectorAll(".pathBlinky"); + for (let i = 0; i < blinkies.length; i++){ + blinkies[i].remove(); + } + + const actives = document.querySelectorAll(".activeLine"); + for (let i = 0; i < actives.length; i++){ + actives[i].classList.remove("activeLine"); + } + + let input = document.getElementById("terminalInput"); + input.disabled = true; + input.setAttribute("id", ""); + + console.log("deactivated inputs"); +} + + +function handleExecutionResponse(response) { + let commandResponse = document.createElement("div") + commandResponse.classList.add("terminalLine"); + commandResponse.innerHTML = response.response; + terminalContainer.appendChild(commandResponse); +} + + + + + + + + function resizeInput() { const inputText = terminalInput.value; const inputWidth = measureTextWidth(inputText); @@ -105,8 +141,4 @@ function measureTextWidth(text) { document.body.removeChild(fakeElement); return width; -} - -function handleExecutionResponse(response) { - console.log(response); } \ No newline at end of file