luci-app-attendedsysupgrade: separate js from html

also use hide(), show() and $() like jquery

Signed-off-by: Paul Spooren <spooren@informatik.uni-leipzig.de>

2 files changed, 413 insertions, 399 deletions

diff --git a/applications/luci-app-attendedsysupgrade/luasrc/view/attendedsysupgrade.htm b/applications/luci-app-attendedsysupgrade/luasrc/view/attendedsysupgrade.htm
index 4ea67ce70..d12ccba06 100644
--- a/applications/luci-app-attendedsysupgrade/luasrc/view/attendedsysupgrade.htm
+++ b/applications/luci-app-attendedsysupgrade/luasrc/view/attendedsysupgrade.htm
@@ -115,406 +115,11 @@
 	</form>
 </fieldset>
 <script type="text/javascript">
-data = {};
-origin = document.location.href.replace(location.pathname, "")
-ubus_url = origin + "/ubus/"
-
-function set_server() {
-	document.getElementById("error_box").style.display = "none";
-	data.url = document.getElementById("server").value;
-	ubus_call("uci", "set", { "config": "attendedsysupgrade", "section": "server", values: { "url": data.url } })
-	ubus_call("uci", "commit", { "config": "attendedsysupgrade" })
-	var server_button = document.getElementById("server")
-	server_button.type = 'button';
-	server_button.className = 'cbi-button cbi-button-edit';
-	server_button.parentElement.removeChild(document.getElementById("button_set"));
-	server_button.onclick = edit_server;
-}
-
-function edit_server() {
-	document.getElementById("server").type = 'text';
-	document.getElementById("server").onkeydown = function(event) {
-		if(event.key === 'Enter') {
-			set_server();
-			return false;
-		}
-	}
-	document.getElementById("server").className = '';
-	document.getElementById("server").onclick = null;
-
-	button_set = document.createElement("input");
-	button_set.type = "button";
-	button_set.value = "Save";
-	button_set.name = "button_set";
-	button_set.id = "button_set";
-	button_set.className = 'cbi-button cbi-button-edit';
-	button_set.style = 'background-image: url("/luci-static/resources/cbi/save.gif");'
-	button_set.onclick = set_server
-	document.getElementById("server").parentElement.appendChild(button_set);
-}
-
-function edit_packages() {
-	data.edit_packages = true
-	document.getElementById("edit_button").style.display = "none";
-	document.getElementById("edit_packages").value = data.packages.join("\n");
-	document.getElementById("edit_packages").style.display = "block";
-}
-
-// requests to the upgrade server
-function server_request(request_dict, path, callback) {
-	request_dict.distro = data.release.distribution;
-	request_dict.target = data.release.target.split("\/")[0];
-	request_dict.subtarget = data.release.target.split("\/")[1];
-	var request = new XMLHttpRequest();
-	request.open("POST", data.url + "/" + path, true);
-	request.setRequestHeader("Content-type", "application/json");
-	request.send(JSON.stringify(request_dict));
-	request.onerror = function(e) {
-		error_box("upgrade server down")
-		document.getElementById("server_div").style.display = "block";
-	}
-	request.addEventListener('load', function(event) {
-		callback(request)
-	});
-}
-
-// initial setup, get system information
-function setup() {
+	data = {};
 	data["ubus_rpc_session"] = "<%=luci.dispatcher.context.authsession%>"
-	ubus_call("rpc-sys", "packagelist", {}, "packages");
-	ubus_call("system", "board", {}, "release");
-	ubus_call("system", "board", {}, "board_name");
-	ubus_call("system", "board", {}, "model");
-	ubus_call("system", "info", {}, "memory");
-	uci_get({ "config": "attendedsysupgrade", "section": "server", "option": "url" })
-	uci_get({ "config": "attendedsysupgrade", "section": "client", "option": "upgrade_packages" })
-	uci_get({ "config": "attendedsysupgrade", "section": "client", "option": "advanced_mode" })
-	uci_get({ "config": "attendedsysupgrade", "section": "client", "option": "auto_search" })
-	setup_ready();
-}
-
-function setup_ready() {
-	// checks if a async ubus calls have finished
-	if(ubus_counter != ubus_closed) {
-		setTimeout(setup_ready, 300)
-	} else {
-		if(data.auto_search == 1) {
-			upgrade_check();
-		} else {
-			document.getElementById("upgrade_button").style.display = "block";
-			document.getElementById("server_div").style.display = "block";
-			document.getElementById("server").value = data.url;
-		}
-	}
-}
-
-function uci_get(option) {
-	// simple wrapper to get a uci value store in data.<option>
-	ubus_call("uci", "get", option, option["option"])
-}
-
-ubus_counter = 0;
-ubus_closed = 0;
-function ubus_call(command, argument, params, variable) {
-	var request_data = {};
-	request_data.jsonrpc = "2.0";
-	request_data.id = ubus_counter;
-	request_data.method = "call";
-	request_data.params = [ data.ubus_rpc_session, command, argument, params ]
-	request_json = JSON.stringify(request_data)
-	ubus_counter++;
-	var request = new XMLHttpRequest();
-	request.open("POST", ubus_url, true);
-	request.setRequestHeader("Content-type", "application/json");
-	request.onload = function(event) {
-		if(request.status === 200) {
-			var response = JSON.parse(request.responseText)
-			if(!("error" in response) && "result" in response) {
-				if(response.result.length === 2) {
-					if(command === "uci") {
-						data[variable] = response.result[1].value
-					} else {
-						data[variable] = response.result[1][variable]
-					}
-				}
-			} else {
-				error_box("<b>Ubus call faild:</b></br>Request: " + request_json + "</br>Response: " + JSON.stringify(response))
-			}
-			ubus_closed++;
-		}
-	}
-	request.send(request_json);
-}
-
-function info_box(info_output, loading) {
-	// Shows notification if upgrade is available
-	// If loading is true then an "processing" animation is added
-	document.getElementById("info_box").style.display = "block";
-	var loading_image = '';
-	if(loading) {
-		loading_image = '<img src="/luci-static/resources/icons/loading.gif" alt="Loading" style="vertical-align:middle">';
-	}
-	document.getElementById("info_box").innerHTML = loading_image + info_output;
-}
-
-function error_box(error_output) {
-	// Shows erros in red box
-	document.getElementById("error_box").style.display = "block";
-	document.getElementById("error_box").innerHTML = error_output;
-	document.getElementById("info_box").style.display = "none";
-}
-
-function upgrade_check() {
-	// Asks server for new firmware
-	// If data.upgrade_packages is set to true search for new package versions as well
-	document.getElementById("error_box").style.display = "none";
-	document.getElementById("server_div").style.display = "none";
-	info_box("Searching for upgrades", true);
-	var request_dict = {}
-	request_dict.version = data.release.version;
-	request_dict.packages = data.packages;
-	request_dict.upgrade_packages = data.upgrade_packages
-	server_request(request_dict, "api/upgrade-check", upgrade_check_callback)
-}
-
-function upgrade_check_callback(request_text) {
-	var request_json = JSON.parse(request_text)
-
-	// create simple output to tell user whats going to be upgrade (release/packages)
-	var info_output = ""
-	if(request_json.version != undefined) {
-		info_output += "<h3>New firmware release available</h3>"
-		info_output += data.release.version + " to " + request_json.version
-		data.latest_version = request_json.version;
-	}
-	if(request_json.upgrades != undefined) {
-		info_output += "<h3>Package upgrades available</h3>"
-		for (upgrade in request_json.upgrades) {
-			info_output += "<b>" + upgrade + "</b>: " + request_json.upgrades[upgrade][1] + " to " + request_json.upgrades[upgrade][0] + "</br>"
-		}
-	}
-	data.packages = request_json.packages
-	info_box(info_output)
-
-	if(data.advanced_mode == 1) {
-		document.getElementById("edit_button").style.display = "block";
-	}
-	var upgrade_button = document.getElementById("upgrade_button")
-	upgrade_button.value = "Request firmware";
-	upgrade_button.style.display = "block";
-	upgrade_button.disabled = false;
-	upgrade_button.onclick = upgrade_request;
-
-}
-
-function upgrade_request() {
-	// Request the image
-	// Needed values
-	// version/release
-	// board_name or model (server tries to find the corrent profile)
-	// packages
-	// The rest is added by server_request()
-	document.getElementById("upgrade_button").disabled = true;
-	document.getElementById("edit_packages").style.display = "none";
-	document.getElementById("edit_button").style.display = "none";
-	document.getElementById("keep_container").style.display = "none";
-
-	var request_dict = {}
-	request_dict.version = data.latest_version;
-	request_dict.board = data.board_name
-	request_dict.model = data.model
-
-	if(data.edit_packages == true) {
-		request_dict.packages = document.getElementById("edit_packages").value.split("\n")
-	} else {
-		request_dict.packages = data.packages;
-	}
-
-	server_request(request_dict, "api/upgrade-request", upgrade_request_callback)
-}
-
-function upgrade_request_callback(request) {
-	// ready to download
-	var request_json = JSON.parse(request);
-	data.sysupgrade_url = request_json.sysupgrade;
-	data.checksum = request_json.checksum;
-	data.filesize = request_json.filesize;
-
-	info_output = "Firmware created"
-	if(data.advanced_mode == 1) {
-		info_output += '</br><a target="_blank" href="' + data.sysupgrade_url + '.log">Build log</a>'
-	}
-	info_box(info_output);
-
-	document.getElementById("keep_container").style.display = "block";
-	var upgrade_button = document.getElementById("upgrade_button")
-	upgrade_button.disabled = false;
-	upgrade_button.style.display = "block";
-	upgrade_button.value = "Flash firmware";
-	upgrade_button.onclick = download_image;
-}
-
-function flash_image() {
-	// Flash image via rpc-sys upgrade_start
-	info_box("Flashing firmware. Don't unpower device", true)
-	ubus_call("rpc-sys", "upgrade_start", { "keep": document.getElementById("keep").checked }, 'message');
-	ping_max = 3600; // in seconds
-	setTimeout(ping_ubus, 10000)
-}
-
-function ping_ubus() {
-	// Tries to connect to ubus. If the connection fails the device is likely still rebooting.
-	// If more time than ping_max passes update may failed
-	if(ping_max > 0) {
-		ping_max--;
-		var request = new XMLHttpRequest();
-		request.open("GET", ubus_url, true);
-		request.addEventListener('error', function(event) {
-			info_box("Rebooting device", true);
-			setTimeout(ping_ubus, 1000)
-		});
-		request.addEventListener('load', function(event) {
-			info_box("Success! Please reload web interface");
-			document.getElementById("upgrade_button").value = "reload page";
-			document.getElementById("upgrade_button").style.display = "block";
-			document.getElementById("upgrade_button").disabled = false;
-			document.getElementById("upgrade_button").onclick = function() { location.reload(); }
-		});
-		request.send();
-	} else {
-		error_box("Web interface could not reconnect to your device. Please reload web interface or check device manually")
-	}
-}
-
-function upload_image(blob) {
-	// Uploads received blob data to the server using cgi-io
-	var request = new XMLHttpRequest();
-	var form_data  = new FormData();
-
-	form_data.append("sessionid", data.ubus_rpc_session)
-	form_data.append("filename", "/tmp/firmware.bin")
-	form_data.append("filemode", 755) // insecure?
-	form_data.append("filedata", blob)
-
-	request.addEventListener('load', function(event) {
-		request_json = JSON.parse(request.responseText)
-		if(data.checksum != request_json.checksum) {
-			error_box("Checksum missmatch! Please retry")
-		} else {
-			flash_image();
-		}
-	});
-
-	request.addEventListener('error', function(event) {
-		info_box("Upload of firmware failed, please retry by reloading web interface")
-	});
-
-	request.open('POST', origin + '/cgi-bin/cgi-upload');
-	request.send(form_data);
-}
-
-
-function download_image() {
-	// Download image from server once the url was received by upgrade_request
-	if(data.filesize > data.memory.free) {
-		error_box("Not enough free memory to download firmware. Please stop unneeded services on router and retry")
-	} else {
-		document.getElementById("keep_container").style.display = "none";
-		document.getElementById("upgrade_button").style.display = "none";
-		var download_request = new XMLHttpRequest();
-		download_request.open("GET", data.sysupgrade_url);
-		download_request.responseType = "arraybuffer";
-
-		download_request.onload = function () {
-			if (this.status === 200) {
-				var blob = new Blob([download_request.response], {type: "application/octet-stream"});
-				upload_image(blob)
-			}
-		};
-		info_box("Downloading firmware", true);
-		download_request.send();
-	}
-}
-
-function server_request(request_dict, path, callback) {
-	request_dict.distro = data.release.distribution;
-	request_dict.target = data.release.target.split("\/")[0];
-	request_dict.subtarget = data.release.target.split("\/")[1];
-	var request = new XMLHttpRequest();
-	request.open("POST", data.url + "/" + path, true);
-	request.setRequestHeader("Content-type", "application/json");
-	request.send(JSON.stringify(request_dict));
-	request.onerror = function(e) {
-		error_box("Upgrade server down or could not connect")
-		document.getElementById("server_div").style.display = "block";
-	}
-	request.addEventListener('load', function(event) {
-		request_text = request.responseText;
-		if (request.status === 200) {
-			callback(request_text)
-
-		} else if (request.status === 202) {
-			var imagebuilder = request.getResponseHeader("X-Imagebuilder-Status");
-			if(imagebuilder === "queue") {
-				// in queue
-				var queue = request.getResponseHeader("X-Build-Queue-Position");
-				info_box("In build queue position " + queue, true)
-				console.log("queued");
-			} else if(imagebuilder === "initialize") {
-				info_box("Setting up ImageBuilder", true)
-				console.log("Setting up imagebuilder");
-			} else if(imagebuilder === "building") {
-				info_box("Building image");
-				console.log("building");
-			} else {
-				info_box("Processing request");
-				console.log(imagebuilder)
-			}
-			setTimeout(function() { server_request(request_dict, path, callback) }, 5000)
-
-		} else if (request.status === 204) {
-			// no upgrades available
-			info_box("No upgrades available")
-
-		} else if (request.status === 400) {
-			// bad request
-			request_json = JSON.parse(request_text)
-			error_box(request_json.error)
-
-		} else if (request.status === 412) {
-			// this is a bit generic
-			error_box("Unsupported device, release, target, subtraget or board")
-
-		} else if (request.status === 413) {
-			error_box("No firmware created due to image size. Try again with less packages selected.")
-
-		} else if (request.status === 422) {
-			error_box("Unknown package in request")
-
-		} else if (request.status === 500) {
-			request_json = JSON.parse(request_text)
-
-			error_box_content = "<b>Internal server error</b></br>"
-			error_box_content += request_json.error
-			if(request_json.log != undefined) {
-				data.log_url = request_json.log
-			}
-			error_box(error_box_content)
-
-		} else if (request.status === 501) {
-			error_box("No sysupgrade file produced, may not supported by modell.")
-
-		} else if (request.status === 502) {
-			// python part offline
-			error_box("Server down for maintenance")
-			setTimeout(function() { server_request(request_dict, path, callback) }, 30000)
-		} else if (request.status === 503) {
-			error_box("Server overloaded")
-			setTimeout(function() { server_request(request_dict, path, callback) }, 30000)
-		}
-	});
-}
-document.onload = setup()
+	origin = document.location.href.replace(location.pathname, "")
+	ubus_url = origin + "/ubus/"
 </script>
