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-31 00:19:49 +02:00
parent d79359cd65
commit 30e9c9328e
18 changed files with 320 additions and 141 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -66,34 +66,6 @@
<small class="form-hint">Select the server where this application runs</small>
</div>
<div class="mb-3">
<label class="form-label">Documentation</label>
<ul class="nav nav-tabs mb-2" role="tablist">
<li class="nav-item" role="presentation">
<a href="#markdown-edit" class="nav-link active" data-bs-toggle="tab" role="tab">Edit</a>
</li>
<li class="nav-item" role="presentation">
<a href="#markdown-preview" class="nav-link" data-bs-toggle="tab" role="tab" id="preview-tab">Preview</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="markdown-edit" role="tabpanel">
<textarea class="form-control" name="documentation" id="documentation" rows="6"
placeholder="Document your application using Markdown...">{{ app.documentation if app else '' }}</textarea>
<small class="form-hint">
Markdown formatting is supported. Include details about what this application does, contact info, etc.
</small>
</div>
<div class="tab-pane" id="markdown-preview" role="tabpanel">
<div class="markdown-content border rounded p-3" style="min-height: 12rem;">
<div id="preview-content">Preview will be shown here...</div>
</div>
</div>
</div>
</div>
<div class="hr-text">Port Configuration</div>
<div class="mb-3">
<div class="d-flex justify-content-between align-items-center mb-2">
<label class="form-label mb-0">Application Ports</label>
@ -112,16 +84,16 @@
<table class="table table-vcenter card-table" id="ports-table">
<thead>
<tr>
<th style="width: 20%">Port Number</th>
<th style="width: 20%">Protocol</th>
<th style="width: 50%">Description</th>
<th style="width: 10%">Actions</th>
<th>Port</th>
<th>Protocol</th>
<th>Description</th>
<th width="40"></th>
</tr>
</thead>
<tbody>
{% if app and app.ports %}
{% for port in app.ports %}
<tr data-port-id="{{ port.id }}">
<tr>
<td>
<input type="number" name="port_numbers[]" class="form-control" min="1" max="65535"
value="{{ port.port_number }}" required>
@ -146,13 +118,22 @@
</tr>
{% endfor %}
{% endif %}
<!-- New rows will be added here dynamically -->
</tbody>
</table>
</div>
<small class="form-hint">Configure the network ports used by this application</small>
</div>
<div class="mb-3">
<label class="form-label">Documentation</label>
<textarea class="form-control" name="documentation" id="documentation" rows="10"
placeholder="Enter documentation in Markdown format">{{ app.documentation if app else '' }}</textarea>
<small class="form-hint">
Use <a href="https://www.markdownguide.org/basic-syntax/" target="_blank">Markdown syntax</a>
to format your documentation. The content will be rendered when viewing the application.
</small>
</div>
<div class="form-footer">
<button type="submit" class="btn btn-primary">Save Application</button>
{% if edit_mode %}
@ -175,11 +156,45 @@
const appId = null;
{% endif %}
// Setup markdown preview
setupMarkdownPreview();
// Initialize everything once the DOM is loaded
document.addEventListener('DOMContentLoaded', function () {
// Connect port management buttons
const addPortBtn = document.getElementById('add-port-btn');
const randomPortBtn = document.getElementById('random-port-btn');
// Setup port management
setupPortHandlers();
if (addPortBtn) {
addPortBtn.addEventListener('click', function () {
addPortRow();
});
}
if (randomPortBtn) {
randomPortBtn.addEventListener('click', function () {
generateRandomPort();
});
}
});
// Show notifications
function showNotification(message, type = 'info') {
const alertDiv = document.createElement('div');
alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
alertDiv.innerHTML = `
${message}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
`;
const container = document.querySelector('.card-body');
if (container) {
container.insertBefore(alertDiv, container.firstChild);
// Auto-dismiss after 5 seconds
setTimeout(() => {
alertDiv.classList.remove('show');
setTimeout(() => alertDiv.remove(), 150);
}, 5000);
}
}
</script>
<script>
@ -244,13 +259,5 @@
showNotification('Failed to generate random port', 'danger');
}
}
function setupPortHandlers() {
// Add port button
document.getElementById('add-port-btn')?.addEventListener('click', () => addPortRow());
// Random port button
document.getElementById('random-port-btn')?.addEventListener('click', generateRandomPort);
}
</script>
{% endblock %}