Checkpoint

ui/src/pages/meshcore/MeshCoreMapView.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Badge, Card, Table } from 'react-bootstrap';
+import Full from '../../components/Full';
+import { nodeTypeNameByValue } from './MeshCoreData';
+import { useMeshCoreData } from './MeshCoreContext';
+
+const MeshCoreMapView: React.FC = () => {
+  const { mapPoints, streamReady } = useMeshCoreData();
+
+  return (
+    <Full className="meshcore-map-view">
+      <Card className="meshcore-table-card h-100 d-flex flex-column">
+        <Card.Header className="meshcore-table-header d-flex justify-content-between align-items-center">
+          <span>Node Map</span>
+          <Badge bg={streamReady ? 'success' : 'secondary'}>{streamReady ? 'stream ready' : 'stream offline'}</Badge>
+        </Card.Header>
+        <Card.Body className="meshcore-table-body d-flex flex-column gap-3">
+          <div className="meshcore-map-canvas">
+            {mapPoints.map((point) => (
+              <div
+                key={point.nodeId}
+                className="meshcore-map-dot"
+                style={{
+                  left: `${((point.longitude - 4.4) / 1.2) * 100}%`,
+                  top: `${100 - ((point.latitude - 51.6) / 0.8) * 100}%`,
+                }}
+                title={`Node ${point.nodeId}`}
+              />
+            ))}
+          </div>
+
+          <div className="meshcore-table-scroll">
+            <Table responsive size="sm" className="meshcore-table mb-0">
+              <thead>
+                <tr>
+                  <th>Node</th>
+                  <th>Type</th>
+                  <th>Packets</th>
+                  <th>Latitude</th>
+                  <th>Longitude</th>
+                </tr>
+              </thead>
+              <tbody>
+                {mapPoints.map((point) => (
+                  <tr key={point.nodeId}>
+                    <td>{point.nodeId}</td>
+                    <td>{nodeTypeNameByValue[point.nodeType] ?? point.nodeType}</td>
+                    <td>{point.packetCount}</td>
+                    <td>{point.latitude.toFixed(4)}</td>
+                    <td>{point.longitude.toFixed(4)}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </Table>
+          </div>
+        </Card.Body>
+      </Card>
+    </Full>
+  );
+};
+
+export default MeshCoreMapView;