- Download files

- Remove files
- Create files
- Refactoring
- Bug fix

Frontend/static/js/alert.js

@@ -0,0 +1,21 @@
+function create_error_view(text) {
+    let error = document.createElement('div');
+    error.innerHTML = `<div class="alert alert-danger" onload="setTimeout(function() {console.log(this);}, 1000);">
+                ${text}
+                <button type="button" onclick="this.parentElement.remove()" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+            </div>`;
+
+    document.getElementById('error_wrapper').innerHTML = '';
+    document.getElementById('error_wrapper').appendChild(error.firstChild);
+}
+
+function create_success_view(text) {
+    let error = document.createElement('div');
+    error.innerHTML = `<div class="alert alert-success" onload="setTimeout(function() {this.remove();}, 1000);">
+                ${text}
+                <button type="button" onclick="this.parentElement.remove()" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+            </div>`;
+
+    document.getElementById('error_wrapper').innerHTML = '';
+    document.getElementById('error_wrapper').appendChild(error.firstChild);
+}

Frontend/static/js/callbacks.js

@@ -0,0 +1,57 @@
+function remove_callback(response, code) {
+    if (code === 200) {
+        create_success_view("Successfully deleted.");
+        url_changed();
+    } else {
+        create_error_view(response);
+    }
+}
+
+function save_file_callback(response, code) {
+    if (code === 200) {
+        create_success_view("Saved file successfully");
+    } else {
+        create_error_view(JSON.parse(response)['error']);
+    }
+}
+
+
+function show_image_callback(response, code) {
+    if (code === 200) {
+        document.getElementsByClassName("modal_content")[0].innerHTML = `<img style="width: 100%" src="data:image/png;base64, ${response}" alt="Image">`;
+    } 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 show_text_callback(response, code) {
+    if (code === 200) {
+        document.getElementsByClassName("modal_content")[0].innerHTML = `<textarea id="textarea" style="width: calc(100% - 8px); height: 90%">${response}</textarea>
+        <button onclick="save_file(document.getElementById('modal_title').children[0].innerHTML, document.getElementById('textarea').value.trim())" type="button" value="Save">Save</button>
+        <button onclick="document.getElementById('modal').style.display = 'none'" type="button" value="Discard">Discard</button>`;
+    } 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 show_audio_callback(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 {
+        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 show_video_callback(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 {
+        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>`);
+    }
+}

Frontend/static/js/index.js

@@ -1,4 +1,4 @@
-base_url = 'http://192.168.178.98:8080'; // http://localhost:8080';
+base_url = 'http://localhost:8080'; //'http://192.168.178.98:8080';
 file_path = [];
 tree = {};
 
@@ -7,8 +7,8 @@ window.addEventListener('load', function () {
         console.log('Logged in');
         create_base_view();
         create_logout_view();
-        url_listener();
-        create_tree_view_data('');
+        // create_tree_view_data('');
+        url_changed();
     } else {
         console.log('Not logged in');
         create_login_view();
@@ -16,17 +16,18 @@ window.addEventListener('load', function () {
 });
 
 window.addEventListener('popstate', function () {
-    url_listener();
+    url_changed();
 });
 
-function url_listener() {
-    let curr_dir = findGetParameter('path');
+function url_changed() {
+    let curr_dir = get_path();
 
     if (curr_dir !== null) {
-        if(curr_dir.startsWith('/') || curr_dir === '') {
+        if (curr_dir.startsWith('/') || curr_dir === '') {
             httpGetAsync(base_url + curr_dir, null, show_files);
         } else {
-            create_error_view('directory does not exist');
+            // Malformed url if curr_dir does not start with /
+            httpGetAsync(base_url + '/' + curr_dir, null, show_files);
         }
     } else {
         httpGetAsync(base_url, null, show_files);
@@ -45,8 +46,10 @@ function login() {
 
                 create_base_view();
                 create_logout_view();
-                url_listener();
-                create_tree_view_data('');
+                // create_tree_view_data('');
+                url_changed();
+            } else {
+                create_error_view("Wrong username or password!");
             }
         }
     }
@@ -59,28 +62,22 @@ function login() {
 function show_files(response, code) {
     if (code === 200) {
         // OK
-        create_file_view(JSON.parse(response));
+        create_main_view(JSON.parse(response));
     } else if (code === 401) {
         // Not logged in
         sessionStorage.removeItem('authorization');
-        create_login_view();
+        create_error_view(`Your session is expired. <span onclick="this.parentElement.children[1].click(); create_login_view();">Log in again</span>`);
     } else {
         // Error
-        console.error(code);
-        console.error(JSON.parse(response));
-
         response = JSON.parse(response);
-        create_error_view(response['error']);
-
-        // sessionStorage.removeItem('authorization');
-        // location.reload();
+        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 one_dir_back() {
-    let curr_dir = findGetParameter('path');
+    let curr_dir = get_path();
 
-    if(curr_dir !== null) {
+    if (curr_dir !== null) {
         let dir = curr_dir.split('/');
         dir = dir.slice(0, dir.length - 1);
         curr_dir = dir.join('/');
@@ -91,10 +88,49 @@ function one_dir_back() {
     return '';
 }
 
-function load_file(name, type) {
-    let curr_dir = findGetParameter('path');
+function save_file(filename, content) {
+    document.getElementById('modal').style.display = 'none';
+    httpPostAsync(base_url + filename, content, save_file_callback);
+}
 
-    if (curr_dir === null) curr_dir = '';
+function download_file(filename) {
+    let file = filename.split('/');
+    saveFile(base_url + filename, file[file.length - 1]);
+}
 
-    show_file_view(curr_dir + '/' + name, type);
+function remove_file(filename) {
+    httpDeleteAsync(base_url + filename, null, remove_callback);
+}
+
+function add_folder() {
+    document.getElementById('modal_title').innerText = 'Create Folder';
+
+    document.getElementsByClassName("modal_content")[0].innerHTML = `<input id="input" placeholder="Name" style="width: calc(100% - 8px); margin-bottom: 10px;">
+        <button onclick="console.log(document.getElementById('input').value.trim())" type="button" value="Save">Save</button>
+        <button onclick="document.getElementById('modal').style.display = 'none'" type="button" value="Discard">Discard</button>`;
+
+    document.getElementById('modal').style.display = 'block';
+}
+
+function add_file() {
+    document.getElementById('modal_title').innerText = 'Create File';
+
+    document.getElementsByClassName("modal_content")[0].innerHTML = `
+        <input id="input" placeholder="Name" style="width: calc(100% - 8px); margin-bottom: 10px;">
+        <textarea id="textarea" style="width: calc(100% - 8px); height: 90%"></textarea>
+        <button onclick="create_text_file();" type="button" value="Save">Save</button>
+        <button onclick="document.getElementById('modal').style.display = 'none'" type="button" value="Discard">Discard</button>
+    `;
+
+    document.getElementById('modal').style.display = 'block';
+}
+
+function create_text_file() {
+    let path = get_path();
+    if (path === null) path = '';
+    save_file(path + '/' + document.getElementById('input').value.trim(), document.getElementById('textarea').value.trim());
+}
+
+function get_path() {
+    return findGetParameter('path');
 }

Frontend/static/js/tools.js

@@ -1,4 +1,4 @@
-function httpGetAsync(url, data, callback) { // data includes auth
+function httpGetAsync(url, data, callback) {
     const xmlHttp = new XMLHttpRequest();
     xmlHttp.onreadystatechange = function () {
         if (this.readyState === 4) {
@@ -11,6 +11,30 @@ function httpGetAsync(url, data, callback) { // data includes auth
     xmlHttp.send(null);
 }
 
+function saveFile(url, filename, mimetype) {
+    const xmlHttp = new XMLHttpRequest();
+    xmlHttp.onreadystatechange = function () {
+        if (this.readyState === 4) {
+            if (xmlHttp.status === 200) {
+                let element = document.createElement('a');
+                element.setAttribute('href', 'data:' + mimetype + ',' + encodeURIComponent(xmlHttp.responseText));
+                element.setAttribute('download', filename);
+
+                element.style.display = 'none';
+                document.body.appendChild(element);
+                element.click();
+                document.body.removeChild(element);
+            } else {
+                create_error_view("Error " + xmlHttp.status);
+            }
+        }
+    }
+
+    xmlHttp.open("GET", url, true);
+    xmlHttp.setRequestHeader('Authorization', 'Basic ' + sessionStorage.getItem('authorization'));
+    xmlHttp.send(null);
+}
+
 function httpPostAsync(url, data, callback) {
     const xmlHttp = new XMLHttpRequest();
     xmlHttp.onreadystatechange = function () {
@@ -21,8 +45,8 @@ function httpPostAsync(url, data, callback) {
 
     xmlHttp.open("POST", url, true);
     xmlHttp.setRequestHeader('Authorization', 'Basic ' + sessionStorage.getItem('authorization'));
-    xmlHttp.setRequestHeader('Content-Type', 'application/json');
-    xmlHttp.send(JSON.stringify(data));
+    xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+    xmlHttp.send('content=' + btoa(data));
 }
 
 function httpDeleteAsync(url, data, callback) {

Frontend/static/js/views.js

@@ -1,8 +1,17 @@
+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">
@@ -31,100 +40,93 @@ function create_logout_view() {
     document.getElementsByClassName('app-header')[0].appendChild(logout);
 }
 
-function create_base_view() {
-    let tmp = document.createElement('div');
-    tmp.innerHTML = `<div id="tree"></div>
-        <div id="files"></div>`;
+//
+// 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);
+//         });
+//     }
+// }
 
-    document.getElementById("wrapper").innerHTML = tmp.innerHTML;
-}
-
-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_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
-            create_list_view(dataRoot[key]['children'], listElement, url + '/' + dataRoot[key].text);
-        });
-    }
-}
-
-function create_file_view(data) {
-    let curr_dir = findGetParameter('path');
+function create_main_view(data) {
+    let curr_dir = get_path();
 
     let files = document.createElement('div');
     files.innerHTML = `<div id="path"></div>
@@ -137,82 +139,75 @@ function create_file_view(data) {
                 </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>`;
 
+    // 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') {
-            let folder = document.createElement('tr');
-            folder.style = 'cursor: pointer;';
-            folder.onclick = function () {
-                if (curr_dir === null) curr_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_listener();
-            };
-            folder.innerHTML = `<td data-order="__"><span class="material-icon">folder</span></td>
-                    <td>${data[i]['Name']}</td>
-                    <td>directory</td>`;
-            files.getElementsByTagName('tbody')[0].appendChild(folder);
+                url_changed();
+            }));
         }
     }
 
     // Files
     for (let i = 0; i < data.length; i++) {
         if (data[i]['Type'] !== 'dir') {
-            let file = document.createElement('tr');
-            file.style = 'cursor: pointer;';
-            file.onclick = function () {
-                load_file(data[i]['Name'], data[i]['Type']);
-            };
-
-            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';
+            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;
             }
 
-            file.innerHTML = `<td data-order="__"><span class="material-icon">${icon}</span></td>
-                    <td>${data[i]['Name']}</td>
-                    <td>${data[i]['Type']}</td>`;
-
-            file.addEventListener("contextmenu", function(e) {
-                document.getElementById('custom-menu').style.display = 'block';
-                document.getElementById('custom-menu').style.left = e.pageX + 'px';
-                document.getElementById('custom-menu').style.top = e.pageY + 'px';
-                console.log(this.innerHTML.split('<td>')[1].split('</td>')[0]);
-                e.preventDefault();
-            });
-
-            files.getElementsByTagName('tbody')[0].appendChild(file);
+            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_listener()" class="arrow-pointer" style="z-index: 1000"><span>/</span></div>`;
+    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++) {
-            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>`);
+            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;
@@ -222,92 +217,70 @@ function create_file_view(data) {
 
     // Close contextmenu
     document.getElementsByTagName('body')[0].addEventListener('click', function () {
-        document.getElementById('custom-menu').style.display = 'none';
+        document.getElementById('context_menu').style.display = 'none';
     });
 }
 
-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>`;
+function add_table_row(icon, name, type, path, context, click_function) {
+    let tr = document.createElement('tr');
 
-    document.getElementById('error_wrapper').appendChild(error.firstChild);
+    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("file_view");
-    let title = document.getElementById("file_title");
-    let modal_content = document.getElementsByClassName("modal-content")[0];
+    let modal = document.getElementById("modal");
+    let title = document.getElementById("modal_title");
+    let modal_content = document.getElementsByClassName("modal_content")[0];
 
 
-    if (type.indexOf("application") >= 0) {
-        modal_content.innerHTML = ``;
-    } else if (type.indexOf("audio") >= 0) {
-        httpGetAsync(base_url + data + '?format=base64', null, show_audio_data);
-    } else if (type.indexOf("drawing") >= 0) {
-        modal_content.innerHTML = ``;
-    } else if (type.indexOf("image") >= 0) {
-        httpGetAsync(base_url + 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(base_url + data, null, show_text_data);
-    } else if (type.indexOf("video") >= 0) {
-        httpGetAsync(base_url + 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 = ``;
+    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.innerText = `File: ${data}`;
+    title.innerHTML = `File: <span>${data}</span>`;
 
     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);
-    }
 }