Initial commit: Refactor AgvAutoRunControls

2025-12-18 23:52:02 +09:00
commit c4089aeb20
25 changed files with 7517 additions and 0 deletions
--- a/components/AgvAutoRunControls.tsx
+++ b/components/AgvAutoRunControls.tsx
@@ -0,0 +1,104 @@
+
+import React from 'react';
+import { Play, Square, ArrowLeft, ArrowRight, Radar } from 'lucide-react';
+import { AgvState, AgvRunConfig } from '../types';
+
+interface AgvAutoRunControlsProps {
+  agvState: AgvState;
+  updateRunConfig: (key: keyof AgvRunConfig, value: any) => void;
+  toggleRun: () => void;
+  isRunning: boolean;
+  isError: boolean;
+  setLidar: (isOn: boolean) => void;
+}
+
+const AgvAutoRunControls: React.FC<AgvAutoRunControlsProps> = ({
+  agvState,
+  updateRunConfig,
+  toggleRun,
+  isRunning,
+  isError,
+  setLidar,
+}) => {
+  return (
+    <div className={`${isError ? 'opacity-50 pointer-events-none' : ''}`}>
+      <div className="flex items-center justify-between mb-2 px-1">
+        <h3 className="text-xs font-bold text-gray-400 uppercase tracking-wider">Auto Run</h3>
+        <span className={`text-[10px] font-bold uppercase px-2 py-0.5 rounded-full border ${isRunning ? 'bg-green-900/50 border-green-500 text-green-400' : 'bg-gray-800 border-gray-600 text-gray-500'}`}>
+          {isRunning ? 'Running' : 'Ready'}
+        </span>
+      </div>
+      
+      <div className="bg-gray-800 rounded-lg p-3 border border-gray-700 shadow-inner space-y-3">
+        <div className="flex items-center justify-between">
+          <span className="text-xs text-gray-400 font-medium">Direction</span>
+          <div className="flex bg-gray-900 rounded p-1 gap-1">
+            {['FWD', 'BWD'].map(dir => (
+              <button 
+                key={dir}
+                onClick={() => updateRunConfig('direction', dir)}
+                disabled={isRunning}
+                className={`text-xs px-3 py-1 rounded transition-colors ${agvState.runConfig.direction === dir ? 'bg-blue-600 text-white shadow-sm' : 'text-gray-500 hover:text-gray-300 hover:bg-gray-800'}`}
+              >
+                {dir}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between">
+          <span className="text-xs text-gray-400 font-medium">Branch</span>
+          <div className="flex bg-gray-900 rounded p-1 gap-1">
+            <button onClick={() => updateRunConfig('branch', 'LEFT')} disabled={isRunning} className={`p-1.5 rounded ${agvState.runConfig.branch === 'LEFT' ? 'bg-blue-600 text-white' : 'text-gray-500 hover:bg-gray-800'}`}><ArrowLeft size={14}/></button>
+            <button onClick={() => updateRunConfig('branch', 'STRAIGHT')} disabled={isRunning} className={`px-2 py-1 text-xs rounded ${agvState.runConfig.branch === 'STRAIGHT' ? 'bg-blue-600 text-white' : 'text-gray-500 hover:bg-gray-800'}`}>STR</button>
+            <button onClick={() => updateRunConfig('branch', 'RIGHT')} disabled={isRunning} className={`p-1.5 rounded ${agvState.runConfig.branch === 'RIGHT' ? 'bg-blue-600 text-white' : 'text-gray-500 hover:bg-gray-800'}`}><ArrowRight size={14}/></button>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between">
+          <span className="text-xs text-gray-400 font-medium">Speed</span>
+          <div className="flex bg-gray-900 rounded p-1 gap-1">
+            {['L', 'M', 'H'].map(spd => (
+              <button 
+                key={spd}
+                onClick={() => updateRunConfig('speedLevel', spd)}
+                disabled={isRunning}
+                className={`w-8 py-1 text-xs rounded ${agvState.runConfig.speedLevel === spd ? 'bg-blue-600 text-white shadow-sm' : 'text-gray-500 hover:text-gray-300 hover:bg-gray-800'}`}
+              >
+                {spd}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between">
+          <span className="text-xs text-gray-400 font-medium">Lidar</span>
+          <button 
+            onClick={() => setLidar(!agvState.lidarEnabled)}
+            className={`flex items-center gap-2 px-3 py-1 rounded text-xs transition-colors ${
+              agvState.lidarEnabled 
+              ? 'bg-cyan-600 text-white shadow-sm' 
+              : 'bg-gray-700 text-gray-500 hover:bg-gray-600'
+            }`}
+          >
+            <Radar size={12} className={agvState.lidarEnabled ? "animate-pulse" : ""} />
+            {agvState.lidarEnabled ? 'ON' : 'OFF'}
+          </button>
+        </div>
+
+        <button 
+          onClick={toggleRun}
+          className={`w-full py-2.5 rounded font-bold text-sm flex items-center justify-center gap-2 transition-all shadow-md ${
+            isRunning 
+            ? 'bg-red-600 hover:bg-red-500 text-white ring-2 ring-red-500/50' 
+            : 'bg-green-600 hover:bg-green-500 text-white'
+          }`}
+        >
+          {isRunning ? <><Square size={16} fill="currentColor" /> STOP</> : <><Play size={16} fill="currentColor" /> START</>}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default AgvAutoRunControls;