js: Overhaul UI with FRP!

* css/guix.css: New loading spinner.
* js/lib/kefir.js: New file.
* js/model/packages.js (guix.packages.Packages): Cache result.
  (guix.packages.Sorter, guix.packages.Pager): Delete.
  (guix.packages.installPackage): New function.
* js/utils.js (K): New variable.
  (guix.withEmit, guix.withEmitAttr, guix.makeModule): New functions.
* js/view/ui.js (guix.ui.paginate, guix.ui.spinUntil): New functions.
  (guix.ui.spinner): New variable.
* js/controller/generations.js: Rewrite.
* js/controller/packageInfo.js: Rewrite
* js/controller/packages.js: Rewrite.
* js/view/packages.js: Rewrite.
* js/view/generations.js: Delete.
* js/view/packageInfo.js: Delete.
* js/routes.js: Use new modules.
* guix/web/view/html.scm (javascripts): Update list.

1 files changed, 75 insertions, 0 deletions

diff --git a/js/view/ui.js b/js/view/ui.js
index a528bee..859fae6 100644
--- a/js/view/ui.js
+++ b/js/view/ui.js
@@ -58,4 +58,79 @@
       return "";
     }
   };
+
+  ui.paginate = function(currentPage, numPages, maxShown, emitter) {
+    function renderPage(text, attrs) {
+      attrs = attrs || {};
+      return m("li", attrs, m("a", { href: "#" }, text));
+    }
+
+    var ellipsis = renderPage("…", { class: "disabled" });
+    var start = currentPage - currentPage % maxShown;
+    var lastPage = numPages - 1;
+    var firstPrevClass = currentPage === 0 ? "disabled" : "";
+    var lastNextClass = currentPage === lastPage ? "disabled" : "";
+    var range = _.range(start, Math.min(start + maxShown, numPages));
+
+    return m("div", m("ul.pagination", [
+      // Back page
+      renderPage("First", {
+        class: firstPrevClass,
+        onclick: function() {
+          emitter.emit(0);
+        }
+      }),
+      // Jump to first page
+      renderPage("Previous", {
+        class: firstPrevClass,
+        onclick: function() {
+          if(currentPage > 0) {
+            emitter.emit(currentPage - 1);
+          }
+        }
+      }),
+      // Display ellipsis if there are hidden pages.
+      start > 0 ? ellipsis : ""
+    ].concat(range.map(function(i) {
+      // Jump to page
+      var attrs = {
+        class: i === currentPage ? "active" : "",
+        onclick: function() {
+          emitter.emit(i);
+        }
+      };
+      return renderPage(i + 1, attrs);
+    })).concat([
+      // Display ellipsis if there are hidden pages.
+      start + maxShown < numPages ? ellipsis : "",
+      // Forward page
+      renderPage("Next", {
+        class: lastNextClass,
+        onclick: function() {
+          if(currentPage < lastPage) {
+            emitter.emit(currentPage + 1);
+          }
+        }
+      }),
+      // Jump to last page
+      renderPage("Last", {
+        class: lastNextClass,
+        onclick: function() {
+          emitter.emit(lastPage);
+        }
+      })
+    ])));
+  };
+
+  ui.spinner = m(".spinner", [
+    m(".rect1"),
+    m(".rect2"),
+    m(".rect3"),
+    m(".rect4"),
+    m(".rect5")
+  ]);
+
+  ui.spinUntil = function(ob) {
+    return K.merge([K.constant(ui.spinner), ob]);
+  };
 })();