PaulVua/nebuleair_pro_4g
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

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

Browse Source 
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>
This commit is contained in:
PaulVua
2026-02-10 10:00:43 +01:00
parent a5717df182
commit 15e43513f4
1 changed files with 93 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
html/saraR4.html
View File

@@ -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 );