From 20ba897cdeedbf2f82984e4f45116830f9a1b4b4 Mon Sep 17 00:00:00 2001
From: PaulVua <paulvuarambon@gmail.com>
Date: Tue, 10 Feb 2026 10:04:22 +0100
Subject: [PATCH] feat(ui): improve SIM card info display and switch to English

Add user-friendly alert for SIM card status with ICCID number.
Change all modem/SIM status messages to English.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 html/saraR4.html | 102 ++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 91 insertions(+), 11 deletions(-)

diff --git a/html/saraR4.html b/html/saraR4.html
index c6c39b2..034720d 100755
--- a/html/saraR4.html
+++ b/html/saraR4.html
@@ -84,14 +84,19 @@
               </div>
             </div>
       
-            <div class="col-sm-2">
+            <div class="col-sm-3">
               <div class="card">
-           
+
                 <div class="card-body">
                   <p class="card-text">SIM card information.</p>
-                  <button class="btn btn-primary" onclick="getData_saraR4('ttyAMA2', 'AT+CCID?', 1)">Get Data</button>
+                  <button class="btn btn-primary" onclick="getSimInfo('ttyAMA2', 1)">Get Data</button>
                   <div id="loading_ttyAMA2_AT_CCID_" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
-                  <div id="response_ttyAMA2_AT_CCID_"></div>
+                  <div id="sim_info_alert"></div>
+                  <div class="collapse mt-2" id="sim_info_logs">
+                    <div class="card card-body bg-light">
+                      <small><code id="response_ttyAMA2_AT_CCID_"></code></small>
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
@@ -515,8 +520,8 @@ function getModemInfo(port, timeout) {
         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>
+              <strong>Modem connected</strong><br>
+              <small>Model: ${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>
@@ -526,8 +531,8 @@ function getModemInfo(port, timeout) {
         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>
+              <strong>Modem not connected</strong><br>
+              <small>No response from 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>
@@ -538,8 +543,8 @@ function getModemInfo(port, timeout) {
         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>
+              <strong>Modem detected</strong><br>
+              <small>Unexpected response</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>
@@ -554,7 +559,82 @@ function getModemInfo(port, timeout) {
       $("#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>
+          <strong>Communication error</strong><br>
+          <small>${error}</small>
+        </div>`);
+    }
+  });
+}
+
+function getSimInfo(port, timeout) {
+  console.log("Getting SIM info from port " + port);
+
+  $("#loading_ttyAMA2_AT_CCID_").show();
+  $("#sim_info_alert").empty();
+  $("#response_ttyAMA2_AT_CCID_").empty();
+
+  $.ajax({
+    url: 'launcher.php?type=sara&port=' + port + '&command=' + encodeURIComponent('AT+CCID?') + '&timeout=' + timeout,
+    dataType: 'text',
+    method: 'GET',
+    success: function(response) {
+      console.log("CCID response:", response);
+      $("#loading_ttyAMA2_AT_CCID_").hide();
+
+      // Store raw logs
+      const formattedLogs = response.replace(/\n/g, "<br>");
+      $("#response_ttyAMA2_AT_CCID_").html(formattedLogs);
+
+      // Parse response to extract SIM card number
+      let alertHtml = '';
+
+      // Match CCID number (typically 19-20 digits)
+      const ccidMatch = response.match(/\+CCID:\s*(\d{18,22})/);
+
+      if (response.includes('OK') && ccidMatch) {
+        const simNumber = ccidMatch[1];
+        alertHtml = `
+          <div class="alert alert-success py-2 mb-0 mt-2 d-flex justify-content-between align-items-center" role="alert">
+            <div>
+              <strong>SIM card connected</strong><br>
+              <small>ICCID: ${simNumber}</small>
+            </div>
+            <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#sim_info_logs" aria-expanded="false" aria-controls="sim_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>SIM card not detected</strong><br>
+              <small>No SIM card or read error</small>
+            </div>
+            <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#sim_info_logs" aria-expanded="false" aria-controls="sim_info_logs">
+              <small>+</small>
+            </button>
+          </div>`;
+      } else {
+        alertHtml = `
+          <div class="alert alert-warning py-2 mb-0 mt-2 d-flex justify-content-between align-items-center" role="alert">
+            <div>
+              <strong>SIM card detected</strong><br>
+              <small>Unable to read ICCID</small>
+            </div>
+            <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#sim_info_logs" aria-expanded="false" aria-controls="sim_info_logs">
+              <small>+</small>
+            </button>
+          </div>`;
+      }
+
+      $("#sim_info_alert").html(alertHtml);
+    },
+    error: function(xhr, status, error) {
+      console.error('AJAX request failed:', status, error);
+      $("#loading_ttyAMA2_AT_CCID_").hide();
+      $("#sim_info_alert").html(`
+        <div class="alert alert-danger py-2 mb-0 mt-2" role="alert">
+          <strong>Communication error</strong><br>
           <small>${error}</small>
         </div>`);
     }