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

Enhance API documentation layout and interactivity: implement collapsible sections for methods, parameters, returns, and examples

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

77
templates/api_v2/api_documentation.html
View File

@@ -2,27 +2,47 @@
{% 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">
<button class="btn btn-link btn-block text-left collapsed d-flex align-items-center"
type="button" data-toggle="collapse" data-target="#collapse-{{ forloop.counter }}"
aria-expanded="false" aria-controls="collapse-{{ forloop.counter }}"
style="text-decoration: none; color: inherit;">
<i class="fas fa-chevron-right mr-3 text-muted"></i>
<div class="mr-auto">
{% for method in doc.methods %} {% for method in doc.methods %}
<span class="badge badge-primary mr-2">{{ method }}</span> <span class="badge badge-primary mr-2">{{ method }}</span>
{% endfor %} {% endfor %}
<code>/api/v2/{{ doc.url_pattern }}</code> <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> </h5>
</div> </div>
<div id="collapse-{{ forloop.counter }}" class="collapse"
aria-labelledby="heading-{{ forloop.counter }}" data-parent="#accordion">
<div class="card-body"> <div class="card-body">
<p class="lead">{{ doc.summary }}</p> <p class="lead">{{ doc.summary }}</p>
<p><strong>{% trans 'Authentication' %}:</strong> {{ doc.auth }}</p> <p><strong>{% trans 'Authentication' %}:</strong> {{ doc.auth }}</p>
<!-- Parameters Section -->
{% if doc.params %} {% if doc.params %}
<h6 class="mt-3">{% trans 'Parameters' %}</h6> <div class="mt-3">
<h6 class="mb-0 pointer" data-toggle="collapse" data-target="#params-{{ forloop.counter }}"
aria-expanded="false" aria-controls="params-{{ forloop.counter }}"
style="cursor: pointer;">
<i class="fas fa-chevron-right mr-2 text-muted"></i> {% trans 'Parameters' %}
</h6>
<div id="params-{{ forloop.counter }}" class="collapse mt-2">
<table class="table table-sm table-bordered"> <table class="table table-sm table-bordered">
<thead> <thead>
<tr> <tr>
@@ -56,10 +76,19 @@
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
</div>
</div>
{% endif %} {% endif %}
<!-- Returns Section -->
{% if doc.returns %} {% if doc.returns %}
<h6 class="mt-3">{% trans 'Returns' %}</h6> <div class="mt-3">
<h6 class="mb-0 pointer" data-toggle="collapse" data-target="#returns-{{ forloop.counter }}"
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"> <ul class="list-group">
{% for ret in doc.returns %} {% for ret in doc.returns %}
<li class="list-group-item"> <li class="list-group-item">
@@ -68,10 +97,19 @@
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>
</div>
</div>
{% endif %} {% endif %}
<!-- Examples Section -->
{% if doc.examples %} {% if doc.examples %}
<h6 class="mt-3">{% trans 'Examples' %}</h6> <div class="mt-3">
<h6 class="mb-0 pointer" data-toggle="collapse"
data-target="#examples-{{ forloop.counter }}" aria-expanded="false"
aria-controls="examples-{{ forloop.counter }}" style="cursor: pointer;">
<i class="fas fa-chevron-right mr-2 text-muted"></i> {% trans 'Examples' %}
</h6>
<div id="examples-{{ forloop.counter }}" class="collapse mt-2">
{% for key, example in doc.examples.items %} {% for key, example in doc.examples.items %}
<div class="card bg-light mb-2"> <div class="card bg-light mb-2">
<div class="card-body p-2"> <div class="card-body p-2">
@@ -80,10 +118,35 @@
</div> </div>
</div> </div>
{% endfor %} {% endfor %}
</div>
</div>
{% endif %} {% endif %}
</div> </div>
</div> </div>
</div>
{% endfor %} {% endfor %}
</div> </div>
</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 %}