Refactor UI to light theme, move controls to header, and add collapsible sidebar
This commit is contained in:
@@ -12,28 +12,28 @@ interface DashboardProps {
|
||||
}
|
||||
|
||||
const COLORS = [
|
||||
'#ef4444', '#f97316', '#f59e0b', '#84cc16', '#10b981',
|
||||
'#06b6d4', '#3b82f6', '#6366f1', '#8b5cf6', '#d946ef',
|
||||
'#ef4444', '#f97316', '#f59e0b', '#84cc16', '#10b981',
|
||||
'#06b6d4', '#3b82f6', '#6366f1', '#8b5cf6', '#d946ef',
|
||||
'#f43f5e', '#fbbf24', '#a3e635', '#34d399', '#22d3ee',
|
||||
'#94a3b8'
|
||||
];
|
||||
|
||||
// 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 })}
|
||||
{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,13 +42,11 @@ 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
|
||||
? 'bg-green-900/20 border-green-500/50 text-green-400 shadow-[0_0_15px_rgba(34,197,94,0.1)]'
|
||||
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)]'
|
||||
}`}
|
||||
}`}
|
||||
>
|
||||
<div className={`absolute inset-0 opacity-10 ${active ? 'bg-green-500' : 'bg-red-500'}`}></div>
|
||||
<span className="font-bold text-2xl mb-1">{active ? 'ON' : 'OFF'}</span>
|
||||
@@ -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>
|
||||
);
|
||||
@@ -71,7 +69,7 @@ const Dashboard: React.FC<DashboardProps> = ({ basicInfo, cellInfo, hwVersion, o
|
||||
// Initialize/Clear history on connect/disconnect
|
||||
useEffect(() => {
|
||||
if (!cellInfo) {
|
||||
setVoltageHistory([]);
|
||||
setVoltageHistory([]);
|
||||
}
|
||||
}, [cellInfo === null]);
|
||||
|
||||
@@ -79,19 +77,19 @@ const Dashboard: React.FC<DashboardProps> = ({ basicInfo, cellInfo, hwVersion, o
|
||||
useEffect(() => {
|
||||
if (cellInfo) {
|
||||
setVoltageHistory(prev => {
|
||||
const now = new Date();
|
||||
const timeLabel = now.toLocaleTimeString('en-US', { hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit" });
|
||||
|
||||
const newEntry: any = {
|
||||
time: timeLabel,
|
||||
...cellInfo.voltages.reduce((acc, v, i) => ({ ...acc, [`cell${i+1}`]: v }), {})
|
||||
};
|
||||
|
||||
// Keep approx 60 points (at ~0.5s interval -> ~30s history, user asked for ~1min so increase buffer)
|
||||
// If polling is 500ms, 120 points = 60 seconds
|
||||
const newHistory = [...prev, newEntry];
|
||||
if (newHistory.length > 120) return newHistory.slice(newHistory.length - 120);
|
||||
return newHistory;
|
||||
const now = new Date();
|
||||
const timeLabel = now.toLocaleTimeString('en-US', { hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit" });
|
||||
|
||||
const newEntry: any = {
|
||||
time: timeLabel,
|
||||
...cellInfo.voltages.reduce((acc, v, i) => ({ ...acc, [`cell${i + 1}`]: v }), {})
|
||||
};
|
||||
|
||||
// Keep approx 60 points (at ~0.5s interval -> ~30s history, user asked for ~1min so increase buffer)
|
||||
// If polling is 500ms, 120 points = 60 seconds
|
||||
const newHistory = [...prev, newEntry];
|
||||
if (newHistory.length > 120) return newHistory.slice(newHistory.length - 120);
|
||||
return newHistory;
|
||||
});
|
||||
}
|
||||
}, [cellInfo]);
|
||||
@@ -117,10 +115,10 @@ const Dashboard: React.FC<DashboardProps> = ({ basicInfo, cellInfo, hwVersion, o
|
||||
if (isRecording) {
|
||||
// Stop and download
|
||||
const headers = ['Timestamp', 'PackVoltage(V)', 'Current(A)', 'Capacity(Ah)', 'RSOC(%)', 'MaxCell(V)', 'MinCell(V)', 'Temp1(C)'];
|
||||
const csvContent = "data:text/csv;charset=utf-8,"
|
||||
+ headers.join(",") + "\n"
|
||||
const csvContent = "data:text/csv;charset=utf-8,"
|
||||
+ headers.join(",") + "\n"
|
||||
+ logDataRef.current.map(row => Object.values(row).join(",")).join("\n");
|
||||
|
||||
|
||||
const encodedUri = encodeURI(csvContent);
|
||||
const link = document.createElement("a");
|
||||
link.setAttribute("href", encodedUri);
|
||||
@@ -148,7 +146,7 @@ const Dashboard: React.FC<DashboardProps> = ({ basicInfo, cellInfo, hwVersion, o
|
||||
const deltaVoltage = (maxVoltage - minVoltage);
|
||||
|
||||
const power = basicInfo ? basicInfo.packVoltage * basicInfo.current : 0;
|
||||
|
||||
|
||||
// Data for Bar Chart
|
||||
const cellChartData = voltages.map((v, i) => ({
|
||||
name: `${i + 1}`,
|
||||
@@ -177,249 +175,248 @@ const Dashboard: React.FC<DashboardProps> = ({ basicInfo, cellInfo, hwVersion, o
|
||||
|
||||
return (
|
||||
<div className="p-6 space-y-6 overflow-y-auto h-full pb-32">
|
||||
|
||||
|
||||
{/* Top Metrics Row */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-6 gap-4">
|
||||
<MetricCard
|
||||
label="Pack Voltage"
|
||||
value={basicInfo ? basicInfo.packVoltage.toFixed(2) : '-.--'}
|
||||
unit="V"
|
||||
icon={<Zap size={20} />}
|
||||
color="text-yellow-400"
|
||||
<MetricCard
|
||||
label="Pack Voltage"
|
||||
value={basicInfo ? basicInfo.packVoltage.toFixed(2) : '-.--'}
|
||||
unit="V"
|
||||
icon={<Zap size={20} />}
|
||||
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"}
|
||||
<MetricCard
|
||||
label="Current"
|
||||
value={basicInfo ? basicInfo.current.toFixed(2) : '-.--'}
|
||||
unit="A"
|
||||
icon={<Activity size={20} />}
|
||||
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
|
||||
label="SOC"
|
||||
value={basicInfo ? basicInfo.rsoc.toString() : '--'}
|
||||
unit="%"
|
||||
icon={<Battery size={20} />}
|
||||
<MetricCard
|
||||
label="SOC"
|
||||
value={basicInfo ? basicInfo.rsoc.toString() : '--'}
|
||||
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
|
||||
label="Avg Cell"
|
||||
value={avgVoltage ? avgVoltage.toFixed(3) : '-.---'}
|
||||
unit="V"
|
||||
icon={<Gauge size={20} />}
|
||||
color="text-blue-400"
|
||||
<MetricCard
|
||||
label="Avg Cell"
|
||||
value={avgVoltage ? avgVoltage.toFixed(3) : '-.---'}
|
||||
unit="V"
|
||||
icon={<Gauge size={20} />}
|
||||
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"}
|
||||
<MetricCard
|
||||
label="Delta"
|
||||
value={deltaVoltage ? (deltaVoltage * 1000).toFixed(0) : '-'}
|
||||
unit="mV"
|
||||
icon={<AlertTriangle size={20} />}
|
||||
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"
|
||||
<MetricCard
|
||||
label="Cycles"
|
||||
value={basicInfo ? basicInfo.cycleCount.toString() : '-'}
|
||||
unit=""
|
||||
icon={<RotateCw size={20} />}
|
||||
color="text-purple-600"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
|
||||
|
||||
{/* Left Column: Charts & Status */}
|
||||
<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">
|
||||
|
||||
{/* Header */}
|
||||
<div className="flex justify-between items-center">
|
||||
<h3 className="text-gray-200 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">
|
||||
<span className="text-red-400 font-bold">Max: {maxVoltage.toFixed(3)}V</span>
|
||||
<div className="w-px bg-gray-700 mx-1"></div>
|
||||
<span className="text-blue-400 font-bold">Min: {minVoltage.toFixed(3)}V</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 1. Bar Chart (Instant) */}
|
||||
<div className="h-40 w-full relative">
|
||||
<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}} />
|
||||
<Tooltip
|
||||
cursor={{fill: 'rgba(255,255,255,0.05)'}}
|
||||
contentStyle={{ backgroundColor: '#111827', borderColor: '#374151', color: '#f3f4f6' }}
|
||||
itemStyle={{ color: '#93c5fd' }}
|
||||
formatter={(value: number) => [value.toFixed(3) + ' V', 'Voltage']}
|
||||
/>
|
||||
<ReferenceLine y={avgVoltage} stroke="#10b981" strokeDasharray="3 3" />
|
||||
<Bar dataKey="voltage">
|
||||
{cellChartData.map((entry, index) => (
|
||||
<Cell key={`cell-${index}`} fill={entry.isMax ? '#ef4444' : entry.isMin ? '#3b82f6' : '#6366f1'} />
|
||||
))}
|
||||
</Bar>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
{/* Combined Cell Voltage Monitor */}
|
||||
<div className="bg-white rounded-xl border border-gray-200 p-5 shadow-lg flex flex-col gap-6">
|
||||
|
||||
<div className="w-full h-px bg-gray-800"></div>
|
||||
|
||||
{/* 2. Line Chart (Trend) */}
|
||||
<div className="h-48 w-full relative">
|
||||
<div className="absolute top-0 left-0 text-[10px] text-gray-500 font-bold uppercase tracking-wider flex items-center gap-1">
|
||||
<TrendingUp size={10} /> Voltage History (~1 min)
|
||||
</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} />
|
||||
{/* Hide XAxis ticks as requested */}
|
||||
<XAxis dataKey="time" hide />
|
||||
<YAxis domain={['auto', 'auto']} stroke="#6b7280" tick={{fontSize: 10}} width={40} />
|
||||
<Tooltip
|
||||
contentStyle={{ backgroundColor: '#111827', borderColor: '#374151', color: '#f3f4f6' }}
|
||||
itemStyle={{ padding: 0, fontSize: '11px' }}
|
||||
labelStyle={{ color: '#9ca3af', marginBottom: '0.25rem', fontSize: '11px' }}
|
||||
formatter={(value: number, name: string) => [value.toFixed(3) + ' V', name]}
|
||||
/>
|
||||
{/* Dynamically create thin lines for each cell */}
|
||||
{Array.from({ length: cellCount }).map((_, i) => (
|
||||
<Line
|
||||
key={`line-${i}`}
|
||||
type="monotone"
|
||||
dataKey={`cell${i+1}`}
|
||||
stroke={COLORS[i % COLORS.length]}
|
||||
dot={false}
|
||||
strokeWidth={1}
|
||||
isAnimationActive={false}
|
||||
name={`C${i+1}`}
|
||||
/>
|
||||
))}
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
{/* Header */}
|
||||
<div className="flex justify-between 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-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-300 mx-1"></div>
|
||||
<span className="text-blue-400 font-bold">Min: {minVoltage.toFixed(3)}V</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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">
|
||||
<AlertTriangle className="mr-2 text-yellow-500" size={16}/>
|
||||
Protection Status
|
||||
</h3>
|
||||
<div className="grid grid-cols-4 gap-2">
|
||||
{protectionList.map((p) => (
|
||||
// @ts-ignore
|
||||
<ProtectionBadge key={p.key} label={p.label} active={protections[p.key]} />
|
||||
))}
|
||||
</div>
|
||||
</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">
|
||||
<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]">
|
||||
<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>
|
||||
</div>
|
||||
)) : (
|
||||
// Placeholder
|
||||
<div className="flex flex-col items-center bg-gray-800/30 p-2 rounded-lg border border-gray-800 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>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{/* 1. Bar Chart (Instant) */}
|
||||
<div className="h-40 w-full relative">
|
||||
<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="#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: '#ffffff', borderColor: '#e5e7eb', color: '#111827' }}
|
||||
itemStyle={{ color: '#3b82f6' }}
|
||||
formatter={(value: number) => [value.toFixed(3) + ' V', 'Voltage']}
|
||||
/>
|
||||
<ReferenceLine y={avgVoltage} stroke="#10b981" strokeDasharray="3 3" />
|
||||
<Bar dataKey="voltage">
|
||||
{cellChartData.map((entry, index) => (
|
||||
<Cell key={`cell-${index}`} fill={entry.isMax ? '#ef4444' : entry.isMin ? '#3b82f6' : '#6366f1'} />
|
||||
))}
|
||||
</Bar>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
<div className="w-full h-px bg-gray-200"></div>
|
||||
|
||||
{/* 2. Line Chart (Trend) */}
|
||||
<div className="h-48 w-full relative">
|
||||
<div className="absolute top-0 left-0 text-[10px] text-gray-500 font-bold uppercase tracking-wider flex items-center gap-1">
|
||||
<TrendingUp size={10} /> Voltage History (~1 min)
|
||||
</div>
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<LineChart data={voltageHistory} margin={{ top: 15, right: 10, left: -20, bottom: 0 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" vertical={false} />
|
||||
{/* Hide XAxis ticks as requested */}
|
||||
<XAxis dataKey="time" hide />
|
||||
<YAxis domain={['auto', 'auto']} stroke="#9ca3af" tick={{ fontSize: 10 }} width={40} />
|
||||
<Tooltip
|
||||
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]}
|
||||
/>
|
||||
{/* Dynamically create thin lines for each cell */}
|
||||
{Array.from({ length: cellCount }).map((_, i) => (
|
||||
<Line
|
||||
key={`line-${i}`}
|
||||
type="monotone"
|
||||
dataKey={`cell${i + 1}`}
|
||||
stroke={COLORS[i % COLORS.length]}
|
||||
dot={false}
|
||||
strokeWidth={1}
|
||||
isAnimationActive={false}
|
||||
name={`C${i + 1}`}
|
||||
/>
|
||||
))}
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Protections & Temps */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* Protections */}
|
||||
<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>
|
||||
<div className="grid grid-cols-4 gap-2">
|
||||
{protectionList.map((p) => (
|
||||
// @ts-ignore
|
||||
<ProtectionBadge key={p.key} label={p.label} active={protections[p.key]} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Temperatures */}
|
||||
<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-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-800">{t.toFixed(1)}°C</span>
|
||||
</div>
|
||||
)) : (
|
||||
// Placeholder
|
||||
<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-400">--.-°C</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column: Controls & Capacity */}
|
||||
<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">
|
||||
<Zap className="mr-2 text-purple-500" size={18}/>
|
||||
MOSFET Control
|
||||
</h3>
|
||||
<div className="flex gap-4">
|
||||
<MosfetSwitch
|
||||
label="Charge"
|
||||
active={basicInfo?.mosfetStatus.charge ?? false}
|
||||
disabled={!basicInfo}
|
||||
onClick={() => onToggleMosfet('charge', basicInfo?.mosfetStatus.charge ?? false)}
|
||||
/>
|
||||
<MosfetSwitch
|
||||
label="Discharge"
|
||||
active={basicInfo?.mosfetStatus.discharge ?? false}
|
||||
disabled={!basicInfo}
|
||||
onClick={() => onToggleMosfet('discharge', basicInfo?.mosfetStatus.discharge ?? false)}
|
||||
/>
|
||||
</div>
|
||||
</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">
|
||||
<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>
|
||||
<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>
|
||||
<div className="flex justify-between items-center pb-2 border-b border-gray-800">
|
||||
<span className="text-gray-400 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>
|
||||
</div>
|
||||
</div>
|
||||
{/* MOSFET Control */}
|
||||
<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>
|
||||
<div className="flex gap-4">
|
||||
<MosfetSwitch
|
||||
label="Charge"
|
||||
active={basicInfo?.mosfetStatus.charge ?? false}
|
||||
disabled={!basicInfo}
|
||||
onClick={() => onToggleMosfet('charge', basicInfo?.mosfetStatus.charge ?? false)}
|
||||
/>
|
||||
<MosfetSwitch
|
||||
label="Discharge"
|
||||
active={basicInfo?.mosfetStatus.discharge ?? false}
|
||||
disabled={!basicInfo}
|
||||
onClick={() => onToggleMosfet('discharge', basicInfo?.mosfetStatus.discharge ?? false)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Logger */}
|
||||
<div className="bg-gray-900 rounded-xl border border-gray-800 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>
|
||||
{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' :
|
||||
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'
|
||||
}`}
|
||||
>
|
||||
{isRecording ? <><StopCircle size={18} className="mr-2"/> Stop & Save CSV</> : <><PlayCircle size={18} className="mr-2"/> Start Recording</>}
|
||||
</button>
|
||||
{/* Capacity Info */}
|
||||
<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-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-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-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-500 text-sm">Device Ver</span>
|
||||
<span className="font-mono text-xs text-blue-600">{hwVersion || '--'}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Logger */}
|
||||
<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-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-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'
|
||||
}`}
|
||||
>
|
||||
{isRecording ? <><StopCircle size={18} className="mr-2" /> Stop & Save CSV</> : <><PlayCircle size={18} className="mr-2" /> Start Recording</>}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -15,7 +15,7 @@ const Terminal: React.FC = () => {
|
||||
const [input, setInput] = useState('');
|
||||
const [autoScroll, setAutoScroll] = useState(true);
|
||||
const logsContainerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
|
||||
const MAX_LOGS = 200;
|
||||
|
||||
useEffect(() => {
|
||||
@@ -30,9 +30,9 @@ const Terminal: React.FC = () => {
|
||||
};
|
||||
// NEWEST FIRST: Prepend new log to the beginning of the array
|
||||
const newLogs = [newLog, ...prev];
|
||||
|
||||
|
||||
if (newLogs.length > MAX_LOGS) {
|
||||
return newLogs.slice(0, MAX_LOGS);
|
||||
return newLogs.slice(0, MAX_LOGS);
|
||||
}
|
||||
return newLogs;
|
||||
});
|
||||
@@ -57,85 +57,85 @@ const Terminal: React.FC = () => {
|
||||
const hexStr = input.replace(/\s+/g, '');
|
||||
if (!/^[0-9A-Fa-f]+$/.test(hexStr) || hexStr.length % 2 !== 0) {
|
||||
// Local error log (prepended)
|
||||
setLogs(prev => [{
|
||||
id: Date.now(),
|
||||
type: 'error',
|
||||
timestamp: new Date().toLocaleTimeString(),
|
||||
data: '유효하지 않은 HEX 포맷입니다.'
|
||||
}, ...prev]);
|
||||
setLogs(prev => [{
|
||||
id: Date.now(),
|
||||
type: 'error',
|
||||
timestamp: new Date().toLocaleTimeString(),
|
||||
data: '유효하지 않은 HEX 포맷입니다.'
|
||||
}, ...prev]);
|
||||
return;
|
||||
}
|
||||
|
||||
const bytes = new Uint8Array(hexStr.match(/.{1,2}/g)!.map(byte => parseInt(byte, 16)));
|
||||
|
||||
|
||||
try {
|
||||
await serialService.sendRaw(bytes);
|
||||
// readRaw also triggers callback inside service
|
||||
await serialService.readRaw();
|
||||
await serialService.sendRaw(bytes);
|
||||
// readRaw also triggers callback inside service
|
||||
await serialService.readRaw();
|
||||
} catch (e: any) {
|
||||
// Errors from service are logged via callback usually
|
||||
// Errors from service are logged via callback usually
|
||||
}
|
||||
setInput('');
|
||||
};
|
||||
|
||||
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'}`}
|
||||
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={() => setAutoScroll(!autoScroll)}
|
||||
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-600 hover:bg-red-100 rounded transition-colors" title="Clear Logs">
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
</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"
|
||||
|
||||
<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.data}
|
||||
{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>
|
||||
</div>
|
||||
))}
|
||||
</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"
|
||||
<input
|
||||
type="text"
|
||||
value={input}
|
||||
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
|
||||
<button
|
||||
onClick={handleSend}
|
||||
className="bg-blue-600 hover:bg-blue-500 text-white px-3 py-1.5 rounded flex items-center gap-1 transition-colors text-xs font-bold"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user