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

- Improved documentation

Browse Source 
- Added images
    - Fixed mistakes
- Added build script for zip file
This commit is contained in:
Administrator
2021-07-29 14:37:02 +02:00
parent 45e5e759d9
commit 87353a48ff
24 changed files with 253 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,3 +1,4 @@
// Error view
function create_error_view(text) {
let id = get_random_id();
let error = document.createElement('div');
@@ -17,6 +18,8 @@ function create_error_view(text) {
}, 10000);
}
// Success view
function create_success_view(text) {
let id = get_random_id();
let error = document.createElement('div');

1
Frontend/static/js/dropdown.js
View File

@@ -18,6 +18,7 @@ function download_file(path, mimetype) {
});
}
function remove_file(filename) {
httpDeleteAsync(base_url + filename, null, function (response, code) {
if (code === 200) {

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

@@ -1,5 +1,6 @@
let tree = {};
// Recursively create data
function create_tree_data(curr_dir) {
let url = base_url + curr_dir;
@@ -27,6 +28,8 @@ function create_tree_data(curr_dir) {
xmlHttp.send(null);
}
// Show tree
function create_tree_view() {
let html_tree = document.createElement('div');
html_tree.innerHTML = `<ul id="tree_ul"></ul>`;
@@ -48,11 +51,14 @@ function create_tree_view() {
}
}
// Change directory
function tree_onclick(url) {
window.history.pushState('index', 'Filemanager', 'index.html?path=' + url);
path_changed();
}
function create_list_view(dataRoot, elementRoot, url) {
if (dataRoot) {
const list = document.createElement('ul');
@@ -69,6 +75,7 @@ function create_list_view(dataRoot, elementRoot, url) {
}
}
function addPath(pathcomponents, arr) {
let component = pathcomponents.shift()
let comp = arr.find(item => item.text === component)

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

@@ -1,4 +1,4 @@
let base_url = 'http://localhost:8080'; //'http://192.168.178.98:8080';
let base_url = 'http://192.168.178.98:8080'; //'http://localhost:8080';
let file_path = [];
let timeout = null;
@@ -15,15 +15,21 @@ window.addEventListener('load', function () {
}
});
// For / back buttons
window.addEventListener('popstate', function () {
path_changed();
});
// Function that is used to load content
function path_changed() {
let curr_dir = get_curr_path();
httpGetAsync(base_url + curr_dir, null, show_files);
}
// Login
function login() {
let username = document.getElementById("username").value;
let password = document.getElementById("password").value;
@@ -46,6 +52,8 @@ function login() {
});
}
// Show content
function show_files(response, code) {
if (code === 200) {
// OK
@@ -60,6 +68,8 @@ function show_files(response, code) {
}
}
// Go one dir up
function one_dir_back() {
let curr_dir = get_curr_path();
@@ -74,17 +84,21 @@ function one_dir_back() {
return '';
}
// Save textfile
function save_file(filename, content) {
remove_modal();
httpPostAsync(base_url + filename, 'content=' + btoa(content), function (response, code) {
if (code === 200) {
create_success_view("Saved file successfully");
path_changed();
} else {
try_to_parse_error(response);
}
});
}
function add_folder() {
let content = `<input id="input" placeholder="Name" style="width: 100%; margin: 10px 0 10px 0;">`;
let footer = `<button onclick="api_create_folder(document.getElementById('input').value.trim())" type="button" value="Save">Save</button>
@@ -92,6 +106,7 @@ function add_folder() {
create_modal('Create Folder', content, footer);
}
function add_file() {
let content = `<div style="width: 100%; height: max-content;">
<input id="input" placeholder="Name" style="width: calc(100% - 8px); margin: 10px 0 10px 0;">
@@ -102,6 +117,7 @@ function add_file() {
create_modal('Create File', content, footer);
}
function upload_file() {
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>
@@ -109,6 +125,7 @@ function upload_file() {
create_modal('Upload File', content, footer);
}
function api_create_folder(name) {
httpPostAsync(base_url + get_curr_path() + '/' + name, 'type=dir', function (response, code) {
remove_modal();
@@ -122,6 +139,7 @@ function api_create_folder(name) {
});
}
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;
@@ -131,6 +149,8 @@ function api_upload_file() {
});
}
// Get current path from url
function get_curr_path() {
let curr_dir = findGetParameter('path');
if (curr_dir === null) {
@@ -142,7 +162,7 @@ function get_curr_path() {
curr_dir = '/' + curr_dir;
}
if(curr_dir === '') curr_dir = '/';
if (curr_dir === '') curr_dir = '/';
return curr_dir;
}

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

@@ -1,3 +1,4 @@
// open modal
function create_modal(title, content, footer) {
let div = document.createElement('div');
div.innerHTML = `<div id="modal">
@@ -23,10 +24,13 @@ function create_modal(title, content, footer) {
document.body.appendChild(div.firstChild);
}
// remove modal
function remove_modal() {
document.getElementById('modal').remove();
}
// change content
function change_modal_content(content) {
document.getElementById("modal_content").innerHTML = content;
}

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

@@ -8,20 +8,21 @@ function httpGetAsync(url, data, callback) {
}
callback(xmlHttp.responseText, xmlHttp.status);
}
}
};
xmlHttp.open("GET", url, true);
xmlHttp.setRequestHeader('Authorization', 'Basic ' + sessionStorage.getItem('authorization'));
xmlHttp.send(null);
xmlHttp.send();
}
function httpPostAsync(url, data, callback) {
const xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function () {
if (this.readyState === 4) {
callback(xmlHttp.responseText, xmlHttp.status);
}
}
};
xmlHttp.open("POST", url, true);
xmlHttp.setRequestHeader('Authorization', 'Basic ' + sessionStorage.getItem('authorization'));
@@ -29,19 +30,20 @@ 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){
xmlHttp.upload.addEventListener("progress", function (event) {
let progressBar = document.getElementById("upload_progress");
let progress = (event.loaded/event.total)*100;
let progress = (event.loaded / event.total) * 100;
progressBar.value = progress;
console.log(progress)
console.log(progress);
});
xmlHttp.open("POST", url, true);
@@ -49,19 +51,22 @@ function httpUploadAsync(url, data, callback) {
xmlHttp.send(data);
}
function httpDeleteAsync(url, data, callback) {
const xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function () {
if (this.readyState === 4) {
callback(xmlHttp.responseText, xmlHttp.status);
}
}
};
xmlHttp.open("DELETE", url, true);
xmlHttp.setRequestHeader('Authorization', 'Basic ' + sessionStorage.getItem('authorization'));
xmlHttp.send();
}
// Timeout for logout
function startTimeout() {
return setTimeout(function () {
sessionStorage.removeItem('authorization');
@@ -71,6 +76,8 @@ function startTimeout() {
}, 600000);
}
// Find get parameter in url
function findGetParameter(parameterName) {
let result = null,
tmp = [];
@@ -84,16 +91,20 @@ function findGetParameter(parameterName) {
return result;
}
// Generate random id
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();
}
// Parse error
function try_to_parse_error(message) {
try {
message = JSON.parse(message);

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

@@ -1,3 +1,4 @@
// Show base after login
function create_base_view() {
let tmp;
tmp = document.createElement('div');
@@ -20,10 +21,12 @@ function create_base_view() {
<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>`
</div>`;
document.getElementsByTagName('main')[0].appendChild(tmp);
}
// Show login
function create_login_view() {
let tmp = document.createElement('div');
tmp.innerHTML = `<div id="login">
@@ -32,11 +35,11 @@ function create_login_view() {
<span id="error"></span>
<div>
<label for="username"></label>
<input type="text" name="username" id="username" placeholder="Username" value="admin">
<input type="text" name="username" id="username" placeholder="Username">
</div>
<div>
<label for="password"></label>
<input type="password" name="password" id="password" placeholder="Password" value="admin">
<input type="password" name="password" id="password" placeholder="Password">
</div>
<div>
<button type="button" value="Login" onclick="login();">Login</button>
@@ -46,6 +49,8 @@ function create_login_view() {
document.getElementById("wrapper").innerHTML = tmp.innerHTML;
}
// Add logout button
function create_logout_view() {
let logout = document.createElement('div');
logout.id = 'logout';
@@ -61,10 +66,12 @@ function create_logout_view() {
try_to_parse_error(response);
}
});
}
};
document.getElementsByClassName('app-header')[0].appendChild(logout);
}
// Get icon for filetype
function get_icon(type) {
switch (type.split('/')[0]) {
case 'application':
@@ -88,6 +95,8 @@ function get_icon(type) {
}
}
// Create content
function create_main_view(data) {
let curr_dir = get_curr_path();
@@ -118,7 +127,7 @@ 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 () {
let url = ''
let url;
if (curr_dir === '/') {
url = 'index.html?path=' + curr_dir + data[i]['Name'];
} else {
@@ -134,7 +143,7 @@ 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 () {
let url = ''
let url;
if (curr_dir === '/') {
url = '/' + data[i]['Name'];
} else {
@@ -165,6 +174,8 @@ function create_main_view(data) {
});
}
// Create table row
function add_table_row(icon, name, type, path, context, click_function) {
let tr = document.createElement('tr');
@@ -188,13 +199,15 @@ function add_table_row(icon, name, type, path, context, click_function) {
return tr;
}
// Open file
function show_file_view(data, type) {
switch (type.split('/')[0]) {
case 'audio':
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>`);
change_modal_content(`<audio controls><source src="data:${type};base64, ${response}">Your browser does not support the audio element.</audio>`);
} else {
try_to_parse_error(response);
}
@@ -204,7 +217,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(`<img style="width: 100%" src="data:image/png;base64, ${response}" alt="Image">`); /* TODO */
change_modal_content(`<img style="width: 100%" src="data:${type};base64, ${response}" alt="Image">`);
} else {
try_to_parse_error(response);
}
@@ -224,7 +237,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%; height: 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:${type};base64, ${response}">Your browser does not support the audio element.</video>`);
} else {
try_to_parse_error(response);
}