모바일 디자인 업데이트 및 quick test 에서 start 와 length 를 직접 입력할 수 있게 함
This commit is contained in:
backuppc
14
App.tsx
14
App.tsx
@@ -46,7 +46,15 @@ const App: React.FC = () => {
|
||||
// Quick Action Config (Persisted in localStorage)
|
||||
const [quickTestConfig, setQuickTestConfig] = useState<QuickTestConfig>(() => {
|
||||
const saved = localStorage.getItem('quickTestConfig');
|
||||
return saved ? JSON.parse(saved) : { length: 3, format: 'ascii' };
|
||||
if (saved) {
|
||||
const parsed = JSON.parse(saved);
|
||||
return {
|
||||
length: parsed.length || 3,
|
||||
format: parsed.format || 'ascii',
|
||||
startAddress: parsed.startAddress !== undefined ? parsed.startAddress : 2
|
||||
};
|
||||
}
|
||||
return { length: 3, format: 'ascii', startAddress: 2 };
|
||||
});
|
||||
|
||||
// Quick Action State
|
||||
@@ -136,14 +144,14 @@ const App: React.FC = () => {
|
||||
setTimeout(() => {
|
||||
if (action === 'read') {
|
||||
addLog('INFO', `Quick Read detected tag: ${targetTag.epc}`);
|
||||
handleMemoryRead(MemoryBank.EPC, 2, quickTestConfig.length, "00000000", targetTag.epc);
|
||||
handleMemoryRead(MemoryBank.EPC, quickTestConfig.startAddress, quickTestConfig.length, "00000000", targetTag.epc);
|
||||
} else if (action === 'write') {
|
||||
// Set Flag to trigger verification read on success
|
||||
performingQuickWriteRef.current = true;
|
||||
verificationRetriesRef.current = 0; // Reset retries
|
||||
|
||||
addLog('INFO', `Quick Write detected tag: ${targetTag.epc}`);
|
||||
handleMemoryWrite(MemoryBank.EPC, 2, dataToWrite, "00000000", targetTag.epc);
|
||||
handleMemoryWrite(MemoryBank.EPC, quickTestConfig.startAddress, dataToWrite, "00000000", targetTag.epc);
|
||||
}
|
||||
}, 200);
|
||||
}
|
||||
|
||||
@@ -29,12 +29,12 @@ export const QuickTestPanel: React.FC<Props> = ({
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col items-center justify-center p-2 md:p-6 max-w-4xl mx-auto">
|
||||
<div className="text-center mb-10">
|
||||
<div className="hidden md:block text-center mb-10">
|
||||
<div className="inline-flex items-center justify-center p-3 bg-indigo-100 rounded-full mb-4">
|
||||
<Zap className="w-8 h-8 text-indigo-600" />
|
||||
</div>
|
||||
<h1 className="text-3xl font-bold text-slate-800 mb-2">Quick Test Mode</h1>
|
||||
<p className="text-slate-500">
|
||||
<p className="text-slate-500 hidden md:block">
|
||||
필드 내의 첫 번째 태그를 자동으로 감지하여 읽기 또는 쓰기 작업을 수행합니다.
|
||||
</p>
|
||||
</div>
|
||||
@@ -114,7 +114,7 @@ export const QuickTestPanel: React.FC<Props> = ({
|
||||
</div>
|
||||
|
||||
{/* Info / Config Card */}
|
||||
<div className="flex flex-col justify-center space-y-6">
|
||||
<div className="hidden md:flex flex-col justify-center space-y-6">
|
||||
<div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-200 hover:shadow-md transition-shadow">
|
||||
<h3 className="text-lg font-bold text-slate-800 mb-4 flex items-center gap-2">
|
||||
<Zap className="w-5 h-5 text-indigo-500" />
|
||||
@@ -127,7 +127,7 @@ export const QuickTestPanel: React.FC<Props> = ({
|
||||
</div>
|
||||
<div className="flex justify-between items-center p-3 bg-slate-50 rounded-lg">
|
||||
<span className="text-slate-500 text-sm">Start Address</span>
|
||||
<span className="font-bold text-slate-700">2 (User Data)</span>
|
||||
<span className="font-bold text-slate-700">{config.startAddress} (User Data)</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center p-3 bg-slate-50 rounded-lg">
|
||||
<span className="text-slate-500 text-sm">Data Length</span>
|
||||
@@ -146,7 +146,7 @@ export const QuickTestPanel: React.FC<Props> = ({
|
||||
Note
|
||||
</h4>
|
||||
<p>
|
||||
설정(길이, 포맷)을 변경하려면 <strong>Settings</strong> 탭으로 이동하세요.
|
||||
설정(시작주소, 길이, 포맷)을 변경하려면 <strong>Settings</strong> 탭으로 이동하세요.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -38,7 +38,8 @@ export const SettingsPanel: React.FC<Props> = ({
|
||||
const [band, setBand] = useState<FrequencyBand>(FrequencyBand.US);
|
||||
|
||||
// Quick Test Local State
|
||||
const [qtLength, setQtLength] = useState<3 | 4>(4);
|
||||
const [qtLength, setQtLength] = useState<number>(3);
|
||||
const [qtStartAddress, setQtStartAddress] = useState<number>(2);
|
||||
const [qtFormat, setQtFormat] = useState<'hex' | 'ascii'>('hex');
|
||||
|
||||
// Initialize form with reader info when available
|
||||
@@ -58,6 +59,7 @@ export const SettingsPanel: React.FC<Props> = ({
|
||||
useEffect(() => {
|
||||
setQtLength(quickTestConfig.length);
|
||||
setQtFormat(quickTestConfig.format);
|
||||
setQtStartAddress(quickTestConfig.startAddress);
|
||||
}, [quickTestConfig]);
|
||||
|
||||
const handleApplyReaderSettings = () => {
|
||||
@@ -74,7 +76,8 @@ export const SettingsPanel: React.FC<Props> = ({
|
||||
const handleSaveLocalSettings = () => {
|
||||
onSaveQuickTestConfig({
|
||||
length: qtLength,
|
||||
format: qtFormat
|
||||
format: qtFormat,
|
||||
startAddress: qtStartAddress
|
||||
});
|
||||
};
|
||||
|
||||
@@ -309,28 +312,26 @@ export const SettingsPanel: React.FC<Props> = ({
|
||||
이 설정은 브라우저의 로컬 저장소에 저장되며 "Quick Test" 탭의 동작을 제어합니다.
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-6">
|
||||
<div className="space-y-3">
|
||||
<label className="text-sm font-medium text-slate-600">Start Address (Word Offset)</label>
|
||||
<input
|
||||
type="number"
|
||||
min={0}
|
||||
value={qtStartAddress}
|
||||
onChange={(e) => setQtStartAddress(parseInt(e.target.value) || 0)}
|
||||
className="w-full bg-white border border-slate-300 rounded-lg px-3 py-2 text-slate-900 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<label className="text-sm font-medium text-slate-600">Read/Write Length (Words)</label>
|
||||
<div className="flex items-center gap-4">
|
||||
<label className="flex items-center gap-2 cursor-pointer bg-white px-4 py-2 rounded-lg border border-indigo-100 shadow-sm">
|
||||
<input
|
||||
type="radio"
|
||||
checked={qtLength === 3}
|
||||
onChange={() => setQtLength(3)}
|
||||
className="w-4 h-4 text-indigo-600 focus:ring-indigo-500 border-gray-300"
|
||||
/>
|
||||
<span className="text-sm text-slate-700">3 Words</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 cursor-pointer bg-white px-4 py-2 rounded-lg border border-indigo-100 shadow-sm">
|
||||
<input
|
||||
type="radio"
|
||||
checked={qtLength === 4}
|
||||
onChange={() => setQtLength(4)}
|
||||
className="w-4 h-4 text-indigo-600 focus:ring-indigo-500 border-gray-300"
|
||||
/>
|
||||
<span className="text-sm text-slate-700">4 Words</span>
|
||||
</label>
|
||||
</div>
|
||||
<input
|
||||
type="number"
|
||||
min={1}
|
||||
value={qtLength}
|
||||
onChange={(e) => setQtLength(parseInt(e.target.value) || 1)}
|
||||
className="w-full bg-white border border-slate-300 rounded-lg px-3 py-2 text-slate-900 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
|
||||
Reference in New Issue
Block a user