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 () {
        sessionStorage.removeItem('authorization');
        location.reload();
    }
    document.getElementsByClassName('app-header')[0].appendChild(logout);
}

//
// function create_tree_view_data(curr_dir) {
//     let url = base_url + curr_dir;
//
//     const xmlHttp = new XMLHttpRequest();
//     xmlHttp.onreadystatechange = function () {
//         if (this.readyState === 4) {
//             if (xmlHttp.status === 200) {
//                 let data = JSON.parse(xmlHttp.responseText);
//
//                 for (let i = 0; i < data.length; i++) {
//                     if (data[i]['Type'] === 'dir') {
//                         file_path.push(curr_dir + '/' + data[i]['Name']);
//                         create_tree_view_data(curr_dir + '/' + data[i]['Name']);
//                     }
//                 }
//
//                 tree = file_path.reduce((arr, path) => addPath(path.split('/'), arr), [])[0]['children'];
//                 create_tree_view();
//             }
//         }
//     }
//
//     xmlHttp.open("GET", url, true);
//     xmlHttp.setRequestHeader('Authorization', 'Basic ' + sessionStorage.getItem('authorization'));
//     xmlHttp.send(null);
// }
//
// function addPath(pathcomponents, arr) {
//     let component = pathcomponents.shift()
//     let comp = arr.find(item => item.text === component)
//     if (!comp) {
//         comp = {text: component}
//         arr.push(comp)
//     }
//     if (pathcomponents.length) {
//         addPath(pathcomponents, comp.children || (comp.children = []))
//     }
//     return arr
// }
//
// function create_tree_view() {
//     let tree = document.createElement('div');
//     tree.innerHTML = `<ul id="tree_ul"></ul> `;
//
//     document.getElementById("tree").innerHTML = '';
//     create_list_view(this.tree, document.getElementById("tree"), '');
//
//     // Remove nested-class from root element
//     document.getElementsByTagName('ul')[0].classList.remove('nested')
//
//     let toggler = document.getElementsByClassName("folder");
//     for (let i = 0; i < toggler.length; i++) {
//         toggler[i].addEventListener("click", function () {
//             if (this.parentElement.querySelector(".nested") !== null) {
//                 this.parentElement.querySelector(".nested").classList.toggle("active");
//             }
//             this.classList.toggle("folder-open");
//         });
//     }
// }
//
// function tree_onclick(url) {
//     window.history.pushState('index', 'Filemanager', 'index.html?path=' + url);
//     url_changed();
// }
//
// function create_list_view(dataRoot, elementRoot, url) {
//     if (dataRoot) {
//         const list = document.createElement('ul');
//         list.classList.add('nested');
//         elementRoot.appendChild(list);
//
//         Object.keys(dataRoot).forEach(key => {
//             // // Create a text node and a list element to put it in
//             const listElement = document.createElement('li');
//             listElement.innerHTML = `<span class="folder" onclick="tree_onclick('${url}/${dataRoot[key].text}');">${dataRoot[key].text}</span>`;
//             list.appendChild(listElement);
//
//             // Continue recursively down now using the current list element
//             create_list_view(dataRoot[key]['children'], listElement, url + '/' + dataRoot[key].text);
//         });
//     }
// }

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";
}