Add a reload button, and an error display for rule sets

2 files changed, 29 insertions, 3 deletions

diff --git a/contexts/data/fiveui/entry.css b/contexts/data/fiveui/entry.css
index 39c63fb..ec4791c 100644
--- a/contexts/data/fiveui/entry.css
+++ b/contexts/data/fiveui/entry.css
@@ -32,6 +32,13 @@ ul.entries li.entry {
   padding-bottom: 10px;
 }
 
+li.entry .error {
+  margin-top: 10px;
+  padding: 10px;
+  background-color: #FF4D4D;
+  color: #ffffff;
+}
+
 ul.entries li.entry:first-child {
   border-top: 0px;
 }
diff --git a/contexts/data/fiveui/entry.js b/contexts/data/fiveui/entry.js
index a41ba5f..025034a 100644
--- a/contexts/data/fiveui/entry.js
+++ b/contexts/data/fiveui/entry.js
@@ -190,15 +190,17 @@ fiveui.RuleSetEntry = Backbone.View.extend({
   className: 'entry',
 
   events: {
-    'click span.save'   : 'save',
-    'click span.remove' : 'remove',
-    'click span.edit'   : 'edit',
+    'click .save'   : 'save',
+    'click .remove' : 'remove',
+    'click .edit'   : 'edit',
+    'click .reload' : 'reload',
   },
 
   viewTemplate: _.template(
     [ '<div class="content">'
     , '  <span class="button remove">x</span>'
     , '  <span class="button edit">edit</span>'
+    , '  <span class="button reload">reload</span>'
     , '  <span class="title"><%= name %></span>'
     , '</div>'
     ].join('')),
@@ -227,10 +229,27 @@ fiveui.RuleSetEntry = Backbone.View.extend({
     return this;
   },
 
+  errorTemplate: _.template('<div class="error"><%= message %></div>'),
+
+  editError:function(target, message) {
+    this.edit();
+
+    this.$el.append(this.errorTemplate({ message: message }));
+
+    return this;
+  },
+
   save: function() {
     var source = this.$el.find('.source').text();
     this.model.set('source', source);
     this.model.save({}, {
+      success: _.bind(this.render,    this),
+      error:   _.bind(this.editError, this)
+    });
+  },
+
+  reload:function() {
+    this.model.save({}, {
       success: _.bind(this.render, this),
       error:   _.bind(this.edit,   this)
     });