callibration app working

Author: marcebd

apps/admin/src/pages/Calibration.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef, useMemo, type ComponentType } from 'react';
+import { useState, useEffect, useRef, useMemo, useCallback, type ComponentType } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { Stage, Layer, Image as KonvaImage, Line, Circle, Arrow, Group, Text } from 'react-konva';
 import Draggable from 'react-draggable';
@@ -13,10 +13,20 @@ const ArrowComponent = Arrow as unknown as ComponentType<any>;
 const GroupComponent = Group as unknown as ComponentType<any>;
 const TextComponent = Text as unknown as ComponentType<any>;
 const DraggableComponent = Draggable as unknown as ComponentType<any>;
-import { fetchFloorFeatures, saveFloorFeatures, fetchFloor } from '../services/api';
+import {
+  fetchFloorFeatures,
+  saveFloorFeatures,
+  fetchFloor,
+  fetchCalibrationSessions,
+  type CalibrationSample,
+  type CalibrationSession,
+} from '../services/api';
 import CalibrationSidebar from './Calibration/CalibrationSidebar';
 import './Calibration/CalibrationSidebar.css';
 
+const CALIBRATION_API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:4000/api';
+const CALIBRATION_EVENTS_URL = `${CALIBRATION_API_BASE}/calibration/events`;
+
 interface ControlPoint {
   vertexIndex: number;
   lat: number;
@@ -32,6 +42,14 @@ interface DoorPoint {
 
 type CalibrationStep = 'select' | 'tutorial' | 'door-setup' | 'calibrating' | 'complete';
 type CalibrationWalkPhase = 'select-waypoint' | 'walking' | 'confirm';
+type CalibrationEventType = 'session-started' | 'session-stopped' | 'sample-recorded' | 'corner-recorded';
+
+interface CalibrationStreamEvent<TPayload = unknown> {
+  type: CalibrationEventType;
+  sessionId: string;
+  payload: TPayload;
+  timestamp: number;
+}
 
 export default function Calibration() {
   const { floorId, featureId } = useParams<{ floorId: string; featureId: string }>();
@@ -55,6 +73,14 @@ export default function Calibration() {
   const [isSaving, setIsSaving] = useState(false);
   const [activeWaypointIdx, setActiveWaypointIdx] = useState<number | null>(null);
   const [walkPhase, setWalkPhase] = useState<CalibrationWalkPhase>('select-waypoint');
+  const [remoteSessionId, setRemoteSessionId] = useState<string | null>(null);
+  const [calibrationLinkStatus, setCalibrationLinkStatus] = useState<'idle' | 'connecting' | 'open' | 'error'>('idle');
+  const [calibrationLog, setCalibrationLog] = useState<string[]>([]);
+  const [latestPhoneSample, setLatestPhoneSample] = useState<CalibrationSample | null>(null);
+  const appendCalibrationLog = useCallback((entry: string) => {
+    setCalibrationLog((prev) => [entry, ...prev].slice(0, 40));
+  }, []);
+  const handleRecordPointRef = useRef<(sampleOverride?: { lat: number; lng: number; accuracy: number }) => void>();
   const [doorSelectionError, setDoorSelectionError] = useState<string | null>(null);
 
   // GPS State
@@ -93,6 +119,32 @@ export default function Calibration() {
     setStageSize(computeStageDimensions());
   }, [step, selectedFeature]);
 
+  useEffect(() => {
+    let isSubscribed = true;
+    fetchCalibrationSessions()
+      .then((sessions: CalibrationSession[]) => {
+        if (!isSubscribed || sessions.length === 0) return;
+        const activeSession = sessions.find((session) => !session.stoppedAt);
+        if (!activeSession) return;
+        setRemoteSessionId(activeSession.sessionId);
+        appendCalibrationLog(`Session ${activeSession.sessionId} resumed`);
+        if (activeSession.lastSample) {
+          setLatestPhoneSample(activeSession.lastSample);
+          setCurrentGPS({
+            lat: activeSession.lastSample.lat,
+            lng: activeSession.lastSample.lng,
+            accuracy: activeSession.lastSample.accuracy,
+          });
+        }
+      })
+      .catch((error) => {
+        console.error('Failed to fetch calibration sessions', error);
+      });
+    return () => {
+      isSubscribed = false;
+    };
+  }, []);
+
   const loadFloorData = async () => {
     try {
       const [floorData, featuresData] = await Promise.all([
@@ -113,6 +165,90 @@ export default function Calibration() {
         const allFeaturesData = featuresData.features;
         const found = allFeaturesData.find((f: any) => f.properties.id === featureId);
         if (found) {
+
+    useEffect(() => {
+      setCalibrationLinkStatus('connecting');
+      const source = new EventSource(CALIBRATION_EVENTS_URL);
+
+      const parseEvent = <TPayload,>(event: MessageEvent<string>): CalibrationStreamEvent<TPayload> | null => {
+        try {
+          return JSON.parse(event.data) as CalibrationStreamEvent<TPayload>;
+        } catch (error) {
+          console.warn('Failed to parse calibration event', error);
+          return null;
+        }
+      };
+
+      source.onopen = () => {
+        setCalibrationLinkStatus('open');
+        appendCalibrationLog('Calibration stream connected');
+      };
+
+      source.onerror = () => {
+        setCalibrationLinkStatus('error');
+        appendCalibrationLog('Calibration stream error');
+      };
+
+      const handleSample = (event: MessageEvent<string>) => {
+        const data = parseEvent<CalibrationSample>(event);
+        if (!data || !data.payload) return;
+        setRemoteSessionId((prev) => prev ?? data.sessionId);
+        setLatestPhoneSample(data.payload);
+        setCurrentGPS({
+          lat: data.payload.lat,
+          lng: data.payload.lng,
+          accuracy: data.payload.accuracy,
+        });
+      };
+
+      const handleCorner = (event: MessageEvent<string>) => {
+        const data = parseEvent<{ sample: CalibrationSample; recordedAt: number }>(event);
+        if (!data || !data.payload) return;
+        setRemoteSessionId((prev) => prev ?? data.sessionId);
+        appendCalibrationLog(`Corner recorded (${data.sessionId})`);
+        handleRecordPointRef.current?.({
+          lat: data.payload.sample.lat,
+          lng: data.payload.sample.lng,
+          accuracy: data.payload.sample.accuracy,
+        });
+      };
+
+      const handleSessionStarted = (event: MessageEvent<string>) => {
+        const data = parseEvent<CalibrationSession>(event);
+        if (!data || !data.payload) return;
+        setRemoteSessionId(data.sessionId);
+        appendCalibrationLog(`Session ${data.sessionId} started`);
+        if (data.payload.lastSample) {
+          setLatestPhoneSample(data.payload.lastSample);
+          setCurrentGPS({
+            lat: data.payload.lastSample.lat,
+            lng: data.payload.lastSample.lng,
+            accuracy: data.payload.lastSample.accuracy,
+          });
+        }
+      };
+
+      const handleSessionStopped = (event: MessageEvent<string>) => {
+        const data = parseEvent<{ stoppedAt: number; lastSample?: CalibrationSample }>(event);
+        if (!data) return;
+        appendCalibrationLog(`Session ${data.sessionId} stopped`);
+        setRemoteSessionId((current) => (current === data.sessionId ? null : current));
+      };
+
+      source.addEventListener('sample-recorded', handleSample);
+      source.addEventListener('corner-recorded', handleCorner);
+      source.addEventListener('session-started', handleSessionStarted);
+      source.addEventListener('session-stopped', handleSessionStopped);
+
+      return () => {
+        source.removeEventListener('sample-recorded', handleSample);
+        source.removeEventListener('corner-recorded', handleCorner);
+        source.removeEventListener('session-started', handleSessionStarted);
+        source.removeEventListener('session-stopped', handleSessionStopped);
+        source.close();
+        setCalibrationLinkStatus('idle');
+      };
+    }, [appendCalibrationLog]);
           selectFeature(found, allFeaturesData);
         }
       }
@@ -253,29 +389,6 @@ export default function Calibration() {
     setStep('calibrating');
   };
 
-  const handleRecordPoint = () => {
-    if (!currentGPS || perimeterSequence.length === 0) return;
-
-    const sequenceIndex = perimeterSequence[currentVertexIndex];
-    if (sequenceIndex === undefined) return;
-
-    const newPoint: ControlPoint = {
-      vertexIndex: sequenceIndex,
-      lat: currentGPS.lat,
-      lng: currentGPS.lng,
-      accuracy: currentGPS.accuracy
-    };
-
-    const updatedPoints = [...controlPoints, newPoint];
-    setControlPoints(updatedPoints);
-
-    if (updatedPoints.length >= perimeterSequence.length) {
-      saveCalibration(updatedPoints);
-    } else {
-      setCurrentVertexIndex(prev => Math.min(prev + 1, perimeterSequence.length - 1));
-    }
-  };
-
   const saveCalibration = async (finalPoints: ControlPoint[]) => {
     setIsSaving(true);
     try {
@@ -363,6 +476,26 @@ export default function Calibration() {
     return Array.from({ length: polygonPoints.length }, (_, offset) => (activeWaypointIdx + offset) % polygonPoints.length);
   }, [activeWaypointIdx, polygonPoints]);
 
+  const phoneLinkStatusLabel = useMemo(() => {
+    if (remoteSessionId) {
+      const accuracyText = latestPhoneSample && Number.isFinite(latestPhoneSample.accuracy)
+        ? ` • ±${latestPhoneSample.accuracy.toFixed(1)}m`
+        : '';
+      return `Active (${remoteSessionId.slice(-6)})${accuracyText}`;
+    }
+    if (calibrationLinkStatus === 'open') return 'Waiting for session';
+    if (calibrationLinkStatus === 'connecting') return 'Connecting…';
+    if (calibrationLinkStatus === 'error') return 'Connection lost';
+    return 'Idle';
+  }, [calibrationLinkStatus, latestPhoneSample, remoteSessionId]);
+
+  const phoneLinkColor = useMemo(() => {
+    if (remoteSessionId) return '#28a745';
+    if (calibrationLinkStatus === 'error') return '#ff5252';
+    if (calibrationLinkStatus === 'connecting') return '#ff9800';
+    return '#aaaaaa';
+  }, [calibrationLinkStatus, remoteSessionId]);
+
   useEffect(() => {
     if (perimeterSequence.length === 0) {
       setCurrentVertexIndex(0);
@@ -380,6 +513,45 @@ export default function Calibration() {
     setControlPoints([]);
   };
 
+  const handleRecordPoint = useCallback((sampleOverride?: { lat: number; lng: number; accuracy: number }) => {
+    if (step !== 'calibrating') return;
+    const source = sampleOverride ?? currentGPS;
+    if (!source || perimeterSequence.length === 0) return;
+
+    setControlPoints((previous) => {
+      const nextIndex = previous.length;
+      const sequenceIndex = perimeterSequence[nextIndex];
+      if (sequenceIndex === undefined) {
+        return previous;
+      }
+
+      if (previous.some((point) => point.vertexIndex === sequenceIndex)) {
+        return previous;
+      }
+
+      const newPoint: ControlPoint = {
+        vertexIndex: sequenceIndex,
+        lat: source.lat,
+        lng: source.lng,
+        accuracy: source.accuracy,
+      };
+
+      const updatedPoints = [...previous, newPoint];
+
+      if (updatedPoints.length >= perimeterSequence.length) {
+        saveCalibration(updatedPoints);
+      } else {
+        setCurrentVertexIndex(updatedPoints.length);
+      }
+
+      return updatedPoints;
+    });
+  }, [currentGPS, perimeterSequence, saveCalibration, step]);
+
+  useEffect(() => {
+    handleRecordPointRef.current = handleRecordPoint;
+  }, [handleRecordPoint]);
+
   const sidebarDefaultPosition = useMemo(() => ({
     x: 24,
     y: Math.max(48, stageSize.height / 2 - 160)
@@ -575,6 +747,13 @@ export default function Calibration() {
             }}>
               GPS: ±{currentGPS?.accuracy.toFixed(1) || '?'}m
             </div>
+            <div style={{
+              fontSize: '12px',
+              color: phoneLinkColor,
+              marginTop: '6px'
+            }}>
+              Phone Link: {phoneLinkStatusLabel}
+            </div>
           </div>
           <div style={{ marginTop: '12px' }}>
             <div style={{ fontSize: '12px', letterSpacing: '0.08em', color: '#aaaaaa', marginBottom: '8px' }}>
@@ -754,6 +933,7 @@ export default function Calibration() {
           )}
           <div style={{ textAlign: 'center', marginTop: '10px', fontSize: '12px', color: '#aaa' }}>
             {!currentGPS ? '⚠️ Waiting for GPS signal' : `GPS: ${currentGPS.accuracy.toFixed(1)}m`}
+            {remoteSessionId ? ` • Session ${remoteSessionId.slice(-6)}` : ''}
           </div>
         </div>
       </div>
@@ -825,6 +1005,9 @@ export default function Calibration() {
               GPS: ±{currentGPS?.accuracy.toFixed(1) || '?'}m
             </div>
           </div>
+          <div style={{ fontSize: '12px', color: phoneLinkColor }}>
+            Phone Link: {phoneLinkStatusLabel}
+          </div>
 
           <div style={{
             width: '100%',
@@ -1025,11 +1208,33 @@ export default function Calibration() {
               </div>
             ))}
           </div>
+
+          <div style={{
+            position: 'absolute',
+            bottom: '20px',
+            right: '20px',
+            backgroundColor: 'rgba(0, 0, 0, 0.8)',
+            color: 'white',
+            padding: '15px',
+            borderRadius: '12px',
+            maxWidth: '220px'
+          }}>
+            <div style={{ fontSize: '12px', fontWeight: 'bold', marginBottom: '10px' }}>PHONE STREAM</div>
+            {calibrationLog.length === 0 ? (
+              <div style={{ fontSize: '12px', color: '#94a3b8' }}>Waiting for events…</div>
+            ) : (
+              calibrationLog.slice(0, 4).map((entry, idx) => (
+                <div key={`${entry}-${idx}`} style={{ fontSize: '12px', color: '#cbd5f5', marginBottom: idx < 3 ? '6px' : 0 }}>
+                  {entry}
+                </div>
+              ))
+            )}
+          </div>
         </div>
 
         <div style={{ padding: '20px', backgroundColor: '#1a1a1a', borderTop: '1px solid #333' }}>
           <button
-            onClick={handleRecordPoint}
+            onClick={() => handleRecordPoint()}
             disabled={!currentGPS || isSaving || perimeterSequence.length === 0}
             style={{
               width: '100%',

apps/admin/src/services/api.ts

@@ -175,3 +175,32 @@ export const getCalibrationStats = async (floorId: string) => {
   const response = await api.get(`/floors/${floorId}/calibration-stats`);
   return response.data.data;
 };
+
+export type CalibrationSample = {
+  lat: number;
+  lng: number;
+  accuracy: number;
+  heading?: number | null;
+  speed?: number | null;
+  timestamp: number;
+};
+
+export type CalibrationCornerRecord = {
+  sample: CalibrationSample;
+  recordedAt: number;
+};
+
+export type CalibrationSession = {
+  sessionId: string;
+  startedAt: number;
+  stoppedAt?: number;
+  samples: CalibrationSample[];
+  corners: CalibrationCornerRecord[];
+  meta?: Record<string, unknown>;
+  lastSample?: CalibrationSample;
+};
+
+export const fetchCalibrationSessions = async (): Promise<CalibrationSession[]> => {
+  const response = await api.get('/calibration/sessions');
+  return response.data.data as CalibrationSession[];
+};