Files
haproxy-dashboard/static/js/index.js
Mateusz Gruszczyński e86b71cf4c redactor
2025-11-01 22:06:59 +01:00

106 lines
3.9 KiB
JavaScript

(() => {
'use strict';
const $ = (sel, root=document) => root.querySelector(sel);
const $$ = (sel, root=document) => Array.from(root.querySelectorAll(sel));
// SSL fields
const sslCheckbox = $('#ssl_checkbox');
const sslFields = $('#ssl_fields');
const toggle = (on, el) => el.classList.toggle('d-none', !on);
sslCheckbox?.addEventListener('change', () => toggle(sslCheckbox.checked, sslFields));
// DOS
const dosCheckbox = $('#add_dos');
const dosFields = $('#dos_fields');
dosCheckbox?.addEventListener('change', () => toggle(dosCheckbox.checked, dosFields));
// HTTP only groups
const protocolSelect = $('#protocol');
const httpGroups = $$('.http-only, #forbidden_acl_container');
const httpToggles = [
$('#sql_injection_check'),
$('#xss_check'),
$('#remote_uploads_check'),
$('#webshells_check'),
$('#forward_for_check'),
$('#add_acl_path'),
$('#add_path_based'),
];
const forbiddenFields = $('#forbidden_fields');
const pathFields = $('#base_redirect_fields');
const onProtocolChange = () => {
const isHttp = protocolSelect?.value === 'http';
httpGroups.forEach(el => toggle(isHttp, el));
if (!isHttp) {
// hide optional groups if protocol != http
[forbiddenFields, pathFields].forEach(el => el && toggle(false, el));
httpToggles.forEach(input => { if (input) input.checked = false; });
}
};
protocolSelect?.addEventListener('change', onProtocolChange);
onProtocolChange();
// ACL
const aclCheckbox = $('#add_acl');
const aclFields = $('#acl_fields');
aclCheckbox?.addEventListener('change', () => toggle(aclCheckbox.checked, aclFields));
// toggles that reveal their fields
const bindToggle = (checkboxSel, targetSel) => {
const cb = $(checkboxSel);
const target = $(targetSel);
cb?.addEventListener('change', () => toggle(cb.checked, target));
// initial
if (cb && target) toggle(cb.checked, target);
};
bindToggle('#add_path_based', '#base_redirect_fields');
bindToggle('#add_acl_path', '#forbidden_fields');
// Backend rows
let serverCount = 1;
const container = $('#backend_servers_container');
const addBtn = $('#add_backend_btn');
const createRow = () => {
serverCount++;
const row = document.createElement('div');
row.className = 'row g-3 backend-server-row mt-1';
row.innerHTML = `
<div class="col-md-3">
<label class="form-label" for="name${serverCount}">Nazwa serwera</label>
<input type="text" id="name${serverCount}" class="form-control" name="backend_server_names[]" placeholder="server${serverCount}" required>
</div>
<div class="col-md-3">
<label class="form-label" for="ip${serverCount}">IP</label>
<input type="text" id="ip${serverCount}" class="form-control" name="backend_server_ips[]" required>
</div>
<div class="col-md-3">
<label class="form-label" for="port${serverCount}">Port</label>
<input type="number" id="port${serverCount}" class="form-control" name="backend_server_ports[]" required>
</div>
<div class="col-md-3">
<label class="form-label" for="maxconn${serverCount}">MaxConn</label>
<div class="d-flex gap-2">
<input type="number" id="maxconn${serverCount}" class="form-control" name="backend_server_maxconns[]">
<button type="button" class="btn btn-danger" title="Usuń">Usuń</button>
</div>
</div>`;
row.querySelector('button.btn-danger')?.addEventListener('click', () => {
const rows = $$('.backend-server-row');
if (rows.length > 1) row.remove();
else alert('Musi istnieć co najmniej jeden backend.');
});
return row;
};
addBtn?.addEventListener('click', () => container?.appendChild(createRow()));
// auto dismiss alerts
setTimeout(() => $$('.alert').forEach(a => {
if (typeof bootstrap !== 'undefined') new bootstrap.Alert(a).close();
}), 5000);
})();