From aeb1feb1f1bba0348caece7dcb41d658528abe7c Mon Sep 17 00:00:00 2001
From: Anon Ray <rayanon004@gmail.com>
Date: Fri, 23 Aug 2013 19:08:02 +0530
Subject: [PATCH] Add basic notifications for page and menu saving

  Add basic notifications when saving page or menu. Notifications should be
more robust and should also indicate if content has been saved.
---
 mouchak/static/css/editor.css |    5 +++++
 mouchak/static/js/editor.js   |   25 ++++++++++++++++++++++++-
 mouchak/templates/editor.html |   20 +++++++++++++++++++-
 3 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/mouchak/static/css/editor.css b/mouchak/static/css/editor.css
index 6f437a5..692f8ca 100644
--- a/mouchak/static/css/editor.css
+++ b/mouchak/static/css/editor.css
@@ -141,6 +141,11 @@ textarea {
 #addPage {
   margin: 10px 0 0 200px;
 }
+#notifications {
+  width: 300px;
+  z-index: 100;
+  margin: 5px auto;
+}
 
 /* ==========================================================================
    Helper classes
diff --git a/mouchak/static/js/editor.js b/mouchak/static/js/editor.js
index 177ed12..861a1ec 100644
--- a/mouchak/static/js/editor.js
+++ b/mouchak/static/js/editor.js
@@ -191,6 +191,9 @@
       return false;
     },
     updatePage: function() {
+      var success_template = _.template($('#success-notif').html());
+      var fail_template = _.template($('#fail-notif').html());
+
       var name = $('#name').val();
       var title = $('#title').val();
       var children = $('#children').val();
@@ -210,9 +213,17 @@
           model.set(response.page);
           model.id = response.page.id;
           M.pagelistview.render();
+          $('#notifications').html(success_template({
+            title: 'Saved',
+            msg: ''
+          }));
         },
         error: function(model, xhr) {
           console.log('failed', model, xhr);
+          $('#notifications').html(fail_template({
+            title: 'Error!',
+            msg: 'Something went wrong, and the page could not be updated'
+          }));
         }
       });
       return false;
@@ -363,7 +374,10 @@
       this.showMenuOptions(this.model.get('customMenu'));
     },
     saveMenu: function() {
-      console.log('saving menu..');
+      //console.log('saving menu..');
+      var success_template = _.template($('#success-notif').html());
+      var fail_template = _.template($('#fail-notif').html());
+
       var bool, html = '', menuOrder = [];
       if($('#custom-menu').is(":checked")) {
         bool = true;
@@ -378,8 +392,17 @@
       this.model.save({}, {
         success: function(model, response) {
           console.log(model, response);
+          $('#notifications').html(success_template({
+            title: 'Saved',
+            msg: ''
+          }));
+
         },
         error: function(xhr, response) {
+          $('#notifications').html(fail_template({
+            title: 'Error!',
+            msg: 'Something went wrong, and the page could not be updated'
+          }));
         }
       });
       //alert('end of save menu');
diff --git a/mouchak/templates/editor.html b/mouchak/templates/editor.html
index 069936d..75ba00d 100644
--- a/mouchak/templates/editor.html
+++ b/mouchak/templates/editor.html
@@ -23,7 +23,7 @@
     <![endif]-->
 
     <div class="container" id="container">
-      <div id="header"> </div>
+      <div id="header"><div id="notifications"></div></div>
       <div id="content-container"></div>
       <div id="footer">
       </div>
@@ -219,5 +219,23 @@
         </textarea>
       </div>
     </script>
+
+    <!-- notification templates -->
+    <script type="text/template" id="success-notif">
+      <div class="alert alert-success">
+        <button type="button" class="close" data-dismiss="alert">&times;</button>
+        <h4> <%= title %> </h4>
+        <%= msg %>
+      </div>
+    </script>
+
+    <script type="text/template" id="fail-notif">
+      <div class="alert alert-error">
+        <button type="button" class="close" data-dismiss="alert">&times;</button>
+        <h4> <%= title %> </h4>
+        <%= msg %>
+      </div>
+    </script>
+
   </body>
 </html>
-- 
1.7.10.4