diff options
Diffstat (limited to 'js/view/packages.js')
-rw-r--r-- | js/view/packages.js | 256 |
1 files changed, 70 insertions, 186 deletions
diff --git a/js/view/packages.js b/js/view/packages.js index fde0fde..245677a 100644 --- a/js/view/packages.js +++ b/js/view/packages.js @@ -16,207 +16,91 @@ // <http://www.gnu.org/licenses/>. (function() { - var packages = guix.packages; - var spinner = m(".spinner-container", m(".spinner")); - - packages.view = function(ctrl) { - function renderName(package) { - var name = package.name; - - return m("a", { - config: m.route, - href: "/package/".concat(name) - }, name); - } - - function renderHomepage(package) { - if(package.homepage) { - return m("a", { href: package.homepage }, package.homepage); - } else { - return ""; - } - } - - function renderInstallLink(package) { - return m("a", { - href: "#", - onclick: function() { - ctrl.selectedPackage(package); - ctrl.phase(packages.PHASE_PROMPT); - return false; - } - }, "install"); - } - - function renderPackageTable() { - return m("table.table", [ - m("thead", [ - m("tr", [ - ctrl.columns.map(function(column) { - return m("th", { - class: columnHeaderClass(column), - onclick: function() { - ctrl.sortBy(column.sortField); - } - }, column.header); - }).concat([m("th", "")]) + var view = guix.packages.view = {}; + + view.installModal = function(package, phase, phaseStream) { + function renderPromptModal() { + var body = [ + m("p", "Do you want to install the following packages?"), + m("ul", [ + m("li", [ + package.name, + " ", + package.version ]) - ]), - m("tbody", [ - ctrl.pager().currentPage().map(function(package) { - return m("tr", [ - m("td", renderName(package)), - m("td", package.version), - m("td", package.synopsis), - m("td", renderHomepage(package)), - m("td", guix.ui.licenseList(package)), - m("td", renderInstallLink(package)) - ]); - }) ]) - ]); - } - - function renderPagination() { - function renderPage(text, opts) { - return m("li", { - class: opts.class || "", - onclick: opts.onclick - }, m("a", { href: "#" }, text)); - } - - return m("div", m("ul.pagination", [ - // Back page - renderPage("«", { - class: ctrl.pager().isFirstPage() ? "disabled" : "", + ]; + var buttons = [ + m(".btn.btn-default", { + onclick: guix.withEmit(phaseStream, guix.packages.PHASE_NONE) + }, "Cancel"), + m(".btn.btn-primary", { onclick: function() { - ctrl.pager().previousPage(); - return false; + phaseStream.emit(guix.packages.PHASE_DERIVATION); + guix.packages.installPackage(package).then(function() { + phaseStream.emit(guix.packages.PHASE_SUCCESS); + }, function() { + phaseStream.emit(guix.packages.PHASE_ERROR); + }); } - }) - ].concat(ctrl.pager().pages.map(function(page, i) { - // Jump to page - return renderPage(i + 1, { - class: ctrl.pager().isCurrentPage(i) ? "active" : "", - onclick: function() { - ctrl.pager().gotoPage(i); - return false; - } - }); - })).concat([ - // Forward page - renderPage("»", { - class: ctrl.pager().isLastPage() ? "disabled" : "", - onclick: function() { - ctrl.pager().nextPage(); - return false; - } - }) - ]))); - } + }, "Install"), + ]; - function renderSearchBox() { - return m("input.form-control", { - type: "text", - placeholder: "Search", - oninput: m.withAttr("value", function(value) { - ctrl.searchTerm(value); - ctrl.doSearch(); - }), - value: ctrl.searchTerm() - }); + return guix.ui.modal("Install Packages", body, buttons); } - function columnHeaderClass(column) { - var sorter = ctrl.sorter(); - - if(column.sortField === sorter.field) { - return sorter.isDescending ? "sorter sort-descend" : "sorter sort-ascend"; - } + function renderDerivationModal() { + var body = [ + m("p", [ + "Installing ", + package.name, + " ", + package.version, + "..." + ]), + m(".progress", [ + m(".progress-bar.progress-bar-striped.active", { + role: "progressbar", + style: { width: "100%" } + }) + ]) + ]; + var buttons = m(".btn.btn-danger", { + onclick: guix.withEmit(phaseStream, guix.packages.PHASE_NONE) + }, "Abort"); - return "sorter"; + return guix.ui.modal("Install Packages", body, buttons); } - function renderModal() { - function renderBody() { - switch(ctrl.phase()) { - case packages.PHASE_PROMPT: - return [ - m("p", "Do you want to install the following packages?"), - m("ul", [ - m("li", [ - ctrl.selectedPackage().name, - " ", - ctrl.selectedPackage().version - ]) - ]) - ]; - case packages.PHASE_DERIVATION: - return [ - m("p", [ - "Installing ", - ctrl.selectedPackage().name, - " ", - ctrl.selectedPackage().version, - "..." - ]), - m(".progress", [ - m(".progress-bar.progress-bar-striped.active", { - role: "progressbar", - style: { width: "100%" } - }) - ]) - ]; - case packages.PHASE_SUCCESS: - return m(".alert.alert-success", "Installation complete!"); - case packages.PHASE_ERROR: - return m(".alert.alert-danger", "Installation failed!"); - } + function renderSuccessModal() { + var body = m(".alert.alert-success", "Installation complete!"); + var buttons = m(".btn.btn-primary", { + onclick: guix.withEmit(phaseStream, guix.packages.PHASE_NONE) + }, "Close"); - return null; - } - - function renderButtons() { - switch(ctrl.phase()) { - case packages.PHASE_PROMPT: - return [ - m(".btn.btn-default", "Cancel"), - m(".btn.btn-primary", { - onclick: function() { - ctrl.installSelectedPackage(); - m.redraw(); - } - }, "Install"), - ]; - case packages.PHASE_DERIVATION: - return m(".btn.btn-danger", "Abort"); - case packages.PHASE_SUCCESS: - case packages.PHASE_ERROR: - return m(".btn.btn-primary", { - onclick: function() { - ctrl.phase(packages.PHASE_NONE); - } - }, "Close"); - } + return guix.ui.modal("Install Packages", body, buttons); + } - return null; - } + function renderErrorModal() { + var body = m(".alert.alert-danger", "Installation failed!"); + var buttons = m(".btn.btn-primary", { + onclick: guix.withEmit(phaseStream, guix.packages.PHASE_NONE) + }, "Close"); - if(ctrl.phase() != packages.PHASE_NONE) { - return guix.ui.modal("Install Packages", - renderBody(), - renderButtons()); - } + return guix.ui.modal("Install Packages", body, buttons); + } - return null; + switch(phase) { + case guix.packages.PHASE_PROMPT: + return renderPromptModal(); + case guix.packages.PHASE_DERIVATION: + return renderDerivationModal(); + case guix.packages.PHASE_SUCCESS: + return renderSuccessModal(); + case guix.packages.PHASE_ERROR: + return renderErrorModal(); } - return guix.withLayout(_.isEmpty(ctrl.packages()) ? spinner : [ - guix.ui.headerWithBadge("Packages", ctrl.packageCount()), - renderModal(), - renderSearchBox(), - renderPackageTable(), - renderPagination() - ]); + return null; }; })(); |