Basic file browser with edit and delete functionality

Can be shown by going to /popup_test in a second tab.
This commit is contained in:
ebolam
2022-06-30 09:44:04 -04:00
parent 979ea074f2
commit 58418c4aa5
26 changed files with 13587 additions and 7 deletions

View File

@ -2121,6 +2121,10 @@ $(document).ready(function(){
// Connect to SocketIO server
socket = io.connect(window.document.origin, {transports: ['polling', 'websocket'], closeOnBeforeunload: false});
socket.on('load_popup', function(data){load_popup(data);});
socket.on('popup_items', function(data){popup_items(data);});
socket.on('popup_breadcrumbs', function(data){popup_breadcrumbs(data);});
socket.on('popup_edit_file', function(data){popup_edit_file(data);});
socket.on('from_server', function(msg) {
//console.log(msg);
@ -3139,3 +3143,180 @@ $(document).ready(function(){
}
});
});
var popup_deleteable = false;
var popup_editable = false;
function load_popup(data) {
console.log(data);
popup_deleteable = data.deleteable;
popup_editable = data.editable;
var popup = document.getElementById("popup");
var popup_list = document.getElementById("popup_list");
//first, let's clear out our existing data
while (popup_list.firstChild) {
popup_list.removeChild(popup_list.firstChild);
}
var breadcrumbs = document.getElementById('popup_breadcrumbs');
while (breadcrumbs.firstChild) {
breadcrumbs.removeChild(breadcrumbs.firstChild);
}
popup.classList.remove("hidden");
//adjust accept button
var accept = document.getElementById("popup_accept");
accept.classList.add("btn-secondary");
accept.classList.remove("btn-primary");
accept.setAttribute("emit", data.call_back);
accept.setAttribute("selected_value", "");
accept.onclick = function () {
socket.emit(this.emit, this.getAttribute("selected_value"));
document.getElementById("popup").classList.add("hidden");
};
//adjust cancel button
var cancel = document.getElementById("popup_cancel");
cancel.onclick = function () {
document.getElementById("popup").classList.add("hidden");
};
}
function popup_items(data) {
var popup_list = document.getElementById('popup_list');
//first, let's clear out our existing data
while (popup_list.firstChild) {
popup_list.removeChild(popup_list.firstChild);
}
for (item of data) {
var list_item = document.createElement("span");
list_item.classList.add("item");
//create the folder icon
var folder_icon = document.createElement("span");
folder_icon.classList.add("folder_icon");
if (item[0]) {
folder_icon.classList.add("oi");
folder_icon.setAttribute('data-glyph', "folder");
}
list_item.append(folder_icon);
//create the edit icon
var edit_icon = document.createElement("span");
edit_icon.classList.add("edit_icon");
if ((popup_editable) && !(item[0])) {
edit_icon.classList.add("oi");
edit_icon.setAttribute('data-glyph', "pencil");
edit_icon.id = item[1];
edit_icon.onclick = function () {
socket.emit("popup_edit", this.id);
};
}
list_item.append(edit_icon);
//create the delete icon
var delete_icon = document.createElement("span");
delete_icon.classList.add("delete_icon");
if (popup_deleteable) {
delete_icon.classList.add("oi");
delete_icon.setAttribute('data-glyph', "x");
delete_icon.id = item[1];
delete_icon.setAttribute("folder", item[0]);
delete_icon.onclick = function () {
if (this.getAttribute("folder") == "true") {
if (window.confirm("Do you really want to delete this folder and ALL files under it?")) {
socket.emit("popup_delete", this.id);
}
} else {
if (window.confirm("Do you really want to delete this file?")) {
socket.emit("popup_delete", this.id);
}
}
};
}
list_item.append(delete_icon);
//create the actual item
var popup_item = document.createElement("span");
popup_item.classList.add("file");
popup_item.id = item[1];
popup_item.setAttribute("folder", item[0]);
popup_item.setAttribute("valid", item[3]);
popup_item.textContent = item[2];
popup_item.onclick = function () {
var accept = document.getElementById("popup_accept");
if (this.getAttribute("valid") == "true") {
accept.classList.remove("btn-secondary");
accept.classList.add("btn-primary");
accept.setAttribute("selected_value", this.id);
} else {
console.log("not valid");
accept.setAttribute("selected_value", "");
accept.classList.add("btn-secondary");
accept.classList.remove("btn-primary");
if (this.getAttribute("folder") == "true") {
console.log("folder");
socket.emit("popup_change_folder", this.id);
}
}
};
list_item.append(popup_item);
popup_list.append(list_item);
}
}
function popup_breadcrumbs(data) {
var breadcrumbs = document.getElementById('popup_breadcrumbs')
while (breadcrumbs.firstChild) {
breadcrumbs.removeChild(breadcrumbs.firstChild);
}
for (item of data) {
var button = document.createElement("button");
button.id = item[0];
button.textContent = item[1];
button.classList.add("breadcrumbitem");
button.onclick = function () {
socket.emit("popup_change_folder", this.id);
};
breadcrumbs.append(button);
var span = document.createElement("span");
span.textContent = "\\";
breadcrumbs.append(span);
}
}
function popup_edit_file(data) {
var popup_list = document.getElementById('popup_list');
//first, let's clear out our existing data
while (popup_list.firstChild) {
popup_list.removeChild(popup_list.firstChild);
}
var accept = document.getElementById("popup_accept");
accept.setAttribute("selected_value", "");
accept.onclick = function () {
var textarea = document.getElementById("filecontents");
socket.emit("popup_change_file", {"file": textarea.getAttribute("filename"), "data": textarea.value});
document.getElementById("popup").classList.add("hidden");
};
var textarea = document.createElement("textarea");
textarea.classList.add("fullwidth");
textarea.rows = 25;
textarea.id = "filecontents"
textarea.setAttribute("filename", data.file);
textarea.value = data.text;
textarea.onblur = function () {
var accept = document.getElementById("popup_accept");
accept.classList.remove("disabled");
};
popup_list.append(textarea);
}