237 lines
9.7 KiB
JavaScript
237 lines
9.7 KiB
JavaScript
function create_base_view() {
|
|
let tmp;
|
|
tmp = document.createElement('div');
|
|
tmp.innerHTML = `<div id="tree"></div>
|
|
<div id="files"></div>`;
|
|
|
|
document.getElementById("wrapper").innerHTML = tmp.innerHTML;
|
|
|
|
|
|
tmp = document.createElement('div');
|
|
tmp.innerHTML = `<div id='context_menu'>
|
|
<button id="download" onclick="download_file(this.parentElement.getAttribute('data-file-name'), this.parentElement.getAttribute('data-mimetype'));">Download</button>
|
|
<button id="remove" onclick="remove_file(this.parentElement.getAttribute('data-file-name'));">Remove</button>
|
|
</div>
|
|
|
|
<div class="new">
|
|
<button class="material-icon new_btn" type="button">add</button>
|
|
<div class="new_content">
|
|
<button class="material-icon" onclick="add_folder();" type="button">folder</button>
|
|
<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>`
|
|
document.getElementsByTagName('main')[0].appendChild(tmp);
|
|
}
|
|
|
|
function create_login_view() {
|
|
let tmp = document.createElement('div');
|
|
tmp.innerHTML = `<div id="login">
|
|
<form>
|
|
<h1>Login</h1>
|
|
<span id="error"></span>
|
|
<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").innerHTML = tmp.innerHTML;
|
|
}
|
|
|
|
function create_logout_view() {
|
|
let logout = document.createElement('div');
|
|
logout.id = 'logout';
|
|
logout.innerText = 'Logout';
|
|
logout.onclick = function () {
|
|
httpGetAsync(base_url + '/logout', null, function (response, code) {
|
|
if (code === 200) {
|
|
sessionStorage.removeItem('authorization');
|
|
document.getElementById('logout').remove();
|
|
document.getElementById('context_menu').parentElement.remove();
|
|
create_login_view();
|
|
} else {
|
|
try_to_parse_error(response);
|
|
}
|
|
});
|
|
}
|
|
document.getElementsByClassName('app-header')[0].appendChild(logout);
|
|
}
|
|
|
|
function get_icon(type) {
|
|
switch (type.split('/')[0]) {
|
|
case 'application':
|
|
return 'apps';
|
|
case 'audio':
|
|
return 'music_note';
|
|
case 'drawing':
|
|
return 'gesture';
|
|
case 'image':
|
|
return 'image';
|
|
case 'message':
|
|
return 'mail';
|
|
case 'multipart':
|
|
return 'note_add';
|
|
case 'text':
|
|
return 'description';
|
|
case 'video':
|
|
return 'movie';
|
|
default:
|
|
return 'article';
|
|
}
|
|
}
|
|
|
|
function create_main_view(data) {
|
|
let curr_dir = get_curr_path();
|
|
|
|
let files = document.createElement('div');
|
|
files.innerHTML = `<div id="path"></div>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th></th>
|
|
<th>Name</th>
|
|
<th>Type</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
</tbody>
|
|
</table>`;
|
|
|
|
// Previous directory
|
|
if (curr_dir !== '/') {
|
|
files.getElementsByTagName('tbody')[0].appendChild(add_table_row("", "..", "", "", false, function () {
|
|
window.history.pushState('index', 'Filemanager', 'index.html?path=' + one_dir_back());
|
|
path_changed();
|
|
}));
|
|
}
|
|
|
|
// Folders
|
|
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 = ''
|
|
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();
|
|
}));
|
|
}
|
|
}
|
|
|
|
// Files
|
|
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 = ''
|
|
if (curr_dir === '/') {
|
|
url = '/' + data[i]['Name'];
|
|
} else {
|
|
url = curr_dir + '/' + data[i]['Name'];
|
|
}
|
|
show_file_view(url, data[i]['Type']);
|
|
}));
|
|
}
|
|
}
|
|
|
|
// Path
|
|
let s = `<div onclick="window.history.pushState('index', 'Filemanager', 'index.html?path='); path_changed()" class="arrow-pointer" style="z-index: 1000"><span>/</span></div>`;
|
|
|
|
if (curr_dir !== null) {
|
|
let folders = curr_dir.split('/');
|
|
for (let i = 1; i < folders.length; i++) {
|
|
if (folders[i] !== '') s = s.concat(`<div onclick="window.history.pushState('index', 'Filemanager', 'index.html?path=${folders.slice(0, i + 1).join('/')}'); path_changed()" class="arrow-pointer" style="z-index: ${folders.length - i}"><span>${folders[i]}</span></div>`);
|
|
}
|
|
}
|
|
files.getElementsByTagName('div')[0].innerHTML = s;
|
|
|
|
document.getElementById("files").innerHTML = '';
|
|
document.getElementById("files").appendChild(files);
|
|
|
|
// Close contextmenu
|
|
document.getElementsByTagName('body')[0].addEventListener('click', function () {
|
|
document.getElementById('context_menu').style.display = 'none';
|
|
});
|
|
}
|
|
|
|
function add_table_row(icon, name, type, path, context, click_function) {
|
|
let tr = document.createElement('tr');
|
|
|
|
tr.style.cursor = 'pointer';
|
|
tr.onclick = click_function;
|
|
if (context) {
|
|
tr.addEventListener("contextmenu", function (e) {
|
|
document.getElementById('context_menu').setAttribute('data-file-name', path + '/' + name);
|
|
document.getElementById('context_menu').setAttribute('data-mimetype', type);
|
|
document.getElementById('context_menu').style.display = 'block';
|
|
document.getElementById('context_menu').style.left = e.pageX + 'px';
|
|
document.getElementById('context_menu').style.top = e.pageY + 'px';
|
|
e.preventDefault();
|
|
});
|
|
}
|
|
tr.innerHTML = `<tr>
|
|
<td><span class="material-icon">${icon}</span></td>
|
|
<td>${name}</td>
|
|
<td>${type}</td>
|
|
</tr>`;
|
|
return tr;
|
|
}
|
|
|
|
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>`);
|
|
} else {
|
|
try_to_parse_error(response);
|
|
}
|
|
});
|
|
break;
|
|
case 'image':
|
|
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 */
|
|
} else {
|
|
try_to_parse_error(response);
|
|
}
|
|
});
|
|
break;
|
|
case 'text':
|
|
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: calc(100% - 8px)">${response}</textarea></div>`);
|
|
} else {
|
|
try_to_parse_error(response);
|
|
}
|
|
});
|
|
break;
|
|
case 'video':
|
|
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>`);
|
|
} else {
|
|
try_to_parse_error(response);
|
|
}
|
|
});
|
|
break;
|
|
default:
|
|
create_modal(`File: <span>${data}</span>`, `Cannot open file!`);
|
|
break;
|
|
}
|
|
} |