Add live transmitter position (status) alongside logged points
devices/<serial>/log messages now carry a "type": "log" or "status". "log" persists a LocatePoint as before; "status" carries the same position + telemetry shape but is broadcast live over the job's realtime channel without touching locate_points — it's a current- position update, not a recorded point. The job map renders the latest status as a blue "you are here" marker (with a soft accuracy-radius halo) that moves in place as new updates arrive, separate from the colored polyline of logged points. Clicking it shows the same detail readout as a logged point. The simulator gained a message-type toggle (Log point / Status update) so both paths can be exercised from /sim. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
ulhub
@@ -2,7 +2,7 @@ import { useRouter } from 'next/router';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import Layout from '../../components/Layout';
|
||||
import JobMap from '../../components/map/JobMap';
|
||||
import { pointSummary, type MapPoint } from '../../components/map/types';
|
||||
import { pointSummary, type LiveStatus, type MapPoint } from '../../components/map/types';
|
||||
import { api } from '../../lib/api';
|
||||
import { useRequireAuth } from '../../lib/auth-context';
|
||||
import { useJobStream } from '../../lib/use-job-stream';
|
||||
@@ -32,6 +32,7 @@ export default function JobDetailPage() {
|
||||
const [job, setJob] = useState<JobDetail | null>(null);
|
||||
const [points, setPoints] = useState<MapPoint[]>([]);
|
||||
const [live, setLive] = useState(0);
|
||||
const [liveStatus, setLiveStatus] = useState<LiveStatus | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -57,7 +58,9 @@ export default function JobDetailPage() {
|
||||
setLive((n) => n + incoming.length);
|
||||
}, []);
|
||||
|
||||
useJobStream(jobId, onLivePoints);
|
||||
const onStatus = useCallback((status: LiveStatus) => setLiveStatus(status), []);
|
||||
|
||||
useJobStream(jobId, onLivePoints, onStatus);
|
||||
|
||||
const updateStatus = async (status: string) => {
|
||||
if (!orgId || !jobId) {
|
||||
@@ -108,9 +111,14 @@ export default function JobDetailPage() {
|
||||
{points.length > 0 && (
|
||||
<span style={{ color: '#777' }}>latest: {pointSummary(points[points.length - 1])}</span>
|
||||
)}
|
||||
{liveStatus && (
|
||||
<span style={{ color: '#1a73e8' }}>
|
||||
● transmitter {liveStatus.serial} live ({new Date(liveStatus.recordedAt).toLocaleTimeString()})
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<JobMap points={points} heightPx={520} />
|
||||
<JobMap points={points} liveStatus={liveStatus} heightPx={520} />
|
||||
</>
|
||||
)}
|
||||
</Layout>
|
||||
|
||||
@@ -14,11 +14,14 @@ interface JobOption {
|
||||
interface SentEntry {
|
||||
at: string;
|
||||
seq: number;
|
||||
type: MessageType;
|
||||
lat: number;
|
||||
lng: number;
|
||||
depth: number;
|
||||
}
|
||||
|
||||
type MessageType = 'log' | 'status';
|
||||
|
||||
const UTILITIES = ['GAS', 'WATER', 'ELECTRIC', 'SEWER', 'TELECOM', 'CATV', 'FIBER', 'STEAM', 'UNKNOWN'];
|
||||
const FIX_TYPES = ['FIXED_RTK', 'FLOAT_RTK', 'DGPS', 'AUTONOMOUS', 'NONE'];
|
||||
const LOCATE_MODES = ['PEAK', 'NULL', 'BROAD_PEAK', 'SONDE'];
|
||||
@@ -47,6 +50,7 @@ export default function SimulatorPage() {
|
||||
const [newTicket, setNewTicket] = useState('');
|
||||
const [newTitle, setNewTitle] = useState('');
|
||||
|
||||
const [messageType, setMessageType] = useState<MessageType>('log');
|
||||
const [serial, setSerial] = useState('');
|
||||
const [utility, setUtility] = useState('GAS');
|
||||
const [fixType, setFixType] = useState('FIXED_RTK');
|
||||
@@ -131,6 +135,7 @@ export default function SimulatorPage() {
|
||||
const pointDepth = Math.max(0.1, jitter(depth, 0.15));
|
||||
try {
|
||||
await api.post(`/api/orgs/${orgId}/sim/publish`, {
|
||||
type: messageType,
|
||||
serial,
|
||||
jobId,
|
||||
lat: pos.lat,
|
||||
@@ -153,7 +158,12 @@ export default function SimulatorPage() {
|
||||
ts: new Date().toISOString(),
|
||||
});
|
||||
setCount(seq);
|
||||
setSent((prev) => [{ at: new Date().toLocaleTimeString(), seq, lat: pos.lat, lng: pos.lng, depth: pointDepth }, ...prev].slice(0, 25));
|
||||
setSent((prev) =>
|
||||
[
|
||||
{ at: new Date().toLocaleTimeString(), seq, type: messageType, lat: pos.lat, lng: pos.lng, depth: pointDepth },
|
||||
...prev,
|
||||
].slice(0, 25),
|
||||
);
|
||||
setError(null);
|
||||
} catch (err: any) {
|
||||
setError(err.message);
|
||||
@@ -210,6 +220,18 @@ export default function SimulatorPage() {
|
||||
</p>
|
||||
{error && <p style={{ color: '#c62828' }}>{error}</p>}
|
||||
|
||||
<fieldset style={{ marginBottom: '1rem', border: '1px solid #ddd', borderRadius: 8, padding: '1rem' }}>
|
||||
<legend>Message type</legend>
|
||||
<label style={{ marginRight: '1.5rem' }}>
|
||||
<input type="radio" checked={messageType === 'log'} onChange={() => setMessageType('log')} /> Log point{' '}
|
||||
<span style={{ color: '#888' }}>— persisted, appears on the utility line</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" checked={messageType === 'status'} onChange={() => setMessageType('status')} /> Status
|
||||
update <span style={{ color: '#888' }}>— live position only, not saved</span>
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<fieldset style={{ marginBottom: '1rem', border: '1px solid #ddd', borderRadius: 8, padding: '1rem' }}>
|
||||
<legend>Job</legend>
|
||||
{!creatingJob ? (
|
||||
@@ -371,10 +393,10 @@ export default function SimulatorPage() {
|
||||
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '1rem' }}>
|
||||
<button onClick={sendPoint} disabled={!jobId || autoSending} style={{ padding: '0.6rem 1rem' }}>
|
||||
Send point
|
||||
Send {messageType === 'log' ? 'log point' : 'status update'}
|
||||
</button>
|
||||
<button onClick={toggleAutoSend} disabled={!jobId} style={{ padding: '0.6rem 1rem' }}>
|
||||
{autoSending ? 'Stop auto-send' : 'Start auto-send'}
|
||||
{autoSending ? 'Stop auto-send' : `Start auto-send (${messageType})`}
|
||||
</button>
|
||||
<label>
|
||||
every{' '}
|
||||
@@ -398,6 +420,7 @@ export default function SimulatorPage() {
|
||||
<tr style={{ textAlign: 'left', borderBottom: '2px solid #ddd' }}>
|
||||
<th style={{ padding: '0.4rem' }}>Time</th>
|
||||
<th>Seq</th>
|
||||
<th>Type</th>
|
||||
<th>Lat</th>
|
||||
<th>Lng</th>
|
||||
<th>Depth</th>
|
||||
@@ -408,6 +431,7 @@ export default function SimulatorPage() {
|
||||
<tr key={s.seq} style={{ borderBottom: '1px solid #eee' }}>
|
||||
<td style={{ padding: '0.4rem' }}>{s.at}</td>
|
||||
<td>{s.seq}</td>
|
||||
<td style={{ color: s.type === 'log' ? '#333' : '#1a73e8' }}>{s.type}</td>
|
||||
<td>{s.lat.toFixed(7)}</td>
|
||||
<td>{s.lng.toFixed(7)}</td>
|
||||
<td>{s.depth} m</td>
|
||||
@@ -415,7 +439,7 @@ export default function SimulatorPage() {
|
||||
))}
|
||||
{sent.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={5} style={{ padding: '1.5rem', textAlign: 'center', color: '#888' }}>
|
||||
<td colSpan={6} style={{ padding: '1.5rem', textAlign: 'center', color: '#888' }}>
|
||||
No points sent yet.
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
Reference in New Issue
Block a user