Statistics
| Branch: | Tag: | Revision:

root / templates / apply_set.html @ 552eaedd

History | View | Annotate | Download (11.4 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
                          added: addRow,
25
                  });
26
           })
27

28
           function addRow(row){
29
                   $('[id^="id_form"]').filter('[id$="then"]').attr("multiple", "");
30
                   $('[id^="id_form"]').filter('[id$="applier"]').find('option:not(:selected)').remove().end();
31
                   $('[id^="id_form"]').filter('[id$="expires"]').datepicker({ dateFormat: 'yy-mm-dd' , maxDate: '+10d', minDate: '+1d', changeMonth: false, changeYear: false }).datepicker( $.datepicker.regional[ "el" ] );
32
           }
33
       </script>
34
<script>
35
        $(document).ready( function(){
36
                //Initialize jquery formset
37
                //$('[id^="id_form"]').filter('[id$="sourceport"]').css('width', '100px').attr('size', '5');
38
                //$('[id^="id_form"]').filter('[id$="port"]').css('width', '100px').attr('size', '5');
39
                //$('[id^="id_form"]').filter('[id$="destinationport"]').css('width', '100px').attr('size', '5');
40
                $('[id^="id_form"]').filter('[id$="applier"]').find('option:not(:selected)').remove().end();
41
                $('[id^="id_form"]').filter('[id$="then"]').attr("multiple", "");
42
                $('[id^="form"]').filter('[id$="applier"]').attr("value", "{{applier}}");
43
                $('[id^="id_form"]').filter('[id$="expires"]').datepicker({ dateFormat: 'yy-mm-dd' , maxDate: '+10d', minDate: '+1d', changeMonth: false, changeYear: false }).datepicker( $.datepicker.regional[ "el" ] );
44
                {% comment %}
45
                $('#then_diag').dialog({
46
                        height: 220,
47
            width: 340,
48
                        modal: true,
49
                        autoOpen: false,
50
                        buttons: {
51
                'Add': function() {
52
                        console.log($("#add_rl_form").serialize());
53
                        $.ajax({
54
                        url:"{% url add-rate-limit %}", 
55
                        data:$("#add_rl_form").serialize(),
56
                        type: "POST",
57
                        cache: false,
58
                        success:function(data){
59
                                        try {
60
                                                value = data.pk;
61
                                                text = data.value;
62
                                                $('#id_then').append($("<option></option>").attr("value",value).text(text));
63
                                                $('#then_diag').dialog('close');
64
                                        }
65
                                        catch (exception) {
66
                                                $('#then_diag').html(data);
67
                                        }                                        
68
                                }
69
                                });
70
                },
71
                Cancel: function() {
72
                        $('#then_diag').dialog('close');
73
                }
74
        }
75
                });
76
                {% endcomment %}
77
                $('#port_diag').dialog({
78
                        height: 220,
79
            width: 340,
80
                        modal: true,
81
                        autoOpen: false,
82
                        buttons: {
83
                'Add': function() {
84
                        $.ajax({
85
                        url:"{% url add-port %}",
86
                        data:$("#add_port_form").serialize(),
87
                        type: "POST",
88
                        cache: false,
89
                        success:function(data){
90
                                        try {
91
                                                value = data.value;
92
                                                text = data.text;
93
                                                $('[id^="id_form"]').filter('[id$="-sourceport"]').append($("<option></option>").attr("value",value).text(text));
94
                                                $('[id^="id_form"]').filter('[id$="-destinationport"]').append($("<option></option>").attr("value",value).text(text));
95
                                                $('[id^="id_form"]').filter('[id$="-port"]').append($("<option></option>").attr("value",value).text(text));
96
                                                $('#port_diag').dialog('close');
97
                                        }
98
                                        catch (exception) {
99
                                                $('#port_diag').html(data);
100
                                        }                                        
101
                                }
102
                                });
103
                },
104
                Cancel: function() {
105
                        $('#port_diag').dialog('close');
106
                }
107
        }
108
                });
109
                
110
                {% comment %}
111
                $("#new_then_actions").button({
112
            icons: {
113
                primary: "ui-icon-plusthick"
114
            },
115
                        })
116
                        .click(function(){
117
                                $.ajax({
118
                                        url: "{% url add-rate-limit %}",
119
                                        cache: false,
120
                                        success: function(data){
121
                                                $("#then_diag").html(data);
122
                                        }
123
                                });
124
                                $('#then_diag').dialog('open');
125
                                return false;
126
                        });
127
                        
128
                        {% endcomment %}
129
                        $(".new_port").button({
130
            icons: {
131
                primary: "ui-icon-plusthick",
132
            },
133
                        })
134
                        .click(function(){
135
                                $.ajax({
136
                                        url: "{% url add-port %}",
137
                                        cache: false,
138
                                        success: function(data){
139
                                                $("#port_diag").html(data);
140
                                        }
141
                                });
142
                                $('#port_diag').dialog('open');
143
                                return false;
144
                        });
145
                        
146
                $("#portsacc").accordion({
147
                        collapsible: true,
148
                        active: false,
149

150
                });
151
                
152
                $("#applybutton").button();
153
                $(".button_place #routebutton").button({
154
                icons: {
155
                    primary: "ui-icon-circle-plus"
156
                },
157
            });
158

159
                });
