frodovdr/raspap-webgui
1
0
Fork 0
mirror of https://github.com/billz/raspap-webgui.git synced 2025-12-26 23:26:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1905 from RaspAP/maint/js-assets-reorg

Browse Source 
Maintenance: Reorg JavaScript assets
This commit is contained in:
Bill Zimmerman
2025-07-17 08:47:20 +02:00
committed by GitHub
parent 83a3057e7f e31ccd09e8
commit ee8d32383b
16 changed files with 593 additions and 1156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -8,3 +8,4 @@ vendor
.env
locale/**/*.mo
app/net_activity
app/js/plugins/

584
app/js/custom.js → app/js/ajax/main.js
View File

@@ -1,21 +1,3 @@
function msgShow(retcode,msg) {
if(retcode == 0) { var alertType = 'success';
} else if(retcode == 2 || retcode == 1) {
var alertType = 'danger';
}
var htmlMsg = '<div class="alert alert-'+alertType+' alert-dismissible" role="alert"><button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>'+msg+'</div>';
return htmlMsg;
}
function createNetmaskAddr(bitCount) {
var mask=[];
for(i=0;i<4;i++) {
var n = Math.min(bitCount, 8);
mask.push(256 - Math.pow(2, 8-n));
bitCount -= n;
}
return mask.join('.');
}
function loadSummary(strInterface) {
var csrfToken = $('meta[name=csrf_token]').attr('content');
@@ -38,94 +20,6 @@ function getAllInterfaces() {
});
}
function setupTabs() {
$('a[data-bs-toggle="tab"]').on('shown.bs.tab',function(e){
var target = $(e.target).attr('href');
if(!target.match('summary')) {
var int = target.replace("#","");
// loadCurrentSettings(int);
}
});
}
$(document).on("click", ".js-add-dhcp-static-lease", function(e) {
e.preventDefault();
var container = $(".js-new-dhcp-static-lease");
var mac = $("input[name=mac]", container).val().trim();
var ip = $("input[name=ip]", container).val().trim();
var comment = $("input[name=comment]", container).val().trim();
if (mac == "" || ip == "") {
return;
}
var row = $("#js-dhcp-static-lease-row").html()
.replace("{{ mac }}", mac)
.replace("{{ ip }}", ip)
.replace("{{ comment }}", comment);
$(".js-dhcp-static-lease-container").append(row);
$("input[name=mac]", container).val("");
$("input[name=ip]", container).val("");
$("input[name=comment]", container).val("");
});
$(document).on("click", ".js-remove-dhcp-static-lease", function(e) {
e.preventDefault();
$(this).parents(".js-dhcp-static-lease-row").remove();
});
$(document).on("submit", ".js-dhcp-settings-form", function(e) {
$(".js-add-dhcp-static-lease").trigger("click");
});
$(document).on("click", ".js-add-dhcp-upstream-server", function(e) {
e.preventDefault();
var field = $("#add-dhcp-upstream-server-field")
var row = $("#dhcp-upstream-server").html().replace("{{ server }}", field.val())
if (field.val().trim() == "") { return }
$(".js-dhcp-upstream-servers").append(row)
field.val("")
});
$(document).on("click", ".js-remove-dhcp-upstream-server", function(e) {
e.preventDefault();
$(this).parents(".js-dhcp-upstream-server").remove();
});
$(document).on("submit", ".js-dhcp-settings-form", function(e) {
$(".js-add-dhcp-upstream-server").trigger("click");
});
/**
* mark a form field, e.g. a select box, with the class `.js-field-preset`
* and give it an attribute `data-field-preset-target` with a text field's
* css selector.
*
* now, if the element marked `.js-field-preset` receives a `change` event,
* its value will be copied to all elements matching the selector in
* data-field-preset-target.
*/
$(document).on("change", ".js-field-preset", function(e) {
var selector = this.getAttribute("data-field-preset-target")
var value = "" + this.value
var syncValue = function(el) { el.value = value }
if (value.trim() === "") { return }
document.querySelectorAll(selector).forEach(syncValue)
});
$(document).on("click", "#gen_wpa_passphrase", function(e) {
$('#txtwpapassphrase').val(genPassword(63));
});
$(document).on("click", "#gen_apikey", function(e) {
$('#txtapikey').val(genPassword(32).toLowerCase());
});
$(document).on("click", "#js-clearhostapd-log", function(e) {
var csrfToken = $('meta[name=csrf_token]').attr('content');
$.post('ajax/logging/clearlog.php?',{'logfile':'/tmp/hostapd.log', 'csrf_token': csrfToken},function(data){
@@ -150,54 +44,6 @@ $(document).on("click", "#js-clearopenvpn-log", function(e) {
});
});
// Enable Bootstrap tooltips
$(function () {
$('[data-bs-toggle="tooltip"]').tooltip()
})
function genPassword(pwdLen) {
var pwdChars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
var rndPass = Array(pwdLen).fill(pwdChars).map(function(x) { return x[Math.floor(Math.random() * x.length)] }).join('');
return rndPass;
}
function setupBtns() {
$('#btnSummaryRefresh').click(function(){getAllInterfaces();});
$('.intsave').click(function(){
var int = $(this).data('int');
saveNetworkSettings(int);
});
$('.intapply').click(function(){
applyNetworkSettings();
});
}
function setCSRFTokenHeader(event, xhr, settings) {
var csrfToken = $('meta[name=csrf_token]').attr('content');
if (/^(POST|PATCH|PUT|DELETE)$/i.test(settings.type)) {
xhr.setRequestHeader("X-CSRF-Token", csrfToken);
}
}
function contentLoaded() {
pageCurrent = window.location.href.split("/").pop();
switch(pageCurrent) {
case "network_conf":
getAllInterfaces();
setupTabs();
setupBtns();
break;
case "hostapd_conf":
getChannel();
setHardwareModeTooltip();
break;
case "dhcpd_conf":
loadInterfaceDHCPSelect();
break;
}
}
function loadWifiStations(refresh) {
return function() {
var complete = function() { $(this).removeClass('loading-spinner'); }
@@ -257,26 +103,6 @@ function loadInterfaceDHCPSelect() {
});
}
function setDHCPToggles(state) {
if ($('#chkfallback').is(':checked') && state) {
$('#chkfallback').prop('checked', state);
}
if ($('#dhcp-iface').is(':checked') && !state) {
$('#dhcp-iface').prop('checked', state);
setDhcpFieldsDisabled();
}
$('#chkfallback').prop('disabled', state);
$('#dhcp-iface').prop('disabled', !state);
}
$('#chkfallback').change(function() {
if ($('#chkfallback').is(':checked')) {
setStaticFieldsEnabled();
} else {
setStaticFieldsDisabled();
}
});
$('#debugModal').on('shown.bs.modal', function (e) {
var csrfToken = $('meta[name=csrf_token]').attr('content');
$.post('ajax/system/sys_debug.php',{'csrf_token': csrfToken},function(data){
@@ -327,10 +153,6 @@ $('#performUpdate').on('submit', function(event) {
$('#performupdateModal').modal('show');
});
$('#performupdateModal').on('shown.bs.modal', function (e) {
fetchUpdateResponse();
});
function fetchUpdateResponse() {
const complete = 6;
const error = 7;
@@ -372,22 +194,6 @@ function fetchUpdateResponse() {
});
}
$('#hostapdModal').on('shown.bs.modal', function (e) {
var seconds = 3;
var pct = 0;
var countDown = setInterval(function(){
if(seconds <= 0){
clearInterval(countDown);
}
document.getElementsByClassName('progress-bar').item(0).setAttribute('style','width:'+Number(pct)+'%');
seconds --;
pct = Math.floor(100-(seconds*100/4));
}, 500);
});
$('#configureClientModal').on('shown.bs.modal', function (e) {
});
$('#ovpn-confirm-delete').on('click', '.btn-delete', function (e) {
var cfg_id = $(this).data('recordId');
var csrfToken = $('meta[name=csrf_token]').attr('content');
@@ -418,21 +224,6 @@ $('#ovpn-confirm-activate').on('click', '.btn-activate', function (e) {
});
});
$('#ovpn-confirm-activate').on('shown.bs.modal', function (e) {
var data = $(e.relatedTarget).data();
$('.btn-activate', this).data('recordId', data.recordId);
});
$('#ovpn-userpw,#ovpn-certs').on('click', function (e) {
if (this.id == 'ovpn-userpw') {
$('#PanelCerts').hide();
$('#PanelUserPW').show();
} else if (this.id == 'ovpn-certs') {
$('#PanelUserPW').hide();
$('#PanelCerts').show();
}
});
$('#js-system-reset-confirm').on('click', function (e) {
var progressText = $('#js-system-reset-confirm').attr('data-message');
var successHtml = $('#system-reset-message').attr('data-message');
@@ -463,49 +254,6 @@ $('#js-sys-reboot, #js-sys-shutdown').on('click', function (e) {
});
});
$('#install-user-plugin').on('shown.bs.modal', function (e) {
var button = $(e.relatedTarget);
$(this).data('button', button);
var manifestData = button.data('plugin-manifest');
var installed = button.data('plugin-installed') || false;
var repoPublic = button.data('repo-public') || false;
var installPath = manifestData.install_path;
if (!installed && repoPublic && installPath === 'plugins-available') {
insidersHTML = 'Available with <i class="fas fa-heart heart me-1"></i><a href="https://docs.raspap.com/insiders" target="_blank" rel="noopener">Insiders</a>';
$('#plugin-additional').html(insidersHTML);
} else {
$('#plugin-additional').empty();
}
if (manifestData) {
$('#plugin-docs').html(manifestData.plugin_docs
? `<a href="${manifestData.plugin_docs}" target="_blank">${manifestData.plugin_docs}</a>`
: 'Unknown');
$('#plugin-icon').attr('class', `${manifestData.icon || 'fas fa-plug'} link-secondary h5 me-2`);
$('#plugin-name').text(manifestData.name || 'Unknown');
$('#plugin-version').text(manifestData.version || 'Unknown');
$('#plugin-description').text(manifestData.description || 'No description provided');
$('#plugin-author').html(manifestData.author
? manifestData.author + (manifestData.author_uri
? ` (<a href="${manifestData.author_uri}" target="_blank">profile</a>)` : '') : 'Unknown');
$('#plugin-license').text(manifestData.license || 'Unknown');
$('#plugin-locale').text(manifestData.default_locale || 'Unknown');
$('#plugin-configuration').html(formatProperty(manifestData.configuration || 'None'));
$('#plugin-packages').html(formatProperty(manifestData.keys || 'None'));
$('#plugin-dependencies').html(formatProperty(manifestData.dependencies || 'None'));
$('#plugin-javascript').html(formatProperty(manifestData.javascript || 'None'));
$('#plugin-sudoers').html(formatProperty(manifestData.sudoers || 'None'));
$('#plugin-user-name').html((manifestData.user_nonprivileged && manifestData.user_nonprivileged.name) || 'None');
}
if (installed) {
$('#js-install-plugin-confirm').html('OK');
} else if (!installed && repoPublic && installPath == 'plugins-available') {
$('#js-install-plugin-confirm').html('Get Insiders');
} else {
$('#js-install-plugin-confirm').html('Install now');
}
});
$('#js-install-plugin-confirm').on('click', function (e) {
var button = $('#install-user-plugin').data('button');
var manifestData = button.data('plugin-manifest');
@@ -572,75 +320,7 @@ $('#js-install-plugin-confirm').on('click', function (e) {
}
});
$('#js-install-plugin-ok').on('click', function (e) {
$("#install-plugin-progress").modal('hide');
window.location.reload();
});
function formatProperty(prop) {
if (Array.isArray(prop)) {
if (typeof prop[0] === 'object') {
return prop.map(item => {
return Object.entries(item)
.map(([key, value]) => `${key}: ${value}`)
.join('<br/>');
}).join('<br/>');
}
return prop.map(line => `${line}<br/>`).join('');
}
if (typeof prop === 'object') {
return Object.entries(prop)
.map(([key, value]) => `${key}: ${value}`)
.join('<br/>');
}
return prop || 'None';
}
$(document).ready(function(){
$("#PanelManual").hide();
$('.ip_address').mask('0ZZ.0ZZ.0ZZ.0ZZ', {
translation: {
'Z': {
pattern: /[0-9]/, optional: true
}
},
placeholder: "___.___.___.___"
});
$('.mac_address').mask('FF:FF:FF:FF:FF:FF', {
translation: {
'F': {
pattern: /[0-9a-fA-F]/, optional: false
}
},
placeholder: "__:__:__:__:__:__"
});
});
$(document).ready(function() {
$('.cidr').mask('099.099.099.099/099', {
translation: {
'0': { pattern: /[0-9]/ }
},
placeholder: "___.___.___.___/___"
});
});
$('#wg-upload,#wg-manual').on('click', function (e) {
if (this.id == 'wg-upload') {
$('#PanelManual').hide();
$('#PanelUpload').show();
} else if (this.id == 'wg-manual') {
$('#PanelUpload').hide();
$('#PanelManual').show();
}
});
$(".custom-file-input").on("change", function() {
var fileName = $(this).val().split("\\").pop();
$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
// Retrieves the 'channel' value specified in hostapd.conf
// Retrieves the 'channel' value specified in hostapd.conf
function getChannel() {
$.get('ajax/networking/get_channel.php',function(data){
jsonData = JSON.parse(data);
@@ -827,22 +507,6 @@ $('.wg-client-dl').click(function(){
req.send();
})
// Event listener for Bootstrap's form validation
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
let sessionCheckInterval = setInterval(checkSession, 5000);
function checkSession() {
@@ -861,249 +525,3 @@ function checkSession() {
});
}
function showSessionExpiredModal() {
$('#sessionTimeoutModal').modal('show');
}
$(document).on("click", "#js-session-expired-login", function(e) {
const loginModal = $('#modal-admin-login');
const redirectUrl = window.location.pathname;
window.location.href = `/login?action=${encodeURIComponent(redirectUrl)}`;
});
// show modal login on page load
$(document).ready(function () {
const params = new URLSearchParams(window.location.search);
const redirectUrl = $('#redirect-url').val() || params.get('action') || '/';
$('#modal-admin-login').modal('show');
$('#redirect-url').val(redirectUrl);
$('#username').focus();
$('#username').addClass("focusedInput");
});
// DHCP or Static IP option group
$('#chkstatic').on('change', function() {
if (this.checked) {
setStaticFieldsEnabled();
}
});
$('#chkdhcp').on('change', function() {
this.checked ? setStaticFieldsDisabled() : null;
});
$('input[name="dhcp-iface"]').change(function() {
if ($('input[name="dhcp-iface"]:checked').val() == '1') {
setDhcpFieldsEnabled();
} else {
setDhcpFieldsDisabled();
}
});
function setStaticFieldsEnabled() {
$('#txtipaddress').prop('required', true);
$('#txtsubnetmask').prop('required', true);
$('#txtgateway').prop('required', true);
$('#txtipaddress').removeAttr('disabled');
$('#txtsubnetmask').removeAttr('disabled');
$('#txtgateway').removeAttr('disabled');
}
function setStaticFieldsDisabled() {
$('#txtipaddress').prop('disabled', true);
$('#txtsubnetmask').prop('disabled', true);
$('#txtgateway').prop('disabled', true);
$('#txtipaddress').removeAttr('required');
$('#txtsubnetmask').removeAttr('required');
$('#txtgateway').removeAttr('required');
}
function setDhcpFieldsEnabled() {
$('#txtrangestart').prop('required', true);
$('#txtrangeend').prop('required', true);
$('#txtrangeleasetime').prop('required', true);
$('#cbxrangeleasetimeunits').prop('required', true);
$('#txtrangestart').removeAttr('disabled');
$('#txtrangeend').removeAttr('disabled');
$('#txtrangeleasetime').removeAttr('disabled');
$('#cbxrangeleasetimeunits').removeAttr('disabled');
$('#txtdns1').removeAttr('disabled');
$('#txtdns2').removeAttr('disabled');
$('#txtmetric').removeAttr('disabled');
}
function setDhcpFieldsDisabled() {
$('#txtrangestart').removeAttr('required');
$('#txtrangeend').removeAttr('required');
$('#txtrangeleasetime').removeAttr('required');
$('#cbxrangeleasetimeunits').removeAttr('required');
$('#txtrangestart').prop('disabled', true);
$('#txtrangeend').prop('disabled', true);
$('#txtrangeleasetime').prop('disabled', true);
$('#cbxrangeleasetimeunits').prop('disabled', true);
$('#txtdns1').prop('disabled', true);
$('#txtdns2').prop('disabled', true);
$('#txtmetric').prop('disabled', true);
}
// Static Array method
Array.range = (start, end) => Array.from({length: (end - start)}, (v, k) => k + start);
$(document).on("click", ".js-toggle-password", function(e) {
var button = $(e.currentTarget);
var field = $(button.data("bsTarget"));
if (field.is(":input")) {
e.preventDefault();
if (!button.data("__toggle-with-initial")) {
$("i", button).removeClass("fas fa-eye").addClass(button.attr("data-toggle-with"));
}
if (field.attr("type") === "password") {
field.attr("type", "text");
} else {
$("i", button).removeClass("fas fa-eye-slash").addClass("fas fa-eye");
field.attr("type", "password");
}
}
});
$(function() {
$('#theme-select').change(function() {
var theme = themes[$( "#theme-select" ).val() ];
var hasDarkTheme = theme === 'custom.php';
var nightModeChecked = $("#night-mode").prop("checked");
if (nightModeChecked && hasDarkTheme) {
if (theme === "custom.php") {
set_theme("dark.css");
}
} else {
set_theme(theme);
}
});
});
function set_theme(theme) {
$('link[title="main"]').attr('href', 'app/css/' + theme);
// persist selected theme in cookie
setCookie('theme',theme,90);
}
$(function() {
var currentTheme = getCookie('theme');
// Check if the current theme is a dark theme
var isDarkTheme = currentTheme === 'dark.css';
$('#night-mode').prop('checked', isDarkTheme);
$('#night-mode').change(function() {
var state = $(this).is(':checked');
var currentTheme = getCookie('theme');
if (state == true) {
if (currentTheme == 'custom.php') {
set_theme('dark.css');
}
} else {
if (currentTheme == 'dark.css') {
set_theme('custom.php');
}
}
});
});
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var regx = new RegExp(cname + "=([^;]+)");
var value = regx.exec(document.cookie);
return (value != null) ? unescape(value[1]) : null;
}
// Define themes
var themes = {
"default": "custom.php",
"hackernews" : "hackernews.css"
}
// Adds active class to current nav-item
$(window).bind("load", function() {
var url = window.location;
$('.sb-nav-link-icon a').filter(function() {
return this.href == url;
}).parent().addClass('active');
});
// Sets focus on a specified tab
document.addEventListener("DOMContentLoaded", function () {
const params = new URLSearchParams(window.location.search);
const targetTab = params.get("tab");
if (targetTab) {
let tabElement = document.querySelector(`[data-bs-toggle="tab"][href="#${targetTab}"]`);
if (tabElement) {
let tab = new bootstrap.Tab(tabElement);
tab.show();
}
}
});
function disableValidation(form) {
form.removeAttribute("novalidate");
form.classList.remove("needs-validation");
form.querySelectorAll("[required]").forEach(function (field) {
field.removeAttribute("required");
});
}
function updateActivityLED() {
const threshold_bytes = 300;
fetch('/app/net_activity')
.then(res => res.text())
.then(data => {
const activity = parseInt(data.trim());
const leds = document.querySelectorAll('.hostapd-led');
if (!isNaN(activity)) {
leds.forEach(led => {
if (activity > threshold_bytes) {
led.classList.add('led-pulse');
setTimeout(() => {
led.classList.remove('led-pulse');
}, 50);
} else {
led.classList.remove('led-pulse');
}
});
}
})
.catch(() => { /* ignore fetch errors */ });
}
setInterval(updateActivityLED, 100);
$(document).ready(function() {
const $htmlElement = $('html');
const $modeswitch = $('#night-mode');
$modeswitch.on('change', function() {
const isChecked = $(this).is(':checked');
const newTheme = isChecked ? 'dark' : 'light';
$htmlElement.attr('data-bs-theme', newTheme);
localStorage.setItem('bsTheme', newTheme);
});
});
$(document)
.ajaxSend(setCSRFTokenHeader)
.ready(contentLoaded)
.ready(loadWifiStations());

147
app/js/bandwidthcharts.js
View File

@@ -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
View File

@@ -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
View File

@@ -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">&times;</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">&times;</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());

106
app/js/dashboardchart.js
View File

@@ -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);

22
app/js/huebee.js
View File

@@ -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);
})

88
app/js/linkquality.js
View File

@@ -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);
};

189
app/js/speedtestUI.js
View File

@@ -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()
});

