planetstack/templates/admin/dashboard/customize.html

   1 <form>
   2     <div class="customize_row">\r
   3     <div class="customize_column">\r
   4     <div>Available Dashboard Views</div>\r
   5     <select name="selectfrom" id="select-from" multiple size="5">\r
   6         {% for cp in unusedDashboards %}\r
   7            <option value="{{ cp }}">{{ cp }}</option>
   8         {% endfor %}\r
   9     </select>\r
  10     </div>\r
  11     <div class="customize_column">\r
  12     <br>\r
  13     <div class="btn btn-success" id="btn-add">Add &raquo;</div><br><br>\r
  14     <div class="btn btn-success" id="btn-remove">&laquo; Remove</div>\r
  15     </div>\r
  16     <div class="customize_column">\r
  17     <div>Selected Dashboard Views</div>\r
  18     <select name="selectto" id="select-to" multiple size="5">\r
  19         {% for cp in dashboards %}\r
  20            <option value="{{ cp }}">{{ cp }}</option>
  21         {% endfor %}\r
  22     </select>\r
  23     <br>\r
  24     <div class="btn btn-high btn-info" id="btn-save">Save</div>\r
  25     </div>\r
  26     <div class="customize_column">\r
  27     <br>\r
  28     <div class="btn btn-success" id="btn-up">Up</div><br><br>\r
  29     <div class="btn btn-success" id="btn-down">Down</div>\r
  30     </div>\r
  31     </div>\r
  32 </form>\r
  33
  34 <script>
  35 $(document).ready(function() {
  36     $('#btn-add').click(function(){\r
  37         $('#select-from option:selected').each( function() {\r
  38                 $('#select-to').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");\r
  39             $(this).remove();\r
  40         });\r
  41     });\r
  42     $('#btn-remove').click(function(){\r
  43         $('#select-to option:selected').each( function() {\r
  44             $('#select-from').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");\r
  45             $(this).remove();\r
  46         });\r
  47     });\r
  48     $('#btn-up').bind('click', function() {\r
  49         $('#select-to option:selected').each( function() {\r
  50             var newPos = $('#select-to option').index(this) - 1;\r
  51             if (newPos > -1) {\r
  52                 $('#select-to option').eq(newPos).before("<option value='"+$(this).val()+"' selected='selected'>"+$(this).text()+"</option>");\r
  53                 $(this).remove();\r
  54             }\r
  55         });\r
  56     });\r
  57     $('#btn-down').bind('click', function() {\r
  58         var countOptions = $('#select-to option').size();\r
  59         $('#select-to option:selected').each( function() {\r
  60             var newPos = $('#select-to option').index(this) + 1;\r
  61             if (newPos < countOptions) {\r
  62                 $('#select-to option').eq(newPos).after("<option value='"+$(this).val()+"' selected='selected'>"+$(this).text()+"</option>");\r
  63                 $(this).remove();\r
  64             }\r
  65         });\r
  66     });\r
  67     $('#btn-save').bind('click', function() {\r
  68          var items=[];\r
  69          $("#select-to option").each(function() { items.push($(this).val()); });\r
  70          $.ajax({\r
  71                 url: '/customize/',
  72                 dataType: 'json',
  73                 data: {
  74                         dashboards: items.join(","),
  75                         csrfmiddlewaretoken: "{{ csrf_token }}" // < here
  76                 },
  77                 type: 'POST',
  78                 complete: function () {
  79                         location.reload();
  80                 }
  81         });\r
  82     });
  83 });
  84 </script>
  85