fe604791f0
Added i18n.js script to all main pages (index, database, saraR4, wifi, logs, admin) to enable language switching functionality across the entire application. Commented out Map and Terminal menu items in the sidebar as these pages are not yet ready for production use. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
310 lines
10 KiB
HTML
Executable File
310 lines
10 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>NebuleAir</title>
|
|
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
|
|
<style>
|
|
body {
|
|
overflow-x: hidden;
|
|
}
|
|
#sidebar a.nav-link {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
#sidebar a.nav-link:hover {
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
#sidebar a.nav-link svg {
|
|
margin-right: 8px; /* Add spacing between icons and text */
|
|
}
|
|
#sidebar {
|
|
transition: transform 0.3s ease-in-out;
|
|
}
|
|
.offcanvas-backdrop {
|
|
z-index: 1040;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Topbar -->
|
|
<span id="topbar"></span>
|
|
|
|
<!-- Sidebar Offcanvas for Mobile -->
|
|
<div class="offcanvas offcanvas-start text-white bg-dark" tabindex="-1" id="sidebarOffcanvas" aria-labelledby="sidebarOffcanvasLabel">
|
|
<div class="offcanvas-header">
|
|
<h5 class="offcanvas-title" id="sidebarOffcanvasLabel">NebuleAir</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
|
</div>
|
|
<div class="offcanvas-body" id="sidebar_mobile">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container-fluid mt-5">
|
|
<div class="row">
|
|
<aside class="col-md-2 col-lg-1 d-none d-md-block vh-100 position-fixed bg-dark text-white" id="sidebar">
|
|
</aside>
|
|
<!-- Main content -->
|
|
<main class="col-md-10 ms-sm-auto col-lg-11 offset-md-2 offset-lg-1 px-md-4">
|
|
<h1 class="mt-4">Le journal</h1>
|
|
<p>Le journal des logs permet de savoir si les processus du capteur se déroulent correctement.</p>
|
|
<div class="row">
|
|
<!-- card 1 -->
|
|
<div class="col-lg-6 col-12">
|
|
<div class="card" style="height: 80vh;">
|
|
<div class="card-header">
|
|
Sara logs
|
|
<button type="submit" class="btn btn-secondary btn-sm" id="refresh-master-log">Refresh</button>
|
|
<button type="submit" class="btn btn-secondary btn-sm" onclick="clear_loopLogs()">Clear</button>
|
|
|
|
<span id="script_running"></span>
|
|
</div>
|
|
<div class="card-body overflow-auto" id="card_loop_content">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- card 2 -->
|
|
<div class="col-lg-6 col-12">
|
|
<div class="card" style="height: 80vh;">
|
|
<div class="card-header">
|
|
Boot logs
|
|
<button type="submit" class="btn btn-secondary btn-sm" id="refresh-boot-log">Refresh</button>
|
|
</div>
|
|
<div class="card-body overflow-auto" id="card_boot_content">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- JAVASCRIPT -->
|
|
|
|
<!-- Link Ajax locally -->
|
|
<script src="assets/jquery/jquery-3.7.1.min.js"></script>
|
|
<!-- Link Bootstrap JS and Popper.js locally -->
|
|
<script src="assets/js/bootstrap.bundle.js"></script>
|
|
<!-- i18n translation system -->
|
|
<script src="assets/js/i18n.js"></script>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const elementsToLoad = [
|
|
{ id: 'topbar', file: 'topbar.html' },
|
|
{ id: 'sidebar', file: 'sidebar.html' },
|
|
{ id: 'sidebar_mobile', file: 'sidebar.html' }
|
|
];
|
|
|
|
elementsToLoad.forEach(({ id, file }) => {
|
|
fetch(file)
|
|
.then(response => response.text())
|
|
.then(data => {
|
|
const element = document.getElementById(id);
|
|
if (element) {
|
|
element.innerHTML = data;
|
|
}
|
|
})
|
|
.catch(error => console.error(`Error loading ${file}:`, error));
|
|
});
|
|
|
|
const loop_card_content = document.getElementById('card_loop_content');
|
|
const boot_card_content = document.getElementById('card_boot_content');
|
|
|
|
//Getting Master logs
|
|
console.log("Getting SARA logs");
|
|
displayLogFile('../logs/sara_service.log', loop_card_content, true, 1000);
|
|
|
|
console.log("Getting app/boot logs");
|
|
displayLogFile('../logs/app.log', boot_card_content, true, 1000);
|
|
|
|
// Setup master log with refresh button
|
|
setupLogRefreshButton('refresh-master-log', '../logs/sara_service.log', 'card_loop_content', 3000);
|
|
|
|
// Setup boot log with refresh button
|
|
setupLogRefreshButton('refresh-boot-log', '../logs/app.log', 'card_boot_content', 300);
|
|
|
|
|
|
});
|
|
|
|
|
|
window.onload = function() {
|
|
getModem_busy_status();
|
|
setInterval(getModem_busy_status, 2000);
|
|
|
|
//NEW way to get config (SQLite)
|
|
$.ajax({
|
|
url: 'launcher.php?type=get_config_sqlite',
|
|
dataType:'json',
|
|
//dataType: 'json', // Specify that you expect a JSON response
|
|
method: 'GET', // Use GET or POST depending on your needs
|
|
success: function(response) {
|
|
console.log("Getting SQLite config table:");
|
|
console.log(response);
|
|
|
|
//device name_side bar
|
|
const elements = document.querySelectorAll('.sideBar_sensorName');
|
|
elements.forEach((element) => {
|
|
element.innerText = response.deviceName;
|
|
});
|
|
|
|
//device name html page title
|
|
if (response.deviceName) {
|
|
document.title = response.deviceName;
|
|
}
|
|
|
|
},
|
|
error: function(xhr, status, error) {
|
|
console.error('AJAX request failed:', status, error);
|
|
}
|
|
});//end AJAX
|
|
|
|
|
|
//get local RTC
|
|
$.ajax({
|
|
url: 'launcher.php?type=RTC_time',
|
|
dataType: 'text', // Specify that you expect a JSON response
|
|
method: 'GET', // Use GET or POST depending on your needs
|
|
success: function(response) {
|
|
console.log("Local RTC: " + response);
|
|
const RTC_Element = document.getElementById("RTC_time");
|
|
RTC_Element.textContent = response;
|
|
},
|
|
error: function(xhr, status, error) {
|
|
console.error('AJAX request failed:', status, error);
|
|
}
|
|
});
|
|
|
|
|
|
}//end onload
|
|
|
|
function displayLogFile(logFilePath, containerElement, scrollToBottom = true, maxLines = 0) {
|
|
// Show loading indicator
|
|
containerElement.innerHTML = '<div class="text-center"><i>Loading log file...</i></div>';
|
|
|
|
return fetch(logFilePath)
|
|
.then((response) => {
|
|
if (!response.ok) {
|
|
throw new Error(`Failed to fetch the log file: ${response.status} ${response.statusText}`);
|
|
}
|
|
return response.text();
|
|
})
|
|
.then((data) => {
|
|
// Split the log into lines
|
|
let lines = data.split('\n');
|
|
|
|
// Apply max lines limit if specified
|
|
if (maxLines > 0 && lines.length > maxLines) {
|
|
lines = lines.slice(-maxLines); // Get only the last N lines
|
|
}
|
|
|
|
// Format log content
|
|
const formattedLog = lines
|
|
.map((line) => line.trim()) // Remove extra whitespace
|
|
.filter((line) => line) // Remove empty lines
|
|
.join('<br>'); // Join formatted lines with line breaks
|
|
|
|
// Display the formatted log
|
|
containerElement.innerHTML = `<pre style="white-space: pre-wrap; word-wrap: break-word; margin: 0;">${formattedLog}</pre>`;
|
|
|
|
// Scroll to bottom if requested
|
|
if (scrollToBottom) {
|
|
containerElement.scrollTop = containerElement.scrollHeight;
|
|
}
|
|
|
|
return formattedLog; // Return the formatted log in case the caller needs it
|
|
})
|
|
.catch((error) => {
|
|
console.error(`Error loading log file ${logFilePath}:`, error);
|
|
containerElement.innerHTML = `<div class="text-danger">Error loading log file: ${error.message}</div>`;
|
|
throw error; // Re-throw the error for the caller to handle if needed
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Set up a refresh button for a log file
|
|
* @param {string} buttonId - ID of the button element
|
|
* @param {string} logFilePath - Path to the log file
|
|
* @param {string} containerId - ID of the container to display the log in
|
|
* @param {number} maxLines - Maximum number of lines to display (0 for all)
|
|
*/
|
|
function setupLogRefreshButton(buttonId, logFilePath, containerId, maxLines = 0) {
|
|
console.log("Refreshing logs");
|
|
|
|
const button = document.getElementById(buttonId);
|
|
const container = document.getElementById(containerId);
|
|
|
|
if (!button || !container) {
|
|
console.error('Button or container element not found');
|
|
return;
|
|
}
|
|
|
|
// Initial load
|
|
displayLogFile(logFilePath, container, true, maxLines);
|
|
|
|
// Set up button click handler
|
|
button.addEventListener('click', () => {
|
|
displayLogFile(logFilePath, container, true, maxLines);
|
|
});
|
|
}
|
|
|
|
function clear_loopLogs(){
|
|
console.log("Clearing loop logs");
|
|
|
|
$.ajax({
|
|
url: 'launcher.php?type=clear_loopLogs',
|
|
method: 'GET', // Use GET or POST depending on your needs
|
|
success: function(response) {
|
|
// Handle success response if needed
|
|
console.log(response);
|
|
//alert(response);
|
|
// Reload the page after the device update
|
|
location.reload(); // This will reload the page
|
|
|
|
},
|
|
error: function(xhr, status, error) {
|
|
console.error('AJAX request failed:', status, error);
|
|
}
|
|
});
|
|
}
|
|
|
|
function getModem_busy_status() {
|
|
//console.log("Getting modem busy status");
|
|
|
|
const script_is_running = document.getElementById("script_running");
|
|
|
|
$.ajax({
|
|
url: 'launcher.php?type=getModem_busy',
|
|
dataType: 'json', // Expecting JSON response
|
|
method: 'GET',
|
|
success: function(response) {
|
|
//console.log(response);
|
|
|
|
if (response.running) {
|
|
// Script is running → Show the Bootstrap spinner
|
|
script_is_running.innerHTML = `
|
|
<div class="spinner-border spinner-border-sm text-danger" role="status">
|
|
<span class="visually-hidden">Modem is busy...</span>
|
|
</div>
|
|
`;
|
|
} else {
|
|
// Script is NOT running → Show a success message (no spinner)
|
|
script_is_running.innerHTML = ``;
|
|
}
|
|
},
|
|
error: function(xhr, status, error) {
|
|
console.error('AJAX request failed:', status, error);
|
|
script_is_running.innerHTML = `<span class="text-warning">Error checking status ⚠️</span>`;
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|