2 files changed, 37 insertions, 2 deletions

diff --git a/assets/cargohold.css b/assets/cargohold.css
index f3db7e9..bec6b3a 100644
--- a/assets/cargohold.css
+++ b/assets/cargohold.css
@@ -9,6 +9,18 @@ html {
 	background-color: #425;
 }
 
+.listing-entry, .listing-entry:visited {
+	display: block;
+	text-decoration: none;
+	color: #ccd;
+	background-color: #aaea;
+	padding: 0.5em;
+	font-size: 120%;
+	margin-top: 1em;
+	margin-bottom: 1em;
+	border-radius: 0.5em;
+}
+
 .queue-entry.errored {
 	background-color: red;
 }
diff --git a/assets/cargohold.js b/assets/cargohold.js
index e1278b7..cd6cc34 100644
--- a/assets/cargohold.js
+++ b/assets/cargohold.js
@@ -41,7 +41,7 @@ function queue_work(){
 			};
 			req.onabort = function(evt){
 				console.log("Upload for " + item.file.name + " aborted");
-				item.node.className += "errored";
+				item.node.className += " errored";
 			};
 			req.onreadystatechange = function(evt){
 				console.log("Upload for " + item.file.name + " state " + req.readyState);
@@ -96,10 +96,33 @@ function upload_start(element){
 	queue_run();
 }
 
+function listing_clear(){
+	element("dirlisting").innerHTML = "";
+}
+
+function listing_add(name){
+	let link = node("a", "listing-entry", name);
+	link.href = "file/" + encodeURIComponent(name);
+	element("dirlisting").appendChild(link);
+}
+
+function listing_update(){
+	listing_clear();
+	let req = new XMLHttpRequest();
+	req.onload = function(evt){
+		let data = JSON.parse(req.response);
+		for(let i = 0; i < data.length; i++){
+			listing_add(data[i]);
+		}
+	};
+	req.open("GET", "listing");
+	req.send();
+}
+
 function init(){
 	element("file-submit").style.display = "none";
 	element("files").onchange = upload_start;
-	//setInterval(queue_run, 1000);
+	listing_update();
 }
 
 window.onload = init;