* Add interface for filtering mechanism - now only shows the filtering

options that are being used, allowing users to add or remove more options
  rather than just display the lot on screen. 

* Break out filtering and row hover into separate javascript files (hover
  is used in the ticket list & dashboard - same code was used in both 
  places. Anti-DRY)

htdocs/filter.js

@@ -0,0 +1,21 @@
+$(document).ready(function() {
+    $("#filterBuilderButton").click(function() {
+        var boxName = "#filterBox" + $("#filterBuilderSelect").val();
+        $(boxName).slideDown();
+        return false;
+    });
+    $(".filterBuilderRemove").click(function() {
+        var boxName = "#" + $(this).parent().attr('id');
+        $(boxName).slideUp();
+        $(boxName).children("input:text").each(function() {
+            $(this).val("");
+        });
+        $(boxName).children("input:checkbox").each(function() {
+            this.checked = false;
+        });
+        $(boxName).children("select").each(function() {
+            this.selectedIndex = -1;
+        });
+        return false;
+    });
+});

htdocs/helpdesk.css

@@ -156,31 +156,6 @@ a.ticket_link_status {
     font: 12pt Garamond;
 }
 
-.priority1 {
-    background-color: #fcc;
-}
-
-.priority2 {
-    background-color: #FFE5CE;
-}
-
-.priority3 {
-    background-color: #CEE0FF;
-}
-
-.priority4 {
-    background-color: #CEF5FF;
-}
-
-.prority5 {
-    background-color: #CEE0FF;
-}
-
-.priority1, .priority2, .priority3, .priority4, .priority5 {
-    color: #6C79A0;
-    border-bottom: solid #d5e7fd 1px;
-}
-
 a img {
     border: none;
     padding: 2px;
@@ -189,3 +164,10 @@ a img {
 textarea#commentBox {
     width: 100%;
 }
+
+.filterBox {
+    display: none;
+}
+.filterBoxShow {
+    display: block;
+}

htdocs/hover.js

@@ -0,0 +1,7 @@
+$(document).ready(function() {
+    $("tr.row_hover").mouseover(function() {
+        $(this).addClass("hover");
+    }).mouseout(function() {
+        $(this).removeClass("hover");
+    });
+});

templates/helpdesk/dashboard.html

@@ -1,10 +1,8 @@
 {% extends "helpdesk/base.html" %}
 {% block helpdesk_title %}Helpdesk Dashboard{% endblock %}
-{% block helpdesk_head %}<script type='text/javascript' language='javascript'>
+{% block helpdesk_head %}
-$(document).ready(function() {
+<script type='text/javascript' language='javascript' src='{{ MEDIA_URL }}/helpdesk/hover.js'></script>
-    $("tr.row_hover").mouseover(function() {$(this).addClass("hover");}).mouseout(function() {$(this).removeClass("hover");});
+{% endblock %}
-});
-</script>{% endblock %}
 {% block helpdesk_body %}
 <table width='30%'>
 <tr class='row_tablehead'><td colspan='4'>Helpdesk Summary</td></tr>

templates/helpdesk/ticket_list.html

@@ -1,15 +1,24 @@
 {% extends "helpdesk/base.html" %}
 {% block helpdesk_title %}Ticket Listing{% endblock %}
-{% block helpdesk_head %}<script type='text/javascript' language='javascript'>
+{% block helpdesk_head %}
-$(document).ready(function() {
+<script type='text/javascript' language='javascript' src='{{ MEDIA_URL }}/helpdesk/filter.js'></script>
-    $("tr.row_hover").mouseover(function() {$(this).addClass("hover");}).mouseout(function() {$(this).removeClass("hover");});
+<script type='text/javascript' language='javascript' src='{{ MEDIA_URL }}/helpdesk/hover.js'></script>
-});
+{% endblock %}
-</script>{% endblock %}
 {% block helpdesk_body %}
 
 {% load in_list %}
 
+<form><select name='select' id='filterBuilderSelect'>
+    <option value='Sort'>Sorting</option>
+    <option value='Owner'>Owner</option>
+    <option value='Queue'>Queue</option>
+    <option value='Status'>Status</option>
+    <option value='Keywords'>Keywords</option>
+</select>
+<input type='button' id='filterBuilderButton' value='+' /></form>
+
 <form method='get' action='./'>
+<div class='filterBox{% if sort %} filterBoxShow{% endif %}' id='filterBoxSort'>
 <label for='id_sort'>Sorting</label> <select id='id_sort' name='sort'>
     <option value='created'{% ifequal sort "created"%} selected='selected'{% endifequal %}>Created</option>
     <option value='title'{% ifequal sort "title"%} selected='selected'{% endifequal %}>Title</option>
@@ -18,14 +27,29 @@ $(document).ready(function() {
     <option value='priority'{% ifequal sort "priority"%} selected='selected'{% endifequal %}>Priority</option>
     <option value='assigned_to'{% ifequal sort "assigned_to"%} selected='selected'{% endifequal %}>Owner</option>
 </select>
+<input type='button' class='filterBuilderRemove' value='-' />
+</div>
 
+<div class='filterBox{% if owners %} filterBoxShow{% endif %}' id='filterBoxOwner'>
 <label for='id_owners'>Owner(s)</label> <select id='id_owners' name='assigned_to' multiple='selected' size='5'>{% for u in user_choices %}<option value='{{ u.id }}'{% if u.id|in_list:owners %} selected='selected'{% endif %}>{{ u.username }}</option>{% endfor %}</select>
+<input type='button' class='filterBuilderRemove' value='-' />
+</div>
 
+<div class='filterBox{% if queues %} filterBoxShow{% endif %}' id='filterBoxQueue'>
 <label for='id_queues'>Queue(s)</label> <select id='id_queues' name='queue' multiple='selected' size='5'>{% for q in queue_choices %}<option value='{{ q.id }}'{% if q.id|in_list:queues %} selected='selected'{% endif %}>{{ q.title }}</option>{% endfor %}</select>
+<input type='button' class='filterBuilderRemove' value='-' />
+</div>
 
+<div class='filterBox{% if statuses %} filterBoxShow{% endif %}' id='filterBoxStatus'>
 <label for='id_statuses'>Status(es)</label> {% for s in status_choices %}<input type='checkbox' name='status' value='{{ s.0 }}'{% if s.0|in_list:statuses %} checked='checked'{% endif %}> {{ s.1 }}{% endfor %}
+<input type='button' class='filterBuilderRemove' value='-' />
+</div>
 
+
+<div class='filterBox{% if query %} filterBoxShow{% endif %}' id='filterBoxKeywords'>
 <label for='id_query'>Keywords</label> <input type='text' name='q' value='{{ query }}' id='id_query' />
+<input type='button' class='filterBuilderRemove' value='-' />
+</div>
 
 <input type='submit' value='Go!' />
 </form>