Refactor UI to light theme, move controls to header, and add collapsible sidebar
This commit is contained in:
103
App.tsx
103
App.tsx
@@ -6,7 +6,7 @@ import { BMSBasicInfo, BMSCellInfo, ConnectionState } from './types';
|
||||
import Dashboard from './components/Dashboard';
|
||||
import Settings from './components/Settings';
|
||||
import Terminal from './components/Terminal';
|
||||
import { LayoutDashboard, Settings as SettingsIcon, Usb, AlertCircle, RefreshCw } from 'lucide-react';
|
||||
import { LayoutDashboard, Settings as SettingsIcon, Usb, AlertCircle, RefreshCw, PanelRightClose, PanelRightOpen } from 'lucide-react';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [connectionState, setConnectionState] = useState<ConnectionState>(ConnectionState.DISCONNECTED);
|
||||
@@ -15,6 +15,7 @@ const App: React.FC = () => {
|
||||
const [hwVersion, setHwVersion] = useState<string | null>(null);
|
||||
const [activeTab, setActiveTab] = useState<'dashboard' | 'settings'>('dashboard');
|
||||
const [errorMsg, setErrorMsg] = useState<string | null>(null);
|
||||
const [isTerminalOpen, setIsTerminalOpen] = useState(true);
|
||||
|
||||
// Polling Logic
|
||||
useEffect(() => {
|
||||
@@ -131,15 +132,15 @@ const App: React.FC = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-screen w-full bg-gray-950 text-gray-100 overflow-hidden">
|
||||
<div className="flex h-screen w-full bg-gray-50 text-gray-900 overflow-hidden">
|
||||
|
||||
{/* Sidebar */}
|
||||
<div className="w-20 lg:w-64 flex-shrink-0 bg-gray-900 border-r border-gray-800 flex flex-col z-20">
|
||||
<div className="w-20 lg:w-64 flex-shrink-0 bg-white border-r border-gray-200 flex flex-col z-20">
|
||||
<div className="p-6 flex items-center justify-center lg:justify-start">
|
||||
<div className="h-8 w-8 bg-blue-600 rounded-lg flex items-center justify-center font-bold shadow-lg shadow-blue-900/50">
|
||||
J
|
||||
</div>
|
||||
<span className="ml-3 font-bold text-xl hidden lg:block tracking-tight text-gray-100">JBD Tool</span>
|
||||
<span className="ml-3 font-bold text-xl hidden lg:block tracking-tight text-gray-800">JBD Tool</span>
|
||||
</div>
|
||||
|
||||
<nav className="flex-1 px-4 space-y-2 mt-4">
|
||||
@@ -147,21 +148,21 @@ const App: React.FC = () => {
|
||||
onClick={() => setActiveTab('dashboard')}
|
||||
className={`w-full flex items-center p-3 rounded-xl transition-all ${activeTab === 'dashboard'
|
||||
? 'bg-blue-600 text-white shadow-lg shadow-blue-900/20'
|
||||
: 'text-gray-400 hover:bg-gray-800 hover:text-gray-200'
|
||||
: 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
|
||||
}`}
|
||||
>
|
||||
<LayoutDashboard size={20} />
|
||||
<span className="ml-3 hidden lg:block font-medium">대시보드</span>
|
||||
<span className="ml-3 hidden lg:block font-medium">Dashboard</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('settings')}
|
||||
className={`w-full flex items-center p-3 rounded-xl transition-all ${activeTab === 'settings'
|
||||
? 'bg-blue-600 text-white shadow-lg shadow-blue-900/20'
|
||||
: 'text-gray-400 hover:bg-gray-800 hover:text-gray-200'
|
||||
: 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
|
||||
}`}
|
||||
>
|
||||
<SettingsIcon size={20} />
|
||||
<span className="ml-3 hidden lg:block font-medium">설정 (EEPROM)</span>
|
||||
<span className="ml-3 hidden lg:block font-medium">EEPROM</span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
@@ -179,57 +180,53 @@ const App: React.FC = () => {
|
||||
|
||||
</div>
|
||||
|
||||
<div className="p-4 border-t border-gray-800">
|
||||
<div className="flex flex-col gap-2">
|
||||
{connectionState === ConnectionState.CONNECTED ? (
|
||||
<button
|
||||
onClick={handleDisconnect}
|
||||
className="w-full py-3 px-4 bg-red-900/30 text-red-400 border border-red-900/50 rounded-xl hover:bg-red-900/50 transition-colors flex items-center justify-center font-semibold"
|
||||
>
|
||||
<Usb size={18} className="mr-2" />
|
||||
<span className="hidden lg:inline">연결 해제</span>
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={handleConnect}
|
||||
disabled={connectionState === ConnectionState.CONNECTING}
|
||||
className="w-full py-3 px-4 bg-green-600 text-white rounded-xl hover:bg-green-500 transition-colors flex items-center justify-center font-semibold shadow-lg shadow-green-900/20"
|
||||
>
|
||||
{connectionState === ConnectionState.CONNECTING ? <RefreshCw className="animate-spin" size={18} /> : <Usb size={18} className="mr-2" />}
|
||||
<span className="hidden lg:inline">BMS 연결</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-4 border-t border-gray-200 flex-1 flex flex-col justify-end">
|
||||
{/* AdSense Area - Expanded */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content Area */}
|
||||
<div className="flex-1 flex flex-col h-full overflow-hidden relative">
|
||||
{/* Header */}
|
||||
<header className="h-16 bg-gray-900/50 backdrop-blur border-b border-gray-800 flex items-center justify-between px-6 z-10 flex-shrink-0">
|
||||
<h1 className="text-xl font-semibold text-gray-200">
|
||||
{activeTab === 'dashboard' ? '개요 (Overview)' : '설정 (Configuration)'}
|
||||
<header className="h-16 bg-white/80 backdrop-blur border-b border-gray-200 flex items-center justify-between px-6 z-10 flex-shrink-0">
|
||||
<h1 className="text-xl font-semibold text-gray-800">
|
||||
{activeTab === 'dashboard' ? 'Overview' : 'Configuration'}
|
||||
</h1>
|
||||
<div className="flex items-center gap-4">
|
||||
{connectionState === ConnectionState.CONNECTED && (
|
||||
<div className="flex items-center text-xs font-mono text-green-400 bg-green-900/20 px-3 py-1 rounded-full border border-green-900/50">
|
||||
<div className="w-2 h-2 rounded-full bg-green-500 mr-2 animate-pulse"></div>
|
||||
CONNECTED
|
||||
</div>
|
||||
)}
|
||||
{connectionState === ConnectionState.DISCONNECTED && (
|
||||
<div className="flex items-center text-xs font-mono text-gray-500 bg-gray-800 px-3 py-1 rounded-full">
|
||||
<div className="w-2 h-2 rounded-full bg-gray-500 mr-2"></div>
|
||||
OFFLINE
|
||||
</div>
|
||||
{connectionState === ConnectionState.CONNECTED ? (
|
||||
<button
|
||||
onClick={handleDisconnect}
|
||||
className="py-1.5 px-3 bg-red-100 text-red-600 border border-red-200 rounded-lg hover:bg-red-200 transition-colors flex items-center text-sm font-semibold"
|
||||
>
|
||||
<Usb size={16} className="mr-2" />
|
||||
Disconnect
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={handleConnect}
|
||||
disabled={connectionState === ConnectionState.CONNECTING}
|
||||
className="py-1.5 px-3 bg-green-600 text-white rounded-lg hover:bg-green-500 transition-colors flex items-center text-sm font-semibold shadow-sm"
|
||||
>
|
||||
{connectionState === ConnectionState.CONNECTING ? <RefreshCw className="animate-spin mr-2" size={16} /> : <Usb size={16} className="mr-2" />}
|
||||
Connect
|
||||
</button>
|
||||
)}
|
||||
|
||||
|
||||
<button
|
||||
onClick={() => setIsTerminalOpen(!isTerminalOpen)}
|
||||
className="p-2 text-gray-500 hover:bg-gray-100 rounded-lg transition-colors"
|
||||
title={isTerminalOpen ? "Hide Terminal" : "Show Terminal"}
|
||||
>
|
||||
{isTerminalOpen ? <PanelRightClose size={20} /> : <PanelRightOpen size={20} />}
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Content Body with Right Sidebar */}
|
||||
<div className="flex-1 flex overflow-hidden">
|
||||
{/* Main View */}
|
||||
<main className="flex-1 overflow-hidden bg-gray-950 relative">
|
||||
<main className="flex-1 overflow-hidden bg-gray-50 relative">
|
||||
{errorMsg && (
|
||||
<div className="bg-red-900/80 text-white px-6 py-2 flex items-center justify-center text-sm font-medium backdrop-blur absolute top-0 left-0 right-0 z-30 animate-in slide-in-from-top-2">
|
||||
<AlertCircle size={16} className="mr-2" />
|
||||
@@ -241,27 +238,23 @@ const App: React.FC = () => {
|
||||
|
||||
{/* Empty State Overlay */}
|
||||
{connectionState !== ConnectionState.CONNECTED && (
|
||||
<div className="absolute inset-0 bg-gray-950/80 backdrop-blur-sm z-10 flex flex-col items-center justify-center p-6 text-center">
|
||||
<div className="w-16 h-16 bg-gray-800 rounded-2xl flex items-center justify-center mb-6 shadow-xl border border-gray-700">
|
||||
<div className="absolute inset-0 bg-white/80 backdrop-blur-sm z-10 flex flex-col items-center justify-center p-6 text-center">
|
||||
<div className="w-16 h-16 bg-gray-100 rounded-2xl flex items-center justify-center mb-6 shadow-xl border border-gray-200">
|
||||
<Usb size={32} className="text-gray-500" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-white mb-2">장치가 연결되지 않았습니다</h2>
|
||||
<p className="text-gray-400 max-w-md mb-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-2">장치가 연결되지 않았습니다</h2>
|
||||
<p className="text-gray-500 max-w-md mb-8">
|
||||
JBD BMS를 UART-to-USB 어댑터로 연결하여 실시간 상태를 확인하고 설정을 변경하세요.
|
||||
</p>
|
||||
<button
|
||||
onClick={handleConnect}
|
||||
className="py-3 px-8 bg-blue-600 hover:bg-blue-500 text-white font-semibold rounded-xl transition-all shadow-lg shadow-blue-900/30 flex items-center"
|
||||
>
|
||||
<Usb size={18} className="mr-2" /> 장치 연결하기
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
|
||||
{/* Right Terminal Panel */}
|
||||
<aside className="w-80 lg:w-96 border-l border-gray-800 bg-gray-950 flex flex-col flex-shrink-0 z-20">
|
||||
<aside className={`${isTerminalOpen ? 'w-80 lg:w-96 border-l' : 'w-0 border-l-0'} transition-all duration-300 ease-in-out border-gray-200 bg-white flex flex-col flex-shrink-0 z-20 overflow-hidden`}>
|
||||
<div className="w-80 lg:w-96 h-full flex flex-col">
|
||||
<Terminal />
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -20,20 +20,20 @@ const COLORS = [
|
||||
|
||||
// Updated MetricCard to accept valueClassName for custom styling (e.g., blinking)
|
||||
const MetricCard: React.FC<{ label: string; value: string; unit?: string; icon: React.ReactNode; color?: string; subValue?: string; valueClassName?: string }> = ({ label, value, unit, icon, color = "text-blue-400", subValue, valueClassName }) => (
|
||||
<div className="bg-gray-900 p-4 rounded-xl shadow-lg border border-gray-800 flex flex-col justify-between h-28 relative overflow-hidden group hover:border-gray-700 transition-colors">
|
||||
<div className="bg-white p-4 rounded-xl shadow-lg border border-gray-200 flex flex-col justify-between h-28 relative overflow-hidden group hover:border-gray-300 transition-colors">
|
||||
<div className="absolute top-0 right-0 p-3 opacity-10 group-hover:opacity-20 transition-opacity transform scale-150 origin-top-right">
|
||||
{React.isValidElement(icon) && React.cloneElement(icon as React.ReactElement<any>, { size: 48 })}
|
||||
</div>
|
||||
<div className="flex justify-between items-start z-10">
|
||||
<span className="text-gray-400 text-xs font-semibold uppercase tracking-wider">{label}</span>
|
||||
<span className="text-gray-500 text-xs font-semibold uppercase tracking-wider">{label}</span>
|
||||
<div className={`${color} opacity-80`}>{icon}</div>
|
||||
</div>
|
||||
<div className="z-10 mt-auto">
|
||||
<div className="flex items-baseline gap-1">
|
||||
<span className={`text-2xl font-bold font-mono tracking-tight ${valueClassName || 'text-gray-100'}`}>{value}</span>
|
||||
{unit && <span className="text-gray-500 text-xs font-bold">{unit}</span>}
|
||||
<span className={`text-2xl font-bold font-mono tracking-tight ${valueClassName || 'text-gray-900'}`}>{value}</span>
|
||||
{unit && <span className="text-gray-400 text-xs font-bold">{unit}</span>}
|
||||
</div>
|
||||
{subValue && <div className="text-gray-500 text-xs mt-1 font-mono">{subValue}</div>}
|
||||
{subValue && <div className="text-gray-400 text-xs mt-1 font-mono">{subValue}</div>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -42,10 +42,8 @@ const MosfetSwitch: React.FC<{ label: string; active: boolean; onClick: () => vo
|
||||
<button
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
className={`flex flex-col items-center justify-center p-4 rounded-xl border transition-all duration-200 w-full relative overflow-hidden ${
|
||||
disabled ? 'opacity-50 cursor-not-allowed grayscale' : 'hover:scale-[1.02] active:scale-[0.98]'
|
||||
} ${
|
||||
active
|
||||
className={`flex flex-col items-center justify-center p-4 rounded-xl border transition-all duration-200 w-full relative overflow-hidden ${disabled ? 'opacity-50 cursor-not-allowed grayscale' : 'hover:scale-[1.02] active:scale-[0.98]'
|
||||
} ${active
|
||||
? 'bg-green-900/20 border-green-500/50 text-green-400 shadow-[0_0_15px_rgba(34,197,94,0.1)]'
|
||||
: 'bg-red-900/20 border-red-500/50 text-red-400 shadow-[0_0_15px_rgba(239,68,68,0.1)]'
|
||||
}`}
|
||||
@@ -57,7 +55,7 @@ const MosfetSwitch: React.FC<{ label: string; active: boolean; onClick: () => vo
|
||||
);
|
||||
|
||||
const ProtectionBadge: React.FC<{ label: string; active: boolean }> = ({ label, active }) => (
|
||||
<div className={`px-2 py-1 rounded text-[10px] font-bold border transition-colors ${active ? 'bg-red-900/50 border-red-500 text-red-400 animate-pulse' : 'bg-gray-800/50 border-gray-700 text-gray-600'}`}>
|
||||
<div className={`px-2 py-1 rounded text-[10px] font-bold border transition-colors ${active ? 'bg-red-100 border-red-500 text-red-600 animate-pulse' : 'bg-gray-100 border-gray-200 text-gray-500'}`}>
|
||||
{label}
|
||||
</div>
|
||||
);
|
||||
@@ -185,14 +183,14 @@ const Dashboard: React.FC<DashboardProps> = ({ basicInfo, cellInfo, hwVersion, o
|
||||
value={basicInfo ? basicInfo.packVoltage.toFixed(2) : '-.--'}
|
||||
unit="V"
|
||||
icon={<Zap size={20} />}
|
||||
color="text-yellow-400"
|
||||
color="text-yellow-600"
|
||||
/>
|
||||
<MetricCard
|
||||
label="Current"
|
||||
value={basicInfo ? basicInfo.current.toFixed(2) : '-.--'}
|
||||
unit="A"
|
||||
icon={<Activity size={20} />}
|
||||
color={basicInfo && basicInfo.current > 0 ? "text-green-400" : basicInfo && basicInfo.current < 0 ? "text-red-400" : "text-gray-400"}
|
||||
color={basicInfo && basicInfo.current > 0 ? "text-green-600" : basicInfo && basicInfo.current < 0 ? "text-red-600" : "text-gray-500"}
|
||||
subValue={power !== 0 ? `${power.toFixed(0)} W` : undefined}
|
||||
/>
|
||||
<MetricCard
|
||||
@@ -201,9 +199,9 @@ const Dashboard: React.FC<DashboardProps> = ({ basicInfo, cellInfo, hwVersion, o
|
||||
unit="%"
|
||||
icon={<Battery size={20} />}
|
||||
// If Low SOC: Blink Red Icon, otherwise green/gray
|
||||
color={isLowSoc ? "text-red-500 animate-pulse" : (basicInfo ? "text-green-400" : "text-gray-400")}
|
||||
color={isLowSoc ? "text-red-600 animate-pulse" : (basicInfo ? "text-green-600" : "text-gray-500")}
|
||||
// If Low SOC: Blink Red Value Text, otherwise default white
|
||||
valueClassName={isLowSoc ? "text-red-500 animate-pulse" : undefined}
|
||||
valueClassName={isLowSoc ? "text-red-600 animate-pulse" : undefined}
|
||||
subValue={basicInfo ? `${basicInfo.remainingCapacity.toFixed(2)} Ah` : undefined}
|
||||
/>
|
||||
<MetricCard
|
||||
@@ -211,21 +209,21 @@ const Dashboard: React.FC<DashboardProps> = ({ basicInfo, cellInfo, hwVersion, o
|
||||
value={avgVoltage ? avgVoltage.toFixed(3) : '-.---'}
|
||||
unit="V"
|
||||
icon={<Gauge size={20} />}
|
||||
color="text-blue-400"
|
||||
color="text-blue-600"
|
||||
/>
|
||||
<MetricCard
|
||||
label="Delta"
|
||||
value={deltaVoltage ? (deltaVoltage * 1000).toFixed(0) : '-'}
|
||||
unit="mV"
|
||||
icon={<AlertTriangle size={20} />}
|
||||
color={deltaVoltage > 0.03 ? "text-red-400" : "text-emerald-400"}
|
||||
color={deltaVoltage > 0.03 ? "text-red-600" : "text-emerald-600"}
|
||||
/>
|
||||
<MetricCard
|
||||
label="Cycles"
|
||||
value={basicInfo ? basicInfo.cycleCount.toString() : '-'}
|
||||
unit=""
|
||||
icon={<RotateCw size={20} />}
|
||||
color="text-purple-400"
|
||||
color="text-purple-600"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -235,17 +233,17 @@ const Dashboard: React.FC<DashboardProps> = ({ basicInfo, cellInfo, hwVersion, o
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
|
||||
{/* Combined Cell Voltage Monitor */}
|
||||
<div className="bg-gray-900 rounded-xl border border-gray-800 p-5 shadow-lg flex flex-col gap-6">
|
||||
<div className="bg-white rounded-xl border border-gray-200 p-5 shadow-lg flex flex-col gap-6">
|
||||
|
||||
{/* Header */}
|
||||
<div className="flex justify-between items-center">
|
||||
<h3 className="text-gray-200 font-bold flex items-center">
|
||||
<h3 className="text-gray-800 font-bold flex items-center">
|
||||
<Activity className="mr-2 text-blue-500" size={18} />
|
||||
Cell Monitor (Instant & Trend)
|
||||
</h3>
|
||||
<div className="flex gap-4 text-xs font-mono bg-gray-950/50 px-3 py-1 rounded-lg border border-gray-800">
|
||||
<div className="flex gap-4 text-xs font-mono bg-gray-50 px-3 py-1 rounded-lg border border-gray-200">
|
||||
<span className="text-red-400 font-bold">Max: {maxVoltage.toFixed(3)}V</span>
|
||||
<div className="w-px bg-gray-700 mx-1"></div>
|
||||
<div className="w-px bg-gray-300 mx-1"></div>
|
||||
<span className="text-blue-400 font-bold">Min: {minVoltage.toFixed(3)}V</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -255,12 +253,12 @@ const Dashboard: React.FC<DashboardProps> = ({ basicInfo, cellInfo, hwVersion, o
|
||||
<div className="absolute top-0 left-0 text-[10px] text-gray-500 font-bold uppercase tracking-wider">Instant Voltage</div>
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart data={cellChartData} margin={{ top: 15, right: 5, left: -20, bottom: 0 }}>
|
||||
<XAxis dataKey="name" stroke="#4b5563" tick={{fontSize: 10}} />
|
||||
<YAxis domain={[minVoltage > 0 ? minVoltage - 0.05 : 2.5, maxVoltage > 0 ? maxVoltage + 0.05 : 4.5]} stroke="#4b5563" tick={{fontSize: 10}} />
|
||||
<XAxis dataKey="name" stroke="#9ca3af" tick={{ fontSize: 10 }} />
|
||||
<YAxis domain={[minVoltage > 0 ? minVoltage - 0.05 : 2.5, maxVoltage > 0 ? maxVoltage + 0.05 : 4.5]} stroke="#9ca3af" tick={{ fontSize: 10 }} />
|
||||
<Tooltip
|
||||
cursor={{ fill: 'rgba(255,255,255,0.05)' }}
|
||||
contentStyle={{ backgroundColor: '#111827', borderColor: '#374151', color: '#f3f4f6' }}
|
||||
itemStyle={{ color: '#93c5fd' }}
|
||||
contentStyle={{ backgroundColor: '#ffffff', borderColor: '#e5e7eb', color: '#111827' }}
|
||||
itemStyle={{ color: '#3b82f6' }}
|
||||
formatter={(value: number) => [value.toFixed(3) + ' V', 'Voltage']}
|
||||
/>
|
||||
<ReferenceLine y={avgVoltage} stroke="#10b981" strokeDasharray="3 3" />
|
||||
@@ -273,7 +271,7 @@ const Dashboard: React.FC<DashboardProps> = ({ basicInfo, cellInfo, hwVersion, o
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
<div className="w-full h-px bg-gray-800"></div>
|
||||
<div className="w-full h-px bg-gray-200"></div>
|
||||
|
||||
{/* 2. Line Chart (Trend) */}
|
||||
<div className="h-48 w-full relative">
|
||||
@@ -282,12 +280,12 @@ const Dashboard: React.FC<DashboardProps> = ({ basicInfo, cellInfo, hwVersion, o
|
||||
</div>
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<LineChart data={voltageHistory} margin={{ top: 15, right: 10, left: -20, bottom: 0 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#374151" vertical={false} />
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" vertical={false} />
|
||||
{/* Hide XAxis ticks as requested */}
|
||||
<XAxis dataKey="time" hide />
|
||||
<YAxis domain={['auto', 'auto']} stroke="#6b7280" tick={{fontSize: 10}} width={40} />
|
||||
<YAxis domain={['auto', 'auto']} stroke="#9ca3af" tick={{ fontSize: 10 }} width={40} />
|
||||
<Tooltip
|
||||
contentStyle={{ backgroundColor: '#111827', borderColor: '#374151', color: '#f3f4f6' }}
|
||||
contentStyle={{ backgroundColor: '#ffffff', borderColor: '#e5e7eb', color: '#111827' }}
|
||||
itemStyle={{ padding: 0, fontSize: '11px' }}
|
||||
labelStyle={{ color: '#9ca3af', marginBottom: '0.25rem', fontSize: '11px' }}
|
||||
formatter={(value: number, name: string) => [value.toFixed(3) + ' V', name]}
|
||||
@@ -313,8 +311,8 @@ const Dashboard: React.FC<DashboardProps> = ({ basicInfo, cellInfo, hwVersion, o
|
||||
{/* Protections & Temps */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* Protections */}
|
||||
<div className="bg-gray-900 rounded-xl border border-gray-800 p-5 shadow-lg">
|
||||
<h3 className="text-gray-300 font-bold text-sm mb-4 flex items-center">
|
||||
<div className="bg-white rounded-xl border border-gray-200 p-5 shadow-lg">
|
||||
<h3 className="text-gray-700 font-bold text-sm mb-4 flex items-center">
|
||||
<AlertTriangle className="mr-2 text-yellow-500" size={16} />
|
||||
Protection Status
|
||||
</h3>
|
||||
@@ -327,22 +325,22 @@ const Dashboard: React.FC<DashboardProps> = ({ basicInfo, cellInfo, hwVersion, o
|
||||
</div>
|
||||
|
||||
{/* Temperatures */}
|
||||
<div className="bg-gray-900 rounded-xl border border-gray-800 p-5 shadow-lg">
|
||||
<h3 className="text-gray-300 font-bold text-sm mb-4 flex items-center">
|
||||
<div className="bg-white rounded-xl border border-gray-200 p-5 shadow-lg">
|
||||
<h3 className="text-gray-700 font-bold text-sm mb-4 flex items-center">
|
||||
<Thermometer className="mr-2 text-orange-500" size={16} />
|
||||
Temperatures
|
||||
</h3>
|
||||
<div className="flex flex-wrap gap-4">
|
||||
{basicInfo && basicInfo.ntcTemps.length > 0 ? basicInfo.ntcTemps.map((t, i) => (
|
||||
<div key={i} className="flex flex-col items-center bg-gray-800/50 p-2 rounded-lg border border-gray-700 min-w-[60px]">
|
||||
<div key={i} className="flex flex-col items-center bg-gray-100 p-2 rounded-lg border border-gray-200 min-w-[60px]">
|
||||
<span className="text-xs text-gray-500">NTC {i + 1}</span>
|
||||
<span className="text-lg font-mono font-bold text-gray-200">{t.toFixed(1)}°C</span>
|
||||
<span className="text-lg font-mono font-bold text-gray-800">{t.toFixed(1)}°C</span>
|
||||
</div>
|
||||
)) : (
|
||||
// Placeholder
|
||||
<div className="flex flex-col items-center bg-gray-800/30 p-2 rounded-lg border border-gray-800 min-w-[60px]">
|
||||
<div className="flex flex-col items-center bg-gray-100 p-2 rounded-lg border border-gray-200 min-w-[60px]">
|
||||
<span className="text-xs text-gray-600">NTC 1</span>
|
||||
<span className="text-lg font-mono font-bold text-gray-600">--.-°C</span>
|
||||
<span className="text-lg font-mono font-bold text-gray-400">--.-°C</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -354,8 +352,8 @@ const Dashboard: React.FC<DashboardProps> = ({ basicInfo, cellInfo, hwVersion, o
|
||||
<div className="space-y-6">
|
||||
|
||||
{/* MOSFET Control */}
|
||||
<div className="bg-gray-900 rounded-xl border border-gray-800 p-5 shadow-lg">
|
||||
<h3 className="text-gray-200 font-bold mb-4 flex items-center">
|
||||
<div className="bg-white rounded-xl border border-gray-200 p-5 shadow-lg">
|
||||
<h3 className="text-gray-800 font-bold mb-4 flex items-center">
|
||||
<Zap className="mr-2 text-purple-500" size={18} />
|
||||
MOSFET Control
|
||||
</h3>
|
||||
@@ -376,42 +374,41 @@ const Dashboard: React.FC<DashboardProps> = ({ basicInfo, cellInfo, hwVersion, o
|
||||
</div>
|
||||
|
||||
{/* Capacity Info */}
|
||||
<div className="bg-gray-900 rounded-xl border border-gray-800 p-5 shadow-lg">
|
||||
<h3 className="text-gray-200 font-bold mb-4 flex items-center">
|
||||
<div className="bg-white rounded-xl border border-gray-200 p-5 shadow-lg">
|
||||
<h3 className="text-gray-800 font-bold mb-4 flex items-center">
|
||||
<Battery className="mr-2 text-green-500" size={18} />
|
||||
Capacity Info
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-center pb-2 border-b border-gray-800">
|
||||
<span className="text-gray-400 text-sm">Design Capacity</span>
|
||||
<div className="flex justify-between items-center pb-2 border-b border-gray-200">
|
||||
<span className="text-gray-500 text-sm">Design Capacity</span>
|
||||
<span className="font-mono">{basicInfo ? basicInfo.fullCapacity.toFixed(2) : '-.--'} Ah</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center pb-2 border-b border-gray-800">
|
||||
<span className="text-gray-400 text-sm">Remaining Cap</span>
|
||||
<span className="font-mono text-green-400">{basicInfo ? basicInfo.remainingCapacity.toFixed(2) : '-.--'} Ah</span>
|
||||
<div className="flex justify-between items-center pb-2 border-b border-gray-200">
|
||||
<span className="text-gray-500 text-sm">Remaining Cap</span>
|
||||
<span className="font-mono text-green-600">{basicInfo ? basicInfo.remainingCapacity.toFixed(2) : '-.--'} Ah</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center pb-2 border-b border-gray-800">
|
||||
<span className="text-gray-400 text-sm">Mfg Date</span>
|
||||
<div className="flex justify-between items-center pb-2 border-b border-gray-200">
|
||||
<span className="text-gray-500 text-sm">Mfg Date</span>
|
||||
<span className="font-mono text-xs">{basicInfo ? basicInfo.productionDate : 'YYYY-MM-DD'}</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-gray-400 text-sm">Device Ver</span>
|
||||
<span className="font-mono text-xs text-blue-300">{hwVersion || '--'}</span>
|
||||
<span className="text-gray-500 text-sm">Device Ver</span>
|
||||
<span className="font-mono text-xs text-blue-600">{hwVersion || '--'}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Logger */}
|
||||
<div className="bg-gray-900 rounded-xl border border-gray-800 p-5 shadow-lg">
|
||||
<div className="bg-white rounded-xl border border-gray-200 p-5 shadow-lg">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h3 className="text-gray-200 font-bold flex items-center">Data Logger</h3>
|
||||
<h3 className="text-gray-800 font-bold flex items-center">Data Logger</h3>
|
||||
{isRecording && <span className="text-xs text-red-400 animate-pulse">● REC ({logCount})</span>}
|
||||
</div>
|
||||
<button
|
||||
onClick={toggleRecording}
|
||||
disabled={!basicInfo}
|
||||
className={`w-full py-3 rounded-xl flex items-center justify-center font-bold transition-all ${
|
||||
!basicInfo ? 'bg-gray-800 text-gray-500 cursor-not-allowed' :
|
||||
className={`w-full py-3 rounded-xl flex items-center justify-center font-bold transition-all ${!basicInfo ? 'bg-gray-100 text-gray-400 cursor-not-allowed' :
|
||||
isRecording
|
||||
? 'bg-red-600 hover:bg-red-500 text-white shadow-lg shadow-red-900/20'
|
||||
: 'bg-blue-600 hover:bg-blue-500 text-white shadow-lg shadow-blue-900/20'
|
||||
|
||||
@@ -163,9 +163,9 @@ const Settings: React.FC = () => {
|
||||
|
||||
// 그룹 컴포넌트
|
||||
const Group: React.FC<{ title: string, children: React.ReactNode }> = ({ title, children }) => (
|
||||
<div className="bg-gray-900 rounded-xl border border-gray-800 shadow-xl overflow-hidden mb-6">
|
||||
<div className="bg-gray-800/50 px-5 py-3 border-b border-gray-700">
|
||||
<h3 className="text-lg font-bold text-gray-200 flex items-center gap-2">
|
||||
<div className="bg-white rounded-xl border border-gray-200 shadow-xl overflow-hidden mb-6">
|
||||
<div className="bg-gray-50 px-5 py-3 border-b border-gray-200">
|
||||
<h3 className="text-lg font-bold text-gray-800 flex items-center gap-2">
|
||||
{title}
|
||||
</h3>
|
||||
</div>
|
||||
@@ -226,10 +226,10 @@ const Settings: React.FC = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between p-3 bg-gray-950/50 border-b border-gray-800 last:border-0 hover:bg-gray-900 transition-colors">
|
||||
<div className="flex items-center justify-between p-3 bg-white border-b border-gray-200 last:border-0 hover:bg-gray-50 transition-colors">
|
||||
<div className="flex-1 pr-4">
|
||||
<div className="text-sm text-gray-300 font-medium">{label}</div>
|
||||
<div className="text-xs text-gray-600 font-mono">ADDR: 0x{reg.toString(16).toUpperCase().padStart(2, '0')}</div>
|
||||
<div className="text-sm text-gray-700 font-medium">{label}</div>
|
||||
<div className="text-xs text-gray-400 font-mono">ADDR: 0x{reg.toString(16).toUpperCase().padStart(2, '0')}</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
@@ -240,16 +240,16 @@ const Settings: React.FC = () => {
|
||||
onChange={handleChange}
|
||||
placeholder={val === undefined ? "?" : ""}
|
||||
disabled={isBusy || globalLoading}
|
||||
className={`bg-gray-900 border ${isDirty ? 'border-yellow-600' : 'border-gray-700'} text-gray-100 text-right px-3 py-1.5 rounded focus:outline-none focus:border-blue-500 font-mono h-9 ${type === 'string' ? 'w-40' : 'w-28'}`}
|
||||
className={`bg-white border ${isDirty ? 'border-yellow-600' : 'border-gray-300'} text-gray-900 text-right px-3 py-1.5 rounded focus:outline-none focus:border-blue-500 font-mono h-9 ${type === 'string' ? 'w-40' : 'w-28'}`}
|
||||
/>
|
||||
{unit && <span className="absolute right-2 top-2 text-gray-500 text-xs pointer-events-none opacity-50">{type !== 'date' ? unit : ''}</span>}
|
||||
{unit && <span className="absolute right-2 top-2 text-gray-400 text-xs pointer-events-none opacity-50">{type !== 'date' ? unit : ''}</span>}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={onRead}
|
||||
disabled={isBusy || globalLoading}
|
||||
title="개별 읽기"
|
||||
className="p-2 bg-gray-800 text-gray-400 hover:text-blue-400 hover:bg-gray-700 rounded-lg transition-all disabled:opacity-50"
|
||||
className="p-2 bg-gray-100 text-gray-500 hover:text-blue-600 hover:bg-gray-200 rounded-lg transition-all disabled:opacity-50"
|
||||
>
|
||||
<RotateCw size={16} className={isBusy ? 'animate-spin text-blue-500' : ''} />
|
||||
</button>
|
||||
@@ -258,7 +258,7 @@ const Settings: React.FC = () => {
|
||||
onClick={onSave}
|
||||
disabled={isBusy || globalLoading}
|
||||
title="개별 저장"
|
||||
className={`p-2 rounded-lg transition-all disabled:opacity-50 ${isDirty ? 'bg-blue-600 text-white hover:bg-blue-500' : 'bg-gray-800 text-gray-500 hover:text-gray-300'}`}
|
||||
className={`p-2 rounded-lg transition-all disabled:opacity-50 ${isDirty ? 'bg-blue-600 text-white hover:bg-blue-500' : 'bg-gray-100 text-gray-500 hover:text-gray-700'}`}
|
||||
>
|
||||
<Save size={16} />
|
||||
</button>
|
||||
@@ -270,10 +270,10 @@ const Settings: React.FC = () => {
|
||||
return (
|
||||
<div className="p-6 pb-24 overflow-y-auto h-full max-w-6xl mx-auto">
|
||||
{/* 상단 툴바 */}
|
||||
<div className="flex flex-col md:flex-row justify-between items-center mb-6 gap-4 sticky top-0 bg-gray-950/90 backdrop-blur z-20 py-4 border-b border-gray-800">
|
||||
<div className="flex flex-col md:flex-row justify-between items-center mb-6 gap-4 sticky top-0 bg-white/90 backdrop-blur z-20 py-4 border-b border-gray-200">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-gray-200">EEPROM 설정</h2>
|
||||
<p className="text-gray-400 text-sm">BMS 내부 파라미터를 개별적으로 읽거나 수정할 수 있습니다.</p>
|
||||
<h2 className="text-2xl font-bold text-gray-800">EEPROM 설정</h2>
|
||||
<p className="text-gray-500 text-sm">BMS 내부 파라미터를 개별적으로 읽거나 수정할 수 있습니다.</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
|
||||
@@ -79,45 +79,45 @@ const Terminal: React.FC = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full bg-gray-950/50">
|
||||
<div className="flex justify-between items-center p-3 border-b border-gray-800 bg-gray-900/50">
|
||||
<div className="flex flex-col h-full bg-gray-50">
|
||||
<div className="flex justify-between items-center p-3 border-b border-gray-200 bg-white">
|
||||
<div className="flex items-center gap-2 overflow-hidden">
|
||||
<TerminalIcon size={18} className="text-gray-400 shrink-0" />
|
||||
<span className="font-semibold text-gray-300 truncate">터미널 / Logs</span>
|
||||
<TerminalIcon size={18} className="text-gray-500 shrink-0" />
|
||||
<span className="font-semibold text-gray-700 truncate">Terminal / Logs</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setAutoScroll(!autoScroll)}
|
||||
className={`p-1.5 rounded transition-colors ${autoScroll ? 'text-green-400 bg-green-900/20' : 'text-gray-500 hover:text-gray-300'}`}
|
||||
className={`p-1.5 rounded transition-colors ${autoScroll ? 'text-green-600 bg-green-100' : 'text-gray-400 hover:text-gray-600'}`}
|
||||
title={autoScroll ? "Auto-scroll: ON (Top)" : "Auto-scroll: OFF"}
|
||||
>
|
||||
{/* Icon indicates scroll direction focus */}
|
||||
<ArrowUp size={16} className={autoScroll ? "" : "opacity-50"} />
|
||||
</button>
|
||||
<button onClick={() => setLogs([])} className="p-1.5 text-gray-400 hover:text-red-400 hover:bg-red-900/20 rounded transition-colors" title="Clear Logs">
|
||||
<button onClick={() => setLogs([])} className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-100 rounded transition-colors" title="Clear Logs">
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 bg-black/50 overflow-hidden flex flex-col font-mono text-xs shadow-inner">
|
||||
<div className="flex-1 bg-white overflow-hidden flex flex-col font-mono text-xs shadow-inner">
|
||||
{/* Input Area (Top) or Bottom? Keeping input at bottom is standard, logs flow down from top */}
|
||||
|
||||
<div
|
||||
ref={logsContainerRef}
|
||||
className="flex-1 overflow-y-auto p-2 space-y-1 scroll-smooth"
|
||||
>
|
||||
{logs.length === 0 && <div className="text-gray-700 text-center mt-4 italic">대기 중... (Logs)</div>}
|
||||
{logs.length === 0 && <div className="text-gray-500 text-center mt-4 italic">대기 중... (Logs)</div>}
|
||||
|
||||
{logs.map(log => (
|
||||
<div key={log.id} className="flex gap-2 animate-in fade-in slide-in-from-top-1 hover:bg-gray-900/30 p-0.5 rounded border-b border-gray-900/50 last:border-0">
|
||||
<span className="text-gray-600 shrink-0 select-none">[{log.timestamp}]</span>
|
||||
<div key={log.id} className="flex gap-2 animate-in fade-in slide-in-from-top-1 hover:bg-gray-100 p-0.5 rounded border-b border-gray-100 last:border-0">
|
||||
<span className="text-gray-500 shrink-0 select-none">[{log.timestamp}]</span>
|
||||
<div className="break-all flex-1">
|
||||
{log.type === 'tx' && <span className="text-blue-400 font-bold mr-1">TX</span>}
|
||||
{log.type === 'rx' && <span className="text-green-400 font-bold mr-1">RX</span>}
|
||||
{log.type === 'tx' && <span className="text-blue-600 font-bold mr-1">TX</span>}
|
||||
{log.type === 'rx' && <span className="text-green-600 font-bold mr-1">RX</span>}
|
||||
{log.type === 'error' && <span className="text-red-500 font-bold mr-1">ERR</span>}
|
||||
{log.type === 'info' && <span className="text-gray-400 font-bold mr-1">INF</span>}
|
||||
<span className={`${log.type === 'error' ? 'text-red-400' : 'text-gray-300'}`}>
|
||||
{log.type === 'info' && <span className="text-gray-500 font-bold mr-1">INF</span>}
|
||||
<span className={`${log.type === 'error' ? 'text-red-600' : 'text-gray-800'}`}>
|
||||
{log.data}
|
||||
</span>
|
||||
</div>
|
||||
@@ -125,7 +125,7 @@ const Terminal: React.FC = () => {
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="p-2 border-t border-gray-800 bg-gray-900/30">
|
||||
<div className="p-2 border-t border-gray-200 bg-gray-50">
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
@@ -133,7 +133,7 @@ const Terminal: React.FC = () => {
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleSend()}
|
||||
placeholder="HEX (e.g. DD A5 03...)"
|
||||
className="flex-1 bg-gray-950 border border-gray-700 rounded px-2 py-1.5 text-gray-200 focus:outline-none focus:border-blue-500 font-mono text-xs"
|
||||
className="flex-1 bg-white border border-gray-300 rounded px-2 py-1.5 text-gray-900 focus:outline-none focus:border-blue-500 font-mono text-xs"
|
||||
/>
|
||||
<button
|
||||
onClick={handleSend}
|
||||
|
||||
Reference in New Issue
Block a user