websites/homedocs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

wip

Browse source
This commit is contained in:
pika 2025-03-30 21:52:20 +02:00
parent f939933a7c
commit be6f7cfcbb
35 changed files with 1897 additions and 733 deletions
Download patch file Download diff file Expand all files Collapse all files

189
app/templates/dashboard/app_form.html
View file

@ -6,7 +6,7 @@
<div class="row align-items-center">
<div class="col">
<h2 class="page-title">
Add New Application
{% if app %}Edit Application{% else %}Add New Application{% endif %}
</h2>
</div>
</div>
@ -25,156 +25,85 @@
{% endif %}
{% endwith %}
<form method="POST" action="{{ url_for('dashboard.app_new') }}">
<form method="POST"
action="{% if app %}{{ url_for('dashboard.app_edit', app_id=app.id) }}{% else %}{{ url_for('dashboard.app_new') }}{% endif %}">
<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" required>
<input type="text" class="form-control" name="name" required value="{% if app %}{{ app.name }}{% endif %}">
</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 }}">{{ server.hostname }} ({{ server.ip_address }})</option>
<option value="{{ server.id }}" {% if app and app.server_id==server.id %}selected {% elif server_id and
server.id|string==server_id|string %}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"></textarea>
<small class="form-hint">Supports Markdown formatting</small>
<textarea class="form-control" name="documentation"
rows="10">{% if app %}{{ app.documentation }}{% endif %}</textarea>
<div class="form-text">Markdown is supported</div>
</div>
<!-- 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>
<button type="submit" class="btn btn-primary">Save</button>
{% if app %}
<a href="{{ url_for('dashboard.app_view', app_id=app.id) }}" class="btn btn-outline-secondary ms-2">Cancel</a>
{% else %}
<a href="{% if server_id %}{{ url_for('dashboard.server_view', server_id=server_id) }}{% else %}{{ url_for('dashboard.dashboard_home') }}{% endif %}"
class="btn btn-outline-secondary ms-2">Cancel</a>
{% endif %}
</div>
</form>
</div>
</div>
</div>
{% block extra_js %}
<script>
let portRowIndex = 1;
function addPortRow() {
const tbody = document.querySelector('#ports-table tbody');
const tr = document.createElement('tr');
tr.classList.add('port-row');
tr.innerHTML = `
<td>
<input type="number" name="port_number_${portRowIndex}" class="form-control"
min="1" max="65535" placeholder="Port number">
</td>
<td>
<select name="protocol_${portRowIndex}" class="form-select">
<option value="TCP">TCP</option>
<option value="UDP">UDP</option>
<option value="SCTP">SCTP</option>
<option value="OTHER">OTHER</option>
</select>
</td>
<td>
<input type="text" name="description_${portRowIndex}" class="form-control"
placeholder="Description">
</td>
<td>
<button type="button" class="btn btn-sm btn-ghost-danger" onclick="removePortRow(this)">
<span class="ti ti-trash"></span>
</button>
</td>
`;
tbody.appendChild(tr);
portRowIndex++;
}
function removePortRow(button) {
const row = button.closest('tr');
row.remove();
}
</script>
{% 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 %}