Skip to content

Maintenance: Refactor Javascript #2078

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Jixabon wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Maintenance: Refactor Javascript #2078

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9bdc6c1
refactor javascript
Jixabon Mar 22, 2026
b97058c
fixes after refactor and add cache buster
Jixabon Mar 22, 2026
500ee04
remove old js files
Jixabon Mar 22, 2026
ad253aa
update page scripts
Jixabon Mar 22, 2026
96efb9d
escape html in template replacement
Jixabon Mar 22, 2026
a7d1886
define variable
Jixabon Mar 22, 2026
6dea079
Expose loadInterfaceDHCPSelect to global scope
Jixabon Mar 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 88 additions & 0 deletions app/js/ajax/about.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
import { getCSRFToken } from "../helpers.js";

export function fetchUpdateResponse() {
const complete = 6;
const error = 7;
let phpFile = 'ajax/system/sys_read_logfile.php';

$.ajax({
url: phpFile,
type: 'GET',
success: function(response) {
for (let i = 1; i <= 6; i++) {
let divId = '#updateStep' + i;
if (response.includes(i.toString())) {
$(divId).removeClass('invisible');
}
}
// check if the update is complete or if there's an error
if (response.includes(complete)) {
var successMsg = $('#successMsg').data('message');
$('#updateMsg').after('<span class="small">' + successMsg + '</span>');
$('#updateMsg').addClass('fa-check');
$('#updateMsg').removeClass('invisible');
$('#updateStep6').removeClass('invisible');
$('#updateSync2').removeClass("fa-spin");
$('#updateOk').removeAttr('disabled');
} else if (response.includes(error)) {
var errorMsg = $('#errorMsg').data('message');
$('#updateMsg').after('<span class="small">' + errorMsg + '</span>');
$('#updateMsg').addClass('fa-times');
$('#updateMsg').removeClass('invisible');
$('#updateSync2').removeClass("fa-spin");
$('#updateOk').removeAttr('disabled');
} else {
setTimeout(fetchUpdateResponse, 500);
}
},
error: function(xhr, status, error) {
console.error("AJAX Error:", error);
}
});
}

export function initAbout_ajax() {
console.info("RaspAP About ajax module initialized");

$('#chkupdateModal').on('shown.bs.modal', function (e) {
var csrfToken = getCSRFToken();
$.post('ajax/system/sys_chk_update.php',{'csrf_token': csrfToken},function(data){
var response = JSON.parse(data);
var tag = response.tag;
var update = response.update;
var msg;
var msgUpdate = $('#msgUpdate').data('message');
var msgLatest = $('#msgLatest').data('message');
var msgInstall = $('#msgInstall').data('message');
var msgDismiss = $('#js-check-dismiss').data('message');
var faCheck = '<i class="fas fa-check ms-2"></i><br />';
$("#updateSync").removeClass("fa-spin");
if (update === true) {
msg = msgUpdate +' '+tag;
$("#msg-check-update").html(msg);
$("#msg-check-update").append(faCheck);
$("#msg-check-update").append("<p>"+msgInstall+"</p>");
$("#js-sys-check-update").removeClass("collapse");
} else {
msg = msgLatest;
let dismiss = $("#js-check-dismiss");
$("#msg-check-update").html(msg);
$("#msg-check-update").append(faCheck);
$("#js-sys-check-update").remove();
dismiss.text(msgDismiss);
dismiss.removeClass("btn-outline-secondary");
dismiss.addClass("btn-primary");
}
});
});

$('#performUpdate').on('submit', function(event) {
event.preventDefault();
var csrfToken = getCSRFToken();
$.post('ajax/system/sys_perform_update.php',{
'csrf_token': csrfToken
})
$('#chkupdateModal').modal('hide');
$('#performupdateModal').modal('show');
});
}
71 changes: 71 additions & 0 deletions app/js/ajax/adblock.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import { getCSRFToken } from '../helpers.js';

export function initAdblock_ajax() {
console.info("RaspAP adblock ajax module initialized");
/* Updates the selected blocklist
* Request is passed to an ajax handler to download the associated list.
* Interface elements are updated to indicate current progress, status.
*/
function updateBlocklist() {
const opt = $('#cbxblocklist option:selected');
const blocklist_id = opt.val();
const csrfToken = getCSRFToken();

if (blocklist_id === '') return;

const statusIcon = $('#cbxblocklist-status').find('i');
const statusWrapper = $('#cbxblocklist-status');

statusIcon.removeClass('fa-check fa-exclamation-triangle').addClass('fa-cog fa-spin');
statusWrapper.removeClass('check-hidden check-error check-updated').addClass('check-progress');

$.post('ajax/adblock/update_blocklist.php', {
'blocklist_id': blocklist_id,
'csrf_token': csrfToken
}, function (data) {
let jsonData;
try {
jsonData = JSON.parse(data);
} catch (e) {
showError("Unexpected server response.");
return;
}
const resultCode = jsonData['return'];
const output = jsonData['output']?.join('\n') || '';

switch (resultCode) {
case 0:
statusIcon.removeClass('fa-cog fa-spin').addClass('fa-check');
statusWrapper.removeClass('check-progress').addClass('check-updated').delay(500).animate({ opacity: 1 }, 700);
$('#blocklist-' + jsonData['list']).text("Just now");
break;
case 1:
showError("Invalid blocklist.");
break;
case 2:
showError("No blocklist provided.");
break;
case 3:
showError("Could not parse blocklists.json.");
break;
case 4:
showError("blocklists.json file not found.");
break;
case 5:
showError("Update script not found.");
break;
default:
showError("Unknown error occurred.");
}
}).fail(function (jqXHR, textStatus, errorThrown) {
showError(`AJAX request failed: ${textStatus}`);
});

function showError(message) {
statusIcon.removeClass('fa-cog fa-spin').addClass('fa-exclamation-triangle');
statusWrapper.removeClass('check-progress').addClass('check-error');
alert("Blocklist update failed:\n\n" + message);
}
}
globalThis.updateBlocklist = updateBlocklist;
}
96 changes: 96 additions & 0 deletions app/js/ajax/dhcp.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
import { getCSRFToken } from "../helpers.js";

