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

function create_login_view() {
    let tmp = document.createElement('div');
    tmp.innerHTML = `<div id="login">
                <form>
                    <h1>Login</h1>
                    <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").appendChild(tmp.firstChild);
}

// function create_tree_view(data) {
//     let curr_dir = findGetParameter('path');
//     let path = curr_dir.split('/');
//
//     for (let i = 0; i < data.length; i++) {
//         if (tree[path[0]] === null) {
//             tree[path[0]] = {};
//         }
//
//         if (data[i]['Type'] === 'dir') {
//
//         }
//     }
//     console.log(data)
// }

function create_file_view(data) {
    let curr_dir = findGetParameter('path');

    let tmp = document.createElement('div');
    tmp.innerHTML = `<div id="wrapper1">
        <div id="tree">Div 1</div>
        <div id="files">
            <div id="path"></div>
            <table>
                <thead>
                    <tr>
                        <th>Icon</th>
                        <th>Name</th>
                        <th>Größe</th>
                        <th>Datum</th>
                    </tr>
                </thead>
                <tbody>
                    <tr id="back" style="cursor: pointer" onclick="window.history.pushState('index', 'Filemanager', 'index.html?path=' + one_dir_back()); url_listener()">
                        <td data-order="___"></td>
                        <td>..</td>
                        <td></td>
                        <td></td>
                    </tr>    
                </tbody>
            </table>
        </div>
        </div>`;

    // Folders
    for (let i = 0; i < data.length; i++) {
        if (data[i]['Type'] === 'dir') {
            let tmp1 = document.createElement('tr');
            tmp1.style = 'cursor: pointer;';
            tmp1.onclick = function () {
                if (curr_dir === null) curr_dir = '';
                window.history.pushState('index', 'Filemanager', 'index.html?path=' + curr_dir + '/' + data[i]['Name']);
                url_listener();
            };
            tmp1.innerHTML = `<td data-order="__"><span class="material-icon">folder</span></td>
                    <td>${data[i]['Name']}</td>
                    <td>--</td>
                    <td>--</td>`;
            tmp.getElementsByTagName('tbody')[0].appendChild(tmp1);
        }
    }

    // Files
    for (let i = 0; i < data.length; i++) {
        if (data[i]['Type'] !== 'dir') {
            let tmp1 = document.createElement('tr');
            tmp1.style = 'cursor: pointer;';
            tmp1.onclick = function () {
                if (curr_dir === null) curr_dir = '';
                load_file(curr_dir, data[i]['Name']);
            };
            tmp1.innerHTML = `<td data-order="__"><span class="material-icon">description</span></td>
                    <td>${data[i]['Name']}</td>
                    <td>--</td>
                    <td>--</td>`;
            tmp.getElementsByTagName('tbody')[0].appendChild(tmp1);
        }
    }

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

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

    document.getElementById("wrapper").appendChild(tmp.firstChild);
}