search field in editor

This commit is contained in:
Ruben van de Ven 2020-02-23 22:48:16 +03:00
parent dbafd3d80d
commit db211e7357
3 changed files with 73 additions and 2 deletions

1
www/css/vis-timeline-graph2d.min.css vendored Normal file

File diff suppressed because one or more lines are too long

View file

@ -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"

View file

@ -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 ) {