legop3/MultiRoombaRover
1
0
Fork 0
mirror of https://github.com/legop3/MultiRoombaRover.git synced 2026-09-15 17:12:59 -04:00
Code Issues Actions 2 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-title" content="Multi Roomba Rover" />
<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">
</head>
<body>
webui/src/components/AdminPanel.jsx
+31 -8
View File
@@ -1,6 +1,7 @@
import { useMemo, useState } from 'react';
import { useEffect, useMemo, useState } from 'react';
import { useCommandPipeline } from '../controls/commandPipeline.js';
import { useSession } from '../context/SessionContext.jsx';
import { useSocket } from '../context/SocketContext.jsx';
import RoverRoster from './RoverRoster.jsx';
const MODES = [
@@ -14,10 +15,12 @@ const IR_SHOT_CODE = 200;
export default function AdminPanel() {
const { session, lockRover, setMode, requestControl } = useSession();
const socket = useSocket();
const pipeline = useCommandPipeline();
const roster = useMemo(() => session?.roster ?? [], [session?.roster]);
const [lockStates, setLockStates] = useState({});
const health = session?.health || null;
const [transport, setTransport] = useState(null);
const isAdmin =
session?.role === 'admin' ||
@@ -71,18 +74,38 @@ export default function AdminPanel() {
return map;
}, [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 (
<section className="panel-section space-y-0.5 text-base">
{isAdmin ? (
<div className="flex items-center justify-between gap-0.5 text-sm">
<span>Admin controls</span>
<select value={currentMode} onChange={handleModeChange} className="field-input text-sm">
{MODES.map((mode) => (
<option key={mode.key} value={mode.key}>
{mode.label}
</option>
))}
</select>
<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">
{MODES.map((mode) => (
<option key={mode.key} value={mode.key}>
{mode.label}
</option>
))}
</select>
</div>
</div>
) : (
<div className="flex items-center justify-between gap-0.5 text-sm">