Enhanced API Swagger documentation and improved web interface navigation with dropdown menus and better organization. API Changes (api/main.py): ========================== - Enhanced FastAPI app description with architecture diagram - Added detailed rate limiting information - Added server configurations (production + local) - Added contact and license information - Enhanced all endpoint descriptions with: * Detailed parameter descriptions * Response descriptions * Error responses * Rate limit information * Usage examples - Added Field descriptions to all Pydantic models - Added schema examples for better Swagger UI - Enhanced LLM endpoints with AI rate limiting details - Added status codes (201, 404, 429, 500) to endpoints - Improved startup message with docs URLs Swagger UI Improvements: - Better organized endpoint groups (Root, Health, Items, Users, LLM) - Detailed request/response schemas - Interactive examples for all endpoints - Rate limiting documentation - Architecture overview in description Web Changes (web/templates/base.html): ====================================== - Added dropdown menu for API documentation with: * API Root (/) * Swagger UI (/docs) * ReDoc (/redoc) * OpenAPI JSON (/openapi.json) - Added emoji icons to all menu items for better UX - Added tooltips (title attributes) to all links - Renamed "API Config" to "Settings" for clarity - Added CSS for dropdown menu functionality - Improved footer text - Better visual hierarchy with icons Navigation Menu: - 🏠 Home - 📦 Items - 👥 Users - 🤖 LLM Chat - 📚 API Docs (dropdown with 4 options) - ⚙️ Settings All endpoints now have comprehensive documentation visible in Swagger UI at https://commandware.it/api/docs 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
148 lines
5.6 KiB
HTML
148 lines
5.6 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>{% block title %}API Demo{% endblock %}</title>
|
|
<link rel="stylesheet" href="/static/css/style.css" />
|
|
<style>
|
|
/* Dropdown Menu Styles */
|
|
.nav-menu {
|
|
list-style: none;
|
|
display: flex;
|
|
gap: 1rem;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.dropdown {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.dropdown-content {
|
|
display: none;
|
|
position: absolute;
|
|
background-color: #2c3e50;
|
|
min-width: 200px;
|
|
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3);
|
|
z-index: 1000;
|
|
border-radius: 4px;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.dropdown-content a {
|
|
color: white;
|
|
padding: 12px 16px;
|
|
text-decoration: none;
|
|
display: block;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.dropdown-content a:hover {
|
|
background-color: #34495e;
|
|
}
|
|
|
|
.dropdown:hover .dropdown-content {
|
|
display: block;
|
|
}
|
|
|
|
.dropbtn {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav class="navbar">
|
|
<div class="container">
|
|
<div class="nav-brand">
|
|
<h2>🚀 API7EE Demo</h2>
|
|
</div>
|
|
<ul class="nav-menu">
|
|
<li><a href="/" title="Home page">🏠 Home</a></li>
|
|
<li><a href="/items" title="Manage items inventory">📦 Items</a></li>
|
|
<li><a href="/users" title="Manage users">👥 Users</a></li>
|
|
<li><a href="/llm" title="AI-powered chat">🤖 LLM Chat</a></li>
|
|
<li class="dropdown">
|
|
<a href="#" class="dropbtn" title="API Documentation">📚 API Docs ▾</a>
|
|
<div class="dropdown-content">
|
|
<a href="/api/" target="_blank" title="API root endpoint">API Root</a>
|
|
<a href="/api/docs" target="_blank" title="Swagger UI documentation">Swagger UI</a>
|
|
<a href="/api/redoc" target="_blank" title="ReDoc documentation">ReDoc</a>
|
|
<a href="/api/openapi.json" target="_blank" title="OpenAPI JSON schema">OpenAPI JSON</a>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<a href="#" onclick="openApiConfig(event)" title="Configure API settings">⚙️ Settings</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- API Configuration Modal -->
|
|
<div id="api-config-modal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2>⚙️ API Configuration</h2>
|
|
<span class="close" onclick="closeApiConfig()"
|
|
>×</span
|
|
>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Configure the base URL for API requests:</p>
|
|
<div class="form-group">
|
|
<label for="api-base-url">API Base URL:</label>
|
|
<input
|
|
type="text"
|
|
id="api-base-url"
|
|
placeholder="https://commandware.it/api"
|
|
class="form-control"
|
|
/>
|
|
<small class="form-hint">
|
|
Examples:
|
|
<code>/api</code> (relative),
|
|
<code>https://commandware.it/api</code> (absolute),
|
|
<code>http://localhost:8001</code> (local)
|
|
</small>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Current Configuration:</label>
|
|
<div class="config-info">
|
|
<strong>Base URL:</strong>
|
|
<span id="current-api-url">-</span>
|
|
</div>
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button
|
|
class="btn btn-primary"
|
|
onclick="saveApiConfig()"
|
|
>
|
|
Save Configuration
|
|
</button>
|
|
<button
|
|
class="btn btn-secondary"
|
|
onclick="resetApiConfig()"
|
|
>
|
|
Reset to Default
|
|
</button>
|
|
<button class="btn" onclick="closeApiConfig()">
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<main class="container">{% block content %}{% endblock %}</main>
|
|
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<p>© 2025 API7EE Demo | Powered by FastAPI & API7 Enterprise Gateway</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="/static/js/app.js"></script>
|
|
{% block scripts %}{% endblock %}
|
|
</body>
|
|
</html>
|