160
        
161
                
162
</script>
163

    
164

    
165
<style type="text/css">
166
th {
167
        padding-right: 0.5em;
168
        vertical-align: top;
169
}
170

    
171
.accord_wrapper{
172
        height: 452px !important;
173
} 
174

    
175
.help {
176
        font-style: italic;
177

    
178
}
179
div.roundbox, #portsacc, #id_comments{
180
        -moz-border-radius: 5px; border-radius:5px; -webkit-border-radius: 5px;
181
        -moz-box-shadow: 0 0 3px #AAAAAA; box-shadow: 0 0 3px #AAAAAA; -webkit-box-shadow: 0 0 3px #AAAAAA;
182
        background-color: #F4F4F4;
183
        border: 1px solid #FFFFFF;
184
        clear: both;
185
        float: left;
186
        margin: 5px 0 5px 100px;
187
        padding: 10px;
188
    width: 620px;
189
}
190
#rule_form_wrapper{
191
    margin: 15px auto;
192
    position: relative;
193
    text-align: center;
194
    /*width: 800px;*/
195
}
196

    
197
#rule_form_container input:not([type="submit"]), #rule_form_container select {
198
    background: none repeat scroll 0 0 #FFFFFF;
199
    border: 1px solid #DDDDDD;
200
        -moz-border-radius: 3px; border-radius:3px; -webkit-border-radius: 3px; 
201
    float: left;
202
    font-family: "Century Gothic",Helvetica,sans-serif;
203
    font-size: 13px;
204
    outline: medium none;
205
    padding: 5px;
206
    width: 180px;
207
}
208

    
209
#id_comments {
210
    background: none repeat scroll 0 0 #FFFFFF;
211
    border: 1px solid #DDDDDD;
212
    border-radius: 3px 3px 3px 3px;
213
    float: left;
214
    font-family: "Century Gothic",Helvetica,sans-serif;
215
    font-size: 13px;
216
    outline: medium none;
217
    padding: 5px;
218
           width: 622px;
219
}
220

    
221
#rule_form_container{
222
        -moz-border-radius: 10px 10px 10px 10px; border-radius:10px; -webkit-border-radius: 10px;
223
        -moz-box-shadow: 0 0 3px #AAAAAA; box-shadow: 0 0 3px #AAAAAA; -webkit-box-shadow: 0 0 3px #AAAAAA; 
224
        background-color: #F9F9F9;
225
        border: 2px solid #FFFFFF;
226
        overflow: hidden;
227
    /*width: 800px;*/
228
        }
229
#rule_form_container div label {
230
    color: #666666;
231
    float: left;
232
    font-family: "Century Gothic",Helvetica,sans-serif;
233
    font-size: 15px;
234
    font-weight: bold;
235
    line-height: 26px;
236
    margin-right: 15px;
237
    text-align: right;
238
    text-shadow: 1px 1px 1px #FFFFFF;
239
    width: 180px;
240
}
241
#rule_form_container p.submit {
242
    background: none repeat scroll 0 0 transparent;
243
    border: medium none;
244
    box-shadow: none;
245
}
246
input {
247
        width:100px;
248
}
249
textarea{
250
height: 56px;
251
    width: 140px;
252
}
253
.delete-row{
254
    background: url("/static/inline-delete.png") no-repeat scroll 0 50% transparent;
255
    outline: 0 none;
256
    padding-left: 16px;
257
}
258

    
259
.add-row {
260
    background: url("/static/icon_addlink.gif") no-repeat scroll 0 50% transparent;
261
    outline: 0 none;
262
    padding-left: 14px;
263
}
264
tr.formset_class>td{
265
border-bottom: 2px solid #E6E6E6;
266

    
267
}
268
table{
269
border-collapse:collapse;
270
}
271
.formerrors{
272
        text-align: center;
273
}
274
</style>
275
{% endblock %}
276
{% block content %}
277
<div style="clear:both; height: 20px;">
278
<div style="float:left">
279
        <h3 style="margin-top: 0px;">{% trans "Add rule-set" %}</h3>
280
</div>
281
<div class='button_place' style="float:right">
282
        <a href="#" id="portbutton" class="new_port">Add Port</a>
283
</div>
284
</div>
285
<div align="center" id="rule_form_wrapper">
286
{% load unescape %}
287
    <form method="POST">
288
            {% csrf_token %}
289
             <input type="hidden" id="id_applier" name="applier" value="{{applier}}"/>