++<script type="text/javascript" src="<%=resource%>/attendedsysupgrade.js"></script>
 
 <%+footer%>
diff --git a/applications/luci-app-attendedsysupgrade/root/www/luci-static/resources/attendedsysupgrade.js b/applications/luci-app-attendedsysupgrade/root/www/luci-static/resources/attendedsysupgrade.js
new file mode 100644
index 000000000..90034f19e
--- /dev/null
+++ b/applications/luci-app-attendedsysupgrade/root/www/luci-static/resources/attendedsysupgrade.js
@@ -0,0 +1,409 @@
+function $(s) {
+       return document.getElementById(s.substring(1));
+}
+
+function show(s) {
+       $(s).style.display = 'block';
+}
+
+function hide(s) {
+       $(s).style.display = 'none';
+}
+
+function set_server() {
+	hide("#error_box");
+	data.url = $("#server").value;
+	ubus_call("uci", "set", { "config": "attendedsysupgrade", "section": "server", values: { "url": data.url } })
+	ubus_call("uci", "commit", { "config": "attendedsysupgrade" })
+	var server_button = $("#server")
+	server_button.type = 'button';
+	server_button.className = 'cbi-button cbi-button-edit';
+	server_button.parentElement.removeChild($("#button_set"));
+	server_button.onclick = edit_server;
+}
+
+function edit_server() {
+	$("#server").type = 'text';
+	$("#server").onkeydown = function(event) {
+		if(event.key === 'Enter') {
+			set_server();
+			return false;
+		}
+	}
+	$("#server").className = '';
+	$("#server").onclick = null;
+
+	button_set = document.createElement("input");
+	button_set.type = "button";
+	button_set.value = "Save";
+	button_set.name = "button_set";
+	button_set.id = "button_set";
+	button_set.className = 'cbi-button cbi-button-edit';
+	button_set.style = 'background-image: url("/luci-static/resources/cbi/save.gif");'
+	button_set.onclick = set_server
+	$("#server").parentElement.appendChild(button_set);
+}
+
+function edit_packages() {
+	data.edit_packages = true
+	hide("#edit_button");
+	$("#edit_packages").value = data.packages.join("\n");
+	show("#edit_packages");
+}
+
+// requests to the upgrade server
+function server_request(request_dict, path, callback) {
+	request_dict.distro = data.release.distribution;
+	request_dict.target = data.release.target.split("\/")[0];
+	request_dict.subtarget = data.release.target.split("\/")[1];
+	var request = new XMLHttpRequest();
+	request.open("POST", data.url + "/" + path, true);
+	request.setRequestHeader("Content-type", "application/json");
+	request.send(JSON.stringify(request_dict));
+	request.onerror = function(e) {
+		error_box("upgrade server down")
+		show("#server_div");
+	}
+	request.addEventListener('load', function(event) {
+		callback(request)
+	});
+}
+
+// initial setup, get system information
+function setup() {
+	data["ubus_rpc_session"] = "<%=luci.dispatcher.context.authsession%>"
+	ubus_call("rpc-sys", "packagelist", {}, "packages");
+	ubus_call("system", "board", {}, "release");
+	ubus_call("system", "board", {}, "board_name");
+	ubus_call("system", "board", {}, "model");
+	ubus_call("system", "info", {}, "memory");
+	uci_get({ "config": "attendedsysupgrade", "section": "server", "option": "url" })
+	uci_get({ "config": "attendedsysupgrade", "section": "client", "option": "upgrade_packages" })
+	uci_get({ "config": "attendedsysupgrade", "section": "client", "option": "advanced_mode" })
+	uci_get({ "config": "attendedsysupgrade", "section": "client", "option": "auto_search" })
+	setup_ready();
+}
+
+function setup_ready() {
+	// checks if a async ubus calls have finished
+	if(ubus_counter != ubus_closed) {
+		setTimeout(setup_ready, 300)
+	} else {
+		if(data.auto_search == 1) {
+			upgrade_check();
+		} else {
+			show("#upgrade_button");
+			show("#server_div");
+			$("#server").value = data.url;
+		}
+	}
+}
+
+function uci_get(option) {
+	// simple wrapper to get a uci value store in data.<option>
+	ubus_call("uci", "get", option, option["option"])
+}
+
+ubus_counter = 0;
+ubus_closed = 0;
+function ubus_call(command, argument, params, variable) {
+	var request_data = {};
+	request_data.jsonrpc = "2.0";
+	request_data.id = ubus_counter;
+	request_data.method = "call";
+	request_data.params = [ data.ubus_rpc_session, command, argument, params ]
+	request_json = JSON.stringify(request_data)
+	ubus_counter++;
+	var request = new XMLHttpRequest();
+	request.open("POST", ubus_url, true);
+	request.setRequestHeader("Content-type", "application/json");
+	request.onload = function(event) {
+		if(request.status === 200) {
+			var response = JSON.parse(request.responseText)
+			if(!("error" in response) && "result" in response) {
+				if(response.result.length === 2) {
+					if(command === "uci") {
+						data[variable] = response.result[1].value
+					} else {
+						data[variable] = response.result[1][variable]
+					}
+				}
+			} else {
+				error_box("<b>Ubus call faild:</b></br>Request: " + request_json + "</br>Response: " + JSON.stringify(response))
+			}
+			ubus_closed++;
+		}
+	}
+	request.send(request_json);
+}
+
+function info_box(info_output, loading) {
+	// Shows notification if upgrade is available
+	// If loading is true then an "processing" animation is added
+	show("#info_box");
+	var loading_image = '';
+	if(loading) {
+		loading_image = '<img src="/luci-static/resources/icons/loading.gif" alt="Loading" style="vertical-align:middle">';
+	}
+	$("#info_box").innerHTML = loading_image + info_output;
+}
+
+function error_box(error_output) {
+	// Shows erros in red box
+	show("#error_box");
+	$("#error_box").innerHTML = error_output;
+	hide("#info_box");
+}
+
+function upgrade_check() {
+	// Asks server for new firmware
+	// If data.upgrade_packages is set to true search for new package versions as well
+	hide("#error_box");
+	hide("#server_div");
+	info_box("Searching for upgrades", true);
+	var request_dict = {}
+	request_dict.version = data.release.version;
+	request_dict.packages = data.packages;
+	request_dict.upgrade_packages = data.upgrade_packages
+	server_request(request_dict, "api/upgrade-check", upgrade_check_callback)
+}
+
+function upgrade_check_callback(request_text) {
+	var request_json = JSON.parse(request_text)
+
+	// create simple output to tell user whats going to be upgrade (release/packages)
+	var info_output = ""
+	if(request_json.version != undefined) {
+		info_output += "<h3>New firmware release available</h3>"
+		info_output += data.release.version + " to " + request_json.version
+		data.latest_version = request_json.version;
+	}
+	if(request_json.upgrades != undefined) {
+		info_output += "<h3>Package upgrades available</h3>"
+		for (upgrade in request_json.upgrades) {
+			info_output += "<b>" + upgrade + "</b>: " + request_json.upgrades[upgrade][1] + " to " + request_json.upgrades[upgrade][0] + "</br>"
+		}
+	}
+	data.packages = request_json.packages
+	info_box(info_output)
+
+	if(data.advanced_mode == 1) {
+		show("#edit_button");
+	}
+	var upgrade_button = $("#upgrade_button")
+	upgrade_button.value = "Request firmware";
+	upgrade_button.style.display = "block";
+	upgrade_button.disabled = false;
+	upgrade_button.onclick = upgrade_request;
+
+}
+
+function upgrade_request() {
+	// Request the image
+	// Needed values
+	// version/release
+	// board_name or model (server tries to find the corrent profile)
+	// packages
+	// The rest is added by server_request()
+	$("#upgrade_button").disabled = true;
+	hide("#edit_packages");
+	hide("#edit_button");
+	hide("#keep_container");
+
+	var request_dict = {}
+	request_dict.version = data.latest_version;
+	request_dict.board = data.board_name
+	request_dict.model = data.model
+
+	if(data.edit_packages == true) {
+		request_dict.packages = $("#edit_packages").value.split("\n")
+	} else {
+		request_dict.packages = data.packages;
+	}
+
+	server_request(request_dict, "api/upgrade-request", upgrade_request_callback)
+}
+
+function upgrade_request_callback(request) {
+	// ready to download
+	var request_json = JSON.parse(request);
+	data.sysupgrade_url = request_json.sysupgrade;
+	data.checksum = request_json.checksum;
+	data.filesize = request_json.filesize;
+
+	info_output = "Firmware created"
+	if(data.advanced_mode == 1) {
+		info_output += '</br><a target="_blank" href="' + data.sysupgrade_url + '.log">Build log</a>'
+	}
+	info_box(info_output);
+
+	show("#keep_container");
+	var upgrade_button = $("#upgrade_button")
+	upgrade_button.disabled = false;
+	upgrade_button.style.display = "block";
+	upgrade_button.value = "Flash firmware";
+	upgrade_button.onclick = download_image;
+}
+
+function flash_image() {
+	// Flash image via rpc-sys upgrade_start
+	info_box("Flashing firmware. Don't unpower device", true)
+	ubus_call("rpc-sys", "upgrade_start", { "keep": $("#keep").checked }, 'message');
+	ping_max = 3600; // in seconds
+	setTimeout(ping_ubus, 10000)
+}
+
+function ping_ubus() {
+	// Tries to connect to ubus. If the connection fails the device is likely still rebooting.
+	// If more time than ping_max passes update may failed
+	if(ping_max > 0) {
+		ping_max--;
+		var request = new XMLHttpRequest();
+		request.open("GET", ubus_url, true);
+		request.addEventListener('error', function(event) {
+			info_box("Rebooting device", true);
+			setTimeout(ping_ubus, 1000)
+		});
+		request.addEventListener('load', function(event) {
+			info_box("Success! Please reload web interface");
+			$("#upgrade_button").value = "reload page";
+			show("#upgrade_button");
+			$("#upgrade_button").disabled = false;
+			$("#upgrade_button").onclick = function() { location.reload(); }
+		});
+		request.send();
+	} else {
+		error_box("Web interface could not reconnect to your device. Please reload web interface or check device manually")
+	}
+}
+
+function upload_image(blob) {
+	// Uploads received blob data to the server using cgi-io
+	var request = new XMLHttpRequest();
+	var form_data  = new FormData();
+
+	form_data.append("sessionid", data.ubus_rpc_session)
+	form_data.append("filename", "/tmp/firmware.bin")
+	form_data.append("filemode", 755) // insecure?
+	form_data.append("filedata", blob)
+
+	request.addEventListener('load', function(event) {
+		request_json = JSON.parse(request.responseText)
+		if(data.checksum != request_json.checksum) {
+			error_box("Checksum missmatch! Please retry")
+		} else {
+			flash_image();
+		}
+	});
+
+	request.addEventListener('error', function(event) {
+		info_box("Upload of firmware failed, please retry by reloading web interface")
+	});
+
+	request.open('POST', origin + '/cgi-bin/cgi-upload');
+	request.send(form_data);
+}
+
+
+function download_image() {
+	// Download image from server once the url was received by upgrade_request
+	if(data.filesize > data.memory.free) {
+		error_box("Not enough free memory to download firmware. Please stop unneeded services on router and retry")
+	} else {
+		hide("#keep_container");
+		hide("#upgrade_button");
+		var download_request = new XMLHttpRequest();
+		download_request.open("GET", data.sysupgrade_url);
+		download_request.responseType = "arraybuffer";
+
+		download_request.onload = function () {
+			if (this.status === 200) {
+				var blob = new Blob([download_request.response], {type: "application/octet-stream"});
+				upload_image(blob)
+			}
+		};
+		info_box("Downloading firmware", true);
+		download_request.send();
+	}
+}
+
+function server_request(request_dict, path, callback) {
+	request_dict.distro = data.release.distribution;
+	request_dict.target = data.release.target.split("\/")[0];
+	request_dict.subtarget = data.release.target.split("\/")[1];
+	var request = new XMLHttpRequest();
+	request.open("POST", data.url + "/" + path, true);
+	request.setRequestHeader("Content-type", "application/json");
+	request.send(JSON.stringify(request_dict));
+	request.onerror = function(e) {
+		error_box("Upgrade server down or could not connect")
+		show("#server_div");
+	}
+	request.addEventListener('load', function(event) {
+		request_text = request.responseText;
+		if (request.status === 200) {
+			callback(request_text)
+
+		} else if (request.status === 202) {
+			var imagebuilder = request.getResponseHeader("X-Imagebuilder-Status");
+			if(imagebuilder === "queue") {
+				// in queue
+				var queue = request.getResponseHeader("X-Build-Queue-Position");
+				info_box("In build queue position " + queue, true)
+				console.log("queued");
+			} else if(imagebuilder === "initialize") {
+				info_box("Setting up ImageBuilder", true)
+				console.log("Setting up imagebuilder");
+			} else if(imagebuilder === "building") {
+				info_box("Building image");
+				console.log("building");
+			} else {
+				info_box("Processing request");
+				console.log(imagebuilder)
+			}
+			setTimeout(function() { server_request(request_dict, path, callback) }, 5000)
+
+		} else if (request.status === 204) {
+			// no upgrades available
+			info_box("No upgrades available")
+
+		} else if (request.status === 400) {
+			// bad request
+			request_json = JSON.parse(request_text)
+			error_box(request_json.error)
+
+		} else if (request.status === 412) {
+			// this is a bit generic
+			error_box("Unsupported device, release, target, subtraget or board")
+
+		} else if (request.status === 413) {
+			error_box("No firmware created due to image size. Try again with less packages selected.")
+
+		} else if (request.status === 422) {
+			error_box("Unknown package in request")
+
+		} else if (request.status === 500) {
+			request_json = JSON.parse(request_text)
+
+			error_box_content = "<b>Internal server error</b></br>"
+			error_box_content += request_json.error
+			if(request_json.log != undefined) {
+				data.log_url = request_json.log
+			}
+			error_box(error_box_content)
+
+		} else if (request.status === 501) {
+			error_box("No sysupgrade file produced, may not supported by modell.")
+
+		} else if (request.status === 502) {
+			// python part offline
+			error_box("Server down for maintenance")
+			setTimeout(function() { server_request(request_dict, path, callback) }, 30000)
+		} else if (request.status === 503) {
+			error_box("Server overloaded")
+			setTimeout(function() { server_request(request_dict, path, callback) }, 30000)
+		}
+	});
+}
+document.onload = setup()
+