Mirrors/wireguard_webadmin
1
0
Fork 0
mirror of https://github.com/eduardogsilva/wireguard_webadmin.git synced 2026-02-20 11:36:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Refactor API documentation layout: improve structure and enhance collapsible sections for parameters, returns, and examples

Browse Source
This commit is contained in:
Eduardo Silva
2026-02-11 17:17:45 -03:00
parent 8c7deb9f88 f2dc9942d9
commit 34a74d4de6
1 changed files with 73 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

209
templates/api_v2/api_documentation.html
View File

@@ -2,151 +2,88 @@
{% load i18n %} {% load i18n %}
{% block content %} {% block content %}
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<h2 class="mb-4">{% trans 'API Documentation' %}</h2> <h2 class="mb-4">{% trans 'API Documentation' %}</h2>
<div id="accordion"> {% for doc in docs %}
{% for doc in docs %} <div class="card mb-4">
<div class="card mb-2"> <div class="card-header">
<div class="card-header" id="heading-{{ forloop.counter }}"> <h5 class="mb-0">
<h5 class="mb-0"> {% for method in doc.methods %}
<button class="btn btn-link btn-block text-left collapsed d-flex align-items-center" <span class="badge badge-primary mr-2">{{ method }}</span>
type="button" data-toggle="collapse" data-target="#collapse-{{ forloop.counter }}" {% endfor %}
aria-expanded="false" aria-controls="collapse-{{ forloop.counter }}" <code>/api/v2/{{ doc.url_pattern }}</code>
style="text-decoration: none; color: inherit;"> </h5>
<i class="fas fa-chevron-right mr-3 text-muted"></i> </div>
<div class="mr-auto"> <div class="card-body">
{% for method in doc.methods %} <p class="lead">{{ doc.summary }}</p>
<span class="badge badge-primary mr-2">{{ method }}</span>
{% endfor %}
<code>/api/v2/{{ doc.url_pattern }}</code>
</div>
<small class="text-muted ml-3 d-none d-md-block">{{ doc.summary|truncatechars:100 }}</small>
</button>
</h5>
</div>
<div id="collapse-{{ forloop.counter }}" class="collapse" <p><strong>{% trans 'Authentication' %}:</strong> {{ doc.auth }}</p>
aria-labelledby="heading-{{ forloop.counter }}" data-parent="#accordion">
<div class="card-body">
<p class="lead">{{ doc.summary }}</p>
<p><strong>{% trans 'Authentication' %}:</strong> {{ doc.auth }}</p> {% if doc.params %}
<h6 class="mt-3">{% trans 'Parameters' %}</h6>
<!-- Parameters Section --> <table class="table table-sm table-bordered">
{% if doc.params %} <thead>
<div class="mt-3"> <tr>
<h6 class="mb-0 pointer" data-toggle="collapse" data-target="#params-{{ forloop.counter }}" <th>{% trans 'Name' %}</th>
aria-expanded="false" aria-controls="params-{{ forloop.counter }}" <th>{% trans 'In' %}</th>
style="cursor: pointer;"> <th>{% trans 'Type' %}</th>
<i class="fas fa-chevron-right mr-2 text-muted"></i> {% trans 'Parameters' %} <th>{% trans 'Required' %}</th>
</h6> <th>{% trans 'Description' %}</th>
<div id="params-{{ forloop.counter }}" class="collapse mt-2"> </tr>
<table class="table table-sm table-bordered"> </thead>
<thead> <tbody>
<tr> {% for param in doc.params %}
<th>{% trans 'Name' %}</th> <tr>
<th>{% trans 'In' %}</th> <td><code>{{ param.name }}</code></td>
<th>{% trans 'Type' %}</th> <td>{{ param.in }}</td>
<th>{% trans 'Required' %}</th> <td>{{ param.type }}</td>
<th>{% trans 'Description' %}</th> <td>
</tr> {% if param.required %}
</thead> <span class="badge badge-danger">{% trans 'Yes' %}</span>
<tbody> {% else %}
{% for param in doc.params %} <span class="badge badge-secondary">{% trans 'No' %}</span>
<tr>
<td><code>{{ param.name }}</code></td>
<td>{{ param.in }}</td>
<td>{{ param.type }}</td>
<td>
{% if param.required %}
<span class="badge badge-danger">{% trans 'Yes' %}</span>
{% else %}
<span class="badge badge-secondary">{% trans 'No' %}</span>
{% endif %}
</td>
<td>
{{ param.description }}
{% if param.example %}
<br><small class="text-muted">{% trans 'Example' %}: {{ param.example }}</small>
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
{% endif %} {% endif %}
</td>
<!-- Returns Section --> <td>
{% if doc.returns %} {{ param.description }}
<div class="mt-3"> {% if param.example %}
<h6 class="mb-0 pointer" data-toggle="collapse" data-target="#returns-{{ forloop.counter }}" <br><small class="text-muted">{% trans 'Example' %}: {{ param.example }}</small>
aria-expanded="false" aria-controls="returns-{{ forloop.counter }}"
style="cursor: pointer;">
<i class="fas fa-chevron-right mr-2 text-muted"></i> {% trans 'Returns' %}
</h6>
<div id="returns-{{ forloop.counter }}" class="collapse mt-2">
<ul class="list-group">
{% for ret in doc.returns %}
<li class="list-group-item">
<strong>{{ ret.status }}</strong>
<pre class="bg-light p-2 mt-2"><code>{{ ret.body|pprint }}</code></pre>
</li>
{% endfor %}
</ul>
</div>
</div>
{% endif %} {% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}
<!-- Examples Section --> {% if doc.returns %}
{% if doc.examples %} <h6 class="mt-3">{% trans 'Returns' %}</h6>
<div class="mt-3"> <ul class="list-group">
<h6 class="mb-0 pointer" data-toggle="collapse" {% for ret in doc.returns %}
data-target="#examples-{{ forloop.counter }}" aria-expanded="false" <li class="list-group-item">
aria-controls="examples-{{ forloop.counter }}" style="cursor: pointer;"> <strong>{{ ret.status }}</strong>
<i class="fas fa-chevron-right mr-2 text-muted"></i> {% trans 'Examples' %} <pre class="bg-light p-2 mt-2"><code>{{ ret.body|pprint }}</code></pre>
</h6> </li>
<div id="examples-{{ forloop.counter }}" class="collapse mt-2"> {% endfor %}
{% for key, example in doc.examples.items %} </ul>
<div class="card bg-light mb-2"> {% endif %}
<div class="card-body p-2">
<strong>{{ key }}</strong> {% if doc.examples %}
<pre class="mb-0"><code>{{ example|pprint }}</code></pre> <h6 class="mt-3">{% trans 'Examples' %}</h6>
</div> {% for key, example in doc.examples.items %}
</div> <div class="card bg-light mb-2">
{% endfor %} <div class="card-body p-2">
</div> <strong>{{ key }}</strong>
</div> <pre class="mb-0"><code>{{ example|pprint }}</code></pre>
{% endif %}
</div>
</div>
</div> </div>
</div>
{% endfor %} {% endfor %}
{% endif %}
</div> </div>
</div> </div>
{% endfor %}
</div> </div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
// Function to toggle icon class on collapse events
function setupIconToggle(collapseId, iconSelector) {
$('#' + collapseId).on('show.bs.collapse', function () {
var trigger = $('[data-target="#' + collapseId + '"]');
trigger.find(iconSelector).first().removeClass('fa-chevron-right').addClass('fa-chevron-down');
}).on('hide.bs.collapse', function () {
var trigger = $('[data-target="#' + collapseId + '"]');
trigger.find(iconSelector).first().removeClass('fa-chevron-down').addClass('fa-chevron-right');
});
}
// Setup for all collapsible elements
$('.collapse').each(function () {
var id = $(this).attr('id');
setupIconToggle(id, '.fa-chevron-right, .fa-chevron-down');
});
});
</script>
{% endblock %} {% endblock %}