From f939d19e9bcb0cc0cf048aa0c8037f1f9c5a8c8b Mon Sep 17 00:00:00 2001 From: Roland Stigge Date: Fri, 5 Jan 2018 21:03:31 +0100 Subject: Initial commit, basic working webbox (WIP), see TODO --- html/webbox.js | 446 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 446 insertions(+) create mode 100644 html/webbox.js (limited to 'html/webbox.js') diff --git a/html/webbox.js b/html/webbox.js new file mode 100644 index 0000000..3bcbf8d --- /dev/null +++ b/html/webbox.js @@ -0,0 +1,446 @@ +var currentDir = "/"; +var listElements; +var numberOfSelectedRows = 0; + +function loadContents(dir) { + numberOfSelectedRows = 0; + + var xhr = new XMLHttpRequest(); + + xhr.onreadystatechange = function() { + if (this.readyState != 4 || this.status != 200) { + return; + } + + var list = xhr.responseXML; + listElements = list.getElementsByTagName("listentry"); + + var result = ""; + + if (listElements.length == 0) { + result += ""; + } else { + for (var i = 0; i < listElements.length; i++) { + var type = listElements[i].getAttribute("type"); + + result += ""; + } + } + + result += "
(empty)
" + type + "" + listElements[i].childNodes[0].nodeValue + "
" + + listElement = document.getElementById("list"); + + listElement.innerHTML = result; + + } + + xhr.open("GET", "/bin/query" + currentDir + "?command=list", true); + xhr.send(); +} + +// return list of file names +function getFileList() { + var result = []; + + for (var i = 0; i < listElements.length; i++) { + result.push(listElements[i].childNodes[0].nodeValue); + } + + return result; +} + +function getFileType(filename) { + for (var i = 0; i < listElements.length; i++) { + if (listElements[i].childNodes[0].nodeValue == filename) { + return listElements[i].getAttribute("type"); + } + } + return ""; +} + +function getRow(filename) { + var list = document.getElementById("list"); + var rows = list.getElementsByTagName("tr"); + + for (var i = 0; i < rows.length; i++) { + var nameElement = rows[i].getElementsByClassName("name")[0]; + if (nameElement.childNodes[0].nodeValue == filename) { + return rows[i]; + } + } + return ""; +} + +// return list of files +function getSelectedFiles() { + var result = []; + var list = document.getElementById("list"); + var rows = list.getElementsByTagName("tr"); + + for (var i = 0; i < rows.length; i++) { + if (rows[i].classList.contains("selectedrow")) { + result.push(rows[i].getElementsByClassName("name")[0].childNodes[0].nodeValue); + } + } + + return result; +} + +/* +var debugc = 0; + +function debugf() { + debug1 = document.getElementById("debug1"); + debug1.innerHTML = debugc; + debugc++; +} +*/ + +// As long as this is 1, the mouse was pressed less than 1 second ago +var mouseShortFlag = 0; +var mouseTimeout = undefined; + +function getSelection(filename) { + var row = getRow(filename); + + if (row.classList.contains("selectedrow")) { + return true; + } + return false; +} + +function clearSelection(filename) { + var row = getRow(filename); + + if (row.classList.contains("selectedrow")) { + row.classList.remove("selectedrow"); + numberOfSelectedRows--; + } +} + +function setSelection(filename) { + var row = getRow(filename); + + if (!row.classList.contains("selectedrow")) { + row.classList.add("selectedrow"); + numberOfSelectedRows++; + } +} + +function toggleSelection(filename) { + var row = getRow(filename); + + if (row.classList.contains("selectedrow")) { + row.classList.remove("selectedrow"); + numberOfSelectedRows--; + } else { + row.classList.add("selectedrow"); + numberOfSelectedRows++; + } +} + +function mouseTimeoutFunction(filename) { + mouseShortFlag = 0; + toggleSelection(filename); +} + +function entryMouseDown(filename) { + if (mouseTimeout !== undefined) { + clearTimeout(mouseTimeout); + } + + if (numberOfSelectedRows > 0) { + toggleSelection(filename); + } else { + mouseShortFlag = 1; + mouseTimeout = setTimeout(function(){ mouseTimeoutFunction(filename); }, 1000); + } +} + +function entryMouseUp(filename) { + if (mouseTimeout !== undefined) { + clearTimeout(mouseTimeout); + } + + // short click: download / change dir + if (mouseShortFlag) { + var type = getFileType(filename); + if (type == "file") { + download(filename); + } else if (type == "dir") { + if (filename == "..") { + if (!currentDir.includes("/")) { + alert("Bad path " + currentDir + " for " + filename); + return; + } + currentDir = currentDir.substr(0, currentDir.lastIndexOf("/")); + + if (currentDir == "") { + currentDir = "/"; + } + + setCurrentDir(currentDir); + return; + } + + if (!currentDir.endsWith("/")) { + currentDir += "/"; + } + setCurrentDir(currentDir + filename); + } + } + + mouseShortFlag = 0; +} + +function showDialog() { + document.getElementById("greyout").style.display = 'block'; + document.getElementById("dialogwindow").style.display = 'block'; +} + +function hideDialog() { + document.getElementById("greyout").style.display = 'none'; + document.getElementById("dialogwindow").style.display = 'none'; +} + +function initMainpage() { + setCurrentDir("/"); + + // default action for "Cancel" button: hide dialog window + document.getElementById("cancelbutton").onclick = hideDialog; + + // on Escape, hide dialog window + document.onkeydown = function(evt) { + if (evt.key == "Escape") { + hideDialog(); + } + }; + + // load title + var xhrTitle = new XMLHttpRequest(); + + xhrTitle.onreadystatechange = function() { + if (this.readyState != 4 || this.status != 200) { + return; + } + document.getElementsByClassName("title")[0].innerHTML = xhrTitle.responseText; + } + + xhrTitle.open("GET", "/bin/query?command=title", true); + xhrTitle.send(); + + // load footer + var xhrFooter = new XMLHttpRequest(); + + xhrFooter.onreadystatechange = function() { + if (this.readyState != 4 || this.status != 200) { + return; + } + document.getElementsByClassName("footer")[0].innerHTML = xhrFooter.responseText; + } + + xhrFooter.open("GET", "/bin/query?command=version", true); + xhrFooter.send(); +} + +function setCurrentDir(newDir) { + currentDir = newDir; + loadContents(newDir); + + var menu = document.getElementsByClassName("menu")[0]; + var firsttd = menu.getElementsByClassName("firsttd")[0]; + firsttd.innerHTML = newDir; +} + +function download(filename) { + if (filename === undefined) { // download selection as ZIP + showDialog(); + + var files = getSelectedFiles(); + if (files.length == 0) { + document.getElementById("dialog").innerHTML = "No files selected."; + document.getElementById("okbutton").onclick = hideDialog; + return; + } + + document.getElementById("dialog").innerHTML = document.getElementById("download-zip-dialog").innerHTML; + + document.getElementById("okbutton").onclick = function() { + hideDialog(); + + // send info request for files + var xhr = new XMLHttpRequest(); + + xhr.onreadystatechange = function() { + if (this.readyState != 4 || this.status != 200) { + return; + } + + var a = document.getElementById("download-a"); + var file = new Blob([this.response]); + a.href = window.URL.createObjectURL(file); + a.click(); + } + + var files = getSelectedFiles(); + var parser = new DOMParser(); + var xmlDocument = parser.parseFromString("", "text/xml"); + var filesElement = xmlDocument.getElementsByTagName("files")[0]; + + for (var i = 0; i < files.length; i++) { + var fileElement = xmlDocument.createElement("file"); + fileElement.appendChild(document.createTextNode(files[i])); + filesElement.appendChild(fileElement); + } + + xhr.open("POST", "/bin/query" + currentDir + "?command=download-zip", true); + xhr.setRequestHeader("Content-type", "text/xml"); + xhr.send(xmlDocument); + } + } else { + var dir = currentDir; + if (dir != "/") { + dir += "/" + } + document.location.href = "/bin/query" + dir + filename; + } +} + +function createDir() { + showDialog(); + + // hide dialog when done + document.getElementById("okbutton").onclick = function() { + // send new folder request for directory + var xhr = new XMLHttpRequest(); + + xhr.onreadystatechange = function() { + if (this.readyState != 4 || this.status != 200) { + return; + } + + document.getElementById("dialog").innerHTML = xhr.responseText; + document.getElementById("okbutton").onclick = hideDialog; + loadContents(currentDir); // load new file list with new dir + } + + var parser = new DOMParser(); + var xmlDocument = parser.parseFromString("", "text/xml"); + var dirElement = xmlDocument.getElementsByTagName("dirname")[0]; + + dirElement.appendChild(document.createTextNode(document.getElementById("newdir").value)); + + xhr.open("POST", "/bin/query" + currentDir + "?command=newdir", true); + xhr.setRequestHeader("Content-type", "text/xml"); + xhr.send(xmlDocument); + } + + document.getElementById("dialog").innerHTML = document.getElementById("create-dir-dialog").innerHTML; +} + +function upload() { + var uploadfile = document.getElementById("uploadfile"); + + uploadfile.click(); +} + +function onUploadFile() { + var xhr = new XMLHttpRequest(); + + xhr.onreadystatechange = function() { + if (this.readyState != 4 || this.status != 200) { + return; + } + + if (xhr.responseText == "OK") { + alert("Upload successful."); + loadContents(currentDir); // load new file list with uploaded file + } else { + alert("Error: " + xhr.responseText); + } + } + + var uploadfile = document.getElementById("uploadfile"); + var formData = new FormData(); + formData.append("uploadfile", uploadfile.files[0]); + + xhr.open("POST", "/bin/query" + currentDir + "?command=upload", true); + xhr.send(formData); +} + +function deleteItem() { + alert("TBD"); +} + +function move() { + alert("TBD"); +} + +// File info: date, size, type +function info() { + showDialog(); + document.getElementById("cancelbutton").style.display = "none"; // hide "cancel" button in info dialog, only provide "OK" + + // hide dialog when done + document.getElementById("okbutton").onclick = function() { + hideDialog(); + document.getElementById("cancelbutton").style.display = "block"; + } + + var files = getSelectedFiles(); + if (files.length == 0) { + document.getElementById("dialog").innerHTML = "No files selected."; + return; + } + + // send info request for files + var xhr = new XMLHttpRequest(); + + xhr.onreadystatechange = function() { + if (this.readyState != 4 || this.status != 200) { + return; + } + + document.getElementById("dialog").innerHTML = xhr.responseText; + } + + var parser = new DOMParser(); + var xmlDocument = parser.parseFromString("", "text/xml"); + var filesElement = xmlDocument.getElementsByTagName("files")[0]; + + for (var i = 0; i < files.length; i++) { + var fileElement = xmlDocument.createElement("file"); + fileElement.appendChild(document.createTextNode(files[i])); + filesElement.appendChild(fileElement); + } + + xhr.open("POST", "/bin/query" + currentDir + "?command=info", true); + xhr.setRequestHeader("Content-type", "text/xml"); + xhr.send(xmlDocument); +} + +// select all files, except if all are selected, unselect all +function selectAll() { + var files = getFileList(); + + var allSelected = true; + + for (var i = 0; i < files.length; i++) { + if (getSelection(files[i]) == false) { + allSelected = false; + } + } + + for (var i = 0; i < files.length; i++) { + if (allSelected) { + clearSelection(files[i]); + } else { + setSelection(files[i]); + } + } +} + -- cgit v1.2.3