index.html•15.9 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sectional MCP Panel</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.section-card {
margin-bottom: 20px;
border-left: 5px solid #0d6efd;
}
.server-card {
margin-bottom: 10px;
}
.server-running {
border-left: 5px solid #198754;
}
.server-stopped {
border-left: 5px solid #dc3545;
}
.server-error {
border-left: 5px solid #ffc107;
}
.status-badge-running {
background-color: #198754;
}
.status-badge-stopped {
background-color: #dc3545;
}
.status-badge-error {
background-color: #ffc107;
color: #000;
}
.action-buttons {
display: flex;
gap: 5px;
}
.main-content {
margin-top: 20px;
}
.sidebar {
background-color: #f8f9fa;
padding: 20px;
height: 100vh;
position: sticky;
top: 0;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<!-- Sidebar -->
<div class="col-md-3 col-lg-2 d-md-block sidebar collapse">
<div class="position-sticky">
<h5 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>Sectional MCP Panel</span>
</h5>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#" id="dashboard-link">
Dashboard
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" id="sections-link">
Sections
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" id="servers-link">
Servers
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" id="tasks-link">
Tasks
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" id="settings-link">
Settings
</a>
</li>
</ul>
</div>
</div>
<!-- Main content -->
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 main-content">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2" id="page-title">Dashboard</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group me-2">
<button type="button" class="btn btn-sm btn-outline-primary" id="refresh-btn">Refresh</button>
<button type="button" class="btn btn-sm btn-outline-success" id="add-section-btn">Add Section</button>
</div>
</div>
</div>
<!-- Dashboard content -->
<div id="dashboard-content">
<div class="alert alert-info" role="alert">
Loading panel data...
</div>
<div id="sections-container">
<!-- Sections will be loaded here -->
</div>
</div>
<!-- Sections content -->
<div id="sections-content" style="display: none;">
<div class="card mb-4">
<div class="card-header">
<h5>Sections</h5>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-striped table-sm">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Description</th>
<th>Servers</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="sections-table-body">
<!-- Sections will be loaded here -->
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Servers content -->
<div id="servers-content" style="display: none;">
<div class="card mb-4">
<div class="card-header">
<h5>Servers</h5>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-striped table-sm">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Section</th>
<th>Status</th>
<th>Type</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="servers-table-body">
<!-- Servers will be loaded here -->
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Tasks content -->
<div id="tasks-content" style="display: none;">
<div class="card mb-4">
<div class="card-header">
<h5>Tasks</h5>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-striped table-sm">
<thead>
<tr>
<th>ID</th>
<th>Type</th>
<th>Status</th>
<th>Created</th>
<th>Updated</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="tasks-table-body">
<!-- Tasks will be loaded here -->
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Settings content -->
<div id="settings-content" style="display: none;">
<div class="card mb-4">
<div class="card-header">
<h5>Panel Settings</h5>
</div>
<div class="card-body">
<form id="panel-settings-form">
<div class="mb-3">
<label for="panel-name" class="form-label">Panel Name</label>
<input type="text" class="form-control" id="panel-name">
</div>
<div class="mb-3">
<label for="panel-version" class="form-label">Version</label>
<input type="text" class="form-control" id="panel-version" readonly>
</div>
<div class="mb-3">
<label for="global-settings" class="form-label">Global Settings</label>
<textarea class="form-control" id="global-settings" rows="10"></textarea>
<div class="form-text">JSON format. These settings will be applied to all servers unless overridden.</div>
</div>
<button type="submit" class="btn btn-primary">Save Settings</button>
</form>
</div>
</div>
</div>
</main>
</div>
</div>
<!-- Add Section Modal -->
<div class="modal fade" id="add-section-modal" tabindex="-1" aria-labelledby="add-section-modal-label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="add-section-modal-label">Add Section</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form id="add-section-form">
<div class="mb-3">
<label for="section-name" class="form-label">Section Name</label>
<input type="text" class="form-control" id="section-name" required>
</div>
<div class="mb-3">
<label for="section-description" class="form-label">Description</label>
<textarea class="form-control" id="section-description" rows="3"></textarea>
</div>
<div class="mb-3">
<label for="section-settings" class="form-label">Settings (JSON)</label>
<textarea class="form-control" id="section-settings" rows="5"></textarea>
<div class="form-text">Optional. JSON format for section-specific settings.</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="add-section-submit">Add Section</button>
</div>
</div>
</div>
</div>
<!-- Add Server Modal -->
<div class="modal fade" id="add-server-modal" tabindex="-1" aria-labelledby="add-server-modal-label" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="add-server-modal-label">Add Server</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form id="add-server-form">
<div class="mb-3">
<label for="server-name" class="form-label">Server Name</label>
<input type="text" class="form-control" id="server-name" required>
</div>
<div class="mb-3">
<label for="server-section" class="form-label">Section</label>
<select class="form-select" id="server-section" required>
<!-- Sections will be loaded here -->
</select>
</div>
<div class="mb-3">
<label for="server-description" class="form-label">Description</label>
<textarea class="form-control" id="server-description" rows="2"></textarea>
</div>
<div class="mb-3">
<label for="server-runtime-type" class="form-label">Runtime Type</label>
<select class="form-select" id="server-runtime-type" required>
<option value="docker_image">Docker Image</option>
<option value="npx_command">NPX Command</option>
</select>
</div>
<div class="mb-3">
<label for="server-command" class="form-label">Command/Image</label>
<input type="text" class="form-control" id="server-command" required>
<div class="form-text">Docker image name or NPX command</div>
</div>
<div class="mb-3">
<label for="server-args" class="form-label">Arguments</label>
<input type="text" class="form-control" id="server-args">
<div class="form-text">Command arguments, space-separated</div>
</div>
<div class="mb-3">
<label for="server-working-dir" class="form-label">Working Directory</label>
<input type="text" class="form-control" id="server-working-dir">
</div>
<div class="mb-3">
<label for="server-ports" class="form-label">Ports</label>
<input type="text" class="form-control" id="server-ports">
<div class="form-text">Comma-separated list of ports (e.g., 8080:TCP,8081:UDP)</div>
</div>
<div class="mb-3">
<label for="server-settings" class="form-label">Settings (JSON)</label>
<textarea class="form-control" id="server-settings" rows="5"></textarea>
<div class="form-text">Optional. JSON format for server-specific settings.</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="add-server-submit">Add Server</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script src="static/js/main.js"></script>
</body>
</html>