|
|
<!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"> |
|
|
|
|
|
</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> |
|
|
|
|
|
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); |
|
|
|
|
|
|
|
|
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 } |
|
|
]; |
|
|
|
|
|
|
|
|
const markers = {}; |
|
|
const deviceList = document.getElementById('device-list'); |
|
|
|
|
|
devices.forEach(device => { |
|
|
|
|
|
markers[device.id] = L.marker([device.lat, device.lng]) |
|
|
.addTo(map) |
|
|
.bindPopup(`<b>${device.name}</b><br>Battery: ${device.battery}%`); |
|
|
|
|
|
|
|
|
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); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('refresh-btn').addEventListener('click', () => { |
|
|
|
|
|
alert('Refreshing device locations...'); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
