Added mobile-flavoured filtering buttons
authorLeonidas Poulopoulos <leopoul@noc.grnet.gr>
Fri, 16 Dec 2011 16:10:45 +0000 (18:10 +0200)
committerLeonidas Poulopoulos <leopoul@noc.grnet.gr>
Fri, 16 Dec 2011 16:10:45 +0000 (18:10 +0200)
static/css/engage.itoggle.css [new file with mode: 0644]
static/itoggle.png [new file with mode: 0644]
static/js/easing.js [new file with mode: 0644]
static/js/engage.itoggle-min.js [new file with mode: 0644]
templates/user_routes.html

diff --git a/static/css/engage.itoggle.css b/static/css/engage.itoggle.css
new file mode 100644 (file)
index 0000000..2899c6a
--- /dev/null
@@ -0,0 +1,41 @@
+div#itoggle label.ilabel{\r
+       display:block;\r
+       font-size:12px;\r
+       padding-bottom:10px;\r
+       cursor:pointer;\r
+       }\r
+\r
+div#itoggle label.itoggle,\r
+div#itoggle label.itoggle span{\r
+       display: block;\r
+       width: 93px;\r
+       height: 27px;\r
+/*     margin-bottom: 20px; */\r
+       background: url(/static/itoggle.png) left bottom no-repeat;\r
+       cursor:pointer;\r
+       text-indent:-5000px;\r
+       }\r
+div#itoggle label.itoggle.iToff{\r
+       background-position:right bottom;\r
+       }\r
+div#itoggle label.itoggle span{\r
+       background-position: left top;\r
+       margin: 0;\r
+       }\r
+div#itoggle input.iT_checkbox{\r
+       position:absolute;\r
+       top:-9999px;\r
+       left:-9999px;\r
+       }\r
+\r
+/*     \r
+       If you want the corners to be\r
+       transparent, add these two lines\r
+       to the main block above. Only\r
+       works on webkit and mozilla browsers\r
+       For more reliable results, make your\r
+       own png using the supplied .psd\r
+       \r
+       -moz-border-radius:6px;\r
+       -webkit-border-radius:6px;\r
+*/
\ No newline at end of file
diff --git a/static/itoggle.png b/static/itoggle.png
new file mode 100644 (file)
index 0000000..d55dc66
Binary files /dev/null and b/static/itoggle.png differ
diff --git a/static/js/easing.js b/static/js/easing.js
new file mode 100644 (file)
index 0000000..6afe21a
--- /dev/null
@@ -0,0 +1,206 @@
+/*
+ * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
+ *
+ * Uses the built in easing capabilities added In jQuery 1.1
+ * to offer multiple easing options
+ *
+ * TERMS OF USE - jQuery Easing
+ * 
+ * Open source under the BSD License. 
+ * 
+ * Copyright © 2008 George McGinley Smith
+ * All rights reserved.
+ * 
+ * Redistribution and use in source and binary forms, with or without modification, 
+ * are permitted provided that the following conditions are met:
+ * 
+ * Redistributions of source code must retain the above copyright notice, this list of 
+ * conditions and the following disclaimer.
+ * Redistributions in binary form must reproduce the above copyright notice, this list 
+ * of conditions and the following disclaimer in the documentation and/or other materials 
+ * provided with the distribution.
+ * 
+ * Neither the name of the author nor the names of contributors may be used to endorse 
+ * or promote products derived from this software without specific prior written permission.
+ * 
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY 
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
+ * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
+ *  COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ *  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
+ *  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED 
+ * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
+ *  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED 
+ * OF THE POSSIBILITY OF SUCH DAMAGE. 
+ *
+*/
+
+// t: current time, b: begInnIng value, c: change In value, d: duration
+jQuery.easing['jswing'] = jQuery.easing['swing'];
+console.log('loaded');
+jQuery.extend( jQuery.easing,
+{
+       def: 'easeOutQuad',
+       swing: function (x, t, b, c, d) {
+               //alert(jQuery.easing.default);
+               return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
+       },
+       easeInQuad: function (x, t, b, c, d) {
+               return c*(t/=d)*t + b;
+       },
+       easeOutQuad: function (x, t, b, c, d) {
+               return -c *(t/=d)*(t-2) + b;
+       },
+       easeInOutQuad: function (x, t, b, c, d) {
+               if ((t/=d/2) < 1) return c/2*t*t + b;
+               return -c/2 * ((--t)*(t-2) - 1) + b;
+       },
+       easeInCubic: function (x, t, b, c, d) {
+               return c*(t/=d)*t*t + b;
+       },
+       easeOutCubic: function (x, t, b, c, d) {
+               return c*((t=t/d-1)*t*t + 1) + b;
+       },
+       easeInOutCubic: function (x, t, b, c, d) {
+               if ((t/=d/2) < 1) return c/2*t*t*t + b;
+               return c/2*((t-=2)*t*t + 2) + b;
+       },
+       easeInQuart: function (x, t, b, c, d) {
+               return c*(t/=d)*t*t*t + b;
+       },
+       easeOutQuart: function (x, t, b, c, d) {
+               return -c * ((t=t/d-1)*t*t*t - 1) + b;
+       },
+       easeInOutQuart: function (x, t, b, c, d) {
+               if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
+               return -c/2 * ((t-=2)*t*t*t - 2) + b;
+       },
+       easeInQuint: function (x, t, b, c, d) {
+               return c*(t/=d)*t*t*t*t + b;
+       },
+       easeOutQuint: function (x, t, b, c, d) {
+               return c*((t=t/d-1)*t*t*t*t + 1) + b;
+       },
+       easeInOutQuint: function (x, t, b, c, d) {
+               if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
+               return c/2*((t-=2)*t*t*t*t + 2) + b;
+       },
+       easeInSine: function (x, t, b, c, d) {
+               return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
+       },
+       easeOutSine: function (x, t, b, c, d) {
+               return c * Math.sin(t/d * (Math.PI/2)) + b;
+       },
+       easeInOutSine: function (x, t, b, c, d) {
+               return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
+       },
+       easeInExpo: function (x, t, b, c, d) {
+               return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
+       },
+       easeOutExpo: function (x, t, b, c, d) {
+               console.log((t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b);
+               return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
+       },
+       easeInOutExpo: function (x, t, b, c, d) {
+               if (t==0) return b;
+               if (t==d) return b+c;
+               if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
+               return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
+       },
+       easeInCirc: function (x, t, b, c, d) {
+               return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
+       },
+       easeOutCirc: function (x, t, b, c, d) {
+               return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
+       },
+       easeInOutCirc: function (x, t, b, c, d) {
+               if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
+               return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
+       },
+       easeInElastic: function (x, t, b, c, d) {
+               var s=1.70158;var p=0;var a=c;
+               if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
+               if (a < Math.abs(c)) { a=c; var s=p/4; }
+               else var s = p/(2*Math.PI) * Math.asin (c/a);
+               return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
+       },
+       easeOutElastic: function (x, t, b, c, d) {
+               var s=1.70158;var p=0;var a=c;
+               if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
+               if (a < Math.abs(c)) { a=c; var s=p/4; }
+               else var s = p/(2*Math.PI) * Math.asin (c/a);
+               return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
+       },
+       easeInOutElastic: function (x, t, b, c, d) {
+               var s=1.70158;var p=0;var a=c;
+               if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
+               if (a < Math.abs(c)) { a=c; var s=p/4; }
+               else var s = p/(2*Math.PI) * Math.asin (c/a);
+               if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
+               return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
+       },
+       easeInBack: function (x, t, b, c, d, s) {
+               if (s == undefined) s = 1.70158;
+               return c*(t/=d)*t*((s+1)*t - s) + b;
+       },
+       easeOutBack: function (x, t, b, c, d, s) {
+               if (s == undefined) s = 1.70158;
+               return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
+       },
+       easeInOutBack: function (x, t, b, c, d, s) {
+               if (s == undefined) s = 1.70158; 
+               if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
+               return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
+       },
+       easeInBounce: function (x, t, b, c, d) {
+               return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
+       },
+       easeOutBounce: function (x, t, b, c, d) {
+               if ((t/=d) < (1/2.75)) {
+                       return c*(7.5625*t*t) + b;
+               } else if (t < (2/2.75)) {
+                       return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
+               } else if (t < (2.5/2.75)) {
+                       return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
+               } else {
+                       return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
+               }
+       },
+       easeInOutBounce: function (x, t, b, c, d) {
+               if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
+               return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
+       }
+});
+
+/*
+ *
+ * TERMS OF USE - EASING EQUATIONS
+ * 
+ * Open source under the BSD License. 
+ * 
+ * Copyright © 2001 Robert Penner
+ * All rights reserved.
+ * 
+ * Redistribution and use in source and binary forms, with or without modification, 
+ * are permitted provided that the following conditions are met:
+ * 
+ * Redistributions of source code must retain the above copyright notice, this list of 
+ * conditions and the following disclaimer.
+ * Redistributions in binary form must reproduce the above copyright notice, this list 
+ * of conditions and the following disclaimer in the documentation and/or other materials 
+ * provided with the distribution.
+ * 
+ * Neither the name of the author nor the names of contributors may be used to endorse 
+ * or promote products derived from this software without specific prior written permission.
+ * 
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY 
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
+ * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
+ *  COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ *  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
+ *  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED 
+ * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
+ *  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED 
+ * OF THE POSSIBILITY OF SUCH DAMAGE. 
+ *
+ */
\ No newline at end of file
diff --git a/static/js/engage.itoggle-min.js b/static/js/engage.itoggle-min.js
new file mode 100644 (file)
index 0000000..86d7eeb
--- /dev/null
@@ -0,0 +1,124 @@
+/*---------------\r
+ * jQuery iToggle Plugin by Engage Interactive\r
+ * Examples and documentation at: http://labs.engageinteractive.co.uk/itoggle/\r
+ * Copyright (c) 2009 Engage Interactive\r
+ * Version: 1.0 (10-JUN-2009)\r
+ * Dual licensed under the MIT and GPL licenses:\r
+ * http://www.opensource.org/licenses/mit-license.php\r
+ * http://www.gnu.org/licenses/gpl.html\r
+ * Requires: jQuery v1.3 or later\r
+---------------*/\r
+\r
+(function($){\r
+       $.fn.iToggle = function(options) {\r
+               \r
+               clickEnabled = true;\r
+               \r
+               var defaults = {\r
+                       type: 'checkbox',\r
+                       keepLabel: true,\r
+                       easing: false,\r
+                       speed: 200,\r
+                       onClick: function(){},\r
+                       onClickOn: function(){},\r
+                       onClickOff: function(){},\r
+                       onSlide: function(){},\r
+                       onSlideOn: function(){},\r
+                       onSlideOff: function(){}\r
+               },\r
+               settings = $.extend({}, defaults, options);\r
+               \r
+               this.each(function(){\r
+                       var $this = $(this);\r
+                       if($this.attr('tagName') == 'INPUT'){\r
+                               var id=$this.attr('id');\r
+                               label(settings.keepLabel, id);\r
+                               $this.addClass('iT_checkbox').before('<label class="itoggle" for="'+id+'"><span></span></label>');\r
+                               if($this.attr('checked')){\r
+                                       $this.prev('label').addClass('iTon');\r
+                               }else{\r
+                                       $this.prev('label').addClass('iToff');\r
+                               }\r
+                       }else{\r
+                               $this.children('input:'+settings.type).each(function(){\r
+                                       var id = $(this).attr('id');\r
+                                       label(settings.keepLabel, id);\r
+                                       $(this).addClass('iT_checkbox').before('<label class="itoggle" for="'+id+'"><span></span></label>');\r
+                                       if($(this).attr('checked')){\r
+                                               $(this).prev('label').addClass('iTon');\r
+                                       }else{\r
+                                               $(this).prev('label').addClass('iToff');\r
+                                       }\r
+                                       if(settings.type == 'radio'){\r
+                                               $(this).prev('label').addClass('iT_radio');\r
+                                       }\r
+                               });\r
+                       }\r
+               });\r
+               \r
+               function label(e, id){\r
+                       if(e == true){\r
+                               if(settings.type == 'radio'){\r
+                                       $('label[for='+id+']').addClass('ilabel_radio');\r
+                               }else{\r
+                                       $('label[for='+id+']').addClass('ilabel');\r
+                               }\r
+                       }else{\r
+                               $('label[for='+id+']').remove();\r
+                       }\r
+               }\r
+\r
+               $('label.itoggle').click(function(){\r
+                       if(clickEnabled == true){\r
+                               clickEnabled = false;\r
+                               if($(this).hasClass('iT_radio')){\r
+                                       if($(this).hasClass('iTon')){\r
+                                               clickEnabled = true;\r
+                                       }else{\r
+                                               slide($(this), true);\r
+                                       }\r
+                               }else{\r
+                                       slide($(this));\r
+                               }\r
+                       }\r
+                       return false;\r
+               });\r
+               $('label.ilabel').click(function(){\r
+                       if(clickEnabled == true){\r
+                               clickEnabled = false;\r
+                               slide($(this).next('label.itoggle'));\r
+                       }\r
+                       return false;\r
+               });\r
+               \r
+               function slide($object, radio){\r
+                       settings.onClick.call($object); //Generic click callback for click at any state\r
+                       h=$object.innerHeight();\r
+                       t=$object.attr('for');\r
+                       if($object.hasClass('iTon')){\r
+                               settings.onClickOff.call($object); //Click that turns the toggle to off position\r
+                               $object.animate({backgroundPosition:'100% -'+h+'px'}, settings.speed, settings.easing, function(){\r
+                                       $object.removeClass('iTon').addClass('iToff');\r
+                                       clickEnabled = true;\r
+                                       settings.onSlide.call(this); //Generic callback after the slide has finnished\r
+                                       settings.onSlideOff.call(this); //Callback after the slide turns the toggle off\r
+                               });\r
+                               $('input#'+t).removeAttr('checked');\r
+                       }else{\r
+                               settings.onClickOn.call($object);\r
+                               $object.animate({backgroundPosition:'0% -'+h+'px'}, settings.speed, settings.easing, function(){\r
+                                       $object.removeClass('iToff').addClass('iTon');\r
+                                       clickEnabled = true;\r
+                                       settings.onSlide.call(this); //Generic callback after the slide has finnished\r
+                                       settings.onSlideOn.call(this); //Callback after the slide turns the toggle on\r
+                               });\r
+                               $('input#'+t).attr('checked','checked');\r
+                       }\r
+                       if(radio == true){\r
+                               name = $('#'+t).attr('name');\r
+                               slide($object.siblings('label[for]'));\r
+                       }\r
+               }\r
+\r
+       };\r
+})(jQuery);
\ No newline at end of file
index e2ae7ac..3ae9347 100644 (file)
 <script type="text/javascript" src="{% url load-js 'poller' %}"></script>
 {% endif %}
 <script type="text/javascript" src="/static/js/jquery.dataTables.js"></script>
+<link rel="stylesheet" type="text/css" href="/static/css/engage.itoggle.css"/>
+<script type="text/javascript" src="/static/js/engage.itoggle-min.js"></script>
 <script type="text/javascript">
-       $(document).ready( function(){
-               var noaction = readCookie('noaction');
-               $( "#hide_noaction" ).button();
-               if (noaction == 'true'){
-                       $('#hide_noaction').attr('checked','checked');
-                       $("#hide_noaction").button( "option", "label", "Show Expired, AdminInactive, Error" );
-               }
-               $("#hid_mid").val('');
-               $('#dialog').dialog({
-                       height: 220,
-            width: 300,
-                       modal: true,
-                       autoOpen: false,
-                       buttons: {
-               'Delete': function() {
-               route = $('#route_to_delete').text();
-               route_url_id = '#del_route_'+route;
-               url = $(route_url_id).attr('href');
-                       $.ajax({
-                       url: url ,
-                       cache: false,
-                       success: function(data) {
-                               $('#dialog').dialog('close');
-                               window.setTimeout('location.reload()', 1000);
-                         }
-               });
-               },
-               Cancel: function() {
-                       $('#dialog').dialog('close');
-               },
-               
-
-       },
-       close: function() {
-        update_val = $("#hid_mid").val();
-               if (update_val == 'UPDATED'){
-                       $("#hid_mid").val('');
-                       window.setTimeout('location.reload()', 500);
-               }
-    }
-               });
-               $('#console').dialog({
-                       height: 250,
-            width: 800,
-                       modal: true,
-                       autoOpen: false,
-                       close: function() {
-                       update_val = $("#hid_mid").val();
-                               if (update_val == 'UPDATED'){
-                                       $("#hid_mid").val('');
-                                       window.setTimeout('location.reload()', 500);
-                               }
-                   }
-               });
-                       
-               $('#routes_table').dataTable({
-                       "bJQueryUI": true,
-                       "aoColumns": [ 
-                               {"bVisible": false, "bSearchable": false,"bSortable": false },
-                               {"bSearchable": true,"bSortable": true},
-                               {"bSearchable": true,"bSortable": true},
-                               {"bSearchable": true,"bSortable": true},
-                               {"bSearchable": true,"bSortable": true},
-                               {"bSearchable": true,"bSortable": true},
-                               {"bSearchable": true,"bSortable": true},
-                               {"bSearchable": true,"bSortable": true},
-                               {"bVisible": true, "bSearchable": false,"bSortable": false}
-                       ],
-                        "aaSorting": [[0,'desc']],
-                       "oLanguage": {
-                               "sLengthMenu": '{% trans "Display" %} <select><option value="25">25</option><option value="50">50</option><option value="-1">{% trans "All" %}</option></select> rules'
-                       },
-                       "iDisplayLength": 25,
-       });
-       $.fn.dataTableExt.afnFiltering = new Array();
-       $.fn.dataTableExt.afnFiltering.push(
-       function( oSettings, aData, iDataIndex ) {
-               // 4 here is the column where my statuses are.
-               var status_middle = $(aData[4]);
-               var status = $(status_middle[0]).text();
-               if (( status == "EXPIRED" || status == "ADMININACTIVE" || status == "ERROR") && ($('#hide_noaction').attr('checked'))) {
-                       return false;
-               }
-               else {
-                       return true;
-               }
-               
-       });
-       var oTable = $('#routes_table').dataTable();
-       oTable.fnDraw();
-       $('#hide_noaction').change( function(){
-                       var noaction = $('#hide_noaction').attr('checked');
-                       if (noaction == true){
-                               $("#hide_noaction").button( "option", "label", "Show Expired, AdminInactive, Error" );
-                               }
-                       else{
-                               $("#hide_noaction").button( "option", "label", "Hide Expired, AdminInactive, Error" );
-                       }
-                       createCookie("noaction", noaction, 30);
-                       oTable.fnDraw(); 
-               });
-       
-       $( ".button_place #routebutton" ).button({
-            icons: {
-                primary: "ui-icon-circle-plus"
+$(document).ready(function(){
+    $("#hid_mid").val('');
+    $('#dialog').dialog({
+        height: 220,
+        width: 300,
+        modal: true,
+        autoOpen: false,
+        buttons: {
+            'Delete': function(){
+                route = $('#route_to_delete').text();
+                route_url_id = '#del_route_' + route;
+                url = $(route_url_id).attr('href');
+                $.ajax({
+                    url: url,
+                    cache: false,
+                    success: function(data){
+                        $('#dialog').dialog('close');
+                        window.setTimeout('location.reload()', 1000);
+                    }
+                });
             },
-                       });
-               $( " .edit_button" ).button({
-            icons: {
-                primary: "ui-icon-wrench"
+            Cancel: function(){
+                $('#dialog').dialog('close');
             },
-                       });
-               $( " .del_button" ).button({
-            icons: {
-                primary: "ui-icon-circle-close"
-            },
-                       })
-                       .click(function(){
-                               $('#dialog').dialog('open');
-                               return false;
-                       });
-               $("#consolebutton").button({
-            icons: {
-                primary: "ui-icon-image"
-            },
-                       })
-                       .click(function(){
-                               $("#consolebutton").stop().stop();
-                               $("#consolebutton").css('color', '#555555');
-                               $('#console').dialog('open');
-                               return false;
-                       });
-                       
-               $(".expiresclass").tooltip();
-
-               });
+        
+        
+        },
+        close: function(){
+            update_val = $("#hid_mid").val();
+            if (update_val == 'UPDATED') {
+                $("#hid_mid").val('');
+                window.setTimeout('location.reload()', 500);
+            }
+        }
+    });
+    $('#console').dialog({
+        height: 250,
+        width: 800,
+        modal: true,
+        autoOpen: false,
+        close: function(){
+            update_val = $("#hid_mid").val();
+            if (update_val == 'UPDATED') {
+                $("#hid_mid").val('');
+                window.setTimeout('location.reload()', 500);
+            }
+        }
+    });
+    
+    var oTable = $('#routes_table').dataTable({
+        "bJQueryUI": true,
+        "aoColumns": [{
+            "bVisible": false,
+            "bSearchable": false,
+            "bSortable": false
+        }, {
+            "bSearchable": true,
+            "bSortable": true
+        }, {
+            "bSearchable": true,
+            "bSortable": true
+        }, {
+            "bSearchable": true,
+            "bSortable": true
+        }, {
+            "bSearchable": true,
+            "bSortable": true
+        }, {
+            "bSearchable": true,
+            "bSortable": true
+        }, {
+            "bSearchable": true,
+            "bSortable": true
+        }, {
+            "bSearchable": true,
+            "bSortable": true
+        }, {
+            "bVisible": true,
+            "bSearchable": false,
+            "bSortable": false
+        }],
+        "aaSorting": [[0, 'desc']],
+        "oLanguage": {
+            "sLengthMenu": '{% trans "Display" %} <select><option value="25">25</option><option value="50">50</option><option value="-1">{% trans "All" %}</option></select> rules'
+        },
+        "iDisplayLength": 25,
+    });
+    
+    oTable.fnDraw();
+    
+    $('input[name="status_filter"]').click(function(){
+    
+        //slice off the last '|' or it doesn't work
+        //also be sure to use the third parameter
+    });
+    
+    $(".button_place #routebutton").button({
+        icons: {
+            primary: "ui-icon-circle-plus"
+        },
+    });
+    $(".edit_button").button({
+        icons: {
+            primary: "ui-icon-wrench"
+        },
+    }).css('width','100px');;
+    $(" .del_button").button({
+        icons: {
+            primary: "ui-icon-circle-close"
+        },
+    }).click(function(){
+        $('#dialog').dialog('open');
+        return false;
+    }).css('width','100px');
+    $("#consolebutton").button({
+        icons: {
+            primary: "ui-icon-image"
+        },
+    }).click(function(){
+        $("#consolebutton").stop().stop();
+        $("#consolebutton").css('color', '#555555');
+        $('#console').dialog('open');
+        return false;
+    });
+    
+    $(".expiresclass").tooltip();
+       $(".commentclass").tooltip();
+    var reg_exp = '';
+    var checkboxs = document.getElementsByName('status_filter');
+    for (var i = 0, inp; inp = checkboxs[i]; i++) {
+        checkCookie = readCookie("cookie_" + inp.value);
+        if (checkCookie) {
+            if (checkCookie == 'true') {
+                $(inp).attr('checked', true);
+            }
+            else {
+                $(inp).attr('checked', false);
+            }
+        }
+        
+        if (inp.type.toLowerCase() == 'checkbox' && inp.checked == true) {
+            reg_exp = reg_exp + inp.value + '|';
+        }
+        
+    }
+       if (reg_exp == '') {
+            reg_exp = 'X|'
+        }
+    oTable.fnFilter(reg_exp.slice(0, -1), 4, true);
+    
+    $('input[name="status_filter"]').iToggle({
+        type: 'checkbox',
+        onSlide: function(){
+            var reg_exp = '';
+            var checkboxs = document.getElementsByName('status_filter');
+            
+            for (var i = 0, inp; inp = checkboxs[i]; i++) {
+                if (inp.type.toLowerCase() == 'checkbox' && inp.checked) {
+                    reg_exp = reg_exp + inp.value + '|';
+                }
+                createCookie("cookie_" + inp.value, inp.checked, 30);
+            }
+            //passing an empty string will result in no filter
+            //thus, it must be set to something that will not exist in the column
+            if (reg_exp == '') {
+                reg_exp = 'X|'
+            }
+            oTable.fnFilter(reg_exp.slice(0, -1), 4, true);
+        },
+    });
+});
                
 function delete_route(route){
        route_name = route;
@@ -182,14 +219,42 @@ function delete_route(route){
        <button id="consolebutton">Console</button> <a href="{% url add-route %}" id="routebutton">Add Rule</a>
 </div>
 <br><br>
-<table cellpadding="0" cellspacing="0" border="0" style="width:220px; clear:both;">
-       <tbody>
-               <tr>
-                       <td align="left"><input type="checkbox" id="hide_noaction" name="hide_noaction" value="Hide" /><label for="hide_noaction">Hide Expired, AdminInactive, Error</label></td>
-               </tr>
-       </tbody>
-</table>
-<br>
+
+<div id='itoggle'>
+<table cellpadding="0" cellspacing="0" border="0" class="display" style='width:200px;'>
+                               <tbody>
+                                       <tr>
+                                       <th>ACTIVE</th><th>SUSPENDED</th><th>EXPIRED</th><th>ADMINDISABLED</th><th>ERROR</th><th>PENDING</th>
+                                       </tr>
+                                       <tr class="on_off">
+                                       <td>
+                                           <input type="checkbox" class="onoff" name="status_filter" value="ACTIVE" checked id="show_active"/>
+                                       </td>
+                                   
+                                       <td>
+                                           <input type="checkbox" class="onoff" name="status_filter" value="SUSPENDED" checked id="show_inactive"/>
+                                       </td>
+                                  
+                                       <td>
+                                           <input type="checkbox" class="onoff" name="status_filter" value="EXPIRED" id="show_expired"/>
+                                       </td>
+                                   
+                                       <td>
+                                           <input type="checkbox" class="onoff" name="status_filter" value="ADMINDISABLED" id="show_admininactive"/>
+                                       </td>
+                                   
+                                       <td>
+                                           <input type="checkbox" class="onoff" name="status_filter" value="ERROR" id="show_error"/>
+                                       </td>
+                                  
+                                       <td>
+                                           <input type="checkbox" class="onoff" name="status_filter" value="PENDING" checked id="show_pending"/>
+                                       </td>
+                                   </tr>
+                               </tbody>
+                       </table>
+                       </div>
+       <table class="display" width="100%" id="nodes_table">
 <table class="display" width="100%" id="routes_table">
 <thead>
 <tr>
@@ -211,25 +276,26 @@ function delete_route(route){
 
 <tr class="GradeC" >
        <td>{{ route.pk }}</td>
-       <td>{{ route.name }}</td>
+       <td><span {% if route.comments %}
+       class="commentclass" 
+               style="border-bottom:1px dotted red;" 
+        title="{{route.comments}}"
+               {% endif %}>{{ route.name }}</span></td>
        <td>{{ route.get_match|safe|escape }}</td>
        <td style="text-align: center;">{{route.get_then|safe|escape}}</td>
-       <td style="text-align: center; ">
-               <span 
-               {% if route.days_to_expire %}
+       <td style="text-align: center; ">{% ifequal route.status 'INACTIVE' %}SUSPENDED{% else %}{% ifequal route.status 'ADMININACTIVE' %}ADMINDISABLED{% else %}{{route.status}}{% endifequal %}{% endifequal %}</td>
+       {% comment %}<td style="text-align: center;">{{ route.response }}</td>{% endcomment %}
+       <td style="text-align: center;">{{ route.applier }}</td>
+       <td style="text-align: center;"><span {% if route.days_to_expire %}
                class="expiresclass" 
                style="border-bottom:2px dashed red;" 
         title="Expires {% ifequal route.days_to_expire '0' %}today{% else%}in {{route.days_to_expire}} day{{ route.days_to_expire|pluralize }}{% endifequal %}"
-               {% endif %}>{{route.status}}</span>
-       </td>
-       {% comment %}<td style="text-align: center;">{{ route.response }}</td>{% endcomment %}
-       <td style="text-align: center;">{{ route.applier }}</td>
-       <td style="text-align: center;">{{ route.expires }}</td>
+               {% endif %}>{{ route.expires }}</span></td>
        <td style="text-align: center;">{{ route.response }}</td>
        <td style="text-align: center; width:180px;">
                {% ifequal route.status 'ACTIVE' %}
                <a href="{% url edit-route route.name %}" class="edit_button" id="edit_button_{{route.pk}}">Edit</a> 
-               <button class="del_button" id="{{route.name}}" onclick="javascript:delete_route(this.id)">Del</button>
+               <button class="del_button" id="{{route.name}}" onclick="javascript:delete_route(this.id)">Suspend</button>
                <a href="{% url delete-route route.name %}" style="display:none" id="del_route_{{route.name}}"></a>
                {% else %}
                {% ifequal route.status 'INACTIVE' %}