GoogleAIBuilder/RFID
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

자잘한 통신 오류 수정 및 모바일용 디자인 변경, connect 메뉴 별도 추가

Browse Source
This commit is contained in:
backuppc
2026-01-23 13:23:11 +09:00
parent 3396104011
commit abb32575f4
3 changed files with 408 additions and 359 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
App.tsx
View File

@@ -18,7 +18,7 @@ const App: React.FC = () => {
const [address, setAddress] = useState(0xFF); // Broadcast address default
// App State - Set Quick Test as Default
const [activeTab, setActiveTab] = useState<'inventory' | 'settings' | 'memory' | 'quicktest'>('quicktest');
const [activeTab, setActiveTab] = useState<'connect' | 'inventory' | 'settings' | 'memory' | 'quicktest'>('quicktest');
const [logs, setLogs] = useState<LogEntry[]>([]);
const [tags, setTags] = useState<TagData[]>([]);
const [isScanning, setIsScanning] = useState(false);
@@ -146,6 +146,7 @@ const App: React.FC = () => {
setStatus(ConnectionStatus.CONNECTED);
addLog('INFO', `Connected to serial port at ${baudRate}`);
setActiveTab('quicktest');
startReading(p);
} catch (err: any) {
console.error(err);
@@ -318,7 +319,7 @@ const App: React.FC = () => {
addLog('INFO', 'VERIFICATION SUCCESS: Data matches written value.');
performingQuickWriteRef.current = false;
verificationRetriesRef.current = 0;
alert("Quick Test Successful: Write verified.");
//alert("Quick Test Successful: Write verified.");
} else {
if (verificationRetriesRef.current < 5) {
verificationRetriesRef.current += 1;
@@ -614,9 +615,8 @@ const App: React.FC = () => {
};
const getLogHeightClass = () => {
if (isLogExpanded) return 'h-96';
if (activeTab === 'quicktest' || activeTab === 'settings') return 'h-12';
return 'h-48';
if (isLogExpanded) return 'h-[30vh]';
return 'h-12';
};
return (
@@ -632,6 +632,13 @@ const App: React.FC = () => {
</div>
<div className="p-4 space-y-2 flex-1">
<button
onClick={() => setActiveTab('connect')}
className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors ${activeTab === 'connect' ? 'bg-emerald-50 text-emerald-700' : 'text-slate-600 hover:bg-slate-50'
}`}
>
<Wifi className="w-5 h-5" /> Connection
</button>
<button
onClick={() => setActiveTab('quicktest')}
className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors ${activeTab === 'quicktest' ? 'bg-indigo-50 text-indigo-700' : 'text-slate-600 hover:bg-slate-50'
@@ -662,42 +669,26 @@ const App: React.FC = () => {
</button>
</div>
<div className="p-4 border-t border-slate-100">
<ConnectionPanel
status={status}
onConnect={connectSerial}
onDisconnect={disconnectSerial}
baudRate={baudRate}
setBaudRate={setBaudRate}
address={address}
setAddress={setAddress}
/>
</div>
{/* Connection Panel removed from here and moved to main content */}
</div>
{/* Main Content */}
<div className="flex-1 flex flex-col overflow-hidden relative">
{/* Mobile Top Navigation Bar */}
<div className="md:hidden bg-white border-b border-slate-200 p-2 flex items-center justify-between shrink-0 overflow-x-auto">
<div className="flex items-center gap-3 pr-4 border-r border-slate-100 mr-2 shrink-0">
<div className="flex items-center gap-1">
<Database className="text-blue-600 w-5 h-5" />
<span className="font-bold text-slate-800 text-sm">UHF</span>
</div>
{/* Connection Status Indicator */}
<button
onClick={() => setActiveTab('settings')}
className={`flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium transition-colors ${status === ConnectionStatus.CONNECTED
? 'bg-emerald-50 text-emerald-600 border border-emerald-100'
: 'bg-red-50 text-red-600 border border-red-100 animate-pulse'
}`}
>
{status === ConnectionStatus.CONNECTED ? <Wifi className="w-3 h-3" /> : <WifiOff className="w-3 h-3" />}
<span>{status === ConnectionStatus.CONNECTED ? 'On' : 'Connect'}</span>
</button>
<div className="flex items-center gap-1 pr-4 border-r border-slate-100 mr-2 shrink-0">
<Database className="text-blue-600 w-5 h-5" />
<span className="font-bold text-slate-800 text-sm">UHF</span>
</div>
<div className="flex items-center gap-1 flex-1 justify-around">
<button
onClick={() => setActiveTab('connect')}
className={`p-2 rounded-lg transition-colors flex flex-col items-center justify-center gap-1 ${activeTab === 'connect' ? 'bg-emerald-50 text-emerald-700' : 'text-slate-600 hover:bg-slate-50'
}`}
>
<Wifi className="w-5 h-5" />
<span className="text-[10px] font-medium leading-none">Connect</span>
</button>
<button
onClick={() => setActiveTab('quicktest')}
className={`p-2 rounded-lg transition-colors flex flex-col items-center justify-center gap-1 ${activeTab === 'quicktest' ? 'bg-indigo-50 text-indigo-700' : 'text-slate-600 hover:bg-slate-50'
@@ -733,6 +724,22 @@ const App: React.FC = () => {
</div>
</div>
<main className="flex-1 p-6 overflow-auto">
{activeTab === 'connect' && (
<div className="space-y-4 max-w-2xl mx-auto">
<h2 className="text-lg font-bold text-slate-800">Connection Manager</h2>
<div className="bg-white rounded-xl border border-slate-200 shadow-sm p-6">
<ConnectionPanel
status={status}
onConnect={connectSerial}
onDisconnect={disconnectSerial}
baudRate={baudRate}
setBaudRate={setBaudRate}
address={address}
setAddress={setAddress}
/>
</div>
</div>
)}
{activeTab === 'inventory' && (
<InventoryPanel
tags={tags}