xtr-improved-frontend/index.html
2019-11-20 02:31:01 +01:00

188 lines
4.8 KiB
HTML

<html>
<head>
<meta charset="UTF-8">
<title>XTR :: xicon trace route</title>
<style>
table {
border-collapse: collapse;
width: 90%;
}
td
{
border:1px solid grey;
font-size: 9pt;
}
.traceroutes
{
text-decoration: none;
display: inline-block;
}
.traceroutes:visited
{
color: #000000;
}
.traceroutes:hover
{
color: #880000;
transform: rotate(-30deg);
}
.traceroutes:active
{
color: #bb0000;
}
.traceroutes_rotating
{
display: inline-block;
text-decoration: none;
color: #bb0000;
animation: spin 2s linear infinite;
}
@keyframes spin
{
0% { transform: rotate(-30deg); }
25% { transform: rotate(0deg); }
50% { transform: rotate(30deg); }
75% { transform: rotate(0deg); }
100% { transform: rotate(-30deg); }
}
</style>
</head>
<body>
<section>
<div id="mainMenu"></div>
<div id="statusBoxContainer"></div>
</section>
<!-- Popper.js - Source : https://getbootstrap.com/docs/4.3/getting-started/download/
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
Bootstrap Source : https://getbootstrap.com/docs/4.3/getting-started/download/
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="jquery-3.4.1.min.js"></script>
<script src="main.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
-->
<!--
<script>
var serversList = [];
const serverRoute = "http://xtr-master.xicon.eu/v3/server/list/online"
//var hallo = mapServerToList();
function dosome(cb_count)
{
for (i = 1; i <= cb_count; i++)
{
var checkbox = document.getElementById("cb"+i).checked;
if( checkbox === true)
{
doit(i);
}
}
}
function doit(target_div)
{
var str1= new Object();
var server=document.getElementById("server"+target_div).value;
var target_ip=document.getElementById("target"+target_div).value;
$.ajax(
{
type: "GET",
url: "http://"+server+"/v3/client/request/"+target_ip,
dataType: "JSON",
beforeSend: function ()
{
document.getElementById("doit"+target_div).classList.add('traceroutes_rotating');
}
}).done(function( jsonResult )
{
document.getElementById("doit"+target_div).classList.remove('traceroutes_rotating');
str1=JSON.parse(JSON.stringify(jsonResult));
var tbl=$("<table/>").attr("id","mytable"+target_div);
$("#div"+target_div).empty().append(tbl);
$("#mytable"+target_div).append("<thead><tr><td><b>ip</b></td><td><b>hostname</b></td><td><b>ping</b></td><td><b>as</b></td></tr></thead>");
for(var i=0;i<str1.length;i++)
{
var tr="<tr>";
var td1="<td>"+str1[i][0]+"</td>";
var td2="<td>"+str1[i][1]+"</td>";
var td3="<td>"+str1[i][2]+"</td>";
var td4="<td title=\""+str1[i][4]+"\">"+str1[i][3]+"</td></tr>";
$("#mytable"+target_div).append(tr+td1+td2+td3+td4);
}
});
}
function get_servers()
{
var strServer= new Object();
$.ajax(
{
type: "GET",
url: "http://xtr-master.xicon.eu/v3/server/list/online",
dataType: "JSON",
}).done(function( jsonServerResult )
{
console.log(jsonServerResult);
strServer=JSON.parse(JSON.stringify(jsonServerResult));
var list=$("<select>").attr("name","server");
$("select[name*='server']").empty().append(list);
for(var i=0;i<strServer.length;i++)
{
//var strOption = "<option value=\"" + strServer[i][0] + ":" + strServer[i][1] + "\">" + strServer[i][0] + ":" + strServer[i][1] + "(AS" + strServer[i][3] + ")</option>";
var strOption = new Option( strServer[i][0] + ":" + strServer[i][1] + " (AS" + strServer[i][2] + ")" , strServer[i][0] + ":" + strServer[i][1]);
$(strOption).html(strServer[i][0] + ":" + strServer[i][1] + " (AS" + strServer[i][2] + ")");
$("select[name*='server']").append(strOption);
}
$("select[name='server']").append("</select>");
});
}
// XiCoN-Luan- Section
// New function and code redesign
/**
* API call
*/
function getServerList() {
$.ajax({
type: "GET",
url: serverRoute,
dataType: "JSON",
success: function(jsonServerResult) {
serversList = jsonServerResult;
}
});
}
$(document).ready(function() {
//get_servers();
//getServerList();
});
</script>
-->
<script type="text/javascript" src="main.js"></script></body>
</html>