network: ajax rule deletion

network/static/js/network.js

+
+
+$('i[class="icon-remove"]').click(function() {
+    href = $(this).parent('a').attr('href');
+    csrf = getCookie('csrftoken');
+    
+    var click_this = this;
+
+    bootbox.dialog("Are you sure?", [
+        {
+            "label": "Cancel",
+            "class": "btn-info",
+            "callback": function () {}
+        },
+        {
+            "label": "Remove",
+            "class": "btn-danger",
+            "callback": function() {
+                delete_rule_or_group(click_this);
+            }
+        }
+    ]);
+    return false;
+});
+
+
+function delete_rule_or_group(click_this) {
+    ajax = $.ajax({
+        type: 'POST',
+        url: href,
+        headers: {"X-CSRFToken": csrf},
+        context: click_this,
+        success: function(data, textStatus, xhr) {
+            if(xhr.status == 200) {
+                // we delete a row in a table
+                if(href.indexOf("rules") != -1) {
+                    $(this).closest('tr').fadeOut(500, function() {
+                        $(this).remove();
+                    });
+                } 
+                // we delete the whole div around the table
+                else {
+                    // we need to readd the deleted group to the select
+                    group_pk = parseInt($(this).closest('h4').attr('id'));
+                    group_name = $(this).closest('h4').text();
+                    
+                    $(this).closest('div').fadeOut(500, function() {
+                        $(this).remove();
+                        $('#add_group')
+                            .append($("<option></option>")
+                            .attr('value', group_pk)
+                            .text(group_name));
+                    });
+                }
+            }
+        }
+    });
+    return false;
+}
+
+
+
+
+
+/**                                                                         
+ * Getter for user cookies                                                  
+ * @param  {String} name Cookie name                                        
+ * @return {String}      Cookie value                                       
+ */                                                                         
+                                                                            
+function getCookie(name) {                                                  
+  var cookieValue = null;                                                   
+  if (document.cookie && document.cookie != '') {                           
+    var cookies = document.cookie.split(';');                               
+    for (var i = 0; i < cookies.length; i++) {                              
+      var cookie = jQuery.trim(cookies[i]);                                 
+      if (cookie.substring(0, name.length + 1) == (name + '=')) {           
+        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+        break;                                                              
+      }                                                                     
+    }                                                                       
+  }                                                                         
+  return cookieValue;                                                       
+} 

network/templates/network/base.html

@@ -58,8 +58,9 @@
     </div>
     </div>
     <script src="http://code.jquery.com/jquery-latest.js"></script>
     <script src="http://code.jquery.com/jquery-latest.js"></script>
     <script src="{% static "js/bootstrap.min.js" %}"></script>
     <script src="{% static "js/bootstrap.min.js" %}"></script>
+    <script src="{% static "js/bootbox.min.js" %}"></script>
     <!--<script src="{% static "js/select2-3.4.0/select2.min.js" %}"></script>-->
     <!--<script src="{% static "js/select2-3.4.0/select2.min.js" %}"></script>-->
-    <!--<script src="{% static "js/project.js" %}"></script>-->
+    <script src="{% static "js/network.js" %}"></script>
     <script>
     <script>
     {% block extra_js %}
     {% block extra_js %}
     {% endblock %}
     {% endblock %}

network/templates/network/columns/host-rule-action.html

 {% load i18n %}
 {% load i18n %}
 {% load l10n %}
 {% load l10n %}
-<a href="{% url network.rule_delete pk=record.pk %}?from={{ request.path }}"><i class="icon-remove"></i></a>
-<a href="{% url network.rule pk=record.pk %}"><i class="icon-pencil"></i></a>
+<div style="white-space: nowrap;">
+    <a href="{% url network.rule_delete pk=record.pk %}?from={{ request.path }}"><i class="icon-remove"></i></a>
+    <a href="{% url network.rule pk=record.pk %}"><i class="icon-pencil"></i></a>
+</div>

network/templates/network/columns/host-rule.html

@@ -15,5 +15,6 @@
 {% endif %}
 {% endif %}
 
 
 {% if record.nat %}
 {% if record.nat %}
-    <span class="label label-success">NAT [{{ record.dport }}:{{record.nat_dport}}]</span>
+    <span class="label">NAT
+        [ {{ record.dport }} <i class="icon-arrow-right"></i> {{record.nat_dport}} ]</span>
 {% endif %}
 {% endif %}

network/templates/network/host-edit.html

@@ -21,13 +21,15 @@
     
     
     <h3>Groups</h3>
     <h3>Groups</h3>
     {% for group in group_rule_list %}
     {% for group in group_rule_list %}
-        <h4>{{ group.name }} 
-            <a href="{% url network.remove_host_group pk=host_pk group_pk=group.pk %}?from={{ request.path }}">
-                <i class="icon-remove" style="vertical-align: middle;"></i></a>
-        <a href="{% url network.group group.pk %}">
-            <i class="icon-pencil" style="vertical-align: middle;"></i></a>
-        </h4>
-      {% render_table group.table %}
+        <div>
+            <h4 id="{{ group.pk }}_group_pk">{{ group.name }} 
+                <a href="{% url network.remove_host_group pk=host_pk group_pk=group.pk %}?from={{ request.path }}">
+                    <i class="icon-remove" style="vertical-align: middle;"></i></a>
+            <a href="{% url network.group group.pk %}">
+                <i class="icon-pencil" style="vertical-align: middle;"></i></a>
+            </h4>
+            {% render_table group.table %}
+        </div>
     {% endfor %}
     {% endfor %}
     
     
     <h3>Add host group</h3>
     <h3>Add host group</h3>
@@ -37,7 +39,7 @@
       <form action="{% url network.add_host_group pk=host_pk %}" method="POST">
       <form action="{% url network.add_host_group pk=host_pk %}" method="POST">
         {% csrf_token %}
         {% csrf_token %}
         <div class="input-append">
         <div class="input-append">
-          <select name="group">
+          <select name="group" id="add_group">
             {% for rest in not_used_groups %}
             {% for rest in not_used_groups %}
               <option value="{{ rest.pk }}">{{ rest }}</option>
               <option value="{{ rest.pk }}">{{ rest }}</option>
             {% endfor %}
             {% endfor %}