code.grnet.gr Git - flowspy/blob - templates/apply.html

   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 rule" %}
  17         {% endif %}
  18                 {% endblock %}
  19 {% block extrahead %}
  20 <script>
  21         $(document).ready( function(){
  22
  23                 $("#id_sourceport").css('width', '100px').attr('size', '5');
  24                 $("#id_port").css('width', '100px').attr('size', '5');
  25                 $("#id_destinationport").css('width', '100px').attr('size', '5');
  26                 $('#id_then').attr("multiple", "");
  27                 $( "#id_expires" ).datepicker({ dateFormat: 'yy-mm-dd' , maxDate: '+10d', minDate: '+1d', changeMonth: false, changeYear: false }).datepicker( $.datepicker.regional[ "el" ] );
  28                 {% comment %}
  29                 $('#then_diag').dialog({
  30                         height: 220,
  31             width: 340,
  32                         modal: true,
  33                         autoOpen: false,
  34                         buttons: {
  35                 'Add': function() {
  36                         console.log($("#add_rl_form").serialize());
  37                         $.ajax({
  38                         url:"{% url add-rate-limit %}",
  39                         data:$("#add_rl_form").serialize(),
  40                         type: "POST",
  41                         cache: false,
  42                         success:function(data){
  43                                         try {
  44                                                 value = data.pk;
  45                                                 text = data.value;
  46                                                 $('#id_then').append($("<option></option>").attr("value",value).text(text));
  47                                                 $('#then_diag').dialog('close');
  48                                         }
  49                                         catch (exception) {
  50                                                 $('#then_diag').html(data);
  51                                         }
  52                                 }
  53                                 });
  54                 },
  55                 Cancel: function() {
  56                         $('#then_diag').dialog('close');
  57                 }
  58         }
  59                 });
  60                 {% comment %}
  61                 $('#port_diag').dialog({
  62                         height: 220,
  63             width: 340,
  64                         modal: true,
  65                         autoOpen: false,
  66                         buttons: {
  67                 'Add': function() {
  68                         console.log($("#add_port_form").serialize());
  69                         $.ajax({
  70                         url:"{% url add-port %}",
  71                         data:$("#add_port_form").serialize(),
  72                         type: "POST",
  73                         cache: false,
  74                         success:function(data){
  75                                         try {
  76                                                 value = data.value;
  77                                                 text = data.text;
  78                                                 $('#id_port').append($("<option></option>").attr("value",value).text(text));
  79                                                 $('#id_destinationport').append($("<option></option>").attr("value",value).text(text));
  80                                                 $('#id_sourceport').append($("<option></option>").attr("value",value).text(text));
  81                                                 $('#port_diag').dialog('close');
  82                                         }
  83                                         catch (exception) {
  84                                                 $('#port_diag').html(data);
  85                                         }
  86                                 }
  87                                 });
  88                 },
  89                 Cancel: function() {
  90                         $('#port_diag').dialog('close');
  91                 }
  92         }
  93                 });
  94
  95                 {% comment %}
  96                 $("#new_then_actions").button({
  97             icons: {
  98                 primary: "ui-icon-plusthick"
  99             },
 100                         })
 101                         .click(function(){
 102                                 $.ajax({
 103                                         url: "{% url add-rate-limit %}",
 104                                         cache: false,
 105                                         success: function(data){
 106                                                 $("#then_diag").html(data);
 107                                         }
 108                                 });
 109                                 $('#then_diag').dialog('open');
 110                                 return false;
 111                         });
 112
 113                         {% endcomment %}
 114                         $(".new_port").button({
 115             icons: {
 116                 primary: "ui-icon-plusthick"
 117             },
 118                         })
 119                         .click(function(){
 120                                 $.ajax({
 121                                         url: "{% url add-port %}",
 122                                         cache: false,
 123                                         success: function(data){
 124                                                 $("#port_diag").html(data);
 125                                         }
 126                                 });
 127                                 $('#port_diag').dialog('open');
 128                                 return false;
 129                         });
 130
 131                 $("#portsacc").accordion({
 132                         collapsible: true,
 133                         active: false,
 134
 135                 });
 136
 137                 $("#applybutton").button();
 138
 139                 });
 140
 141 </script>
 142 {% endblock %}
 143 {% block content %}
 144 <style type="text/css">
 145 th {
 146         text-align: right;
 147         padding-right: 0.5em;
 148         vertical-align: top;
 149 }
 150
 151 .accord_wrapper{
 152         height: 452px !important;
 153 }
 154
 155 .help {
 156         font-style: italic;
 157
 158 }
 159 </style>
 160 <div align="center">
 161     {% if edit %}<h3>{% trans "Edit rule" %}: {{form.data.name}}</h3>
 162     {% else %}<h3>{% trans "Apply for a new rule" %}</h3>
 163     {% endif %}
 164     <form method="POST">
 165         {% csrf_token %}
 166         {% load unescape %}
 167         {% if form.non_field_errors %}
 168         <p class="error">
 169             {{ form.non_field_errors|unescape}}
 170         </p>
 171         {% endif %}
 172         <fieldset {%  if edit %}  style="display:none;" {%  endif %}>
 173             <legend>
 174                 {% trans "Rule Basic Info" %}
 175             </legend>
 176             <table>
 177                 <tr>
 178                     <th>
 179                         {{ form.name.label_tag }}
 180                     </th>
 181                     <td>
 182                         {{ form.name }}<span class="error">{{ form.name.errors|join:", " }}</span>
 183                     </td>
 184                 </tr>
 185                 <tr class="help">
 186                     <td>
 187                     </td>
 188                     <td>
 189                         A unique identifier will be added as a name_suffix
 190                     </td>
 191                 </tr>
 192             </table>
 193         </fieldset>
 194         <fieldset>
 195             <legend>
 196                 {% trans "Rule Match Conditions" %}
 197             </legend>
 198             <table>
 199                 <input type="hidden" id="id_applier" name="applier" value="{{applier}}"/>
 200                 <tr>
 201                     <th>
 202                         {{ form.source.label_tag }}
 203                     </th>
 204                     <td>
 205                         {{ form.source }}<span class="error">{{ form.source.errors|join:", " }}</span>
 206                     </td>
 207                 </tr>
 208                 <tr class="help">
 209                     <td>
 210                     </td>
 211                     <td>
 212                         {{ form.source.help_text }}
 213                     </td>
 214                 </tr>
 215                 <tr>
 216                     <th>
 217                         {{ form.destination.label_tag }}
 218                     </th>
 219                     <td>
 220                         {{ form.destination }}<span class="error">{{ form.destination.errors|join:", " }}</span>
 221                     </td>
 222                 </tr>
 223                 <tr class="help">
 224                     <td>
 225                     </td>
 226                     <td>
 227                         {{ form.destination.help_text }}
 228                     </td>
 229                 </tr>
 230             </table>
 231             <div id='portsacc' style="width: 500px;">
 232             <h3 style="padding: 0.5em 0.5em 0.5em 0.7em;">Advanced Settings (Ports)</h3>
 233             <div class='accord_wrapper' style="height: 452px !important;">
 234                 Select source/destination port(s), or select common port(s) for both source/destination
 235                 <table>
 236                 <tr>
 237                     <th>
 238                         {{ form.sourceport.label_tag }}
 239                     </th>
 240                     <td>
 241                         {{ form.sourceport }}&nbsp;&nbsp;
 242                         <button class="new_port">
 243                             Port
 244                         </button>
 245                         <span class="error">{{ form.sourceport.errors|join:", " }}</span>
 246                     </td>
 247                 </tr>
 248                 <tr class="help">
 249                     <td>
 250                     </td>
 251                     <td>
 252                         {{ form.sourceport.help_text }}
 253                     </td>
 254                 </tr>
 255                 <tr>
 256                     <th>
 257                         {{ form.destinationport.label_tag }}
 258                     </th>
 259                     <td>
 260                         {{ form.destinationport }}&nbsp;&nbsp;
 261                         <button class="new_port">
 262                             Port
 263                         </button>
 264                         <span class="error">{{ form.destinationport.errors|join:", " }}</span>
 265                     </td>
 266                 </tr>
 267                 <tr class="help">
 268                     <td>
 269                     </td>
 270                     <td>
 271                         {{ form.destinationport.help_text }}
 272                     </td>
 273                 </tr>
 274                 <tr>
 275                     <th>
 276                         {{ form.port.label_tag }}
 277                     </th>
 278                     <td>
 279                         {{ form.port }}&nbsp;&nbsp;
 280                         <button class="new_port">
 281                             Port
 282                         </button>
 283                         <span class="error">{{ form.port.errors|join:", " }}</span>
 284                     </td>
 285                 </tr>
 286                 <tr class="help">
 287                     <td>
 288                     </td>
 289                     <td>
 290                         {{ form.port.help_text }}
 291                     </td>
 292                 </tr>
 293             </div>
 294             </table>
 295         </div>
 296         </fieldset>
 297         <fieldset>
 298             <legend>
 299                 {% trans "Rule Actions" %}
 300             </legend>
 301             <table>
 302                 <tr>
 303                     <th>
 304                         {{ form.then.label_tag }}
 305                     </th>
 306                     <td>
 307                         {{ form.then }}{% comment %}&nbsp;&nbsp;
 308                         <button id="new_then_actions">
 309                             Rate-limit
 310                         </button>{% endcomment %}
 311                         <span class="error">{{ form.then.errors|join:", " }}</span>
 312                     </td>
 313                 </tr>
 314             </table>
 315         </fieldset>
 316         <fieldset>
 317             <legend>
 318                 {% trans "Expiration" %}
 319             </legend>
 320             <table>
 321                 <tr>
 322                     <th>
 323                         {{ form.expires.label_tag }}
 324                     </th>
 325                     <td>
 326                         {{ form.expires }}<span class="error">{{ form.expires.errors|join:", " }}</span>
 327                     </td>
 328                 </tr>
 329             </table>
 330         </fieldset>
 331         <fieldset>
 332             <legend>
 333                 {% trans "Use/Comments" %}
 334             </legend>
 335             {% blocktrans %}
 336             <p>
 337                 Give a short description of the intended use of this rule, that justifies the parameter selection above. Feel free to include any additional comments.
 338             </p>
 339             {% endblocktrans %}
 340             <p>
 341                 {{ form.comments }}
 342                 {% if form.errors %}
 343                 <br/>
 344                 <span class="error">{{ form.comments.errors|join:", " }}</span>{% endif %}
 345             </p>
 346         </fieldset>
 347         <p>
 348             <input type="submit" id="applybutton" value="{% trans "Apply" %}" />
 349         </p>
 350     </form>
 351 </div>
 352 <div id="then_diag" title="Add new rate-limit value">
 353 </div>
 354 <div id="port_diag" title="Add new port">
 355 </div>
 356
 357 {% endblock %}