WiS/Aruba-PoE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

srv/poe_manager/templates/devices.html aktualisiert

Browse Source
This commit is contained in:
Tim Eertmoed
2025-10-08 18:17:47 +02:00
parent f6c539ac8d
commit d8a4b17b28
1 changed files with 35 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
srv/poe_manager/templates/devices.html
View File

@@ -67,7 +67,7 @@
<div class="modal fade" id="deviceModal" tabindex="-1" aria-hidden="true"> <div class="modal fade" id="deviceModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<form method="post" onsubmit="return validateIPField(this);"> <form method="post" onsubmit="return validateDeviceForm(this);">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title black">Neues Gerät hinzufügen</h5> <h5 class="modal-title black">Neues Gerät hinzufügen</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button> <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
@@ -76,20 +76,21 @@
<input type="hidden" name="add_device" value="1"> <input type="hidden" name="add_device" value="1">
<div class="mb-3"> <div class="mb-3">
<label>Hostname</label> <label>Hostname</label>
<input type="text" name="name" class="form-control" required> <input type="text" name="name" class="form-control" required placeholder="z.B. Sensor01">
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label>IP-Adresse</label> <label>IP-Adresse</label>
<input type="text" name="rpi_ip" class="form-control" required> <input type="text" name="rpi_ip" class="form-control" required placeholder="z.B. 192.168.1.100">
<div class="invalid-feedback">Bitte eine gültige IP-Adresse eingeben (z. B. 192.168.1.100).</div> <div class="invalid-feedback">Bitte eine gültige IP-Adresse eingeben (z. B. 192.168.1.100).</div>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label>MAC-Adresse</label> <label>MAC-Adresse</label>
<input type="text" name="mac" class="form-control" required> <input type="text" name="mac" class="form-control" required placeholder="z.B. AA:BB:CC:DD:EE:FF">
<div class="invalid-feedback">Bitte eine gültige MAC-Adresse eingeben (xx:xx:xx:xx:xx:xx).</div>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label>Port</label> <label>Port</label>
<input type="text" name="port" class="form-control" required> <input type="text" name="port" class="form-control" required placeholder="z.B. 3">
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label>Switch</label> <label>Switch</label>
@@ -113,7 +114,7 @@
<div class="modal fade" id="editDeviceModal" tabindex="-1" aria-hidden="true"> <div class="modal fade" id="editDeviceModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<form method="post" onsubmit="return validateIPField(this);"> <form method="post" onsubmit="return validateDeviceForm(this);">
<input type="hidden" name="edit_device" value="1"> <input type="hidden" name="edit_device" value="1">
<input type="hidden" name="old_mac" id="edit_old_mac"> <input type="hidden" name="old_mac" id="edit_old_mac">
<div class="modal-header"> <div class="modal-header">
@@ -123,20 +124,21 @@
<div class="modal-body"> <div class="modal-body">
<div class="mb-3"> <div class="mb-3">
<label>Hostname</label> <label>Hostname</label>
<input type="text" name="name" id="edit_name" class="form-control" required> <input type="text" name="name" id="edit_name" class="form-control" required placeholder="z.B. Sensor01">
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label>IP-Adresse</label> <label>IP-Adresse</label>
<input type="text" name="rpi_ip" id="edit_ip" class="form-control" required> <input type="text" name="rpi_ip" id="edit_ip" class="form-control" required placeholder="z.B. 192.168.1.100">
<div class="invalid-feedback">Bitte eine gültige IP-Adresse eingeben (z. B. 192.168.1.100).</div> <div class="invalid-feedback">Bitte eine gültige IP-Adresse eingeben (z. B. 192.168.1.100).</div>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label>MAC-Adresse</label> <label>MAC-Adresse</label>
<input type="text" name="mac" id="edit_mac" class="form-control" required> <input type="text" name="mac" id="edit_mac" class="form-control" required placeholder="z.B. AA:BB:CC:DD:EE:FF">
<div class="invalid-feedback">Bitte eine gültige MAC-Adresse eingeben (xx:xx:xx:xx:xx:xx).</div>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label>Port</label> <label>Port</label>
<input type="text" name="port" id="edit_port" class="form-control" required> <input type="text" name="port" id="edit_port" class="form-control" required placeholder="z.B. 3">
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
@@ -198,6 +200,11 @@ function openSwitchModal(mac, switch_hostname) {
// ------------------- // -------------------
const ipPattern = /^(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}$/; const ipPattern = /^(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}$/;
// -------------------
// MAC-Validierung
// -------------------
const macPattern = /^([0-9A-Fa-f]{2}:){5}[0-9A-Fa-f]{2}$/;
function validateIP(input) { function validateIP(input) {
if (!ipPattern.test(input.value)) { if (!ipPattern.test(input.value)) {
input.classList.add("is-invalid"); input.classList.add("is-invalid");
@@ -208,19 +215,29 @@ function validateIP(input) {
} }
} }
function validateIPField(form) { function validateMAC(input) {
const ipInput = form.querySelector("input[name='rpi_ip']"); if (!macPattern.test(input.value)) {
if (ipInput) { input.classList.add("is-invalid");
return validateIP(ipInput); return false;
} } else {
input.classList.remove("is-invalid");
return true; return true;
}
}
function validateDeviceForm(form) {
const ipInput = form.querySelector("input[name='rpi_ip']");
const macInput = form.querySelector("input[name='mac']");
let valid = true;
if (ipInput) valid = validateIP(ipInput) && valid;
if (macInput) valid = validateMAC(macInput) && valid;
return valid;
} }
// Live-Feedback beim Tippen // Live-Feedback beim Tippen
document.addEventListener("input", function(e) { document.addEventListener("input", function(e) {
if (e.target.name === "rpi_ip") { if (e.target.name === "rpi_ip") validateIP(e.target);
validateIP(e.target); if (e.target.name === "mac") validateMAC(e.target);
}
}); });
</script> </script>