Statistics
| Branch: | Tag: | Revision:

root / templates / apply_set.html @ 8a53465c

History | View | Annotate | Download (6.8 kB)

1
{% extends "base.html" %}
2
{% load i18n %}
3

    
4
{% block title %}
5
        {% if edit %}
6
                {% trans "Edit Rule" %} {{form.data.name}}
7
        {% else %}
8
                {% trans "Create new Rule" %}
9
        {% endif %}
10
{% endblock %}
11

    
12
{% block breadcrumbs %}:: 
13
        {% if edit %}
14
                {% trans "Edit rule" %} {{form.data.name}}
15
        {% else %}
16
        {% trans "Create set of rules" %}
17
        {% endif %}
18
                {% endblock %}
19
{% block extrahead %}
20
<script type="text/javascript" src="/static/js/jquery.formset.js"></script>
21
<script type="text/javascript">
22
           $(function() {
23
                  $('.formset_class').formset({
24
                  });
25
           })
26
       </script>
27
<script>
28
        $(document).ready( function(){
29
                //Initialize jquery formset
30
        
31
                $("#id_sourceport").css('width', '100px').attr('size', '5');
32
                $("#id_port").css('width', '100px').attr('size', '5');
33
                $("#id_destinationport").css('width', '100px').attr('size', '5');
34
                $('#id_then').attr("multiple", "");
35
                $( "#id_expires" ).datepicker({ dateFormat: 'yy-mm-dd' , maxDate: '+10d', minDate: '+1d', changeMonth: false, changeYear: false }).datepicker( $.datepicker.regional[ "el" ] );
36
                {% comment %}
37
                $('#then_diag').dialog({
38
                        height: 220,
39
            width: 340,
40
                        modal: true,
41
                        autoOpen: false,
42
                        buttons: {
43
                'Add': function() {
44
                        console.log($("#add_rl_form").serialize());
45
                        $.ajax({
46
                        url:"{% url add-rate-limit %}", 
47
                        data:$("#add_rl_form").serialize(),
48
                        type: "POST",
49
                        cache: false,
50
                        success:function(data){
51
                                        try {
52
                                                value = data.pk;
53
                                                text = data.value;
54
                                                $('#id_then').append($("<option></option>").attr("value",value).text(text));
55
                                                $('#then_diag').dialog('close');
56
                                        }
57
                                        catch (exception) {
58
                                                $('#then_diag').html(data);
59
                                        }                                        
60
                                }
61
                                });
62
                },
63
                Cancel: function() {
64
                        $('#then_diag').dialog('close');
65
                }
66
        }
67
                });
68
                {% endcomment %}
69
                $('#port_diag').dialog({
70
                        height: 220,
71
            width: 340,
72
                        modal: true,
73
                        autoOpen: false,
74
                        buttons: {
75
                'Add': function() {
76
                        $.ajax({
77
                        url:"{% url add-port %}", 
78
                        data:$("#add_port_form").serialize(),
79
                        type: "POST",
80
                        cache: false,
81
                        success:function(data){
82
                                        try {
83
                                                value = data.value;
84
                                                text = data.text;
85
                                                $('#id_port').append($("<option></option>").attr("value",value).text(text));
86
                                                $('#id_destinationport').append($("<option></option>").attr("value",value).text(text));
87
                                                $('#id_sourceport').append($("<option></option>").attr("value",value).text(text));
88
                                                $('#port_diag').dialog('close');
89
                                        }
90
                                        catch (exception) {
91
                                                $('#port_diag').html(data);
92
                                        }                                        
93
                                }
94
                                });
95
                },
96
                Cancel: function() {
97
                        $('#port_diag').dialog('close');
98
                }
99
        }
100
                });
101
                
102
                {% comment %}
103
                $("#new_then_actions").button({
104
            icons: {
105
                primary: "ui-icon-plusthick"
106
            },
107
                        })
108
                        .click(function(){
109
                                $.ajax({
110
                                        url: "{% url add-rate-limit %}",
111
                                        cache: false,
112
                                        success: function(data){
113
                                                $("#then_diag").html(data);
114
                                        }
115
                                });
116
                                $('#then_diag').dialog('open');
117
                                return false;
118
                        });
119
                        
120
                        {% endcomment %}
121
                        $(".new_port").button({
122
            icons: {
123
                primary: "ui-icon-plusthick"
124
            },
125
                        })
126
                        .click(function(){
127
                                $.ajax({
128
                                        url: "{% url add-port %}",
129
                                        cache: false,
130
                                        success: function(data){
131
                                                $("#port_diag").html(data);
132
                                        }
133
                                });
134
                                $('#port_diag').dialog('open');
135
                                return false;
136
                        });
137
                        
138
                $("#portsacc").accordion({
139
                        collapsible: true,
140
                        active: false,
141

142
                });
143
                
144
                $("#applybutton").button();
145

146
                });
147
                
