mirror of
https://github.com/billz/raspap-webgui.git
synced 2025-12-26 23:26:47 +01:00
Re-add js/vendor ignored in .gitignore
This commit is contained in:
billz
1
.gitignore
vendored
1
.gitignore
vendored
@@ -4,7 +4,6 @@ yarn-error.log
|
|||||||
*.swp
|
*.swp
|
||||||
includes/config.php
|
includes/config.php
|
||||||
rootCA.pem
|
rootCA.pem
|
||||||
vendor
|
|
||||||
.env
|
.env
|
||||||
locale/**/*.mo
|
locale/**/*.mo
|
||||||
app/net_activity
|
app/net_activity
|
||||||
|
|||||||
147
app/js/vendor/bandwidthcharts.js
vendored
Normal file
147
app/js/vendor/bandwidthcharts.js
vendored
Normal file
@@ -0,0 +1,147 @@
|
|||||||
|
(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);
|
||||||
|
|
||||||
106
app/js/vendor/dashboardchart.js
vendored
Normal file
106
app/js/vendor/dashboardchart.js
vendored
Normal file
@@ -0,0 +1,106 @@
|
|||||||
|
(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);
|
||||||
|
|
||||||
22
app/js/vendor/huebee.js
vendored
Normal file
22
app/js/vendor/huebee.js
vendored
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
// 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);
|
||||||
|
})
|
||||||
|
|
||||||
189
app/js/vendor/speedtestUI.js
vendored
Normal file
189
app/js/vendor/speedtestUI.js
vendored
Normal file
@@ -0,0 +1,189 @@
|
|||||||
|
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()
|
||||||
|
});
|
||||||
|
|
||||||
Reference in New Issue
Block a user