UI Improvement: Modal confirmation dialog

PHPCI/Controller/BuildController.php

@@ -129,6 +129,12 @@ class BuildController extends \PHPCI\Controller
         }
 
         $build  = $this->buildStore->getById($buildId);
+
+        if (!$build) {
+            $this->response->setResponseCode(404);
+            return '404 - Not Found';
+        }
+
         $this->buildStore->delete($build);
 
         header('Location: '.PHPCI_URL.'project/view/' . $build->getProjectId());

PHPCI/View/BuildsTable.phtml

@@ -73,7 +73,7 @@ switch($build->getStatus())
 				<span class="caret"></span>
 			</button>
 			<ul class="dropdown-menu">
-				<li><a href="javascript:confirmDelete('<?= PHPCI_URL ?>build/delete/<?php print $build->getId(); ?>');">Delete Build</a></li>
+				<li><a href="javascript:confirmDeleteBuild('<?= PHPCI_URL ?>build/delete/<?php print $build->getId(); ?>');">Delete Build</a></li>
 			</ul>
 			<?php endif; ?>
 		</div>

PHPCI/View/Home/index.phtml

@@ -58,8 +58,10 @@
 </div>
 
 <script>
-setInterval(function()
-{
-	$('#latest-builds').load('<?= PHPCI_URL ?>home/latest');
+    refreshBuildsTable = function()
+    {
+        $('#latest-builds').load('<?= PHPCI_URL ?>home/latest');
+    };
+
 }, 10000);
 </script>

public/assets/js/phpci.js

@@ -1,3 +1,32 @@
+/**
+ * See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
+ * for the details of code below
+ */
+if (!Function.prototype.bind) {
+    Function.prototype.bind = function (oThis) {
+        if (typeof this !== "function") {
+            // closest thing possible to the ECMAScript 5 internal IsCallable function
+            throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
+        }
+
+        var aArgs = Array.prototype.slice.call(arguments, 1),
+            fToBind = this,
+            fNOP = function () {
+            },
+            fBound = function () {
+                return fToBind.apply(this instanceof fNOP && oThis
+                    ? this
+                    : oThis,
+                    aArgs.concat(Array.prototype.slice.call(arguments)));
+            };
+
+        fNOP.prototype = this.prototype;
+        fBound.prototype = new fNOP();
+
+        return fBound;
+    };
+}
+
 /**
 * Used for delete buttons in the system, just to prevent accidental clicks.
 */
@@ -13,6 +42,171 @@ function confirmDelete(url)
 	}
 }
 
+/**
+ * Used for delete build buttons in the system, just to prevent accidental clicks.
+ */
+function confirmDeleteBuild(url) {
+
+    var dialog = new PHPCIConfirmDialog({
+        message: 'This build will be permanently deleted. Are you sure?',
+        confirmBtnCaption: 'Delete',
+        /*
+         confirm-btn click handler
+         */
+        confirmed: function (e) {
+            var dialog = this;
+            e.preventDefault();
+
+            /*
+             Call delete URL
+             */
+            $.ajax({
+                url: url,
+                'success': function () {
+                    if (refreshBuildsTable) {
+                        dialog.$dialog.on('hidden.bs.modal', function () {
+                            refreshBuildsTable();
+                        });
+                    }
+
+                    dialog.showStatusMessage('Successfully deleted!', 1000);
+                },
+                'error': function (data) {
+                    dialog.showStatusMessage('Deletion failed! Server says "' + data.statusText + '"');
+                }
+            });
+        }
+    });
+
+    dialog.show();
+}
+
+/**
+ * PHPCIConfirmDialog constructor options object
+ * @type {{message: string, title: string, confirmBtnCaption: string, cancelBtnCaption: string, confirmed: Function}}
+ */
+var PHPCIConfirmDialogOptions = {
+    message: 'The action will be performed and cannot be undone. Are you sure?',
+    title: 'Confirmation Dialog',
+    confirmBtnCaption: 'Ok',
+    cancelBtnCaption: 'Cancel',
+    confirmed: function (e) {
+        this.close();
+    }
+};
+
+var PHPCIConfirmDialog = Class.extend({
+    /**
+     * @param {PHPCIConfirmDialogOptions} options
+     */
+    init: function (options) {
+
+        options = options ? $.extend(PHPCIConfirmDialogOptions, options) : PHPCIConfirmDialogOptions;
+
+        if (!$('#confirm-dialog').length) {
+            /*
+             Add the dialog html to a page on first use. No need to have it there before first use.
+             */
+            $('body').append(
+                '<div class="modal fade" id="confirm-dialog">'
+                    + '<div class="modal-dialog">'
+                    + '<div class="modal-content">'
+                    + '<div class="modal-header">'
+                    + '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>'
+                    + '<h4 class="modal-title"></h4>'
+                    + '</div>'
+                    + '<div class="modal-body">'
+                    + '<p></p>'
+                    + '</div>'
+                    + '<div class="modal-footer">'
+                    + '<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>'
+                    + '<button type="button" class="btn btn-primary"></button>'
+                    + '</div>'
+                    + '</div>'
+                    + '</div>'
+                    + '</div>'
+            );
+        }
+
+        /*
+         Define dialog controls
+         */
+        this.$dialog = $('#confirm-dialog');
+        this.$cancelBtn = this.$dialog.find('div.modal-footer button.btn-default');
+        this.$confirmBtn = this.$dialog.find('div.modal-footer button.btn-primary');
+        this.$title = this.$dialog.find('h4.modal-title');
+        this.$body = this.$dialog.find('div.modal-body');
+
+        /*
+         Initialize its values
+         */
+        this.$title.html(options.title ? options.title : PHPCIConfirmDialogOptions.title);
+        this.$body.html(options.message ? options.message : PHPCIConfirmDialogOptions.message);
+        this.$confirmBtn.html(
+            options.confirmBtnCaption ? options.confirmBtnCaption : PHPCIConfirmDialogOptions.confirmBtnCaption
+        );
+
+        this.$cancelBtn.html(
+            options.cancelBtnCaption ? options.cancelBtnCaption : PHPCIConfirmDialogOptions.cancelBtnCaption
+        );
+
+        /*
+         Events
+         */
+        this.confirmBtnClick = options.confirmed;
+
+        /*
+         Re-bind on click handler
+         */
+        this.$confirmBtn.unbind('click');
+        this.$confirmBtn.click(this.onConfirm.bind(this));
+
+        /*
+        Restore state if was changed previously
+         */
+        this.$cancelBtn.show();
+        this.$confirmBtn.show();
+    },
+
+    /**
+     * Show dialog
+     */
+    show: function () {
+        this.$dialog.modal('show');
+    },
+
+    /**
+     * Hide dialog
+     */
+    close: function () {
+        this.$dialog.modal('hide');
+    },
+
+    onConfirm: function (e) {
+        $(this).attr('disabled', 'disabled');
+        this.confirmBtnClick(e);
+    },
+
+    showStatusMessage: function (message, closeTimeout) {
+        this.$confirmBtn.hide();
+        this.$cancelBtn.html('Close');
+
+        /*
+        Status message
+         */
+        this.$body.html(message);
+
+        if (closeTimeout) {
+            window.setTimeout(function () {
+                /*
+                 Hide the dialog
+                 */
+                this.close();
+            }.bind(this), closeTimeout);
+        }
+    }
+});
+
 /**
 * Used to initialise the project form:
 */