search field in editor

www/index.html

@@ -16,7 +16,7 @@
 	<div id="interface" class='showStatus'>
 		<div id='status'>
 			<div id='overview'>
-				<span class="loop_time" title="uptime: {{uptime}}" onclick="document.getElementById('time_update').classList.toggle('visible')">{{loop_timer}}</span>
+				<span class="loop_time" :title="['uptime', uptime]" onclick="document.getElementById('time_update').classList.toggle('visible')">{{loop_timer}}</span>
 				<div id='time_update'>
 					<input type="text" value="00:00:00" name="loop_time_value" id="loop_time_value" />
 					<input type="button" onclick="panopticon.change_loop_time(document.getElementById('loop_time_value').value)" value="set time">
@@ -94,6 +94,7 @@
 				<div id="btn-diversions" class="btn">View Diversions</div>
 				<div id="btn-audio" class="btn">View Audio Files</div>
 				<div id="btn-config" class="btn">Configuration</div>
+				<form id='search'><input type='text' id='search-field'> <input type='submit' id='search-go' value='Search'></form>
 			</div>
 			<div id="msg"></div>
 			<svg id='graph' viewbox="-640 -512 1280 1024"

www/js/hugvey_console.js

@@ -354,6 +354,8 @@ class Graph {
         this.directions = []; // initialise empty array. For the simulation, make sure we keep the same array object
         this.conditions = []; // initialise empty array. For the simulation, make sure we keep the same array object
         this.diversions = []; // initialise empty array. For the simulation, make sure we keep the same array object
+        this.previousSearch = "";
+        this.searchStep = 0;
 
         let graph = this;
         this.controlDown = false;
@@ -372,9 +374,11 @@ class Graph {
 
         let c = this.container;
         let zoomed = function() {
+        	console.log(d3.event);
             c.attr( "transform", d3.event.transform );
         }
-        this.svg.call( d3.zoom()
+        this.zoom = d3.zoom();
+        this.svg.call( this.zoom
             .scaleExtent( [1 / 16, 8] )
             .on( "zoom", zoomed ) );
 
@@ -398,6 +402,71 @@ class Graph {
         document.getElementById( 'btn-diversions' ).addEventListener( 'click', function( e ) { graph.showDiversions(); } );
         document.getElementById( 'btn-audio' ).addEventListener( 'click', function( e ) { graph.showAudioFiles(); } );
         document.getElementById( 'btn-config' ).addEventListener( 'click', function( e ) { graph.showConfiguration(); } );
+        document.getElementById( 'search' ).addEventListener( 'submit', function( e ) { e.preventDefault(); graph.searchSubmit(); } );
+    }
+    
+    searchSubmit() { 
+    	let query = document.getElementById( 'search-field' ).value;
+    	if(query.length < 1) {
+    		console.log('no query');
+    		return;
+    	}
+    	if(query == this.previousSearch) {
+    		this.searchStep++;
+    	} else{
+    		this.searchStep = 0;
+    	}
+    	this.previousSearch = query;
+    	let results = this.findMessages(query);
+    	if(results.length < 1) {
+    		alert("No message found");
+    		return;
+    	}
+    	
+    	let ri = this.searchStep % results.length;
+    	let msg = results[ri];
+    	
+    	console.log(msg);
+
+    	this.zoom.scaleTo(this.svg, 1);
+    	this.zoom.translateTo(this.svg, msg.x + 1280/2, msg.y + 1024/2);
+    	this.selectMsg(msg);
+    	
+    	document.getElementById("search-go").value = "Search ("+(ri+1) + "/" + results.length +")";
+    	
+    }
+    
+    findMessages(query) {
+    	let results = [];
+    	
+    	for(let msg of this.messages) {
+    		if(msg['@id'] == query || msg['@id'].indexOf(query) > -1) {
+    			results.push(msg);
+    		}
+    		if(msg['text'] == query || (msg.hasOwnProperty('label') && msg['label'] == query)) {
+    			results.push(msg);
+    		}
+    	}
+    	// second loop for priority
+    	for(let msg of this.messages) {
+    		if(msg['text'].indexOf(query) > -1 || (msg.hasOwnProperty('label') && msg['label'].indexOf(query) > -1)) {
+    			results.push(msg);
+    		}
+    	}
+    	
+    	return results;
+    }
+    
+    findMessage(query, matchNr) {
+    	if(typeof matchNr == 'undefined') {
+    		matchNr = 0;
+    	}
+    	
+    	let results = this.findMessages(query)
+    	
+    	if(results.length) {
+    		return results[matchNr % results.length];
+    	}
     }
 
     clickMsg( msg ) {