serversdown/terra-view
1
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

Full PWA mobile version added, bug fixes on deployment status, navigation links added

Browse Source
This commit is contained in:
serversdwn
2025-12-11 04:03:23 +00:00
parent 195df967e4
commit 274e390c3e
26 changed files with 2393 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
templates/base.html
View File

@@ -15,6 +15,16 @@
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<!-- Mobile CSS -->
<link rel="stylesheet" href="/static/mobile.css">
<!-- PWA Manifest -->
<link rel="manifest" href="/static/manifest.json">
<meta name="theme-color" content="#f48b1c">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="SFM">
<!-- Custom Tailwind Config -->
<script>
tailwind.config = {
@@ -59,9 +69,28 @@
{% block extra_head %}{% endblock %}
</head>
<body class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
<!-- Hamburger Button (Mobile Only) -->
<button id="hamburgerBtn" class="hamburger-btn md:hidden" onclick="toggleMenu()" aria-label="Menu">
<div class="hamburger-icon">
<div class="hamburger-line"></div>
<div class="hamburger-line"></div>
<div class="hamburger-line"></div>
</div>
</button>
<!-- Offline Indicator -->
<div id="offlineIndicator" class="offline-indicator">
📡 Offline - Changes will sync when connected
</div>
<!-- Sync Toast -->
<div id="syncToast" class="sync-toast">
✓ Synced successfully
</div>
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<aside class="w-64 bg-white dark:bg-slate-800 shadow-lg flex flex-col">
<!-- Sidebar (Responsive) -->
<aside id="sidebar" class="sidebar w-64 bg-white dark:bg-slate-800 shadow-lg flex flex-col">
<!-- Logo -->
<div class="p-6 border-b border-gray-200 dark:border-gray-700">
<h1 class="text-2xl font-bold text-seismo-navy dark:text-seismo-orange">
@@ -122,14 +151,48 @@
</div>
</aside>
<!-- Backdrop (Mobile Only) -->
<div id="backdrop" class="backdrop" onclick="closeMenuFromBackdrop()"></div>
<!-- Main content -->
<main class="flex-1 overflow-y-auto">
<main class="main-content flex-1 overflow-y-auto">
<div class="p-8">
{% block content %}{% endblock %}
</div>
</main>
</div>
<!-- Bottom Navigation (Mobile Only) -->
<nav class="bottom-nav">
<div class="grid grid-cols-4 h-16">
<button class="bottom-nav-btn" data-href="/" onclick="window.location.href='/'">
<svg 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>
<span>Dashboard</span>
</button>
<button class="bottom-nav-btn" data-href="/roster" onclick="window.location.href='/roster'">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
</svg>
<span>Roster</span>
</button>
<button class="bottom-nav-btn" data-href="/roster?action=add" onclick="window.location.href='/roster?action=add'">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
</svg>
<span>Add Unit</span>
</button>
<button class="bottom-nav-btn" data-href="/settings" onclick="window.location.href='/settings'">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
<span>Settings</span>
</button>
</div>
</nav>
<script>
// Dark mode toggle
function toggleDarkMode() {
@@ -261,6 +324,12 @@
}
</script>
<!-- Offline Database -->
<script src="/static/offline-db.js?v=0.3.1"></script>
<!-- Mobile JavaScript -->
<script src="/static/mobile.js?v=0.3.1"></script>
{% block extra_scripts %}{% endblock %}
</body>
</html>

26
templates/dashboard.html
View File

@@ -42,15 +42,15 @@
<div class="space-y-3">
<div class="flex justify-between items-center">
<span class="text-gray-600 dark:text-gray-400">Total Units</span>
<span id="total-units" class="text-2xl font-bold text-gray-900 dark:text-white">--</span>
<span id="total-units" class="text-3xl md:text-2xl font-bold text-gray-900 dark:text-white">--</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600 dark:text-gray-400">Deployed</span>
<span id="deployed-units" class="text-2xl font-bold text-blue-600 dark:text-blue-400">--</span>
<span id="deployed-units" class="text-3xl md:text-2xl font-bold text-blue-600 dark:text-blue-400">--</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600 dark:text-gray-400">Benched</span>
<span id="benched-units" class="text-2xl font-bold text-gray-600 dark:text-gray-400">--</span>
<span id="benched-units" class="text-3xl md:text-2xl font-bold text-gray-600 dark:text-gray-400">--</span>
</div>
<div class="border-t border-gray-200 dark:border-gray-700 pt-3 mt-3">
<p class="text-xs text-gray-500 dark:text-gray-500 mb-2 italic">Deployed Status:</p>
@@ -134,7 +134,7 @@
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">Fleet Map</h2>
<span class="text-sm text-gray-500 dark:text-gray-400">Deployed units</span>
</div>
<div id="fleet-map" class="w-full h-96 rounded-lg"></div>
<div id="fleet-map" class="w-full h-64 md:h-96 rounded-lg"></div>
</div>
<!-- Fleet Status Section with Tabs -->
@@ -224,17 +224,16 @@ function updateDashboard(event) {
// ===== Alerts =====
const alertsList = document.getElementById('alerts-list');
// Only show alerts for deployed units (not benched)
// Only show alerts for deployed units that are MISSING (not pending)
const missingUnits = Object.entries(data.active).filter(([_, u]) => u.status === 'Missing');
const pendingUnits = Object.entries(data.active).filter(([_, u]) => u.status === 'Pending');
if (!missingUnits.length && !pendingUnits.length) {
if (!missingUnits.length) {
alertsList.innerHTML =
'<p class="text-sm text-green-600 dark:text-green-400">✓ All units reporting normally</p>';
} else {
let alertsHtml = '';
missingUnits.slice(0, 3).forEach(([id, unit]) => {
missingUnits.forEach(([id, unit]) => {
alertsHtml += `
<div class="flex items-start space-x-2 text-sm">
<span class="w-2 h-2 rounded-full bg-red-500 mt-1.5"></span>
@@ -245,17 +244,6 @@ function updateDashboard(event) {
</div>`;
});
pendingUnits.slice(0, 2).forEach(([id, unit]) => {
alertsHtml += `
<div class="flex items-start space-x-2 text-sm">
<span class="w-2 h-2 rounded-full bg-yellow-500 mt-1.5"></span>
<div>
<a href="/unit/${id}" class="font-medium text-yellow-600 dark:text-yellow-400 hover:underline">${id}</a>
<p class="text-gray-600 dark:text-gray-400">Pending for ${unit.age}</p>
</div>
</div>`;
});
alertsList.innerHTML = alertsHtml;
}

166
templates/partials/roster_table.html
View File

@@ -1,4 +1,5 @@
<div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 overflow-hidden">
<!-- Desktop Table View -->
<div class="hidden md:block 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>
@@ -183,6 +184,160 @@
</div>
</div>
<!-- Mobile Card View -->
<div class="md:hidden space-y-3">
{% for unit in units %}
<div class="unit-card"
onclick="openUnitModal('{{ unit.id }}', '{{ unit.status }}', '{{ unit.age }}')"
data-unit-id="{{ unit.id }}"
data-status="{{ unit.status }}"
data-age="{{ unit.age }}">
<!-- Header: Status Dot + Unit ID + Status Badge -->
<div class="flex items-center justify-between mb-2">
<div class="flex items-center gap-2">
{% if unit.status == 'OK' %}
<span class="w-4 h-4 rounded-full bg-green-500" title="OK"></span>
{% elif unit.status == 'Pending' %}
<span class="w-4 h-4 rounded-full bg-yellow-500" title="Pending"></span>
{% elif unit.status == 'Missing' %}
<span class="w-4 h-4 rounded-full bg-red-500" title="Missing"></span>
{% else %}
<span class="w-4 h-4 rounded-full bg-gray-400" title="No Data"></span>
{% endif %}
<span class="font-bold text-lg text-seismo-orange dark:text-seismo-orange">{{ unit.id }}</span>
</div>
<span class="px-3 py-1 rounded-full text-xs font-medium
{% if unit.status == 'OK' %}bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300
{% elif unit.status == 'Pending' %}bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300
{% elif unit.status == 'Missing' %}bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300
{% else %}bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400
{% endif %}">
{% if unit.status in ['N/A', 'Unknown'] %}Benched{% else %}{{ unit.status }}{% endif %}
</span>
</div>
<!-- Type Badge -->
<div class="mb-2">
{% 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 %}
</div>
<!-- Location (Tap to Navigate) -->
{% if unit.address %}
<div class="text-sm mb-1">
<a href="https://www.google.com/maps/search/?api=1&query={{ unit.address | urlencode }}"
target="_blank"
onclick="event.stopPropagation()"
class="flex items-center gap-1 text-seismo-orange hover:text-orange-600 dark:text-seismo-orange dark:hover:text-orange-400">
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
<span class="underline">{{ unit.address }}</span>
</a>
</div>
{% elif unit.coordinates %}
<div class="text-sm mb-1">
<a href="https://www.google.com/maps/search/?api=1&query={{ unit.coordinates | urlencode }}"
target="_blank"
onclick="event.stopPropagation()"
class="flex items-center gap-1 text-seismo-orange hover:text-orange-600 dark:text-seismo-orange dark:hover:text-orange-400">
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
<span class="font-mono underline">{{ unit.coordinates }}</span>
</a>
</div>
{% endif %}
<!-- Project ID -->
{% if unit.project_id %}
<div class="text-sm text-gray-600 dark:text-gray-400 mb-1">
🏗️ {{ unit.project_id }}
</div>
{% endif %}
<!-- Last Seen -->
<div class="text-sm text-gray-500 dark:text-gray-500 mt-2">
🕐 {{ unit.age }}
</div>
<!-- Deployed/Benched Indicator -->
<div class="mt-2">
{% if unit.deployed %}
<span class="text-xs text-blue-600 dark:text-blue-400">
⚡ Deployed
</span>
{% else %}
<span class="text-xs text-gray-500 dark:text-gray-500">
📦 Benched
</span>
{% endif %}
</div>
<!-- Tap Hint -->
<div class="text-xs text-gray-400 mt-2 text-center border-t border-gray-200 dark:border-gray-700 pt-2">
Tap for details
</div>
</div>
{% endfor %}
<!-- Mobile Last Updated -->
<div class="text-xs text-gray-500 dark:text-gray-400 text-center py-2">
Last updated: <span id="last-updated-mobile">{{ timestamp }}</span>
</div>
</div>
<!-- Unit Detail Modal -->
<div id="unitModal" class="unit-modal">
<!-- Backdrop -->
<div class="unit-modal-backdrop" onclick="closeUnitModal(event)"></div>
<!-- Modal Content -->
<div class="unit-modal-content">
<!-- Handle Bar (Mobile Only) -->
<div class="modal-handle"></div>
<!-- Header -->
<div class="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
<h3 id="modalUnitId" class="text-xl font-bold text-gray-900 dark:text-white"></h3>
<button onclick="closeUnitModal(event)" data-close-modal class="w-10 h-10 flex items-center justify-center text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<!-- Content -->
<div id="modalContent" class="p-6">
<!-- Content will be populated by JavaScript -->
</div>
<!-- Actions -->
<div class="p-6 border-t border-gray-200 dark:border-gray-700 space-y-3">
<button id="modalEditBtn" class="w-full h-12 bg-seismo-orange hover:bg-orange-600 text-white rounded-lg font-medium transition-colors">
Edit Unit
</button>
<div class="grid grid-cols-2 gap-3">
<button id="modalDeployBtn" class="h-12 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
Deploy/Bench
</button>
<button id="modalDeleteBtn" class="h-12 border border-red-300 dark:border-red-600 text-red-600 dark:text-red-400 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors">
Delete
</button>
</div>
</div>
</div>
</div>
<style>
.sort-indicator::after {
content: '⇅';
@@ -201,7 +356,14 @@
<script>
// Update timestamp
document.getElementById('last-updated').textContent = new Date().toLocaleTimeString();
const timestampElement = document.getElementById('last-updated');
if (timestampElement) {
timestampElement.textContent = new Date().toLocaleTimeString();
}
const timestampMobileElement = document.getElementById('last-updated-mobile');
if (timestampMobileElement) {
timestampMobileElement.textContent = new Date().toLocaleTimeString();
}
// Sorting state
let currentSort = { column: null, direction: 'asc' };