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.

7 files changed, 133 insertions, 75 deletions

diff --git a/guix-web/view/html.scm b/guix-web/view/html.scm
index c72421a..83ff226 100644
--- a/guix-web/view/html.scm
+++ b/guix-web/view/html.scm
@@ -51,11 +51,13 @@
         (javascript "/js/view/ui.js" agpl3+)
         (javascript "/js/view/layout.js" agpl3+)
         (javascript "/js/model/packages.js" agpl3+)
-        (javascript "/js/view/packages.js" agpl3+)
-        (javascript "/js/controller/packages.js" agpl3+)
         (javascript "/js/model/generations.js" agpl3+)
-        (javascript "/js/view/generations.js" agpl3+)
+        (javascript "/js/controller/packages.js" agpl3+)
+        (javascript "/js/controller/packageInfo.js" agpl3+)
         (javascript "/js/controller/generations.js" agpl3+)
+        (javascript "/js/view/packages.js" agpl3+)
+        (javascript "/js/view/packageInfo.js" agpl3+)
+        (javascript "/js/view/generations.js" agpl3+)
         (javascript "/js/routes.js" agpl3+)))
 
 (define stylesheets
@@ -98,59 +100,6 @@
 (define (all-packages)
   (main-layout "Packages" (map render-javascript javascripts)))
 
-;; This should be moved client-side and the server should just serve
-;; the relevant JSON.
-(define (view-package name)
-  (define (describe-inputs package package-inputs description)
-    (define (describe-input input)
-      `(li
-        (a (@ (href ,(string-append
-                      "/"
-                      (encode-and-join-uri-path
-                       `("package" ,(package-name input))))))
-           ,(string-append (package-name input) " "
-                           (package-version input)))))
-    (let ((inputs (package-inputs package)))
-      (if (null? inputs)
-          '()
-          `((dt ,description)
-            (dd (ul ,@(map describe-input
-                           (filter package?
-                                   (map second inputs)))))))))
-
-  (define (describe-package package)
-    `(dl
-      (dt "Version")
-      (dd ,(package-version package))
-      (dt "Synopsis")
-      (dd ,(package-synopsis package))
-      (dt "Description")
-      (dd ,(package-description package))
-      (dt "License")
-      (dd ,(render-package-license package))
-      ,@(describe-inputs package package-inputs "Inputs")
-      ,@(describe-inputs package package-native-inputs "Native Inputs")
-      ,@(describe-inputs package package-propagated-inputs
-                         "Propagated Inputs")))
-
-  (let ((packages (find-packages-by-name name)))
-    (define (format-package-count)
-      (let ((count (length packages)))
-        (format #f "~d ~a"
-                count
-                (if (> count 1)
-                    "versions"
-                    "version"))))
-
-    (main-layout
-     name
-     `((h1 ,name (span (@ (class "badge"))
-                       ,(format-package-count)))
-       (ul (@ (class "list-unstyled"))
-           ,@(map (lambda (p)
-                    `(li ,(describe-package p)))
-                  packages))))))
-
 (define (librejs)
   (define (weblabel js)
     (let ((source (javascript-source-uri js)))
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 "";
+    }
+  };
 })();