Build core domain: orgs, users, jobs, locate points, auth, live map
Replaces the device-events demo with the actual product:
- Prisma + PostGIS data layer (postgis/postgis:17-3.5). Lat/lng decimals
are the source of truth; a generated geometry(Point,4326) column with
a GIST index backs bbox queries. Migrations apply on container boot.
- JWT auth (bcryptjs + httpOnly cookie) with public registration that
creates an org; per-org roles (ORG_ADMIN/MEMBER/VIEWER) enforced by
guards on all /orgs/:orgId routes.
- Scoped API keys (X-API-Key, sha256-hashed, shown once) for
programmatic access, manageable by org admins.
- REST API: jobs/tickets CRUD with filters, points query (time range,
recordedAt cursor, bbox), members, devices, api-keys.
- MQTT ingest: devices publish to devices/{username}/points and /jobs;
unknown tickets auto-create stub jobs (source=DEVICE); every message
is raw-logged to device_events; acks on devices/{username}/jobs/ack.
Broker gets a dedicated backend user; testuser is now a plain device.
- Realtime: plain-WS gateway at /api/ws (socket.io removed) with
cookie auth and per-job channels feeding the map live.
- Next.js frontend: login/register, jobs list with filters, job detail
with live Google map (APWA utility colors, polylines per run) behind
a provider-neutral JobMap abstraction for a future Esri swap, and
settings pages for members/devices/api-keys.
- Seed: Umagul org, admin user, testuser device, demo job with RTK
points. Sample publisher updated to the new topic contract.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
120
web/components/map/google/GoogleJobMap.tsx
Normal file
120
web/components/map/google/GoogleJobMap.tsx
Normal file
@@ -0,0 +1,120 @@
|
||||
/// <reference types="google.maps" />
|
||||
import { APIProvider, Map as GoogleMap, useMap } from '@vis.gl/react-google-maps';
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { JobMapProps, MapPoint, UTILITY_COLORS } from '../types';
|
||||
|
||||
const API_KEY = process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY || '';
|
||||
|
||||
const DEFAULT_CENTER = { lat: 39.5, lng: -98.35 }; // continental US
|
||||
const DEFAULT_ZOOM = 4;
|
||||
|
||||
function colorFor(utilityType: string): string {
|
||||
return UTILITY_COLORS[utilityType] ?? UTILITY_COLORS.UNKNOWN;
|
||||
}
|
||||
|
||||
function orderKey(p: MapPoint): number {
|
||||
return p.sequence ?? new Date(p.recordedAt).getTime();
|
||||
}
|
||||
|
||||
// Draws points as colored circles plus one polyline per utility run.
|
||||
// Imperative overlays (google.maps.Marker/Polyline) are used because
|
||||
// @vis.gl/react-google-maps has no polyline component.
|
||||
function PointsLayer({ points, fitBounds }: { points: MapPoint[]; fitBounds: boolean }) {
|
||||
const map = useMap();
|
||||
const overlaysRef = useRef<{ setMap: (m: google.maps.Map | null) => void }[]>([]);
|
||||
const fittedCountRef = useRef(0);
|
||||
|
||||
useEffect(() => {
|
||||
if (!map) {
|
||||
return;
|
||||
}
|
||||
|
||||
overlaysRef.current.forEach((o) => o.setMap(null));
|
||||
overlaysRef.current = [];
|
||||
if (points.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const byUtility = new Map<string, MapPoint[]>();
|
||||
for (const p of points) {
|
||||
const group = byUtility.get(p.utilityType) ?? [];
|
||||
group.push(p);
|
||||
byUtility.set(p.utilityType, group);
|
||||
}
|
||||
|
||||
for (const [utility, group] of byUtility) {
|
||||
const sorted = [...group].sort((a, b) => orderKey(a) - orderKey(b));
|
||||
const color = colorFor(utility);
|
||||
|
||||
const line = new google.maps.Polyline({
|
||||
path: sorted.map((p) => ({ lat: p.lat, lng: p.lng })),
|
||||
strokeColor: color,
|
||||
strokeOpacity: 0.8,
|
||||
strokeWeight: 3,
|
||||
map,
|
||||
});
|
||||
overlaysRef.current.push(line);
|
||||
|
||||
for (const p of sorted) {
|
||||
const marker = new google.maps.Marker({
|
||||
position: { lat: p.lat, lng: p.lng },
|
||||
map,
|
||||
icon: {
|
||||
path: google.maps.SymbolPath.CIRCLE,
|
||||
scale: 5,
|
||||
fillColor: color,
|
||||
fillOpacity: 1,
|
||||
strokeColor: '#ffffff',
|
||||
strokeWeight: 1.5,
|
||||
},
|
||||
title: `${p.utilityType} · ${p.fixType}${p.depth != null ? ` · depth ${p.depth}m` : ''}\n${new Date(p.recordedAt).toLocaleString()}`,
|
||||
});
|
||||
overlaysRef.current.push(marker);
|
||||
}
|
||||
}
|
||||
|
||||
if (fitBounds && points.length !== fittedCountRef.current) {
|
||||
fittedCountRef.current = points.length;
|
||||
const bounds = new google.maps.LatLngBounds();
|
||||
points.forEach((p) => bounds.extend({ lat: p.lat, lng: p.lng }));
|
||||
map.fitBounds(bounds, 48);
|
||||
}
|
||||
}, [map, points, fitBounds]);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
export default function GoogleJobMap({ points, fitBounds = true, heightPx = 480 }: JobMapProps) {
|
||||
if (!API_KEY) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
height: heightPx,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
border: '1px dashed #999',
|
||||
borderRadius: 8,
|
||||
color: '#666',
|
||||
}}
|
||||
>
|
||||
Set NEXT_PUBLIC_GOOGLE_MAPS_API_KEY in .env to enable the map.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ height: heightPx, borderRadius: 8, overflow: 'hidden' }}>
|
||||
<APIProvider apiKey={API_KEY}>
|
||||
<GoogleMap
|
||||
defaultCenter={points[0] ? { lat: points[0].lat, lng: points[0].lng } : DEFAULT_CENTER}
|
||||
defaultZoom={points[0] ? 18 : DEFAULT_ZOOM}
|
||||
mapTypeId="hybrid"
|
||||
gestureHandling="greedy"
|
||||
>
|
||||
<PointsLayer points={points} fitBounds={fitBounds} />
|
||||
</GoogleMap>
|
||||
</APIProvider>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user