This commit is contained in:
pika 2025-03-30 19:57:41 +02:00
parent 6dd38036e7
commit 097b3dbf09
34 changed files with 1719 additions and 520 deletions

View file

@ -46,12 +46,135 @@
placeholder="Use Markdown for formatting"></textarea>
<small class="form-hint">Supports Markdown formatting</small>
</div>
<div class="d-flex justify-content-end">
<a href="{{ url_for('dashboard.server_list') }}" class="btn btn-link me-2">Cancel</a>
<!-- Port management section -->
<div class="mb-3">
<label class="form-label">Application Ports</label>
<div id="ports-container">
<div class="port-entry mb-2 row">
<div class="col-4">
<input type="number" class="form-control" name="port_numbers[]" placeholder="Port number" min="1"
max="65535">
</div>
<div class="col-3">
<select class="form-select" name="protocols[]">
<option value="TCP">TCP</option>
<option value="UDP">UDP</option>
<option value="HTTP">HTTP</option>
<option value="HTTPS">HTTPS</option>
</select>
</div>
<div class="col-4">
<input type="text" class="form-control" name="port_descriptions[]" placeholder="Description">
</div>
<div class="col-1">
<button type="button" class="btn btn-outline-danger remove-port"><i class="ti ti-trash"></i></button>
</div>
</div>
</div>
<div class="mt-2">
<button type="button" class="btn btn-outline-primary btn-sm" id="add-port">
<i class="ti ti-plus me-1"></i> Add Port
</button>
<button type="button" class="btn btn-outline-secondary btn-sm ms-2" id="suggest-port">
<i class="ti ti-bulb me-1"></i> Suggest Free Port
</button>
</div>
</div>
<div class="form-footer">
<button type="submit" class="btn btn-primary">Save Application</button>
<a href="{{ url_for('dashboard.dashboard_home') }}" class="btn btn-outline-secondary ms-2">Cancel</a>
</div>
</form>
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function () {
const portsContainer = document.getElementById('ports-container');
const addPortButton = document.getElementById('add-port');
const suggestPortButton = document.getElementById('suggest-port');
// Add a new port field
addPortButton.addEventListener('click', function () {
const portEntry = document.createElement('div');
portEntry.className = 'port-entry mb-2 row';
portEntry.innerHTML = `
<div class="col-4">
<input type="number" class="form-control" name="port_numbers[]" placeholder="Port number" min="1" max="65535">
</div>
<div class="col-3">
<select class="form-select" name="protocols[]">
<option value="TCP">TCP</option>
<option value="UDP">UDP</option>
<option value="HTTP">HTTP</option>
<option value="HTTPS">HTTPS</option>
</select>
</div>
<div class="col-4">
<input type="text" class="form-control" name="port_descriptions[]" placeholder="Description">
</div>
<div class="col-1">
<button type="button" class="btn btn-outline-danger remove-port"><i class="ti ti-trash"></i></button>
</div>
`;
portsContainer.appendChild(portEntry);
// Add event listener to the new remove button
const removeButton = portEntry.querySelector('.remove-port');
removeButton.addEventListener('click', function () {
portEntry.remove();
});
});
// Add event listeners to initial remove buttons
document.querySelectorAll('.remove-port').forEach(button => {
button.addEventListener('click', function () {
this.closest('.port-entry').remove();
});
});
// Suggest a free port
suggestPortButton.addEventListener('click', async function () {
try {
const serverId = document.querySelector('select[name="server_id"]').value;
if (!serverId) {
alert('Please select a server first');
return;
}
const response = await fetch(`/api/servers/${serverId}/suggest_port`);
if (!response.ok) throw new Error('Failed to get port suggestion');
const data = await response.json();
if (data.port) {
// Find the first empty port input or add a new one
let portInput = document.querySelector('input[name="port_numbers[]"]:not([value])');
if (!portInput) {
addPortButton.click();
portInput = document.querySelector('input[name="port_numbers[]"]:not([value])');
}
portInput.value = data.port;
// Copy to clipboard
navigator.clipboard.writeText(data.port.toString())
.then(() => {
showNotification('Port copied to clipboard!', 'success');
})
.catch(err => {
console.error('Failed to copy: ', err);
});
}
} catch (error) {
console.error('Error:', error);
showNotification('Failed to suggest port', 'danger');
}
});
});
</script>
{% endblock %}