583
app/js/ui/main.js Normal file
View File

@@ -0,0 +1,583 @@
function msgShow(retcode,msg) {
if(retcode == 0) { var alertType = 'success';
} else if(retcode == 2 || retcode == 1) {
var alertType = 'danger';
}
var htmlMsg = '<div class="alert alert-'+alertType+' alert-dismissible" role="alert"><button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>'+msg+'</div>';
return htmlMsg;
}
function createNetmaskAddr(bitCount) {
var mask=[];
for(i=0;i<4;i++) {
var n = Math.min(bitCount, 8);
mask.push(256 - Math.pow(2, 8-n));
bitCount -= n;
}
return mask.join('.');
}
function setupTabs() {
$('a[data-bs-toggle="tab"]').on('shown.bs.tab',function(e){
var target = $(e.target).attr('href');
if(!target.match('summary')) {
var int = target.replace("#","");
}
});
}
$(document).on("click", ".js-add-dhcp-static-lease", function(e) {
e.preventDefault();
var container = $(".js-new-dhcp-static-lease");
var mac = $("input[name=mac]", container).val().trim();
var ip = $("input[name=ip]", container).val().trim();
var comment = $("input[name=comment]", container).val().trim();
if (mac == "" || ip == "") {
return;
}
var row = $("#js-dhcp-static-lease-row").html()
.replace("{{ mac }}", mac)
.replace("{{ ip }}", ip)
.replace("{{ comment }}", comment);
$(".js-dhcp-static-lease-container").append(row);
$("input[name=mac]", container).val("");
$("input[name=ip]", container).val("");
$("input[name=comment]", container).val("");
});
$(document).on("click", ".js-remove-dhcp-static-lease", function(e) {
e.preventDefault();
$(this).parents(".js-dhcp-static-lease-row").remove();
});
$(document).on("submit", ".js-dhcp-settings-form", function(e) {
$(".js-add-dhcp-static-lease").trigger("click");
});
$(document).on("click", ".js-add-dhcp-upstream-server", function(e) {
e.preventDefault();
var field = $("#add-dhcp-upstream-server-field")
var row = $("#dhcp-upstream-server").html().replace("{{ server }}", field.val())
if (field.val().trim() == "") { return }
$(".js-dhcp-upstream-servers").append(row)
field.val("")
});
$(document).on("click", ".js-remove-dhcp-upstream-server", function(e) {
e.preventDefault();
$(this).parents(".js-dhcp-upstream-server").remove();
});
$(document).on("submit", ".js-dhcp-settings-form", function(e) {
$(".js-add-dhcp-upstream-server").trigger("click");
});
/**
* mark a form field, e.g. a select box, with the class `.js-field-preset`
* and give it an attribute `data-field-preset-target` with a text field's
* css selector.
*
* now, if the element marked `.js-field-preset` receives a `change` event,
* its value will be copied to all elements matching the selector in
* data-field-preset-target.
*/
$(document).on("change", ".js-field-preset", function(e) {
var selector = this.getAttribute("data-field-preset-target")
var value = "" + this.value
var syncValue = function(el) { el.value = value }
if (value.trim() === "") { return }
document.querySelectorAll(selector).forEach(syncValue)
});
$(document).on("click", "#gen_wpa_passphrase", function(e) {
$('#txtwpapassphrase').val(genPassword(63));
});
$(document).on("click", "#gen_apikey", function(e) {
$('#txtapikey').val(genPassword(32).toLowerCase());
});
// Enable Bootstrap tooltips
$(function () {
$('[data-bs-toggle="tooltip"]').tooltip()
})
function genPassword(pwdLen) {
var pwdChars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
var rndPass = Array(pwdLen).fill(pwdChars).map(function(x) { return x[Math.floor(Math.random() * x.length)] }).join('');
return rndPass;
}
function setupBtns() {
$('#btnSummaryRefresh').click(function(){getAllInterfaces();});
$('.intsave').click(function(){
var int = $(this).data('int');
saveNetworkSettings(int);
});
$('.intapply').click(function(){
applyNetworkSettings();
});
}
function setCSRFTokenHeader(event, xhr, settings) {
var csrfToken = $('meta[name=csrf_token]').attr('content');
if (/^(POST|PATCH|PUT|DELETE)$/i.test(settings.type)) {
xhr.setRequestHeader("X-CSRF-Token", csrfToken);
}
}
function contentLoaded() {
pageCurrent = window.location.href.split("/").pop();
switch(pageCurrent) {
case "network_conf":
getAllInterfaces();
setupTabs();
setupBtns();
break;
case "hostapd_conf":
getChannel();
setHardwareModeTooltip();
break;
case "dhcpd_conf":
loadInterfaceDHCPSelect();
break;
}
}
function setDHCPToggles(state) {
if ($('#chkfallback').is(':checked') && state) {
$('#chkfallback').prop('checked', state);
}
if ($('#dhcp-iface').is(':checked') && !state) {
$('#dhcp-iface').prop('checked', state);
setDhcpFieldsDisabled();
}
$('#chkfallback').prop('disabled', state);
$('#dhcp-iface').prop('disabled', !state);
}
$('#chkfallback').change(function() {
if ($('#chkfallback').is(':checked')) {
setStaticFieldsEnabled();
} else {
setStaticFieldsDisabled();
}
});
$('#performupdateModal').on('shown.bs.modal', function (e) {
fetchUpdateResponse();
});
$('#hostapdModal').on('shown.bs.modal', function (e) {
var seconds = 3;
var pct = 0;
var countDown = setInterval(function(){
if(seconds <= 0){
clearInterval(countDown);
}
document.getElementsByClassName('progress-bar').item(0).setAttribute('style','width:'+Number(pct)+'%');
seconds --;
pct = Math.floor(100-(seconds*100/4));
}, 500);
});
$('#configureClientModal').on('shown.bs.modal', function (e) {
});
$('#ovpn-confirm-activate').on('shown.bs.modal', function (e) {
var data = $(e.relatedTarget).data();
$('.btn-activate', this).data('recordId', data.recordId);
});
$('#ovpn-userpw,#ovpn-certs').on('click', function (e) {
if (this.id == 'ovpn-userpw') {
$('#PanelCerts').hide();
$('#PanelUserPW').show();
} else if (this.id == 'ovpn-certs') {
$('#PanelUserPW').hide();
$('#PanelCerts').show();
}
});
$('#install-user-plugin').on('shown.bs.modal', function (e) {
var button = $(e.relatedTarget);
$(this).data('button', button);
var manifestData = button.data('plugin-manifest');
var installed = button.data('plugin-installed') || false;
var repoPublic = button.data('repo-public') || false;
var installPath = manifestData.install_path;
if (!installed && repoPublic && installPath === 'plugins-available') {
insidersHTML = 'Available with <i class="fas fa-heart heart me-1"></i><a href="https://docs.raspap.com/insiders" target="_blank" rel="noopener">Insiders</a>';
$('#plugin-additional').html(insidersHTML);
} else {
$('#plugin-additional').empty();
}
if (manifestData) {
$('#plugin-docs').html(manifestData.plugin_docs
? `<a href="${manifestData.plugin_docs}" target="_blank">${manifestData.plugin_docs}</a>`
: 'Unknown');
$('#plugin-icon').attr('class', `${manifestData.icon || 'fas fa-plug'} link-secondary h5 me-2`);
$('#plugin-name').text(manifestData.name || 'Unknown');
$('#plugin-version').text(manifestData.version || 'Unknown');
$('#plugin-description').text(manifestData.description || 'No description provided');
$('#plugin-author').html(manifestData.author
? manifestData.author + (manifestData.author_uri
? ` (<a href="${manifestData.author_uri}" target="_blank">profile</a>)` : '') : 'Unknown');
$('#plugin-license').text(manifestData.license || 'Unknown');
$('#plugin-locale').text(manifestData.default_locale || 'Unknown');
$('#plugin-configuration').html(formatProperty(manifestData.configuration || 'None'));
$('#plugin-packages').html(formatProperty(manifestData.keys || 'None'));
$('#plugin-dependencies').html(formatProperty(manifestData.dependencies || 'None'));
$('#plugin-javascript').html(formatProperty(manifestData.javascript || 'None'));
$('#plugin-sudoers').html(formatProperty(manifestData.sudoers || 'None'));
$('#plugin-user-name').html((manifestData.user_nonprivileged && manifestData.user_nonprivileged.name) || 'None');
}
if (installed) {
$('#js-install-plugin-confirm').html('OK');
} else if (!installed && repoPublic && installPath == 'plugins-available') {
$('#js-install-plugin-confirm').html('Get Insiders');
} else {
$('#js-install-plugin-confirm').html('Install now');
}
});
$('#js-install-plugin-ok').on('click', function (e) {
$("#install-plugin-progress").modal('hide');
window.location.reload();
});
function formatProperty(prop) {
if (Array.isArray(prop)) {
if (typeof prop[0] === 'object') {
return prop.map(item => {
return Object.entries(item)
.map(([key, value]) => `${key}: ${value}`)
.join('<br/>');
}).join('<br/>');
}
return prop.map(line => `${line}<br/>`).join('');
}
if (typeof prop === 'object') {
return Object.entries(prop)
.map(([key, value]) => `${key}: ${value}`)
.join('<br/>');
}
return prop || 'None';
}
$(document).ready(function(){
$("#PanelManual").hide();
$('.ip_address').mask('0ZZ.0ZZ.0ZZ.0ZZ', {
translation: {
'Z': {
pattern: /[0-9]/, optional: true
}
},
placeholder: "___.___.___.___"
});
$('.mac_address').mask('FF:FF:FF:FF:FF:FF', {
translation: {
'F': {
pattern: /[0-9a-fA-F]/, optional: false
}
},
placeholder: "__:__:__:__:__:__"
});
});
$(document).ready(function() {
$('.cidr').mask('099.099.099.099/099', {
translation: {
'0': { pattern: /[0-9]/ }
},
placeholder: "___.___.___.___/___"
});
});
$('#wg-upload,#wg-manual').on('click', function (e) {
if (this.id == 'wg-upload') {
$('#PanelManual').hide();
$('#PanelUpload').show();
} else if (this.id == 'wg-manual') {
$('#PanelUpload').hide();
$('#PanelManual').show();
}
});
$(".custom-file-input").on("change", function() {
var fileName = $(this).val().split("\\").pop();
$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
// Event listener for Bootstrap's form validation
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
function showSessionExpiredModal() {
$('#sessionTimeoutModal').modal('show');
}
$(document).on("click", "#js-session-expired-login", function(e) {
const loginModal = $('#modal-admin-login');
const redirectUrl = window.location.pathname;
window.location.href = `/login?action=${encodeURIComponent(redirectUrl)}`;
});
// show modal login on page load
$(document).ready(function () {
const params = new URLSearchParams(window.location.search);
const redirectUrl = $('#redirect-url').val() || params.get('action') || '/';
$('#modal-admin-login').modal('show');
$('#redirect-url').val(redirectUrl);
$('#username').focus();
$('#username').addClass("focusedInput");
});
// DHCP or Static IP option group
$('#chkstatic').on('change', function() {
if (this.checked) {
setStaticFieldsEnabled();
}
});
$('#chkdhcp').on('change', function() {
this.checked ? setStaticFieldsDisabled() : null;
});
$('input[name="dhcp-iface"]').change(function() {
if ($('input[name="dhcp-iface"]:checked').val() == '1') {
setDhcpFieldsEnabled();
} else {
setDhcpFieldsDisabled();
}
});
function setStaticFieldsEnabled() {
$('#txtipaddress').prop('required', true);
$('#txtsubnetmask').prop('required', true);
$('#txtgateway').prop('required', true);
$('#txtipaddress').removeAttr('disabled');
$('#txtsubnetmask').removeAttr('disabled');
$('#txtgateway').removeAttr('disabled');
}
function setStaticFieldsDisabled() {
$('#txtipaddress').prop('disabled', true);
$('#txtsubnetmask').prop('disabled', true);
$('#txtgateway').prop('disabled', true);
$('#txtipaddress').removeAttr('required');
$('#txtsubnetmask').removeAttr('required');
$('#txtgateway').removeAttr('required');
}
function setDhcpFieldsEnabled() {
$('#txtrangestart').prop('required', true);
$('#txtrangeend').prop('required', true);
$('#txtrangeleasetime').prop('required', true);
$('#cbxrangeleasetimeunits').prop('required', true);
$('#txtrangestart').removeAttr('disabled');
$('#txtrangeend').removeAttr('disabled');
$('#txtrangeleasetime').removeAttr('disabled');
$('#cbxrangeleasetimeunits').removeAttr('disabled');
$('#txtdns1').removeAttr('disabled');
$('#txtdns2').removeAttr('disabled');
$('#txtmetric').removeAttr('disabled');
}
function setDhcpFieldsDisabled() {
$('#txtrangestart').removeAttr('required');
$('#txtrangeend').removeAttr('required');
$('#txtrangeleasetime').removeAttr('required');
$('#cbxrangeleasetimeunits').removeAttr('required');
$('#txtrangestart').prop('disabled', true);
$('#txtrangeend').prop('disabled', true);
$('#txtrangeleasetime').prop('disabled', true);
$('#cbxrangeleasetimeunits').prop('disabled', true);
$('#txtdns1').prop('disabled', true);
$('#txtdns2').prop('disabled', true);
$('#txtmetric').prop('disabled', true);
}
// Static Array method
Array.range = (start, end) => Array.from({length: (end - start)}, (v, k) => k + start);
$(document).on("click", ".js-toggle-password", function(e) {
var button = $(e.currentTarget);
var field = $(button.data("bsTarget"));
if (field.is(":input")) {
e.preventDefault();
if (!button.data("__toggle-with-initial")) {
$("i", button).removeClass("fas fa-eye").addClass(button.attr("data-toggle-with"));
}
if (field.attr("type") === "password") {
field.attr("type", "text");
} else {
$("i", button).removeClass("fas fa-eye-slash").addClass("fas fa-eye");
field.attr("type", "password");
}
}
});
$(function() {
$('#theme-select').change(function() {
var theme = themes[$( "#theme-select" ).val() ];
var hasDarkTheme = theme === 'custom.php';
var nightModeChecked = $("#night-mode").prop("checked");
if (nightModeChecked && hasDarkTheme) {
if (theme === "custom.php") {
set_theme("dark.css");
}
} else {
set_theme(theme);
}
});
});
function set_theme(theme) {
$('link[title="main"]').attr('href', 'app/css/' + theme);
// persist selected theme in cookie
setCookie('theme',theme,90);
}
$(function() {
var currentTheme = getCookie('theme');
// Check if the current theme is a dark theme
var isDarkTheme = currentTheme === 'dark.css';
$('#night-mode').prop('checked', isDarkTheme);
$('#night-mode').change(function() {
var state = $(this).is(':checked');
var currentTheme = getCookie('theme');
if (state == true) {
if (currentTheme == 'custom.php') {
set_theme('dark.css');
}
} else {
if (currentTheme == 'dark.css') {
set_theme('custom.php');
}
}
});
});
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var regx = new RegExp(cname + "=([^;]+)");
var value = regx.exec(document.cookie);
return (value != null) ? unescape(value[1]) : null;
}
// Define themes
var themes = {
"default": "custom.php",
"hackernews" : "hackernews.css"
}
// Adds active class to current nav-item
$(window).bind("load", function() {
var url = window.location;
$('.sb-nav-link-icon a').filter(function() {
return this.href == url;
}).parent().addClass('active');
});
// Sets focus on a specified tab
document.addEventListener("DOMContentLoaded", function () {
const params = new URLSearchParams(window.location.search);
const targetTab = params.get("tab");
if (targetTab) {
let tabElement = document.querySelector(`[data-bs-toggle="tab"][href="#${targetTab}"]`);
if (tabElement) {
let tab = new bootstrap.Tab(tabElement);
tab.show();
}
}
});
function disableValidation(form) {
form.removeAttribute("novalidate");
form.classList.remove("needs-validation");
form.querySelectorAll("[required]").forEach(function (field) {
field.removeAttribute("required");
});
}
function updateActivityLED() {
const threshold_bytes = 300;
fetch('/app/net_activity')
.then(res => res.text())
.then(data => {
const activity = parseInt(data.trim());
const leds = document.querySelectorAll('.hostapd-led');
if (!isNaN(activity)) {
leds.forEach(led => {
if (activity > threshold_bytes) {
led.classList.add('led-pulse');
setTimeout(() => {
led.classList.remove('led-pulse');
}, 50);
} else {
led.classList.remove('led-pulse');
}
});
}
})
.catch(() => { /* ignore fetch errors */ });
}
setInterval(updateActivityLED, 100);
$(document).ready(function() {
const $htmlElement = $('html');
const $modeswitch = $('#night-mode');
$modeswitch.on('change', function() {
const isChecked = $(this).is(':checked');
const newTheme = isChecked ? 'dark' : 'light';
$htmlElement.attr('data-bs-theme', newTheme);
localStorage.setItem('bsTheme', newTheme);
});
});
$(document)
.ajaxSend(setCSRFTokenHeader)
.ready(contentLoaded)
.ready(loadWifiStations());

2
includes/dashboard.php
View File

@@ -123,7 +123,7 @@ function DisplayDashboard(&$extraFooterScripts): void
"status"
)
);
$extraFooterScripts[] = array('src'=>'app/js/dashboardchart.js', 'defer'=>false);
$extraFooterScripts[] = array('src'=>'app/js/vendor/dashboardchart.js', 'defer'=>false);
}
/**

2
includes/data_usage.php
View File

@@ -9,5 +9,5 @@ function DisplayDataUsage(&$extraFooterScripts)
echo renderTemplate("data_usage", [ "interfaces" => $interfacesWlo ]);
$extraFooterScripts[] = array('src'=>'dist/datatables/jquery.dataTables.min.js', 'defer'=>false);
$extraFooterScripts[] = array('src'=>'app/js/bandwidthcharts.js', 'defer'=>false);
$extraFooterScripts[] = array('src'=>'app/js/vendor/bandwidthcharts.js', 'defer'=>false);
}

2
includes/networking.php
View File

@@ -23,5 +23,5 @@ function DisplayNetworkingConfig(&$extraFooterScripts)
"routeInfoRaw",
"bridgedEnabled")
);
$extraFooterScripts[] = array('src'=>'app/js/speedtestUI.js', 'defer'=>false);
$extraFooterScripts[] = array('src'=>'app/js/vendor/speedtestUI.js', 'defer'=>false);
}

2
includes/system.php
View File

@@ -122,7 +122,7 @@ function DisplaySystem(&$extraFooterScripts)
];
$selectedTheme = array_search($_COOKIE['theme'], $themeFiles);
$extraFooterScripts[] = array('src'=>'dist/huebee/huebee.pkgd.min.js', 'defer'=>false);
$extraFooterScripts[] = array('src'=>'app/js/huebee.js', 'defer'=>false);
$extraFooterScripts[] = array('src'=>'app/js/vendor/huebee.js', 'defer'=>false);
$logLimit = isset($_SESSION['log_limit']) ? $_SESSION['log_limit'] : RASPI_LOG_SIZE_LIMIT;
$plugins = $pluginInstaller->getUserPlugins();

5
index.php
View File

@@ -147,8 +147,9 @@ initializeApp();
<!-- Librespeed JavaScript -->
<script src="dist/speedtest/speedtest.js?v=<?= filemtime('dist/speedtest/speedtest.js'); ?>"></script>
<!-- Custom RaspAP JS -->
<script src="app/js/custom.js?v=<?= filemtime('app/js/custom.js'); ?>"></script>
<!-- RaspAP JavaScript -->
<script src="app/js/ajax/main.js?v=<?= filemtime('app/js/ajax/main.js'); ?>"></script>
<script src="app/js/ui/main.js?v=<?= filemtime('app/js/ui/main.js'); ?>"></script>
<?php loadFooterScripts($extraFooterScripts); ?>
</body>

2
plugins

Submodule plugins updated: a867897ee5...a9bfe51603