export function initDHCP_ajax() {
console.info("RaspAP DHCP ajax module initialized");

$(document).on("click", "#js-cleardnsmasq-log", function(e) {
var csrfToken = getCSRFToken();
$.post('ajax/logging/clearlog.php?', {
'logfile':'/var/log/dnsmasq.log',
'csrf_token': csrfToken
}, function(data) {
let jsonData = JSON.parse(data);
$("#dnsmasq-log").val("");
});
});

/*
Populates the DHCP server form fields
Option toggles are set dynamically depending on the loaded configuration
*/
function loadInterfaceDHCPSelect() {
var strInterface = $('#cbxdhcpiface').val();
var csrfToken = getCSRFToken();
$.post('ajax/networking/get_netcfg.php', {
'iface' : strInterface,
'csrf_token': csrfToken
}, function(data) {
let jsonData = JSON.parse(data);
$('#dhcp-iface')[0].checked = jsonData.DHCPEnabled;
$('#txtipaddress').val(jsonData.StaticIP);
$('#txtsubnetmask').val(jsonData.SubnetMask);
$('#txtgateway').val(jsonData.StaticRouters);
$('#chkfallback')[0].checked = jsonData.FallbackEnabled;
$('#default-route').prop('checked', jsonData.DefaultRoute);
if (strInterface.startsWith("wl")) {
$('#nohook-wpa-supplicant').parent().parent().parent().show()
$('#nohook-wpa-supplicant').prop('checked', jsonData.NoHookWPASupplicant);
} else {
$('#nohook-wpa-supplicant').parent().parent().parent().hide()
}
$('#txtrangestart').val(jsonData.RangeStart);
$('#txtrangeend').val(jsonData.RangeEnd);
$('#txtrangeleasetime').val(jsonData.leaseTime);
$('#txtdns1').val(jsonData.DNS1);
$('#txtdns2').val(jsonData.DNS2);
$('#cbxrangeleasetimeunits').val(jsonData.leaseTimeInterval);
$('#no-resolv')[0].checked = jsonData.upstreamServersEnabled;
$('#cbxdhcpupstreamserver').val(jsonData.upstreamServers[0]);
$('#txtmetric').val(jsonData.Metric);

if (jsonData.StaticIP !== null && jsonData.StaticIP !== '' && !jsonData.FallbackEnabled) {
$('#chkstatic').prop('checked', true).trigger('change');
$('#chkdhcp').prop('checked', false).trigger('change');
$('#chkfallback').prop('disabled', true);
$('#dhcp-iface').removeAttr('disabled');
} else {
$('#chkdhcp').closest('.btn').blur();
}
if (jsonData.FallbackEnabled || $('#chkdhcp').is(':checked')) {
$('#dhcp-iface').prop('disabled', true);
setDhcpFieldsDisabled();
}

const leaseContainer = $('.js-dhcp-static-lease-container');
leaseContainer.empty();

if (jsonData.dhcpHost && jsonData.dhcpHost.length > 0) {
const leases = jsonData.dhcpHost || [];
leases.forEach((entry, index) => {
const [mainPart, commentPart] = entry.split('#');
const comment = commentPart ? commentPart.trim() : '';
const [mac, ip] = mainPart.split(',').map(part => part.trim());
const row = `
<div class="row dhcp-static-lease-row js-dhcp-static-lease-row">
<div class="col-md-4 col-xs-3">
<input type="text" name="static_leases[mac][]" value="${mac}" placeholder="MAC address" class="form-control">
</div>
<div class="col-md-3 col-xs-3">
<input type="text" name="static_leases[ip][]" value="${ip}" placeholder="IP address" class="form-control">
</div>
<div class="col-md-3 col-xs-3">
<input type="text" name="static_leases[comment][]" value="${comment || ''}" placeholder="Optional comment" class="form-control">
</div>
<div class="col-md-2 col-xs-3">
<button type="button" class="btn btn-outline-danger js-remove-dhcp-static-lease"><i class="far fa-trash-alt"></i></button>
</div>
</div>`;
leaseContainer.append(row);
});
}
});
}
globalThis.loadInterfaceDHCPSelect = loadInterfaceDHCPSelect;

loadInterfaceDHCPSelect();
}
Loading
Loading