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">
<head>
<meta charset="UTF-8">
<meta charset="UTF-8" content="width=device-width" name="viewport"/>
<title>File Manager</title>
<script src="static/js/views.js"></script>

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

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

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

@ -2,11 +2,9 @@
position: fixed;
z-index: 100000;
padding-top: 100px;
left: 0;
top: 0;
padding-bottom: 100px;
width: 100%;
height: 100%;
overflow: auto;
height: calc(100% - 200px);
background-color: rgba(0, 0, 0, 0.8);
}
@ -16,6 +14,7 @@
padding: 20px;
border: 1px solid #888;
width: 90%;
height: 100%;
border-radius: 5px;
display: flex;
flex-direction: column;
@ -51,9 +50,10 @@
#modal_content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #fefefe;
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';
file_path = [];
let base_url = 'http://localhost:8080'; //'http://192.168.178.98:8080';
let file_path = [];
let timeout = null;
window.addEventListener('load', function () {
if (sessionStorage.getItem("authorization") !== null) {
@ -20,17 +21,6 @@ window.addEventListener('popstate', function () {
function path_changed() {
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);
}
@ -46,12 +36,14 @@ function login() {
create_logout_view();
create_tree_data('');
path_changed();
timeout = startTimeout();
} else if (code === 401) {
create_error_view("Wrong username or password!");
} else {
try_to_parse_error(response);
}
})
});
}
function show_files(response, code) {
@ -111,7 +103,7 @@ function add_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>
<button onclick="remove_modal();" type="button" value="Discard">Discard</button>`;
create_modal('Upload File', content, footer);
@ -130,17 +122,13 @@ function api_create_folder(name) {
});
}
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 api_upload_file() {
let formData = new FormData(document.getElementById('modal_content').children[0]);
let filename = document.getElementById('modal_content').children[0].children[0].files[0].name;
httpUploadAsync(base_url + get_curr_path() + '/' + filename, formData, function () {
remove_modal();
path_changed();
});
}
function get_curr_path() {
@ -154,5 +142,7 @@ function get_curr_path() {
curr_dir = '/' + curr_dir;
}
if(curr_dir === '') curr_dir = '/';
return curr_dir;
}

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

@ -2,20 +2,24 @@ function create_modal(title, content, footer) {
let div = document.createElement('div');
div.innerHTML = `<div id="modal">
<div id="content">
<div>
<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>
<div id="modal_content">
${content}
</div>
<div>
<div class="divider"></div>
<div id="modal_footer">
${footer || "&nbsp"}
</div>
</div>
</div>`
</div>
</div>`;
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();
xmlHttp.onreadystatechange = function () {
if (this.readyState === 4) {
if (this.status !== 401) {
clearTimeout(timeout);
timeout = startTimeout();
}
callback(xmlHttp.responseText, xmlHttp.status);
}
}
@ -25,6 +29,26 @@ function httpPostAsync(url, data, callback) {
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) {
const xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function () {
@ -38,6 +62,15 @@ function httpDeleteAsync(url, data, callback) {
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) {
let result = null,
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++) {
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']);
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();
}));
}
@ -128,7 +134,13 @@ function create_main_view(data) {
for (let i = 0; i < data.length; i++) {
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 () {
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>`, ``);
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">`);
change_modal_content(`<img style="width: 100%" src="data:image/png;base64, ${response}" alt="Image">`); /* TODO */
} else {
try_to_parse_error(response);
}
});
break;
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) {
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 {
try_to_parse_error(response);
}
@ -212,7 +224,7 @@ function show_file_view(data, type) {
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>`);
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 {
try_to_parse_error(response);
}

BIN
WebService/auth.db Normal file
View File

Binary file not shown.