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 ea9037822d417b1b89fe685947fd0d2753949f19..a2f1d4aa91c553aefb1620b2aa7c4cc0ce9f72bb 100644 (file)
--- 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 3fe33d4bb68f8f53faec2b0b7f0a837a7fed85a6..d31ee94d53a115cd7e44d19a5a3a569996ff7507 100644 (file)
--- 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 (file)
index 0000000..7154314
Binary files /dev/null and b/loading.gif differ