mirror of
https://github.com/billz/raspap-webgui.git
synced 2025-12-26 23:26:47 +01:00
Merge pull request #1926 from RaspAP/fix/js-vendor-assets
Fix: Re-add js/vendor ignored in .gitignore
This commit is contained in:
Bill Zimmerman
1
.gitignore
vendored
1
.gitignore
vendored
@@ -4,7 +4,6 @@ yarn-error.log
|
||||
*.swp
|
||||
includes/config.php
|
||||
rootCA.pem
|
||||
vendor
|
||||
.env
|
||||
locale/**/*.mo
|
||||
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