148
</script>
149

    
150

    
151
<style type="text/css">
152
th {
153
        padding-right: 0.5em;
154
        vertical-align: top;
155
}
156

    
157
.accord_wrapper{
158
        height: 452px !important;
159
} 
160

    
161
.help {
162
        font-style: italic;
163

    
164
}
165
div.roundbox, #portsacc, #id_comments{
166
        -moz-border-radius: 5px; border-radius:5px; -webkit-border-radius: 5px;
167
        -moz-box-shadow: 0 0 3px #AAAAAA; box-shadow: 0 0 3px #AAAAAA; -webkit-box-shadow: 0 0 3px #AAAAAA;
168
        background-color: #F4F4F4;
169
        border: 1px solid #FFFFFF;
170
        clear: both;
171
        float: left;
172
        margin: 5px 0 5px 100px;
173
        padding: 10px;
174
    width: 620px;
175
}
176
#rule_form_wrapper{
177
    margin: 15px auto;
178
    position: relative;
179
    text-align: center;
180
    /*width: 800px;*/
181
}
182

    
183
#rule_form_container input:not([type="submit"]), #rule_form_container select {
184
    background: none repeat scroll 0 0 #FFFFFF;
185
    border: 1px solid #DDDDDD;
186
        -moz-border-radius: 3px; border-radius:3px; -webkit-border-radius: 3px; 
187
    float: left;
188
    font-family: "Century Gothic",Helvetica,sans-serif;
189
    font-size: 13px;
190
    outline: medium none;
191
    padding: 5px;
192
    width: 180px;
193
}
194

    
195
#id_comments {
196
    background: none repeat scroll 0 0 #FFFFFF;
197
    border: 1px solid #DDDDDD;
198
    border-radius: 3px 3px 3px 3px;
199
    float: left;
200
    font-family: "Century Gothic",Helvetica,sans-serif;
201
    font-size: 13px;
202
    outline: medium none;
203
    padding: 5px;
204
           width: 622px;
205
}
206

    
207
#rule_form_container{
208
        -moz-border-radius: 10px 10px 10px 10px; border-radius:10px; -webkit-border-radius: 10px;
209
        -moz-box-shadow: 0 0 3px #AAAAAA; box-shadow: 0 0 3px #AAAAAA; -webkit-box-shadow: 0 0 3px #AAAAAA; 
210
        background-color: #F9F9F9;
211
        border: 2px solid #FFFFFF;
212
        overflow: hidden;
213
    /*width: 800px;*/
214
        }
215
#rule_form_container div label {
216
    color: #666666;
217
    float: left;
218
    font-family: "Century Gothic",Helvetica,sans-serif;
219
    font-size: 15px;
220
    font-weight: bold;
221
    line-height: 26px;
222
    margin-right: 15px;
223
    text-align: right;
224
    text-shadow: 1px 1px 1px #FFFFFF;
225
    width: 180px;
226
}
227
#rule_form_container p.submit {
228
    background: none repeat scroll 0 0 transparent;
229
    border: medium none;
230
    box-shadow: none;
231
}
232
input {
233
        width:100px;
234
}
235
textarea{
236
height: 63px;
237
    width: 174px;
238
}
239
.delete-row{
240
    background: url("/static/inline-delete.png") no-repeat scroll 0 50% transparent;
241
    outline: 0 none;
242
    padding-left: 16px;
243
}
244

    
245
.add-row {
246
    background: url("/static/icon_addlink.gif") no-repeat scroll 0 50% transparent;
247
    outline: 0 none;
248
    padding-left: 14px;
249
}
250
</style>
251
{% endblock %}
252
{% block content %}
253
<div align="center" id="rule_form_wrapper">
254
{% load unescape %}
255
    <form method="POST">
256
{{ formset.non_form_errors.as_ul }}
257
            {% csrf_token %}
258
<table id="formset" class="form">
259
          <thead><tr>
260
    <th align="center">Name</th><th>Source</th><th>Destination</th><th>Protocol</th><th>SrcPort</th><th>DstPort</th><th>Port</th><th>Then</th><th>Note</th>
261
  </tr></thead>
262
{% for form in formset.forms %}
263
{{form.errors}}
264
<tr class='formset_class'>
265
       <td>{{ form.name }}</td>
266
           <td>{{ form.source }}</td>
267
           <td>{{ form.destination }}</td>
268
           <td>{{ form.protocol }}</td>
269
           <td>{{ form.sourceport }}</td>
270
           <td>{{ form.destinationport }}</td>
271
           <td>{{ form.port }}</td>
272
           <td>{{ form.then }}</td>
273
           <td>{{ form.comments }}</td>
274
    </tr>
275
                        {% endfor %}
276
        </table>
277
{{ formset.management_form }}
278
                <input type="submit" id="applybutton" value="{% trans "Apply" %}" />
279
    </form>
280
</div>
281
<div id="then_diag" title="Add new rate-limit value">
282
</div>
283
<div id="port_diag" title="Add new port">
284
</div>
285

    
286
{% endblock %}