291 lines
15 KiB
HTML
291 lines
15 KiB
HTML
<div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 overflow-hidden">
|
|
<table id="roster-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 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 select-none" onclick="sortTable('status')">
|
|
<div class="flex items-center gap-1">
|
|
Status
|
|
<span class="sort-indicator" data-column="status"></span>
|
|
</div>
|
|
</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 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 select-none" onclick="sortTable('id')">
|
|
<div class="flex items-center gap-1">
|
|
Unit ID
|
|
<span class="sort-indicator" data-column="id"></span>
|
|
</div>
|
|
</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 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 select-none" onclick="sortTable('type')">
|
|
<div class="flex items-center gap-1">
|
|
Type
|
|
<span class="sort-indicator" data-column="type"></span>
|
|
</div>
|
|
</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 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 select-none" onclick="sortTable('last_seen')">
|
|
<div class="flex items-center gap-1">
|
|
Last Seen
|
|
<span class="sort-indicator" data-column="last_seen"></span>
|
|
</div>
|
|
</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 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 select-none" onclick="sortTable('age')">
|
|
<div class="flex items-center gap-1">
|
|
Age
|
|
<span class="sort-indicator" data-column="age"></span>
|
|
</div>
|
|
</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 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 select-none" onclick="sortTable('note')">
|
|
<div class="flex items-center gap-1">
|
|
Note
|
|
<span class="sort-indicator" data-column="note"></span>
|
|
</div>
|
|
</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 id="roster-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"
|
|
data-status="{{ unit.status }}"
|
|
data-id="{{ unit.id }}"
|
|
data-type="{{ unit.device_type }}"
|
|
data-last-seen="{{ unit.last_seen }}"
|
|
data-age="{{ unit.age }}"
|
|
data-note="{{ unit.note if unit.note else '' }}">
|
|
<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>
|
|
|
|
<style>
|
|
.sort-indicator::after {
|
|
content: '⇅';
|
|
opacity: 0.3;
|
|
font-size: 12px;
|
|
}
|
|
.sort-indicator.asc::after {
|
|
content: '↑';
|
|
opacity: 1;
|
|
}
|
|
.sort-indicator.desc::after {
|
|
content: '↓';
|
|
opacity: 1;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
// Update timestamp
|
|
document.getElementById('last-updated').textContent = new Date().toLocaleTimeString();
|
|
|
|
// Sorting state
|
|
let currentSort = { column: null, direction: 'asc' };
|
|
|
|
function sortTable(column) {
|
|
const tbody = document.getElementById('roster-tbody');
|
|
const rows = Array.from(tbody.getElementsByTagName('tr'));
|
|
|
|
// Determine sort direction
|
|
if (currentSort.column === column) {
|
|
currentSort.direction = currentSort.direction === 'asc' ? 'desc' : 'asc';
|
|
} else {
|
|
currentSort.column = column;
|
|
currentSort.direction = 'asc';
|
|
}
|
|
|
|
// Sort rows
|
|
rows.sort((a, b) => {
|
|
let aVal = a.getAttribute(`data-${column}`) || '';
|
|
let bVal = b.getAttribute(`data-${column}`) || '';
|
|
|
|
// Special handling for different column types
|
|
if (column === 'age') {
|
|
// Parse age strings like "2h 15m" or "45m" or "3d 5h"
|
|
aVal = parseAge(aVal);
|
|
bVal = parseAge(bVal);
|
|
} else if (column === 'status') {
|
|
// Sort by status priority: Missing > Pending > OK
|
|
const statusOrder = { 'Missing': 0, 'Pending': 1, 'OK': 2, '': 3 };
|
|
aVal = statusOrder[aVal] !== undefined ? statusOrder[aVal] : 999;
|
|
bVal = statusOrder[bVal] !== undefined ? statusOrder[bVal] : 999;
|
|
} else if (column === 'last_seen') {
|
|
// Sort by date
|
|
aVal = new Date(aVal).getTime() || 0;
|
|
bVal = new Date(bVal).getTime() || 0;
|
|
} else {
|
|
// String comparison (case-insensitive)
|
|
aVal = aVal.toLowerCase();
|
|
bVal = bVal.toLowerCase();
|
|
}
|
|
|
|
if (aVal < bVal) return currentSort.direction === 'asc' ? -1 : 1;
|
|
if (aVal > bVal) return currentSort.direction === 'asc' ? 1 : -1;
|
|
return 0;
|
|
});
|
|
|
|
// Re-append rows in sorted order
|
|
rows.forEach(row => tbody.appendChild(row));
|
|
|
|
// Update sort indicators
|
|
updateSortIndicators();
|
|
}
|
|
|
|
function parseAge(ageStr) {
|
|
// Parse age strings like "2h 15m", "45m", "3d 5h", "2w 3d"
|
|
if (!ageStr) return 0;
|
|
|
|
let totalMinutes = 0;
|
|
const weeks = ageStr.match(/(\d+)w/);
|
|
const days = ageStr.match(/(\d+)d/);
|
|
const hours = ageStr.match(/(\d+)h/);
|
|
const minutes = ageStr.match(/(\d+)m/);
|
|
|
|
if (weeks) totalMinutes += parseInt(weeks[1]) * 7 * 24 * 60;
|
|
if (days) totalMinutes += parseInt(days[1]) * 24 * 60;
|
|
if (hours) totalMinutes += parseInt(hours[1]) * 60;
|
|
if (minutes) totalMinutes += parseInt(minutes[1]);
|
|
|
|
return totalMinutes;
|
|
}
|
|
|
|
function updateSortIndicators() {
|
|
// Clear all indicators
|
|
document.querySelectorAll('.sort-indicator').forEach(indicator => {
|
|
indicator.className = 'sort-indicator';
|
|
});
|
|
|
|
// Set current indicator
|
|
if (currentSort.column) {
|
|
const indicator = document.querySelector(`.sort-indicator[data-column="${currentSort.column}"]`);
|
|
if (indicator) {
|
|
indicator.className = `sort-indicator ${currentSort.direction}`;
|
|
}
|
|
}
|
|
}
|
|
</script>
|