feat(ui): improve modem info display with user-friendly alerts

Replace raw AT command output with Bootstrap alerts showing modem
connection status and model. Add collapsible section for raw logs.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

html/saraR4.html

@@ -67,15 +67,19 @@
           -->
           <div class="row mb-3">
 
-            <div class="col-sm-2">
+            <div class="col-sm-3">
               <div class="card">
 
                 <div class="card-body">
                   <p class="card-text">General information. </p>
-                  <button class="btn btn-primary" onclick="getData_saraR4('ttyAMA2', 'ATI', 1)">Get Data</button>
+                  <button class="btn btn-primary" onclick="getModemInfo('ttyAMA2', 1)">Get Data</button>
                   <div id="loading_ttyAMA2_ATI" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
-                  <div id="response_ttyAMA2_ATI"></div>
+                  <div id="modem_info_alert"></div>
-      
+                  <div class="collapse mt-2" id="modem_info_logs">
+                    <div class="card card-body bg-light">
+                      <small><code id="response_ttyAMA2_ATI"></code></small>
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
@@ -473,6 +477,90 @@ window.onload = function() {
       }
 
 
+function getModemInfo(port, timeout) {
+  console.log("Getting modem info from port " + port);
+
+  $("#loading_ttyAMA2_ATI").show();
+  $("#modem_info_alert").empty();
+  $("#response_ttyAMA2_ATI").empty();
+
+  $.ajax({
+    url: 'launcher.php?type=sara&port=' + port + '&command=' + encodeURIComponent('ATI') + '&timeout=' + timeout,
+    dataType: 'text',
+    method: 'GET',
+    success: function(response) {
+      console.log("ATI response:", response);
+      $("#loading_ttyAMA2_ATI").hide();
+
+      // Store raw logs
+      const formattedLogs = response.replace(/\n/g, "<br>");
+      $("#response_ttyAMA2_ATI").html(formattedLogs);
+
+      // Parse response to detect modem model
+      let alertHtml = '';
+      const responseUpper = response.toUpperCase();
+
+      if (response.includes('OK') && (responseUpper.includes('SARA-R5') || responseUpper.includes('SARA-R4'))) {
+        // Extract model name
+        let modelName = 'SARA';
+        const modelMatch = response.match(/SARA-R[45]\d*[A-Z]*-\d+[A-Z]*-\d+/i);
+        if (modelMatch) {
+          modelName = modelMatch[0];
+        } else if (responseUpper.includes('SARA-R5')) {
+          modelName = 'SARA-R5';
+        } else if (responseUpper.includes('SARA-R4')) {
+          modelName = 'SARA-R4';
+        }
+
+        alertHtml = `
+          <div class="alert alert-success py-2 mb-0 mt-2 d-flex justify-content-between align-items-center" role="alert">
+            <div>
+              <strong>Modem connecté</strong><br>
+              <small>Modèle: ${modelName}</small>
+            </div>
+            <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#modem_info_logs" aria-expanded="false" aria-controls="modem_info_logs">
+              <small>+</small>
+            </button>
+          </div>`;
+      } else if (response.includes('ERROR') || response.trim() === '' || !response.includes('OK')) {
+        alertHtml = `
+          <div class="alert alert-danger py-2 mb-0 mt-2 d-flex justify-content-between align-items-center" role="alert">
+            <div>
+              <strong>Modem non connecté</strong><br>
+              <small>Pas de réponse du modem</small>
+            </div>
+            <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#modem_info_logs" aria-expanded="false" aria-controls="modem_info_logs">
+              <small>+</small>
+            </button>
+          </div>`;
+      } else {
+        // Unknown response but got something
+        alertHtml = `
+          <div class="alert alert-warning py-2 mb-0 mt-2 d-flex justify-content-between align-items-center" role="alert">
+            <div>
+              <strong>Modem détecté</strong><br>
+              <small>Réponse inattendue</small>
+            </div>
+            <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#modem_info_logs" aria-expanded="false" aria-controls="modem_info_logs">
+              <small>+</small>
+            </button>
+          </div>`;
+      }
+
+      $("#modem_info_alert").html(alertHtml);
+    },
+    error: function(xhr, status, error) {
+      console.error('AJAX request failed:', status, error);
+      $("#loading_ttyAMA2_ATI").hide();
+      $("#modem_info_alert").html(`
+        <div class="alert alert-danger py-2 mb-0 mt-2" role="alert">
+          <strong>Erreur de communication</strong><br>
+          <small>${error}</small>
+        </div>`);
+    }
+  });
+}
+
 function getData_saraR4(port, command, timeout){
         console.log("Data from SaraR4");
         console.log("Port: " + port );