Initial commit, basic working webbox (WIP), see TODO

author: Roland Stigge <stigge@antcom.de> 2018-01-05 21:03:31 +0100
committer: Roland Stigge <stigge@antcom.de> 2018-01-05 21:03:31 +0100
commit: f939d19e9bcb0cc0cf048aa0c8037f1f9c5a8c8b (patch)
tree: c656bd35facfbf57959a9e5c3a6fcad0cdd6df0b /html
3 files changed, 641 insertions, 0 deletions
diff --git a/html/index.html b/html/index.html
new file mode 100644
index 0000000..023b8bc
--- /dev/null
+++ b/html/index.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8"/>
+		<title>Webbox</title>
+		<link rel="stylesheet" type="text/css" href="webbox.css"/>
+		<script src="webbox.js"></script>
+	</head>
+	<body onload="initMainpage();">
+		<div>
+			<h1 class="title"></h1>
+			<input id="uploadfile" type="file" onchange="onUploadFile();" hidden/>
+			<table class="menu">
+				<tr>
+					<td class="firsttd"></td>
+					<td class="entry" onclick="createDir();">New folder</td>
+					<td class="entry" onclick="download();">Download</td>
+					<td class="entry" onclick="upload();">Upload</td>
+					<td class="entry" onclick="deleteItem();">Delete</td>
+					<td class="entry" onclick="move();">Move</td>
+					<td class="entry" onclick="info();">Info</td>
+					<td class="entry" onclick="selectAll();">Select All</td>
+				</tr>
+			</table>
+		</div>
+		<div id="list">
+		</div>
+
+		<div id="debug1">
+		</div>
+
+		<div class="greyout fullscreen" id="greyout" hidden>
+		</div>
+
+		<div class="dialogwindow" id="dialogwindow" hidden>
+			<div id="dialog" class="dialog">
+			</div>
+			<button class="button leftbutton" id="cancelbutton">Cancel</button>
+			<button class="button rightbutton" id="okbutton">OK</button>
+		</div>
+
+		<div id="create-dir-dialog" hidden>
+			New folder:<br>
+			<input type="text" id="newdir" class="textinput"></input>
+		</div>
+
+		<div id="download-zip-dialog" hidden>
+			Download multiple files as ZIP?<br>
+		</div>
+
+		<a download="webbox-download.zip" id="download-a" hidden/>
+
+		<div class="footer">
+		</div>
+	</body>
+</html>
+
diff --git a/html/webbox.css b/html/webbox.css
new file mode 100644
index 0000000..39551e0
--- /dev/null
+++ b/html/webbox.css
@@ -0,0 +1,138 @@
+div, td, h1 {
+	font-family: "sans-serif";
+}
+
+.title {
+	font-size: 16pt;
+}
+
+.greyout {
+	opacity: 0.7;
+	background-color: #FFFFFF;
+	z-index: 9; /* behind dialog window which is 10 */
+}
+
+.button {
+	background-color: #303060;
+	border: none;
+	color: white;
+	padding: 18px;
+	text-align: center;
+	text-decoration: none;
+	display: inline-block;
+	font-size: 16px;
+	margin: 2px 2px;
+	border-radius: 6px;
+}
+
+.leftbutton {
+	position: absolute;
+	left: 20px;
+	bottom: 20px;
+}
+
+.rightbutton {
+	position: absolute;
+	right: 20px;
+	bottom: 20px;
+}
+
+.dialogwindow {
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	width: 400px;
+	height: 400px;
+	margin-top: -200px;
+	margin-left: -200px;
+	background-color: #FFFFFF;
+	opacity: 1;
+	z-index: 10;
+	border-width: 3px;
+	border-style: solid;
+	border-color: #808080;
+	padding: 10pt;
+}
+
+.dialog {
+	/*width: 100%;*/
+}
+
+.textinput {
+	width: calc(100% - 20px);
+}
+
+.fullscreen {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	border: 0;
+}
+
+div.footer {
+	font-size: 8pt;
+	padding-top: 30pt;
+	text-align: center;
+}
+
+table.menu {
+	width: 100%;
+	border: 0; /* 1px solid #000000; */
+	border-collapse: collapse;
+	margin: 0;
+	padding: 0;
+	table-layout: fixed;
+}
+
+table.menu tr {
+	border: 0; /* 1px solid #000000; */
+	margin: 0;
+	padding: 0;
+}
+
+table.menu td.firsttd {
+	width: 100%;
+	border: 0; /* 1px solid #000000; */
+	color: #FFFFFF;
+	background-color: #404070;
+	margin: 0;
+	padding: 0 5px 0 5px;
+}
+
+table.menu td.entry {
+	width: 60px;
+	border: 0; /* 1px solid #000000; */
+	color: #FFFFFF;
+	background-color: #404070;
+	padding: 9px;
+	margin: 0;
+	cursor: pointer;
+}
+
+table.list {
+	width: 100%;
+	border: 0; /* 1px solid #000000; */
+	cursor: pointer;
+	background-color: #FFFFFF;
+}
+
+table.list tr {
+	background-color: #FFFFFF;
+}
+
+table.list tr.selectedrow {
+	background-color: #CCCCFF;
+}
+
+table.list td.type {
+	width: 50px;
+	border: 0; /* 1px solid #000000; */
+}
+
+table.list td.name {
+	width: 100%;
+	border: 0; /* 1px solid #000000; */
+	color: #0000FF;
+}
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 = "<table class=\"list\">";
+
+		if (listElements.length == 0) {
+			result += "<tr><td class=\"type\"></td><td class=\"name\">(empty)</td></tr>";
+		} else {
+			for (var i = 0; i < listElements.length; i++) {
+				var type = listElements[i].getAttribute("type");
+
+				result += "<tr " +
+					"onmousedown=\"entryMouseDown('" + listElements[i].childNodes[0].nodeValue + "')\" " +
+					"onmouseup=\"entryMouseUp('" + listElements[i].childNodes[0].nodeValue + "')\"" +
+				"><td class=\"type\">" + type + "</td><td class=\"name\">" + listElements[i].childNodes[0].nodeValue + "</td></tr>";
+			}
+		}
+
+		result += "</table>"
+
+		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("<files></files>", "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("<dirname></dirname>", "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("<files></files>", "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]);
+		}
+	}
+}
+
author	Roland Stigge <stigge@antcom.de>	2018-01-05 21:03:31 +0100
committer	Roland Stigge <stigge@antcom.de>	2018-01-05 21:03:31 +0100
commit	f939d19e9bcb0cc0cf048aa0c8037f1f9c5a8c8b (patch)
tree	c656bd35facfbf57959a9e5c3a6fcad0cdd6df0b /html