mirror of
https://github.com/KoboldAI/KoboldAI-Client.git
synced 2025-06-05 21:59:24 +02:00
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:
@ -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);
|
||||
|
||||
}
|
||||
|
Reference in New Issue
Block a user