changed style of json import

html/admin/js/templates/documentsView.ejs

@@ -2,7 +2,8 @@
   <div id="transparentHeader">
     <div id="documentsToolbar" class="pagination pagination-small pagination-right">
 
-    <div id="documentsUploadDiv" class="btn btn-primary btn-success btn-block">
+    <!-- remove marker for docupdiv--!>
+    <div id="documentsUploadDiv" class="btn btn-primary btn-success btn-block" style="display:none">
       <img id="uploadIndicator" style="display: none;" src="/_admin/html/img/ajax-loader.gif"/>
         <input id="documentsUploadFile" name="documentsUploadFile" type="file" accept="application/json" />Import
     </div>
@@ -28,7 +29,8 @@
            <option value="&gt;=">&gt;=</option>
        </select><input id="attribute_value0" type="text" placeholder="Attribute value" class="filterValue">
         <a id="addFilterItem"><i class="icon icon-white icon-plus"></i></a>
-        <button id="filterSend">Filter</button>
+        <button id="filterSend" class="btn btn-primary btn-success">Filter</button>
+        <button id="importModal" class="btn btn-primary btn-success">Import</button>
     </div>
 </div>
 
@@ -88,3 +90,26 @@
     <button id="confirmCreateEdge" class="btn btn-success" style="float:right">Create</button>
   </div>
 </div>
+
+<!-- Document Import Modal -->
+<div id="docImportModal" style="display:none" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+  <div class="modal-header">
+    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+    <h3 id="myModalLabel">Import documents</h3>
+  </div>
+  <div class="modal-body" id="importDocument">
+    <p style="float:left">Choose your file:</p>
+    <i class="icon-info-sign modalImportTooltips" title="Supported filetype: json" style="float:right"></i>
+    <br></br>
+    <table>
+      <tr>
+        <input id="importDocuments" name="importDocuments" type="file" accept="application/json" />
+      </tr>
+      <tr>
+      </tr>
+    </table>
+  </div>
+  <div class="modal-footer">
+    <button id="confirmDocImport" class="btn btn-success" style="float:right">Import</button>
+  </div>
+</div>

html/admin/js/views/documentsView.js

@@ -9,6 +9,8 @@ var documentsView = Backbone.View.extend({
   filters : { "0" : true },
   filterId : 0,
 
+  allowUpload: false,
+
   collectionContext : {
     prev: null,
     next: null
@@ -37,7 +39,9 @@ var documentsView = Backbone.View.extend({
     "keyup #createEdge"          : "listenKey",
     "click .key"                 : "nop",
     "keyup"                      : "returnPressedHandler",
-    "keydown .filterValue"       : "filterValueKeydown"
+    "keydown .filterValue"       : "filterValueKeydown",
+    "click #importModal"         : "showImportModal",
+    "click #confirmDocImport"    : "startUpload"
   },
 
   showSpinner: function() {
@@ -48,6 +52,14 @@ var documentsView = Backbone.View.extend({
     $('#uploadIndicator').hide();
   },
 
+  showImportModal: function() {
+    $("#docImportModal").modal('show');
+  },
+
+  hideImportModal: function() {
+    $("#docImportModal").modal('hide');
+  },
+
   returnPressedHandler: function(event) {
     if (event.keyCode === 13) {
       if ($("#confirmDeleteBtn").attr("disabled") === false) {
@@ -66,23 +78,10 @@ var documentsView = Backbone.View.extend({
     }
   },
 
-  uploadSetup: function () {
+  startUpload: function () {
     var self = this;
-
-    $('#documentsUploadFile').change(function(e) {
-      var file;
-      var filetype;
-
-      var files = e.target.files || e.dataTransfer.files;
-      file = files[0];
-
-      if (file.type !== 'application/json') {
-        arangoHelper.arangoNotification("Unsupported filetype: " + file.type);
-        return;
-      }
-      
+    if (self.allowUpload === true) {
       self.showSpinner();
-
       $.ajax({
         type: "POST",
         async: false,
@@ -90,7 +89,7 @@ var documentsView = Backbone.View.extend({
           '/_api/import?type=documents&collection='+
           encodeURIComponent(self.colid)+
           '&createCollection=false',
-        data: file,
+        data: self.file,
         processData: false,
         contentType: 'json',
         dataType: 'json',
@@ -99,6 +98,7 @@ var documentsView = Backbone.View.extend({
             if (xhr.status === 201) {
               arangoHelper.arangoNotification("Upload successful");
               self.hideSpinner();
+              self.hideImportModal();
               return;
             }
           }
@@ -106,6 +106,28 @@ var documentsView = Backbone.View.extend({
           arangoHelper.arangoNotification("Upload error");
         }
       });
+    }
+    else {
+      arangoHelper.arangoNotification("Unsupported filetype: " + self.file.type);
+    }
+  },
+
+  uploadSetup: function () {
+    var self = this;
+
+    //$('#documentsUploadFile').change(function(e) {
+    $('#importDocuments').change(function(e) {
+      self.files = e.target.files || e.dataTransfer.files;
+      self.file = self.files[0];
+
+      if (self.file.type !== 'application/json') {
+        arangoHelper.arangoNotification("Unsupported filetype: " + self.file.type);
+        self.allowUpload = false;
+        return;
+      }
+      else {
+        self.allowUpload = true;
+      }
     });
   },
 
@@ -454,6 +476,11 @@ var documentsView = Backbone.View.extend({
     $.gritter.removeAll();
 
     this.uploadSetup();
+
+    $('.modalImportTooltips').tooltip({
+            placement: "left"
+    });
+
     return this;
   },
   renderPagination: function (totalPages) {