File size: 4,273 Bytes
1385e9f a7925d7 1385e9f a7925d7 1385e9f a7925d7 1385e9f a7925d7 1385e9f a7925d7 1385e9f a7925d7 3221d07 a7925d7 3221d07 1385e9f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Device Tracking | Staff Portal</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
</head>
<body class="min-h-screen flex flex-col">
<custom-navbar></custom-navbar>
<main class="flex-grow p-4">
<div class="max-w-6xl mx-auto bg-white rounded-lg shadow p-4">
<h1 class="text-2xl font-bold mb-4">Device Tracking Dashboard</h1>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
<div class="lg:col-span-2">
<div id="map" class="h-96 rounded-lg border border-gray-200"></div>
</div>
<div class="space-y-4">
<div class="bg-gray-50 p-4 rounded-lg">
<h3 class="font-medium mb-2">Active Devices</h3>
<div class="space-y-2" id="device-list">
<!-- Devices will be populated here -->
</div>
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<h3 class="font-medium mb-2">Tracking Controls</h3>
<button id="refresh-btn" class="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700">
Refresh Locations
</button>
</div>
</div>
</div>
</div>
</main>
<custom-footer></custom-footer>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
<script>
// Initialize map
const map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// Mock devices data
const devices = [
{ id: 'dev-001', name: 'Device 1', lat: 51.505, lng: -0.09, battery: 85 },
{ id: 'dev-002', name: 'Device 2', lat: 51.51, lng: -0.1, battery: 72 },
{ id: 'dev-003', name: 'Device 3', lat: 51.515, lng: -0.08, battery: 43 }
];
// Add markers and device list
const markers = {};
const deviceList = document.getElementById('device-list');
devices.forEach(device => {
// Add marker
markers[device.id] = L.marker([device.lat, device.lng])
.addTo(map)
.bindPopup(`<b>${device.name}</b><br>Battery: ${device.battery}%`);
// Add to device list
const deviceElement = document.createElement('div');
deviceElement.className = 'flex items-center justify-between p-2 bg-white rounded border';
deviceElement.innerHTML = `
<div>
<span class="font-medium">${device.name}</span>
<span class="text-xs text-gray-500 block">ID: ${device.id}</span>
</div>
<div class="text-right">
<span class="text-xs ${device.battery > 30 ? 'text-green-600' : 'text-red-600'}">${device.battery}%</span>
<div class="w-16 h-1 bg-gray-200 rounded-full mt-1">
<div class="h-1 rounded-full ${device.battery > 30 ? 'bg-green-600' : 'bg-red-600'}"
style="width: ${device.battery}%"></div>
</div>
</div>
`;
deviceList.appendChild(deviceElement);
});
// Refresh button
document.getElementById('refresh-btn').addEventListener('click', () => {
// In a real app, this would fetch new locations from an API
alert('Refreshing device locations...');
});
</script>
</body>
</html> |