added code mirror to edit big queries.

client/bower.json

@@ -18,6 +18,8 @@
     "zepto": "~1.1.3",
     "fontawesome": "~4.0.3",
     "angular-leaflet-directive": "~0.7.7",
-    "leaflet": "~0.7.2"
+    "leaflet": "~0.7.2",
+    "codemirror": "~3.19.0",
+    "angular-ui-codemirror": "~0.1.1"
   }
 }

client/coffee/controllers/documentCtrl.coffee

@@ -68,6 +68,12 @@ root.controllers.controller('documentCtrl', ['$scope', '$routeParams', '$http',
     $scope.idx = Number($routeParams.idx) or 1
     $scope.meta = {}
     $scope.newQuery = $routeParams.query or ""
+    $scope.notfound = false
+    $scope.error = ""
+    $scope.codeMirrorOptions =
+        lineWrapping : true
+        lineNumbers: true
+        mode: 'text/typescript'
     
     url  = "/api/#{ $routeParams.server }/#{ $routeParams.database }/#{ $routeParams.collection }"
     if $routeParams.query
@@ -80,6 +86,11 @@ root.controllers.controller('documentCtrl', ['$scope', '$routeParams', '$http',
     $http.get(url).then((res) ->
          $scope.doc = res.data.document
          $scope.meta = res.data.meta
+    ).catch( (res) ->
+        if res.data.error == "not found"
+            $scope.notfound = true
+        else
+            $scope.error = res.data.error
     )
     
     $scope.parseQueryToJSON = (query) ->

client/coffee/vultureApp.coffee

@@ -3,6 +3,7 @@ root = this;
 
 angular.module('vulture', [
   'ngRoute'
+  'ui.codemirror'
   'leaflet-directive'
   'vulture.filters'
   'vulture.services'

client/index.html

@@ -11,6 +11,7 @@
     <link rel="stylesheet" href="bower_components/foundation/css/normalize.css">
     <link rel="stylesheet" href="bower_components/fontawesome/css/font-awesome.css">
     <link rel="stylesheet" href="bower_components/leaflet-dist/leaflet.css">
+    <link rel="stylesheet" type="text/css" href="bower_components/codemirror/lib/codemirror.css">
         
   
     <!-- If you are using the gem version, you need this only -->
@@ -39,11 +40,15 @@
     <div ng-view></div>
   
     <script src="bower_components/leaflet-dist/leaflet.js"></script>
+    <script type="text/javascript" src="bower_components/codemirror/lib/codemirror.js"></script>
+    <script type="text/javascript" src="bower_components/codemirror/mode/javascript/javascript.js"></script>
     <script src="bower_components/underscore/underscore.js"></script>
     <script src="bower_components/jquery/dist/jquery.js"></script>
     <script src="bower_components/foundation/js/foundation.js"></script>
     <script src="bower_components/angular-route/angular-route.js"></script>
     <script src="bower_components/angular-leaflet-directive/dist/angular-leaflet-directive.js"></script>
+    <script type="text/javascript" src="bower_components/angular-ui-codemirror/ui-codemirror.js"></script>
+
     
       
     <script src="js/vultureApp.js"></script>

client/partials/document.html

@@ -9,11 +9,25 @@
                     Query <i class="fa fa-thumbs-o-down" style="color:red;" ng-show="getQueryPath()=='' && newQuery != ''"></i>
                 </a>
             </li>
-            <li><a class="button tiny" ng-click="newQuery=''" ng-class="{disabled: newQuery=='' }">Clear</a></li>
+            <li>
+                <a class="button tiny" ng-click="newQuery=''" ng-class="{disabled: newQuery=='' }">Clear</a>
+            </li>
+            <li>
+                <a class="button tiny" ng-click="bigInput = !bigInput" >
+                    <i class="fa fa-pencil-square-o" ng-show="!bigInput"></i>
+                    <i class="fa fa-minus-square-o" ng-show="bigInput"></i>
+                </a>
+            </li>
         </ul>
     </div>
 </div>
 
+<div class="row" ng-show="bigInput">
+    <div class="large-12 columns">
+        <ui-codemirror ng-model="newQuery" ui-codemirror="codeMirrorOptions"  ></ui-codemirror>
+    </div>
+</div>
+
 <div class="row">
     <div class="large-12 columns" style="text-align: center;">
             <a class="fa fa-chevron-left" ng-href="{{ previousDocumentUrl() }}" ng-show="{{ hasPreviousDocument() }}"></a>
@@ -22,6 +36,15 @@
     </div>
 </div>
 
+<div class="row">
+    <div class="large-12 columns" style="text-align: center;" ng-show="!closeAlert && notfound">
+            <div class="alert-box">
+                No document Found!
+                <a class="close" ng-click="closeAlert=true">&times;</a>
+            </div>
+    </div>
+</div>
+
 <div class="row">
     <div class="large-12 columns">
         <table style="width: 100%;">