From e340b9fb90c361cd59997500323a3801030b0638 Mon Sep 17 00:00:00 2001 From: cbdev Date: Thu, 15 Jul 2021 23:41:52 +0200 Subject: Basic scripting --- assets/cargohold.css | 13 +++++++ assets/cargohold.js | 105 +++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 118 insertions(+) create mode 100644 assets/cargohold.js (limited to 'assets') 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; -- cgit v1.2.3