Basic scripting

2 files changed, 118 insertions, 0 deletions

diff --git a/assets/cargohold.css b/assets/cargohold.css
index 1e56769..f3db7e9 100644
--- a/assets/cargohold.css
+++ b/assets/cargohold.css
@@ -9,6 +9,19 @@ html {
 	background-color: #425;
 }
 
+.queue-entry.errored {
+	background-color: red;
+}
+
+.queue-entry {
+	width: 100%;
+	padding: 0.2em;
+}
+
+.queue-entry > .name {
+	margin-right: 2em;
+}
+
 #selector-label {
 	background-color: #333;
 	border-radius: 1em;
diff --git a/assets/cargohold.js b/assets/cargohold.js
new file mode 100644
index 0000000..e1278b7
--- /dev/null
+++ b/assets/cargohold.js
@@ -0,0 +1,105 @@
+/*
+ * TODO:
+ *	check if files exist
+ *	check file sizes
+ */
+
+var running = false;
+var queue = [];
+
+
+function queue_work(){
+	let i = 0;
+	for(; i < queue.length; i++){
+		item = queue[i];
+		if(!item.started){
+			console.log(item);
+			console.log("Starting " + item.file.name);
+			item.started = true;
+
+			let req = new XMLHttpRequest();
+			let data = new FormData();
+			data.append("file", item.file);                                
+			req.upload.addEventListener("progress", function(evt){
+				if(evt.lengthComputable){
+					console.log("Upload for " + item.file.name + " at " + evt.loaded / evt.total);
+					item.node.childNodes[1].value = evt.loaded;
+				}
+			});
+			req.onloadstart = function(evt){
+				console.log("Upload for " + item.file.name + " started");
+				item.node.childNodes[1].max = item.file.size;
+				item.node.childNodes[1].value = 0;
+			};
+			req.onloadend = function(evt){
+				console.log("Upload for " + item.file.name + " ended");
+				queue_work();
+			};
+			req.onerror = function(evt){
+				console.log("Upload for " + item.file.name + " errored");
+				item.node.className += " errored";
+			};
+			req.onabort = function(evt){
+				console.log("Upload for " + item.file.name + " aborted");
+				item.node.className += "errored";
+			};
+			req.onreadystatechange = function(evt){
+				console.log("Upload for " + item.file.name + " state " + req.readyState);
+			};
+			req.open("POST", 'upload');
+			req.send(data);
+			return;
+		}
+	}
+
+	console.log("Queue run done");
+	running = false;
+}
+
+function queue_run(){
+	if(running || queue.length == 0){
+		return;
+	}
+
+	running = true;
+
+	console.log("Starting queue run");
+	queue_work();
+}
+
+function element(id){
+	return document.getElementById(id);
+}
+
+function node(tag, style, text){
+	let new_node = document.createElement(tag);
+	new_node.className = style;
+	if(text){
+		new_node.textContent = text;
+	}
+	return new_node;
+}
+
+function upload_element(file){
+	let new_node = node("div", "queue-entry");
+	new_node.appendChild(node("span", "name", file.name));
+	new_node.appendChild(node("progress", "progress"));
+	element("queue").appendChild(new_node);
+	return new_node;
+}
+
+function upload_start(element){
+	for(let i = 0; i < element.target.files.length; i++){
+		console.log(element.target.files[i]);
+		queue.push({"file": element.target.files[i], "node": upload_element(element.target.files[i]), "progress": 0, "started": false});
+	}
+	queue_run();
+}
+
+function init(){
+	element("file-submit").style.display = "none";
+	element("files").onchange = upload_start;
+	//setInterval(queue_run, 1000);
+}
+
+window.onload = init;