This commit is contained in:
pika 2025-04-03 14:24:28 +02:00
parent 66fe31eabe
commit 67dae6f5e4
7 changed files with 490 additions and 23 deletions

View file

@ -72,9 +72,10 @@
{% if edit_mode and app.ports %}
{% for port in app.ports %}
<tr>
<td>
<td class="position-relative">
<input type="number" name="port_numbers[]" class="form-control" min="1" max="65535"
value="{{ port.port_number }}">
<div class="feedback"></div>
</td>
<td>
<select name="protocols[]" class="form-select">
@ -95,9 +96,10 @@
{% endfor %}
{% else %}
<tr>
<td>
<td class="position-relative">
<input type="number" name="port_numbers[]" class="form-control" min="1" max="65535"
placeholder="Port number">
<div class="feedback"></div>
</td>
<td>
<select name="protocols[]" class="form-select">
@ -171,13 +173,6 @@
function addPortRow(portNumber = '', protocol = 'TCP', description = '') {
const tbody = document.querySelector('#ports-table tbody');
// Remove the empty row indicator if present
const emptyRows = tbody.querySelectorAll('tr.table-secondary.opacity-50');
if (emptyRows.length > 0) {
emptyRows.forEach(row => row.remove());
}
const newRow = document.createElement('tr');
newRow.innerHTML = `
<td class="position-relative">
@ -340,15 +335,14 @@
// Validate port
function validatePort(portField, protocolField, debounceTime = 300) {
// Create feedback element if it doesn't exist
if (!portField.nextElementSibling || !portField.nextElementSibling.classList.contains('feedback')) {
const feedback = document.createElement('div');
feedback.className = 'feedback';
portField.parentNode.insertBefore(feedback, portField.nextSibling);
// Find or create the feedback container
let feedbackElement = portField.closest('td').querySelector('.feedback');
if (!feedbackElement) {
feedbackElement = document.createElement('div');
feedbackElement.className = 'feedback';
portField.parentNode.appendChild(feedbackElement);
}
const feedbackElement = portField.nextElementSibling;
const port = portField.value.trim();
const protocol = protocolField.value;
const serverId = serverSelect.value;
@ -357,6 +351,7 @@
if (!port || !serverId) {
clearFeedback(feedbackElement);
portField.classList.remove('is-invalid');
portField.classList.remove('is-valid');
return;
}
@ -373,6 +368,7 @@
if (duplicateFound) {
portField.classList.add('is-invalid');
portField.classList.remove('is-valid');
clearFeedback(feedbackElement);
showError(feedbackElement, `Duplicate port ${port}/${protocol} in your form`);
return;
@ -392,6 +388,7 @@
clearFeedback(feedbackElement);
if (!data.valid) {
portField.classList.add('is-invalid');
portField.classList.remove('is-valid');
showError(feedbackElement, data.message);
if (data.edit_url) {
feedbackElement.innerHTML += ` <a href="${data.edit_url}" class="alert-link">Edit conflicting app</a>`;
@ -438,4 +435,4 @@
}
});
</script>
{% endblock %}
{% endblock %}