Commit 300c65ad authored by Olav Kvittem's avatar Olav Kvittem

varianet med select2 for hostname for iperf og traceroute

parent b3bd05af
......@@ -5,6 +5,8 @@
<script type="text/javascript" src="/js/jquery-ui-1.10.3/ui/jquery-ui.js"></script>
<script type="text/javascript" src="/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/js/Highcharts/js/highcharts.js"></script>
<link href="/js/select2/select2.css" rel="stylesheet"/>
<script type="text/javascript" src="/js/select2/select2.js"></script>
<!-- <script type="text/javascript" src=Highcharts/js/modules/exporting.js></script> -->
<!-- <script type="text/javascript" data-main="main" src="/js/require.js"></script> -->
<!-- <link rel="stylesheet" type="text/css" media="all" href="/style/mp-style.css" /> -->
......
......@@ -114,6 +114,71 @@ function iperf(host, nobs, interval){
//------------------------------------------------------------------------------
//
function make_select_ny( elm, url){
// var html='<button id=traceroute onclick="traceroute( $(\'#tr_host\').val(), $(\'#tr_times\').val(), $(\'#tr_size\').val(), $(\'#tr_interval\').val() )">Trace route</button> to ';
// commented code is to produce a select_menu rather than jquery ui autocomplete
// html+= '<form name="traceroute_form" id="traceroute_form">';
// html+= '<select name="tr_opt" id="tr_opt">';
// html+= '<option value="">My host</option>';
var html='<form name="traceroute_form" id="traceroute_form"';
html+= 'action="javascript:traceroute( $(\'#tr_host\').val(), $(\'#tr_times\').val(), $(\'#tr_size\').val(), $(\'#tr_interval\').val() )">';
html+='<table><tr><td>';
html+='<input type="submit" value="Trace route" class="btn btn-primary btn-lg" /> to ';
// html+='<input id=tr_host value="" placeholder="my host" title="Automatisk utfylling av mleplenavn"></input>';
var html2=' <td> &nbsp;';
html2='<input id=tr_times value=3 style="width:3em;text-align:right"> times</input>';
html2+=', using <input id=tr_size value=64 style="width:3em;text-align:right"> bytes packets</input>';
html2+=', every <input id=tr_interval value=0.1 style="width:3em;text-align:right"> seconds.';
html2+='</table>';
html2+='</form>';
// $(elm).html(html);
html+= '<select name="tr_opt" id="tr_opt" style=width:15em>';
html+= '<option value="">My-own-host</option>';
var items=["caida.org", "uninett.no", "nordu.net"];
for (var item in items){
html+= '<option value="' + items[item] + '">' + items[item] + '</option>';
}
var request=$.ajax( {url: url, type: 'GET', dataType: 'json', crossDomain: true } );
request.done( function( mps){
// console.log(mps);
mps.sort( function(a, b) {
var textA = a.navn.toLowerCase();
var textB = b.navn.toLowerCase();
if (textA < textB)
return -1;
if (textA > textB)
return 1;
return 0;
});
$.each(mps, function(mp) {
items.push( mps[mp].navn);
html+='<option value="' + mps[mp].navn + '">' + mps[mp].navn + '</option>';
// + mps[mp].nettinstallasjon + ': '
});
html+='</select></form>';
$(elm).html(html+html2);
// $( "#tr_host" ).autocomplete({ source: items });
$("#tr_opt").select2();
});
request.fail( function( jqXHR, status, error){
console.log('Listing beacons faild from '+ url + ' : ' + status + ', ' + error);
});
/* var rq=$.JSONget(url, function(data){console.log(data)});
rq.fail( function( jqXHR, error){
console.log(error+ url);
});
*/
}
//--------------------------------------------------------------------------------
function make_select( elm, url){
// var html='<button id=iperf onclick="iperf( $(\'#tr_host\').val(), $(\'#tr_times\').val(), $(\'#tr_size\').val(), $(\'#tr_interval\').val() )">Trace route</button> to ';
......@@ -122,15 +187,22 @@ function make_select( elm, url){
// html+= '<select name="tr_opt" id="tr_opt">';
// html+= '<option value="">My host</option>';
var html='<form name="iperf_form" id="iperf_form"';
html+= 'action="javascript:iperf( $(\'#tr_host\').val(), $(\'#tr_times\').val(), $(\'#tr_interval\').val() )">';
html+= 'action="javascript:iperf( $(\'#tr_host\').val(), $(\'#tr_times\').val(), $(\'#tr_interval\').val() )">';
html+='<table><tr><td>';
html+='<input class="btn btn-primary btn-lg" type="submit" value="Test" class=button/> to ';
html+='<input id=tr_host value="" placeholder="my host" title="Automatisk utfylling av målepålenavn"></input>';
html+=' for <input id=tr_times value=3 style="width:3em;text-align:right"> seconds</input>';
// html+='<input id=tr_host value="" placeholder="my host" title="Automatisk utfylling av mleplenavn"></input>';
html+='<span id=select-house></span>';
var html2=' <td> &nbsp;';
html2+=' for <input id=tr_times value=3 style="width:3em;text-align:right"> seconds</input>';
// html+=', using <input id=tr_size value=64 style="width:3em;text-align:right"> bytes packets</input>';
html+=', report every <input id=tr_interval value=1 style="width:3em;text-align:right"> seconds.';
html+='</form>';
$(elm).html(html);
html2+=', report every <input id=tr_interval value=1 style="width:3em;text-align:right"> seconds.';
html2+='</table>';
html2+='</form>';
$(elm).html(html+html2); // make sure something is shown
html = '<select name="tr_opt" id="tr_opt" style=width:15em>';
html+= '<option value="">My-own-host</option>';
var items=[];
var request=$.ajax( {url: url, type: 'GET', dataType: 'json', crossDomain: true } );
request.done( function( mps){
......@@ -145,14 +217,16 @@ html+= 'action="javascript:iperf( $(\'#tr_host\').val(), $(\'#tr_times\').val(),
return 1;
return 0;
});
$.each(mps, function(mp) {
$.each(mps, function(mp) {
items.push( mps[mp].navn);
// html+='<option value="' + mps[mp].navn + '">' + mps[mp].navn + '</option>';
html+='<option value="' + mps[mp].navn + '">' + mps[mp].navn + '</option>';
// + mps[mp].nettinstallasjon + ': '
});
// html+='</select>';
});
html+='</select></form>';
// $(elm).html(html+'</select></form>');
$( "#tr_host" ).autocomplete({ source: items });
$("#select-house").html(html);
// $( "#tr_host" ).autocomplete({ source: items });
$("#tr_opt").select2();
});
request.fail( function( jqXHR, status, error){
console.log('Listing beacons faild from '+ url + ' : ' + status + ', ' + error);
......
......@@ -7,13 +7,14 @@ This implements a web front end to a json traceroute service.
<h3>Route analysis <!-- by <script>document.write(location.hostname)--></script></h3>
<h3>Route analysis from <span id=mpname></span>
<script>$("#mpname").append(location.hostname)</script></h3>
<div class="uninett-color-lightBlue uninett-padded gutter">
<span id=tr_button></span>
<span id=tr_button></span>
<script>make_select( '#tr_button', mp_url );</script>
<div id=busy><img src=/images/ajax-loader.gif> Traceing route - please wait at least 'times*(1+every)' seconds.<p></div>
</div>
......
......@@ -8,6 +8,9 @@
<!-- <script type="text/javascript" src=Highcharts/js/modules/exporting.js></script> -->
<!-- <script type="text/javascript" data-main="main" src="/js/require.js"></script> -->
<!-- <link rel="stylesheet" type="text/css" media="all" href="/style/mp-style.css" /> -->
<link href="/js/select2/select2.css" rel="stylesheet"/>
<script type="text/javascript" src="/js/select2/select2.js"></script>
<!-- <script type="text/javascript" src="/js/mp-select.js"></script> -->
<style type="text/css" title="currentStyle">
@import "/js/jquery-ui-1.10.3/themes/base/jquery-ui.css";
......
......@@ -111,24 +111,35 @@ function traceroute(host, nobs, psize, interval){
//------------------------------------------------------------------------------
//
/* was to be in separate mp-select.js */
function make_select( elm, url){
// var html='<button id=traceroute onclick="traceroute( $(\'#tr_host\').val(), $(\'#tr_times\').val(), $(\'#tr_size\').val(), $(\'#tr_interval\').val() )">Trace route</button> to ';
// commented code is to produce a select_menu rather than jquery ui autocomplete
// html+= '<form name="traceroute_form" id="traceroute_form">';
// html+= '<select name="tr_opt" id="tr_opt">';
// html+= '<option value="">My host</option>';
// html+= '<select name="tr_opt" id="tr_opt">';
// html+= '<option value="">My host</option>';
var html='<form name="traceroute_form" id="traceroute_form"';
html+= 'action="javascript:traceroute( $(\'#tr_host\').val(), $(\'#tr_times\').val(), $(\'#tr_size\').val(), $(\'#tr_interval\').val() )">';
html+= 'action="javascript:traceroute( $(\'#tr_host\').val(), $(\'#tr_times\').val(), $(\'#tr_size\').val(), $(\'#tr_interval\').val() )">';
html+='<table><tr><td>';
html+='<input type="submit" value="Trace route" class="btn btn-primary btn-lg" /> to ';
html+='<input id=tr_host value="" placeholder="my host" title="Automatisk utfylling av mleplenavn"></input>';
html+='<input id=tr_times value=3 style="width:3em;text-align:right"> times</input>';
html+=', using <input id=tr_size value=64 style="width:3em;text-align:right"> bytes packets</input>';
html+=', every <input id=tr_interval value=0.1 style="width:3em;text-align:right"> seconds.';
html+='</form>';
$(elm).html(html);
// html+='<input id=tr_host value="" placeholder="my host" title="Automatisk utfylling av mleplenavn"></input>';
var html2=' <td> &nbsp;';
html2='<input id=tr_times value=3 style="width:3em;text-align:right"> times</input>';
html2+=', using <input id=tr_size value=64 style="width:3em;text-align:right"> bytes packets</input>';
html2+=', every <input id=tr_interval value=0.1 style="width:3em;text-align:right"> seconds.';
html2+='</table>';
html2+='</form>';
// $(elm).html(html);
html+= '<select name="tr_opt" id="tr_opt" style=width:15em>';
html+= '<option value="">My-own-host</option>';
var items=["caida.org", "uninett.no", "nordu.net"];
for (var item in items){
html+= '<option value="' + items[item] + '">' + items[item] + '</option>';
}
var request=$.ajax( {url: url, type: 'GET', dataType: 'json', crossDomain: true } );
request.done( function( mps){
// console.log(mps);
......@@ -142,14 +153,15 @@ html+= 'action="javascript:traceroute( $(\'#tr_host\').val(), $(\'#tr_times\').v
return 1;
return 0;
});
$.each(mps, function(mp) {
items.push( mps[mp].navn);
// html+='<option value="' + mps[mp].navn + '">' + mps[mp].navn + '</option>';
$.each(mps, function(mp) {
items.push( mps[mp].navn);
html+='<option value="' + mps[mp].navn + '">' + mps[mp].navn + '</option>';
// + mps[mp].nettinstallasjon + ': '
});
// html+='</select>';
// $(elm).html(html+'</select></form>');
$( "#tr_host" ).autocomplete({ source: items });
});
html+='</select></form>';
$(elm).html(html+html2);
// $( "#tr_host" ).autocomplete({ source: items });
$("#tr_opt").select2();
});
request.fail( function( jqXHR, status, error){
console.log('Listing beacons faild from '+ url + ' : ' + status + ', ' + error);
......@@ -160,8 +172,10 @@ html+= 'action="javascript:traceroute( $(\'#tr_host\').val(), $(\'#tr_times\').v
console.log(error+ url);
});
*/
}
//------------------------------------------------------------------------------
//
function tegn_graf( div, tittel, subtittel, tider, leg_band, grafno, width ){
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment