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

Fix: sidebar.html charge une seule fois au lieu de deux sur toutes les pages

Browse Source 
Reduit de 3 a 2 les fetch au DOMContentLoaded, liberant un slot
de connexion HTTP. Corrige le blocage "pending" cause par la limite
de 6 connexions simultanees par domaine dans Chrome/Firefox.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
PaulVua
2026-03-17 18:32:22 +01:00
parent 408ab767e1
commit 5849190220
10 changed files with 165 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
html/admin.html
View File

@@ -412,23 +412,20 @@
<script> <script>
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
const elementsToLoad = [ // Load topbar
{ id: 'topbar', file: 'topbar.html' }, fetch('topbar.html')
{ id: 'sidebar', file: 'sidebar.html' }, .then(r => r.text())
{ id: 'sidebar_mobile', file: 'sidebar.html' } .then(data => { document.getElementById('topbar').innerHTML = data; })
]; .catch(e => console.error('Error loading topbar:', e));
elementsToLoad.forEach(({ id, file }) => { // Load sidebar once, reuse for desktop + mobile
fetch(file) fetch('sidebar.html')
.then(response => response.text()) .then(r => r.text())
.then(data => { .then(data => {
const element = document.getElementById(id); document.getElementById('sidebar').innerHTML = data;
if (element) { document.getElementById('sidebar_mobile').innerHTML = data;
element.innerHTML = data;
}
}) })
.catch(error => console.error(`Error loading ${file}:`, error)); .catch(e => console.error('Error loading sidebar:', e));
});
}); });
//end document.addEventListener //end document.addEventListener

44
html/database.html
View File

@@ -181,15 +181,6 @@
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
console.log("DOMContentLoaded"); console.log("DOMContentLoaded");
const elementsToLoad = [
{ id: 'topbar', file: 'topbar.html' },
{ id: 'sidebar', file: 'sidebar.html' },
{ id: 'sidebar_mobile', file: 'sidebar.html' }
];
let loadedCount = 0;
const totalElements = elementsToLoad.length;
function applyTranslationsWhenReady() { function applyTranslationsWhenReady() {
if (typeof i18n !== 'undefined' && i18n.translations && Object.keys(i18n.translations).length > 0) { if (typeof i18n !== 'undefined' && i18n.translations && Object.keys(i18n.translations).length > 0) {
console.log("Applying translations to dynamically loaded content"); console.log("Applying translations to dynamically loaded content");
@@ -200,23 +191,28 @@
} }
} }
elementsToLoad.forEach(({ id, file }) => { let loadedCount = 0;
fetch(file)
.then(response => response.text())
.then(data => {
const element = document.getElementById(id);
if (element) {
element.innerHTML = data;
}
loadedCount++;
// Re-apply translations after all dynamic content is loaded // Load topbar
if (loadedCount === totalElements) { fetch('topbar.html')
applyTranslationsWhenReady(); .then(r => r.text())
} .then(data => {
document.getElementById('topbar').innerHTML = data;
loadedCount++;
if (loadedCount === 2) applyTranslationsWhenReady();
}) })
.catch(error => console.error(`Error loading ${file}:`, error)); .catch(e => console.error('Error loading topbar:', e));
});
// Load sidebar once, reuse for desktop + mobile
fetch('sidebar.html')
.then(r => r.text())
.then(data => {
document.getElementById('sidebar').innerHTML = data;
document.getElementById('sidebar_mobile').innerHTML = data;
loadedCount++;
if (loadedCount === 2) applyTranslationsWhenReady();
})
.catch(e => console.error('Error loading sidebar:', e));
// Also listen for language change events to re-apply translations // Also listen for language change events to re-apply translations
document.addEventListener('languageChanged', function() { document.addEventListener('languageChanged', function() {

31
html/index.html
View File

@@ -136,27 +136,28 @@
<script> <script>
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
const elementsToLoad = [ // Load topbar
{ id: 'topbar', file: 'topbar.html' }, fetch('topbar.html')
{ id: 'sidebar', file: 'sidebar.html' }, .then(r => r.text())
{ id: 'sidebar_mobile', file: 'sidebar.html' }
];
elementsToLoad.forEach(({ id, file }) => {
fetch(file)
.then(response => response.text())
.then(data => { .then(data => {
const element = document.getElementById(id); document.getElementById('topbar').innerHTML = data;
if (element) {
element.innerHTML = data;
// Apply translations after loading dynamic content
if (window.i18n && typeof window.i18n.applyTranslations === 'function') { if (window.i18n && typeof window.i18n.applyTranslations === 'function') {
window.i18n.applyTranslations(); window.i18n.applyTranslations();
} }
})
.catch(e => console.error('Error loading topbar:', e));
// Load sidebar once, reuse for desktop + mobile
fetch('sidebar.html')
.then(r => r.text())
.then(data => {
document.getElementById('sidebar').innerHTML = data;
document.getElementById('sidebar_mobile').innerHTML = data;
if (window.i18n && typeof window.i18n.applyTranslations === 'function') {
window.i18n.applyTranslations();
} }
}) })
.catch(error => console.error(`Error loading ${file}:`, error)); .catch(e => console.error('Error loading sidebar:', e));
});
}); });

