wip
This commit is contained in:
pika
parent
6dd38036e7
commit
097b3dbf09
34 changed files with 1719 additions and 520 deletions
213
app/templates/dashboard/app_edit.html
Normal file
213
app/templates/dashboard/app_edit.html
Normal file
|
|
@ -0,0 +1,213 @@
|
|||
{% extends "layout.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-xl">
|
||||
<div class="page-header d-print-none">
|
||||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
<h2 class="page-title">
|
||||
Edit Application: {{ app.name }}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mt-3">
|
||||
<div class="card-body">
|
||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||||
{% if messages %}
|
||||
{% for category, message in messages %}
|
||||
<div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
|
||||
{{ message }}
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
|
||||
<form method="POST" action="{{ url_for('dashboard.app_edit', app_id=app.id) }}">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<div class="mb-3">
|
||||
<label class="form-label required">Application Name</label>
|
||||
<input type="text" class="form-control" name="name" value="{{ app.name }}" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label required">Server</label>
|
||||
<select class="form-select" name="server_id" required>
|
||||
<option value="">Select a server</option>
|
||||
{% for server in servers %}
|
||||
<option value="{{ server.id }}" {% if server.id==app.server_id %}selected{% endif %}>
|
||||
{{ server.hostname }} ({{ server.ip_address }})
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Documentation</label>
|
||||
<textarea class="form-control" name="documentation" rows="6"
|
||||
placeholder="Use Markdown for formatting">{{ app.documentation }}</textarea>
|
||||
<small class="form-hint">Supports Markdown formatting</small>
|
||||
</div>
|
||||
|
||||
<!-- Port management section -->
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Application Ports</label>
|
||||
<div id="ports-container">
|
||||
{% if app.ports %}
|
||||
{% for port in app.ports %}
|
||||
<div class="port-entry mb-2 row">
|
||||
<div class="col-4">
|
||||
<input type="number" class="form-control" name="port_numbers[]" value="{{ port.port_number }}"
|
||||
placeholder="Port number" min="1" max="65535">
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<select class="form-select" name="protocols[]">
|
||||
<option value="TCP" {% if port.protocol=='TCP' %}selected{% endif %}>TCP</option>
|
||||
<option value="UDP" {% if port.protocol=='UDP' %}selected{% endif %}>UDP</option>
|
||||
<option value="HTTP" {% if port.protocol=='HTTP' %}selected{% endif %}>HTTP</option>
|
||||
<option value="HTTPS" {% if port.protocol=='HTTPS' %}selected{% endif %}>HTTPS</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<input type="text" class="form-control" name="port_descriptions[]" value="{{ port.description }}"
|
||||
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>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<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>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<button type="button" id="add-port" class="btn btn-sm btn-outline-primary">
|
||||
<i class="ti ti-plus me-1"></i> Add Port
|
||||
</button>
|
||||
<button type="button" id="suggest-port" class="btn btn-sm btn-outline-secondary ms-2">
|
||||
<i class="ti ti-bolt me-1"></i> Suggest Free Port
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-between mt-4">
|
||||
<a href="{{ url_for('dashboard.server_view', server_id=app.server_id) }}" class="btn btn-outline-secondary">
|
||||
Cancel
|
||||
</a>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
Save Changes
|
||||
</button>
|
||||
</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 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 %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue