Merge pull request rockstor#1004 from priyaganti/issue#989_changeAler…

…tsToModals

Issue#989 change alerts to modals

src/rockstor/storageadmin/static/storageadmin/js/templates/pool/pools_table.jst

@@ -38,7 +38,7 @@
     <td>N/A</td>
 	</tr>
     <% }else{ %>
-    
+
     <tr>
       <td>
         <a href="#pools/<%= pool.get('name') %>"><i class="glyphicon glyphicon-list"></i> <%= pool.get('name') %></a>
@@ -73,6 +73,26 @@
 	<% }); %>
 	</tbody>
 </table>
+
+<div id="delete-pool-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+        <h3 id="myModalLabel">Delete Pool</h3>
+      </div>
+      <div class="modal-body">
+        <div class="messages"></div>
+        <h4>Pool (<span id="pass-pool-name"></span>) will be deleted. Are you sure?</h4>
+      </div>
+      <div class="modal-footer">
+        <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button>
+        <button id="js-confirm-pool-delete" class="btn btn-primary">Confirm</button>
+      </div><!--end modal-fooetr-->
+    </div><!--end modal-content-->
+  </div><!--end modal-dialog-->
+</div>
+
 <div class="pagination-ph">
 <% } else { %>
 <h4>No pools have been created.</h4>

src/rockstor/storageadmin/static/storageadmin/js/templates/share/rollback.jst

@@ -45,7 +45,7 @@
       <div class="modal-footer">
         <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button>
         <button id="js-confirm-rollback-submit" class="btn btn-primary">Confirm</button>
-      </div>
-    </div>
-  </div>
+      </div><!--end modal-fooetr-->
+    </div><!--end modal-content-->
+  </div><!--end modal-dialog-->
 </div>

src/rockstor/storageadmin/static/storageadmin/js/templates/share/share_details_layout.jst

@@ -40,6 +40,30 @@
   </p>
 </div>
 
+<!-- Modal for delete share -->
+
+<div id="delete-share-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+        <h3 id="myModalLabel">Delete Share</h3>
+      </div>
+      <div class="modal-body">
+        <div class="messages"></div>
+        <h4>Share (<%= share.get('name') %>) will be deleted. Are you sure?</h4>
+      </div>
+      <div class="modal-footer">
+        <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button>
+        <button id="js-confirm-share-delete" class="btn btn-primary">Confirm</button>
+      </div><!--end modal-fooetr-->
+    </div><!--end modal-content-->
+  </div><!--end modal-dialog-->
+</div>
+
+<!-- End delete share Modal -->
+
+
 <ul class="nav nav-tabs">
   <li class="active"><a href="#usage" data-toggle="tab">Usage</a></li>
   <li><a href="#access-control" data-toggle="tab">Access control</a></li>

src/rockstor/storageadmin/static/storageadmin/js/templates/share/shares_table.jst

@@ -34,11 +34,30 @@
 	   &nbsp;&nbsp;<a href="#shares/<%= share.get('name') %>/?cView=edit"><i class="glyphicon glyphicon-pencil"></i></a>
 	  </td>
           <td><a id="delete_share_<%= share.get('name') %>" data-name="<%= share.get('name') %>" data-action="delete" data-pool="<%= share.get('pool').name %>" data-size="<%= share.get('size')*1024 %>" rel="tooltip" title="Delete share"><i class="glyphicon glyphicon-trash"></i></a></td>
-
         </tr>
       <% }); %>
     </tbody>
   </table>
+
+<div id="delete-share-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+        <h3 id="myModalLabel">Delete Share</h3>
+      </div>
+      <div class="modal-body">
+        <div class="messages"></div>
+        <h4>Share (<span id="pass-share-name"></span>) will be deleted. Are you sure?</h4>
+      </div>
+      <div class="modal-footer">
+        <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button>
+        <button id="js-confirm-share-delete" class="btn btn-primary">Confirm</button>
+      </div><!--end modal-fooetr-->
+    </div><!--end modal-content-->
+  </div><!--end modal-dialog-->
+</div>
+
   <div class="pagination-ph"></div>
 <% } else { %>
   <% if (!pools.isEmpty()) { %>

src/rockstor/storageadmin/static/storageadmin/js/views/pools.js

@@ -30,7 +30,9 @@
 
 PoolsView = RockstorLayoutView.extend({
     events: {
-	"click a[data-action=delete]": "deletePool"
+	"click a[data-action=delete]": "deletePool",
+  'click #js-cancel': 'cancel',
+  'click #js-confirm-pool-delete': 'confirmPoolDelete'
     },
 
     initialize: function() {
@@ -89,27 +91,44 @@ PoolsView = RockstorLayoutView.extend({
     },
 
     deletePool: function(event) {
-	var _this = this;
-	var button = $(event.currentTarget);
-	if (buttonDisabled(button)) return false;
-	name = button.attr('data-name');
-	if(confirm("Delete pool: " + name + " ... Are you sure?")){
-	    disableButton(button);
-	    $.ajax({
-		url: "/api/pools/" + name,
-		type: "DELETE",
-		dataType: "json",
-		data: { "name": name },
-		success: function() {
-		    _this.render();
-		    enableButton(button);
-		},
-		error: function(xhr, status, error) {
-		    enableButton(button);
-		}
-	    });
-	}
-    }
+      var _this = this;
+      var button = $(event.currentTarget);
+      if (buttonDisabled(button)) return false;
+      poolName = button.attr('data-name');
+      // set share name in confirm dialog
+      _this.$('#pass-pool-name').html(poolName);
+      //show the dialog
+      _this.$('#delete-pool-modal').modal();
+      return false;
+    },
+
+    //modal confirm button handler
+      confirmPoolDelete: function(event) {
+        var _this = this;
+        var button = $(event.currentTarget);
+        if (buttonDisabled(button)) return false;
+          disableButton(button);
+          $.ajax({
+            url: "/api/pools/" + poolName,
+            type: "DELETE",
+            dataType: "json",
+            success: function() {
+              _this.collection.fetch({reset: true});
+              enableButton(button);
+              _this.$('#delete-pool-modal').modal('hide');
+              $('.modal-backdrop').remove();
+              app_router.navigate('pools', {trigger: true})
+            },
+            error: function(xhr, status, error) {
+              enableButton(button);
+            }
+          });
+        },
+
+        cancel: function(event) {
+          if (event) event.preventDefault();
+          app_router.navigate('pools', {trigger: true})
+        }
 });
 
 // Add pagination

src/rockstor/storageadmin/static/storageadmin/js/views/rollback.js

@@ -1,27 +1,27 @@
 /*
  *
- * @licstart  The following is the entire license notice for the 
+ * @licstart  The following is the entire license notice for the
  * JavaScript code in this page.
- * 
+ *
  * Copyright (c) 2012-2013 RockStor, Inc. <http://rockstor.com>
  * This file is part of RockStor.
- * 
+ *
  * RockStor is free software; you can redistribute it and/or modify
  * it under the terms of the GNU General Public License as published
  * by the Free Software Foundation; either version 2 of the License,
  * or (at your option) any later version.
- * 
+ *
  * RockStor is distributed in the hope that it will be useful, but
  * WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
  * General Public License for more details.
- * 
+ *
  * You should have received a copy of the GNU General Public License
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
- * 
+ *
  * @licend  The above is the entire license notice
  * for the JavaScript code in this page.
- * 
+ *
  */
 
 RollbackView = RockstorLayoutView.extend({
@@ -32,11 +32,11 @@ RollbackView = RockstorLayoutView.extend({
 
   initialize: function() {
     this.constructor.__super__.initialize.apply(this, arguments);
-    // Templates 
+    // Templates
     this.template = window.JST.share_rollback;
     this.snapshot_list_template = window.JST.share_rollback_snapshot_list;
     this.pagination_template = window.JST.common_pagination;
-    // Dependencies 
+    // Dependencies
     this.share = new Share({shareName: this.options.shareName});
     this.collection = new SnapshotCollection();
     this.collection.pageSize = 10;
@@ -62,11 +62,11 @@ RollbackView = RockstorLayoutView.extend({
       onfocusout: false,
       onkeyup: false,
       rules: {
-        snapshot: "required",  
+        snapshot: "required",
       },
       submitHandler: function() {
         var button = _this.$('#rollback-share');
-        var snapName = _this.$('input:radio[name=snapshot]:checked').val(); 
+        var snapName = _this.$('input:radio[name=snapshot]:checked').val();
         // set snap name in confirm dialog
         _this.$('#confirm-snap-name').html(snapName);
         // show confirm dialog
@@ -86,11 +86,12 @@ RollbackView = RockstorLayoutView.extend({
     }));
   },
 
-  confirmRollback: function() {
+  confirmRollback: function(event) {
     var _this = this;
-    var button = this.$('#js-confirm-rollback-submit');
+    var button = $(event.currentTarget);
     if (buttonDisabled(button)) return false;
-    var snapName = this.$('input:radio[name=snapshot]:checked').val(); 
+    disableButton(button);
+    var snapName = this.$('input:radio[name=snapshot]:checked').val();
     $.ajax({
       url: '/api/shares/' + _this.share.get('name') + '/rollback',
       type: "POST",
@@ -113,11 +114,10 @@ RollbackView = RockstorLayoutView.extend({
 
   cancel: function(event) {
     if (event) event.preventDefault();
-    app_router.navigate('shares/' + this.share.get('name'), {trigger: true}) 
+    app_router.navigate('shares/' + this.share.get('name'), {trigger: true})
   }
 
 });
 
 // Add pagination
 Cocktail.mixin(RollbackView, PaginationMixin);
-

src/rockstor/storageadmin/static/storageadmin/js/views/share_details_layout_view.js

@@ -34,6 +34,9 @@ ShareDetailsLayoutView = RockstorLayoutView.extend({
     "click #js-edit-compression": "editCompression",
     "click #js-edit-compression-cancel": "editCompressionCancel",
     "click #js-submit-compression": "updateCompression",
+    "click #js-delete": "deleteShare",
+    "click #js-cancel": "cancel",
+    "click #js-confirm-share-delete": "confirmShareDelete",
   },
 
   initialize: function() {
@@ -159,28 +162,42 @@ ShareDetailsLayoutView = RockstorLayoutView.extend({
         showError('error while creating snapshot');
       });
     });
+  },
 
-    this.$('#js-delete').click(function() {
-      var button = _this.$('#js-delete');
-      var name = _this.share.get('name');
-      if (buttonDisabled(button)) return false;
-      if(confirm("Delete share:  "+ name +"...Are you sure?")){
-      disableButton(button);
+  deleteShare: function(event){
+    var _this = this;
+    var button = $(event.currentTarget);
+    shareName = _this.share.get('name');
+    if (buttonDisabled(button)) return false;
+    // show modal
+    _this.$('#delete-share-modal').modal();
+    return false;
+  },
+
+  confirmShareDelete: function(event){
+    var _this = this;
+    var button = $(event.currentTarget);
+    if (buttonDisabled(button)) return false;
+    disableButton(button);
       $.ajax({
-        url: "/api/shares/" + name,
+        url: "/api/shares/" + shareName,
         type: "DELETE",
         dataType: "json",
         success: function() {
           enableButton(button);
+          _this.$('#delete-share-modal').modal('hide');
+          $('.modal-backdrop').remove();
           app_router.navigate('shares', {trigger: true})
         },
         error: function(xhr, status, error) {
           enableButton(button);
         }
-       });
-      }
-    });
+      });
+  },
 
+  cancel: function(event) {
+    if (event) event.preventDefault();
+    app_router.navigate('shares', {trigger: true})
   },
 
   renderAcl: function() {