initial commit file manager project
This commit is contained in:
104
Frontend/static/js/index.js
Normal file
104
Frontend/static/js/index.js
Normal file
@@ -0,0 +1,104 @@
|
||||
tree = [];
|
||||
|
||||
window.addEventListener('load', function () {
|
||||
console.log('All assets are loaded');
|
||||
|
||||
if (sessionStorage.getItem("authorization") !== null) {
|
||||
console.log('Logged in');
|
||||
url_listener();
|
||||
} else {
|
||||
console.log('Not logged in');
|
||||
create_login_view();
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('popstate', function () {
|
||||
url_listener();
|
||||
});
|
||||
|
||||
function url_listener() {
|
||||
let curr_dir = findGetParameter('path');
|
||||
|
||||
if (curr_dir !== null) {
|
||||
httpGetAsync('http://localhost:8080' + curr_dir, null, show_files);
|
||||
} else {
|
||||
httpGetAsync('http://localhost:8080', null, show_files);
|
||||
}
|
||||
}
|
||||
|
||||
function login() {
|
||||
let username = document.getElementById("username").value;
|
||||
let password = document.getElementById("password").value;
|
||||
|
||||
const xmlHttp = new XMLHttpRequest();
|
||||
xmlHttp.onreadystatechange = function () {
|
||||
if (this.readyState === 4) {
|
||||
if (xmlHttp.status === 200) {
|
||||
console.log(username + ':' + JSON.parse(xmlHttp.responseText)['token'])
|
||||
sessionStorage.setItem("authorization", btoa(username + ':' + JSON.parse(xmlHttp.responseText)['token']));
|
||||
|
||||
httpGetAsync('http://localhost:8080', null, show_files);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
xmlHttp.open("POST", 'http://localhost:8080/login', true);
|
||||
xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
|
||||
xmlHttp.send('username=' + username + '&password=' + password);
|
||||
}
|
||||
|
||||
function show_files(response, code) {
|
||||
document.getElementById("wrapper").innerHTML = '';
|
||||
if (code === 200) {
|
||||
// OK
|
||||
console.log(code);
|
||||
console.log(JSON.parse(response));
|
||||
create_file_view(JSON.parse(response));
|
||||
} else if (code === 401) {
|
||||
// Not logged in
|
||||
sessionStorage.removeItem('authorization');
|
||||
// location.reload();
|
||||
} else {
|
||||
// Error
|
||||
console.error(code);
|
||||
console.error(JSON.parse(response));
|
||||
sessionStorage.removeItem('authorization');
|
||||
// location.reload();
|
||||
}
|
||||
}
|
||||
|
||||
function one_dir_back() {
|
||||
let curr_dir = findGetParameter('path');
|
||||
|
||||
let dir = curr_dir.split('/');
|
||||
dir = dir.slice(0, dir.length - 1);
|
||||
curr_dir = dir.join('/');
|
||||
|
||||
return curr_dir;
|
||||
}
|
||||
|
||||
// function change_dir(name) {
|
||||
// let curr_dir = findGetParameter('path');
|
||||
//
|
||||
// if(curr_dir === null) {
|
||||
// curr_dir = '';
|
||||
// }
|
||||
//
|
||||
// if (name === '..') {
|
||||
// let dir = curr_dir.split('/');
|
||||
// dir = dir.slice(0, dir.length - 1);
|
||||
// curr_dir = dir.join('/');
|
||||
//
|
||||
// httpGetAsync('http://localhost:8080' + curr_dir, null, show_files);
|
||||
// window.history.pushState('index', 'Filemanager', 'index.html?path=' + curr_dir);
|
||||
// } else {
|
||||
// httpGetAsync('http://localhost:8080' + curr_dir + '/' + name, null, show_files);
|
||||
// window.history.pushState('index', 'Filemanager', 'index.html?path=' + curr_dir + '/' + name);
|
||||
// }
|
||||
// }
|
||||
|
||||
function load_file(name) {
|
||||
let curr_dir = findGetParameter('path');
|
||||
|
||||
console.log(curr_dir + '/' + name);
|
||||
}
|
||||
67
Frontend/static/js/tools.js
Normal file
67
Frontend/static/js/tools.js
Normal file
@@ -0,0 +1,67 @@
|
||||
function httpGetAsync(url, data, callback) { // data includes auth
|
||||
const xmlHttp = new XMLHttpRequest();
|
||||
xmlHttp.onreadystatechange = function () {
|
||||
if (this.readyState === 4) {
|
||||
callback(xmlHttp.responseText, xmlHttp.status);
|
||||
}
|
||||
}
|
||||
|
||||
console.log(url)
|
||||
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 () {
|
||||
if (this.readyState === 4) {
|
||||
callback(xmlHttp.responseText, xmlHttp.status);
|
||||
}
|
||||
}
|
||||
|
||||
xmlHttp.open("POST", url, true);
|
||||
xmlHttp.setRequestHeader('Authorization', 'Basic ' + sessionStorage.getItem('authorization'));
|
||||
xmlHttp.setRequestHeader('Content-Type', 'application/json');
|
||||
xmlHttp.send(JSON.stringify(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();
|
||||
}
|
||||
|
||||
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 = [];
|
||||
location.search
|
||||
.substr(1)
|
||||
.split("&")
|
||||
.forEach(function (item) {
|
||||
tmp = item.split("=");
|
||||
if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
|
||||
});
|
||||
return result;
|
||||
}
|
||||
116
Frontend/static/js/views.js
Normal file
116
Frontend/static/js/views.js
Normal file
@@ -0,0 +1,116 @@
|
||||
function create_login_view() {
|
||||
let tmp = document.createElement('div');
|
||||
tmp.innerHTML = `<div id="login">
|
||||
<form>
|
||||
<h1>Login</h1>
|
||||
<div>
|
||||
<label for="username"></label>
|
||||
<input type="text" name="username" id="username" placeholder="Username" value="admin">
|
||||
</div>
|
||||
<div>
|
||||
<label for="password"></label>
|
||||
<input type="password" name="password" id="password" placeholder="Password" value="admin">
|
||||
</div>
|
||||
<div>
|
||||
<button type="button" value="Login" onclick="login();">Login</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>`;
|
||||
document.getElementById("wrapper").appendChild(tmp.firstChild);
|
||||
}
|
||||
|
||||
// function create_tree_view(data) {
|
||||
// let curr_dir = findGetParameter('path');
|
||||
// let path = curr_dir.split('/');
|
||||
//
|
||||
// for (let i = 0; i < data.length; i++) {
|
||||
// if (tree[path[0]] === null) {
|
||||
// tree[path[0]] = {};
|
||||
// }
|
||||
//
|
||||
// if (data[i]['Type'] === 'dir') {
|
||||
//
|
||||
// }
|
||||
// }
|
||||
// console.log(data)
|
||||
// }
|
||||
|
||||
function create_file_view(data) {
|
||||
let curr_dir = findGetParameter('path');
|
||||
|
||||
let tmp = document.createElement('div');
|
||||
tmp.innerHTML = `<div id="wrapper1">
|
||||
<div id="tree">Div 1</div>
|
||||
<div id="files">
|
||||
<div id="path"></div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Icon</th>
|
||||
<th>Name</th>
|
||||
<th>Größe</th>
|
||||
<th>Datum</th>
|
||||
</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>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
// Folders
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
if (data[i]['Type'] === 'dir') {
|
||||
let tmp1 = document.createElement('tr');
|
||||
tmp1.style = 'cursor: pointer;';
|
||||
tmp1.onclick = function () {
|
||||
if (curr_dir === null) curr_dir = '';
|
||||
window.history.pushState('index', 'Filemanager', 'index.html?path=' + curr_dir + '/' + data[i]['Name']);
|
||||
url_listener();
|
||||
};
|
||||
tmp1.innerHTML = `<td data-order="__"><span class="material-icon">folder</span></td>
|
||||
<td>${data[i]['Name']}</td>
|
||||
<td>--</td>
|
||||
<td>--</td>`;
|
||||
tmp.getElementsByTagName('tbody')[0].appendChild(tmp1);
|
||||
}
|
||||
}
|
||||
|
||||
// Files
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
if (data[i]['Type'] !== 'dir') {
|
||||
let tmp1 = document.createElement('tr');
|
||||
tmp1.style = 'cursor: pointer;';
|
||||
tmp1.onclick = function () {
|
||||
if (curr_dir === null) curr_dir = '';
|
||||
load_file(curr_dir, data[i]['Name']);
|
||||
};
|
||||
tmp1.innerHTML = `<td data-order="__"><span class="material-icon">description</span></td>
|
||||
<td>${data[i]['Name']}</td>
|
||||
<td>--</td>
|
||||
<td>--</td>`;
|
||||
tmp.getElementsByTagName('tbody')[0].appendChild(tmp1);
|
||||
}
|
||||
}
|
||||
|
||||
// Path
|
||||
let tmp1 = document.createElement('div');
|
||||
let s = `<div onclick="window.history.pushState('index', 'Filemanager', 'index.html?path='); url_listener()" class="arrow-pointer" style="cursor: pointer;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="cursor: pointer;z-index: ${folders.length - i}"><span>${folders[i]}</span></div>`);
|
||||
}
|
||||
}
|
||||
tmp1.innerHTML = s;
|
||||
tmp.getElementsByTagName('div')[3].appendChild(tmp1);
|
||||
|
||||
document.getElementById("wrapper").appendChild(tmp.firstChild);
|
||||
}
|
||||
Reference in New Issue
Block a user