- UI interation of advanced search

airtime_mvc/application/views/scripts/library/library.phtml

@@ -1,4 +1,7 @@
 <div id="import_status" class="library_import" style="display:none">File import in progress... <img src="/css/images/file_import_loader.gif"></img></div>
-<div id="advanced_search"></div>
+<fieldset class="toggle" id="filter_options">
+    <legend style="cursor: pointer;"><span class="ui-icon ui-icon-triangle-2-n-s"></span>Advanced Search Options</legend>
+    <div id="advanced_search" class="advanced_search form-horizontal"></div>
+</fieldset>
 <table id="library_display" cellpadding="0" cellspacing="0" class="datatable">
 </table>

airtime_mvc/application/views/scripts/showbuilder/builderDialog.phtml

@@ -1,7 +1,7 @@
 <div class="wrapper">
     <div id="library_content" class="lib-content tabs ui-widget ui-widget-content block-shadow alpha-block padded">
         <div id="import_status" style="display:none">File import in progress...</div>
-        <div id="advanced_search"></div>
+        <div id="advanced_search" class="advanced_search form-horizontal"></div>
         <table id="library_display" cellpadding="0" cellspacing="0" class="datatable"></table>
     </div>
     <div id="show_builder" class="sb-content ui-widget ui-widget-content block-shadow omega-block padded">

airtime_mvc/public/js/airtime/library/library.js

@@ -381,11 +381,17 @@ var AIRTIME = (function(AIRTIME) {
                         label = " (Hz)";
                     }
                     
-                    if (ele.bVisible) {
+                    var inputClass = 'filter_column filter_number_text'; 
-                        advanceSearchDiv.append("<div id='advanced_search_col_"+currentColId+"'><span>"+ele.sTitle+label+"</span> : <span id='"+ele.mDataProp+"'></span></div>");
+                    if (criteriaTypes[ele.mDataProp] != "s") {
-                    } else {
+                        inputClass = 'filterColumn filter_number_range';
-                        advanceSearchDiv.append("<div id='advanced_search_col_"+currentColId+"' style='display:none;'><span>"+ele.sTitle+label+"</span> : <span id='"+ele.mDataProp+"'></span></div>");
                     }
+                    
+                    if (ele.bVisible) {
+                        advanceSearchDiv.append("<div id='advanced_search_col_"+currentColId+" class='control-group'><label class='control-label'>"+ele.sTitle+label+" : </label><div id='"+ele.mDataProp+"' class='controls "+inputClass+"'></div></div>");
+                    } else {
+                        advanceSearchDiv.append("<div id='advanced_search_col_"+currentColId+"' class='control-group' style='display:none;'><label class='control-label'>"+ele.sTitle+label+"</label><div id='"+ele.mDataProp+"' class='controls "+inputClass+"'></div></div>");
+                    }
+                    
                     if (criteriaTypes[ele.mDataProp] == "s") {
                         var obj = { sSelector: "#"+ele.mDataProp }
                     } else {
@@ -649,6 +655,17 @@ var AIRTIME = (function(AIRTIME) {
         });
         setColumnFilter(oTable);
         oTable.fnSetFilteringDelay(350);
+        
+        $libContent.on("click", "legend", function(){
+            var $fs = $(this).parents("fieldset");
+
+            if ($fs.hasClass("closed")) {
+                $fs.removeClass("closed");
+            }
+            else {
+                $fs.addClass("closed");
+            }
+        });
        
         $libContent.find(".dataTables_scrolling").css("max-height", tableHeight);