82 lines
3.5 KiB
HTML
82 lines
3.5 KiB
HTML
{% extends 'dashboard.html' %}
|
|
|
|
{% block page %}
|
|
|
|
<div class="px-4 sm:px-6 lg:px-8 py-8">
|
|
<div class="flex items-center mb-6" data-id="51">
|
|
<h1 class="text-2xl font-bold text-gray-900">HTTP Functions</h1>
|
|
<button
|
|
class="inline-flex items-center px-4 py-2 ml-auto bg-green-600 hover:bg-green-700 text-white font-medium rounded-lg transition-colors duration-200"
|
|
hx-get="{{ url_for('http.new') }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class="w-5 h-5 mr-2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path>
|
|
</svg>
|
|
Add Function
|
|
</button>
|
|
</div>
|
|
|
|
<div class="mb-6 flex gap-4">
|
|
<input type="text" name="q" placeholder="Search functions..."
|
|
class="flex-grow px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"
|
|
value="{{ search_query }}" hx-get="{{ url_for('http.overview') }}" hx-trigger="keyup changed delay:500ms"
|
|
hx-target="#function-list" hx-headers='{"HX-Target": "function-list"}' hx-push-url="true">
|
|
|
|
<button onclick="toggleAllDetails()" id="toggle-btn"
|
|
class="px-4 py-2 bg-white border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 font-medium transition-colors duration-200 whitespace-nowrap">
|
|
Expand All
|
|
</button>
|
|
</div>
|
|
|
|
<div id="function-list">
|
|
{% block function_list %}
|
|
{% from 'dashboard/http_functions/_function_list.html' import render_functions %}
|
|
{{ render_functions(http_functions) }}
|
|
|
|
{% if http_functions|length == 0 %}
|
|
<div class="py-12">
|
|
<div class="text-center">
|
|
<svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"
|
|
aria-hidden="true">
|
|
<path vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
|
|
</svg>
|
|
<h3 class="mt-2 text-lg font-medium text-gray-900">No functions found</h3>
|
|
<p class="mt-1 text-sm text-gray-500">Get started by creating a new function.</p>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endblock %}
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function toggleAllDetails() {
|
|
const details = document.querySelectorAll('#function-list details');
|
|
const btn = document.getElementById('toggle-btn');
|
|
const isExpanding = btn.textContent.trim() === 'Expand All';
|
|
|
|
details.forEach(detail => {
|
|
if (isExpanding) {
|
|
detail.setAttribute('open', '');
|
|
} else {
|
|
detail.removeAttribute('open');
|
|
}
|
|
});
|
|
|
|
btn.textContent = isExpanding ? 'Collapse All' : 'Expand All';
|
|
}
|
|
|
|
// Reset button state when HTMX updates the list
|
|
document.body.addEventListener('htmx:afterSwap', function (evt) {
|
|
if (evt.detail.target.id === 'function-list') {
|
|
const btn = document.getElementById('toggle-btn');
|
|
if (btn) {
|
|
btn.textContent = 'Expand All';
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
{% endblock %} |