[#22][s]: refactor notification to use Bootstrap alerts.

src/util.js

@@ -150,16 +150,31 @@ var util = function() {
     // TODO: remove (commented out as part of Backbon-i-fication
     // if (template in app.after) app.after[template]();
   }
-  
-  function notify( message, options ) {
-    if (!options) var options = {};
-    $('.data-explorer .notification-container').show();
-    $('.data-explorer .notification-message').text(message);
-    if (!options.loader) $('.data-explorer .notification-loader').hide();
-    if (options.loader) $('.data-explorer .notification-loader').show();
-    if (!options.persist) setTimeout(function() { $('.data-explorer .notification-container').hide() }, 3000);
-  }
 
+  function notify(message, options) {
+    if (!options) var options = {};
+    var tmplData = _.extend({
+      msg: message,
+      category: 'warning'
+      },
+      options);
+    var _template = ' \
+      <div class="alert-message {{category}} fade in" data-alert="alert"><a class="close" href="#">×</a> \
+        <p>{{msg}} \
+          {{#loader}} \
+          <img src="images/small-spinner.gif" class="notification-loader"> \
+          {{/loader}} \
+        </p> \
+      </div>';
+    var _templated = $.mustache(_template, tmplData); 
+    _templated = $(_templated).appendTo($('.data-explorer .alert-messages'));
+    if (!options.persist) {
+      setTimeout(function() {
+        $(_templated).remove();
+      }, 3000);
+    }
+  }
+  
   function formatMetadata(data) {
     out = '<dl>';
     $.each(data, function(key, val) {

src/view.js

@@ -46,6 +46,8 @@ function parseQueryString(q) {
 my.DataExplorer = Backbone.View.extend({
   template: ' \
   <div class="data-explorer"> \
+    <div class="alert-messages"></div> \
+    \
     <div class="header"> \
       <ul class="navigation"> \
         <li class="active"><a href="#grid" class="btn">Grid</a> \
@@ -64,11 +66,6 @@ my.DataExplorer = Backbone.View.extend({
         <div class="dialog-content dialog-border"></div> \
       </div> \
     </div> \
-    <div class="notification-container"> \
-      <div class="notification"> \
-        <img src="images/small-spinner.gif" class="notification-loader"><span class="notification-message">Loading...</span> \
-      </div> \
-    </div> \
   </div> \
   ',
 
@@ -402,12 +399,15 @@ my.DataTableRow = Backbone.View.extend({
     var newData = {};
     newData[header] = newValue;
     this.model.set(newData);
-    util.notify("Updating row...", {persist: true, loader: true});
+    util.notify("Updating row...", {loader: true});
     this.model.save().then(function(response) {
-        util.notify("Row updated successfully");
+        util.notify("Row updated successfully", {category: 'success'});
       })
       .fail(function() {
-        alert('error saving');
+        util.notify('Error saving row', {
+          category: 'error',
+          persist: true
+        });
       });
   },