Filter bar for configuration file

Add filter feature to configuration file review.

Author: Gary Keeble

css/main.css

@@ -342,21 +342,29 @@ html:not(.has-marker) .marker-offset {
     padding: 5px;
 }
 
+.configuration-close {
+    float: right;
+    color: #bbb;
+    cursor: pointer;
+}
+
 html.has-config .configuration-file {
     position:absolute;
     top: 10%;
     left: 10%;
     width: 78.5%;
     padding:10px;
-    height:580px;
-    overflow:hidden;
-    overflow-y:scroll;
     background-color: white;
     border: #337ab7;
     border-style: groove;
     z-index: 11;
 }
 
+html.has-config .configuration-list {
+    height:580px;
+    overflow:hidden;
+    overflow-y:scroll;
+}
 
 .graph-legend-field {
     padding-bottom:0.1em;

js/configuration.js

@@ -8,40 +8,94 @@
  */
 
 
-function Configuration(file) {
+function Configuration(file, showConfigFile) {
 
 	// Private Variables
 	var that = this; 	  // generic pointer back to this function
 	var fileData; 		  // configuration file information
+	var fileLinesArray;	  // Store the contents of the file globally	
 
+	function renderFileContentList(configurationList, filter) {
+		var li;
+
+		// Clear the contents of the list
+		$('li',configurationList).remove();
+
+		for(var i=0; i<fileLinesArray.length; i++) {
+			if(!filter || filter.length<1) { //Everything
+				li = $('<li class="configuration-row">' + fileLinesArray[i] + '</li>');
+				configurationList.append(li);	
+			} else {
+				var regFilter = new RegExp('(.*)(' + filter + ')(.*)','i');
+				var highLight = fileLinesArray[i].match(regFilter);
+				if(highLight!=null) { // dont include blank lines
+					li = $('<li class="configuration-row">' + highLight[1] + '<b>' + highLight[2] + '</b>' + highLight[3] + '</li>');
+					configurationList.append(li);	
+				}
+			}
+		}
+	}
+
+	function renderFileContents(filter) {
+
+		var
+		configurationElem  = ('.configuration-file'), // point to the actual element in index.html 
+		configurationDiv   = $('<div class="configuration-file">' 
+							  +		'<div class="configuration-header">' 
+							  + 		'<h3>' + file.name
+							  + 			'<span class="configuration-close glyphicon glyphicon-remove"></span>'
+							  + 		'</h3>'
+							  +     	'<input type="text" class="form-control configuration-filter" placeholder="Enter filter" size="5"/>'
+							  + 	'</div>'
+							  +		'<div><ul class="list-unstyled configuration-list"></ul></div>'
+							  +'</div>'),
+		configurationTitle = $('h3', configurationDiv),
+		li;
+
+		// now replace the element in the index.html with the loaded file information
+		$(configurationElem).replaceWith(configurationDiv);
+
+		var configurationList  = $('.configuration-list');
+		renderFileContentList(configurationList, null);
+		
+		//configurationTitle.text(file.name);
+		$("#status-bar .configuration-file-name").text(file.name);
+
+		// now replace the element in the index.html with the loaded file information
+		$(configurationElem).replaceWith(configurationDiv);
+
+
+		// Add close icon
+		$(".configuration-close").click(function() {
+			if(showConfigFile) showConfigFile(false); // hide the config file
+		});
+
+
+	}
+	
 	function loadFile(file) {
 
         var reader = new FileReader();
     	fileData = file; 				// Store the data locally;
+ 
 
         reader.onload = function(e) {
-			
-			var
-				configurationElem  = ('.configuration-file'), // point to the actual element in index.html 
-				configurationDiv   = $('<div class="configuration-file"><h3></h3><ul class="list-unstyled configuration-list"></ul></div>'),
-				configurationTitle = $('h3', configurationDiv),
-				configurationList  = $('ul', configurationDiv),
-				li;
-
-            var data = e.target.result;	  // all the data
-            var lines = data.split('\n'); // separate into lines
-			
-			for(var i=0; i<lines.length; i++) {
-				li = $('<li class="configuration-row">' + lines[i] + '</li>');
-				configurationList.append(li);	
-			}
-			
-			configurationTitle.text(file.name);
-			$("#status-bar .configuration-file-name").text(file.name);
-			
-			// now replace the element in the index.html with the loaded file information
-			$(configurationElem).replaceWith(configurationDiv);
-			
+        	
+        	var data = e.target.result;	  			// all the data
+	    	
+	    	fileLinesArray = data.split('\n'); 		// separated into lines
+
+        	renderFileContents();
+
+        	// Add user configurable file filter
+	        $(".configuration-filter").keyup(function() {
+
+	        	var newFilter = $(".configuration-filter").val();
+
+				var configurationList  = $('.configuration-list');
+				renderFileContentList(configurationList, newFilter);
+	        	
+	        });
 
         };
 
@@ -55,4 +109,6 @@ function Configuration(file) {
 
     loadFile(file); // configuration file loaded
 
+    // Add filter 
+    
 }

js/main.js

@@ -448,6 +448,17 @@ function BlackboxLogViewer() {
         }
     }
 
+    function showConfigFile(state) {
+            if(hasConfig) {
+                if(state == null) { // no state specified, just toggle
+                    hasConfigOverlay = !hasConfigOverlay;
+                } else { //state defined, just set item
+                    hasConfigOverlay = (state)?true:false;
+                }
+                (hasConfigOverlay)?$("html").addClass("has-config-overlay"):$("html").removeClass("has-config-overlay");
+            }
+        }
+
     /**
      * Set the index of the log from the log file that should be viewed. Pass "null" as the index to open the first
      * available log.
@@ -538,9 +549,10 @@ function BlackboxLogViewer() {
 
             if(fileContents.match(/# dump/i)) { // this is actually a configuration file
                 try{
-                   configuration = new Configuration(file); // the configuration class will actually re-open the file as a text object.
+                   configuration = new Configuration(file, showConfigFile); // the configuration class will actually re-open the file as a text object.
                    hasConfig = true;
                    (hasConfig)?$("html").addClass("has-config"):$("html").removeClass("has-config");
+
                    } catch(e) {
                        configuration = null;
                        hasConfig = false;
@@ -1133,13 +1145,10 @@ function BlackboxLogViewer() {
         });
 
         $('#status-bar .configuration-file-name').click(function(e) {
-            if(hasConfig) {
-                hasConfigOverlay = !hasConfigOverlay;
-                (hasConfigOverlay)?$("html").addClass("has-config-overlay"):$("html").removeClass("has-config-overlay");
-            }
+            showConfigFile(true); // show the config file
             e.preventDefault();
         });
-        
+
         $(".btn-workspaces-export").click(function(e) {
             setGraphState(GRAPH_STATE_PAUSED);
             saveWorkspaces();
@@ -1246,10 +1255,7 @@ function BlackboxLogViewer() {
                     break;
 
                     case "C".charCodeAt(0): 
-                        if(hasConfig) {
-                            hasConfigOverlay = !hasConfigOverlay;
-                            (hasConfigOverlay)?$("html").addClass("has-config-overlay"):$("html").removeClass("has-config-overlay");
-                        }
+                        showConfigFile(); // toggle the config file popup
                         e.preventDefault();
                     break;