290
                <table id="formset" class="form">
291
                        <thead>
292
                                <tr>
293
                                        <th align="center">Name</th>
294
                                        <th style="display:none">Applier</th>
295
                                        <th>Source</th>
296
                                        <th>Destination</th>
297
                                        <th>Protocol</th>
298
                                        <th>SrcPort</th>
299
                                        <th>DstPort</th>
300
                                        <th>Port</th>
301
                                        <th>Then</th>
302
                                        <th>Expires</th>
303
                                        <th>Note</th>
304
                                </tr>
305
                        </thead>
306
                        
307
                        {% if formset.non_form_errors %}
308
                        <tr>
309
                <td colspan="10" class="formerrors">{{formset.non_form_errors|unescape}}</td>
310
            </tr>
311
            {% endif %}
312
                        {% for form in formset.forms %}
313
                        {% if form.errors %}
314
                        <tr>
315
                        
316
                        
317
                        <td colspan="10" class="formerrors">{{ form.non_field_errors|unescape}}</td>
318
                        </tr>
319
                        <tr>
320
                                <td>
321
                                        {% if form.name.errors %}
322
                    <table>
323
                    <tr><td style="color:red">
324
                        {{ form.name.errors|join:", " }}
325
                    </td></tr>
326
                    </table>
327
                    {% endif %}
328
                                
329
                                </td>
330
                                <td>
331
                                {% if form.source.errors %}
332
                    <table>
333
                    <tr><td style="color:red">
334
                        {{ form.source.errors|join:", " }}
335
                    </td></tr>
336
                    </table>
337
                {% endif %}
338
                                </td>
339
                                <td>
340
                                {% if form.destination.errors %}
341
                    <table>
342
                    <tr><td style="color:red">
343
                        {{ form.destination.errors|join:", " }}
344
                    </td></tr>
345
                    </table>
346
                {% endif %}
347
                                </td>
348
                                <td>
349
                                {% if form.protocol.errors %}
350
                    <table>
351
                    <tr><td style="color:red">
352
                        {{ form.protocol.errors|join:", " }}
353
                    </td></tr>
354
                    </table>
355
                {% endif %}
356
                                </td>
357
                                <td>
358
                                {% if form.sourceport.errors %}
359
                    <table>
360
                    <tr><td style="color:red">
361
                        {{ form.sourceport.errors|join:", " }}
362
                    </td></tr>
363
                    </table>
364
                {% endif %}
365
                                </td>
366
                                <td>
367
                                {% if form.destinationport.errors %}
368
                    <table>
369
                    <tr><td style="color:red">
370
                        {{ form.destinationport.errors|join:", " }}
371
                    </td></tr>
372
                    </table>
373
                {% endif %}
374
                                </td>
375
                                <td>
376
                                {% if form.port.errors %}
377
                    <table>
378
                    <tr><td style="color:red">
379
                        {{ form.port.errors|join:", " }}
380
                    </td></tr>
381
                    </table>
382
                {% endif %}
383

    
384
                                </td>
385
                                <td>
386
                                {% if form.then.errors %}
387
                    <table>
388
                    <tr><td style="color:red">
389
                        {{ form.then.errors|join:", " }}
390
                    </td></tr>
391
                    </table>
392
                {% endif %}
393

    
394
                                </td>
395
                                <td>
396
                                        {% if form.expires.errors %}
397
                    <table>
398
                    <tr><td style="color:red">
399
                        {{ form.expires.errors|join:", " }}
400
                    </td></tr>
401
                    </table>
402
                    {% endif %}
403

    
404
                    </td>
405
                                <td></td>
406
                        </tr>
407
                        {% endif %}
408
                        <tr class='formset_class'>
409
                                <td>
410
                                        {{ form.name }}
411
                                </td>
412
                                <td style="display:none">{{form.applier}}</td>
413
                                <td>
414
                                        {{ form.source }}
415
                                </td>
416
                                <td>
417
                                        {{ form.destination }}
418
                                </td>
419
                                <td>
420
                                        {{ form.protocol }}
421
                                </td>
422
                                <td>
423
                                        {{ form.sourceport }}
424
                                </td>
425
                                <td>
426
                                        {{ form.destinationport }}
427
                                </td>
428
                                <td>
429
                                        {{ form.port }}
430
                                </td>
431
                                <td>
432
                                        {{ form.then }}
433
                                </td>
434
                                <td>
435
                    {{ form.expires }}
436
                </td>
437
                                <td>{{ form.comments }}</td>
438
                        </tr>
439
                        {% endfor %}
440
                </table>
441
                {{ formset.management_form }}
442
                <input type="submit" id="applybutton" value="{% trans "Apply" %}" />
443
    </form>
444
</div>
445
<div id="then_diag" title="Add new rate-limit value">
446
</div>
447
<div id="port_diag" title="Add new port">
448
</div>
449

    
450
{% endblock %}