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

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

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

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 = '';
    document.getElementById("wrapper").appendChild(tmp.firstChild);
}

function create_logout_view() {
    let logout = document.createElement('div');
    logout.classList.add('logout');
    logout.innerText = 'Logout';
    logout.onclick = function () {
        httpGetAsync(base_url + '/logout', null, logout_callback);
    }
    document.getElementsByClassName('app-header')[0].appendChild(logout);
}

function create_main_view(data) {
    let curr_dir = get_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 !== null && curr_dir !== '') {
        files.getElementsByTagName('tbody')[0].appendChild(add_table_row("", "..", "", "", false, function () {
            window.history.pushState('index', 'Filemanager', 'index.html?path=' + one_dir_back());
            url_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 () {
                window.history.pushState('index', 'Filemanager', 'index.html?path=' + curr_dir + '/' + data[i]['Name']);
                url_changed();
            }));
        }
    }

    // Files
    for (let i = 0; i < data.length; i++) {
        if (data[i]['Type'] !== 'dir') {
            let icon = '';
            switch (data[i]['Type'].split('/')[0]) {
                case 'application':
                    icon = 'apps';
                    break;
                case 'audio':
                    icon = 'music_note';
                    break;
                case 'drawing':
                    icon = 'gesture';
                    break;
                case 'image':
                    icon = 'image';
                    break;
                case 'message':
                    icon = 'mail';
                    break;
                case 'multipart':
                    icon = 'note_add';
                    break;
                case 'text':
                    icon = 'description';
                    break;
                case 'video':
                    icon = 'movie';
                    break;
                default:
                    icon = 'article';
                    break;
            }

            files.getElementsByTagName('tbody')[0].appendChild(add_table_row(icon, data[i]['Name'], data[i]['Type'], curr_dir, true, function () {
                show_file_view(curr_dir + '/' + data[i]['Name'], data[i]['Type']);
            }));
        }
    }

    // Path
    let s = `<div onclick="window.history.pushState('index', 'Filemanager', 'index.html?path='); url_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('/')}'); url_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) {
    let modal = document.getElementById("modal");
    let title = document.getElementById("modal_title");
    let modal_content = document.getElementsByClassName("modal_content")[0];


    switch (type.split('/')[0]) {
        case 'application':
            modal_content.innerHTML = ``;
            break;
        case 'audio':
            httpGetAsync(base_url + data + '?format=base64', null, show_audio_callback);
            break;
        case 'drawing':
            modal_content.innerHTML = ``;
            break;
        case 'image':
            httpGetAsync(base_url + data + '?format=base64', null, show_image_callback);
            break;
        case 'message':
            modal_content.innerHTML = ``;
            break;
        case 'multipart':
            modal_content.innerHTML = ``;
            break;
        case 'text':
            httpGetAsync(base_url + data, null, show_text_callback);
            break;
        case 'video':
            httpGetAsync(base_url + data + '?format=base64', null, show_video_callback);
            break;
        default:
            modal_content.innerHTML = ``;
            break;
    }

    title.innerHTML = `File: <span>${data}</span>`;

    modal.style.display = "block";
}