muddle/templates/config.html

   1 {% extends "base.html" %}
   2
   3 {% block head %}
   4      <link rel="stylesheet" type="text/css" href="../static/css/config.css" />
   5     {{ block.super }}
   6     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
   7     <script type="text/javascript">
   8
   9         var $errors = undefined;
  10         var $cur_form = undefined;
  11         var tab_change = -1;
  12
  13         $(document).ready(function() {
  14             $errors = $('#errors');
  15             $('#tab_content :first').each(function(){
  16                 switch_tab(this.id.slice(5));
  17             });
  18
  19             $('input.save').live('click', function(){
  20                 if (!lock) {return;}
  21                 $form = $(this.parentNode.parentNode.parentNode);
  22                 $inputs = $form.find('input,select');
  23                 args = {};
  24                 for (i=0; i<$inputs.length; i++) {
  25                     input = $inputs.get(i);
  26                     args[input.name]= $(input).val();
  27                 }
  28                 //clear errors
  29                 $('#success').hide();
  30                 $errors.hide().empty();
  31                 $.post('save', args, process_save, 'json');
  32             });
  33
  34             $('input, select').live('keypress',function(e){
  35                 if (e.which == 13) {
  36                     $form = $(this.parentNode.parentNode.parentNode);
  37                     $form.find('input.save').trigger('click');
  38                 }
  39             });
  40
  41             $('#tabs .tab').click(function() {
  42                 switch_tab(this.id.slice(4));
  43             });
  44
  45             refresh_lock();
  46         });
  47
  48         function switch_tab(name){
  49             // switch highlight
  50             $('#tabs .active').removeClass('active');
  51             $('#tab_' + name).addClass('active');
  52
  53             // switch form pane content
  54             $node = $('#form_'+name);
  55             if ($cur_form != undefined){
  56                 $cur_form.remove().appendTo("#tab_content");
  57             }
  58             $cur_form = $node
  59             $node.remove().appendTo("#current_tab");
  60         }
  61
  62         function process_save(data) {
  63             if (data == 1){
  64                 $('#success').show().delay(1500).fadeOut(1500);
  65                 tab_change = -1;
  66             }else{
  67                 for (i in data) {
  68                     error = data[i];
  69                     $errors.append('<li>'+ error[0] +' - '+ error[1] +'</li>');
  70                 }
  71                 $errors.show();
  72             }
  73         }
  74
  75         {% include "../static/js/config_lock.js" %}
  76     </script>
  77 {% endblock %}
  78
  79 {% block content %}
  80     <div id="success">Saved</div>
  81     <ul id="errors"></ul>
  82
  83     <div id="h1">
  84         <h1>Configuration: <span class="highlight">{{name}}</span></h1>
  85         <div id="tabs">
  86             {% block tabs %}
  87             {% endblock %}
  88         </div>
  89     </div>
  90     <div id="current_tab"></div>
  91     <div id="tab_content">
  92         {% block tab_content %}
  93             {% include  "config_form.html" %}
  94         {% endblock %}
  95     </div>
  96 {% endblock %}