DHBW/Webengineering-Filemanager
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

- Improved alerts

Browse Source 
- Improved modal
- Fixed get_curr_path() function
- Improved tools.js
- Cleaned up
- Refactoring
This commit is contained in:
Administrator 2021-06-04 14:05:05 +02:00
parent 2e693eb93a
commit 51d51c3a32
11 changed files with 300 additions and 278 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
Frontend/index.html
View File

@ -2,13 +2,14 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Filemanager</title> <title>File Manager</title>
<script src="static/js/views.js"></script> <script src="static/js/views.js"></script>
<script src="static/js/tools.js"></script> <script src="static/js/tools.js"></script>
<script src="static/js/alert.js"></script> <script src="static/js/alert.js"></script>
<script src="static/js/modal.js"></script>
<script src="static/js/dropdown.js"></script>
<script src="static/js/generate_directory_tree.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> <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=Material+Icons" rel="stylesheet">
@ -18,7 +19,7 @@
<link href="favicon.ico" rel="icon" 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/components.css" rel="stylesheet">
<link href="static/css/popup.css" rel="stylesheet"> <link href="static/css/modal.css" rel="stylesheet">
<link href="static/css/dropdown.css" rel="stylesheet"> <link href="static/css/dropdown.css" rel="stylesheet">
<link href="static/css/alert.css" rel="stylesheet"> <link href="static/css/alert.css" rel="stylesheet">
@ -33,43 +34,13 @@
</div> </div>
</header> </header>
<main> <main>
<div id='context_menu'>
<button id="download"
onclick="download_file(this.parentElement.getAttribute('data-file-name'), this.parentElement.getAttribute('data-mimetype'));">
Download
</button>
<button id="remove" onclick="remove_file(this.parentElement.getAttribute('data-file-name'));">Remove</button>
</div>
<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>
</div>
<hr>
<div class="modal_content">
</div>
</div>
</div>
<div class="new">
<button class="material-icon new_btn" type="button">add</button>
<div class="new_content">
<button class="material-icon" onclick="add_folder();" type="button">folder</button>
<button class="material-icon" onclick="add_file();" type="button">description</button>
</div>
</div>
<div class="box"> <div class="box">
<div id="error_wrapper"> <div id="error_wrapper">
</div> </div>
<div id="wrapper"> <div id="wrapper">
<div id="tree"></div>
<div id="files"></div>
</div> </div>
</div> </div>
</main> </main>

2
Frontend/static/css/components.css
View File

