- Download files
- Remove files - Create files - Refactoring - Bug fix
This commit is contained in:
parent
d6f2a4c1b2
commit
ca72812304
@ -6,6 +6,8 @@
|
||||
|
||||
<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/callbacks.js"></script>
|
||||
<script src="static/js/index.js"></script>
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
|
||||
@ -15,8 +17,11 @@
|
||||
<link rel="icon" href="favicon.ico" type="image/x-icon">
|
||||
|
||||
<link href="static/css/components.css" rel="stylesheet">
|
||||
<link href="static/css/login.css" rel="stylesheet">
|
||||
<link href="static/css/popup.css" rel="stylesheet">
|
||||
<link href="static/css/dropdown.css" rel="stylesheet">
|
||||
<link href="static/css/alert.css" rel="stylesheet">
|
||||
|
||||
<link href="static/css/login.css" rel="stylesheet">
|
||||
<link href="static/css/index.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
@ -27,24 +32,35 @@
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<div id='custom-menu'>
|
||||
<button id="download">Download</button>
|
||||
<button id="remove">Remove</button>
|
||||
<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 id="file_view" class="modal">
|
||||
<div id="modal" class="modal">
|
||||
<div id="content">
|
||||
<div class="modal-header">
|
||||
<h3 id="file_title"></h3>
|
||||
<span><i class="material-icons" onclick="document.getElementById('file_view').style.display = 'none'">close</i></span>
|
||||
<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 class="modal_content">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="new">
|
||||
<button type="button" class="material-icon new_btn">add</button>
|
||||
<div class="new_content">
|
||||
<button onclick="add_folder();" type="button" class="material-icon">folder</button>
|
||||
<button onclick="add_file();" type="button" class="material-icon">description</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<div id="error_wrapper">
|
||||
|
||||
@ -56,9 +72,7 @@
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<div class="box">
|
||||
<a href="impressum.html">Impressum</a>
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
41
Frontend/static/css/alert.css
Normal file
41
Frontend/static/css/alert.css
Normal file
@ -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;
|
||||
}
|
||||
@ -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 {
|
||||
|
||||
38
Frontend/static/css/dropdown.css
Normal file
38
Frontend/static/css/dropdown.css
Normal file
@ -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);
|
||||
}
|
||||
@ -8,7 +8,8 @@
|
||||
}
|
||||
|
||||
#error_wrapper {
|
||||
padding: 5px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
@ -24,7 +24,8 @@
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
margin: 5px;
|
||||
margin-bottom: 5px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
#login input {
|
||||
@ -36,3 +37,7 @@
|
||||
background-color: #0062ff;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
#error {
|
||||
color: #b61111;
|
||||
}
|
||||
48
Frontend/static/css/popup.css
Normal file
48
Frontend/static/css/popup.css
Normal file
@ -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);
|
||||
}
|
||||
21
Frontend/static/js/alert.js
Normal file
21
Frontend/static/js/alert.js
Normal file
@ -0,0 +1,21 @@
|
||||
function create_error_view(text) {
|
||||
let error = document.createElement('div');
|
||||
error.innerHTML = `<div class="alert alert-danger" onload="setTimeout(function() {console.log(this);}, 1000);">
|
||||
${text}
|
||||
<button type="button" onclick="this.parentElement.remove()" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
</div>`;
|
||||
|
||||
document.getElementById('error_wrapper').innerHTML = '';
|
||||
document.getElementById('error_wrapper').appendChild(error.firstChild);
|
||||
}
|
||||
|
||||
function create_success_view(text) {
|
||||
let error = document.createElement('div');
|
||||
error.innerHTML = `<div class="alert alert-success" onload="setTimeout(function() {this.remove();}, 1000);">
|
||||
${text}
|
||||
<button type="button" onclick="this.parentElement.remove()" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
</div>`;
|
||||
|
||||
document.getElementById('error_wrapper').innerHTML = '';
|
||||
document.getElementById('error_wrapper').appendChild(error.firstChild);
|
||||
}
|
||||
57
Frontend/static/js/callbacks.js
Normal file
57
Frontend/static/js/callbacks.js
Normal file
@ -0,0 +1,57 @@
|
||||
function remove_callback(response, code) {
|
||||
if (code === 200) {
|
||||
create_success_view("Successfully deleted.");
|
||||
url_changed();
|
||||
} else {
|
||||
create_error_view(response);
|
||||
}
|
||||
}
|
||||
|
||||
function save_file_callback(response, code) {
|
||||
if (code === 200) {
|
||||
create_success_view("Saved file successfully");
|
||||
} else {
|
||||
create_error_view(JSON.parse(response)['error']);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function show_image_callback(response, code) {
|
||||
if (code === 200) {
|
||||
document.getElementsByClassName("modal_content")[0].innerHTML = `<img style="width: 100%" src="data:image/png;base64, ${response}" alt="Image">`;
|
||||
} else {
|
||||
create_error_view(response['error'] + ` <span onclick="this.parentElement.children[1].click(); window.history.pushState('index', 'Filemanager', 'index.html?path='); url_changed();">Return to root directory</span>`);
|
||||
}
|
||||
}
|
||||
|
||||
function show_text_callback(response, code) {
|
||||
if (code === 200) {
|
||||
document.getElementsByClassName("modal_content")[0].innerHTML = `<textarea id="textarea" style="width: calc(100% - 8px); height: 90%">${response}</textarea>
|
||||
<button onclick="save_file(document.getElementById('modal_title').children[0].innerHTML, document.getElementById('textarea').value.trim())" type="button" value="Save">Save</button>
|
||||
<button onclick="document.getElementById('modal').style.display = 'none'" type="button" value="Discard">Discard</button>`;
|
||||
} else {
|
||||
create_error_view(response['error'] + ` <span onclick="this.parentElement.children[1].click(); window.history.pushState('index', 'Filemanager', 'index.html?path='); url_changed();">Return to root directory</span>`);
|
||||
}
|
||||
}
|
||||
|
||||
function show_audio_callback(response, code) {
|
||||
if (code === 200) {
|
||||
document.getElementsByClassName("modal_content")[0].innerHTML = `<audio controls>
|
||||
<source src="data:audio;base64, ${response}">
|
||||
Your browser does not support the audio element.
|
||||
</audio>`;
|
||||
} else {
|
||||
create_error_view(response['error'] + ` <span onclick="this.parentElement.children[1].click(); window.history.pushState('index', 'Filemanager', 'index.html?path='); url_changed();">Return to root directory</span>`);
|
||||
}
|
||||
}
|
||||
|
||||
function show_video_callback(response, code) {
|
||||
if (code === 200) {
|
||||
document.getElementsByClassName("modal_content")[0].innerHTML = `<video controls style="width: 100%;">
|
||||
<source src="data:video;base64, ${response}">
|
||||
Your browser does not support the audio element.
|
||||
</video>`;
|
||||
} else {
|
||||
create_error_view(response['error'] + ` <span onclick="this.parentElement.children[1].click(); window.history.pushState('index', 'Filemanager', 'index.html?path='); url_changed();">Return to root directory</span>`);
|
||||
}
|
||||
}
|
||||
@ -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 === '') {
|
||||
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,26 +62,20 @@ function login() {
|
||||
function show_files(response, code) {
|
||||
if (code === 200) {
|
||||
// OK
|
||||
create_file_view(JSON.parse(response));
|
||||
create_main_view(JSON.parse(response));
|
||||
} else if (code === 401) {
|
||||
// Not logged in
|
||||
sessionStorage.removeItem('authorization');
|
||||
create_login_view();
|
||||
create_error_view(`Your session is expired. <span onclick="this.parentElement.children[1].click(); create_login_view();">Log in again</span>`);
|
||||
} else {
|
||||
// Error
|
||||
console.error(code);
|
||||
console.error(JSON.parse(response));
|
||||
|
||||
response = JSON.parse(response);
|
||||
create_error_view(response['error']);
|
||||
|
||||
// sessionStorage.removeItem('authorization');
|
||||
// location.reload();
|
||||
create_error_view(response['error'] + ` <span onclick="this.parentElement.children[1].click(); window.history.pushState('index', 'Filemanager', 'index.html?path='); url_changed();">Return to root directory</span>`);
|
||||
}
|
||||
}
|
||||
|
||||
function one_dir_back() {
|
||||
let curr_dir = findGetParameter('path');
|
||||
let curr_dir = get_path();
|
||||
|
||||
if (curr_dir !== null) {
|
||||
let dir = curr_dir.split('/');
|
||||
@ -91,10 +88,49 @@ function one_dir_back() {
|
||||
return '';
|
||||
}
|
||||
|
||||
function load_file(name, type) {
|
||||
let curr_dir = findGetParameter('path');
|
||||
|
||||
if (curr_dir === null) curr_dir = '';
|
||||
|
||||
show_file_view(curr_dir + '/' + name, type);
|
||||
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);
|
||||
}
|
||||
|
||||
function add_folder() {
|
||||
document.getElementById('modal_title').innerText = 'Create Folder';
|
||||
|
||||
document.getElementsByClassName("modal_content")[0].innerHTML = `<input id="input" placeholder="Name" style="width: calc(100% - 8px); margin-bottom: 10px;">
|
||||
<button onclick="console.log(document.getElementById('input').value.trim())" type="button" value="Save">Save</button>
|
||||
<button onclick="document.getElementById('modal').style.display = 'none'" type="button" value="Discard">Discard</button>`;
|
||||
|
||||
document.getElementById('modal').style.display = 'block';
|
||||
}
|
||||
|
||||
function add_file() {
|
||||
document.getElementById('modal_title').innerText = 'Create File';
|
||||
|
||||
document.getElementsByClassName("modal_content")[0].innerHTML = `
|
||||
<input id="input" placeholder="Name" style="width: calc(100% - 8px); margin-bottom: 10px;">
|
||||
<textarea id="textarea" style="width: calc(100% - 8px); height: 90%"></textarea>
|
||||
<button onclick="create_text_file();" type="button" value="Save">Save</button>
|
||||
<button onclick="document.getElementById('modal').style.display = 'none'" type="button" value="Discard">Discard</button>
|
||||
`;
|
||||
|
||||
document.getElementById('modal').style.display = 'block';
|
||||
}
|
||||
|
||||
function create_text_file() {
|
||||
let path = get_path();
|
||||
if (path === null) path = '';
|
||||
save_file(path + '/' + document.getElementById('input').value.trim(), document.getElementById('textarea').value.trim());
|
||||
}
|
||||
|
||||
function get_path() {
|
||||
return findGetParameter('path');
|
||||
}
|
||||
@ -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) {
|
||||
|
||||
@ -1,8 +1,17 @@
|
||||
function create_base_view() {
|
||||
let tmp = document.createElement('div');
|
||||
tmp.innerHTML = `<div id="tree"></div>
|
||||
<div id="files"></div>`;
|
||||
|
||||
document.getElementById("wrapper").innerHTML = tmp.innerHTML;
|
||||
}
|
||||
|
||||
function create_login_view() {
|
||||
let tmp = document.createElement('div');
|
||||
tmp.innerHTML = `<div id="login">
|
||||
<form>
|
||||
<h1>Login</h1>
|
||||
<span id="error"></span>
|
||||
<div>
|
||||
<label for="username"></label>
|
||||
<input type="text" name="username" id="username" placeholder="Username" value="admin">
|
||||
@ -31,100 +40,93 @@ function create_logout_view() {
|
||||
document.getElementsByClassName('app-header')[0].appendChild(logout);
|
||||
}
|
||||
|
||||
function create_base_view() {
|
||||
let tmp = document.createElement('div');
|
||||
tmp.innerHTML = `<div id="tree"></div>
|
||||
<div id="files"></div>`;
|
||||
//
|
||||
// function create_tree_view_data(curr_dir) {
|
||||
// let url = base_url + curr_dir;
|
||||
//
|
||||
// const xmlHttp = new XMLHttpRequest();
|
||||
// xmlHttp.onreadystatechange = function () {
|
||||
// if (this.readyState === 4) {
|
||||
// if (xmlHttp.status === 200) {
|
||||
// let data = JSON.parse(xmlHttp.responseText);
|
||||
//
|
||||
// for (let i = 0; i < data.length; i++) {
|
||||
// if (data[i]['Type'] === 'dir') {
|
||||
// file_path.push(curr_dir + '/' + data[i]['Name']);
|
||||
// create_tree_view_data(curr_dir + '/' + data[i]['Name']);
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// tree = file_path.reduce((arr, path) => addPath(path.split('/'), arr), [])[0]['children'];
|
||||
// create_tree_view();
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// xmlHttp.open("GET", url, true);
|
||||
// xmlHttp.setRequestHeader('Authorization', 'Basic ' + sessionStorage.getItem('authorization'));
|
||||
// xmlHttp.send(null);
|
||||
// }
|
||||
//
|
||||
// function addPath(pathcomponents, arr) {
|
||||
// let component = pathcomponents.shift()
|
||||
// let comp = arr.find(item => item.text === component)
|
||||
// if (!comp) {
|
||||
// comp = {text: component}
|
||||
// arr.push(comp)
|
||||
// }
|
||||
// if (pathcomponents.length) {
|
||||
// addPath(pathcomponents, comp.children || (comp.children = []))
|
||||
// }
|
||||
// return arr
|
||||
// }
|
||||
//
|
||||
// function create_tree_view() {
|
||||
// let tree = document.createElement('div');
|
||||
// tree.innerHTML = `<ul id="tree_ul"></ul> `;
|
||||
//
|
||||
// document.getElementById("tree").innerHTML = '';
|
||||
// create_list_view(this.tree, document.getElementById("tree"), '');
|
||||
//
|
||||
// // Remove nested-class from root element
|
||||
// document.getElementsByTagName('ul')[0].classList.remove('nested')
|
||||
//
|
||||
// let toggler = document.getElementsByClassName("folder");
|
||||
// for (let i = 0; i < toggler.length; i++) {
|
||||
// toggler[i].addEventListener("click", function () {
|
||||
// if (this.parentElement.querySelector(".nested") !== null) {
|
||||
// this.parentElement.querySelector(".nested").classList.toggle("active");
|
||||
// }
|
||||
// this.classList.toggle("folder-open");
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// function tree_onclick(url) {
|
||||
// window.history.pushState('index', 'Filemanager', 'index.html?path=' + url);
|
||||
// url_changed();
|
||||
// }
|
||||
//
|
||||
// function create_list_view(dataRoot, elementRoot, url) {
|
||||
// if (dataRoot) {
|
||||
// const list = document.createElement('ul');
|
||||
// list.classList.add('nested');
|
||||
// elementRoot.appendChild(list);
|
||||
//
|
||||
// Object.keys(dataRoot).forEach(key => {
|
||||
// // // Create a text node and a list element to put it in
|
||||
// const listElement = document.createElement('li');
|
||||
// listElement.innerHTML = `<span class="folder" onclick="tree_onclick('${url}/${dataRoot[key].text}');">${dataRoot[key].text}</span>`;
|
||||
// list.appendChild(listElement);
|
||||
//
|
||||
// // Continue recursively down now using the current list element
|
||||
// create_list_view(dataRoot[key]['children'], listElement, url + '/' + dataRoot[key].text);
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
|
||||
document.getElementById("wrapper").innerHTML = tmp.innerHTML;
|
||||
}
|
||||
|
||||
function create_tree_view_data(curr_dir) {
|
||||
let url = base_url + curr_dir;
|
||||
|
||||
const xmlHttp = new XMLHttpRequest();
|
||||
xmlHttp.onreadystatechange = function () {
|
||||
if (this.readyState === 4) {
|
||||
if (xmlHttp.status === 200) {
|
||||
let data = JSON.parse(xmlHttp.responseText);
|
||||
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
if (data[i]['Type'] === 'dir') {
|
||||
file_path.push(curr_dir + '/' + data[i]['Name']);
|
||||
create_tree_view_data(curr_dir + '/' + data[i]['Name']);
|
||||
}
|
||||
}
|
||||
|
||||
tree = file_path.reduce((arr, path) => addPath(path.split('/'), arr), [])[0]['children'];
|
||||
create_tree_view();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
xmlHttp.open("GET", url, true);
|
||||
xmlHttp.setRequestHeader('Authorization', 'Basic ' + sessionStorage.getItem('authorization'));
|
||||
xmlHttp.send(null);
|
||||
}
|
||||
|
||||
function addPath(pathcomponents, arr ){
|
||||
let component = pathcomponents.shift()
|
||||
let comp = arr.find(item => item.text === component)
|
||||
if (!comp) {
|
||||
comp = {text: component}
|
||||
arr.push(comp)
|
||||
}
|
||||
if(pathcomponents.length){
|
||||
addPath(pathcomponents, comp.children || (comp.children = []))
|
||||
}
|
||||
return arr
|
||||
}
|
||||
|
||||
function create_tree_view() {
|
||||
let tree = document.createElement('div');
|
||||
tree.innerHTML = `<ul id="tree_ul"></ul> `;
|
||||
|
||||
document.getElementById("tree").innerHTML = '';
|
||||
create_list_view(this.tree, document.getElementById("tree"), '');
|
||||
|
||||
// Remove nested-class from root element
|
||||
document.getElementsByTagName('ul')[0].classList.remove('nested')
|
||||
|
||||
let toggler = document.getElementsByClassName("folder");
|
||||
for (let i = 0; i < toggler.length; i++) {
|
||||
toggler[i].addEventListener("click", function () {
|
||||
if(this.parentElement.querySelector(".nested") !== null) {
|
||||
this.parentElement.querySelector(".nested").classList.toggle("active");
|
||||
}
|
||||
this.classList.toggle("folder-open");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function tree_onclick(url) {
|
||||
window.history.pushState('index', 'Filemanager', 'index.html?path=' + url);
|
||||
url_listener();
|
||||
}
|
||||
|
||||
function create_list_view(dataRoot, elementRoot, url) {
|
||||
if (dataRoot) {
|
||||
const list = document.createElement('ul');
|
||||
list.classList.add('nested');
|
||||
elementRoot.appendChild(list);
|
||||
|
||||
Object.keys(dataRoot).forEach(key => {
|
||||
// // Create a text node and a list element to put it in
|
||||
const listElement = document.createElement('li');
|
||||
listElement.innerHTML = `<span class="folder" onclick="tree_onclick('${url}/${dataRoot[key].text}');">${dataRoot[key].text}</span>`;
|
||||
list.appendChild(listElement);
|
||||
|
||||
// Continue recursively down now using the current list element
|
||||
create_list_view(dataRoot[key]['children'], listElement, url + '/' + dataRoot[key].text);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function create_file_view(data) {
|
||||
let curr_dir = findGetParameter('path');
|
||||
function create_main_view(data) {
|
||||
let curr_dir = get_path();
|
||||
|
||||
let files = document.createElement('div');
|
||||
files.innerHTML = `<div id="path"></div>
|
||||
@ -137,82 +139,75 @@ function create_file_view(data) {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr id="back" style="cursor: pointer" onclick="window.history.pushState('index', 'Filemanager', 'index.html?path=' + one_dir_back()); url_listener()">
|
||||
<td data-order="___"></td>
|
||||
<td>..</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>`;
|
||||
|
||||
// Previous directory
|
||||
if (curr_dir !== null && curr_dir !== '') {
|
||||
files.getElementsByTagName('tbody')[0].appendChild(add_table_row("", "..", "", "", false, function () {
|
||||
window.history.pushState('index', 'Filemanager', 'index.html?path=' + one_dir_back());
|
||||
url_changed();
|
||||
}));
|
||||
}
|
||||
|
||||
// Folders
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
if (data[i]['Type'] === 'dir') {
|
||||
let folder = document.createElement('tr');
|
||||
folder.style = 'cursor: pointer;';
|
||||
folder.onclick = function () {
|
||||
if (curr_dir === null) curr_dir = '';
|
||||
files.getElementsByTagName('tbody')[0].appendChild(add_table_row("folder", data[i]['Name'], "directory", curr_dir, true, function () {
|
||||
window.history.pushState('index', 'Filemanager', 'index.html?path=' + curr_dir + '/' + data[i]['Name']);
|
||||
url_listener();
|
||||
};
|
||||
folder.innerHTML = `<td data-order="__"><span class="material-icon">folder</span></td>
|
||||
<td>${data[i]['Name']}</td>
|
||||
<td>directory</td>`;
|
||||
files.getElementsByTagName('tbody')[0].appendChild(folder);
|
||||
url_changed();
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
// Files
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
if (data[i]['Type'] !== 'dir') {
|
||||
let file = document.createElement('tr');
|
||||
file.style = 'cursor: pointer;';
|
||||
file.onclick = function () {
|
||||
load_file(data[i]['Name'], data[i]['Type']);
|
||||
};
|
||||
|
||||
let icon = 'article';
|
||||
if (data[i]['Type'].indexOf("application") >= 0) {
|
||||
let icon = '';
|
||||
switch (data[i]['Type'].split('/')[0]) {
|
||||
case 'application':
|
||||
icon = 'apps';
|
||||
} else if (data[i]['Type'].indexOf("audio") >= 0) {
|
||||
break;
|
||||
case 'audio':
|
||||
icon = 'music_note';
|
||||
} else if (data[i]['Type'].indexOf("drawing") >= 0) {
|
||||
break;
|
||||
case 'drawing':
|
||||
icon = 'gesture';
|
||||
} else if (data[i]['Type'].indexOf("image") >= 0) {
|
||||
break;
|
||||
case 'image':
|
||||
icon = 'image';
|
||||
} else if (data[i]['Type'].indexOf("message") >= 0) {
|
||||
break;
|
||||
case 'message':
|
||||
icon = 'mail';
|
||||
} else if (data[i]['Type'].indexOf("multipart") >= 0) {
|
||||
break;
|
||||
case 'multipart':
|
||||
icon = 'note_add';
|
||||
} else if (data[i]['Type'].indexOf("text") >= 0) {
|
||||
break;
|
||||
case 'text':
|
||||
icon = 'description';
|
||||
} else if (data[i]['Type'].indexOf("video") >= 0) {
|
||||
break;
|
||||
case 'video':
|
||||
icon = 'movie';
|
||||
break;
|
||||
default:
|
||||
icon = 'article';
|
||||
break;
|
||||
}
|
||||
|
||||
file.innerHTML = `<td data-order="__"><span class="material-icon">${icon}</span></td>
|
||||
<td>${data[i]['Name']}</td>
|
||||
<td>${data[i]['Type']}</td>`;
|
||||
|
||||
file.addEventListener("contextmenu", function(e) {
|
||||
document.getElementById('custom-menu').style.display = 'block';
|
||||
document.getElementById('custom-menu').style.left = e.pageX + 'px';
|
||||
document.getElementById('custom-menu').style.top = e.pageY + 'px';
|
||||
console.log(this.innerHTML.split('<td>')[1].split('</td>')[0]);
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
files.getElementsByTagName('tbody')[0].appendChild(file);
|
||||
files.getElementsByTagName('tbody')[0].appendChild(add_table_row(icon, data[i]['Name'], data[i]['Type'], curr_dir, true, function () {
|
||||
show_file_view(curr_dir + '/' + data[i]['Name'], data[i]['Type']);
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
// Path
|
||||
let s = `<div onclick="window.history.pushState('index', 'Filemanager', 'index.html?path='); url_listener()" class="arrow-pointer" style="z-index: 1000"><span>/</span></div>`;
|
||||
let s = `<div onclick="window.history.pushState('index', 'Filemanager', 'index.html?path='); url_changed()" class="arrow-pointer" style="z-index: 1000"><span>/</span></div>`;
|
||||
|
||||
if (curr_dir !== null) {
|
||||
let folders = curr_dir.split('/');
|
||||
for (let i = 1; i < folders.length; i++) {
|
||||
s = s.concat(`<div onclick="window.history.pushState('index', 'Filemanager', 'index.html?path=${folders.slice(0, i + 1).join('/')}'); url_listener()" class="arrow-pointer" style="z-index: ${folders.length - i}"><span>${folders[i]}</span></div>`);
|
||||
if (folders[i] !== '') s = s.concat(`<div onclick="window.history.pushState('index', 'Filemanager', 'index.html?path=${folders.slice(0, i + 1).join('/')}'); url_changed()" class="arrow-pointer" style="z-index: ${folders.length - i}"><span>${folders[i]}</span></div>`);
|
||||
}
|
||||
}
|
||||
files.getElementsByTagName('div')[0].innerHTML = s;
|
||||
@ -222,92 +217,70 @@ function create_file_view(data) {
|
||||
|
||||
// Close contextmenu
|
||||
document.getElementsByTagName('body')[0].addEventListener('click', function () {
|
||||
document.getElementById('custom-menu').style.display = 'none';
|
||||
document.getElementById('context_menu').style.display = 'none';
|
||||
});
|
||||
}
|
||||
|
||||
function create_error_view(text) {
|
||||
let error = document.createElement('div');
|
||||
error.innerHTML = `<div class="error">
|
||||
<span class="text">${text}. Go <span style="cursor:pointer;" onclick="window.history.back(); document.getElementById('error_wrapper').innerHTML = '';">back</span></span>
|
||||
<span><i class="material-icons" onclick="document.getElementById('error_wrapper').innerHTML = '';">close</i></span>
|
||||
</div>`;
|
||||
function add_table_row(icon, name, type, path, context, click_function) {
|
||||
let tr = document.createElement('tr');
|
||||
|
||||
document.getElementById('error_wrapper').appendChild(error.firstChild);
|
||||
tr.style.cursor = 'pointer';
|
||||
tr.onclick = click_function;
|
||||
if (context) {
|
||||
tr.addEventListener("contextmenu", function (e) {
|
||||
document.getElementById('context_menu').setAttribute('data-file-name', path + '/' + name);
|
||||
document.getElementById('context_menu').setAttribute('data-mimetype', type);
|
||||
document.getElementById('context_menu').style.display = 'block';
|
||||
document.getElementById('context_menu').style.left = e.pageX + 'px';
|
||||
document.getElementById('context_menu').style.top = e.pageY + 'px';
|
||||
e.preventDefault();
|
||||
});
|
||||
}
|
||||
tr.innerHTML = `<tr>
|
||||
<td><span class="material-icon">${icon}</span></td>
|
||||
<td>${name}</td>
|
||||
<td>${type}</td>
|
||||
</tr>`;
|
||||
return tr;
|
||||
}
|
||||
|
||||
function show_file_view(data, type) {
|
||||
let modal = document.getElementById("file_view");
|
||||
let title = document.getElementById("file_title");
|
||||
let modal_content = document.getElementsByClassName("modal-content")[0];
|
||||
let modal = document.getElementById("modal");
|
||||
let title = document.getElementById("modal_title");
|
||||
let modal_content = document.getElementsByClassName("modal_content")[0];
|
||||
|
||||
|
||||
if (type.indexOf("application") >= 0) {
|
||||
switch (type.split('/')[0]) {
|
||||
case 'application':
|
||||
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) {
|
||||
break;
|
||||
case 'audio':
|
||||
httpGetAsync(base_url + data + '?format=base64', null, show_audio_callback);
|
||||
break;
|
||||
case 'drawing':
|
||||
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) {
|
||||
break;
|
||||
case 'image':
|
||||
httpGetAsync(base_url + data + '?format=base64', null, show_image_callback);
|
||||
break;
|
||||
case 'message':
|
||||
modal_content.innerHTML = ``;
|
||||
} else if (type.indexOf("multipart") >= 0) {
|
||||
break;
|
||||
case 'multipart':
|
||||
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 {
|
||||
break;
|
||||
case 'text':
|
||||
httpGetAsync(base_url + data, null, show_text_callback);
|
||||
break;
|
||||
case 'video':
|
||||
httpGetAsync(base_url + data + '?format=base64', null, show_video_callback);
|
||||
break;
|
||||
default:
|
||||
modal_content.innerHTML = ``;
|
||||
break;
|
||||
}
|
||||
|
||||
title.innerText = `File: ${data}`;
|
||||
title.innerHTML = `File: <span>${data}</span>`;
|
||||
|
||||
modal.style.display = "block";
|
||||
}
|
||||
|
||||
function show_image_data(response, code) {
|
||||
if (code === 200) {
|
||||
document.getElementsByClassName("modal-content")[0].innerHTML = `<img style="width: 100%" src="data:image/png;base64, ${response}" alt="Image">`;
|
||||
} else {
|
||||
console.log(code + " " + response);
|
||||
}
|
||||
}
|
||||
|
||||
function show_text_data(response, code) {
|
||||
if (code === 200) {
|
||||
document.getElementsByClassName("modal-content")[0].innerHTML = `<textarea style="width: calc(100% - 8px); height: 90%">${response}</textarea>
|
||||
<button type="button" value="Save">Save</button>
|
||||
<button type="button" value="SaveAs">Save As</button>
|
||||
<button type="button" value="Discard">Discard</button>`;
|
||||
} else {
|
||||
console.log(code + " " + response);
|
||||
}
|
||||
}
|
||||
|
||||
function show_audio_data(response, code) {
|
||||
if (code === 200) {
|
||||
document.getElementsByClassName("modal-content")[0].innerHTML = `<audio controls>
|
||||
<source src="data:audio;base64, ${response}">
|
||||
Your browser does not support the audio element.
|
||||
</audio>`;
|
||||
} else {
|
||||
console.log(code + " " + response);
|
||||
}
|
||||
}
|
||||
|
||||
function show_video_data(response, code) {
|
||||
if (code === 200) {
|
||||
document.getElementsByClassName("modal-content")[0].innerHTML = `<video controls style="width: 100%;">
|
||||
<source src="data:video;base64, ${response}">
|
||||
Your browser does not support the audio element.
|
||||
</video>`;
|
||||
} else {
|
||||
console.log(code + " " + response);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user