mirror of
https://github.com/billz/raspap-webgui.git
synced 2025-12-26 23:26:47 +01:00
Group vendor related js into js/vendor
This commit is contained in:
billz
@@ -1,147 +0,0 @@
|
||||
(function($, _t) {
|
||||
"use strict";
|
||||
|
||||
/**
|
||||
* Create a Chart.js barchart.
|
||||
*/
|
||||
function CreateChart(ctx, labels) {
|
||||
var barchart = new Chart(ctx,{
|
||||
type: 'line',
|
||||
options: {
|
||||
responsive: true,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'date',
|
||||
},
|
||||
ticks: {
|
||||
maxRotation: 90,
|
||||
minRotation: 80
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
id: 'y-axis-1',
|
||||
type: 'linear',
|
||||
display: true,
|
||||
position: 'left',
|
||||
ticks: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}]
|
||||
}
|
||||
},
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: []
|
||||
}
|
||||
});
|
||||
|
||||
return barchart;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a jquery bootstrap datatable.
|
||||
*/
|
||||
function CreateDataTable(placeholder, timeunits) {
|
||||
$("#"+placeholder).append('<table id="tableBandwidth'+timeunits+
|
||||
'" class="table table-striped"><thead>'+
|
||||
'<tr><th>date</th><th>rx</th><th>tx</th></tr></thead><tbody></tbody></table>');
|
||||
}
|
||||
|
||||
/**
|
||||
* Figure out which tab is selected and remove all existing charts and then
|
||||
* construct the proper barchart.
|
||||
*/
|
||||
function ShowBandwidthChartHandler(e) {
|
||||
// Remove all chartjs charts
|
||||
$('#divChartBandwidthhourly').empty();
|
||||
$('#divChartBandwidthdaily').empty();
|
||||
$('#divChartBandwidthmonthly').empty();
|
||||
// Remove all datatables
|
||||
$('#divTableBandwidthhourly').empty();
|
||||
$('#divTableBandwidthdaily').empty();
|
||||
$('#divTableBandwidthmonthly').empty();
|
||||
// Construct ajax uri for getting the proper data.
|
||||
var timeunit = $('ul#tabbarBandwidth li.nav-item a.nav-link.active').attr('href').substr(1);
|
||||
var uri = 'ajax/bandwidth/get_bandwidth.php?';
|
||||
uri += 'inet=';
|
||||
uri += encodeURIComponent($('#cbxInterface'+timeunit+' option:selected').text());
|
||||
uri += '&tu=';
|
||||
uri += encodeURIComponent(timeunit.substr(0, 1));
|
||||
var datasizeunits = 'mb';
|
||||
uri += '&dsu='+encodeURIComponent(datasizeunits);
|
||||
// Init. datatable html
|
||||
var datatable = CreateDataTable('divTableBandwidth'+timeunit, timeunit);
|
||||
// Get data for chart
|
||||
$.ajax({
|
||||
url: uri,
|
||||
dataType: 'json',
|
||||
beforeSend: function() {
|
||||
$('#divLoaderBandwidth'+timeunit).show();
|
||||
}
|
||||
}).done(function(jsondata) {
|
||||
$('#divLoaderBandwidth'+timeunit).hide();
|
||||
// Map json values to label array
|
||||
var labels = jsondata.map(function(e) {
|
||||
return e.date;
|
||||
});
|
||||
// Init. chart with label series
|
||||
var barchart = CreateChart('divChartBandwidth'+timeunit, labels);
|
||||
var dataRx = jsondata.map(function(e) {
|
||||
return e.rx;
|
||||
});
|
||||
var dataTx = jsondata.map(function(e) {
|
||||
return e.tx;
|
||||
});
|
||||
|
||||
addData(barchart, dataRx, dataTx, datasizeunits);
|
||||
$('#tableBandwidth'+timeunit).DataTable({
|
||||
'searching': false,
|
||||
'paging': false,
|
||||
'data': jsondata,
|
||||
'order': [[ 0, 'ASC' ]],
|
||||
'columns': [
|
||||
{ 'data': 'date' },
|
||||
{ 'data': 'rx', "title": _t['receive']+' '+datasizeunits.toUpperCase() },
|
||||
{ 'data': 'tx', "title": _t['send']+' '+datasizeunits.toUpperCase() }]
|
||||
});
|
||||
}).fail(function(xhr, textStatus) {
|
||||
if (window.console) {
|
||||
console.error('server error');
|
||||
} else {
|
||||
alert("server error");
|
||||
}
|
||||
});
|
||||
}
|
||||
/**
|
||||
* Add data array to datasets of current chart.
|
||||
*/
|
||||
function addData(chart, dataRx, dataTx, datasizeunits) {
|
||||
chart.data.datasets.push({
|
||||
label: 'Receive'+' '+datasizeunits.toUpperCase(),
|
||||
yAxisID: 'y-axis-1',
|
||||
borderColor: 'rgba(75, 192, 192, 1)',
|
||||
backgroundColor: 'rgba(75, 192, 192, 0.2)',
|
||||
data: dataRx
|
||||
});
|
||||
chart.data.datasets.push({
|
||||
label: 'Send'+' '+datasizeunits.toUpperCase(),
|
||||
yAxisID: 'y-axis-1',
|
||||
borderColor: 'rgba(192, 192, 192, 1)',
|
||||
backgroundColor: 'rgba(192, 192, 192, 0.2)',
|
||||
data: dataTx
|
||||
});
|
||||
chart.update();
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#tabbarBandwidth a[data-toggle="tab"]').on('shown.bs.tab', ShowBandwidthChartHandler);
|
||||
$('#cbxInterfacehourly').on('change', ShowBandwidthChartHandler);
|
||||
$('#cbxInterfacedaily').on('change', ShowBandwidthChartHandler);
|
||||
$('#cbxInterfacemonthly').on('change', ShowBandwidthChartHandler);
|
||||
ShowBandwidthChartHandler();
|
||||
});
|
||||
|
||||
})(jQuery, t);
|
||||
|
||||
7
app/js/bandwidthcharts.min.js
vendored
7
app/js/bandwidthcharts.min.js
vendored
@@ -1,7 +0,0 @@
|
||||
/*!
|
||||
* RaspAP - RaspAP WiFi Configuration Portal v1.6.1 (https://github.com/billz/raspap-webgui)
|
||||
* Copyright 2013-2019 RaspAP Developers
|
||||
* Licensed under MIT (https://github.com/raspap-webgui/raspap-webgui/blob/master/LICENSE)
|
||||
*/
|
||||
|
||||
!function(r,i){"use strict";function t(t){r("#divChartBandwidthhourly").empty(),r("#divChartBandwidthdaily").empty(),r("#divChartBandwidthmonthly").empty(),r("#divTableBandwidthhourly").empty(),r("#divTableBandwidthdaily").empty(),r("#divTableBandwidthmonthly").empty();var e=r("ul#tabbarBandwidth li.active a").attr("href").substr(1),a="ajax/bandwidth/get_bandwidth.php?";a+="inet=",a+=encodeURIComponent(r("#cbxInterface"+e+" option:selected").text()),a+="&tu=",a+=encodeURIComponent(e.substr(0,1));var d="mb";a+="&dsu="+encodeURIComponent(d);var n=function(t,e){return new Morris.Bar({element:t,xkey:"date",ykeys:["rx","tx"],labels:[i.receive+" "+e.toUpperCase(),i.send+" "+e.toUpperCase()]})}("divChartBandwidth"+e,d);!function(t,e){r("#"+t).append('<table id="tableBandwidth'+e+'" class="table table-responsive table-striped container-fluid"><thead><tr><th>date</th><th>rx</th><th>tx</th></tr></thead><tbody></tbody></table>')}("divTableBandwidth"+e,e);r.ajax({url:a,dataType:"json",beforeSend:function(){r("#divLoaderBandwidth"+e).removeClass("hidden")}}).done(function(t){r("#divLoaderBandwidth"+e).addClass("hidden"),n.setData(t),r("#tableBandwidth"+e).DataTable({searching:!1,paging:!1,data:t,order:[[0,"ASC"]],columns:[{data:"date"},{data:"rx",title:i.receive+" "+d.toUpperCase()},{data:"tx",title:i.send+" "+d.toUpperCase()}]})}).fail(function(t,e){window.console?console.error("server error"):alert("server error")})}r(document).ready(function(){r('#tabbarBandwidth a[data-toggle="tab"]').on("shown.bs.tab",t),r("#cbxInterfacehourly").on("change",t),r("#cbxInterfacedaily").on("change",t),r("#cbxInterfacemonthly").on("change",t),t()})}(jQuery,t);
|
||||
7
app/js/custom.min.js
vendored
7
app/js/custom.min.js
vendored
@@ -1,7 +0,0 @@
|
||||
/*!
|
||||
* RaspAP - RaspAP WiFi Configuration Portal v1.6.1 (https://github.com/billz/raspap-webgui)
|
||||
* Copyright 2013-2019 RaspAP Developers
|
||||
* Licensed under MIT (https://github.com/raspap-webgui/raspap-webgui/blob/master/LICENSE)
|
||||
*/
|
||||
|
||||
function msgShow(t,a){if(0==t)var e="success";else if(2==t||1==t)e="danger";return'<div class="alert alert-'+e+' alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>'+a+"</div>"}function createNetmaskAddr(t){var a=[];for(i=0;i<4;i++){var e=Math.min(t,8);a.push(256-Math.pow(2,8-e)),t-=e}return a.join(".")}function loadSummary(a){$.post("/ajax/networking/get_ip_summary.php",{interface:a},function(t){jsonData=JSON.parse(t),console.log(jsonData),0==jsonData.return?$("#"+a+"-summary").html(jsonData.output.join("<br />")):2==jsonData.return&&$("#"+a+"-summary").append('<div class="alert alert-danger alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>'+jsonData.output.join("<br />")+"</div>")})}function getAllInterfaces(){$.get("/ajax/networking/get_all_interfaces.php",function(t){jsonData=JSON.parse(t),$.each(jsonData,function(t,a){loadSummary(a)})})}function setupTabs(){$('a[data-toggle="tab"]').on("shown.bs.tab",function(t){var a=$(t.target).attr("href");a.match("summary")||loadCurrentSettings(a.replace("#",""))})}function loadCurrentSettings(t){$.post("/ajax/networking/get_int_config.php",{interface:t},function(t){jsonData=JSON.parse(t),$.each(jsonData.output,function(t,a){var n=a.interface;$.each(a,function(t,a){switch(t){case"static":"true"==a?($("#"+n+"-static").click(),$("#"+n+"-nofailover").click()):$("#"+n+"-dhcp").click();break;case"failover":"true"===a?$("#"+n+"-failover").click():$("#"+n+"-nofailover").click();break;case"ip_address":var e=a.split("/");$("#"+n+"-ipaddress").val(e[0]),$("#"+n+"-netmask").val(createNetmaskAddr(e[1]));break;case"routers":$("#"+n+"-gateway").val(a);break;case"domain_name_server":svrsDNS=a.split(" "),$("#"+n+"-dnssvr").val(svrsDNS[0]),$("#"+n+"-dnssvralt").val(svrsDNS[1])}})})})}function saveNetworkSettings(t){var a=$("#frm-"+t).find(":input"),e={};$.each(a,function(t,a){"radio"==$(a).attr("type")?e[$(a).attr("id")]=$(a).prop("checked"):e[$(a).attr("id")]=$(a).val()}),e.interface=t,$.post("/ajax/networking/save_int_config.php",e,function(t){var a=JSON.parse(t);$("#msgNetworking").html(msgShow(a.return,a.output))})}function applyNetworkSettings(){$(this).data("int");arrFormData={generate:""},$.post("/ajax/networking/gen_int_config.php",arrFormData,function(t){console.log(t);var a=JSON.parse(t);$("#msgNetworking").html(msgShow(a.return,a.output))})}function setupBtns(){$("#btnSummaryRefresh").click(function(){getAllInterfaces()}),$(".intsave").click(function(){saveNetworkSettings($(this).data("int"))}),$(".intapply").click(function(){applyNetworkSettings()})}function setCSRFTokenHeader(t,a,e){var n=$("meta[name=csrf_token]").attr("content");/^(POST|PATCH|PUT|DELETE)$/i.test(e.type)&&a.setRequestHeader("X-CSRF-Token",n)}function contentLoaded(){switch(pageCurrent=window.location.href.split("?")[1].split("=")[1],pageCurrent=pageCurrent.replace("#",""),$("#side-menu").metisMenu(),pageCurrent){case"network_conf":getAllInterfaces(),setupTabs(),setupBtns()}}function loadWifiStations(a){return function(){var t=!0===a?"?refresh":"";$(".js-wifi-stations").addClass("loading-spinner").empty().load("/ajax/networking/wifi_stations.php"+t,function(){$(this).removeClass("loading-spinner")})}}$(document).on("click",".js-add-dhcp-static-lease",function(t){t.preventDefault();var a=$(".js-new-dhcp-static-lease"),e=$("input[name=mac]",a).val().trim(),n=$("input[name=ip]",a).val().trim();if(""!=e&&""!=n){var i=$("#js-dhcp-static-lease-row").html().replace("{{ mac }}",e).replace("{{ ip }}",n);$(".js-dhcp-static-lease-container").append(i),$("input[name=mac]",a).val(""),$("input[name=ip]",a).val("")}}),$(document).on("click",".js-remove-dhcp-static-lease",function(t){t.preventDefault(),$(this).parents(".js-dhcp-static-lease-row").remove()}),$(document).on("submit",".js-dhcp-settings-form",function(t){$(".js-add-dhcp-static-lease").trigger("click")}),$(".js-reload-wifi-stations").on("click",loadWifiStations(!0)),$(document).on("click",".js-toggle-password",function(t){var a=$(t.target),e=$(a.data("target"));e.is(":input")&&(t.preventDefault(),a.data("__toggle-with-initial")||a.data("__toggle-with-initial",a.text()),"password"===e.attr("type")?(a.text(a.data("toggle-with")),e.attr("type","text")):(a.text(a.data("__toggle-with-initial")),e.attr("type","password")))}),$(document).on("keyup",".js-validate-psk",function(t){var a=$(t.target),e=a.data("colors").split(","),n=$(a.data("target"));a.val().length<8||63<a.val().length?(a.css("backgroundColor",e[0]),n.attr("disabled",!0)):(a.css("backgroundColor",e[1]),n.attr("disabled",!1))}),$(document).ajaxSend(setCSRFTokenHeader).ready(contentLoaded).ready(loadWifiStations());
|
||||
@@ -1,106 +0,0 @@
|
||||
(function($, _t) {
|
||||
"use strict";
|
||||
|
||||
/**
|
||||
* Create a Chart.js barchart.
|
||||
*/
|
||||
function CreateChart(ctx, labels) {
|
||||
var barchart = new Chart(ctx,{
|
||||
type: 'line',
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
scaleLabel: {
|
||||
display: true
|
||||
},
|
||||
ticks: {
|
||||
maxRotation: 0,
|
||||
minRotation: 0
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
id: 'y-axis-1',
|
||||
type: 'linear',
|
||||
display: true,
|
||||
position: 'left',
|
||||
ticks: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}]
|
||||
}
|
||||
},
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: []
|
||||
}
|
||||
});
|
||||
return barchart;
|
||||
}
|
||||
|
||||
function ShowBandwidthChartHandler(e) {
|
||||
// Remove hourly chartjs chart
|
||||
$('#divDBChartBandwidthhourly').empty();
|
||||
// Construct ajax uri for getting the proper data
|
||||
var timeunit = 'hourly';
|
||||
var uri = 'ajax/bandwidth/get_bandwidth.php?';
|
||||
uri += 'inet=';
|
||||
uri += encodeURIComponent($('#divInterface').text());
|
||||
uri += '&tu=';
|
||||
uri += encodeURIComponent(timeunit.substr(0, 1));
|
||||
var datasizeunits = 'mb';
|
||||
uri += '&dsu='+encodeURIComponent(datasizeunits);
|
||||
// Get data for chart
|
||||
$.ajax({
|
||||
url: uri,
|
||||
dataType: 'json',
|
||||
beforeSend: function() {}
|
||||
}).done(function(jsondata) {
|
||||
// Map json values to label array
|
||||
var labels = jsondata.map(function(e) {
|
||||
return e.date;
|
||||
});
|
||||
// Init. chart with label series
|
||||
var barchart = CreateChart('divDBChartBandwidth'+timeunit, labels);
|
||||
var dataRx = jsondata.map(function(e) {
|
||||
return e.rx;
|
||||
});
|
||||
var dataTx = jsondata.map(function(e) {
|
||||
return e.tx;
|
||||
});
|
||||
addData(barchart, dataTx, dataRx, datasizeunits);
|
||||
}).fail(function(xhr, textStatus) {
|
||||
if (window.console) {
|
||||
console.error('server error');
|
||||
} else {
|
||||
alert("server error");
|
||||
}
|
||||
});
|
||||
}
|
||||
/**
|
||||
* Add data array to datasets of current chart.
|
||||
*/
|
||||
function addData(chart, dataTx, dataRx, datasizeunits) {
|
||||
chart.data.datasets.push({
|
||||
label: 'Send'+' '+datasizeunits.toUpperCase(),
|
||||
yAxisID: 'y-axis-1',
|
||||
borderColor: 'rgba(75, 192, 192, 1)',
|
||||
backgroundColor: 'rgba(75, 192, 192, 0.2)',
|
||||
data: dataTx
|
||||
});
|
||||
chart.data.datasets.push({
|
||||
label: 'Receive'+' '+datasizeunits.toUpperCase(),
|
||||
yAxisID: 'y-axis-1',
|
||||
borderColor: 'rgba(192, 192, 192, 1)',
|
||||
backgroundColor: 'rgba(192, 192, 192, 0.2)',
|
||||
data: dataRx
|
||||
});
|
||||
chart.update();
|
||||
}
|
||||
$(document).ready(function() {
|
||||
ShowBandwidthChartHandler();
|
||||
});
|
||||
|
||||
})(jQuery, t);
|
||||
|
||||
@@ -1,22 +0,0 @@
|
||||
// Initialize Huebee color picker
|
||||
var elem = document.querySelector('.color-input');
|
||||
var hueb = new Huebee( elem, {
|
||||
notation: 'hex',
|
||||
saturations: 2,
|
||||
customColors: [ '#d8224c', '#dd4814', '#ea0', '#19f', '#333' ],
|
||||
className: 'light-picker',
|
||||
hue0: 210
|
||||
});
|
||||
|
||||
// Set custom color if defined
|
||||
var color = getCookie('color');
|
||||
if (color == null || color == '') {
|
||||
color = '#2b8080';
|
||||
}
|
||||
hueb.setColor(color);
|
||||
|
||||
// Change event
|
||||
hueb.on( 'change', function( color, hue, sat, lum ) {
|
||||
setCookie('color',color,90);
|
||||
})
|
||||
|
||||
@@ -1,88 +0,0 @@
|
||||
// Link quality gauge for ChartJS
|
||||
|
||||
// Support for dark theme
|
||||
theme = getCookie('theme');
|
||||
if (theme == 'lightsout.css') {
|
||||
var borderColor = 'rgba(37, 153, 63, 1)';
|
||||
var labelColor = 'rgba(37, 153, 63, 1)';
|
||||
} else if (theme == 'material-light.php') {
|
||||
var borderColor = '#f2f2fb';
|
||||
var labelColor = '#f2f2fb';
|
||||
} else if (theme == 'material-dark.php') {
|
||||
var borderColor = '#f2f2fb';
|
||||
var labelColor = '#f2f2fb';
|
||||
} else {
|
||||
var borderColor = 'rgba(147, 210, 162, 1)';
|
||||
var labelColor = 'rgba(130, 130, 130, 1)';
|
||||
}
|
||||
|
||||
let data1 = {
|
||||
datasets: [{
|
||||
data: [linkQ, 100-linkQ],
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: borderColor,
|
||||
}],
|
||||
};
|
||||
|
||||
let config = {
|
||||
type: 'doughnut',
|
||||
data: data1,
|
||||
options: {
|
||||
aspectRatio: 2,
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
tooltips: {enabled: false},
|
||||
hover: {mode: null},
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
rotation: (2/3)*Math.PI,//2+(1/3),
|
||||
circumference: (1+(2/3)) * Math.PI, // * Math.PI,
|
||||
cutoutPercentage: 80,
|
||||
animation: {
|
||||
animateScale: false,
|
||||
animateRotate: true
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false
|
||||
}
|
||||
},
|
||||
centerText: {
|
||||
display: true,
|
||||
text: linkQ + "%"
|
||||
},
|
||||
plugins: [{
|
||||
beforeDraw: function(chart) {
|
||||
if (chart.config.centerText.display !== null &&
|
||||
typeof chart.config.centerText.display !== 'undefined' &&
|
||||
chart.config.centerText.display) {
|
||||
drawLinkQ(chart);
|
||||
}
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
||||
function drawLinkQ(chart) {
|
||||
|
||||
let width = chart.chart.width;
|
||||
let height = chart.chart.height;
|
||||
let ctx = chart.chart.ctx;
|
||||
|
||||
ctx.restore();
|
||||
let fontSize = (height / 100).toFixed(2);
|
||||
ctx.font = fontSize + "em sans-serif";
|
||||
ctx.fillStyle = labelColor;
|
||||
ctx.textBaseline = "middle";
|
||||
|
||||
let text = chart.config.centerText.text;
|
||||
let textX = Math.round((width - ctx.measureText(text).width) * 0.5);
|
||||
let textY = height / 2;
|
||||
ctx.fillText(text, textX, textY);
|
||||
ctx.save();
|
||||
}
|
||||
|
||||
window.onload = function() {
|
||||
let ctx = document.getElementById("divChartLinkQ").getContext("2d");
|
||||
var chart = new Chart(ctx, config);
|
||||
};
|
||||
|
||||
@@ -1,189 +0,0 @@
|
||||
function I(i){return document.getElementById(i);}
|
||||
|
||||
const origin=window.location.origin;
|
||||
const host=window.location.host;
|
||||
var SPEEDTEST_SERVERS=[
|
||||
{
|
||||
"name":"RaspAP Speedtest server (US)",
|
||||
"server":"https://speedtest.raspap.com/",
|
||||
"dlURL":"backend/garbage.php",
|
||||
"ulURL":"backend/empty.php",
|
||||
"pingURL":"backend/empty.php",
|
||||
"getIpURL":"backend/getIP.php"
|
||||
},
|
||||
{
|
||||
"name":"RaspAP ("+host+")",
|
||||
"server":origin,
|
||||
"dlURL":"dist/speedtest/backend/garbage.php",
|
||||
"ulURL":"dist/speedtest/backend/empty.php",
|
||||
"pingURL":"dist/speedtest/backend/empty.php",
|
||||
"getIpURL":"dist/speedtest/backend/getIP.php"
|
||||
}
|
||||
];
|
||||
|
||||
//INITIALIZE SPEEDTEST
|
||||
var s=new Speedtest(); //create speedtest object
|
||||
s.setParameter("telemetry_level","basic"); //enable telemetry
|
||||
|
||||
//SERVER AUTO SELECTION
|
||||
function initServers(){
|
||||
var noServersAvailable=function(){
|
||||
I("message").innerHTML="No servers available";
|
||||
}
|
||||
var runServerSelect=function(){
|
||||
s.selectServer(function(server){
|
||||
if(server!=null){ //at least 1 server is available
|
||||
I("loading").className="hidden"; //hide loading message
|
||||
//populate server list for manual selection
|
||||
for(var i=0;i<SPEEDTEST_SERVERS.length;i++){
|
||||
//if(SPEEDTEST_SERVERS[i].pingT==-1) continue;
|
||||
var option=document.createElement("option");
|
||||
option.value=i;
|
||||
option.textContent=SPEEDTEST_SERVERS[i].name;
|
||||
if(SPEEDTEST_SERVERS[i]===server) option.selected=true;
|
||||
I("server").appendChild(option);
|
||||
}
|
||||
//show test UI
|
||||
I("testWrapper").className="visible";
|
||||
initUI();
|
||||
}else{ //no servers are available, the test cannot proceed
|
||||
noServersAvailable();
|
||||
}
|
||||
});
|
||||
}
|
||||
if(typeof SPEEDTEST_SERVERS === "string"){
|
||||
//need to fetch list of servers from specified URL
|
||||
s.loadServerList(SPEEDTEST_SERVERS,function(servers){
|
||||
if(servers==null){ //failed to load server list
|
||||
noServersAvailable();
|
||||
}else{ //server list loaded
|
||||
SPEEDTEST_SERVERS=servers;
|
||||
runServerSelect();
|
||||
}
|
||||
});
|
||||
}else{
|
||||
//hardcoded server list
|
||||
s.addTestPoints(SPEEDTEST_SERVERS);
|
||||
runServerSelect();
|
||||
}
|
||||
}
|
||||
|
||||
var meterBk=/Trident.*rv:(\d+\.\d+)/i.test(navigator.userAgent)?"#EAEAEA":"#80808040";
|
||||
var dlColor="#4BC0C0",
|
||||
ulColor="#616161";
|
||||
var progColor=meterBk;
|
||||
|
||||
//CODE FOR GAUGES
|
||||
function drawMeter(c,amount,bk,fg,progress,prog){
|
||||
var ctx=c.getContext("2d");
|
||||
var dp=window.devicePixelRatio||1;
|
||||
var cw=c.clientWidth*dp, ch=c.clientHeight*dp;
|
||||
var sizScale=ch*0.0055;
|
||||
if(c.width==cw&&c.height==ch){
|
||||
ctx.clearRect(0,0,cw,ch);
|
||||
}else{
|
||||
c.width=cw;
|
||||
c.height=ch;
|
||||
}
|
||||
ctx.beginPath();
|
||||
ctx.strokeStyle=bk;
|
||||
ctx.lineWidth=12*sizScale;
|
||||
ctx.arc(c.width/2,c.height-58*sizScale,c.height/1.8-ctx.lineWidth,-Math.PI*1.1,Math.PI*0.1);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.strokeStyle=fg;
|
||||
ctx.lineWidth=12*sizScale;
|
||||
ctx.arc(c.width/2,c.height-58*sizScale,c.height/1.8-ctx.lineWidth,-Math.PI*1.1,amount*Math.PI*1.2-Math.PI*1.1);
|
||||
ctx.stroke();
|
||||
if(typeof progress !== "undefined"){
|
||||
ctx.fillStyle=prog;
|
||||
ctx.fillRect(c.width*0.3,c.height-16*sizScale,c.width*0.4*progress,4*sizScale);
|
||||
}
|
||||
}
|
||||
function mbpsToAmount(s){
|
||||
return 1-(1/(Math.pow(1.3,Math.sqrt(s))));
|
||||
}
|
||||
function format(d){
|
||||
d=Number(d);
|
||||
if(d<10) return d.toFixed(2);
|
||||
if(d<100) return d.toFixed(1);
|
||||
return d.toFixed(0);
|
||||
}
|
||||
|
||||
//UI CODE
|
||||
var uiData=null;
|
||||
function startStop(){
|
||||
if(s.getState()==3){
|
||||
//speedtest is running, abort
|
||||
s.abort();
|
||||
data=null;
|
||||
I("startStopBtn").className="btn btn-outline btn-primary";
|
||||
I("server").disabled=false;
|
||||
initUI();
|
||||
}else{
|
||||
//test is not running, begin
|
||||
I("startStopBtn").className="btn btn-outline btn-primary running";
|
||||
I("server").disabled=true;
|
||||
s.onupdate=function(data){
|
||||
uiData=data;
|
||||
};
|
||||
s.onend=function(aborted){
|
||||
I("startStopBtn").className="btn btn-outline btn-primary";
|
||||
I("server").disabled=false;
|
||||
updateUI(true);
|
||||
if(!aborted){
|
||||
//if testId is present, show sharing panel, otherwise do nothing
|
||||
try{
|
||||
var testId=uiData.testId;
|
||||
if(testId!=null){
|
||||
var shareURL=window.location.href.substring(0,window.location.href.lastIndexOf("/"))+"/results/?id="+testId;
|
||||
I("resultsImg").src=shareURL;
|
||||
I("resultsURL").value=shareURL;
|
||||
I("testId").innerHTML=testId;
|
||||
I("shareArea").style.display="";
|
||||
}
|
||||
}catch(e){}
|
||||
}
|
||||
};
|
||||
s.start();
|
||||
}
|
||||
}
|
||||
//this function reads the data sent back by the test and updates the UI
|
||||
function updateUI(forced){
|
||||
if(!forced&&s.getState()!=3) return;
|
||||
if(uiData==null) return;
|
||||
var status=uiData.testState;
|
||||
I("ip").textContent=uiData.clientIp;
|
||||
I("dlText").textContent=(status==1&&uiData.dlStatus==0)?"...":format(uiData.dlStatus);
|
||||
drawMeter(I("dlMeter"),mbpsToAmount(Number(uiData.dlStatus*(status==1?oscillate():1))),meterBk,dlColor,Number(uiData.dlProgress),progColor);
|
||||
I("ulText").textContent=(status==3&&uiData.ulStatus==0)?"...":format(uiData.ulStatus);
|
||||
drawMeter(I("ulMeter"),mbpsToAmount(Number(uiData.ulStatus*(status==3?oscillate():1))),meterBk,ulColor,Number(uiData.ulProgress),progColor);
|
||||
I("pingText").textContent=format(uiData.pingStatus);
|
||||
I("jitText").textContent=format(uiData.jitterStatus);
|
||||
}
|
||||
function oscillate(){
|
||||
return 1+0.02*Math.sin(Date.now()/100);
|
||||
}
|
||||
//update the UI every frame
|
||||
window.requestAnimationFrame=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||(function(callback,element){setTimeout(callback,1000/60);});
|
||||
function frame(){
|
||||
requestAnimationFrame(frame);
|
||||
updateUI();
|
||||
}
|
||||
frame(); //start frame loop
|
||||
//function to (re)initialize UI
|
||||
function initUI(){
|
||||
drawMeter(I("dlMeter"),0,meterBk,dlColor,0);
|
||||
drawMeter(I("ulMeter"),0,meterBk,ulColor,0);
|
||||
I("dlText").textContent="";
|
||||
I("ulText").textContent="";
|
||||
I("pingText").textContent="";
|
||||
I("jitText").textContent="";
|
||||
I("ip").textContent="";
|
||||
}
|
||||
// add EventListener to diagnostic tab
|
||||
var e = document.querySelectorAll("a[href^='#diagnostic']");
|
||||
e[0].addEventListener("click", function(){
|
||||
initServers()
|
||||
});
|
||||
|
||||
2
plugins
2
plugins
Submodule plugins updated: a867897ee5...a9bfe51603
Reference in New Issue
Block a user