wip
This commit is contained in:
pika
parent
9433d9d235
commit
7b6837cf96
7 changed files with 370 additions and 63 deletions
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
@ -140,6 +140,45 @@
|
|||
background-color: rgba(0, 0, 0, 0.03);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Navigation bar theming */
|
||||
.navbar {
|
||||
background-color: var(--bs-body-bg) !important;
|
||||
border-bottom: 1px solid var(--bs-border-color);
|
||||
}
|
||||
|
||||
.navbar .navbar-brand,
|
||||
.navbar .nav-link,
|
||||
.navbar .dropdown-toggle {
|
||||
color: var(--bs-body-color) !important;
|
||||
}
|
||||
|
||||
/* Markdown styling for better contrast in dark mode */
|
||||
[data-bs-theme="dark"] .markdown-content {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .markdown-content h1,
|
||||
[data-bs-theme="dark"] .markdown-content h2,
|
||||
[data-bs-theme="dark"] .markdown-content h3,
|
||||
[data-bs-theme="dark"] .markdown-content h4,
|
||||
[data-bs-theme="dark"] .markdown-content h5,
|
||||
[data-bs-theme="dark"] .markdown-content h6 {
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .markdown-content code {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
color: #e6e6e6;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .markdown-content pre {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .markdown-content a {
|
||||
color: #6ea8fe;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
|
@ -228,10 +267,10 @@
|
|||
<li><a class="dropdown-item" href="{{ url_for('auth.logout') }}">Logout</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ms-auto me-3">
|
||||
<button class="btn btn-icon" id="theme-toggle" aria-label="Toggle theme">
|
||||
<span class="ti ti-moon theme-icon-light"></span>
|
||||
<span class="ti ti-sun theme-icon-dark"></span>
|
||||
<div class="nav-item ms-2">
|
||||
<button id="theme-toggle" class="btn btn-icon" aria-label="Toggle theme">
|
||||
<span class="ti ti-moon dark-icon d-none"></span>
|
||||
<span class="ti ti-sun light-icon"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -458,6 +497,38 @@
|
|||
}
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const themeToggle = document.getElementById('theme-toggle');
|
||||
const darkIcon = document.querySelector('.dark-icon');
|
||||
const lightIcon = document.querySelector('.light-icon');
|
||||
|
||||
// Set initial icon state
|
||||
updateThemeIcon();
|
||||
|
||||
function updateThemeIcon() {
|
||||
const currentTheme = localStorage.getItem('theme') ||
|
||||
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
|
||||
|
||||
if (currentTheme === 'dark') {
|
||||
darkIcon.classList.remove('d-none');
|
||||
lightIcon.classList.add('d-none');
|
||||
} else {
|
||||
darkIcon.classList.add('d-none');
|
||||
lightIcon.classList.remove('d-none');
|
||||
}
|
||||
}
|
||||
|
||||
themeToggle.addEventListener('click', function () {
|
||||
const currentTheme = document.documentElement.getAttribute('data-bs-theme');
|
||||
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
||||
|
||||
document.documentElement.setAttribute('data-bs-theme', newTheme);
|
||||
localStorage.setItem('theme', newTheme);
|
||||
updateThemeIcon();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% block scripts %}{% endblock %}
|
||||
</body>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue