- Refactoring

- Code cleanup
- Reformatting

Frontend/index.html

@@ -7,14 +7,15 @@
     <script src="static/js/views.js"></script>
     <script src="static/js/tools.js"></script>
     <script src="static/js/alert.js"></script>
+    <script src="static/js/generate_directory_tree.js"></script>
     <script src="static/js/callbacks.js"></script>
     <script src="static/js/index.js"></script>
 
     <link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
 
-    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
+    <link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
-    <link rel="icon" href="favicon.ico" type="image/x-icon">
+    <link href="favicon.ico" rel="icon" type="image/x-icon">
 
     <link href="static/css/components.css" rel="stylesheet">
     <link href="static/css/popup.css" rel="stylesheet">
@@ -40,11 +41,12 @@
         <button id="remove" onclick="remove_file(this.parentElement.getAttribute('data-file-name'));">Remove</button>
     </div>
 
-    <div id="modal" class="modal">
+    <div class="modal" id="modal">
         <div id="content">
             <div class="modal_header">
                 <h3 id="modal_title"></h3>
-                <span><i class="material-icons" onclick="document.getElementById('modal').style.display = 'none'">close</i></span>
+                <span><i class="material-icons"
+                         onclick="document.getElementById('modal').style.display = 'none'">close</i></span>
             </div>
             <hr>
             <div class="modal_content">
@@ -54,10 +56,10 @@
     </div>
 
     <div class="new">
-        <button type="button" class="material-icon new_btn">add</button>
+        <button class="material-icon new_btn" type="button">add</button>
         <div class="new_content">
-            <button onclick="add_folder();" type="button" class="material-icon">folder</button>
+            <button class="material-icon" onclick="add_folder();" type="button">folder</button>
-            <button onclick="add_file();" type="button" class="material-icon">description</button>
+            <button class="material-icon" onclick="add_file();" type="button">description</button>
         </div>
     </div>
 

Frontend/static/css/dropdown.css

@@ -1,6 +1,6 @@
 #context_menu {
     display: none;
-    z-index:100000;
+    z-index: 100000;
     position: absolute;
     background-color: rgb(229, 229, 229);
     border-width: 1px;
@@ -10,10 +10,11 @@
     width: 12em;
     font-size: 12px;
     overflow: hidden;
-    white-space:nowrap;
+    white-space: nowrap;
     list-style: none;
     margin: 0;
 }
+
 #context_menu button {
     display: block;
     padding: 5px;
@@ -24,11 +25,13 @@
     text-align: left;
     color: #333;
 }
+
 #context_menu button:hover {
     background-color: #DDD;
     cursor: pointer;
     color: #000;
 }
+
 #context_menu button > span {
     display: inline;
     position: absolute;

Frontend/static/css/popup.css

@@ -8,7 +8,7 @@
     width: 100%;
     height: 100%;
     overflow: auto;
-    background-color: rgba(0,0,0, 0.8);
+    background-color: rgba(0, 0, 0, 0.8);
 }
 
 #content {

Frontend/static/js/callbacks.js

@@ -1,3 +1,12 @@
+function logout_callback(response, code) {
+    if (code === 200) {
+        sessionStorage.removeItem('authorization');
+        location.reload();
+    } else {
+        create_error_view(response['error'] + ` <span onclick="this.parentElement.children[1].click(); window.history.pushState('index', 'Filemanager', 'index.html?path='); url_changed();">Return to root directory</span>`);
+    }
+}
+
 function remove_callback(response, code) {
     if (code === 200) {
         create_success_view("Successfully deleted.");

Frontend/static/js/generate_directory_tree.js

@@ -0,0 +1,85 @@
+let tree = {};
+
+function create_tree_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_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 create_tree_view() {
+    let html_tree = document.createElement('div');
+    html_tree.innerHTML = `<ul id="tree_ul"></ul>`;
+
+    document.getElementById("tree").innerHTML = '';
+    create_list_view(tree, document.getElementById("tree"), '');
+
+    // Remove nested-class from root element
+    document.getElementsByTagName('ul')[0].classList.remove('nested')
+
+    let icon = document.getElementsByClassName("folder");
+    for (let i = 0; i < icon.length; i++) {
+        icon[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 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
+}

Frontend/static/js/index.js

@@ -1,13 +1,12 @@
 base_url = 'http://localhost:8080'; //'http://192.168.178.98:8080';
 file_path = [];
-tree = {};
 
 window.addEventListener('load', function () {
     if (sessionStorage.getItem("authorization") !== null) {
         console.log('Logged in');
         create_base_view();
         create_logout_view();
-        // create_tree_view_data('');
+        create_tree_data('');
         url_changed();
     } else {
         console.log('Not logged in');
@@ -46,10 +45,12 @@ function login() {
 
                 create_base_view();
                 create_logout_view();
-                // create_tree_view_data('');
+                create_tree_data('');
                 url_changed();
-            } else {
+            } else if (xmlHttp.status === 401) {
                 create_error_view("Wrong username or password!");
+            } else {
+                create_error_view("Unknown error!");
             }
         }
     }
@@ -69,8 +70,12 @@ function show_files(response, code) {
         create_error_view(`Your session is expired. <span onclick="this.parentElement.children[1].click(); create_login_view();">Log in again</span>`);
     } else {
         // Error
+        try {
             response = JSON.parse(response);
             create_error_view(response['error'] + ` <span onclick="this.parentElement.children[1].click(); window.history.pushState('index', 'Filemanager', 'index.html?path='); url_changed();">Return to root directory</span>`);
+        } catch (e) {
+            create_error_view(`Unrecoverable error! <span onclick="this.parentElement.children[1].click(); window.history.pushState('index', 'Filemanager', 'index.html?path='); url_changed();">Return to root directory</span>`);
+        }
     }
 }
 

Frontend/static/js/tools.js

@@ -62,20 +62,6 @@ function httpDeleteAsync(url, data, callback) {
     xmlHttp.send();
 }
 
-function httpPutAsync(url, data, callback) {
-    const xmlHttp = new XMLHttpRequest();
-    xmlHttp.onreadystatechange = function () {
-        if (this.readyState === 4) {
-            callback(xmlHttp.responseText, xmlHttp.status);
-        }
-    }
-
-    xmlHttp.open("PUT", url, true);
-    xmlHttp.setRequestHeader('Authorization', 'Basic ' + sessionStorage.getItem('authorization'));
-    xmlHttp.setRequestHeader('Content-Type', 'application/json');
-    xmlHttp.send(JSON.stringify(data));
-}
-
 function findGetParameter(parameterName) {
     let result = null,
         tmp = [];

Frontend/static/js/views.js

@@ -34,97 +34,11 @@ function create_logout_view() {
     logout.classList.add('logout');
     logout.innerText = 'Logout';
     logout.onclick = function () {
-        sessionStorage.removeItem('authorization');
+        httpGetAsync(base_url + '/logout', null, logout_callback);
-        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();