166 lines
10 KiB
HTML
166 lines
10 KiB
HTML
<div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 overflow-hidden">
|
|
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
|
|
<thead class="bg-gray-50 dark:bg-gray-700">
|
|
<tr>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
|
Status
|
|
</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
|
Unit ID
|
|
</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
|
Type
|
|
</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
|
Details
|
|
</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
|
Last Seen
|
|
</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
|
Age
|
|
</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
|
Note
|
|
</th>
|
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
|
Actions
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white dark:bg-slate-800 divide-y divide-gray-200 dark:divide-gray-700">
|
|
{% for unit in units %}
|
|
<tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="flex items-center space-x-2">
|
|
{% if unit.status == 'OK' %}
|
|
<span class="w-3 h-3 rounded-full bg-green-500" title="OK"></span>
|
|
{% elif unit.status == 'Pending' %}
|
|
<span class="w-3 h-3 rounded-full bg-yellow-500" title="Pending"></span>
|
|
{% else %}
|
|
<span class="w-3 h-3 rounded-full bg-red-500" title="Missing"></span>
|
|
{% endif %}
|
|
|
|
{% if unit.deployed %}
|
|
<span class="w-2 h-2 rounded-full bg-blue-500" title="Deployed"></span>
|
|
{% else %}
|
|
<span class="w-2 h-2 rounded-full bg-gray-300 dark:bg-gray-600" title="Benched"></span>
|
|
{% endif %}
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<a href="/unit/{{ unit.id }}" class="text-sm font-medium text-seismo-orange hover:text-seismo-burgundy hover:underline">
|
|
{{ unit.id }}
|
|
</a>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
{% if unit.device_type == 'modem' %}
|
|
<span class="px-2 py-1 rounded-full bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300 text-xs font-medium">
|
|
Modem
|
|
</span>
|
|
{% else %}
|
|
<span class="px-2 py-1 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 text-xs font-medium">
|
|
Seismograph
|
|
</span>
|
|
{% endif %}
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="text-xs text-gray-600 dark:text-gray-400 space-y-1">
|
|
{% if unit.device_type == 'modem' %}
|
|
{% if unit.ip_address %}
|
|
<div><span class="font-mono">{{ unit.ip_address }}</span></div>
|
|
{% endif %}
|
|
{% if unit.phone_number %}
|
|
<div>{{ unit.phone_number }}</div>
|
|
{% endif %}
|
|
{% if unit.hardware_model %}
|
|
<div class="text-gray-500 dark:text-gray-500">{{ unit.hardware_model }}</div>
|
|
{% endif %}
|
|
{% else %}
|
|
{% if unit.next_calibration_due %}
|
|
<div>
|
|
<span class="text-gray-500 dark:text-gray-500">Cal Due:</span>
|
|
<span class="font-medium">{{ unit.next_calibration_due }}</span>
|
|
</div>
|
|
{% endif %}
|
|
{% if unit.deployed_with_modem_id %}
|
|
<div>
|
|
<span class="text-gray-500 dark:text-gray-500">Modem:</span>
|
|
<a href="/unit/{{ unit.deployed_with_modem_id }}" class="text-seismo-orange hover:underline font-medium">
|
|
{{ unit.deployed_with_modem_id }}
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
{% endif %}
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="text-sm text-gray-500 dark:text-gray-400">{{ unit.last_seen }}</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="text-sm
|
|
{% if unit.status == 'Missing' %}text-red-600 dark:text-red-400 font-semibold
|
|
{% elif unit.status == 'Pending' %}text-yellow-600 dark:text-yellow-400
|
|
{% else %}text-gray-500 dark:text-gray-400
|
|
{% endif %}">
|
|
{{ unit.age }}
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="text-sm text-gray-500 dark:text-gray-400 truncate max-w-xs" title="{{ unit.note }}">
|
|
{{ unit.note if unit.note else '-' }}
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
|
<div class="flex justify-end gap-2">
|
|
<button onclick="editUnit('{{ unit.id }}')"
|
|
class="text-seismo-orange hover:text-seismo-burgundy p-1" title="Edit">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
|
|
</svg>
|
|
</button>
|
|
{% if unit.deployed %}
|
|
<button onclick="toggleDeployed('{{ unit.id }}', false)"
|
|
class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 p-1" title="Mark as Benched">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
|
|
</svg>
|
|
</button>
|
|
{% else %}
|
|
<button onclick="toggleDeployed('{{ unit.id }}', true)"
|
|
class="text-green-600 hover:text-green-800 dark:text-green-400 dark:hover:text-green-300 p-1" title="Mark as Deployed">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
|
</svg>
|
|
</button>
|
|
{% endif %}
|
|
<button onclick="moveToIgnore('{{ unit.id }}')"
|
|
class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 p-1" title="Move to Ignore List">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"></path>
|
|
</svg>
|
|
</button>
|
|
<button onclick="deleteUnit('{{ unit.id }}')"
|
|
class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 p-1" title="Delete Unit">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
|
|
<!-- Last updated indicator -->
|
|
<div class="px-6 py-3 bg-gray-50 dark:bg-gray-700 text-xs text-gray-500 dark:text-gray-400 text-right">
|
|
Last updated: <span id="last-updated">{{ timestamp }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Update timestamp
|
|
document.getElementById('last-updated').textContent = new Date().toLocaleTimeString();
|
|
</script>
|