legop3/MultiRoombaRover
1
0
Fork 0
mirror of https://github.com/legop3/MultiRoombaRover.git synced 2026-09-17 10:00:46 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

conn status in admin panel

Browse Source
This commit is contained in:
legop3
2026-01-15 03:02:55 -05:00
parent 37927d82af
commit 9622129c73
3 changed files with 39 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/public/assets/index-UA5S-yPp.js → server/public/assets/index-dcJYUpo5.js
+7 -7
View File
File diff suppressed because one or more lines are too long
server/public/index.html
+1 -1
View File
@@ -11,7 +11,7 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Multi Roomba Rover" /> <meta name="apple-mobile-web-app-title" content="Multi Roomba Rover" />
<title>Multi Roomba Rover</title> <title>Multi Roomba Rover</title>
<script type="module" crossorigin src="/assets/index-UA5S-yPp.js"></script> <script type="module" crossorigin src="/assets/index-dcJYUpo5.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-BY_dmM98.css"> <link rel="stylesheet" crossorigin href="/assets/index-BY_dmM98.css">
</head> </head>
<body> <body>
webui/src/components/AdminPanel.jsx
+24 -1
View File
@@ -1,6 +1,7 @@
import { useMemo, useState } from 'react'; import { useEffect, useMemo, useState } from 'react';
import { useCommandPipeline } from '../controls/commandPipeline.js'; import { useCommandPipeline } from '../controls/commandPipeline.js';
import { useSession } from '../context/SessionContext.jsx'; import { useSession } from '../context/SessionContext.jsx';
import { useSocket } from '../context/SocketContext.jsx';
import RoverRoster from './RoverRoster.jsx'; import RoverRoster from './RoverRoster.jsx';
const MODES = [ const MODES = [
@@ -14,10 +15,12 @@ const IR_SHOT_CODE = 200;
export default function AdminPanel() { export default function AdminPanel() {
const { session, lockRover, setMode, requestControl } = useSession(); const { session, lockRover, setMode, requestControl } = useSession();
const socket = useSocket();
const pipeline = useCommandPipeline(); const pipeline = useCommandPipeline();
const roster = useMemo(() => session?.roster ?? [], [session?.roster]); const roster = useMemo(() => session?.roster ?? [], [session?.roster]);
const [lockStates, setLockStates] = useState({}); const [lockStates, setLockStates] = useState({});
const health = session?.health || null; const health = session?.health || null;
const [transport, setTransport] = useState(null);
const isAdmin = const isAdmin =
session?.role === 'admin' || session?.role === 'admin' ||
@@ -71,11 +74,30 @@ export default function AdminPanel() {
return map; return map;
}, [roster, lockStates]); }, [roster, lockStates]);
useEffect(() => {
if (!socket) return undefined;
const updateTransport = () => {
const name = socket.io?.engine?.transport?.name || null;
setTransport(name);
};
updateTransport();
socket.on('connect', updateTransport);
socket.on('disconnect', () => setTransport(null));
socket.io?.engine?.on('upgrade', updateTransport);
return () => {
socket.off('connect', updateTransport);
socket.off('disconnect');
socket.io?.engine?.off('upgrade', updateTransport);
};
}, [socket]);
return ( return (
<section className="panel-section space-y-0.5 text-base"> <section className="panel-section space-y-0.5 text-base">
{isAdmin ? ( {isAdmin ? (
<div className="flex items-center justify-between gap-0.5 text-sm"> <div className="flex items-center justify-between gap-0.5 text-sm">
<span>Admin controls</span> <span>Admin controls</span>
<div className="flex items-center gap-0.5">
<span className="panel-muted text-xs">{transport ? `Conn: ${transport}` : 'Conn: —'}</span>
<select value={currentMode} onChange={handleModeChange} className="field-input text-sm"> <select value={currentMode} onChange={handleModeChange} className="field-input text-sm">
{MODES.map((mode) => ( {MODES.map((mode) => (
<option key={mode.key} value={mode.key}> <option key={mode.key} value={mode.key}>
@@ -84,6 +106,7 @@ export default function AdminPanel() {
))} ))}
</select> </select>
</div> </div>
</div>
) : ( ) : (
<div className="flex items-center justify-between gap-0.5 text-sm"> <div className="flex items-center justify-between gap-0.5 text-sm">
<span>Rover controls</span> <span>Rover controls</span>