website: packages: Add build status icons in the expanded view.

* website/www/packages.scm (package->sxml): Wrap the build status link in a div
  and prepend an icon to the div.
* website/static/base/js/packages.js (show_hide): Fetch build status on expand.
* website/static/base/css/packages.css (img.status-icon): Added css for icon padding.
* website/static/base/img/status-icons/0.png: Add icon.
* website/static/base/img/status-icons/1.png: Add icon.
* website/static/base/img/status-icons/2.png: Add icon.
* website/static/base/img/status-icons/3.png: Add icon.
* website/static/base/img/status-icons/4.png: Add icon.
* website/static/base/img/status-icons/5.png: Add icon.
* website/static/base/img/status-icons/undefined.png: Add icon.

Signed-off-by: Ludovic Courtès <ludo@gnu.org>

10 files changed, 41 insertions, 6 deletions

diff --git a/website/static/base/css/packages.css b/website/static/base/css/packages.css
index d9771be..97d0345 100644
--- a/website/static/base/css/packages.css
+++ b/website/static/base/css/packages.css
@@ -61,4 +61,7 @@ a#top {
 a#top:hover, a#top:focus {
     background-color:#333;
     color:#fff;
-}
\ No newline at end of file
+}
+img.status-icon {
+    padding-right: 1em;
+}
diff --git a/website/static/base/img/status-icons/0.png b/website/static/base/img/status-icons/0.png
new file mode 100644
index 0000000..3940d8c
--- /dev/null
+++ b/website/static/base/img/status-icons/0.png
diff --git a/website/static/base/img/status-icons/1.png b/website/static/base/img/status-icons/1.png
new file mode 100644
index 0000000..74e9c24
--- /dev/null
+++ b/website/static/base/img/status-icons/1.png
diff --git a/website/static/base/img/status-icons/2.png b/website/static/base/img/status-icons/2.png
new file mode 100644
index 0000000..7f95344
--- /dev/null
+++ b/website/static/base/img/status-icons/2.png
diff --git a/website/static/base/img/status-icons/3.png b/website/static/base/img/status-icons/3.png
new file mode 100644
index 0000000..6405a3a
--- /dev/null
+++ b/website/static/base/img/status-icons/3.png
diff --git a/website/static/base/img/status-icons/4.png b/website/static/base/img/status-icons/4.png
new file mode 100644
index 0000000..6b6fca4
--- /dev/null
+++ b/website/static/base/img/status-icons/4.png
diff --git a/website/static/base/img/status-icons/5.png b/website/static/base/img/status-icons/5.png
new file mode 100644
index 0000000..7f95344
--- /dev/null
+++ b/website/static/base/img/status-icons/5.png
diff --git a/website/static/base/img/status-icons/undefined.png b/website/static/base/img/status-icons/undefined.png
new file mode 100644
index 0000000..1d982e9
--- /dev/null
+++ b/website/static/base/img/status-icons/undefined.png
diff --git a/website/static/base/js/packages.js b/website/static/base/js/packages.js
index c8d9fc4..246d828 100644
--- a/website/static/base/js/packages.js
+++ b/website/static/base/js/packages.js
@@ -1,5 +1,27 @@
 /* license: CC0 */
 
+function set_build_status (pkg_string)
+{
+  /* Find the element to put the status icon in. */
+  var pkgIcon = document.getElementById("icon-"+ pkg_string);
+
+  /* Don't bother when the icon doesn't exist. */
+  if (pkgIcon != null)
+  {
+    var xhttp = new XMLHttpRequest();
+    xhttp.onreadystatechange = function() {
+      if (xhttp.readyState == 4 && xhttp.status == 200) {
+
+          /* The API call returns JSON. Parse it, and change the icon's source. */
+          var pkgInfo = JSON.parse(xhttp.responseText);
+          pkgIcon.src = "../static/base/img/status-icons/"+ pkgInfo[0]["buildstatus"] + ".png";
+      }
+    }
+    xhttp.open("GET", "http://hydra.gnu.org/api/latestbuilds?nr=1&project=gnu&jobset=master&job="+ pkg_string, true);
+    xhttp.send();
+  }
+}
+
 function show_hide(idThing)
 {
   if(document.getElementById && document.createTextNode) {
@@ -9,6 +31,11 @@ function show_hide(idThing)
     var thingLink = thing.previousSibling.lastChild.firstChild;
     if (thing) {
       if (thing.style.display == "none") {
+        var column = thing.parentNode;
+        var pkg_icons = column.getElementsByTagName('img')
+        for (var i=0; i < pkg_icons.length; i++) {
+            set_build_status (pkg_icons[i].id.slice(5));
+        }
         thing.style.display = "";
         thingLink.data = 'Collapse';
       } else {
diff --git a/website/www/packages.scm b/website/www/packages.scm
index 6ea974b..69b0623 100644
--- a/website/www/packages.scm
+++ b/website/www/packages.scm
@@ -167,14 +167,18 @@ decreasing, is 1."
 
   (define (status package)
     (define (url system)
-      `(a (@ (href ,(string-append "http://hydra.gnu.org/job/gnu/master/"
+      `(div (img (@ (src ,(image-url "status-icons/undefined.png"))
+                    (id ,(string-append "icon-" (package-full-name package) "." system))
+                    (class "status-icon")
+                    (alt "Unknown")
+                    (title "Unknown")))
+            (a (@ (href ,(string-append "http://hydra.gnu.org/job/gnu/master/"
                                    (package-full-name package) "."
                                    system))
              (title "View the status of this architecture's build at Hydra"))
-          ,system))
+          ,system)))
 
-    `(div "status: "
-          ,(list-join (map url
+    `(div ,(list-join (map url
                            (lset-intersection
                             string=?
                             %hydra-supported-systems
@@ -229,8 +233,9 @@ description-ids as formal parameters."
                     (a (@ (href ,(package-home-page package))
                           (title "Link to the package's website"))
                        ,(package-home-page package))
-                    ,(status package)
                     ,(patches package)
+                    (br)
+                    ,(status package)
                     ,(if js?
                          (insert-js-call description-ids)
                          ""))))))