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

function create_base_view() {
    let tmp;
    tmp = document.createElement('div');
    tmp.innerHTML = `<div id="tree"></div>
        <div id="files"></div>`;

    document.getElementById("wrapper").innerHTML = tmp.innerHTML;


    tmp = document.createElement('div');
    tmp.innerHTML = `<div id='context_menu'>
                         <button id="download" onclick="download_file(this.parentElement.getAttribute('data-file-name'), this.parentElement.getAttribute('data-mimetype'));">Download</button>
                         <button id="remove" onclick="remove_file(this.parentElement.getAttribute('data-file-name'));">Remove</button>
                     </div>
    
                     <div class="new">
                         <button class="material-icon new_btn" type="button">add</button>
                         <div class="new_content">
                             <button class="material-icon" onclick="add_folder();" type="button">folder</button>
                             <button class="material-icon" onclick="add_file();" type="button">description</button>
                             <button class="material-icon" onclick="upload_file();" type="button">file_upload</button>
                         </div>
                     </div>`
    document.getElementsByTagName('main')[0].appendChild(tmp);
}

function create_login_view() {
    let tmp = document.createElement('div');
    tmp.innerHTML = `<div id="login">
                <form>
                    <h1>Login</h1>
                    <span id="error"></span>
                    <div>
                        <label for="username"></label>
                        <input type="text" name="username" id="username" placeholder="Username" value="admin">
                    </div>
                    <div>
                        <label for="password"></label>
                        <input type="password" name="password" id="password" placeholder="Password" value="admin">
                    </div>
                    <div>
                        <button type="button" value="Login" onclick="login();">Login</button>
                    </div>
                </form>
            </div>`;
    document.getElementById("wrapper").innerHTML = tmp.innerHTML;
}

function create_logout_view() {
    let logout = document.createElement('div');
    logout.id = 'logout';
    logout.innerText = 'Logout';
    logout.onclick = function () {
        httpGetAsync(base_url + '/logout', null, function (response, code) {
            if (code === 200) {
                sessionStorage.removeItem('authorization');
                document.getElementById('logout').remove();
                document.getElementById('context_menu').parentElement.remove();
                create_login_view();
            } else {
                try_to_parse_error(response);
            }
        });
    }
    document.getElementsByClassName('app-header')[0].appendChild(logout);
}

function get_icon(type) {
    switch (type.split('/')[0]) {
        case 'application':
            return 'apps';
        case 'audio':
            return 'music_note';
        case 'drawing':
            return 'gesture';
        case 'image':
            return 'image';
        case 'message':
            return 'mail';
        case 'multipart':
            return 'note_add';
        case 'text':
            return 'description';
        case 'video':
            return 'movie';
        default:
            return 'article';
    }
}

function create_main_view(data) {
    let curr_dir = get_curr_path();

    let files = document.createElement('div');
    files.innerHTML = `<div id="path"></div>
        <table>
            <thead>
                <tr>
                    <th></th>
                    <th>Name</th>
                    <th>Type</th>
                </tr>
            </thead>
            <tbody>
                    
            </tbody>
        </table>`;

    // Previous directory
    if (curr_dir !== '/') {
        files.getElementsByTagName('tbody')[0].appendChild(add_table_row("", "..", "", "", false, function () {
            window.history.pushState('index', 'Filemanager', 'index.html?path=' + one_dir_back());
            path_changed();
        }));
    }

    // Folders
    for (let i = 0; i < data.length; i++) {
        if (data[i]['Type'] === 'dir') {
            files.getElementsByTagName('tbody')[0].appendChild(add_table_row("folder", data[i]['Name'], "directory", curr_dir, true, function () {
                let url = ''
                if (curr_dir === '/') {
                    url = 'index.html?path=' + curr_dir + data[i]['Name'];
                } else {
                    url = 'index.html?path=' + curr_dir + '/' + data[i]['Name'];
                }
                window.history.pushState('index', 'Filemanager', url);
                path_changed();
            }));
        }
    }

    // Files
    for (let i = 0; i < data.length; i++) {
        if (data[i]['Type'] !== 'dir') {
            files.getElementsByTagName('tbody')[0].appendChild(add_table_row(get_icon(data[i]['Type']), data[i]['Name'], data[i]['Type'], curr_dir, true, function () {
                let url = ''
                if (curr_dir === '/') {
                    url = '/' + data[i]['Name'];
                } else {
                    url = curr_dir + '/' + data[i]['Name'];
                }
                show_file_view(url, data[i]['Type']);
            }));
        }
    }

    // Path
    let s = `<div onclick="window.history.pushState('index', 'Filemanager', 'index.html?path='); path_changed()" class="arrow-pointer" style="z-index: 1000"><span>/</span></div>`;

    if (curr_dir !== null) {
        let folders = curr_dir.split('/');
        for (let i = 1; i < folders.length; i++) {
            if (folders[i] !== '') s = s.concat(`<div onclick="window.history.pushState('index', 'Filemanager', 'index.html?path=${folders.slice(0, i + 1).join('/')}'); path_changed()" class="arrow-pointer" style="z-index: ${folders.length - i}"><span>${folders[i]}</span></div>`);
        }
    }
    files.getElementsByTagName('div')[0].innerHTML = s;

    document.getElementById("files").innerHTML = '';
    document.getElementById("files").appendChild(files);

    // Close contextmenu
    document.getElementsByTagName('body')[0].addEventListener('click', function () {
        document.getElementById('context_menu').style.display = 'none';
    });
}

