valentijn/Terminal-Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

made it so if command is executed, it disables the input, and send the request to the backend

Browse Source
This commit is contained in:
valentijn
2024-01-16 21:36:18 +01:00
parent ccb19f8124
commit b039d85207
3 changed files with 54 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
httpdocs/index.html
View File

@@ -16,12 +16,12 @@
<body> <body>
<div id="main"> <div id="main">
<div id="terminal"> <div id="terminal">
<div class="terminalLine"> <div class="terminalLine activeLine">
<h4 class="pathText"></h4> <h4 class="pathText"></h4>
<h4 class="pathColon">:</h4> <h4 class="pathColon">:</h4>
<h4 class="pathPath">~/projects</h4> <h4 class="pathPath">~/projects</h4>
<h4 class="pathDollar">$</h4> <h4 class="pathDollar">$</h4>
<input type="text" id="terminalInput" value=""> <input class="terminalInput" type="text" id="terminalInput" value="">
<div class="pathBlinky"></div> <div class="pathBlinky"></div>
</div> </div>
</div> </div>

11
public/css/styles.css
View File

@@ -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; margin-left: 5px;
background: none; background: none;
outline:none; outline:none;

52
public/js/terminal.js
View File

@@ -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 () { document.addEventListener("DOMContentLoaded", function () {
@@ -39,14 +43,12 @@ document.addEventListener("DOMContentLoaded", function () {
async function sendCommand(e){ async function sendCommand(e){
const command = e.target.value; const command = e.target.value;
// e.target.value = "";
e.target.value = ""; // resizeInput();
resizeInput(); deactivateAllStuff();
console.log("COMMAND SENT: "+command); console.log("COMMAND SENT: "+command);
try { try {
// Construct the URL with the command parameter in the query string // Construct the URL with the command parameter in the query string
const url = "/execute?command=" + encodeURIComponent(command); 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() { function resizeInput() {
const inputText = terminalInput.value; const inputText = terminalInput.value;
const inputWidth = measureTextWidth(inputText); const inputWidth = measureTextWidth(inputText);
@@ -105,8 +141,4 @@ function measureTextWidth(text) {
document.body.removeChild(fakeElement); document.body.removeChild(fakeElement);
return width; return width;
}
function handleExecutionResponse(response) {
console.log(response);
} }