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

guh

Browse Source
This commit is contained in:
legop3
2025-11-15 22:09:56 -05:00
parent d55726eb1f
commit 0caae506f4
9 changed files with 69 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/App.jsx
+19 -19
View File
@@ -12,9 +12,9 @@ import { useVideoRequests } from './hooks/useVideoRequests.js';
function RoomCameraPanel() {
return (
<div className="min-h-[8rem] rounded-sm bg-[#242a32] p-1 text-sm text-slate-200">
<p className="text-center text-xs text-slate-400">Room camera</p>
<p className="mt-1 text-center text-sm text-slate-200">Feed placeholder. Wire upcoming room cam here.</p>
<div className="min-h-[8rem] rounded-sm bg-[#242a32] p-2 text-base text-slate-100">
<p className="text-center text-sm text-slate-400">Room camera</p>
<p className="mt-1 text-center">Feed placeholder. Wire upcoming room cam here.</p>
</div>
);
}
@@ -52,12 +52,12 @@ function useLayoutMode() {
function LogPanel() {
const { logs } = useSession();
return (
<div className="rounded-sm bg-[#242a32] p-1 text-xs text-slate-200">
<div className="flex items-center justify-between text-[0.7rem] text-slate-400">
<div className="rounded-sm bg-[#242a32] p-2 text-base text-slate-100">
<div className="flex items-center justify-between text-sm text-slate-400">
<span>Server logs</span>
<span>{logs.length}</span>
</div>
<div className="mt-1 h-48 overflow-y-auto rounded-sm bg-black/40 p-1 font-mono text-[0.65rem] text-slate-300">
<div className="mt-2 h-48 overflow-y-auto rounded-sm bg-black/40 p-2 font-mono text-sm text-slate-300">
{logs.length === 0 ? (
<p>No logs yet.</p>
) : (
@@ -93,7 +93,7 @@ function DriverVideoPanel() {
return (
<section className="rounded-sm bg-[#242a32] p-1">
{roverId ? (
<div className="min-h-[55vh]">
<div className="min-h-[70vh]">
<VideoTile
sessionInfo={info}
label={roverId}
@@ -130,17 +130,17 @@ function AuthPanel() {
}
return (
<div className="rounded-sm bg-[#242a32] p-1 text-sm text-slate-200">
<p className="text-xs text-slate-400">Admin login</p>
<form className="mt-1 flex flex-col gap-1" onSubmit={handleLogin}>
<div className="rounded-sm bg-[#242a32] p-2 text-base text-slate-100">
<p className="text-sm text-slate-400">Admin login</p>
<form className="mt-2 flex flex-col gap-2" onSubmit={handleLogin}>
<input
className="rounded-sm bg-black/50 px-1 py-1 text-slate-100"
className="rounded-sm bg-black/50 px-2 py-1 text-slate-100"
placeholder="Username"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
<input
className="rounded-sm bg-black/50 px-1 py-1 text-slate-100"
className="rounded-sm bg-black/50 px-2 py-1 text-slate-100"
placeholder="Password"
type="password"
value={password}
@@ -149,23 +149,23 @@ function AuthPanel() {
<button
type="submit"
disabled={loading}
className="rounded-sm bg-slate-200 px-1 py-1 text-xs font-semibold text-black disabled:opacity-50"
className="rounded-sm bg-slate-200 px-2 py-1 text-sm font-semibold text-black disabled:opacity-50"
>
{loading ? 'Logging in…' : 'Login'}
</button>
</form>
<div className="mt-1 flex gap-1 text-xs">
<div className="mt-2 flex gap-2 text-sm">
<button
type="button"
onClick={() => setRole('user')}
className="flex-1 rounded-sm bg-black/40 px-1 py-1 text-slate-200"
className="flex-1 rounded-sm bg-black/40 px-2 py-1 text-slate-200"
>
Driver
</button>
<button
type="button"
onClick={() => setRole('spectator')}
className="flex-1 rounded-sm bg-black/40 px-1 py-1 text-slate-200"
className="flex-1 rounded-sm bg-black/40 px-2 py-1 text-slate-200"
>
Spectator
</button>
@@ -177,7 +177,7 @@ function AuthPanel() {
function DesktopLayout() {
return (
<div className="flex flex-col gap-1">
<section className="grid grid-cols-[minmax(0,0.9fr)_minmax(0,1.6fr)_minmax(0,0.9fr)] gap-1">
<section className="grid grid-cols-[minmax(0,0.6fr)_minmax(0,2.2fr)_minmax(0,0.6fr)] gap-1">
<TelemetryPanel />
<DriverVideoPanel />
<DrivePanel />
@@ -212,7 +212,7 @@ function MobilePortraitLayout() {
function MobileLandscapeLayout() {
return (
<div className="flex flex-col gap-1">
<section className="grid grid-cols-[minmax(0,1fr)_minmax(0,1.4fr)_minmax(0,1fr)] gap-1">
<section className="grid grid-cols-[minmax(0,0.7fr)_minmax(0,2.1fr)_minmax(0,0.7fr)] gap-1">
<div className="flex flex-col gap-1">
<DrivePanel />
<AuxMotorControls />
@@ -244,7 +244,7 @@ function App() {
return (
<div className="min-h-screen bg-black text-slate-50">
<DriveControlProvider>
<main className="flex w-full flex-col gap-1 px-1 py-1">{renderedLayout}</main>
<main className="flex w-full flex-col gap-1 px-1 py-1 text-base">{renderedLayout}</main>
<AlertFeed />
</DriveControlProvider>
</div>