feat(sprint-3): refresh responsive UlHub portal
This commit is contained in:
Brent Perteet
@@ -9,7 +9,6 @@ import type MapViewConstructor from '@arcgis/core/views/MapView.js';
|
||||
import { JobMapProps, LiveStatus, liveStatusToMapPoint, MapPoint, pointDetailRows, UTILITY_COLORS } from '../types';
|
||||
|
||||
const API_KEY = process.env.NEXT_PUBLIC_ARCGIS_API_KEY || '';
|
||||
const LIVE_COLOR = '#1a73e8';
|
||||
|
||||
const DEFAULT_CENTER: [number, number] = [-98.35, 39.5]; // continental US, [lng, lat]
|
||||
const DEFAULT_ZOOM = 4;
|
||||
@@ -63,6 +62,10 @@ function colorFor(utilityType: string): string {
|
||||
return UTILITY_COLORS[utilityType] ?? UTILITY_COLORS.UNKNOWN;
|
||||
}
|
||||
|
||||
function semanticColor(name: string): string {
|
||||
return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
|
||||
}
|
||||
|
||||
function orderKey(p: MapPoint): number {
|
||||
return p.sequence ?? new Date(p.recordedAt).getTime();
|
||||
}
|
||||
@@ -78,10 +81,10 @@ function popupHtml(point: MapPoint): string {
|
||||
const rows = pointDetailRows(point)
|
||||
.map(
|
||||
([label, value]) =>
|
||||
`<tr><td style="color:#666;padding-right:0.75rem;white-space:nowrap;">${label}</td><td style="font-weight:600;">${value}</td></tr>`,
|
||||
`<tr><td class="ul-map-popup-table__label">${label}</td><td class="ul-map-popup-table__value">${value}</td></tr>`,
|
||||
)
|
||||
.join('');
|
||||
return `<table style="border-collapse:collapse;font-family:sans-serif;">${rows}</table>`;
|
||||
return `<table class="ul-map-popup-table">${rows}</table>`;
|
||||
}
|
||||
|
||||
// Esri opens/closes/dismisses-on-outside-click popups natively via each
|
||||
@@ -94,7 +97,7 @@ function pointGraphic(mods: EsriModules, point: MapPoint, color: string) {
|
||||
style: 'circle',
|
||||
color,
|
||||
size: 10,
|
||||
outline: { color: '#ffffff', width: 1.5 },
|
||||
outline: { color: semanticColor('--ul-color-on-primary'), width: 1.5 },
|
||||
},
|
||||
popupTemplate: {
|
||||
title: `${point.utilityType} · ${point.fixType}`,
|
||||
@@ -119,15 +122,16 @@ function lineGraphic(mods: EsriModules, points: MapPoint[], color: string) {
|
||||
}
|
||||
|
||||
function liveMarkerGraphics(mods: EsriModules, status: LiveStatus) {
|
||||
const liveColor = semanticColor('--ul-color-primary');
|
||||
const position = { type: 'point' as const, longitude: status.lng, latitude: status.lat };
|
||||
const marker = new mods.Graphic({
|
||||
geometry: position,
|
||||
symbol: {
|
||||
type: 'simple-marker',
|
||||
style: 'circle',
|
||||
color: LIVE_COLOR,
|
||||
color: liveColor,
|
||||
size: 16,
|
||||
outline: { color: '#ffffff', width: 2 },
|
||||
outline: { color: semanticColor('--ul-color-on-primary'), width: 2 },
|
||||
},
|
||||
popupTemplate: {
|
||||
title: `Live · ${status.serial}`,
|
||||
@@ -144,15 +148,15 @@ function liveMarkerGraphics(mods: EsriModules, status: LiveStatus) {
|
||||
}),
|
||||
symbol: {
|
||||
type: 'simple-fill',
|
||||
color: [...hexToRgb(LIVE_COLOR), 0.15],
|
||||
outline: { color: [...hexToRgb(LIVE_COLOR), 0.3], width: 1 },
|
||||
color: [...hexChannels(liveColor), 0.15],
|
||||
outline: { color: [...hexChannels(liveColor), 0.3], width: 1 },
|
||||
},
|
||||
} as ConstructorParameters<typeof GraphicConstructor>[0]);
|
||||
|
||||
return [halo, marker];
|
||||
}
|
||||
|
||||
function hexToRgb(hex: string): [number, number, number] {
|
||||
function hexChannels(hex: string): [number, number, number] {
|
||||
const n = parseInt(hex.slice(1), 16);
|
||||
return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
|
||||
}
|
||||
@@ -165,6 +169,9 @@ export default function EsriJobMap({ points, liveStatus = null, fitBounds = true
|
||||
const modsRef = useRef<EsriModules | null>(null);
|
||||
const fittedSignatureRef = useRef('');
|
||||
const [ready, setReady] = useState(false);
|
||||
const [loadError, setLoadError] = useState(false);
|
||||
const sizeClass = heightPx <= 360 ? 'ul-map--compact' : heightPx >= 500 ? 'ul-map--detail' : '';
|
||||
const mapClassName = ['ul-map', sizeClass].filter(Boolean).join(' ');
|
||||
|
||||
useEffect(() => {
|
||||
if (!containerRef.current || !API_KEY) {
|
||||
@@ -173,26 +180,33 @@ export default function EsriJobMap({ points, liveStatus = null, fitBounds = true
|
||||
let cancelled = false;
|
||||
let view: InstanceType<typeof MapViewConstructor> | undefined;
|
||||
|
||||
loadEsriModules().then((mods) => {
|
||||
if (cancelled || !containerRef.current) {
|
||||
return;
|
||||
}
|
||||
const pointsLayer = new mods.GraphicsLayer();
|
||||
const liveLayer = new mods.GraphicsLayer();
|
||||
const map = new mods.EsriMap({ basemap: 'hybrid', layers: [pointsLayer, liveLayer] });
|
||||
view = new mods.MapView({
|
||||
container: containerRef.current,
|
||||
map,
|
||||
center: DEFAULT_CENTER,
|
||||
zoom: DEFAULT_ZOOM,
|
||||
});
|
||||
loadEsriModules()
|
||||
.then((mods) => {
|
||||
if (cancelled || !containerRef.current) {
|
||||
return;
|
||||
}
|
||||
const pointsLayer = new mods.GraphicsLayer();
|
||||
const liveLayer = new mods.GraphicsLayer();
|
||||
const map = new mods.EsriMap({ basemap: 'hybrid', layers: [pointsLayer, liveLayer] });
|
||||
view = new mods.MapView({
|
||||
container: containerRef.current,
|
||||
map,
|
||||
center: DEFAULT_CENTER,
|
||||
zoom: DEFAULT_ZOOM,
|
||||
});
|
||||
|
||||
modsRef.current = mods;
|
||||
pointsLayerRef.current = pointsLayer;
|
||||
liveLayerRef.current = liveLayer;
|
||||
viewRef.current = view;
|
||||
setReady(true);
|
||||
});
|
||||
modsRef.current = mods;
|
||||
pointsLayerRef.current = pointsLayer;
|
||||
liveLayerRef.current = liveLayer;
|
||||
viewRef.current = view;
|
||||
setReady(true);
|
||||
})
|
||||
.catch((error: Error) => {
|
||||
if (!cancelled) {
|
||||
console.error('EsriJobMap: map failed to load', error);
|
||||
setLoadError(true);
|
||||
}
|
||||
});
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
@@ -267,25 +281,23 @@ export default function EsriJobMap({ points, liveStatus = null, fitBounds = true
|
||||
|
||||
if (!API_KEY) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
height: heightPx,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
border: '1px dashed #999',
|
||||
borderRadius: 8,
|
||||
color: '#666',
|
||||
}}
|
||||
>
|
||||
<div className={`${mapClassName} ul-map__fallback`} role="status">
|
||||
Set NEXT_PUBLIC_ARCGIS_API_KEY in .env to enable the map.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (loadError) {
|
||||
return (
|
||||
<div className={`${mapClassName} ul-map__fallback`} role="alert">
|
||||
The locate map could not be loaded. Check the network connection and ArcGIS configuration.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ height: heightPx, borderRadius: 8, overflow: 'hidden' }}>
|
||||
<div ref={containerRef} style={{ height: '100%' }} />
|
||||
<div className={mapClassName} role="region" aria-label="Interactive locate map" aria-busy={!ready}>
|
||||
<div ref={containerRef} className="ul-map__canvas" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user