wip
This commit is contained in:
parent
66fe31eabe
commit
67dae6f5e4
7 changed files with 490 additions and 23 deletions
|
@ -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 %}
|
Loading…
Add table
Add a link
Reference in a new issue