- Improved alerts
- Improved modal - Fixed get_curr_path() function - Improved tools.js - Cleaned up - Refactoring
This commit is contained in:
parent
2e693eb93a
commit
51d51c3a32
@ -2,13 +2,14 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Filemanager</title>
|
||||
<title>File Manager</title>
|
||||
|
||||
<script src="static/js/views.js"></script>
|
||||
<script src="static/js/tools.js"></script>
|
||||
<script src="static/js/alert.js"></script>
|
||||
<script src="static/js/modal.js"></script>
|
||||
<script src="static/js/dropdown.js"></script>
|
||||
<script src="static/js/generate_directory_tree.js"></script>
|
||||
<script src="static/js/callbacks.js"></script>
|
||||
<script src="static/js/index.js"></script>
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
|
||||
@ -18,7 +19,7 @@
|
||||
<link href="favicon.ico" rel="icon" type="image/x-icon">
|
||||
|
||||
<link href="static/css/components.css" rel="stylesheet">
|
||||
<link href="static/css/popup.css" rel="stylesheet">
|
||||
<link href="static/css/modal.css" rel="stylesheet">
|
||||
<link href="static/css/dropdown.css" rel="stylesheet">
|
||||
<link href="static/css/alert.css" rel="stylesheet">
|
||||
|
||||
@ -33,43 +34,13 @@
|
||||
</div>
|
||||
</header>
|
||||
<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 id="error_wrapper">
|
||||
|
||||
</div>
|
||||
|
||||
<div id="wrapper">
|
||||
<div id="tree"></div>
|
||||
<div id="files"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@ -44,7 +44,7 @@ header {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.logout {
|
||||
#logout {
|
||||
grid-column: 2;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
.modal {
|
||||
display: none;
|
||||
#modal {
|
||||
position: fixed;
|
||||
z-index: 100000;
|
||||
padding-top: 100px;
|
||||
@ -17,31 +16,43 @@
|
||||
padding: 20px;
|
||||
border: 1px solid #888;
|
||||
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;
|
||||
grid-template-columns: 90% 10%;
|
||||
}
|
||||
|
||||
.modal_header #modal_title {
|
||||
#modal_header #modal_title {
|
||||
grid-column: 1;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal_header > span {
|
||||
#modal_header > span {
|
||||
grid-column: 2;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal_header span i {
|
||||
#modal_header span i {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal_content {
|
||||
#modal_content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #fefefe;
|
||||
width: 100%;
|
||||
height: calc(100% - 16px - 2em);
|
||||
@ -1,21 +1,37 @@
|
||||
function create_error_view(text) {
|
||||
let id = get_random_id();
|
||||
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}
|
||||
<button type="button" onclick="this.parentElement.remove()" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
</div>`;
|
||||
|
||||
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) {
|
||||
let id = get_random_id();
|
||||
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}
|
||||
<button type="button" onclick="this.parentElement.remove()" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
</div>`;
|
||||
|
||||
document.getElementById('error_wrapper').innerHTML = '';
|
||||
document.getElementById('error_wrapper').appendChild(error.firstChild);
|
||||
|
||||
setTimeout(function () {
|
||||
if (typeof (document.getElementById(id)) != 'undefined' && document.getElementById(id) != null) {
|
||||
document.getElementById(id).remove();
|
||||
}
|
||||
}, 10000);
|
||||
}
|
||||
@ -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
30
Frontend/static/js/dropdown.js
Normal 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);
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -50,7 +50,7 @@ function create_tree_view() {
|
||||
|
||||
function tree_onclick(url) {
|
||||
window.history.pushState('index', 'Filemanager', 'index.html?path=' + url);
|
||||
url_changed();
|
||||
path_changed();
|
||||
}
|
||||
|
||||
function create_list_view(dataRoot, elementRoot, url) {
|
||||
|
||||
@ -7,7 +7,7 @@ window.addEventListener('load', function () {
|
||||
create_base_view();
|
||||
create_logout_view();
|
||||
create_tree_data('');
|
||||
url_changed();
|
||||
path_changed();
|
||||
} else {
|
||||
console.log('Not logged in');
|
||||
create_login_view();
|
||||
@ -15,49 +15,37 @@ window.addEventListener('load', function () {
|
||||
});
|
||||
|
||||
window.addEventListener('popstate', function () {
|
||||
url_changed();
|
||||
path_changed();
|
||||
});
|
||||
|
||||
function url_changed() {
|
||||
let curr_dir = get_path();
|
||||
|
||||
if (curr_dir !== null) {
|
||||
if (curr_dir.startsWith('/') || curr_dir === '') {
|
||||
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 path_changed() {
|
||||
let curr_dir = get_curr_path();
|
||||
httpGetAsync(base_url + curr_dir, null, show_files);
|
||||
}
|
||||
|
||||
function login() {
|
||||
let username = document.getElementById("username").value;
|
||||
let password = document.getElementById("password").value;
|
||||
|
||||
const xmlHttp = new XMLHttpRequest();
|
||||
xmlHttp.onreadystatechange = function () {
|
||||
if (this.readyState === 4) {
|
||||
if (xmlHttp.status === 200) {
|
||||
sessionStorage.setItem("authorization", btoa(username + ':' + JSON.parse(xmlHttp.responseText)['token']));
|
||||
httpPostAsync(base_url + '/login', 'username=' + username + '&password=' + password, function (response, code) {
|
||||
if (code === 200) {
|
||||
sessionStorage.setItem("authorization", btoa(username + ':' + JSON.parse(response)['token']));
|
||||
|
||||
create_base_view();
|
||||
create_logout_view();
|
||||
create_tree_data('');
|
||||
url_changed();
|
||||
} else if (xmlHttp.status === 401) {
|
||||
create_error_view("Wrong username or password!");
|
||||
} else {
|
||||
create_error_view("Unknown error!");
|
||||
create_base_view();
|
||||
create_logout_view();
|
||||
create_tree_data('');
|
||||
path_changed();
|
||||
} else if (code === 401) {
|
||||
create_error_view("Wrong username or password!");
|
||||
} else {
|
||||
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) {
|
||||
@ -72,15 +60,15 @@ function show_files(response, code) {
|
||||
// Error
|
||||
try {
|
||||
response = JSON.parse(response);
|
||||
create_error_view(response['error'] + ` <span onclick="this.parentElement.children[1].click(); window.history.pushState('index', 'Filemanager', 'index.html?path='); url_changed();">Return to root directory</span>`);
|
||||
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='); 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() {
|
||||
let curr_dir = get_path();
|
||||
let curr_dir = get_curr_path();
|
||||
|
||||
if (curr_dir !== null) {
|
||||
let dir = curr_dir.split('/');
|
||||
@ -94,48 +82,81 @@ function one_dir_back() {
|
||||
}
|
||||
|
||||
function save_file(filename, content) {
|
||||
document.getElementById('modal').style.display = 'none';
|
||||
httpPostAsync(base_url + filename, content, save_file_callback);
|
||||
}
|
||||
|
||||
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);
|
||||
remove_modal();
|
||||
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 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';
|
||||
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>
|
||||
<button onclick="remove_modal();" type="button" value="Discard">Discard</button>`;
|
||||
create_modal('Create Folder', content, footer);
|
||||
}
|
||||
|
||||
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';
|
||||
let content = `<div style="width: 100%; height: max-content;">
|
||||
<input id="input" placeholder="Name" style="width: calc(100% - 8px); margin: 10px 0 10px 0;">
|
||||
<textarea id="textarea" placeholder="Content..." style="width: calc(100% - 8px); height: 500px"></textarea>
|
||||
</div>`;
|
||||
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="remove_modal();" type="button" value="Discard">Discard</button>`;
|
||||
create_modal('Create File', content, footer);
|
||||
}
|
||||
|
||||
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 upload_file() {
|
||||
let content = `<input type="file" id="input" style="width: 100%; margin: 10px 0 10px 0;">`;
|
||||
let footer = `<button onclick="api_upload_file();" type="button" value="Save">Save</button>
|
||||
<button onclick="remove_modal();" type="button" value="Discard">Discard</button>`;
|
||||
create_modal('Upload File', content, footer);
|
||||
}
|
||||
|
||||
function get_path() {
|
||||
return findGetParameter('path');
|
||||
function api_create_folder(name) {
|
||||
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
28
Frontend/static/js/modal.js
Normal 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 || " "}</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 || " "}
|
||||
</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;
|
||||
}
|
||||
@ -11,30 +11,6 @@ function httpGetAsync(url, data, callback) {
|
||||
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 () {
|
||||
@ -46,7 +22,7 @@ function httpPostAsync(url, data, callback) {
|
||||
xmlHttp.open("POST", url, true);
|
||||
xmlHttp.setRequestHeader('Authorization', 'Basic ' + sessionStorage.getItem('authorization'));
|
||||
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
|
||||
xmlHttp.send('content=' + btoa(data));
|
||||
xmlHttp.send(data);
|
||||
}
|
||||
|
||||
function httpDeleteAsync(url, data, callback) {
|
||||
@ -73,4 +49,14 @@ function findGetParameter(parameterName) {
|
||||
if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
|
||||
});
|
||||
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();
|
||||
}
|
||||
@ -1,9 +1,27 @@
|
||||
function create_base_view() {
|
||||
let tmp = document.createElement('div');
|
||||
let tmp;
|
||||
tmp = document.createElement('div');
|
||||
tmp.innerHTML = `<div id="tree"></div>
|
||||
<div id="files"></div>`;
|
||||
|
||||
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() {
|
||||
@ -25,22 +43,53 @@ function create_login_view() {
|
||||
</div>
|
||||
</form>
|
||||
</div>`;
|
||||
document.getElementById("wrapper").innerHTML = '';
|
||||
document.getElementById("wrapper").appendChild(tmp.firstChild);
|
||||
document.getElementById("wrapper").innerHTML = tmp.innerHTML;
|
||||
}
|
||||
|
||||
function create_logout_view() {
|
||||
let logout = document.createElement('div');
|
||||
logout.classList.add('logout');
|
||||
logout.id = 'logout';
|
||||
logout.innerText = 'Logout';
|
||||
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);
|
||||
}
|
||||
|
||||
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) {
|
||||
let curr_dir = get_path();
|
||||
let curr_dir = get_curr_path();
|
||||
|
||||
let files = document.createElement('div');
|
||||
files.innerHTML = `<div id="path"></div>
|
||||
@ -58,10 +107,10 @@ function create_main_view(data) {
|
||||
</table>`;
|
||||
|
||||
// Previous directory
|
||||
if (curr_dir !== null && curr_dir !== '') {
|
||||
if (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();
|
||||
path_changed();
|
||||
}));
|
||||
}
|
||||
|
||||
@ -70,7 +119,7 @@ function create_main_view(data) {
|
||||
if (data[i]['Type'] === '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_changed();
|
||||
path_changed();
|
||||
}));
|
||||
}
|
||||
}
|
||||
@ -78,50 +127,19 @@ function create_main_view(data) {
|
||||
// Files
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
if (data[i]['Type'] !== 'dir') {
|
||||
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;
|
||||
}
|
||||
|
||||
files.getElementsByTagName('tbody')[0].appendChild(add_table_row(icon, data[i]['Name'], data[i]['Type'], curr_dir, true, function () {
|
||||
files.getElementsByTagName('tbody')[0].appendChild(add_table_row(get_icon(data[i]['Type']), 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_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) {
|
||||
let folders = curr_dir.split('/');
|
||||
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;
|
||||
@ -159,42 +177,49 @@ function add_table_row(icon, name, type, path, context, click_function) {
|
||||
}
|
||||
|
||||
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]) {
|
||||
case 'application':
|
||||
modal_content.innerHTML = ``;
|
||||
break;
|
||||
case 'audio':
|
||||
httpGetAsync(base_url + data + '?format=base64', null, show_audio_callback);
|
||||
break;
|
||||
case 'drawing':
|
||||
modal_content.innerHTML = ``;
|
||||
create_modal(`File: <span>${data}</span>`, ``);
|
||||
httpGetAsync(base_url + data + '?format=base64', null, function (response, code) {
|
||||
if (code === 200) {
|
||||
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;
|
||||
case 'image':
|
||||
httpGetAsync(base_url + data + '?format=base64', null, show_image_callback);
|
||||
break;
|
||||
case 'message':
|
||||
modal_content.innerHTML = ``;
|
||||
break;
|
||||
case 'multipart':
|
||||
modal_content.innerHTML = ``;
|
||||
create_modal(`File: <span>${data}</span>`, ``);
|
||||
httpGetAsync(base_url + data + '?format=base64', null, function (response, code) {
|
||||
if (code === 200) {
|
||||
change_modal_content(`<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='); path_changed();">Return to root directory</span>`);
|
||||
}
|
||||
});
|
||||
break;
|
||||
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;
|
||||
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;
|
||||
default:
|
||||
modal_content.innerHTML = ``;
|
||||
create_modal(`File: <span>${data}</span>`, `Cannot open file!`);
|
||||
break;
|
||||
}
|
||||
|
||||
title.innerHTML = `File: <span>${data}</span>`;
|
||||
|
||||
modal.style.display = "block";
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user