Override handleModalSave

For Developers
1

I would like to move the configuration of some pppd options (like bcp, mp, mrru) from /etc/ppp/options* files to luci for ppp interfaces.
To do this, I am editing the /www/luci-static/resources/view/network/interfaces.js file.
I would like to add bcp, mp settings as checkboxes, mrru setting as a field to enter a specific range of values.
I need the option pppd_options 'bcp mp mp mrru 1600' entry to appear in /etc/config/network in the section of the desired ppp interface, and the settings to be removed from the options* files.
I would like to know the correct way to run the options* file cleanup function when I click save in the interface settings modal.

I have done it this way, but it is unreliable code (problems occur in interfaces other than ppp):

s.handleModalSave = function (event) {
	const modalWindowEl = document.querySelector('div#modal_overlay div[id^="cbi-network-"][data-section-id]');
	let section_id = modalWindowEl.dataset.sectionId;
	const bcpEl = document.querySelector(`input[data-widget-id="widget.cbid.network.${section_id}.bcp"]`);
	const mpEl = document.querySelector(`input[data-widget-id="widget.cbid.network.${section_id}.mp"]`);
	const mrruEl = document.querySelector(`input[id="widget.cbid.network.${section_id}.mrru"]`);

	if (bcpEl.checked || mpEl.checked || mrruEl.value) {
		let pppd_options_removing = [];
		if (bcpEl.checked) {
			pppd_options_removing.push('bcp')
		}
		if (mpEl.checked) {
			pppd_options_removing.push('mp')
		}
		if (mrruEl.value) {
			pppd_options_removing.push('mrru')
		}

		fs.list('/etc/ppp/').then(function (data) {
			let options_files = data.filter((el) => el.type === 'file' && el.name.startsWith('options')).map((el) => el.name);
			for (const file of options_files) {
				let file_path = '/etc/ppp/' + file;
				fs.lines(file_path).then(function (lines) {
					let filteredLines = lines.filter(line => !Array.from(pppd_options_removing).some(prefix => line.startsWith(prefix)))
					let updatedContent = filteredLines.join('\n');
					fs.write(file_path, updatedContent)
				})
			}
		}).then(function () {
			// ui.addNotification(null, E('p', _('/etc/ppp/options* files modified successfully')), 'info');
		})
	}

	return this.super('handleModalSave', event);
};

Can you tell me how I can implement a more robust code?

2

First of all you should return the promise returned by fs.list(…) to avoid race conditions. Afterwards you need to explain your problem in more detail, what you mean with “unreliable”

return fs.list('/etc/ppp/').then(function (data) {
    …
});
3

I don't like the way of getting the entered values via querySelector.
Maybe there is another way to get field values from the 'advanced' tab inside the overridden s.handleModalSave?
When I put return before fs.list('/etc/ppp/') the Save button stops working.