mirror of
https://github.com/absmach/magistrala.git
synced 2026-06-22 20:00:22 +00:00
Dušan Borovčanin
182 lines
5.8 KiB
HTML
182 lines
5.8 KiB
HTML
<!--
|
|
Copyright (c) Abstract Machines
|
|
SPDX-License-Identifier: Apache-2.0
|
|
-->
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Magistrala API Documentation</title>
|
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/swagger-ui-dist@5.30.3/swagger-ui.css">
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.topbar {
|
|
display: none;
|
|
}
|
|
.service-selector {
|
|
background: #1b1b1b;
|
|
padding: 20px;
|
|
text-align: center;
|
|
}
|
|
.service-selector h1 {
|
|
color: #fff;
|
|
margin: 0 0 15px 0;
|
|
font-family: sans-serif;
|
|
}
|
|
.service-dropdown-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.service-dropdown-container label {
|
|
color: #fff;
|
|
font-family: sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
.service-dropdown {
|
|
background: #2d2d2d;
|
|
color: white;
|
|
border: 1px solid #4990e2;
|
|
padding: 10px 40px 10px 15px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
min-width: 200px;
|
|
appearance: none;
|
|
background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="%23ffffff" d="M6 9L1 4h10z"/></svg>');
|
|
background-repeat: no-repeat;
|
|
background-position: right 12px center;
|
|
}
|
|
.service-dropdown:hover {
|
|
background-color: #3a3a3a;
|
|
border-color: #357abd;
|
|
}
|
|
.service-dropdown:focus {
|
|
outline: none;
|
|
border-color: #4990e2;
|
|
box-shadow: 0 0 0 2px rgba(73, 144, 226, 0.3);
|
|
}
|
|
|
|
/* Responsive styles for mobile */
|
|
@media (max-width: 768px) {
|
|
.service-selector {
|
|
padding: 15px 10px;
|
|
}
|
|
.service-selector h1 {
|
|
font-size: 1.5rem;
|
|
margin: 0 0 12px 0;
|
|
}
|
|
.service-dropdown-container {
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
.service-dropdown-container label {
|
|
font-size: 13px;
|
|
}
|
|
.service-dropdown {
|
|
width: 100%;
|
|
max-width: 300px;
|
|
min-width: auto;
|
|
font-size: 13px;
|
|
padding: 8px 35px 8px 12px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.service-selector h1 {
|
|
font-size: 1.25rem;
|
|
}
|
|
.service-dropdown {
|
|
max-width: 250px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="service-selector">
|
|
<h1>Magistrala API Documentation</h1>
|
|
<div class="service-dropdown-container">
|
|
<label for="serviceDropdown">Select Service:</label>
|
|
<select id="serviceDropdown" class="service-dropdown"></select>
|
|
</div>
|
|
</div>
|
|
<div id="swagger-ui"></div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/swagger-ui-dist@5.30.3/swagger-ui-bundle.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/swagger-ui-dist@5.30.3/swagger-ui-standalone-preset.js"></script>
|
|
<script>
|
|
// Available API specifications
|
|
const APIs = APIS_PLACEHOLDER;
|
|
|
|
// Get the service from URL query parameter, default to first service
|
|
function getServiceFromURL() {
|
|
const params = new URLSearchParams(window.location.search);
|
|
const service = params.get('service');
|
|
return service && APIs.includes(service) ? service : APIs[0];
|
|
}
|
|
|
|
// Update URL with selected service
|
|
function updateURL(service) {
|
|
const url = new URL(window.location);
|
|
url.searchParams.set('service', service);
|
|
window.history.pushState({}, '', url);
|
|
}
|
|
|
|
// Create service selector dropdown
|
|
function createServiceDropdown() {
|
|
const dropdown = document.getElementById('serviceDropdown');
|
|
const currentService = getServiceFromURL();
|
|
|
|
APIs.forEach(api => {
|
|
const option = document.createElement('option');
|
|
option.value = api;
|
|
let serviceName = api.replace('.yaml', '').replace(/^\w/, c => c.toUpperCase());
|
|
if (serviceName.toLowerCase() === 'http') {
|
|
serviceName = 'HTTP';
|
|
}
|
|
option.textContent = serviceName;
|
|
if (api === currentService) {
|
|
option.selected = true;
|
|
}
|
|
dropdown.appendChild(option);
|
|
});
|
|
|
|
// Handle dropdown change
|
|
dropdown.addEventListener('change', (e) => {
|
|
const selectedApi = e.target.value;
|
|
loadSwaggerUI(selectedApi);
|
|
updateURL(selectedApi);
|
|
});
|
|
}
|
|
|
|
// Load Swagger UI with specified API spec
|
|
function loadSwaggerUI(apiSpec) {
|
|
SwaggerUIBundle({
|
|
url: apiSpec,
|
|
dom_id: '#swagger-ui',
|
|
deepLinking: true,
|
|
presets: [
|
|
SwaggerUIBundle.presets.apis,
|
|
SwaggerUIStandalonePreset
|
|
],
|
|
plugins: [
|
|
SwaggerUIBundle.plugins.DownloadUrl
|
|
],
|
|
layout: "StandaloneLayout"
|
|
});
|
|
}
|
|
|
|
// Initialize
|
|
createServiceDropdown();
|
|
loadSwaggerUI(getServiceFromURL());
|
|
</script>
|
|
</body>
|
|
</html>
|