FileExplorer.js

import { ArinekHTML } from "ArinekOS/ArinekHTML.js";
import { Collection } from "ArinekOS/Collection.js";


/** @param {NS} ns */
export async function main(ns) {
    let fileExplorer = new FileExplorer(ns);
    fileExplorer.start();
}

class FileExplorer {
    parser;
    data;
    doc;
    fileExplorer;

    #ns;
    #host_server;
    #current_path;
    #selected_files;

    /**
     * @param {NS} ns
     */
    constructor(ns) {
        this.#ns = ns;
        this.#host_server = ns.getHostname();
        this.#current_path = "";
        this.#selected_files = [];

        this.parser = new ArinekHTML(ns, "ArinekOS/FileExplorer/Content/index.html.txt");
        this.data = new Collection();
        this.doc = eval("document");
        this.fileExplorer = this.openWindow();

        this.addCSS("ArinekOS/FileExplorer/Content/styles.css.txt");
    }

    start() {
        this.update();
    }

    openWindow() {
        this.#ns.alert("<div id='explorer-window' class='explorer-window'></div>");
        const fileExplorerWindow = this.doc.getElementById("explorer-window");

        return fileExplorerWindow;
    }

    /**
      * @param {string} css_file
      */
    addCSS(css_file) {
        const css = this.#ns.read(css_file);

        // Add the css to the game
        let styleDiv = this.doc.getElementById('myCustomStyles');
        if (!styleDiv) {
            // Make a new new div
            styleDiv = this.doc.createElement("div");
            styleDiv.id = 'myCustomStyles';
            this.doc.getElementsByTagName('head')[0].appendChild(styleDiv);
        }
        styleDiv.innerHTML = "<style>" + css + "</style>";
    }

    update() {
        let fileTree = new Folder(this.#ns, this.#current_path, this.#host_server);
        let terminal = new FakeTerminal(this.doc);

        this.data.add("folders", fileTree.subfolder_names);
        this.data.add("files", fileTree.files);
        this.data.add("selected_files", this.#selected_files);
        this.data.add("current_path", this.#current_path);

        this.parser.parse(this.data);
        this.fileExplorer.innerHTML = this.parser.html;

        let folder_divs = this.doc.getElementsByClassName("explorer-directory");
        for (let folder_div of folder_divs) {
            folder_div.addEventListener("dblclick", e => {
                const folder = fileTree.getFolderByName(folder_div.id);
                this.#current_path = folder.path;
                this.#selected_files = [];
                this.update();
            })
        }

        let file_divs = this.doc.getElementsByClassName("explorer-file");
        for (let file_div of file_divs) {
            file_div.addEventListener("click", e => {
                const file = this.#current_path + file_div.id;
                this.toggleSelectedFile(file);
                this.update();
            });
        }

        let openButton = this.doc.getElementById("explorer-open");
        openButton.addEventListener("click", e => {
            terminal.openFiles(this.#selected_files);

        });

        let removeButton = this.doc.getElementById("explorer-remove");
        removeButton.addEventListener("click", e => {
            terminal.removeFiles(this.#selected_files);
        });
    }

    toggleSelectedFile(file) {
        if (this.#selected_files.includes(file)) {
            this.#selected_files = this.#selected_files.filter(selected_file => selected_file !== file);
        } else {
            this.#selected_files.push(file);
        }
    }
}

class Folder {
    path;
    subfolders;
    files;
    #ns;
    #host_server;


    /**
     * @param {NS} ns
     * @param {string} path
     * @param {string} host_server
     */
    constructor(ns, path, host_server) {
        this.#ns = ns;
        this.#host_server = host_server;
        this.path = path;

        this.subfolders = this.getFiles(this.#ns, this.path).folders;
        this.files = this.getFiles(this.#ns, this.path).files;
    }

    getFiles() {
        let files = this.#ns.ls(this.#host_server, this.path);
        let folders = [];

        const nextFolderIndex = this.path.length;

        for (let file of files) {
            const endOfNextFolderIndex = file.indexOf("/", nextFolderIndex + 1);
            if (endOfNextFolderIndex !== -1) {
                const folder_name = file.slice(nextFolderIndex, endOfNextFolderIndex);
                const folder_path = file.slice(0, endOfNextFolderIndex + 1);

                const folder = new Folder(this.#ns, folder_path, this.#host_server);

                if (folders.every(folder => folder.path !== folder_path)) folders.push(folder);
            }
        }

        files = files.filter(file => file.slice(nextFolderIndex + 1).indexOf("/") === -1);
        return {
            folders: folders,
            files: files
        };
    }

    get name() {
        let lastIndex = this.path.lastIndexOf("/");
        let temp = this.path.slice(0, lastIndex);
        lastIndex = temp.lastIndexOf("/");

        if (lastIndex === -1) return temp;
        return temp.slice(lastIndex + 1);
    }

    get subfolder_names() {
        let names = [];
        for (const subfolder of this.subfolders) {
            names.push(subfolder.name);
        }
        return names;
    }

    getFolderByName(name) {
        return this.subfolders.find(subfolder => subfolder.name === name);
    }
}

class FakeTerminal {
    #terminal;

    /**
     * @param {document} doc
     */
    constructor(doc) {
        this.#terminal = doc.getElementById("terminal-input");
    }

    runCommand(command) {
        // Print the command to the terminal input field
        this.#terminal.value = command;

        // Get a reference to the React event handler.
        const handler = Object.keys(this.#terminal)[1];

        // Perform an onChange event to set some internal values.
        this.#terminal[handler].onChange({ target: this.#terminal });

        // Simulate an enter press
        this.#terminal[handler].onKeyDown({ key: 'Enter', preventDefault: () => null });
    }

    openFiles(files) {
        let command = "nano";
        for (const file of files) {
            command += " " + file;
        }

        this.runCommand(command);
    }

    async removeFiles(files) {
        let command = "";
        for (let file of files) {
            command += "rm " + file + ";";
        }
        this.runCommand(command);
    }
}