luci-app-attendedsysupgrade: separate js from html
authorPaul Spooren <spooren@informatik.uni-leipzig.de>
Mon, 25 Dec 2017 21:51:01 +0000 (22:51 +0100)
committerPaul Spooren <spooren@informatik.uni-leipzig.de>
Wed, 27 Dec 2017 02:26:21 +0000 (03:26 +0100)
also use hide(), show() and $() like jquery

Signed-off-by: Paul Spooren <spooren@informatik.uni-leipzig.de>
applications/luci-app-attendedsysupgrade/luasrc/view/attendedsysupgrade.htm
applications/luci-app-attendedsysupgrade/root/www/luci-static/resources/attendedsysupgrade.js [new file with mode: 0644]

index 4ea67ce..d12ccba 100644 (file)
        </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 (file)
index 0000000..90034f1
--- /dev/null
@@ -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()
+