Firewall on Demand

{% extends "base.html" %}

{% load i18n %}

{% block extrahead %}

<script type="text/javascript" src="/static/js/jquery.dataTables.js"></script>

<script type="text/javascript">

        $(document).ready( function(){

                $("#hid_mid").val('');

                $('#dialog').dialog({

                        height: 220,

            width: 300,

                        modal: true,

                        autoOpen: false,

                        buttons: {

                'Delete': function() {

                route = $('#route_to_delete').text();

                route_url_id = '#del_route_'+route;

                url = $(route_url_id).attr('href');

                        $.ajax({

                        url: url ,

                        cache: false,

                        success: function(data) {

                                $('#dialog').dialog('close');

                                window.setTimeout('location.reload()', 1000);

                          }

                });

                },

                Cancel: function() {

                        $('#dialog').dialog('close');

                },

        },

        close: function() {

        update_val = $("#hid_mid").val();

                if (update_val == 'UPDATED'){

                        $("#hid_mid").val('');

                        window.setTimeout('location.reload()', 500);

                }

    }

                });

                $('#console').dialog({

                        height: 250,

            width: 800,

                        modal: true,

                        autoOpen: false,

                        close: function() {

                        update_val = $("#hid_mid").val();

                                if (update_val == 'UPDATED'){

                                        $("#hid_mid").val('');

                                        window.setTimeout('location.reload()', 500);

                                }

                    }

                });

                $('#routes_table').dataTable( {

                        "bJQueryUI": true,

                        "aoColumns": [ 

                                {"bVisible": false, "bSearchable": false,"bSortable": false },

                                {"bSearchable": true,"bSortable": true},

                                {"bSearchable": true,"bSortable": true},

                                {"bSearchable": true,"bSortable": true},

                                {"bSearchable": true,"bSortable": true},

                                {"bSearchable": true,"bSortable": true},

                                {"bSearchable": true,"bSortable": true},

                                {"bSearchable": true,"bSortable": true},

                                {"bVisible": true, "bSearchable": false,"bSortable": false}

                        ],

                         "aaSorting": [[0,'desc']],

                        "oLanguage": {

                                "sLengthMenu": '{% trans "Display" %} <select><option value="25">25</option><option value="50">50</option><option value="-1">{% trans "All" %}</option></select> rules'

                        },

                        "iDisplayLength": 25,

        } );

        $( ".button_place #routebutton" ).button({

            icons: {

                primary: "ui-icon-circle-plus"

            },

                        });

                $( " .edit_button" ).button({

            icons: {

                primary: "ui-icon-wrench"

            },

                        });

                $( " .del_button" ).button({

            icons: {

                primary: "ui-icon-circle-close"

            },

                        })

                        .click(function(){

                                $('#dialog').dialog('open');

                                return false;

                        });

                $("#consolebutton").button({

            icons: {

                primary: "ui-icon-image"

            },

                        })

                        .click(function(){

                                $("#consolebutton").stop().stop();

                                $("#consolebutton").css('color', '#555555');

                                $('#console').dialog('open');

                                return false;

                        });

                });

function delete_route(route){

        route_name = route;

        $('#route_to_delete').text(route_name);

        return false;

}                

</script>

<style type="text/css">

        #console {

                background: none repeat scroll 0 0 #36102a !important;

                color: #edeae8 !important;

                font-family: monospace !important;

        }

        .message {

                font-family: monospace !important;

        }

</style>

{% endblock %}

{% block title %}{% trans "My rules" %}{% endblock %}

{% block content %}

<div style="float:left">

        <h3 style="margin-top: 0px;">{% trans "My rules" %}</h3>

</div>

<div class='button_place' style="float:right">

        <button id="consolebutton">Console</button> <a href="{% url add-route %}" id="routebutton">Add Rule</a>

</div>

<table class="display" width="100%" id="routes_table">

<thead>

<tr>

        <th>Id</th>

        <th>{% trans "Name" %}</th>

        <th>{% trans "Match" %}</th>

        <th style="text-align: center;">{% trans "Then" %}</th>

        <th style="text-align: center; ">{% trans "Status" %}</th>

        {% comment %}<th style="text-align: center;">{% trans "Details" %}</th>{% endcomment %}

        <th style="text-align: center;">{% trans "Applier" %}</th>

        <th style="text-align: center;">{% trans "Expires" %}</th>

        <th style="text-align: center;">{% trans "Response" %}</th>

        <th style="text-align: center; width:130px;">{% trans "Actions" %}</th>

</tr>

</thead>

<tbody>

{% for route in routes %}

<tr {% ifequal  'ACTIVE' %} class="GradeA" {% else %} class="GradeX" {% endifequal %}>

        <td>{{ route.pk }}</td>

        <td>{{ route.name }}</td>

        <td>{{ route.get_match|safe|escape }}</td>

        <td style="text-align: center;">{{route.get_then|safe|escape}}</td>

        <td style="text-align: center; ">{{route.status}}</td>

        {% comment %}<td style="text-align: center;">{{ route.response }}</td>{% endcomment %}

        <td style="text-align: center;">{{ route.applier }}</td>

        <td style="text-align: center;">{{ route.expires }}</td>

        <td style="text-align: center;">{{ route.response }}</td>

        <td style="text-align: center; width:150px;">

                {% ifequal route.status 'ACTIVE' %}

                <a href="{% url edit-route route.name %}" class="edit_button" id="edit_button_{{route.pk}}">Edit</a> 

                <button class="del_button" id="{{route.name}}" onclick="javascript:delete_route(this.id)">Del</button>

                <a href="{% url delete-route route.name %}" style="display:none" id="del_route_{{route.name}}"></a>

                {% else %}

                {% ifequal route.status 'INACTIVE' %}

                <a href="{% url edit-route route.name %}" class="edit_button" id="edit_button_{{route.pk}}">Reactivate</a>

                {% else %}

                {% ifequal route.status 'OUTOFSYNC' %}

                <a href="{% url edit-route route.name %}" class="edit_button" id="edit_button_{{route.pk}}">ReSync</a>

                {% else %}

                -

                {% endifequal %}

                {% endifequal %}

                {% endifequal %}</td>

</tr>

{% endfor %}

</tbody>

</table>

<div id="dialog" title="Delete Route">

                <p>You are about to delete rule <strong><span id="route_to_delete"></span></strong></p>

                <p>Deleting the rule will automatically remove the configuration from the network and mark this route as inactive.</p>

                <p>Are you sure you want to proceed?</p>

</div>

<div id="console" title="Console">

                                        {% include "poll.html" %}

</div>

{% endblock %}