{"ast":null,"code":"import React,{useState,useEffect}from'react';import{MapContainer,TileLayer,Marker,Popup}from'react-leaflet';import{FiBattery,FiWifi,FiClock}from'react-icons/fi';import'leaflet/dist/leaflet.css';import L from'leaflet';import{Link}from'react-router-dom';// Fix for Leaflet marker icons\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";delete L.Icon.Default.prototype._getIconUrl;L.Icon.Default.mergeOptions({iconRetinaUrl:'https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon-2x.png',iconUrl:'https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png',shadowUrl:'https://unpkg.com/leaflet@1.7.1/dist/images/marker-shadow.png'});// Custom marker icons\nconst createCustomIcon=status=>{let iconUrl;switch(status){case'online':iconUrl='https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-green.png';break;case'idle':iconUrl='https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-yellow.png';break;case'offline':iconUrl='https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png';break;default:iconUrl='https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-blue.png';}return L.icon({iconUrl,shadowUrl:'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png',iconSize:[25,41],iconAnchor:[12,41],popupAnchor:[1,-34],shadowSize:[41,41]});};// Dummy data for demonstration\nconst dummyDevices=[{id:'device-001',name:'SIM7000E-001',status:'online',battery:{level:85,status:'good'},signal:{strength:-65,status:'good'},location:{latitude:47.3769,longitude:8.5417,altitude:408},last_seen:new Date().toISOString()},{id:'device-002',name:'SIM7000E-002',status:'idle',battery:{level:42,status:'low'},signal:{strength:-85,status:'fair'},location:{latitude:47.3780,longitude:8.5390,altitude:410},last_seen:new Date(Date.now()-3600000).toISOString()// 1 hour ago\n},{id:'device-003',name:'SIM7000E-003',status:'offline',battery:{level:12,status:'critical'},signal:{strength:-105,status:'poor'},location:{latitude:47.3750,longitude:8.5430,altitude:405},last_seen:new Date(Date.now()-86400000).toISOString()// 1 day ago\n},{id:'device-004',name:'SIM7000E-004',status:'online',battery:{level:78,status:'good'},signal:{strength:-72,status:'good'},location:{latitude:47.3790,longitude:8.5450,altitude:412},last_seen:new Date().toISOString()},{id:'device-005',name:'SIM7000E-005',status:'idle',battery:{level:35,status:'low'},signal:{strength:-90,status:'fair'},location:{latitude:47.3730,longitude:8.5380,altitude:407},last_seen:new Date(Date.now()-7200000).toISOString()// 2 hours ago\n}];const MapView=()=>{const[devices,setDevices]=useState([]);const[loading,setLoading]=useState(true);const[filter,setFilter]=useState('all');const[mapCenter,setMapCenter]=useState([47.3769,8.5417]);// Zurich coordinates\nconst[mapZoom,setMapZoom]=useState(13);useEffect(()=>{// Simulate API call\nconst fetchData=async()=>{try{// In a real app, you would fetch data from your API\n// const response = await fetch('/api/status/devices');\n// const data = await response.json();\n// Using dummy data for now\nsetTimeout(()=>{setDevices(dummyDevices);setLoading(false);},1000);}catch(error){console.error('Error fetching data:',error);setLoading(false);}};fetchData();},[]);// Helper function to format date\nconst formatDate=dateString=>{const date=new Date(dateString);return date.toLocaleString();};// Filter devices based on status\nconst filteredDevices=filter==='all'?devices:devices.filter(device=>device.status===filter);// Helper function to get battery color\nconst getBatteryColor=status=>{switch(status){case'good':return'text-success-500';case'low':return'text-warning-500';case'critical':return'text-danger-500';default:return'text-gray-500';}};// Helper function to get signal color\nconst getSignalColor=status=>{switch(status){case'good':return'text-success-500';case'fair':return'text-warning-500';case'poor':return'text-danger-500';default:return'text-gray-500';}};if(loading){return/*#__PURE__*/_jsx(\"div\",{className:\"flex items-center justify-center h-full\",children:/*#__PURE__*/_jsxs(\"div\",{className:\"text-center\",children:[/*#__PURE__*/_jsx(\"div\",{className:\"w-16 h-16 border-4 border-primary-500 border-t-transparent rounded-full animate-spin mx-auto\"}),/*#__PURE__*/_jsx(\"p\",{className:\"mt-4 text-gray-600\",children:\"Loading map data...\"})]})});}return/*#__PURE__*/_jsxs(\"div\",{className:\"space-y-6\",children:[/*#__PURE__*/_jsxs(\"div\",{className:\"flex justify-between items-center\",children:[/*#__PURE__*/_jsx(\"h1\",{className:\"text-2xl font-semibold text-gray-800\",children:\"Device Map\"}),/*#__PURE__*/_jsxs(\"div\",{className:\"flex space-x-2\",children:[/*#__PURE__*/_jsx(\"button\",{className:`px-3 py-1 rounded-md text-sm ${filter==='all'?'bg-primary-500 text-white':'bg-gray-200 text-gray-700'}`,onClick:()=>setFilter('all'),children:\"All\"}),/*#__PURE__*/_jsx(\"button\",{className:`px-3 py-1 rounded-md text-sm ${filter==='online'?'bg-success-500 text-white':'bg-gray-200 text-gray-700'}`,onClick:()=>setFilter('online'),children:\"Online\"}),/*#__PURE__*/_jsx(\"button\",{className:`px-3 py-1 rounded-md text-sm ${filter==='idle'?'bg-warning-500 text-white':'bg-gray-200 text-gray-700'}`,onClick:()=>setFilter('idle'),children:\"Idle\"}),/*#__PURE__*/_jsx(\"button\",{className:`px-3 py-1 rounded-md text-sm ${filter==='offline'?'bg-danger-500 text-white':'bg-gray-200 text-gray-700'}`,onClick:()=>setFilter('offline'),children:\"Offline\"})]})]}),/*#__PURE__*/_jsx(\"div\",{className:\"dashboard-card h-[600px]\",children:/*#__PURE__*/_jsxs(MapContainer,{center:mapCenter,zoom:mapZoom,style:{height:'100%',width:'100%'},children:[/*#__PURE__*/_jsx(TileLayer,{attribution:\"\\xA9 OpenStreetMap contributors\",url:\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\"}),filteredDevices.map(device=>/*#__PURE__*/_jsx(Marker,{position:[device.location.latitude,device.location.longitude],icon:createCustomIcon(device.status),children:/*#__PURE__*/_jsx(Popup,{children:/*#__PURE__*/_jsxs(\"div\",{className:\"p-1\",children:[/*#__PURE__*/_jsx(\"h3\",{className:\"font-semibold text-lg mb-2\",children:/*#__PURE__*/_jsx(Link,{to:`/devices/${device.id}`,className:\"text-primary-600 hover:text-primary-700\",children:device.name})}),/*#__PURE__*/_jsxs(\"div\",{className:\"space-y-2 text-sm\",children:[/*#__PURE__*/_jsxs(\"div\",{className:\"flex items-center\",children:[/*#__PURE__*/_jsx(FiBattery,{className:`mr-2 ${getBatteryColor(device.battery.status)}`}),/*#__PURE__*/_jsxs(\"span\",{children:[\"Battery: \",/*#__PURE__*/_jsxs(\"span\",{className:getBatteryColor(device.battery.status),children:[device.battery.level,\"%\"]})]})]}),/*#__PURE__*/_jsxs(\"div\",{className:\"flex items-center\",children:[/*#__PURE__*/_jsx(FiWifi,{className:`mr-2 ${getSignalColor(device.signal.status)}`}),/*#__PURE__*/_jsxs(\"span\",{children:[\"Signal: \",/*#__PURE__*/_jsxs(\"span\",{className:getSignalColor(device.signal.status),children:[device.signal.strength,\" dBm\"]})]})]}),/*#__PURE__*/_jsxs(\"div\",{className:\"flex items-center\",children:[/*#__PURE__*/_jsx(FiClock,{className:\"mr-2 text-gray-500\"}),/*#__PURE__*/_jsxs(\"span\",{children:[\"Last seen: \",formatDate(device.last_seen)]})]}),/*#__PURE__*/_jsxs(\"div\",{className:\"text-xs text-gray-500 mt-1\",children:[\"Coordinates: \",device.location.latitude.toFixed(6),\", \",device.location.longitude.toFixed(6)]}),/*#__PURE__*/_jsxs(\"div\",{className:\"text-xs text-gray-500\",children:[\"Altitude: \",device.location.altitude,\" m\"]})]})]})})},device.id))]})}),/*#__PURE__*/_jsxs(\"div\",{className:\"dashboard-card\",children:[/*#__PURE__*/_jsx(\"h2\",{className:\"text-lg font-semibold text-gray-800 mb-4\",children:\"Device List\"}),/*#__PURE__*/_jsx(\"div\",{className:\"overflow-x-auto\",children:/*#__PURE__*/_jsxs(\"table\",{className:\"min-w-full divide-y divide-gray-200\",children:[/*#__PURE__*/_jsx(\"thead\",{className:\"bg-gray-50\",children:/*#__PURE__*/_jsxs(\"tr\",{children:[/*#__PURE__*/_jsx(\"th\",{className:\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\",children:\"Device\"}),/*#__PURE__*/_jsx(\"th\",{className:\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\",children:\"Status\"}),/*#__PURE__*/_jsx(\"th\",{className:\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\",children:\"Coordinates\"}),/*#__PURE__*/_jsx(\"th\",{className:\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\",children:\"Last Seen\"})]})}),/*#__PURE__*/_jsx(\"tbody\",{className:\"bg-white divide-y divide-gray-200\",children:filteredDevices.map(device=>/*#__PURE__*/_jsxs(\"tr\",{className:\"hover:bg-gray-50\",children:[/*#__PURE__*/_jsx(\"td\",{className:\"px-6 py-4 whitespace-nowrap\",children:/*#__PURE__*/_jsx(Link,{to:`/devices/${device.id}`,className:\"text-primary-600 hover:text-primary-700\",children:device.name})}),/*#__PURE__*/_jsx(\"td\",{className:\"px-6 py-4 whitespace-nowrap\",children:/*#__PURE__*/_jsxs(\"div\",{className:\"flex items-center\",children:[/*#__PURE__*/_jsx(\"div\",{className:`h-2.5 w-2.5 rounded-full mr-2 ${device.status==='online'?'bg-success-500':device.status==='idle'?'bg-warning-500':'bg-danger-500'}`}),/*#__PURE__*/_jsx(\"span\",{className:`capitalize ${device.status==='online'?'text-success-500':device.status==='idle'?'text-warning-500':'text-danger-500'}`,children:device.status})]})}),/*#__PURE__*/_jsxs(\"td\",{className:\"px-6 py-4 whitespace-nowrap text-gray-500\",children:[device.location.latitude.toFixed(6),\", \",device.location.longitude.toFixed(6)]}),/*#__PURE__*/_jsx(\"td\",{className:\"px-6 py-4 whitespace-nowrap text-gray-500\",children:formatDate(device.last_seen)})]},device.id))})]})})]})]});};export default MapView;","map":{"version":3,"names":["React","useState","useEffect","MapContainer","TileLayer","Marker","Popup","FiBattery","FiWifi","FiClock","L","Link","jsx","_jsx","jsxs","_jsxs","Icon","Default","prototype","_getIconUrl","mergeOptions","iconRetinaUrl","iconUrl","shadowUrl","createCustomIcon","status","icon","iconSize","iconAnchor","popupAnchor","shadowSize","dummyDevices","id","name","battery","level","signal","strength","location","latitude","longitude","altitude","last_seen","Date","toISOString","now","MapView","devices","setDevices","loading","setLoading","filter","setFilter","mapCenter","setMapCenter","mapZoom","setMapZoom","fetchData","setTimeout","error","console","formatDate","dateString","date","toLocaleString","filteredDevices","device","getBatteryColor","getSignalColor","className","children","onClick","center","zoom","style","height","width","attribution","url","map","position","to","toFixed"],"sources":["/home/m3mo/Desktop/temparea/solarbank/frontend/src/pages/MapView.js"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';\nimport { FiBattery, FiWifi, FiClock } from 'react-icons/fi';\nimport 'leaflet/dist/leaflet.css';\nimport L from 'leaflet';\nimport { Link } from 'react-router-dom';\n\n// Fix for Leaflet marker icons\ndelete L.Icon.Default.prototype._getIconUrl;\nL.Icon.Default.mergeOptions({\n iconRetinaUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon-2x.png',\n iconUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png',\n shadowUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-shadow.png',\n});\n\n// Custom marker icons\nconst createCustomIcon = (status) => {\n let iconUrl;\n \n switch (status) {\n case 'online':\n iconUrl = 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-green.png';\n break;\n case 'idle':\n iconUrl = 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-yellow.png';\n break;\n case 'offline':\n iconUrl = 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png';\n break;\n default:\n iconUrl = 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-blue.png';\n }\n \n return L.icon({\n iconUrl,\n shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png',\n iconSize: [25, 41],\n iconAnchor: [12, 41],\n popupAnchor: [1, -34],\n shadowSize: [41, 41]\n });\n};\n\n// Dummy data for demonstration\nconst dummyDevices = [\n {\n id: 'device-001',\n name: 'SIM7000E-001',\n status: 'online',\n battery: { level: 85, status: 'good' },\n signal: { strength: -65, status: 'good' },\n location: { latitude: 47.3769, longitude: 8.5417, altitude: 408 },\n last_seen: new Date().toISOString()\n },\n {\n id: 'device-002',\n name: 'SIM7000E-002',\n status: 'idle',\n battery: { level: 42, status: 'low' },\n signal: { strength: -85, status: 'fair' },\n location: { latitude: 47.3780, longitude: 8.5390, altitude: 410 },\n last_seen: new Date(Date.now() - 3600000).toISOString() // 1 hour ago\n },\n {\n id: 'device-003',\n name: 'SIM7000E-003',\n status: 'offline',\n battery: { level: 12, status: 'critical' },\n signal: { strength: -105, status: 'poor' },\n location: { latitude: 47.3750, longitude: 8.5430, altitude: 405 },\n last_seen: new Date(Date.now() - 86400000).toISOString() // 1 day ago\n },\n {\n id: 'device-004',\n name: 'SIM7000E-004',\n status: 'online',\n battery: { level: 78, status: 'good' },\n signal: { strength: -72, status: 'good' },\n location: { latitude: 47.3790, longitude: 8.5450, altitude: 412 },\n last_seen: new Date().toISOString()\n },\n {\n id: 'device-005',\n name: 'SIM7000E-005',\n status: 'idle',\n battery: { level: 35, status: 'low' },\n signal: { strength: -90, status: 'fair' },\n location: { latitude: 47.3730, longitude: 8.5380, altitude: 407 },\n last_seen: new Date(Date.now() - 7200000).toISOString() // 2 hours ago\n }\n];\n\nconst MapView = () => {\n const [devices, setDevices] = useState([]);\n const [loading, setLoading] = useState(true);\n const [filter, setFilter] = useState('all');\n const [mapCenter, setMapCenter] = useState([47.3769, 8.5417]); // Zurich coordinates\n const [mapZoom, setMapZoom] = useState(13);\n\n useEffect(() => {\n // Simulate API call\n const fetchData = async () => {\n try {\n // In a real app, you would fetch data from your API\n // const response = await fetch('/api/status/devices');\n // const data = await response.json();\n \n // Using dummy data for now\n setTimeout(() => {\n setDevices(dummyDevices);\n setLoading(false);\n }, 1000);\n } catch (error) {\n console.error('Error fetching data:', error);\n setLoading(false);\n }\n };\n\n fetchData();\n }, []);\n\n // Helper function to format date\n const formatDate = (dateString) => {\n const date = new Date(dateString);\n return date.toLocaleString();\n };\n\n // Filter devices based on status\n const filteredDevices = filter === 'all' \n ? devices \n : devices.filter(device => device.status === filter);\n\n // Helper function to get battery color\n const getBatteryColor = (status) => {\n switch (status) {\n case 'good':\n return 'text-success-500';\n case 'low':\n return 'text-warning-500';\n case 'critical':\n return 'text-danger-500';\n default:\n return 'text-gray-500';\n }\n };\n\n // Helper function to get signal color\n const getSignalColor = (status) => {\n switch (status) {\n case 'good':\n return 'text-success-500';\n case 'fair':\n return 'text-warning-500';\n case 'poor':\n return 'text-danger-500';\n default:\n return 'text-gray-500';\n }\n };\n\n if (loading) {\n return (\n
Loading map data...
\n| Device | \nStatus | \nCoordinates | \nLast Seen | \n
|---|---|---|---|
| \n \n {device.name}\n \n | \n\n \n \n {device.status}\n \n | \n \n {device.location.latitude.toFixed(6)}, {device.location.longitude.toFixed(6)}\n | \n\n {formatDate(device.last_seen)}\n | \n