25
html/logs.html
View File

@@ -96,23 +96,20 @@
<script> <script>
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
const elementsToLoad = [ // Load topbar
{ id: 'topbar', file: 'topbar.html' }, fetch('topbar.html')
{ id: 'sidebar', file: 'sidebar.html' }, .then(r => r.text())
{ id: 'sidebar_mobile', file: 'sidebar.html' } .then(data => { document.getElementById('topbar').innerHTML = data; })
]; .catch(e => console.error('Error loading topbar:', e));
elementsToLoad.forEach(({ id, file }) => { // Load sidebar once, reuse for desktop + mobile
fetch(file) fetch('sidebar.html')
.then(response => response.text()) .then(r => r.text())
.then(data => { .then(data => {
const element = document.getElementById(id); document.getElementById('sidebar').innerHTML = data;
if (element) { document.getElementById('sidebar_mobile').innerHTML = data;
element.innerHTML = data;
}
}) })
.catch(error => console.error(`Error loading ${file}:`, error)); .catch(e => console.error('Error loading sidebar:', e));
});
const loop_card_content = document.getElementById('card_loop_content'); const loop_card_content = document.getElementById('card_loop_content');
const boot_card_content = document.getElementById('card_boot_content'); const boot_card_content = document.getElementById('card_boot_content');

25
html/map.html
View File

@@ -121,23 +121,20 @@
<script> <script>
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
const elementsToLoad = [ // Load topbar
{ id: 'topbar', file: 'topbar.html' }, fetch('topbar.html')
{ id: 'sidebar', file: 'sidebar.html' }, .then(r => r.text())
{ id: 'sidebar_mobile', file: 'sidebar.html' } .then(data => { document.getElementById('topbar').innerHTML = data; })
]; .catch(e => console.error('Error loading topbar:', e));
elementsToLoad.forEach(({ id, file }) => { // Load sidebar once, reuse for desktop + mobile
fetch(file) fetch('sidebar.html')
.then(response => response.text()) .then(r => r.text())
.then(data => { .then(data => {
const element = document.getElementById(id); document.getElementById('sidebar').innerHTML = data;
if (element) { document.getElementById('sidebar_mobile').innerHTML = data;
element.innerHTML = data;
}
}) })
.catch(error => console.error(`Error loading ${file}:`, error)); .catch(e => console.error('Error loading sidebar:', e));
});

25
html/saraR4.html
View File

