From 9ead031a7322495ab1f91452cfbc870179956b85 Mon Sep 17 00:00:00 2001
From: Heiko Kernbach <heiko@arangodb.com>
Date: Fri, 1 Aug 2014 18:16:06 +0200
Subject: [PATCH] added visual feedback for user editing a document or edge

---
 .../frontend/js/templates/documentView.ejs    |  1 -
 .../frontend/js/views/documentView.js         | 49 ++++++++++++++++++-
 2 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/js/apps/system/aardvark/frontend/js/templates/documentView.ejs b/js/apps/system/aardvark/frontend/js/templates/documentView.ejs
index 4f56a52dd9..9eb03e38fa 100644
--- a/js/apps/system/aardvark/frontend/js/templates/documentView.ejs
+++ b/js/apps/system/aardvark/frontend/js/templates/documentView.ejs
@@ -9,7 +9,6 @@
     <button id="saveDocumentButton" class="button-success pull-right">Save</button>
     <div class="pull-left shortcuts showHotkeyHelp">
     </div>
-    <div id="showSaveState" class="show-save-state">Saved...</div>
 	</div>
 
 </script>
diff --git a/js/apps/system/aardvark/frontend/js/views/documentView.js b/js/apps/system/aardvark/frontend/js/views/documentView.js
index d1273ffabb..5e58694f20 100644
--- a/js/apps/system/aardvark/frontend/js/views/documentView.js
+++ b/js/apps/system/aardvark/frontend/js/views/documentView.js
@@ -37,12 +37,20 @@
       this.editor.set(toFill);
     },
 
+    jsonContentChanged: function() {
+      this.enableSaveButton();
+    },
+
     render: function() {
       $(this.el).html(this.template.render({}));
+      this.disableSaveButton();
       this.breadcrumb();
 
+      var self = this;
+
       var container = document.getElementById('documentEditor');
       var options = {
+        change: function(){self.jsonContentChanged()},
         search: true,
         mode: 'tree',
         modes: ['tree', 'code']
@@ -99,7 +107,15 @@
 
     saveDocument: function () {
       var model, result;
-      model = this.editor.get();
+
+      try {
+        model = this.editor.get();
+      }
+      catch (e) {
+        console.log("error1");
+        this.errorConfirmation();
+        console.log("error2");
+      }
 
       model = JSON.stringify(model);
 
@@ -119,10 +135,39 @@
       }
 
       if (result === true) {
-        $('#showSaveState').fadeIn(1000).fadeOut(1000);
+        this.successConfirmation();
+        this.disableSaveButton();
       }
     },
 
+    successConfirmation: function () {
+      $('#documentEditor .tree').animate({backgroundColor: '#C6FFB0'}, 500);
+      $('#documentEditor .tree').animate({backgroundColor: '#FFFFF'}, 500);
+
+      $('#documentEditor .ace_content').animate({backgroundColor: '#C6FFB0'}, 500);
+      $('#documentEditor .ace_content').animate({backgroundColor: '#FFFFF'}, 500);
+    },
+
+    errorConfirmation: function () {
+      $('#documentEditor .tree').animate({backgroundColor: '#FFB0B0'}, 500);
+      $('#documentEditor .tree').animate({backgroundColor: '#FFFFF'}, 500);
+
+      $('#documentEditor .ace_content').animate({backgroundColor: '#FFB0B0'}, 500);
+      $('#documentEditor .ace_content').animate({backgroundColor: '#FFFFF'}, 500);
+    },
+
+    enableSaveButton: function () {
+      $('#saveDocumentButton').prop('disabled', false);
+      $('#saveDocumentButton').addClass('button-success');
+      $('#saveDocumentButton').removeClass('button-close');
+    },
+
+    disableSaveButton: function () {
+      $('#saveDocumentButton').prop('disabled', true);
+      $('#saveDocumentButton').addClass('button-close');
+      $('#saveDocumentButton').removeClass('button-success');
+    },
+
     breadcrumb: function () {
       var name = window.location.hash.split("/");
       $('#transparentHeader').append(