시리얼 모드버스 추가

index.h

@@ -645,6 +645,7 @@ const char index_html[] PROGMEM = R"rawliteral(
             <a href="/graph-view">📊 Graph View</a>
             <a href="/settings">⚙️ Settings</a>
             <a href="/serial">📟 Serial</a>
+            <a href="/serial2">📟 Serial2</a>
         </div>
         
         <div class="content">
@@ -723,6 +724,14 @@ const char index_html[] PROGMEM = R"rawliteral(
                     <h3>FILE SIZE</h3>
                     <div class="value" id="current-file-size">0 B</div>
                 </div>
+                <div class="status-card status-off" id="serial1-logging-status">
+                    <h3>SERIAL1 LOG</h3>
+                    <div class="value" id="serial1-file" style="font-size: 0.75em;">OFF</div>
+                </div>
+                <div class="status-card status-off" id="serial2-logging-status">
+                    <h3>SERIAL2 LOG</h3>
+                    <div class="value" id="serial2-file" style="font-size: 0.75em;">OFF</div>
+                </div>
             </div>
             
             <div class="control-panel">
@@ -894,6 +903,11 @@ const char index_html[] PROGMEM = R"rawliteral(
                         hasInitialSync = true;
                     }, 500);
                 }
+                
+                // ⭐ WebSocket 연결되면 즉시 파일 목록 요청
+                setTimeout(function() {
+                    refreshFiles();
+                }, 1000);
             };
             
             ws.onclose = function() {
@@ -911,6 +925,9 @@ const char index_html[] PROGMEM = R"rawliteral(
                 try {
                     const data = JSON.parse(event.data);
                     
+                    // ⭐ 디버그: 받은 메시지 타입 출력
+                    console.log('WebSocket message received:', data.type);
+                    
                     // ★ 수정: 'update' 타입 추가 (서버에서 보내는 타입과 일치)
                     if (data.type === 'status' || data.type === 'update') {
                         updateStatus(data);
@@ -921,6 +938,8 @@ const char index_html[] PROGMEM = R"rawliteral(
                     } else if (data.type === 'canBatch') {
                         updateCanBatch(data.messages);
                     } else if (data.type === 'files') {
+                        console.log('Files received:', data.files ? data.files.length : 0, 'files');  // ⭐ 디버그
+                        console.log('Files data:', data.files);  // ⭐ 디버그
                         updateFileList(data.files || data.list);  // ★ 수정: 'list' 키도 확인
                     } else if (data.type === 'deleteResult') {
                         handleDeleteResult(data);
@@ -1036,6 +1055,32 @@ const char index_html[] PROGMEM = R"rawliteral(
             } else {
                 document.getElementById('power-status').classList.remove('low');
             }
+            
+            // ⭐ Serial1 로깅 상태
+            const serial1Card = document.getElementById('serial1-logging-status');
+            const serial1File = document.getElementById('serial1-file');
+            if (data.serialLogging && data.currentSerialFile) {
+                serial1Card.classList.remove('status-off');
+                serial1Card.classList.add('status-on');
+                serial1File.textContent = data.currentSerialFile;
+            } else {
+                serial1Card.classList.remove('status-on');
+                serial1Card.classList.add('status-off');
+                serial1File.textContent = 'OFF';
+            }
+            
+            // ⭐ Serial2 로깅 상태
+            const serial2Card = document.getElementById('serial2-logging-status');
+            const serial2File = document.getElementById('serial2-file');
+            if (data.serial2Logging && data.currentSerial2File) {
+                serial2Card.classList.remove('status-off');
+                serial2Card.classList.add('status-on');
+                serial2File.textContent = data.currentSerial2File;
+            } else {
+                serial2Card.classList.remove('status-on');
+                serial2Card.classList.add('status-off');
+                serial2File.textContent = 'OFF';
+            }
         }
         
         // ★ 추가: update 타입에서 오는 messages 배열 처리
@@ -1166,13 +1211,17 @@ const char index_html[] PROGMEM = R"rawliteral(
         }
         
         function updateFileList(files) {
+            console.log('updateFileList called, files:', files);  // ⭐ 디버그
             const fileList = document.getElementById('file-list');
             
             if (!files || files.length === 0) {
+                console.log('No files to display');  // ⭐ 디버그
                 fileList.innerHTML = '<p style="text-align: center; color: #666; font-size: 0.9em;">No log files</p>';
                 return;
             }
             
+            console.log('Displaying', files.length, 'files');  // ⭐ 디버그
+            
             files.sort((a, b) => {
                 return b.name.localeCompare(a.name);
             });
@@ -1298,8 +1347,12 @@ const char index_html[] PROGMEM = R"rawliteral(
         }
         
         function refreshFiles() {
+            console.log('Requesting file list...');  // ⭐ 디버그
             if (ws && ws.readyState === WebSocket.OPEN) {
                 ws.send(JSON.stringify({cmd: 'getFiles'}));
+                console.log('getFiles command sent');  // ⭐ 디버그
+            } else {
+                console.error('WebSocket not connected, readyState:', ws ? ws.readyState : 'null');  // ⭐ 디버그
             }
         }
         
@@ -1456,10 +1509,9 @@ const char index_html[] PROGMEM = R"rawliteral(
         });
         
         initWebSocket();
-        setTimeout(() => { refreshFiles(); }, 2000);
     </script>
 </body>
 </html>
 )rawliteral";
 
-#endif
+#endif