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>
<div id="main">
<div id="terminal">
<div class="terminalLine">
<div class="terminalLine activeLine">
<h4 class="pathText"></h4>
<h4 class="pathColon">:</h4>
<h4 class="pathPath">~/projects</h4>
<h4 class="pathDollar">$</h4>
<input type="text" id="terminalInput" value="">
<input class="terminalInput" type="text" id="terminalInput" value="">
<div class="pathBlinky"></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;
background: 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 () {
@@ -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);
}