function add_table_row(icon, name, type, path, context, click_function) {
    let tr = document.createElement('tr');

    tr.style.cursor = 'pointer';
    tr.onclick = click_function;
    if (context) {
        tr.addEventListener("contextmenu", function (e) {
            document.getElementById('context_menu').setAttribute('data-file-name', path + '/' + name);
            document.getElementById('context_menu').setAttribute('data-mimetype', type);
            document.getElementById('context_menu').style.display = 'block';
            document.getElementById('context_menu').style.left = e.pageX + 'px';
            document.getElementById('context_menu').style.top = e.pageY + 'px';
            e.preventDefault();
        });
    }
    tr.innerHTML = `<tr>
                        <td><span class="material-icon">${icon}</span></td>
                        <td>${name}</td>
                        <td>${type}</td>
                    </tr>`;
    return tr;
}

function show_file_view(data, type) {
    switch (type.split('/')[0]) {
        case 'audio':
            create_modal(`File: <span>${data}</span>`, ``);
            httpGetAsync(base_url + data + '?format=base64', null, function (response, code) {
                if (code === 200) {
                    change_modal_content(`<audio controls><source src="data:audio;base64, ${response}">Your browser does not support the audio element.</audio>`);
                } else {
                    try_to_parse_error(response);
                }
            });
            break;
        case 'image':
            create_modal(`File: <span>${data}</span>`, ``);
            httpGetAsync(base_url + data + '?format=base64', null, function (response, code) {
                if (code === 200) {
                    change_modal_content(`<img style="width: 100%" src="data:image/png;base64, ${response}" alt="Image">`); /* TODO */
                } else {
                    try_to_parse_error(response);
                }
            });
            break;
        case 'text':
            create_modal(`File: <span>${data}</span>`, ``, `<button onclick="save_file(document.getElementById('modal_title').children[0].innerHTML, document.getElementById('textarea').value.trim())" type="button" value="Save">Save</button><button onclick="remove_modal();" type="button" value="Discard">Discard</button>`);
            httpGetAsync(base_url + data, null, function (response, code) {
                if (code === 200) {
                    change_modal_content(`<div style="width: 100%; height: 100%"><textarea id="textarea" style="width: calc(100% - 8px); height: calc(100% - 8px)">${response}</textarea></div>`);
                } else {
                    try_to_parse_error(response);
                }
            });
            break;
        case 'video':
            create_modal(`File: <span>${data}</span>`, ``);
            httpGetAsync(base_url + data + '?format=base64', null, function (response, code) {
                if (code === 200) {
                    change_modal_content(`<video controls style="width: 100%; height: 100%;"><source src="data:video;base64, ${response}">Your browser does not support the audio element.</video>`);
                } else {
                    try_to_parse_error(response);
                }
            });
            break;
        default:
            create_modal(`File: <span>${data}</span>`, `Cannot open file!`);
            break;
    }
}