search field in editor
This commit is contained in:
parent
dbafd3d80d
commit
db211e7357
3 changed files with 73 additions and 2 deletions
1
www/css/vis-timeline-graph2d.min.css
vendored
Normal file
1
www/css/vis-timeline-graph2d.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
|
@ -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"
|
||||
|
|
|
@ -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 ) {
|
||||
|
|
Loading…
Reference in a new issue