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 22:31:10 +02:00
parent 9433d9d235
commit 7b6837cf96
7 changed files with 370 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

6
app/templates/dashboard/app_view.html
View file

@ -120,7 +120,7 @@
</div>
<div class="card-body markdown-content">
{% if app.documentation %}
{{ app.documentation|markdown|safe }}
{{ app.documentation|markdown }}
{% else %}
<div class="empty">
<div class="empty-icon">
@ -147,7 +147,7 @@
<div class="modal" id="addPortModal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<form method="POST" action="{{ url_for('api.add_port', app_id=app.id) }}">
<form method="POST" action="{{ url_for('api.add_app_port', app_id=app.id) }}">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<div class="modal-header">
<h5 class="modal-title">Add Port</h5>
@ -220,4 +220,4 @@
</div>
</div>
{% endfor %}
{% endblock %}
{% endblock %}

128
app/templates/dashboard/server_view.html
View file

@ -54,47 +54,29 @@
</div>
<!-- Port Usage Map -->
<div class="card mt-3">
<div class="card-header d-flex align-items-center">
<div class="card mb-4">
<div class="card-header d-flex justify-content-between align-items-center">
<h3 class="card-title">Port Usage</h3>
<div class="ms-auto">
<button id="get-random-port" class="btn btn-sm btn-outline-primary">
<i class="ti ti-clipboard-copy me-1"></i> Get Free Port
</button>
<div>
<button class="btn btn-sm btn-outline-primary" id="get-free-port">Get Free Port</button>
</div>
</div>
<div class="card-body">
<div class="port-map">
<div class="port-map-grid">
{% for i in range(1, 101) %}
{% set port_num = 8000 + i - 1 %}
{% set port_used = false %}
{% set port_app = "" %}
{% set port_color = "" %}
{% set tooltip = "" %}
{% for app in server.apps %}
{% for port in app.ports %}
{% if port.port_number == port_num %}
{% set port_used = true %}
{% set port_app = app.name %}
{% set port_color = "bg-" ~ ["primary", "success", "info", "warning", "danger"][(app.id % 5)] %}
{% set tooltip = app.name ~ " - " ~ port.description %}
{% endif %}
{% endfor %}
{% endfor %}
<div class="port-item {{ port_color if port_used else 'bg-light' }}" data-port="{{ port_num }}"
data-bs-toggle="tooltip" title="{{ tooltip if port_used else 'Free port: ' ~ port_num }}">
{{ port_num }}
</div>
{% endfor %}
<div class="port-usage-compact">
<div class="port-legend mb-3">
<span class="port-indicator port-free me-2"></span> Free
<span class="port-indicator port-used ms-3 me-2"></span> Used
</div>
</div>
<div class="mt-2 text-muted small">
<div class="d-flex flex-wrap">
<div class="me-3"><span class="badge bg-light">Port</span> Free</div>
<div><span class="badge bg-primary">Port</span> Used</div>
<div id="port-ranges" class="port-ranges">
<!-- Port ranges will be rendered here -->
</div>
<div class="mt-3">
<h4 class="h5">Used Ports</h4>
<div id="used-ports-list" class="used-ports-list">
<!-- Used ports will be listed here -->
</div>
</div>
</div>
</div>
@ -317,34 +299,70 @@
{% block styles %}
<style>
.port-map {
overflow-x: auto;
.port-usage-compact {
width: 100%;
}
.port-map-grid {
display: grid;
grid-template-columns: repeat(10, 1fr);
gap: 4px;
.port-ranges {
display: flex;
flex-wrap: wrap;
gap: 2px;
}
.port-item {
padding: 4px;
font-size: 10px;
text-align: center;
border-radius: 3px;
cursor: pointer;
user-select: none;
.port-range {
height: 12px;
flex-grow: 1;
min-width: 3px;
border-radius: 2px;
}
.port-item:hover {
opacity: 0.8;
.port-range-free {
background-color: rgba(25, 135, 84, 0.4);
}
.markdown-body {
padding: 1rem;
background-color: var(--tblr-bg-surface);
border: 1px solid var(--tblr-border-color);
.port-range-used {
background-color: rgba(220, 53, 69, 0.6);
}
.port-indicator {
display: inline-block;
width: 20px;
height: 10px;
border-radius: 2px;
}
.port-free {
background-color: rgba(25, 135, 84, 0.4);
}
.port-used {
background-color: rgba(220, 53, 69, 0.6);
}
.used-ports-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.used-port-tag {
background-color: rgba(220, 53, 69, 0.2);
border: 1px solid rgba(220, 53, 69, 0.3);
color: var(--bs-body-color);
padding: 2px 8px;
border-radius: 4px;
display: flex;
align-items: center;
gap: 6px;
}
.copy-port {
cursor: pointer;
opacity: 0.7;
}
.copy-port:hover {
opacity: 1;
}
</style>
{% endblock %}