update

html/admin.html

@@ -252,13 +252,13 @@
 
         <!-- Envea Detection Modal -->
         <div class="modal fade" id="enveaDetectionModal" tabindex="-1" aria-labelledby="enveaDetectionModalLabel" aria-hidden="true">
-          <div class="modal-dialog modal-lg">
+          <div class="modal-dialog modal-xl">
             <div class="modal-content">
               <div class="modal-header">
                 <h5 class="modal-title" id="enveaDetectionModalLabel">Envea Sondes Detection</h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
               </div>
-              <div class="modal-body">
+              <div class="modal-body" style="max-height: 70vh; overflow-y: auto;">
                 <div id="detectionProgress" class="text-center" style="display: none;">
                   <div class="spinner-border text-primary" role="status">
                     <span class="visually-hidden">Loading...</span>
@@ -1371,12 +1371,9 @@ function displayDetectionResults(results) {
   document.getElementById('detectionProgress').style.display = 'none';
   
   let htmlContent = '<h6>Detection Results:</h6>';
-  htmlContent += '<div class="table-responsive">';
-  htmlContent += '<table class="table table-sm table-striped">';
-  htmlContent += '<thead><tr><th>Port</th><th>Status</th><th>Device Info</th><th>Raw Data</th></tr></thead>';
-  htmlContent += '<tbody>';
   
-  results.forEach(function(result) {
+  // Create cards for each port result
+  results.forEach(function(result, index) {
     const statusBadge = result.detected ? 
       '<span class="badge bg-success">Device Detected</span>' : 
       result.success ? 
@@ -1384,26 +1381,42 @@ function displayDetectionResults(results) {
         '<span class="badge bg-danger">Error</span>';
     
     const deviceInfo = result.device_info || (result.detected ? 'Envea Device' : 'None');
-    const rawData = result.data ? result.data.substring(0, 50) + (result.data.length > 50 ? '...' : '') : 'No data';
+    const rawData = result.data || 'No data';
     
-    htmlContent += `<tr>
+    htmlContent += `
-      <td><strong>${result.port}</strong></td>
+      <div class="card mb-3">
-      <td>${statusBadge}</td>
+        <div class="card-header d-flex justify-content-between align-items-center">
-      <td>${deviceInfo}</td>
+          <h6 class="mb-0"><strong>Port ${result.port}</strong></h6>
-      <td><small class="text-muted">${rawData}</small></td>
+          ${statusBadge}
-    </tr>`;
+        </div>
-    
+        <div class="card-body">
-    if (result.error) {
+          <div class="row">
-      htmlContent += `<tr><td colspan="4"><small class="text-danger">Error: ${result.error}</small></td></tr>`;
+            <div class="col-12 mb-3">
-    }
+              <strong>Device Information:</strong>
+              <p class="mb-0">${deviceInfo}</p>
+            </div>
+            ${result.error ? `<div class="col-12 mb-3"><div class="alert alert-danger mb-0"><strong>Error:</strong> ${result.error}</div></div>` : ''}
+            <div class="col-12">
+              <div class="d-flex justify-content-between align-items-center mb-2">
+                <strong>Raw Data Output:</strong>
+                <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#rawData${index}" aria-expanded="false">
+                  Toggle Raw Data
+                </button>
+              </div>
+              <div class="collapse" id="rawData${index}">
+                <pre class="bg-light p-3 rounded" style="white-space: pre-wrap; word-wrap: break-word; max-height: 300px; overflow-y: auto; font-size: 0.85rem;">${rawData}</pre>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
   });
   
-  htmlContent += '</tbody></table></div>';
-  
   // Add summary
   const detectedCount = results.filter(r => r.detected).length;
   htmlContent += `<div class="alert alert-info mt-3">
-    <strong>Summary:</strong> ${detectedCount} device(s) detected out of ${results.length} ports tested.
+    <i class="bi bi-info-circle"></i> <strong>Summary:</strong> ${detectedCount} device(s) detected out of ${results.length} ports tested.
   </div>`;
   
   document.getElementById('detectionResults').innerHTML = htmlContent;