feat: auto-clear logs on connect

2026-01-16 14:57:07 +09:00
parent 71f119414f
commit e5695bed22
1 changed files with 79 additions and 80 deletions
--- a/App.tsx
+++ b/App.tsx
@@ -44,8 +44,8 @@ const App: React.FC = () => {
    // Check if Web Serial is supported
    const nav = navigator as unknown as { serial: NavigatorSerial };
    if (!nav.serial) {
-        setIsSupported(false);
-        console.warn("Web Serial API is not supported in this browser.");
+      setIsSupported(false);
+      console.warn("Web Serial API is not supported in this browser.");
    }

    return () => {
@@ -104,8 +104,8 @@ const App: React.FC = () => {
  // --- Log Saving Logic ---
  const handleSaveLogs = (portName: string, logs: SerialLogEntry[]) => {
    if (logs.length === 0) {
-        alert(`No logs to save for ${portName}.`);
-        return;
+      alert(`No logs to save for ${portName}.`);
+      return;
    }

    // Header
@@ -117,18 +117,18 @@ const App: React.FC = () => {

    // Data
    content += logs.map(log => {
-        const time = formatTime(log.timestamp).padEnd(23, ' ');
-        const dir = log.direction.padEnd(3, ' ');
-        const hex = uInt8ArrayToHex(log.data).padEnd(40, ' '); // simple padding
-        const ascii = uInt8ArrayToAscii(log.data);
-        return `${time} | ${dir} | ${hex} | ${ascii}`;
+      const time = formatTime(log.timestamp).padEnd(23, ' ');
+      const dir = log.direction.padEnd(3, ' ');
+      const hex = uInt8ArrayToHex(log.data).padEnd(40, ' '); // simple padding
+      const ascii = uInt8ArrayToAscii(log.data);
+      return `${time} | ${dir} | ${hex} | ${ascii}`;
    }).join('\n');

    const blob = new Blob([content], { type: 'text/plain' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
-    a.download = `serial-log-${portName.toLowerCase()}-${new Date().toISOString().slice(0,19).replace(/[:T]/g,'-')}.txt`;
+    a.download = `serial-log-${portName.toLowerCase()}-${new Date().toISOString().slice(0, 19).replace(/[:T]/g, '-')}.txt`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
@@ -140,6 +140,7 @@ const App: React.FC = () => {
  const handleConnectA = async () => {
    try {
      console.log("Connect A Clicked");
+      setLogsA([]);
      await serialA.current.connect(baudRateA);
      setIsConnectedA(true);
      serialA.current.startReading((data) => {
@@ -149,7 +150,7 @@ const App: React.FC = () => {
        // Visual Feedback for Bridge: If Attached, we assume it was sent to B
        // Note: The actual sending happens in SerialManager, here we just update the UI
        if (isAttachedRef.current && isDualModeRef.current && serialB.current.port) {
-            addLog('B', 'TX', data);
+          addLog('B', 'TX', data);
        }
      });
    } catch (err) {
@@ -166,6 +167,7 @@ const App: React.FC = () => {
  const handleConnectB = async () => {
    try {
      console.log("Connect B Clicked");
+      setLogsB([]);
      await serialB.current.connect(baudRateB);
      setIsConnectedB(true);
      serialB.current.startReading((data) => {
@@ -174,7 +176,7 @@ const App: React.FC = () => {

        // Visual Feedback for Bridge: If Attached, we assume it was sent to A
        if (isAttachedRef.current && isDualModeRef.current && serialA.current.port) {
-            addLog('A', 'TX', data);
+          addLog('A', 'TX', data);
        }
      });
    } catch (err) {
@@ -213,54 +215,52 @@ const App: React.FC = () => {
    setViewMode: (v: ViewMode) => void
  ) => (
    <>
-        <div className="flex items-center gap-2">
-            <span className="text-[10px] text-gray-500 font-bold uppercase hidden xl:inline">Baud</span>
-            <select 
-            className="bg-gray-800 text-xs text-white border border-gray-700 rounded px-1 py-0.5 focus:ring-1 focus:ring-indigo-500 outline-none w-20"
-            value={baud}
-            onChange={(e) => setBaud(Number(e.target.value))}
-            disabled={connected}
-            >
-            {BAUD_RATES.map(rate => (
-                <option key={rate} value={rate}>{rate}</option>
-            ))}
-            </select>
-        </div>
+      <div className="flex items-center gap-2">
+        <span className="text-[10px] text-gray-500 font-bold uppercase hidden xl:inline">Baud</span>
+        <select
+          className="bg-gray-800 text-xs text-white border border-gray-700 rounded px-1 py-0.5 focus:ring-1 focus:ring-indigo-500 outline-none w-20"
+          value={baud}
+          onChange={(e) => setBaud(Number(e.target.value))}
+          disabled={connected}
+        >
+          {BAUD_RATES.map(rate => (
+            <option key={rate} value={rate}>{rate}</option>
+          ))}
+        </select>
+      </div>

-        {connected ? (
-            <button onClick={onDisconnect} className="bg-red-900/30 text-red-400 border border-red-800/50 hover:bg-red-900/50 px-2 py-0.5 rounded text-xs font-bold transition-all flex items-center gap-1">
-                DISCONNECT
-            </button>
-        ) : (
-            <button 
-                onClick={onConnect} 
-                disabled={!isSupported}
-                title={!isSupported ? "Web Serial API not supported" : "Connect to Serial Port"}
-                className="bg-indigo-600 hover:bg-indigo-500 text-white px-3 py-0.5 rounded text-xs font-bold transition-all shadow-lg shadow-indigo-900/20 disabled:opacity-50 disabled:cursor-not-allowed"
-            >
-                {isSupported ? "CONNECT" : "NO SERIAL API"}
-            </button>
-        )}
+      {connected ? (
+        <button onClick={onDisconnect} className="bg-red-900/30 text-red-400 border border-red-800/50 hover:bg-red-900/50 px-2 py-0.5 rounded text-xs font-bold transition-all flex items-center gap-1">
+          DISCONNECT
+        </button>
+      ) : (
+        <button
+          onClick={onConnect}
+          disabled={!isSupported}
+          title={!isSupported ? "Web Serial API not supported" : "Connect to Serial Port"}
+          className="bg-indigo-600 hover:bg-indigo-500 text-white px-3 py-0.5 rounded text-xs font-bold transition-all shadow-lg shadow-indigo-900/20 disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {isSupported ? "CONNECT" : "NO SERIAL API"}
+        </button>
+      )}

-        {/* View Mode Toggles */}
-        <div className="flex bg-gray-800 rounded border border-gray-700 ml-2">
-            <button
-            onClick={() => setViewMode(ViewMode.ASCII)}
-            className={`px-2 py-0.5 text-[10px] font-bold rounded-l transition-all ${
-                viewMode === ViewMode.ASCII ? 'bg-gray-600 text-white' : 'text-gray-400 hover:text-white'
+      {/* View Mode Toggles */}
+      <div className="flex bg-gray-800 rounded border border-gray-700 ml-2">
+        <button
+          onClick={() => setViewMode(ViewMode.ASCII)}
+          className={`px-2 py-0.5 text-[10px] font-bold rounded-l transition-all ${viewMode === ViewMode.ASCII ? 'bg-gray-600 text-white' : 'text-gray-400 hover:text-white'
            }`}
-            >
-            ASCII
-            </button>
-            <button
-            onClick={() => setViewMode(ViewMode.HEX)}
-            className={`px-2 py-0.5 text-[10px] font-bold rounded-r transition-all ${
-                viewMode === ViewMode.HEX ? 'bg-gray-600 text-white' : 'text-gray-400 hover:text-white'
+        >
+          ASCII
+        </button>
+        <button
+          onClick={() => setViewMode(ViewMode.HEX)}
+          className={`px-2 py-0.5 text-[10px] font-bold rounded-r transition-all ${viewMode === ViewMode.HEX ? 'bg-gray-600 text-white' : 'text-gray-400 hover:text-white'
            }`}
-            >
-            HEX
-            </button>
-        </div>
+        >
+          HEX
+        </button>
+      </div>
    </>
  );

@@ -288,11 +288,10 @@ const App: React.FC = () => {
      <div className={`flex-1 flex overflow-hidden p-2 md:p-4 gap-2 md:gap-4 ${isDualMode ? 'flex-col md:flex-row' : 'flex-col'}`}>

        {/* Port A Terminal */}
-        <div className={`flex flex-col transition-all duration-300 ease-in-out ${
-            isDualMode 
-              ? 'w-full h-1/2 md:w-1/2 md:h-full'
-              : 'w-full h-full'
-        }`}>
+        <div className={`flex flex-col transition-all duration-300 ease-in-out ${isDualMode
+            ? 'w-full h-1/2 md:w-1/2 md:h-full'
+            : 'w-full h-full'
+          }`}>
          <Terminal
            title="Primary Port (A)"
            logs={logsA}
@@ -302,7 +301,7 @@ const App: React.FC = () => {
            onSave={() => handleSaveLogs("A", logsA)}
            className="flex-1"
            headerControls={renderControls(
-                baudRateA, setBaudRateA, isConnectedA, handleConnectA, handleDisconnectA, viewModeA, setViewModeA
+              baudRateA, setBaudRateA, isConnectedA, handleConnectA, handleDisconnectA, viewModeA, setViewModeA
            )}
          />
          <div className="mt-2 shrink-0">
@@ -342,9 +341,9 @@ const App: React.FC = () => {
      <div className="h-6 bg-gray-900 border-t border-gray-800 flex items-center justify-between px-4 text-[10px] text-gray-500 font-mono select-none shrink-0">
        <span>&copy; 2026 SIMP</span>
        <span className="hidden sm:inline">
-            {isDualMode 
-             ? (isAttached ? "MODE: DUAL MONITOR (ATTACHED: A <-> B)" : "MODE: DUAL MONITOR (INDEPENDENT)") 
-             : "MODE: SINGLE MONITOR (A)"}
+          {isDualMode
+            ? (isAttached ? "MODE: DUAL MONITOR (ATTACHED: A <-> B)" : "MODE: DUAL MONITOR (INDEPENDENT)")
+            : "MODE: SINGLE MONITOR (A)"}
        </span>
      </div>
    </div>