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

- Refactoring

Browse Source 
- Code cleanup
- Reformatting
This commit is contained in:
Administrator 2021-05-31 09:53:12 +02:00
parent ca72812304
commit 2e693eb93a
8 changed files with 122 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
Frontend/index.html
View File

@ -7,14 +7,15 @@
<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/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">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
<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">
@ -40,11 +41,12 @@
<button id="remove" onclick="remove_file(this.parentElement.getAttribute('data-file-name'));">Remove</button>
</div>
<div id="modal" class="modal">
<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>
<span><i class="material-icons"
onclick="document.getElementById('modal').style.display = 'none'">close</i></span>
</div>
<hr>
<div class="modal_content">
@ -54,10 +56,10 @@
</div>
<div class="new">
<button type="button" class="material-icon new_btn">add</button>
<button class="material-icon new_btn" type="button">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>
<button class="material-icon" onclick="add_folder();" type="button">folder</button>
<button class="material-icon" onclick="add_file();" type="button">description</button>
</div>
</div>

9
Frontend/static/css/dropdown.css
View File

@ -1,6 +1,6 @@
#context_menu {
#context_menu {
display: none;
z-index:100000;
z-index: 100000;
position: absolute;
background-color: rgb(229, 229, 229);
border-width: 1px;
@ -10,10 +10,11 @@
width: 12em;
font-size: 12px;
overflow: hidden;
white-space:nowrap;
white-space: nowrap;
list-style: none;
margin: 0;
}
#context_menu button {
display: block;
padding: 5px;
@ -24,11 +25,13 @@
text-align: left;
color: #333;
}
#context_menu button:hover {
background-color: #DDD;
cursor: pointer;
color: #000;
}
#context_menu button > span {
display: inline;
position: absolute;

2
Frontend/static/css/popup.css
View File

@ -8,7 +8,7 @@
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0, 0.8);
background-color: rgba(0, 0, 0, 0.8);
}
#content {

9
Frontend/static/js/callbacks.js
View File

@ -1,3 +1,12 @@
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.");

85
Frontend/static/js/generate_directory_tree.js Normal file
View File

@ -0,0 +1,85 @@
let tree = {};
function create_tree_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_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 create_tree_view() {
let html_tree = document.createElement('div');
html_tree.innerHTML = `<ul id="tree_ul"></ul>`;
document.getElementById("tree").innerHTML = '';
create_list_view(tree, document.getElementById("tree"), '');
// Remove nested-class from root element
document.getElementsByTagName('ul')[0].classList.remove('nested')
let icon = document.getElementsByClassName("folder");
for (let i = 0; i < icon.length; i++) {
icon[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);
});
}
}
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
}

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

@ -1,13 +1,12 @@
base_url = 'http://localhost:8080'; //'http://192.168.178.98:8080';
file_path = [];
tree = {};
window.addEventListener('load', function () {
if (sessionStorage.getItem("authorization") !== null) {
console.log('Logged in');
create_base_view();
create_logout_view();
// create_tree_view_data('');
create_tree_data('');
url_changed();
} else {
console.log('Not logged in');
@ -46,10 +45,12 @@ function login() {
create_base_view();
create_logout_view();
// create_tree_view_data('');
create_tree_data('');
url_changed();
} else {
} else if (xmlHttp.status === 401) {
create_error_view("Wrong username or password!");
} else {
create_error_view("Unknown error!");
}
}
}
@ -69,8 +70,12 @@ function show_files(response, code) {
create_error_view(`Your session is expired. <span onclick="this.parentElement.children[1].click(); create_login_view();">Log in again</span>`);
} else {
// Error
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>`);
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>`);
} 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>`);
}
}
}

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

@ -62,20 +62,6 @@ function httpDeleteAsync(url, data, callback) {
xmlHttp.send();
}
function httpPutAsync(url, data, callback) {
const xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function () {
if (this.readyState === 4) {
callback(xmlHttp.responseText, xmlHttp.status);
}
}
xmlHttp.open("PUT", url, true);
xmlHttp.setRequestHeader('Authorization', 'Basic ' + sessionStorage.getItem('authorization'));
xmlHttp.setRequestHeader('Content-Type', 'application/json');
xmlHttp.send(JSON.stringify(data));
}
function findGetParameter(parameterName) {
let result = null,
tmp = [];

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

@ -34,97 +34,11 @@ function create_logout_view() {
logout.classList.add('logout');
logout.innerText = 'Logout';
logout.onclick = function () {
sessionStorage.removeItem('authorization');
location.reload();
httpGetAsync(base_url + '/logout', null, logout_callback);
}
document.getElementsByClassName('app-header')[0].appendChild(logout);
}
//
// 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);
// });
// }
// }
function create_main_view(data) {
let curr_dir = get_path();