- logout

- directory tree
- file icons
- show file dialog
- more

Frontend/static/js/index.js

@@ -1,11 +1,12 @@
-tree = [];
+file_path = [];
+tree = {};
 
 window.addEventListener('load', function () {
-    console.log('All assets are loaded');
-
     if (sessionStorage.getItem("authorization") !== null) {
         console.log('Logged in');
+        create_logout_view();
         url_listener();
+        create_tree_view_data('');
     } else {
         console.log('Not logged in');
         create_login_view();
@@ -20,7 +21,11 @@ function url_listener() {
     let curr_dir = findGetParameter('path');
 
     if (curr_dir !== null) {
-        httpGetAsync('http://localhost:8080' + curr_dir, null, show_files);
+        if(curr_dir.startsWith('/') || curr_dir === '') {
+            httpGetAsync('http://localhost:8080' + curr_dir, null, show_files);
+        } else {
+            create_error_view('directory does not exist');
+        }
     } else {
         httpGetAsync('http://localhost:8080', null, show_files);
     }
@@ -37,7 +42,9 @@ function login() {
                 console.log(username + ':' + JSON.parse(xmlHttp.responseText)['token'])
                 sessionStorage.setItem("authorization", btoa(username + ':' + JSON.parse(xmlHttp.responseText)['token']));
 
-                httpGetAsync('http://localhost:8080', null, show_files);
+                create_logout_view();
+
+                url_listener();
             }
         }
     }
@@ -48,21 +55,22 @@ function login() {
 }
 
 function show_files(response, code) {
-    document.getElementById("wrapper").innerHTML = '';
     if (code === 200) {
         // OK
-        console.log(code);
-        console.log(JSON.parse(response));
         create_file_view(JSON.parse(response));
     } else if (code === 401) {
         // Not logged in
         sessionStorage.removeItem('authorization');
-        // location.reload();
+        create_login_view();
     } else {
         // Error
         console.error(code);
         console.error(JSON.parse(response));
-        sessionStorage.removeItem('authorization');
+
+        response = JSON.parse(response);
+        create_error_view(response['error']);
+
+        // sessionStorage.removeItem('authorization');
         // location.reload();
     }
 }
@@ -70,35 +78,21 @@ function show_files(response, code) {
 function one_dir_back() {
     let curr_dir = findGetParameter('path');
 
-    let dir = curr_dir.split('/');
-    dir = dir.slice(0, dir.length - 1);
-    curr_dir = dir.join('/');
+    if(curr_dir !== null) {
+        let dir = curr_dir.split('/');
+        dir = dir.slice(0, dir.length - 1);
+        curr_dir = dir.join('/');
 
-    return curr_dir;
+        return curr_dir;
+    }
+
+    return '';
 }
 
-// function change_dir(name) {
-//     let curr_dir = findGetParameter('path');
-//
-//     if(curr_dir === null) {
-//         curr_dir = '';
-//     }
-//
-//     if (name === '..') {
-//         let dir = curr_dir.split('/');
-//         dir = dir.slice(0, dir.length - 1);
-//         curr_dir = dir.join('/');
-//
-//         httpGetAsync('http://localhost:8080' + curr_dir, null, show_files);
-//         window.history.pushState('index', 'Filemanager', 'index.html?path=' + curr_dir);
-//     } else {
-//         httpGetAsync('http://localhost:8080' + curr_dir + '/' + name, null, show_files);
-//         window.history.pushState('index', 'Filemanager', 'index.html?path=' + curr_dir + '/' + name);
-//     }
-// }
-
-function load_file(name) {
+function load_file(name, type) {
     let curr_dir = findGetParameter('path');
 
-    console.log(curr_dir + '/' + name);
+    if (curr_dir === null) curr_dir = '';
+
+    show_file_view(curr_dir + '/' + name, type);
 }

Frontend/static/js/tools.js

@@ -6,7 +6,6 @@ function httpGetAsync(url, data, callback) { // data includes auth
         }
     }
 
-    console.log(url)
     xmlHttp.open("GET", url, true);
     xmlHttp.setRequestHeader('Authorization', 'Basic ' + sessionStorage.getItem('authorization'));
     xmlHttp.send(null);

Frontend/static/js/views.js

@@ -16,101 +16,276 @@ function create_login_view() {
                     </div>
                 </form>
             </div>`;
-    document.getElementById("wrapper").appendChild(tmp.firstChild);
+    document.getElementById("login").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_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 = 'http://localhost:8080' + 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_listener();
+}
+
+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
+            console.log(url + '/' + dataRoot[key].text)
+            create_list_view(dataRoot[key]['children'], listElement, url + '/' + dataRoot[key].text);
+        });
+    }
+}
 
 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>`;
+    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>
+                <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>
+                </tr>    
+            </tbody>
+        </table>`;
 
     // 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 () {
+            let folder = document.createElement('tr');
+            folder.style = 'cursor: pointer;';
+            folder.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>
+            folder.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);
+                    <td>directory</td>`;
+            files.getElementsByTagName('tbody')[0].appendChild(folder);
         }
     }
 
     // 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']);
+            let file = document.createElement('tr');
+            file.style = 'cursor: pointer;';
+            file.onclick = function () {
+                load_file(data[i]['Name'], data[i]['Type']);
             };
-            tmp1.innerHTML = `<td data-order="__"><span class="material-icon">description</span></td>
+
+            let icon = 'article';
+            if (data[i]['Type'].indexOf("application") >= 0) {
+                icon = 'apps';
+            } else if (data[i]['Type'].indexOf("audio") >= 0) {
+                icon = 'music_note';
+            } else if (data[i]['Type'].indexOf("drawing") >= 0) {
+                icon = 'gesture';
+            } else if (data[i]['Type'].indexOf("image") >= 0) {
+                icon = 'image';
+            } else if (data[i]['Type'].indexOf("message") >= 0) {
+                icon = 'mail';
+            } else if (data[i]['Type'].indexOf("multipart") >= 0) {
+                icon = 'note_add';
+            } else if (data[i]['Type'].indexOf("text") >= 0) {
+                icon = 'description';
+            } else if (data[i]['Type'].indexOf("video") >= 0) {
+                icon = 'movie';
+            }
+
+            file.innerHTML = `<td data-order="__"><span class="material-icon">${icon}</span></td>
                     <td>${data[i]['Name']}</td>
-                    <td>--</td>
-                    <td>--</td>`;
-            tmp.getElementsByTagName('tbody')[0].appendChild(tmp1);
+                    <td>${data[i]['Type']}</td>`;
+            files.getElementsByTagName('tbody')[0].appendChild(file);
         }
     }
 
     // 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>`;
