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

- design fixes

Browse Source 
- auto logout
- upload file
This commit is contained in:
Administrator 2021-07-06 23:15:18 +02:00
parent 1d8f624adf
commit 9cffe4e427
13 changed files with 123 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.idea/.gitignore generated vendored Normal file
View File

@ -0,0 +1,5 @@
# Default ignored files
/shelf/
/workspace.xml
# Editor-based HTTP Client requests
/httpRequests/

12
.idea/Webengineering-Filemanager.iml generated Normal file
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

6
.idea/discord.xml generated Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="DiscordProjectSettings">
<option name="show" value="PROJECT_FILES" />
</component>
</project>

8
.idea/modules.xml generated Normal file
View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/Webengineering-Filemanager.iml" filepath="$PROJECT_DIR$/.idea/Webengineering-Filemanager.iml" />
</modules>
</component>
</project>

6
.idea/vcs.xml generated Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$" vcs="Git" />
</component>
</project>

2
Frontend/index.html
View File

@ -2,6 +2,8 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta charset="UTF-8" content="width=device-width" name="viewport"/>
<title>File Manager</title> <title>File Manager</title>
<script src="static/js/views.js"></script> <script src="static/js/views.js"></script>

1
Frontend/static/css/index.css
View File

@ -17,7 +17,6 @@
margin: 5px; margin: 5px;
height: 100%; height: 100%;
width: 30%; width: 30%;
max-width: 400px;
border-right: #404040 2px solid; border-right: #404040 2px solid;
} }

10
Frontend/static/css/modal.css
View File

@ -2,11 +2,9 @@
position: fixed; position: fixed;
z-index: 100000; z-index: 100000;
padding-top: 100px; padding-top: 100px;
left: 0; padding-bottom: 100px;
top: 0;
width: 100%; width: 100%;
height: 100%; height: calc(100% - 200px);
overflow: auto;
background-color: rgba(0, 0, 0, 0.8); background-color: rgba(0, 0, 0, 0.8);
} }
@ -16,6 +14,7 @@
padding: 20px; padding: 20px;
border: 1px solid #888; border: 1px solid #888;
width: 90%; width: 90%;
height: 100%;
border-radius: 5px; border-radius: 5px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -51,9 +50,10 @@
#modal_content { #modal_content {
display: flex; display: flex;
flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: #fefefe; background-color: #fefefe;
width: 100%; width: 100%;
height: calc(100% - 16px - 2em); height: 90%;
} }

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

@ -1,5 +1,6 @@
base_url = 'http://localhost:8080'; //'http://192.168.178.98:8080'; let base_url = 'http://localhost:8080'; //'http://192.168.178.98:8080';
file_path = []; let file_path = [];
let timeout = null;
window.addEventListener('load', function () { window.addEventListener('load', function () {
if (sessionStorage.getItem("authorization") !== null) { if (sessionStorage.getItem("authorization") !== null) {
@ -20,17 +21,6 @@ window.addEventListener('popstate', function () {
function path_changed() { function path_changed() {
let curr_dir = get_curr_path(); let curr_dir = get_curr_path();
// TODO show opened directory in tree-view
// let tree_elem = document.getElementById(curr_dir.replaceAll('/', '-'));
// console.log(curr_dir.replaceAll('/', '-'))
// if(tree_elem !== undefined && tree_elem !== null) {
// tree_elem.classList.toggle('folder-open');
//
// if (tree_elem.parentElement.querySelector(".nested") !== null) {
// tree_elem.parentElement.querySelector(".nested").classList.toggle("active");
// }
// }
httpGetAsync(base_url + curr_dir, null, show_files); httpGetAsync(base_url + curr_dir, null, show_files);
} }
@ -46,12 +36,14 @@ function login() {
create_logout_view(); create_logout_view();
create_tree_data(''); create_tree_data('');
path_changed(); path_changed();
timeout = startTimeout();
} else if (code === 401) { } else if (code === 401) {
create_error_view("Wrong username or password!"); create_error_view("Wrong username or password!");
} else { } else {
try_to_parse_error(response); try_to_parse_error(response);
} }
}) });
} }
function show_files(response, code) { function show_files(response, code) {
@ -111,7 +103,7 @@ function add_file() {
} }
function upload_file() { function upload_file() {
let content = `<input type="file" id="input" style="width: 100%; margin: 10px 0 10px 0;">`; let content = `<form enctype="multipart/form-data"><input type="file" id="newFile" name="newFile" style="width: 100%; margin: 10px 0 10px 0;"></form><progress style="width: 100%;" min=0 max=100 value="0" id="upload_progress"/>`;
let footer = `<button onclick="api_upload_file();" type="button" value="Save">Save</button> let footer = `<button onclick="api_upload_file();" type="button" value="Save">Save</button>
<button onclick="remove_modal();" type="button" value="Discard">Discard</button>`; <button onclick="remove_modal();" type="button" value="Discard">Discard</button>`;
create_modal('Upload File', content, footer); create_modal('Upload File', content, footer);
@ -130,17 +122,13 @@ function api_create_folder(name) {
}); });
} }
function api_upload_file() { // TODO function api_upload_file() {
let files = document.getElementById('modal_content').children[0].children[0].files[0]; let formData = new FormData(document.getElementById('modal_content').children[0]);
console.log(files); let filename = document.getElementById('modal_content').children[0].children[0].files[0].name;
httpUploadAsync(base_url + get_curr_path() + '/' + filename, formData, function () {
// let formData = new FormData(); remove_modal();
// formData.append('local', files, files.name); path_changed();
// });
// httpPostAsync(base_url + get_curr_path() + '/' + files.name, 'newFile=' + formData, function (response, code) {
// console.log(code)
// console.log(response)
// })
} }
function get_curr_path() { function get_curr_path() {
@ -154,5 +142,7 @@ function get_curr_path() {
curr_dir = '/' + curr_dir; curr_dir = '/' + curr_dir;
} }
if(curr_dir === '') curr_dir = '/';
return curr_dir; return curr_dir;
} }