@@ -397,23 +397,20 @@
<script> <script>
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
const elementsToLoad = [ // Load topbar
{ id: 'topbar', file: 'topbar.html' }, fetch('topbar.html')
{ id: 'sidebar', file: 'sidebar.html' }, .then(r => r.text())
{ id: 'sidebar_mobile', file: 'sidebar.html' } .then(data => { document.getElementById('topbar').innerHTML = data; })
]; .catch(e => console.error('Error loading topbar:', e));
elementsToLoad.forEach(({ id, file }) => { // Load sidebar once, reuse for desktop + mobile
fetch(file) fetch('sidebar.html')
.then(response => response.text()) .then(r => r.text())
.then(data => { .then(data => {
const element = document.getElementById(id); document.getElementById('sidebar').innerHTML = data;
if (element) { document.getElementById('sidebar_mobile').innerHTML = data;
element.innerHTML = data;
}
}) })
.catch(error => console.error(`Error loading ${file}:`, error)); .catch(e => console.error('Error loading sidebar:', e));
});
//OLD way to retreive data from JSON //OLD way to retreive data from JSON
/* /*

47
html/screen.html
View File

@@ -108,34 +108,37 @@
<script> <script>
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
const elementsToLoad = [ // Load topbar
{ id: 'topbar', file: 'topbar.html' }, fetch('topbar.html')
{ id: 'sidebar', file: 'sidebar.html' }, .then(r => r.text())
{ id: 'sidebar_mobile', file: 'sidebar.html' }
];
elementsToLoad.forEach(({ id, file }) => {
fetch(file)
.then(response => response.text())
.then(data => { .then(data => {
const element = document.getElementById(id); document.getElementById('topbar').innerHTML = data;
if (element) {
element.innerHTML = data;
// Apply translations after loading dynamic content
if (window.i18n && typeof window.i18n.applyTranslations === 'function') { if (window.i18n && typeof window.i18n.applyTranslations === 'function') {
window.i18n.applyTranslations(); window.i18n.applyTranslations();
} }
// Ensure the screen tab is visible here as well
if (id.includes('sidebar')) {
setTimeout(() => {
const navScreenElements = element.querySelectorAll('.nav-screen-item');
navScreenElements.forEach(el => el.style.display = 'flex');
}, 100);
}
}
}) })
.catch(error => console.error(`Error loading ${file}:`, error)); .catch(e => console.error('Error loading topbar:', e));
// Load sidebar once, reuse for desktop + mobile
fetch('sidebar.html')
.then(r => r.text())
.then(data => {
const sidebar = document.getElementById('sidebar');
const sidebarMobile = document.getElementById('sidebar_mobile');
sidebar.innerHTML = data;
sidebarMobile.innerHTML = data;
if (window.i18n && typeof window.i18n.applyTranslations === 'function') {
window.i18n.applyTranslations();
}
// Ensure the screen tab is visible in both sidebars
setTimeout(() => {
[sidebar, sidebarMobile].forEach(el => {
const navScreenElements = el.querySelectorAll('.nav-screen-item');
navScreenElements.forEach(item => item.style.display = 'flex');
}); });
}, 100);
})
.catch(e => console.error('Error loading sidebar:', e));
// Translation fallback for now if keys are missing // Translation fallback for now if keys are missing
setTimeout(() => { setTimeout(() => {

31
html/sensors.html
View File

@@ -89,27 +89,28 @@
<script> <script>
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
const elementsToLoad = [ // Load topbar
{ id: 'topbar', file: 'topbar.html' }, fetch('topbar.html')
{ id: 'sidebar', file: 'sidebar.html' }, .then(r => r.text())
{ id: 'sidebar_mobile', file: 'sidebar.html' }
];
elementsToLoad.forEach(({ id, file }) => {
fetch(file)
.then(response => response.text())
.then(data => { .then(data => {
const element = document.getElementById(id); document.getElementById('topbar').innerHTML = data;
if (element) {
element.innerHTML = data;
// Apply translations after loading dynamic content
if (window.i18n && typeof window.i18n.applyTranslations === 'function') { if (window.i18n && typeof window.i18n.applyTranslations === 'function') {
window.i18n.applyTranslations(); window.i18n.applyTranslations();
} }
})
.catch(e => console.error('Error loading topbar:', e));
// Load sidebar once, reuse for desktop + mobile
fetch('sidebar.html')
.then(r => r.text())
.then(data => {
document.getElementById('sidebar').innerHTML = data;
document.getElementById('sidebar_mobile').innerHTML = data;
if (window.i18n && typeof window.i18n.applyTranslations === 'function') {
window.i18n.applyTranslations();
} }
}) })
.catch(error => console.error(`Error loading ${file}:`, error)); .catch(e => console.error('Error loading sidebar:', e));
});
}); });
function getNPM_values(port) { function getNPM_values(port) {

25
html/terminal.html
View File

@@ -179,23 +179,20 @@
<script> <script>
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
const elementsToLoad = [ // Load topbar
{ id: 'topbar', file: 'topbar.html' }, fetch('topbar.html')
{ id: 'sidebar', file: 'sidebar.html' }, .then(r => r.text())
{ id: 'sidebar_mobile', file: 'sidebar.html' } .then(data => { document.getElementById('topbar').innerHTML = data; })
]; .catch(e => console.error('Error loading topbar:', e));
elementsToLoad.forEach(({ id, file }) => { // Load sidebar once, reuse for desktop + mobile
fetch(file) fetch('sidebar.html')
.then(response => response.text()) .then(r => r.text())
.then(data => { .then(data => {
const element = document.getElementById(id); document.getElementById('sidebar').innerHTML = data;
if (element) { document.getElementById('sidebar_mobile').innerHTML = data;
element.innerHTML = data;
}
}) })
.catch(error => console.error(`Error loading ${file}:`, error)); .catch(e => console.error('Error loading sidebar:', e));
});
// Initialize elements // Initialize elements
initializeElements(); initializeElements();

25
html/wifi.html
View File

@@ -215,23 +215,20 @@
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
console.log("DOMContentLoaded"); console.log("DOMContentLoaded");
const elementsToLoad = [ // Load topbar
{ id: 'topbar', file: 'topbar.html' }, fetch('topbar.html')
{ id: 'sidebar', file: 'sidebar.html' }, .then(r => r.text())
{ id: 'sidebar_mobile', file: 'sidebar.html' } .then(data => { document.getElementById('topbar').innerHTML = data; })
]; .catch(e => console.error('Error loading topbar:', e));
elementsToLoad.forEach(({ id, file }) => { // Load sidebar once, reuse for desktop + mobile
fetch(file) fetch('sidebar.html')
.then(response => response.text()) .then(r => r.text())
.then(data => { .then(data => {
const element = document.getElementById(id); document.getElementById('sidebar').innerHTML = data;
if (element) { document.getElementById('sidebar_mobile').innerHTML = data;
element.innerHTML = data;
}
}) })
.catch(error => console.error(`Error loading ${file}:`, error)); .catch(e => console.error('Error loading sidebar:', e));
});
}); });