127 lines
8.2 KiB
HTML
127 lines
8.2 KiB
HTML
{% if units is defined %}
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full">
|
|
<thead class="bg-gray-50 dark:bg-slate-700 border-b border-gray-200 dark:border-gray-600">
|
|
<tr>
|
|
{% set next_order = 'desc' if (sort == 'id' and order == 'asc') else 'asc' %}
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-slate-600"
|
|
hx-get="/api/seismo-dashboard/units?sort=id&order={{ next_order }}&search={{ search }}&status={{ status }}&modem={{ modem }}"
|
|
hx-target="#seismo-units-list"
|
|
hx-swap="innerHTML">
|
|
<span class="flex items-center gap-1">
|
|
Unit ID
|
|
{% if sort == 'id' %}
|
|
<svg class="w-4 h-4 {% if order == 'desc' %}rotate-180{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path>
|
|
</svg>
|
|
{% endif %}
|
|
</span>
|
|
</th>
|
|
{% set next_order = 'desc' if (sort == 'status' and order == 'asc') else 'asc' %}
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-slate-600"
|
|
hx-get="/api/seismo-dashboard/units?sort=status&order={{ next_order }}&search={{ search }}&status={{ status }}&modem={{ modem }}"
|
|
hx-target="#seismo-units-list"
|
|
hx-swap="innerHTML">
|
|
<span class="flex items-center gap-1">
|
|
Status
|
|
{% if sort == 'status' %}
|
|
<svg class="w-4 h-4 {% if order == 'desc' %}rotate-180{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path>
|
|
</svg>
|
|
{% endif %}
|
|
</span>
|
|
</th>
|
|
{% set next_order = 'desc' if (sort == 'modem' and order == 'asc') else 'asc' %}
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-slate-600"
|
|
hx-get="/api/seismo-dashboard/units?sort=modem&order={{ next_order }}&search={{ search }}&status={{ status }}&modem={{ modem }}"
|
|
hx-target="#seismo-units-list"
|
|
hx-swap="innerHTML">
|
|
<span class="flex items-center gap-1">
|
|
Modem
|
|
{% if sort == 'modem' %}
|
|
<svg class="w-4 h-4 {% if order == 'desc' %}rotate-180{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path>
|
|
</svg>
|
|
{% endif %}
|
|
</span>
|
|
</th>
|
|
{% set next_order = 'desc' if (sort == 'location' and order == 'asc') else 'asc' %}
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-slate-600"
|
|
hx-get="/api/seismo-dashboard/units?sort=location&order={{ next_order }}&search={{ search }}&status={{ status }}&modem={{ modem }}"
|
|
hx-target="#seismo-units-list"
|
|
hx-swap="innerHTML">
|
|
<span class="flex items-center gap-1">
|
|
Location
|
|
{% if sort == 'location' %}
|
|
<svg class="w-4 h-4 {% if order == 'desc' %}rotate-180{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path>
|
|
</svg>
|
|
{% endif %}
|
|
</span>
|
|
</th>
|
|
{% set next_order = 'desc' if (sort == 'last_calibrated' and order == 'asc') else 'asc' %}
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-slate-600"
|
|
hx-get="/api/seismo-dashboard/units?sort=last_calibrated&order={{ next_order }}&search={{ search }}&status={{ status }}&modem={{ modem }}"
|
|
hx-target="#seismo-units-list"
|
|
hx-swap="innerHTML">
|
|
<span class="flex items-center gap-1">
|
|
Last Calibrated
|
|
{% if sort == 'last_calibrated' %}
|
|
<svg class="w-4 h-4 {% if order == 'desc' %}rotate-180{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path>
|
|
</svg>
|
|
{% endif %}
|
|
</span>
|
|
</th>
|
|
{% set next_order = 'desc' if (sort == 'notes' and order == 'asc') else 'asc' %}
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-slate-600"
|
|
hx-get="/api/seismo-dashboard/units?sort=notes&order={{ next_order }}&search={{ search }}&status={{ status }}&modem={{ modem }}"
|
|
hx-target="#seismo-units-list"
|
|
hx-swap="innerHTML">
|
|
<span class="flex items-center gap-1">
|
|
Notes
|
|
{% if sort == 'notes' %}
|
|
<svg class="w-4 h-4 {% if order == 'desc' %}rotate-180{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path>
|
|
</svg>
|
|
{% endif %}
|
|
</span>
|
|
</th>
|
|
<th class="px-4 py-3 text-right text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
|
|
{% for unit in units %}
|
|
{% include "partials/seismo_row_view.html" %}
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{% if search or status or modem %}
|
|
<div class="mt-4 text-sm text-gray-600 dark:text-gray-400">
|
|
Found {{ units|length }} seismograph(s)
|
|
{% if search %} matching "{{ search }}"{% endif %}
|
|
{% if status %} ({{ status }}){% endif %}
|
|
{% if modem %} ({{ 'with modem' if modem == 'with' else 'without modem' }}){% endif %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% else %}
|
|
<div class="text-center py-12">
|
|
<svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
|
|
</svg>
|
|
<h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">No seismographs found</h3>
|
|
{% if search %}
|
|
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">No seismographs match "{{ search }}"</p>
|
|
<button onclick="document.getElementById('seismo-search').value = ''; htmx.trigger('#seismo-search', 'keyup');"
|
|
class="mt-3 text-blue-600 dark:text-blue-400 hover:underline">
|
|
Clear search
|
|
</button>
|
|
{% else %}
|
|
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Get started by adding a seismograph unit from the roster page.</p>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|