diff --git a/src/app/page.tsx b/src/app/page.tsx index 3b2c646..10154e0 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,6 +1,7 @@ 'use client'; import Layout from '@/components/Layout'; +import { direction } from 'html2canvas/dist/types/css/property-descriptors/direction'; const names = ["Default", "Arm Operation", "Debug", "Auxiliary", "Science"]; const colors = ['#0070f3', '#28a745', '#dc3545', '#ffc107', '#17a2b8']; @@ -83,7 +84,12 @@ const layouts = [ second: { direction: 'row', first: 'webRTCClient:4', - second: 'nodeStatusPanel:5', + second: { + direction: 'column', + first: 'nodeStatusPanel:5', + second: 'rosMonitor:6', + splitPercentage: 70 + }, splitPercentage: 70, }, splitPercentage: 30, @@ -219,4 +225,4 @@ const HomePage = () => { ); }; -export default HomePage; \ No newline at end of file +export default HomePage; diff --git a/src/components/panels/MotorStatusPanel.tsx b/src/components/panels/MotorStatusPanel.tsx index e45261a..87f582c 100644 --- a/src/components/panels/MotorStatusPanel.tsx +++ b/src/components/panels/MotorStatusPanel.tsx @@ -179,6 +179,7 @@ const MotorStatusPanel: React.FC = () => {
diff --git a/src/components/panels/WaypointList.tsx b/src/components/panels/WaypointList.tsx index 686b48c..a4a9619 100644 --- a/src/components/panels/WaypointList.tsx +++ b/src/components/panels/WaypointList.tsx @@ -4,7 +4,7 @@ import React, { useState } from 'react'; import { useWaypoints, Waypoint } from '@/contexts/WaypointContext'; const WaypointList: React.FC = () => { - const { waypoints, removeWaypoint, updateWaypoint } = useWaypoints(); + const { waypoints, removeWaypoint, clearWaypoints, updateWaypoint } = useWaypoints(); const [editingIndex, setEditingIndex] = useState(null); const [editedWaypoint, setEditedWaypoint] = useState(null); @@ -39,91 +39,108 @@ const WaypointList: React.FC = () => { {waypoints.length === 0 ? (

No waypoints added. Click on the map to add one👿

) : ( - < ul style={{ listStyle: 'none', padding: 0 }}> - {/*Ty chat gpt for styling this*/} - {waypoints.map((wp, index) => ( -
  • - {editingIndex === index && editedWaypoint ? ( -
    -
    - - setEditedWaypoint({ ...editedWaypoint, name: e.target.value })} - style={{ padding: '0.25rem' }} - /> +
    + +
      + {/*Ty chat gpt for styling this*/} + {waypoints.map((wp, index) => ( +
    • + {editingIndex === index && editedWaypoint ? ( +
      +
      + + setEditedWaypoint({ ...editedWaypoint, name: e.target.value })} + style={{ padding: '0.25rem' }} + /> +
      +
      + + setEditedWaypoint({ ...editedWaypoint, order: Number(e.target.value) })} + style={{ padding: '0.25rem', width: '60px' }} + /> +
      +
      + + setEditedWaypoint({ ...editedWaypoint, color: e.target.value })} + style={{ padding: '0.25rem' }} + /> +
      +
      + + +
      -
      - - setEditedWaypoint({ ...editedWaypoint, order: Number(e.target.value) })} - style={{ padding: '0.25rem', width: '60px' }} - /> -
      -
      - - setEditedWaypoint({ ...editedWaypoint, color: e.target.value })} - style={{ padding: '0.25rem' }} - /> -
      -
      - + -
      -
    - ) : ( -
    -
    - {`Waypoint ${wp.order}: ${wp.name} [${wp.coordinate[0].toFixed(6)}, ${wp.coordinate[1].toFixed(6)}]`} - - -
    - )} -
    • - ))} - + )} + + ))} + + ) } diff --git a/src/contexts/WaypointContext.tsx b/src/contexts/WaypointContext.tsx index f1ef79f..ce57f4f 100644 --- a/src/contexts/WaypointContext.tsx +++ b/src/contexts/WaypointContext.tsx @@ -1,6 +1,6 @@ 'use client'; -import React, { createContext, useContext, useState, ReactNode } from 'react'; +import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react'; export type LatLngTuple = [number, number]; @@ -19,10 +19,42 @@ interface WaypointContextType { updateWaypoint: (index: number, updated: Waypoint) => void; } +const COOKIE_MAX_AGE_SECONDS = 60 * 60 * 24; // 1 day + +const getCookie = (name: string, fallback: Waypoint[]) => { + const cookie = document.cookie + .split('; ') + .find((entry) => entry.startsWith(`${name}=`)); + + if (!cookie) return fallback; + + const value = JSON.parse(decodeURIComponent(cookie.split('=')[1])); + + return value; +}; + +const setCookie = (name: string, value: Waypoint[]) => { + document.cookie = + `${name}=${encodeURIComponent(JSON.stringify(value))}; ` + + `max-age=${COOKIE_MAX_AGE_SECONDS}; path=/; SameSite=Lax`; +}; + const WaypointContext = createContext(undefined); export const WaypointProvider: React.FC<{ children: ReactNode }> = ({ children }) => { const [waypoints, setWaypoints] = useState([]); + const [cookiesLoaded, setCookiesLoaded] = useState(false); + + useEffect(() => { + setWaypoints(getCookie("waypoints", [])); + setCookiesLoaded(true); + }, []) + + useEffect(() => { + if (!cookiesLoaded) return; + + setCookie("waypoints", waypoints); + }, [waypoints, cookiesLoaded]) const addWaypoint = (coordinate: LatLngTuple) => { setWaypoints((prev) => [