Render package details on the client.

* js/routes.js: Add new route.
* js/controller/packageInfo.js: New file.
* js/view/packageInfo.js: New file.
* js/model/packages.js (guix.packages.PackagesByName): New function.
* js/view/ui.js (guix.ui.licenseList): New function.
* js/view/packages.js (guix.packages.view): Render package links as
  Mithril URLs.  Remove factorized inner 'renderLicese' function.
* guix-web/view/html.scm (javascripts): Add new JS files.
  (view-package): Delete.

6 files changed, 128 insertions, 19 deletions

diff --git a/js/controller/packageInfo.js b/js/controller/packageInfo.js
new file mode 100644
index 0000000..ebd6a51
--- /dev/null
+++ b/js/controller/packageInfo.js
@@ -0,0 +1,25 @@
+// guix-web - Web interface for GNU Guix
+// Copyright © 2015  David Thompson <davet@gnu.org>
+//
+// This program is free software: you can redistribute it and/or
+// modify it under the terms of the GNU Affero General Public License
+// as published by the Free Software Foundation, either version 3 of
+// the License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful, but
+// WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+// Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public
+// License along with this program.  If not, see
+// <http://www.gnu.org/licenses/>.
+
+(function() {
+  var packageInfo = guix.packageInfo = {};
+
+  packageInfo.controller = function() {
+    this.name = m.route.param("name");
+    this.packages = guix.packages.PackagesByName(this.name);
+  };
+})();
diff --git a/js/model/packages.js b/js/model/packages.js
index bea1280..39e6a8d 100644
--- a/js/model/packages.js
+++ b/js/model/packages.js
@@ -28,6 +28,13 @@
     });
   };
 
+  packages.PackagesByName = function(name) {
+    return m.request({
+      method: "GET",
+      url: "/package/".concat(name).concat(".json")
+    });
+  };
+
   packages.Sorter = (function() {
     function Sorter(field, isDescending) {
       this.field = field;
diff --git a/js/routes.js b/js/routes.js
index b3fee60..400f995 100644
--- a/js/routes.js
+++ b/js/routes.js
@@ -17,5 +17,6 @@
 
 m.route(document.body, "/", {
   "/": guix.packages,
-  "/generations": guix.generations
+  "/generations": guix.generations,
+  "/package/:name": guix.packageInfo
 });
diff --git a/js/view/packageInfo.js b/js/view/packageInfo.js
new file mode 100644
index 0000000..687d145
--- /dev/null
+++ b/js/view/packageInfo.js
@@ -0,0 +1,73 @@
+// guix-web - Web interface for GNU Guix
+// Copyright © 2015  David Thompson <davet@gnu.org>
+//
+// This program is free software: you can redistribute it and/or
+// modify it under the terms of the GNU Affero General Public License
+// as published by the Free Software Foundation, either version 3 of
+// the License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful, but
+// WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+// Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public
+// License along with this program.  If not, see
+// <http://www.gnu.org/licenses/>.
+
+(function() {
+  var packageInfo = guix.packageInfo;
+  var spinner = m(".spinner-container", m(".spinner"));
+
+  packageInfo.view = function(ctrl) {
+    var packages = ctrl.packages();
+    var packageCount = (function() {
+      var count = packages.length;
+      var units = count > 1 ? " versions" : " version";
+
+      return count.toString().concat(units);
+    })();
+
+    function describeInputs(inputs, description) {
+      return _.isEmpty(inputs) ? [] : [
+        m("dt", description),
+        m("dd", m("ul", inputs.map(function(p) {
+          return m("li", m("a", {
+            config: m.route,
+            href: "/package/".concat(p.name)
+          }, p.name.concat(" ").concat(p.version)));
+        })))
+      ];
+    }
+
+    function describePackage(package) {
+      var baseDescription = [
+        m("dt", "Version"),
+        m("dd", package.version),
+        m("dt", "Synopsis"),
+        m("dd", package.synopsis),
+        m("dt", "Description"),
+        m("dd", package.description),
+        m("dt", "License"),
+        m("dd", guix.ui.licenseList(package))
+      ];
+      var inputs = describeInputs(package.inputs, "Inputs");
+      var nativeInputs = describeInputs(package.nativeInputs,
+                                        "Native Inputs");
+      var propagatedInputs = describeInputs(package.propagatedInputs,
+                                            "Propagated Inputs");
+      return m("li",
+               m("dl", _.flatten([
+                 baseDescription,
+                 inputs,
+                 nativeInputs,
+                 propagatedInputs
+               ], true)));
+    }
+
+    return guix.withLayout([
+      guix.ui.headerWithBadge(ctrl.name, packageCount),
+      m("ul.list-unstyled", packages.map(describePackage))
+    ]);
+  };
+})();
diff --git a/js/view/packages.js b/js/view/packages.js
index 77b9785..debb9f2 100644
--- a/js/view/packages.js
+++ b/js/view/packages.js
@@ -23,7 +23,10 @@
     function renderName(package) {
       var name = package.name;
 
-      return m("a", { href: "/packages/".concat(name) }, name);
+      return m("a", {
+        config: m.route,
+        href: "/package/".concat(name)
+      }, name);
     }
 
     function renderHomepage(package) {
@@ -34,22 +37,6 @@
       }
     }
 
-    function renderLicense(package) {
-      function licenseLink(license) {
-        return m("a", { href: license.uri }, license.name);
-      }
-
-      if(_.isArray(package.license)) {
-        return m("ul.list-inline", package.license.map(function(license) {
-          return m("li", licenseLink(license));
-        }));
-      } else if(package.license) {
-        return licenseLink(package.license);
-      } else {
-        return "";
-      }
-    }
-
     function renderInstallLink(package) {
       return m("a", {
         href: "#",
@@ -82,7 +69,7 @@
               m("td", package.version),
               m("td", package.synopsis),
               m("td", renderHomepage(package)),
-              m("td", renderLicense(package)),
+              m("td", guix.ui.licenseList(package)),
               m("td", renderInstallLink(package))
             ]);
           })
diff --git a/js/view/ui.js b/js/view/ui.js
index 196406a..a528bee 100644
--- a/js/view/ui.js
+++ b/js/view/ui.js
@@ -42,4 +42,20 @@
       m("span.badge", badgeText)
     ]);
   };
+
+  ui.licenseList = function(package) {
+    function licenseLink(license) {
+      return m("a", { href: license.uri }, license.name);
+    }
+
+    if(_.isArray(package.license)) {
+      return m("ul.list-inline", package.license.map(function(license) {
+        return m("li", licenseLink(license));
+      }));
+    } else if(package.license) {
+      return licenseLink(package.license);
+    } else {
+      return "";
+    }
+  };
 })();