From ca7281230428b005ef3f728908d9d2b2f6530619 Mon Sep 17 00:00:00 2001 From: H4CK3R-01 Date: Mon, 31 May 2021 09:17:07 +0200 Subject: [PATCH] - Download files - Remove files - Create files - Refactoring - Bug fix --- Frontend/index.html | 38 ++- Frontend/static/css/alert.css | 41 +++ Frontend/static/css/components.css | 142 +++------- Frontend/static/css/dropdown.css | 38 +++ Frontend/static/css/index.css | 3 +- Frontend/static/css/login.css | 7 +- Frontend/static/css/popup.css | 48 ++++ Frontend/static/js/alert.js | 21 ++ Frontend/static/js/callbacks.js | 57 ++++ Frontend/static/js/index.js | 86 ++++-- Frontend/static/js/tools.js | 30 ++- Frontend/static/js/views.js | 415 ++++++++++++++--------------- 12 files changed, 555 insertions(+), 371 deletions(-) create mode 100644 Frontend/static/css/alert.css create mode 100644 Frontend/static/css/dropdown.css create mode 100644 Frontend/static/css/popup.css create mode 100644 Frontend/static/js/alert.js create mode 100644 Frontend/static/js/callbacks.js diff --git a/Frontend/index.html b/Frontend/index.html index 5c6929b..4754dd4 100644 --- a/Frontend/index.html +++ b/Frontend/index.html @@ -6,6 +6,8 @@ + + @@ -15,8 +17,11 @@ - + + + + @@ -27,24 +32,35 @@
-
- - +
+ +
-
\ No newline at end of file diff --git a/Frontend/static/css/alert.css b/Frontend/static/css/alert.css new file mode 100644 index 0000000..2a2e6b1 --- /dev/null +++ b/Frontend/static/css/alert.css @@ -0,0 +1,41 @@ +.alert { + position: relative; + margin-bottom: 1rem; + border: 1px solid transparent; + border-radius: .25rem; + padding: .75rem 4rem .75rem 1.25rem; +} + +.alert span { + color: #0062ff; + cursor: pointer; +} + +.alert .close { + position: absolute; + top: -3px; + right: 0; + padding: .75rem 1.25rem; + color: inherit; + background-color: transparent; + border: 0; + -webkit-appearance: none; + float: right; + font-size: 1.5rem; + font-weight: 700; + line-height: 1; + text-shadow: 0 1px 0 #fff; + opacity: .5; +} + +.alert-danger { + color: #721c24; + background-color: #f8d7da; + border-color: #f5c6cb; +} + +.alert-success { + color: #0d630a; + background-color: #acffa9; + border-color: #acffa9; +} \ No newline at end of file diff --git a/Frontend/static/css/components.css b/Frontend/static/css/components.css index e0f61f4..3a9ad46 100644 --- a/Frontend/static/css/components.css +++ b/Frontend/static/css/components.css @@ -18,7 +18,6 @@ main { } footer { - /*flex: 0 0 auto;*/ text-align: right; } @@ -118,120 +117,47 @@ button { padding-left: 1em; } -.modal { - display: none; - position: fixed; - z-index: 100000; - padding-top: 100px; - left: 0; - top: 0; - width: 100%; - height: 100%; - overflow: auto; - background-color: rgba(0,0,0, 0.8); +.new_btn { + /*font-size: 3em;*/ + width: 50px; + height: 50px; + background: #0062ff; + color: #fff; + border-radius: 100%; + border: none; } -#content { - background-color: #fefefe; - margin: auto; - padding: 20px; - border: 1px solid #888; - width: 90%; - height: 80%; -} - -.modal-header { - display: grid; - grid-template-columns: 90% 10%; -} - -.modal-header #file_title { - grid-column: 1; - margin: 0; -} - -.modal-header span { - grid-column: 2; - display: flex; - justify-content: flex-end; - align-items: center; -} - -.modal-header span i { - cursor: pointer; -} - -.modal-content { - background-color: #fefefe; - width: 100%; - height: calc(100% - 16px - 2em); -} - -.error { - display: grid; - grid-template-columns: auto min-content; - background: #db2d2d; - border: solid 2px #b61111; - border-radius: 5px; - width: 90%; - height: 3em; - margin-left: auto; - margin-right: auto; - color: #ffffff; -} - -.error .text { - grid-column: 1; - line-height: 3em; - padding-left: 10px; - -} - -.error span:nth-child(2) { - grid-column: 2; - display: flex; - align-items: center; - cursor: pointer; - line-height: 3em; -} - -#custom-menu { - display: none; - z-index:100000; +.new { position: absolute; - background-color: rgb(229, 229, 229); - border-width: 1px; - border-style: solid; - border-color: rgb(114, 114, 114); - padding: 0 0.25em 0 1.5em; - width: 12em; - font-size: 12px; - overflow: hidden; - white-space:nowrap; - list-style: none; - margin: 0; + bottom: 10px; + right: 10px; } -#custom-menu button { + +.new_content { + display: none; + position: absolute; + bottom: 50px; + z-index: 1; +} + +.new_content button { + text-decoration: none; display: block; - padding: 5px; - background: transparent; - border: 0; - outline: 0; - width: 100%; - text-align: left; - color: #333; + border-radius: 100%; + width: 50px; + height: 50px; + background: #0062ff; + color: #fff; + margin-bottom: 10px; + border: none; } -#custom-menu button:hover { - background-color: #DDD; - cursor: pointer; - color: #000; + +.new button:hover { + background: #003f93; } -#custom-menu button > span { - display: inline; - position: absolute; - right: 5px; - text-align: right; - color: rgb(102, 102, 102); + +.new:hover .new_content { + display: block; } .material-icon { diff --git a/Frontend/static/css/dropdown.css b/Frontend/static/css/dropdown.css new file mode 100644 index 0000000..a937853 --- /dev/null +++ b/Frontend/static/css/dropdown.css @@ -0,0 +1,38 @@ +#context_menu { + display: none; + z-index:100000; + position: absolute; + background-color: rgb(229, 229, 229); + border-width: 1px; + border-style: solid; + border-color: rgb(114, 114, 114); + padding: 0 0.25em 0 1.5em; + width: 12em; + font-size: 12px; + overflow: hidden; + white-space:nowrap; + list-style: none; + margin: 0; +} +#context_menu button { + display: block; + padding: 5px; + background: transparent; + border: 0; + outline: 0; + width: 100%; + text-align: left; + color: #333; +} +#context_menu button:hover { + background-color: #DDD; + cursor: pointer; + color: #000; +} +#context_menu button > span { + display: inline; + position: absolute; + right: 5px; + text-align: right; + color: rgb(102, 102, 102); +} \ No newline at end of file diff --git a/Frontend/static/css/index.css b/Frontend/static/css/index.css index 96b04e9..f7642f5 100644 --- a/Frontend/static/css/index.css +++ b/Frontend/static/css/index.css @@ -8,7 +8,8 @@ } #error_wrapper { - padding: 5px; + padding-top: 5px; + padding-bottom: 5px; width: 100%; } diff --git a/Frontend/static/css/login.css b/Frontend/static/css/login.css index 4f90196..6a6521e 100644 --- a/Frontend/static/css/login.css +++ b/Frontend/static/css/login.css @@ -24,7 +24,8 @@ border: none; border-radius: 5px; padding: 10px; - margin: 5px; + margin-bottom: 5px; + margin-top: 5px; } #login input { @@ -35,4 +36,8 @@ #login button { background-color: #0062ff; color: #ffffff; +} + +#error { + color: #b61111; } \ No newline at end of file diff --git a/Frontend/static/css/popup.css b/Frontend/static/css/popup.css new file mode 100644 index 0000000..3595ab6 --- /dev/null +++ b/Frontend/static/css/popup.css @@ -0,0 +1,48 @@ +.modal { + display: none; + position: fixed; + z-index: 100000; + padding-top: 100px; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(0,0,0, 0.8); +} + +#content { + background-color: #fefefe; + margin: auto; + padding: 20px; + border: 1px solid #888; + width: 90%; + height: 80%; +} + +.modal_header { + display: grid; + grid-template-columns: 90% 10%; +} + +.modal_header #modal_title { + grid-column: 1; + margin: 0; +} + +.modal_header > span { + grid-column: 2; + display: flex; + justify-content: flex-end; + align-items: center; +} + +.modal_header span i { + cursor: pointer; +} + +.modal_content { + background-color: #fefefe; + width: 100%; + height: calc(100% - 16px - 2em); +} \ No newline at end of file diff --git a/Frontend/static/js/alert.js b/Frontend/static/js/alert.js new file mode 100644 index 0000000..1c90417 --- /dev/null +++ b/Frontend/static/js/alert.js @@ -0,0 +1,21 @@ +function create_error_view(text) { + let error = document.createElement('div'); + error.innerHTML = `
+ ${text} + +
`; + + document.getElementById('error_wrapper').innerHTML = ''; + document.getElementById('error_wrapper').appendChild(error.firstChild); +} + +function create_success_view(text) { + let error = document.createElement('div'); + error.innerHTML = `
+ ${text} + +
`; + + document.getElementById('error_wrapper').innerHTML = ''; + document.getElementById('error_wrapper').appendChild(error.firstChild); +} \ No newline at end of file diff --git a/Frontend/static/js/callbacks.js b/Frontend/static/js/callbacks.js new file mode 100644 index 0000000..4a4c4b0 --- /dev/null +++ b/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 = `Image`; + } else { + create_error_view(response['error'] + ` Return to root directory`); + } +} + +function show_text_callback(response, code) { + if (code === 200) { + document.getElementsByClassName("modal_content")[0].innerHTML = ` + + `; + } else { + create_error_view(response['error'] + ` Return to root directory`); + } +} + +function show_audio_callback(response, code) { + if (code === 200) { + document.getElementsByClassName("modal_content")[0].innerHTML = ``; + } else { + create_error_view(response['error'] + ` Return to root directory`); + } +} + +function show_video_callback(response, code) { + if (code === 200) { + document.getElementsByClassName("modal_content")[0].innerHTML = ``; + } else { + create_error_view(response['error'] + ` Return to root directory`); + } +} \ No newline at end of file diff --git a/Frontend/static/js/index.js b/Frontend/static/js/index.js index 203bde3..94bdbaf 100644 --- a/Frontend/static/js/index.js +++ b/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. Log in again`); } 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'] + ` Return to root directory`); } } 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 = ` + + `; + + document.getElementById('modal').style.display = 'block'; +} + +function add_file() { + document.getElementById('modal_title').innerText = 'Create File'; + + document.getElementsByClassName("modal_content")[0].innerHTML = ` + + + + + `; + + 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'); } \ No newline at end of file diff --git a/Frontend/static/js/tools.js b/Frontend/static/js/tools.js index 475feba..1068545 100644 --- a/Frontend/static/js/tools.js +++ b/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) { diff --git a/Frontend/static/js/views.js b/Frontend/static/js/views.js index 28860ea..587f5c2 100644 --- a/Frontend/static/js/views.js +++ b/Frontend/static/js/views.js @@ -1,8 +1,17 @@ +function create_base_view() { + let tmp = document.createElement('div'); + tmp.innerHTML = `
+
`; + + document.getElementById("wrapper").innerHTML = tmp.innerHTML; +} + function create_login_view() { let tmp = document.createElement('div'); tmp.innerHTML = `

Login

+
@@ -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 = `
-
`; +// +// 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 = `
    `; +// +// 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 = `${dataRoot[key].text}`; +// 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 = `
      `; - - 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 = `${dataRoot[key].text}`; - 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 = `
      @@ -137,82 +139,75 @@ function create_file_view(data) { - - - .. - - + `; + // 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 = `folder - ${data[i]['Name']} - directory`; - 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 = `${icon} - ${data[i]['Name']} - ${data[i]['Type']}`; - - 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('')[1].split('')[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 = `
      /
      `; + let s = `
      /
      `; if (curr_dir !== null) { let folders = curr_dir.split('/'); for (let i = 1; i < folders.length; i++) { - s = s.concat(`
      ${folders[i]}
      `); + if (folders[i] !== '') s = s.concat(`
      ${folders[i]}
      `); } } 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 = `
      - ${text}. Go back - close -
      `; +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 = ` + ${icon} + ${name} + ${type} + `; + 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: ${data}`; modal.style.display = "block"; -} - -function show_image_data(response, code) { - if (code === 200) { - document.getElementsByClassName("modal-content")[0].innerHTML = `Image`; - } else { - console.log(code + " " + response); - } -} - -function show_text_data(response, code) { - if (code === 200) { - document.getElementsByClassName("modal-content")[0].innerHTML = ` - - - `; - } else { - console.log(code + " " + response); - } -} - -function show_audio_data(response, code) { - if (code === 200) { - document.getElementsByClassName("modal-content")[0].innerHTML = ``; - } else { - console.log(code + " " + response); - } -} - -function show_video_data(response, code) { - if (code === 200) { - document.getElementsByClassName("modal-content")[0].innerHTML = ``; - } else { - console.log(code + " " + response); - } } \ No newline at end of file