From 61b2ef1655d4f9161ebf377581ed7add53c785c9 Mon Sep 17 00:00:00 2001 From: Paul Spooren Date: Mon, 17 Feb 2020 16:16:11 -1000 Subject: [PATCH] working image request UI example This patch adds the basic functionality to request custom images. Error codes are handled via alert messages and successful builds show. No style added, no badge for *custom* images added, no *build at* etc, this adds just the logic and UI elements, without style. The global variable "data" is a workaround to share information over multiple functions. I'm sure there is a cleaner way to do so. Signed-off-by: Paul Spooren --- index.html | 10 +++++++++- index.js | 54 ++++++++++++++++++++++++++++++++++++++++++---------- loading.gif | Bin 0 -> 1786 bytes 3 files changed, 53 insertions(+), 11 deletions(-) create mode 100644 loading.gif diff --git a/index.html b/index.html index ea90378..a2f1d4a 100644 --- a/index.html +++ b/index.html @@ -34,6 +34,14 @@ +
+ + request image +
+ +

@@ -67,4 +75,4 @@ - \ No newline at end of file + diff --git a/index.js b/index.js index 3fe33d4..d31ee94 100644 --- a/index.js +++ b/index.js @@ -1,3 +1,5 @@ +data = {} + function get_model_titles(titles) { var title = [] for (var i in titles) { @@ -14,8 +16,27 @@ function get_model_titles(titles) { return title.join("/") } -function build_request(request_data) { - console.log("fire") +function build_request() { + var profile = data["models"][$("models").value] + console.log(profile) + if (profile === undefined) { + alert("bad profile"); + return; + } + + updateImages() + $("loading").style.display = 'block'; + $("custom").style.display = 'none'; + + + request_data = { + "profile": profile.id, + "packages": $("packages").value.trim().split(" "), + "version": $("releases").value + } + + console.log("disable request button / show loading spinner") + fetch(config.asu_url, { method: "POST", headers: { 'Content-Type': 'application/json' }, @@ -24,6 +45,8 @@ function build_request(request_data) { .then(function(response) { switch (response.status) { case 200: + $("loading").style.display = 'none'; + $("custom").style.display = 'block'; console.log("image found"); response.json() .then(function(mobj) { @@ -42,26 +65,36 @@ function build_request(request_data) { setTimeout(function() { build_request(request_data) }, 5000); break; case 400: + $("loading").style.display = 'none'; + $("custom").style.display = 'block'; console.log("bad request"); // see message + response.json() + .then(function(mobj) { + alert(mobj.message) + }); break; case 422: + $("loading").style.display = 'none'; + $("custom").style.display = 'block'; console.log("bad package"); // see message + response.json() + .then(function(mobj) { + alert(mobj.message) + }); break; case 500: + $("loading").style.display = 'none'; + $("custom").style.display = 'block'; console.log("build failed"); + response.json() + .then(function(mobj) { + alert(mobj.message) + }); break; } }) } -function example_request() { - build_request({ - "version": "SNAPSHOT", - "packages": ["bmon", "vim", "ip-full"], - "profile": "tplink_tl-wdr4300-v1" - }) -} - function loadFile(url, callback) { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { @@ -354,6 +387,7 @@ changeLanguage(config.language); setupSelectList($("releases"), Object.keys(config.versions), function(version) { loadFile(config.versions[version], function(obj) { + data = obj setupAutocompleteList($("models"), Object.keys(obj['models']), function(model) { if (model in obj['models']) { var url = obj.url; diff --git a/loading.gif b/loading.gif new file mode 100644 index 0000000000000000000000000000000000000000..715431483265b3427e1fb8f74df570a11e5c9435 GIT binary patch literal 1786 zcmZXUdsLI>9mk)%ByVmI6GFHrBot#n64OX#lwk?TC4pdolmdpDpq4;E13@H+B?$?a zfR&p-5nW(l!{w|hN&$Z~%g9tB!2H8Qqwn78e?m(!jz&i4HKJm>j*e&_pq zp9D#~XsenDm|&R*Mn*XXo zXOYBCv@#bQe?5P0uNUD^c|uecaLe-o)rS&uYv^Sdaa0Q*%20MI>mnf>9^Kd9{kzEi z!4rvgYwytT$q{-dfAm7>`sPGkeM3psZxgF{M(T9^=k3s?mfSC?+5Wj-?~Kda20E(} zvT}HisJr3^J5#%LHIIl-mAPMOcw3)E>GD>pPVH%2-nT$U-wyLUHe2%n*s|k)X7>d? z$m}J^>@Jkhm6bBE<6Qksb(%%3nSSq7S}&t8GMUY#hxM%IVo33wMc!8L(9dyp_deOT z(+ay%2F=$v)ArWQL=Sl+LYQmK5VIETk~tO|4qP#x`M3T4>mMOEP;IUvn#`6eV|{ha zv8Lvh)`W_~l>bJsng<<_e%08(5xOQ7seTUGWjT%0ANVzgVixsuqR*`0sF%B?nD!*W z?UyBEJt3&gTn!QBVxGYL2KD3SIF*r&u4b`-dj<7_yR%a3fI+rF zJg{&Bf*Pe({{rJ|^oCs_3hUk6>tWnn&s);aF^P?s{YVSsWSNI;E>O2FH&0f)J>>X_ zf3_`H0>;Zktd6DELfB}+zH`J>3s({AVDlO}GCuGGz6gCEzwgZ8q;JR<@WZ6w_wi!G zd?w}*-n#1+iKF!3c3oL~{xL`&ZsB;zaVAGE-@ArsUA7M;)6NgB3@lcBdAzzj`PR|z zYQtX1fngH8yF;tluOY#_RM=0 zN8D+40jlpWR$@&1qXpifkF2BUApw&Nop$h55hazT9j%6C*|F_J=O@$d7v~Dq$r+XJ z{8TC)&M-glz8YC9a=2EUTL&CL_tB4{l>$9FJ%t^1sn5 z4C%?e%570*dj!QS{mlMh+pA~WP?i{{A8F&MhfYqhjdOJmVO}fRdF81^y{RW?8{;rc zE!F#(sF>2X>dXzbl~lqp-=kax7A{J`!^KH!d~nG7^hE*!=)%>iK%#Z(*VpFe^vuzt z8Y>iLC7W+&Yw6e8nr`k8xLJM(cC>QIaLlK2ySvI6cUdJ5CuQPCwo2t5fzQM(s_ZE2 z;6J*Kb2_*C9}K6YkDffw`qSy1opgorU=g*F7D>Zkt3^Q{g{={Q5cn@8DMti`a^`Q? z&U=8S9J89t5SkrKxkKF*YB>XfX(Opm80h&67(OL=b}?WR{P1p{W4{l({^#gRFYYg96bnnSK)2shuMFKyudSlG1c>~SVI;74b(f`tz!cOnAULT7 z#-wl`(_>E?C-bvUhBD%N_K)BA8%f9{lYei}FP