Terminal-Website/httpdocs/public/js/terminal.js

const terminalContainer = document.getElementById("terminal");
const hostname = `192.168.${Math.floor(Math.random() * 100)}.${Math.floor(Math.random() * 255)}`;


document.addEventListener("DOMContentLoaded", function () {
    createNewTerminalLine()
    document.querySelector(".pathText").innerHTML = `guest@${hostname}`;
    addInputEventListeners();
});

async function sendCommand(e){
    const command = e.target.value;
    deactivateAllStuff();

    if (command.trim() == "clear"){
        lines = document.querySelectorAll(".terminalLine").forEach((line)=>{
            line.remove();
        })
        createNewTerminalLine();
        return;
    }
    else if (command.trim() == "logout" || command.trim() == "exit"){
        window.location.href = "https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwj2jve6z_iDAxWb9rsIHflPD_sQwqsBegQIDxAF&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DdQw4w9WgXcQ&usg=AOvVaw0aHtehaphMhOCAkCydRLZU&opi=89978449"
    }

    try {
        // Construct the URL with the command parameter in the query string
        const url = "/execute?command=" + encodeURIComponent(command);

        // Make a GET request using the fetch API
        const response = await fetch(url);

        if (!response.ok) {
            throw new Error(`Error: ${response.status} - ${response.statusText}`);
        }

        // Parse the JSON response
        const files = await response.json();

        // Handle the execution response
        handleExecutionResponse(files);
    } catch (error) {
        console.error("Error:", error.message);
    }

}



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", "");

}


function handleExecutionResponse(response) {
    //Show Response
    createNewTextLine(response.response);

    //create new terminal line.
    createNewTerminalLine();
}


function createNewTextLine(text){
    let commandResponse = document.createElement("div")
    commandResponse.classList.add("terminalLine");

    let textElement = document.createElement("span");
    textElement.classList.add("responseText");
    textElement.innerHTML = text;

    commandResponse.appendChild(textElement)
    terminalContainer.appendChild(commandResponse);
}

function createNewTerminalLine(){
    let newTerminalLine = document.createElement("div");
    newTerminalLine.classList.add("terminalLine");
    newTerminalLine.classList.add("activeLine");

    let pathText = document.createElement("h4")
    pathText.innerHTML=`guest@${hostname}`;
    pathText.classList.add("pathText");

    let pathColon = document.createElement("h4")
    pathColon.innerHTML = ":";
    pathColon.classList.add("pathColon");

    let pathPath = document.createElement("h4");
    fetch('/currentDir')
    .then(response => response.text())
    .then(data => {
        if (data.startsWith("/home/guest")){
            pathPath.innerHTML = "~"+data.split("/home/guest")[1]
        } else {
            pathPath.innerHTML = data;
        }
        pathPath.classList.add("pathPath");
    })
    .catch(error => console.error('Error:', error));

    let pathDollar = document.createElement("h4");
    pathDollar.innerHTML = "$";
    pathDollar.classList.add("pathDollar");


    let newTerminalInput = document.createElement("input");
    newTerminalInput.setAttribute("type", "text");
    newTerminalInput.setAttribute("value", "");
    newTerminalInput.setAttribute("id", "terminalInput");
    newTerminalInput.classList.add("terminalInput");

    let blinky = document.createElement("div");
    blinky.classList.add("pathBlinky");

    newTerminalLine.appendChild(pathText);
    newTerminalLine.appendChild(pathColon);
    newTerminalLine.appendChild(pathPath);
    newTerminalLine.appendChild(pathDollar);
    newTerminalLine.appendChild(newTerminalInput);
    newTerminalLine.appendChild(blinky);

    terminalContainer.appendChild(newTerminalLine)

    addInputEventListeners();
}


function resizeInput() {
    const inputText = terminalInput.value;
    const inputWidth = measureTextWidth(inputText);
    const maxWidth = 300; // Set your desired maximum width

    if (inputWidth <= maxWidth) {
        terminalInput.style.width = inputWidth + "px";
    } else {
        terminalInput.style.width = maxWidth + "px";
        terminalInput.value = inputText.slice(0, -1); // Remove the last character
    }
}

function measureTextWidth(text) {
    const nonBreakingSpace = '\u00A0';
    const sanitizedText = text.replace(/ /g, nonBreakingSpace);

    const fakeElement = document.createElement("div");
    fakeElement.style.visibility = "hidden";
    fakeElement.style.position = "absolute";
    fakeElement.style.top = "0";
    fakeElement.style.left = "0";
    fakeElement.style.width = "auto";
    fakeElement.style.fontFamily = "Source Code Pro";
    fakeElement.style.fontSize = "16px";
    fakeElement.style.whiteSpace = "nowrap";
    fakeElement.innerHTML = sanitizedText;

    document.body.appendChild(fakeElement);
    const width = fakeElement.offsetWidth;
    document.body.removeChild(fakeElement);

    return width;
}

function addInputEventListeners() {
    const terminalInput = document.getElementById("terminalInput");

    terminalInput.addEventListener("input", function (e) {
        resizeInput();
    });
    resizeInput()

    terminalInput.addEventListener('blur', function(e) {
        e.preventDefault();
        setTimeout(() => {
            terminalInput.focus();
        }, 0);
    }, false);

    document.addEventListener('click', function(e) {
        e.preventDefault();
        setTimeout(() => {
            terminalInput.focus();
        }, 0);
    }, false);
    terminalInput.focus();

    terminalInput.addEventListener("keydown", async function (e) {
        if (e.key === "Enter"){
            await sendCommand(e);
        }
    })

    return;
}