Webengineering-Filemanager/Frontend/static/js/index.js

base_url = 'http://localhost:8080'; //'http://192.168.178.98:8080';
file_path = [];
tree = {};

window.addEventListener('load', function () {
    if (sessionStorage.getItem("authorization") !== null) {
        console.log('Logged in');
        create_base_view();
        create_logout_view();
        // create_tree_view_data('');
        url_changed();
    } else {
        console.log('Not logged in');
        create_login_view();
    }
});

window.addEventListener('popstate', function () {
    url_changed();
});

function url_changed() {
    let curr_dir = get_path();

    if (curr_dir !== null) {
        if (curr_dir.startsWith('/') || curr_dir === '') {
            httpGetAsync(base_url + curr_dir, null, show_files);
        } else {
            // Malformed url if curr_dir does not start with /
            httpGetAsync(base_url + '/' + curr_dir, null, show_files);
        }
    } else {
        httpGetAsync(base_url, null, show_files);
    }
}

function login() {
    let username = document.getElementById("username").value;
    let password = document.getElementById("password").value;

    const xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function () {
        if (this.readyState === 4) {
            if (xmlHttp.status === 200) {
                sessionStorage.setItem("authorization", btoa(username + ':' + JSON.parse(xmlHttp.responseText)['token']));

                create_base_view();
                create_logout_view();
                // create_tree_view_data('');
                url_changed();
            } else {
                create_error_view("Wrong username or password!");
            }
        }
    }

    xmlHttp.open("POST", base_url + '/login', true);
    xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xmlHttp.send('username=' + username + '&password=' + password);
}

function show_files(response, code) {
    if (code === 200) {
        // OK
        create_main_view(JSON.parse(response));
    } else if (code === 401) {
        // Not logged in
        sessionStorage.removeItem('authorization');
        create_error_view(`Your session is expired. <span onclick="this.parentElement.children[1].click(); create_login_view();">Log in again</span>`);
    } else {
        // Error
        response = JSON.parse(response);
        create_error_view(response['error'] + ` <span onclick="this.parentElement.children[1].click(); window.history.pushState('index', 'Filemanager', 'index.html?path='); url_changed();">Return to root directory</span>`);
    }
}

function one_dir_back() {
    let curr_dir = get_path();

    if (curr_dir !== null) {
        let dir = curr_dir.split('/');
        dir = dir.slice(0, dir.length - 1);
        curr_dir = dir.join('/');

        return curr_dir;
    }

    return '';
}

function save_file(filename, content) {
    document.getElementById('modal').style.display = 'none';
    httpPostAsync(base_url + filename, content, save_file_callback);
}

function download_file(filename) {
    let file = filename.split('/');
    saveFile(base_url + filename, file[file.length - 1]);
}

function remove_file(filename) {
    httpDeleteAsync(base_url + filename, null, remove_callback);
}

function add_folder() {
    document.getElementById('modal_title').innerText = 'Create Folder';

    document.getElementsByClassName("modal_content")[0].innerHTML = `<input id="input" placeholder="Name" style="width: calc(100% - 8px); margin-bottom: 10px;">
        <button onclick="console.log(document.getElementById('input').value.trim())" type="button" value="Save">Save</button>
        <button onclick="document.getElementById('modal').style.display = 'none'" type="button" value="Discard">Discard</button>`;

    document.getElementById('modal').style.display = 'block';
}

function add_file() {
    document.getElementById('modal_title').innerText = 'Create File';

    document.getElementsByClassName("modal_content")[0].innerHTML = `
        <input id="input" placeholder="Name" style="width: calc(100% - 8px); margin-bottom: 10px;">
        <textarea id="textarea" style="width: calc(100% - 8px); height: 90%"></textarea>
        <button onclick="create_text_file();" type="button" value="Save">Save</button>
        <button onclick="document.getElementById('modal').style.display = 'none'" type="button" value="Discard">Discard</button>
    `;

    document.getElementById('modal').style.display = 'block';
}

function create_text_file() {
    let path = get_path();
    if (path === null) path = '';
    save_file(path + '/' + document.getElementById('input').value.trim(), document.getElementById('textarea').value.trim());
}

function get_path() {
    return findGetParameter('path');
}