+    let s = `<div onclick="window.history.pushState('index', 'Filemanager', 'index.html?path='); url_listener()" 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++) {
-            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>`);
+            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="z-index: ${folders.length - i}"><span>${folders[i]}</span></div>`);
         }
     }
-    tmp1.innerHTML = s;
-    tmp.getElementsByTagName('div')[3].appendChild(tmp1);
+    files.getElementsByTagName('div')[0].innerHTML = s;
 
-    document.getElementById("wrapper").appendChild(tmp.firstChild);
+    document.getElementById("files").innerHTML = '';
+    document.getElementById("files").appendChild(files);
+}
+
+function create_error_view(text) {
+    let error = document.createElement('div');
+    error.innerHTML = `<div class="error">
+            <span class="text">${text}. Go <span style="cursor:pointer;" onclick="window.history.back(); document.getElementById('error_wrapper').innerHTML = '';">back</span></span>
+            <span><i class="material-icons" onclick="document.getElementById('error_wrapper').innerHTML = '';">close</i></span>
+        </div>`;
+
+    document.getElementById('error_wrapper').appendChild(error.firstChild);
+}
+
+function show_file_view(data, type) {
+    let modal = document.getElementById("file_view");
+    let title = document.getElementById("file_title");
+    let modal_content = document.getElementsByClassName("modal-content")[0];
+
+
+    if (type.indexOf("application") >= 0) {
+        modal_content.innerHTML = ``;
+    } else if (type.indexOf("audio") >= 0) {
+        httpGetAsync('http://localhost:8080' + data + '?format=base64', null, show_audio_data);
+    } else if (type.indexOf("drawing") >= 0) {
+        modal_content.innerHTML = ``;
+    } else if (type.indexOf("image") >= 0) {
+        httpGetAsync('http://localhost:8080' + data + '?format=base64', null, show_image_data);
+    } else if (type.indexOf("message") >= 0) {
+        modal_content.innerHTML = ``;
+    } else if (type.indexOf("multipart") >= 0) {
+        modal_content.innerHTML = ``;
+    } else if (type.indexOf("text") >= 0) {
+        httpGetAsync('http://localhost:8080' + data, null, show_text_data);
+    } else if (type.indexOf("video") >= 0) {
+        httpGetAsync('http://localhost:8080' + data + '?format=base64', null, show_video_data);
+    } else if (type.indexOf("workbook") >= 0) {
+        modal_content.innerHTML = ``;
+    } else if (type.indexOf("x-world") >= 0) {
+        modal_content.innerHTML = ``;
+    } else {
+        modal_content.innerHTML = ``;
+    }
+
+    title.innerText = `File: ${data}`;
+
+    modal.style.display = "block";
+}
+
+function show_image_data(response, code) {
+    if (code === 200) {
+        document.getElementsByClassName("modal-content")[0].innerHTML = `<img style="width: 100%" src="data:image/png;base64, ${response}" alt="Image">`;
+    } else {
+        console.log(code + " " + response);
+    }
+}
+
+function show_text_data(response, code) {
+    if (code === 200) {
+        document.getElementsByClassName("modal-content")[0].innerHTML = `<textarea style="width: calc(100% - 8px); height: 90%">${response}</textarea>
+        <button type="button" value="Save">Save</button>
+        <button type="button" value="SaveAs">Save As</button>
+        <button type="button" value="Discard">Discard</button>`;
+    } else {
+        console.log(code + " " + response);
+    }
+}
+
+function show_audio_data(response, code) {
+    if (code === 200) {
+        document.getElementsByClassName("modal-content")[0].innerHTML = `<audio controls>
+            <source src="data:audio;base64, ${response}">
+                Your browser does not support the audio element.
+        </audio>`;
+    } else {
+        console.log(code + " " + response);
+    }
+}
+
+function show_video_data(response, code) {
+    if (code === 200) {
+        document.getElementsByClassName("modal-content")[0].innerHTML = `<video controls style="width: 100%;">
+            <source src="data:video;base64, ${response}">
+                Your browser does not support the audio element.
+        </video>`;
+    } else {
+        console.log(code + " " + response);
+    }
 }