guh wuh

2026-09-16 09:31:20 -04:00 · 2025-11-18 04:33:04 -05:00
parent 22c5858ab6
commit 3151419b92
5 changed files with 104 additions and 84 deletions
@@ -0,0 +1,96 @@
+import { useMemo } from 'react';
+import { useControlSystem } from '../controls/index.js';
+import AuthPanel from './AuthPanel.jsx';
+import AdminPanel from './AdminPanel.jsx';
+import KeymapSettings from './KeymapSettings.jsx';
+import GamepadMappingSettings from './GamepadMappingSettings.jsx';
+import Tabs, { Tab, TabList, TabPanel, TabPanels } from './Tabs.jsx';
+
+const manualTabs = [
+  { key: 'start', label: 'Start OI' },
+  { key: 'safe', label: 'Safe' },
+  { key: 'full', label: 'Full' },
+  { key: 'passive', label: 'Passive' },
+  { key: 'dock', label: 'Dock' },
+];
+
+export default function SettingsPanel() {
+  const {
+    state: { roverId },
+    actions: { sendOiCommand, setSensorStream },
+  } = useControlSystem();
+  const canControl = Boolean(roverId);
+
+  const sensorButtons = useMemo(
+    () => [
+      { key: 'start', label: 'Enable stream', enable: true },
+      { key: 'stop', label: 'Disable stream', enable: false },
+    ],
+    [],
+  );
+
+  const handleSensorToggle = (enable) => {
+    if (!roverId) return;
+    setSensorStream(enable);
+  };
+  return (
+    <Tabs defaultTab="keybindings">
+      <TabList>
+        <Tab id="keybindings">Keybindings</Tab>
+        <Tab id="controller">Controller</Tab>
+        <Tab id="admin">Admin</Tab>
+      </TabList>
+      <TabPanels>
+        <TabPanel id="keybindings">
+          <div className="space-y-1">
+            <KeymapSettings />
+          </div>
+        </TabPanel>
+        <TabPanel id="controller">
+          <div className="space-y-1">
+            <GamepadMappingSettings />
+          </div>
+        </TabPanel>
+        <TabPanel id="admin">
+          <div className="space-y-1">
+            <section className="rounded-sm bg-[#242a32] p-1 text-sm text-slate-100">
+              <p className="text-xs text-slate-400">Manual OI commands</p>
+              <div className="mt-1 flex flex-wrap gap-1">
+                {manualTabs.map((tab) => (
+                  <button
+                    key={tab.key}
+                    type="button"
+                    onClick={() => sendOiCommand(tab.key)}
+                    disabled={!canControl}
+                    className="rounded-sm bg-black/40 px-1 py-0.5 text-xs text-slate-200 disabled:opacity-30"
+                  >
+                    {tab.label}
+                  </button>
+                ))}
+              </div>
+            </section>
+            <section className="rounded-sm bg-[#242a32] p-1 text-sm text-slate-100">
+              <p className="text-xs text-slate-400">Sensor stream</p>
+              <div className="mt-1 flex gap-1">
+                {sensorButtons.map((btn) => (
+                  <button
+                    key={btn.key}
+                    type="button"
+                    onClick={() => handleSensorToggle(btn.enable)}
+                    disabled={!canControl}
+                    className="flex-1 rounded-sm bg-black/40 px-1 py-1 text-xs text-slate-200 disabled:opacity-30"
+                  >
+                    {btn.label}
+                  </button>
+                ))}
+              </div>
+              {!canControl && <p className="mt-1 text-xs text-slate-500">Assign a rover to toggle streams.</p>}
+            </section>
+            <AuthPanel />
+            <AdminPanel />
+          </div>
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
+  );
+}