20
Frontend/static/js/modal.js
View File

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

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

@ -2,6 +2,10 @@ function httpGetAsync(url, data, callback) {
const xmlHttp = new XMLHttpRequest(); const xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function () { xmlHttp.onreadystatechange = function () {
if (this.readyState === 4) { if (this.readyState === 4) {
if (this.status !== 401) {
clearTimeout(timeout);
timeout = startTimeout();
}
callback(xmlHttp.responseText, xmlHttp.status); callback(xmlHttp.responseText, xmlHttp.status);
} }
} }
@ -25,6 +29,26 @@ function httpPostAsync(url, data, callback) {
xmlHttp.send(data); xmlHttp.send(data);
} }
function httpUploadAsync(url, data, callback) {
const xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function () {
if (this.readyState === 4) {
callback(xmlHttp.responseText, xmlHttp.status);
}
}
xmlHttp.upload.addEventListener("progress",function(event){
let progressBar = document.getElementById("upload_progress");
let progress = (event.loaded/event.total)*100;
progressBar.value = progress;
console.log(progress)
});
xmlHttp.open("POST", url, true);
xmlHttp.setRequestHeader('Authorization', 'Basic ' + sessionStorage.getItem('authorization'));
xmlHttp.send(data);
}
function httpDeleteAsync(url, data, callback) { function httpDeleteAsync(url, data, callback) {
const xmlHttp = new XMLHttpRequest(); const xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function () { xmlHttp.onreadystatechange = function () {
@ -38,6 +62,15 @@ function httpDeleteAsync(url, data, callback) {
xmlHttp.send(); xmlHttp.send();
} }
function startTimeout() {
return setTimeout(function () {
sessionStorage.removeItem('authorization');
document.getElementById('logout').remove();
document.getElementById('context_menu').parentElement.remove();
create_login_view();
}, 600000);
}
function findGetParameter(parameterName) { function findGetParameter(parameterName) {
let result = null, let result = null,
tmp = []; tmp = [];

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

@ -118,7 +118,13 @@ function create_main_view(data) {
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') {
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']); let url = ''
if (curr_dir === '/') {
url = 'index.html?path=' + curr_dir + data[i]['Name'];
} else {
url = 'index.html?path=' + curr_dir + '/' + data[i]['Name'];
}
window.history.pushState('index', 'Filemanager', url);
path_changed(); path_changed();
})); }));
} }
@ -128,7 +134,13 @@ function create_main_view(data) {
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') {
files.getElementsByTagName('tbody')[0].appendChild(add_table_row(get_icon(data[i]['Type']), 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']); let url = ''
if (curr_dir === '/') {
url = '/' + data[i]['Name'];
} else {
url = curr_dir + '/' + data[i]['Name'];
}
show_file_view(url, data[i]['Type']);
})); }));
} }
} }
@ -192,17 +204,17 @@ function show_file_view(data, type) {
create_modal(`File: <span>${data}</span>`, ``); create_modal(`File: <span>${data}</span>`, ``);
httpGetAsync(base_url + data + '?format=base64', null, function (response, code) { httpGetAsync(base_url + data + '?format=base64', null, function (response, code) {
if (code === 200) { if (code === 200) {
change_modal_content(`<img style="width: 100%" src="data:image/png;base64, ${response}" alt="Image">`); change_modal_content(`<img style="width: 100%" src="data:image/png;base64, ${response}" alt="Image">`); /* TODO */
} else { } else {
try_to_parse_error(response); try_to_parse_error(response);
} }
}); });
break; break;
case 'text': case 'text':
create_modal(`File: <span>${data}</span>`, ``); create_modal(`File: <span>${data}</span>`, ``, `<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>`);
httpGetAsync(base_url + data, null, function (response, code) { httpGetAsync(base_url + data, null, function (response, code) {
if (code === 200) { 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>`); change_modal_content(`<div style="width: 100%; height: 100%"><textarea id="textarea" style="width: calc(100% - 8px); height: calc(100% - 8px)">${response}</textarea></div>`);
} else { } else {
try_to_parse_error(response); try_to_parse_error(response);
} }
@ -212,7 +224,7 @@ function show_file_view(data, type) {
create_modal(`File: <span>${data}</span>`, ``); create_modal(`File: <span>${data}</span>`, ``);
httpGetAsync(base_url + data + '?format=base64', null, function (response, code) { httpGetAsync(base_url + data + '?format=base64', null, function (response, code) {
if (code === 200) { 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>`); change_modal_content(`<video controls style="width: 100%; height: 100%;"><source src="data:video;base64, ${response}">Your browser does not support the audio element.</video>`);
} else { } else {
try_to_parse_error(response); try_to_parse_error(response);
} }

BIN
WebService/auth.db Normal file
View File

Binary file not shown.