@ -44,7 +44,7 @@ header {
font-size: 2em; font-size: 2em;
} }
.logout { #logout {
grid-column: 2; grid-column: 2;
width: 100%; width: 100%;
display: flex; display: flex;

27
Frontend/static/css/popup.css → Frontend/static/css/modal.css
View File

@ -1,5 +1,4 @@
.modal { #modal {
display: none;
position: fixed; position: fixed;
z-index: 100000; z-index: 100000;
padding-top: 100px; padding-top: 100px;
@ -17,31 +16,43 @@
padding: 20px; padding: 20px;
border: 1px solid #888; border: 1px solid #888;
width: 90%; width: 90%;
height: 80%; border-radius: 5px;
display: flex;
flex-direction: column;
justify-content: space-between;
} }
.modal_header { .divider {
background: #585858;
height: 0.1em;
margin: 0.5em 0 0.5em;
}
#modal_header {
display: grid; display: grid;
grid-template-columns: 90% 10%; grid-template-columns: 90% 10%;
} }
.modal_header #modal_title { #modal_header #modal_title {
grid-column: 1; grid-column: 1;
margin: 0; margin: 0;
} }
.modal_header > span { #modal_header > span {
grid-column: 2; grid-column: 2;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
} }
.modal_header span i { #modal_header span i {
cursor: pointer; cursor: pointer;
} }
.modal_content { #modal_content {
display: flex;
justify-content: center;
align-items: center;
background-color: #fefefe; background-color: #fefefe;
width: 100%; width: 100%;
height: calc(100% - 16px - 2em); height: calc(100% - 16px - 2em);

22
Frontend/static/js/alert.js
View File

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

66
Frontend/static/js/callbacks.js
View File

@ -1,66 +0,0 @@
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.");
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>`);
}
}

30
Frontend/static/js/dropdown.js Normal file
View File

@ -0,0 +1,30 @@
function download_file(path, mimetype) {
let file = path.split('/');
let filename = file[file.length - 1];
httpGetAsync(base_url + path, null, function (response, code) {
if (code === 200) {
let element = document.createElement('a');
element.setAttribute('href', 'data:' + mimetype + ',' + encodeURIComponent(response));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
} else {
create_error_view("Error " + response);
}
});
}
function remove_file(filename) {
httpDeleteAsync(base_url + filename, null, function (response, code) {
if (code === 200) {
create_success_view("Successfully deleted.");
path_changed();
} else {
create_error_view(response);
}
});
}

2
Frontend/static/js/generate_directory_tree.js
View File

@ -50,7 +50,7 @@ function create_tree_view() {
function tree_onclick(url) { function tree_onclick(url) {
window.history.pushState('index', 'Filemanager', 'index.html?path=' + url); window.history.pushState('index', 'Filemanager', 'index.html?path=' + url);
url_changed(); path_changed();
} }
function create_list_view(dataRoot, elementRoot, url) { function create_list_view(dataRoot, elementRoot, url) {

147
Frontend/static/js/index.js
View File

@ -7,7 +7,7 @@ window.addEventListener('load', function () {
create_base_view(); create_base_view();
create_logout_view(); create_logout_view();
create_tree_data(''); create_tree_data('');
url_changed(); path_changed();
} else { } else {
console.log('Not logged in'); console.log('Not logged in');
create_login_view(); create_login_view();
@ -15,49 +15,37 @@ window.addEventListener('load', function () {
}); });
window.addEventListener('popstate', function () { window.addEventListener('popstate', function () {
url_changed(); path_changed();
}); });
function url_changed() { function path_changed() {
let curr_dir = get_path(); let curr_dir = get_curr_path();
if (curr_dir !== null) {
if (curr_dir.startsWith('/') || curr_dir === '') {
httpGetAsync(base_url + curr_dir, null, show_files); httpGetAsync(base_url + curr_dir, null, show_files);
} else {
// Malformed url if curr_dir does not start with /
httpGetAsync(base_url + '/' + curr_dir, null, show_files);
}
} else {
httpGetAsync(base_url, null, show_files);
}
} }
function login() { function login() {
let username = document.getElementById("username").value; let username = document.getElementById("username").value;
let password = document.getElementById("password").value; let password = document.getElementById("password").value;
const xmlHttp = new XMLHttpRequest(); httpPostAsync(base_url + '/login', 'username=' + username + '&password=' + password, function (response, code) {
xmlHttp.onreadystatechange = function () { if (code === 200) {
if (this.readyState === 4) { sessionStorage.setItem("authorization", btoa(username + ':' + JSON.parse(response)['token']));
if (xmlHttp.status === 200) {
sessionStorage.setItem("authorization", btoa(username + ':' + JSON.parse(xmlHttp.responseText)['token']));
create_base_view(); create_base_view();
create_logout_view(); create_logout_view();
create_tree_data(''); create_tree_data('');
url_changed(); path_changed();
} else if (xmlHttp.status === 401) { } else if (code === 401) {
create_error_view("Wrong username or password!"); create_error_view("Wrong username or password!");
} else { } else {
create_error_view("Unknown 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='); path_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='); path_changed();">Return to root directory</span>`);
} }
} }
} })
xmlHttp.open("POST", base_url + '/login', true);
xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xmlHttp.send('username=' + username + '&password=' + password);
} }
function show_files(response, code) { function show_files(response, code) {
@ -72,15 +60,15 @@ function show_files(response, code) {
// Error // Error
try { try {
response = JSON.parse(response); 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>`); create_error_view(response['error'] + ` <span onclick="this.parentElement.children[1].click(); window.history.pushState('index', 'Filemanager', 'index.html?path='); path_changed();">Return to root directory</span>`);
} catch (e) { } 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>`); create_error_view(`Unrecoverable error! <span onclick="this.parentElement.children[1].click(); window.history.pushState('index', 'Filemanager', 'index.html?path='); path_changed();">Return to root directory</span>`);
} }
} }
} }
function one_dir_back() { function one_dir_back() {
let curr_dir = get_path(); let curr_dir = get_curr_path();
if (curr_dir !== null) { if (curr_dir !== null) {
let dir = curr_dir.split('/'); let dir = curr_dir.split('/');
@ -94,48 +82,81 @@ function one_dir_back() {
} }
function save_file(filename, content) { function save_file(filename, content) {
document.getElementById('modal').style.display = 'none'; remove_modal();
httpPostAsync(base_url + filename, content, save_file_callback); httpPostAsync(base_url + filename, 'content=' + btoa(content), function (response, code) {
if (code === 200) {
create_success_view("Saved file successfully");
} else {
create_error_view(JSON.parse(response)['error']);
} }
});
function download_file(filename) {
let file = filename.split('/');
saveFile(base_url + filename, file[file.length - 1]);
}
function remove_file(filename) {
httpDeleteAsync(base_url + filename, null, remove_callback);
} }
function add_folder() { function add_folder() {
document.getElementById('modal_title').innerText = 'Create Folder'; let content = `<input id="input" placeholder="Name" style="width: 100%; margin: 10px 0 10px 0;">`;
let footer = `<button onclick="api_create_folder(document.getElementById('input').value.trim())" type="button" value="Save">Save</button>
document.getElementsByClassName("modal_content")[0].innerHTML = `<input id="input" placeholder="Name" style="width: calc(100% - 8px); margin-bottom: 10px;"> <button onclick="remove_modal();" type="button" value="Discard">Discard</button>`;
<button onclick="console.log(document.getElementById('input').value.trim())" type="button" value="Save">Save</button> create_modal('Create Folder', content, footer);
<button onclick="document.getElementById('modal').style.display = 'none'" type="button" value="Discard">Discard</button>`;
document.getElementById('modal').style.display = 'block';
} }
function add_file() { function add_file() {
document.getElementById('modal_title').innerText = 'Create File'; let content = `<div style="width: 100%; height: max-content;">
<input id="input" placeholder="Name" style="width: calc(100% - 8px); margin: 10px 0 10px 0;">
document.getElementsByClassName("modal_content")[0].innerHTML = ` <textarea id="textarea" placeholder="Content..." style="width: calc(100% - 8px); height: 500px"></textarea>
<input id="input" placeholder="Name" style="width: calc(100% - 8px); margin-bottom: 10px;"> </div>`;
<textarea id="textarea" style="width: calc(100% - 8px); height: 90%"></textarea> let footer = `<button onclick="save_file(get_curr_path() + '/' + document.getElementById('input').value.trim(), document.getElementById('textarea').value.trim()); path_changed();" type="button" value="Save">Save</button>
<button onclick="create_text_file();" type="button" value="Save">Save</button> <button onclick="remove_modal();" type="button" value="Discard">Discard</button>`;
<button onclick="document.getElementById('modal').style.display = 'none'" type="button" value="Discard">Discard</button> create_modal('Create File', content, footer);
`;
document.getElementById('modal').style.display = 'block';
} }
function create_text_file() { function upload_file() {
let path = get_path(); let content = `<input type="file" id="input" style="width: 100%; margin: 10px 0 10px 0;">`;
if (path === null) path = ''; let footer = `<button onclick="api_upload_file();" type="button" value="Save">Save</button>
save_file(path + '/' + document.getElementById('input').value.trim(), document.getElementById('textarea').value.trim()); <button onclick="remove_modal();" type="button" value="Discard">Discard</button>`;
create_modal('Upload File', content, footer);
} }
function get_path() { function api_create_folder(name) {
return findGetParameter('path'); httpPostAsync(base_url + get_curr_path() + '/' + name, 'type=dir', function (response, code) {
remove_modal();
path_changed();
if (code === 200) {
create_success_view('Created directory successfully');
} else {
try {
response = JSON.parse(response);
create_error_view(response['error']);
} catch (e) {
create_error_view(`Unrecoverable error! <span onclick="this.parentElement.children[1].click(); window.history.pushState('index', 'Filemanager', 'index.html?path='); path_changed();">Return to root directory</span>`);
}
}
});
}
function api_upload_file() { // TODO
let files = document.getElementById('modal_content').children[0].children[0].files[0];
console.log(files);
// let formData = new FormData();
// formData.append('local', files, files.name);
//
// httpPostAsync(base_url + get_curr_path() + '/' + files.name, 'newFile=' + formData, function (response, code) {
// console.log(code)
// console.log(response)
// })
}
function get_curr_path() {
let curr_dir = findGetParameter('path');
if (curr_dir === null) {
curr_dir = '';
}
if (!curr_dir.startsWith('/') && curr_dir !== '') {
// Malformed url if curr_dir does not start with /
curr_dir = '/' + curr_dir;
}
return curr_dir;
} }

28
Frontend/static/js/modal.js Normal file
View File

@ -0,0 +1,28 @@
function create_modal(title, content, footer) {
let div = document.createElement('div');
div.innerHTML = `<div id="modal">
<div id="content">
<div id="modal_header">
<h3 id="modal_title">${title || "&nbsp"}</h3>
<span><i class="material-icon" onclick="remove_modal();">close</i></span>
</div>
<div class="divider"></div>
<div id="modal_content">
${content}
</div>
<div class="divider"></div>
<div id="modal_footer">
${footer || "&nbsp"}
</div>
</div>
</div>`
document.body.appendChild(div.firstChild);
}
function remove_modal() {
document.getElementById('modal').remove();
}
function change_modal_content(content) {
document.getElementById("modal_content").innerHTML = content;
}

36
Frontend/static/js/tools.js
View File

@ -11,30 +11,6 @@ function httpGetAsync(url, data, callback) {
xmlHttp.send(null); 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) { function httpPostAsync(url, data, callback) {
const xmlHttp = new XMLHttpRequest(); const xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function () { xmlHttp.onreadystatechange = function () {
@ -46,7 +22,7 @@ function httpPostAsync(url, data, callback) {
xmlHttp.open("POST", url, true); xmlHttp.open("POST", url, true);
xmlHttp.setRequestHeader('Authorization', 'Basic ' + sessionStorage.getItem('authorization')); xmlHttp.setRequestHeader('Authorization', 'Basic ' + sessionStorage.getItem('authorization'));
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttp.send('content=' + btoa(data)); xmlHttp.send(data);
} }
function httpDeleteAsync(url, data, callback) { function httpDeleteAsync(url, data, callback) {
@ -74,3 +50,13 @@ function findGetParameter(parameterName) {
}); });
return result; return result;
} }
function get_random_id() {
let s4 = function () {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
}
return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
}

163
Frontend/static/js/views.js
View File

@ -1,9 +1,27 @@
function create_base_view() { function create_base_view() {
let tmp = document.createElement('div'); let tmp;
tmp = document.createElement('div');
tmp.innerHTML = `<div id="tree"></div> tmp.innerHTML = `<div id="tree"></div>
<div id="files"></div>`; <div id="files"></div>`;
document.getElementById("wrapper").innerHTML = tmp.innerHTML; document.getElementById("wrapper").innerHTML = tmp.innerHTML;
tmp = document.createElement('div');
tmp.innerHTML = `<div id='context_menu'>
<button id="download" onclick="download_file(this.parentElement.getAttribute('data-file-name'), this.parentElement.getAttribute('data-mimetype'));">Download</button>
<button id="remove" onclick="remove_file(this.parentElement.getAttribute('data-file-name'));">Remove</button>
</div>
<div class="new">
<button class="material-icon new_btn" type="button">add</button>
<div class="new_content">
<button class="material-icon" onclick="add_folder();" type="button">folder</button>
<button class="material-icon" onclick="add_file();" type="button">description</button>
<button class="material-icon" onclick="upload_file();" type="button">file_upload</button>
</div>
</div>`
document.getElementsByTagName('main')[0].appendChild(tmp);
} }
function create_login_view() { function create_login_view() {
@ -25,22 +43,53 @@ function create_login_view() {
</div> </div>
</form> </form>
</div>`; </div>`;
document.getElementById("wrapper").innerHTML = ''; document.getElementById("wrapper").innerHTML = tmp.innerHTML;
document.getElementById("wrapper").appendChild(tmp.firstChild);
} }
function create_logout_view() { function create_logout_view() {
let logout = document.createElement('div'); let logout = document.createElement('div');
logout.classList.add('logout'); logout.id = 'logout';
logout.innerText = 'Logout'; logout.innerText = 'Logout';
logout.onclick = function () { logout.onclick = function () {
httpGetAsync(base_url + '/logout', null, logout_callback); httpGetAsync(base_url + '/logout', null, function (response, code) {
if (code === 200) {
sessionStorage.removeItem('authorization');
document.getElementById('logout').remove();
document.getElementById('context_menu').parentElement.remove();
create_login_view();
} else {
create_error_view(response['error'] + ` <span onclick="this.parentElement.children[1].click(); window.history.pushState('index', 'Filemanager', 'index.html?path='); path_changed();">Return to root directory</span>`);
}
});
} }
document.getElementsByClassName('app-header')[0].appendChild(logout); document.getElementsByClassName('app-header')[0].appendChild(logout);
} }
function get_icon(type) {
switch (type.split('/')[0]) {
case 'application':
return 'apps';
case 'audio':
return 'music_note';
case 'drawing':
return 'gesture';
case 'image':
return 'image';
case 'message':
return 'mail';
case 'multipart':
return 'note_add';
case 'text':
return 'description';
case 'video':
return 'movie';
default:
return 'article';
}
}
function create_main_view(data) { function create_main_view(data) {
let curr_dir = get_path(); let curr_dir = get_curr_path();
let files = document.createElement('div'); let files = document.createElement('div');
files.innerHTML = `<div id="path"></div> files.innerHTML = `<div id="path"></div>
@ -58,10 +107,10 @@ function create_main_view(data) {
</table>`; </table>`;
// Previous directory // Previous directory
if (curr_dir !== null && curr_dir !== '') { if (curr_dir !== '/') {
files.getElementsByTagName('tbody')[0].appendChild(add_table_row("", "..", "", "", false, function () { files.getElementsByTagName('tbody')[0].appendChild(add_table_row("", "..", "", "", false, function () {
window.history.pushState('index', 'Filemanager', 'index.html?path=' + one_dir_back()); window.history.pushState('index', 'Filemanager', 'index.html?path=' + one_dir_back());
url_changed(); path_changed();
})); }));
} }
@ -70,7 +119,7 @@ function create_main_view(data) {
if (data[i]['Type'] === 'dir') { if (data[i]['Type'] === 'dir') {
files.getElementsByTagName('tbody')[0].appendChild(add_table_row("folder", data[i]['Name'], "directory", curr_dir, true, function () { 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']); window.history.pushState('index', 'Filemanager', 'index.html?path=' + curr_dir + '/' + data[i]['Name']);
url_changed(); path_changed();
})); }));
} }
} }
@ -78,50 +127,19 @@ function create_main_view(data) {
// Files // Files
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.length; i++) {
if (data[i]['Type'] !== 'dir') { if (data[i]['Type'] !== 'dir') {
let icon = ''; files.getElementsByTagName('tbody')[0].appendChild(add_table_row(get_icon(data[i]['Type']), data[i]['Name'], data[i]['Type'], curr_dir, true, function () {
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;
}
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']); show_file_view(curr_dir + '/' + data[i]['Name'], data[i]['Type']);
})); }));
} }
} }
// Path // Path
let s = `<div onclick="window.history.pushState('index', 'Filemanager', 'index.html?path='); url_changed()" class="arrow-pointer" style="z-index: 1000"><span>/</span></div>`; let s = `<div onclick="window.history.pushState('index', 'Filemanager', 'index.html?path='); path_changed()" class="arrow-pointer" style="z-index: 1000"><span>/</span></div>`;
if (curr_dir !== null) { if (curr_dir !== null) {
let folders = curr_dir.split('/'); let folders = curr_dir.split('/');
for (let i = 1; i < folders.length; i++) { for (let i = 1; i < folders.length; i++) {
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>`); if (folders[i] !== '') s = s.concat(`<div onclick="window.history.pushState('index', 'Filemanager', 'index.html?path=${folders.slice(0, i + 1).join('/')}'); path_changed()" class="arrow-pointer" style="z-index: ${folders.length - i}"><span>${folders[i]}</span></div>`);
} }
} }
files.getElementsByTagName('div')[0].innerHTML = s; files.getElementsByTagName('div')[0].innerHTML = s;
@ -159,42 +177,49 @@ function add_table_row(icon, name, type, path, context, click_function) {
} }
function show_file_view(data, type) { function show_file_view(data, type) {
let modal = document.getElementById("modal");
let title = document.getElementById("modal_title");
let modal_content = document.getElementsByClassName("modal_content")[0];
switch (type.split('/')[0]) { switch (type.split('/')[0]) {
case 'application':
modal_content.innerHTML = ``;
break;
case 'audio': case 'audio':
httpGetAsync(base_url + data + '?format=base64', null, show_audio_callback); create_modal(`File: <span>${data}</span>`, ``);
break; httpGetAsync(base_url + data + '?format=base64', null, function (response, code) {
case 'drawing': if (code === 200) {
modal_content.innerHTML = ``; change_modal_content(`<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='); path_changed();">Return to root directory</span>`);
}
});
break; break;
case 'image': case 'image':
httpGetAsync(base_url + data + '?format=base64', null, show_image_callback); create_modal(`File: <span>${data}</span>`, ``);
break; httpGetAsync(base_url + data + '?format=base64', null, function (response, code) {
case 'message': if (code === 200) {
modal_content.innerHTML = ``; change_modal_content(`<img style="width: 100%" src="data:image/png;base64, ${response}" alt="Image">`);
break; } else {
case 'multipart': create_error_view(response['error'] + ` <span onclick="this.parentElement.children[1].click(); window.history.pushState('index', 'Filemanager', 'index.html?path='); path_changed();">Return to root directory</span>`);
modal_content.innerHTML = ``; }
});
break; break;
case 'text': case 'text':
httpGetAsync(base_url + data, null, show_text_callback); create_modal(`File: <span>${data}</span>`, ``);
httpGetAsync(base_url + data, null, function (response, code) {
if (code === 200) {
change_modal_content(`<div style="width: 100%; height: 100%"><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="remove_modal();" type="button" value="Discard">Discard</button></div>`);
} else {
create_error_view(response['error'] + ` <span onclick="this.parentElement.children[1].click(); window.history.pushState('index', 'Filemanager', 'index.html?path='); path_changed();">Return to root directory</span>`);
}
});
break; break;
case 'video': case 'video':
httpGetAsync(base_url + data + '?format=base64', null, show_video_callback); create_modal(`File: <span>${data}</span>`, ``);
httpGetAsync(base_url + data + '?format=base64', null, function (response, code) {
if (code === 200) {
change_modal_content(`<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='); path_changed();">Return to root directory</span>`);
}
});
break; break;
default: default:
modal_content.innerHTML = ``; create_modal(`File: <span>${data}</span>`, `Cannot open file!`);
break; break;
} }
title.innerHTML = `File: <span>${data}</span>`;
modal.style.display = "block";
} }