qcg/templates/qcg/job_new.html

   1 {% extends 'qcg/base.html' %}
   2 {% load staticfiles bootstrap3 qcg_utils %}
   3
   4 {% block extra_css %}
   5     <link href="{% static 'qcg/selectize/selectize.bootstrap3.css' %}" rel="stylesheet">
   6 {% endblock %}
   7
   8 {% block extra_js %}
   9     <script src="{% static 'qcg/selectize/selectize.min.js' %}"></script>
  10     <script src="{% static 'qcg/formset/jquery.formset.js' %}"></script>
  11
  12     {% include 'filex/source.js.html' %}
  13
  14     <script>
  15         $(function() {
  16             var gridftpButton = $('<button/>', {
  17                 'type': 'button',
  18                 'class': 'btn btn-default pull-right',
  19                 'text': 'Wybierz',
  20                 'data-toggle': 'modal',
  21                 'data-target': '#gridftp'
  22             });
  23
  24             $('#id_master_file,#id_executable,#id_preprocess_script,#id_postprocess_script').before(function() {
  25                 var target = this;
  26                 return gridftpButton.clone().click(function() {
  27                     $('#select-btn').off().click(function() {
  28                         var selected = filex.selectedFiles();
  29
  30                         if (selected.length != 1 || !selected[0].isFile()) {
  31                             alert('Wybierz dokładnie jeden plik.');
  32                             return;
  33                         }
  34
  35                         var file = filex.host + filex.path.full() + '/' + selected[0].get('name');
  36                         target.selectize.addOption({value: file, text: file});
  37                         target.selectize.addItem(file);
  38                         target.selectize.refreshItems();
  39
  40                         $('#gridftp').modal('hide');
  41                         filex.clearSelection();
  42                     });
  43                 });
  44             }).wrap('<div style="margin-right: 80px"></div>');
  45
  46             $('#id_input,#id_stage_in').before(function() {
  47                 var target = this;
  48                 return gridftpButton.clone().click(function() {
  49                     $('#select-btn').off().click(function() {
  50                         var path = filex.host + filex.path.full() + '/';
  51
  52                         _.each(filex.selectedFiles(), function(item) {
  53                             console.log(arguments);
  54                             var file = path + item.get('name');
  55                             target.selectize.addOption({value: file, text: file});
  56                             target.selectize.addItem(file);
  57                         });
  58                         target.selectize.refreshItems();
  59
  60                         $('#gridftp').modal('hide');
  61                         filex.clearSelection();
  62                     });
  63                 });
  64             }).wrap('<div style="margin-right: 80px"></div>');
  65
  66             $('#id_application').selectize();
  67             $('#id_arguments,#id_properties,#id_native').selectize({
  68                 plugins: ['remove_button'],
  69                 create: true,
  70                 render: {
  71                     option_create: function(data, escape) {
  72                         return '<div class="create">Dodaj <strong>' + escape(data.input) + '</strong>&hellip;</div>';
  73                     }
  74                 }
  75             });
  76             $('#id_queue').selectize({
  77                 create: true,
  78                 render: {
  79                     option_create: function(data, escape) {
  80                         return '<div class="create">Wybierz <strong>' + escape(data.input) + '</strong>&hellip;</div>';
  81                     }
  82                 }
  83             });
  84             $('#id_modules,#id_hosts,#id_master_file,#id_executable,#id_input,#id_stage_in,#id_preprocess_script,#id_postprocess_script').selectize({
  85                 plugins: ['remove_button']
  86             });
  87
  88             // hide delete checkbox in empty env form
  89             $('#env-form-empty').find('div.form-group:last-of-type').hide();
  90             $('#env-controls').find('> div').formset({
  91                 formTemplate: '#env-form-empty',
  92                 parent: '#env-controls',
  93                 addLinkParent: '#add-env-form',
  94                 addText: 'dodaj »',
  95                 addCssClass: 'add-btn',
  96                 deleteText: 'Usuń',
  97                 deleteCssClass: 'delete-btn btn btn-xs btn-danger'
  98             });
  99
 100             $('input[name="notify_type"],input[name="watch_output_type"],input[name="preprocess_type"],input[name="postprocess_type"]').on('change', function () {
 101                 $(this).tab('show');
 102             }).each(function() {
 103                 $(this).parent().toggleClass('active', this.checked);
 104
 105                 if (this.checked)
 106                     $(this).tab('show');
 107             });
 108
 109             $('#toggle-advanced').click(function(e) {
 110                 e.preventDefault();
 111                 $('form .collapse').collapse('toggle');
 112                 $(this).find('span').text(this.text == "Pokaż zaawansowane" ? "Ukryj zaawansowane" : "Pokaż zaawansowane");
 113             });
 114         });
 115     </script>
 116 {% endblock %}
 117
 118 {% block container %}
 119     <h1 class="page-header">{% block title %}Zleć zadanie{% endblock %}</h1>
 120
 121     {% if errors %}
 122         <div class="alert alert-danger">
 123             <strong>Uwaga!</strong> Formularz zawiera błędy.
 124             {{ form.non_field_errors }}
 125             {{ env_formset.non_field_errors }}
 126         </div>
 127     {% endif %}
 128
 129     <form action="." method="post" class="form-horizontal">
 130         {% csrf_token %}
 131
 132         <!-- Nav tabs -->
 133         <ul class="nav nav-tabs" style="margin-bottom: 20px">
 134             <li role="presentation" class="active"><a href="#basic" data-toggle="tab">Podstawowe</a></li>
 135             <li role="presentation"><a href="#resources" data-toggle="tab">Zasoby</a></li>
 136             <li role="presentation"><a href="#files" data-toggle="tab">Pliki</a></li>
 137             <li role="presentation"><a href="#environment" data-toggle="tab">Środowisko</a></li>
 138             <li role="presentation"><a href="#monitoring" data-toggle="tab">Powiadomienia</a></li>
 139             <li role="presentation"><a href="#other" data-toggle="tab">Inne</a></li>
 140         </ul>
 141
 142         <div class="tab-content">
 143             <fieldset id="basic" class="tab-pane active" role="tabpanel">
 144                 {% bootstrap_field form.application layout="horizontal" %}
 145                 {% bootstrap_field form.master_file layout="horizontal" %}
 146                 {% bootstrap_field form.executable layout="horizontal" form_group_class="form-group collapse" %}
 147                 {% bootstrap_field form.script layout="horizontal" form_group_class="form-group collapse" %}
 148                 {% bootstrap_field form.arguments layout="horizontal" %}
 149                 {% bootstrap_field form.note layout="horizontal" %}
 150                 {% bootstrap_field form.grant layout="horizontal" form_group_class="form-group collapse" %}
 151             </fieldset>
 152
 153             <fieldset id="resources" class="tab-pane" role="tabpanel">
 154                 {% bootstrap_field form.hosts layout="horizontal" %}
 155                 {% bootstrap_field form.queue layout="horizontal" %}
 156                 {% bootstrap_field form.properties layout="horizontal" form_group_class="form-group collapse" %}
 157                 {% bootstrap_field form.modules layout="horizontal" form_group_class="form-group collapse" %}
 158                 {% bootstrap_field form.procs layout="horizontal" %}
 159                 {% bootstrap_field form.nodes layout="horizontal" form_group_class="form-group collapse" %}
 160                 {% bootstrap_field form.wall_time layout="horizontal" form_group_class="form-group timerange" %}
 161                 {% bootstrap_field form.memory layout="horizontal" form_group_class="form-group collapse" %}
 162                 {% bootstrap_field form.memory_per_slot layout="horizontal" form_group_class="form-group collapse" %}
 163                 {% bootstrap_field form.reservation layout="horizontal" form_group_class="form-group collapse" %}
 164             </fieldset>
 165
 166             <fieldset id="files" class="tab-pane" role="tabpanel">
 167                 {% bootstrap_field form.input layout="horizontal" %}
 168                 {% bootstrap_field form.stage_in layout="horizontal" %}
 169 {#                {% bootstrap_field form.stage_out layout="horizontal" form_group_class="form-group collapse" %}#}
 170             </fieldset>
 171
 172             <fieldset id="environment" class="tab-pane" role="tabpanel">
 173                 {{ env_formset.management_form }}
 174
 175                 <div class="form-group">
 176                     <label class="col-sm-3 col-md-4 control-label">Zmienne środowiskowe</label>
 177                     <div class="col-sm-9 col-md-6">
 178                         <div id="env-controls">
 179                             {% for env_form in env_formset %}
 180                                 <div>{% bootstrap_form env_form layout='inline' %}</div>
 181                             {% endfor %}
 182                         </div>
 183                         <div id="add-env-form"></div>
 184                         <div id="env-form-empty" style="display: none">
 185                             {% bootstrap_form env_formset.empty_form layout='inline' %}
 186                         </div>
 187                     </div>
 188                 </div>
 189             </fieldset>
 190
 191             <fieldset id="monitoring" class="tab-pane" role="tabpanel">
 192                 {% bootstrap_checkbox form.monitoring %}
 193
 194                 <div class="form-group">
 195                     <label class="col-sm-3 col-md-4 control-label">Monitorowanie stanu</label>
 196                     <div class="col-sm-9 col-md-6">
 197                         <div class="btn-group" data-toggle="buttons">
 198                             {% for option in form.notify_type %}
 199                                 <label class="btn btn-default">
 200                                     <input type="radio" autocomplete="off" name="{{ option.name }}" value="{{ option.choice_value }}"
 201                                             {% if option.is_checked %}checked{% endif %}
 202                                             data-target=".notify-type-{{ forloop.counter0 }}"> {{ option.choice_label }}
 203                                 </label>
 204                             {% endfor %}
 205                         </div>
 206                     </div>
 207                 </div>
 208
 209                 <div class="tab-content">
 210                     <div class="tab-pane notify-type-0"></div>
 211
 212                     <div class="tab-pane notify-type-1 notify-type-2" style="margin-top: 15px">
 213                         {% bootstrap_field form.notify_address layout="horizontal" %}
 214                     </div>
 215                 </div>
 216
 217                 <div class="collapse">
 218                     <div class="form-group">
 219                         <label class="col-sm-3 col-md-4 control-label">Monitorowanie wyjścia</label>
 220                         <div class="col-sm-9 col-md-6">
 221                             <div class="btn-group" data-toggle="buttons">
 222                                 {% for option in form.watch_output_type %}
 223                                     <label class="btn btn-default">
 224                                         <input type="radio" autocomplete="off" name="{{ option.name }}" value="{{ option.choice_value }}"
 225                                                 {% if option.is_checked %}checked{% endif %}
 226                                                 data-target=".watch-output-type-{{ forloop.counter0 }}"> {{ option.choice_label }}
 227                                     </label>
 228                                 {% endfor %}
 229                             </div>
 230                         </div>
 231                     </div>
 232
 233                     <div class="tab-content">
 234                         <div class="tab-pane watch-output-type-0"></div>
 235
 236                         <div class="tab-pane watch-output-type-1 watch-output-type-2" style="margin-top: 15px">
 237                             {% bootstrap_field form.watch_output_address layout="horizontal" %}
 238                             {% bootstrap_field form.watch_output_pattern layout="horizontal" %}
 239                         </div>
 240                     </div>
 241                 </div>
 242             </fieldset>
 243
 244             <fieldset id="other" class="tab-pane" role="tabpanel">
 245                 <div class="form-group">
 246                     <label class="col-sm-3 col-md-4 control-label">Preprocessing</label>
 247                     <div class="col-sm-9 col-md-6">
 248                         <div class="btn-group" data-toggle="buttons">
 249                             {% for option in form.preprocess_type %}
 250                                 <label class="btn btn-default">
 251                                     <input type="radio" autocomplete="off" name="{{ option.name }}" value="{{ option.choice_value }}"
 252                                             {% if option.is_checked %}checked{% endif %}
 253                                             data-target=".preprocess-type-{{ forloop.counter0 }}"> {{ option.choice_label }}
 254                                 </label>
 255                             {% endfor %}
 256                         </div>
 257                     </div>
 258                 </div>
 259
 260                 <div class="tab-content">
 261                     <div class="tab-pane preprocess-type-0"></div>
 262
 263                     <div class="tab-pane preprocess-type-1" style="margin-top: 15px">
 264                         {% bootstrap_field form.preprocess_cmd layout="horizontal" %}
 265                     </div>
 266
 267                     <div class="tab-pane preprocess-type-2" style="margin-top: 15px">
 268                         {% bootstrap_field form.preprocess_script layout="horizontal" %}
 269                     </div>
 270                 </div>
 271
 272                 <div class="form-group">
 273                     <label class="col-sm-3 col-md-4 control-label">Postprocessing</label>
 274                     <div class="col-sm-9 col-md-6">
 275                         <div class="btn-group" data-toggle="buttons">
 276                             {% for option in form.postprocess_type %}
 277                                 <label class="btn btn-default">
 278                                     <input type="radio" autocomplete="off" name="{{ option.name }}" value="{{ option.choice_value }}"
 279                                             {% if option.is_checked %}checked{% endif %}
 280                                             data-target=".postprocess-type-{{ forloop.counter0 }}"> {{ option.choice_label }}
 281                                 </label>
 282                             {% endfor %}
 283                         </div>
 284                     </div>
 285                 </div>
 286
 287                 <div class="tab-content">
 288                     <div class="tab-pane postprocess-type-0"></div>
 289
 290                     <div class="tab-pane postprocess-type-1" style="margin-top: 15px">
 291                         {% bootstrap_field form.postprocess_cmd layout="horizontal" %}
 292                     </div>
 293
 294                     <div class="tab-pane postprocess-type-2" style="margin-top: 15px">
 295                         {% bootstrap_field form.postprocess_script layout="horizontal" %}
 296                     </div>
 297                 </div>
 298
 299                 {% bootstrap_field form.native layout="horizontal" %}
 300                 {% bootstrap_checkbox form.persistent %}
 301             </fieldset>
 302         </div>
 303
 304         <hr>
 305
 306         <div class="row">
 307             <div class="col-sm-offset-3 col-md-offset-4 col-sm-9 col-md-6">
 308                 <button type="submit" class="btn btn-primary">Zleć zadanie</button>
 309                 <button type="reset" class="btn btn-warning">Resetuj</button>
 310                 <a id="toggle-advanced" href="#"><span class="text-muted">Pokaż zaawansowane</span></a>
 311             </div>
 312         </div>
 313     </form>
 314
 315     <div id="gridftp" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal-label" aria-hidden="true">
 316         <div class="modal-dialog modal-lg">
 317             <div class="modal-content">
 318                 <div class="modal-header">
 319                     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 320                     <h4 class="modal-title" id="modal-label">Wybierz plik</h4>
 321                 </div>
 322                 <div class="modal-body">
 323                     {% include 'filex/source.html' %}
 324                 </div>
 325                 <div class="modal-footer">
 326                     <button type="button" class="btn btn-default" data-dismiss="modal">Anuluj</button>
 327                     <button id="select-btn" type="button" class="btn btn-primary">Wybierz</button>
 328                 </div>
 329             </div>
 330         </div>
 331     </div>
 332
 333 {% endblock %}