From: Paul Spooren <mail@aparcar.org>
Date: Tue, 18 Feb 2020 02:16:11 +0000 (-1000)
Subject: working image request UI example
X-Git-Tag: v2.0.0~19
X-Git-Url: http://git.lede-project.org./?a=commitdiff_plain;h=61b2ef1655d4f9161ebf377581ed7add53c785c9;p=web%2Ffirmware-selector-openwrt-org.git

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 <mail@aparcar.org>
---

diff --git a/index.html b/index.html
index ea90378..a2f1d4a 100644
--- a/index.html
+++ b/index.html
@@ -34,6 +34,14 @@
 			<input id="models" type="text" placeholder="Model">
 		</div>
 
+		<div id="custom">
+			<textarea id="packages">luci</textarea>
+			<a href="javascript:build_request()">request image</a>
+		</div>
+		<div style="display:none" id="loading">
+			<img src="loading.gif" alt="Logo">
+		</div>
+
 		<br />
 		<br />
 
@@ -67,4 +75,4 @@
 <script src="index.js"></script>
 
 </body>
-</html>
\ No newline at end of file
+</html>
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 0000000..7154314
Binary files /dev/null and b/loading.gif differ