highlight active search filters in green

Netdisco/public/css/style.css

@@ -3,6 +3,15 @@ body {
   padding-top: 50px;
 }
 
+/* the bootstrap style is only set for input */
+/* also make the green a little more bold */
+form .clearfix.success select {
+  border-color: green;
+}
+form .clearfix.success input {
+  border-color: green;
+}
+
 .well {
   margin-right: 15px;
 }

Netdisco/views/inc/js/search.js

@@ -72,4 +72,36 @@
       $(this).parents('.add-on').toggleClass('active', $(this).is(':checked'));
     };
     $('.add-on :checkbox').each(syncCheckBox).click(syncCheckBox);
+
+    // highlight active search filters in green
+    // there must be a way to factor this out to a func but my JS is weak :-/
+
+    $("form .clearfix input").not("[name=q]").each(function() {
+      if ($(this).val() === "") {
+        $(this).parent(".clearfix").removeClass('success');
+      } else {
+        $(this).parent(".clearfix").addClass('success');
+      }
+    });
+    $("form .clearfix input").not("[name=q]").change(function() {
+      if ($(this).val() === "") {
+        $(this).parent(".clearfix").removeClass('success');
+      } else {
+        $(this).parent(".clearfix").addClass('success');
+      }
+    });
+    $("form .clearfix select").each(function() {
+      if ($(this).find(":selected").length === 0) {
+        $(this).parent(".clearfix").removeClass('success');
+      } else {
+        $(this).parent(".clearfix").addClass('success');
+      }
+    });
+    $("form .clearfix select").change(function() {
+      if ($(this).find(":selected").length === 0) {
+        $(this).parent(".clearfix").removeClass('success');
+      } else {
+        $(this).parent(".clearfix").addClass('success');
+      }
+    });
   });

Netdisco/views/inc/search/device.tt

@@ -2,27 +2,27 @@
             <p><em>Device Search Options</em></p>
             <div class="clearfix">
               <input class="span3" placeholder="System Name"
-                type="text" id="name" name="name"
+                type="text" id="name" name="name" value="[% params.name %]"
                 rel="twipsy" data-placement="right" data-offset="5" title="System Name"/>
             </div>
             <div class="clearfix">
               <input class="span3" placeholder="Location"
-                type="text" id="location" name="location"
+                type="text" id="location" name="location" value="[% params.location %]"
                 rel="twipsy" data-placement="right" data-offset="5" title="Location"/>
             </div>
             <div class="clearfix">
               <input class="span3" placeholder="DNS"
-                type="text" id="dns" name="dns"
+                type="text" id="dns" name="dns" value="[% params.dns %]"
                 rel="twipsy" data-placement="right" data-offset="5" title="DNS"/>
             </div>
             <div class="clearfix">
               <input class="span3" placeholder="IP Address"
-                type="text" id="ip" name="ip"
+                type="text" id="ip" name="ip" value="[% params.ip %]"
                 rel="twipsy" data-placement="right" data-offset="5" title="IP Address"/>
             </div>
             <div class="clearfix">
               <input class="span3" placeholder="Description"
-                type="text" id="description" name="description"
+                type="text" id="description" name="description" value="[% params.description %]"
                 rel="twipsy" data-placement="right" data-offset="5" title="Description"/>
             </div>
             <div class="clearfix">