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

let base_url = 'http://localhost:8080'; //'http://192.168.178.98:8080';
let file_path = [];
let timeout = null;

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

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

function path_changed() {
    let curr_dir = get_curr_path();
    httpGetAsync(base_url + curr_dir, null, show_files);
}

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

    httpPostAsync(base_url + '/login', 'username=' + username + '&password=' + password, function (response, code) {
        if (code === 200) {
            sessionStorage.setItem("authorization", btoa(username + ':' + JSON.parse(response)['token']));

            create_base_view();
            create_logout_view();
            create_tree_data('');
            path_changed();

            timeout = startTimeout();
        } else if (code === 401) {
            create_error_view("Wrong username or password!");
        } else {
            try_to_parse_error(response);
        }
    });
}

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
        try_to_parse_error(response);
    }
}

function one_dir_back() {
    let curr_dir = get_curr_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) {
    remove_modal();
    httpPostAsync(base_url + filename, 'content=' + btoa(content), function (response, code) {
        if (code === 200) {
            create_success_view("Saved file successfully");
        } else {
            try_to_parse_error(response);
        }
    });
}

function add_folder() {
    let content = `<input id="input" placeholder="Name" style="width: 100%; margin: 10px 0 10px 0;">`;
    let footer = `<button onclick="api_create_folder(document.getElementById('input').value.trim())" type="button" value="Save">Save</button>
                  <button onclick="remove_modal();" type="button" value="Discard">Discard</button>`;
    create_modal('Create Folder', content, footer);
}

function add_file() {
    let content = `<div style="width: 100%; height: max-content;">
                       <input id="input" placeholder="Name" style="width: calc(100% - 8px); margin: 10px 0 10px 0;">
                       <textarea id="textarea" placeholder="Content..." style="width: calc(100% - 8px); height: 500px"></textarea>
                   </div>`;
    let footer = `<button onclick="save_file(get_curr_path() + '/' + document.getElementById('input').value.trim(), document.getElementById('textarea').value.trim()); path_changed();" type="button" value="Save">Save</button>
                  <button onclick="remove_modal();" type="button" value="Discard">Discard</button>`;
    create_modal('Create File', content, footer);
}

function upload_file() {
    let content = `<form enctype="multipart/form-data"><input type="file" id="newFile" name="newFile" style="width: 100%; margin: 10px 0 10px 0;"></form><progress style="width: 100%;" min=0 max=100 value="0" id="upload_progress"/>`;
    let footer = `<button onclick="api_upload_file();" type="button" value="Save">Save</button>
                  <button onclick="remove_modal();" type="button" value="Discard">Discard</button>`;
    create_modal('Upload File', content, footer);
}

function api_create_folder(name) {
    httpPostAsync(base_url + get_curr_path() + '/' + name, 'type=dir', function (response, code) {
        remove_modal();
        path_changed();

        if (code === 200) {
            create_success_view('Created directory successfully');
        } else {
            try_to_parse_error(response);
        }
    });
}

function api_upload_file() {
    let formData = new FormData(document.getElementById('modal_content').children[0]);
    let filename = document.getElementById('modal_content').children[0].children[0].files[0].name;
    httpUploadAsync(base_url + get_curr_path() + '/' + filename, formData, function () {
        remove_modal();
        path_changed();
    });
}

function get_curr_path() {
    let curr_dir = findGetParameter('path');
    if (curr_dir === null) {
        curr_dir = '';
    }

    if (!curr_dir.startsWith('/') && curr_dir !== '') {
        // Malformed url if curr_dir does not start with /
        curr_dir = '/' + curr_dir;
    }

    if(curr_dir === '') curr_dir = '/';

    return curr_dir;
}