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

29
html/admin.html
View File

@@ -412,23 +412,20 @@
<script>
document.addEventListener('DOMContentLoaded', function () {
const elementsToLoad = [
{ id: 'topbar', file: 'topbar.html' },
{ id: 'sidebar', file: 'sidebar.html' },
{ id: 'sidebar_mobile', file: 'sidebar.html' }
];
// Load topbar
fetch('topbar.html')
.then(r => r.text())
.then(data => { document.getElementById('topbar').innerHTML = data; })
.catch(e => console.error('Error loading topbar:', e));
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));
});
// 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;
})
.catch(e => console.error('Error loading sidebar:', e));
});
//end document.addEventListener

46
html/database.html
View File

@@ -181,15 +181,6 @@
document.addEventListener('DOMContentLoaded', function () {
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() {
if (typeof i18n !== 'undefined' && i18n.translations && Object.keys(i18n.translations).length > 0) {
console.log("Applying translations to dynamically loaded content");
@@ -200,23 +191,28 @@
}
}
elementsToLoad.forEach(({ id, file }) => {
fetch(file)
.then(response => response.text())
.then(data => {
const element = document.getElementById(id);
if (element) {
element.innerHTML = data;
}
loadedCount++;
let loadedCount = 0;
// Re-apply translations after all dynamic content is loaded
if (loadedCount === totalElements) {
applyTranslationsWhenReady();
}
})
.catch(error => console.error(`Error loading ${file}:`, error));
});
// Load topbar
fetch('topbar.html')
.then(r => r.text())
.then(data => {
document.getElementById('topbar').innerHTML = data;
loadedCount++;
if (loadedCount === 2) applyTranslationsWhenReady();
})
.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
document.addEventListener('languageChanged', function() {

37
html/index.html
View File

@@ -136,27 +136,28 @@
<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())
// Load topbar
fetch('topbar.html')
.then(r => r.text())
.then(data => {
const element = document.getElementById(id);
if (element) {
element.innerHTML = data;
// Apply translations after loading dynamic content
if (window.i18n && typeof window.i18n.applyTranslations === 'function') {
window.i18n.applyTranslations();
}
document.getElementById('topbar').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 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(e => console.error('Error loading sidebar:', e));
});

29
html/logs.html
View File

@@ -96,23 +96,20 @@
<script>
document.addEventListener('DOMContentLoaded', function () {
const elementsToLoad = [
{ id: 'topbar', file: 'topbar.html' },
{ id: 'sidebar', file: 'sidebar.html' },
{ id: 'sidebar_mobile', file: 'sidebar.html' }
];
// Load topbar
fetch('topbar.html')
.then(r => r.text())
.then(data => { document.getElementById('topbar').innerHTML = data; })
.catch(e => console.error('Error loading topbar:', e));
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));
});
// 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;
})
.catch(e => console.error('Error loading sidebar:', e));
const loop_card_content = document.getElementById('card_loop_content');
const boot_card_content = document.getElementById('card_boot_content');

29
html/map.html
View File

@@ -121,23 +121,20 @@
<script>
document.addEventListener('DOMContentLoaded', function () {
const elementsToLoad = [
{ id: 'topbar', file: 'topbar.html' },
{ id: 'sidebar', file: 'sidebar.html' },
{ id: 'sidebar_mobile', file: 'sidebar.html' }
];
// Load topbar
fetch('topbar.html')
.then(r => r.text())
.then(data => { document.getElementById('topbar').innerHTML = data; })
.catch(e => console.error('Error loading topbar:', e));
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));
});
// 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;
})
.catch(e => console.error('Error loading sidebar:', e));

29
html/saraR4.html
View File

@@ -397,23 +397,20 @@
<script>
document.addEventListener('DOMContentLoaded', function () {
const elementsToLoad = [
{ id: 'topbar', file: 'topbar.html' },
{ id: 'sidebar', file: 'sidebar.html' },
{ id: 'sidebar_mobile', file: 'sidebar.html' }
];
// Load topbar
fetch('topbar.html')
.then(r => r.text())
.then(data => { document.getElementById('topbar').innerHTML = data; })
.catch(e => console.error('Error loading topbar:', e));
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));
});
// 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;
})
.catch(e => console.error('Error loading sidebar:', e));
//OLD way to retreive data from JSON
/*

57
html/screen.html
View File

@@ -108,34 +108,37 @@
<script>
document.addEventListener('DOMContentLoaded', function () {
const elementsToLoad = [
{ id: 'topbar', file: 'topbar.html' },
{ id: 'sidebar', file: 'sidebar.html' },
{ id: 'sidebar_mobile', file: 'sidebar.html' }
];
// Load topbar
fetch('topbar.html')
.then(r => r.text())
.then(data => {
document.getElementById('topbar').innerHTML = data;
if (window.i18n && typeof window.i18n.applyTranslations === 'function') {
window.i18n.applyTranslations();
}
})
.catch(e => console.error('Error loading topbar:', e));
elementsToLoad.forEach(({ id, file }) => {
fetch(file)
.then(response => response.text())
.then(data => {
const element = document.getElementById(id);
if (element) {
element.innerHTML = data;
// Apply translations after loading dynamic content
if (window.i18n && typeof window.i18n.applyTranslations === 'function') {
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));
});
// 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
setTimeout(() => {

37
html/sensors.html
View File

@@ -89,27 +89,28 @@
<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())
// Load topbar
fetch('topbar.html')
.then(r => r.text())
.then(data => {
const element = document.getElementById(id);
if (element) {
element.innerHTML = data;
// Apply translations after loading dynamic content
if (window.i18n && typeof window.i18n.applyTranslations === 'function') {
window.i18n.applyTranslations();
}
document.getElementById('topbar').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 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(e => console.error('Error loading sidebar:', e));
});
function getNPM_values(port) {

25
html/terminal.html
View File

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

29
html/wifi.html
View File

@@ -215,23 +215,20 @@
document.addEventListener('DOMContentLoaded', function () {
console.log("DOMContentLoaded");
const elementsToLoad = [
{ id: 'topbar', file: 'topbar.html' },
{ id: 'sidebar', file: 'sidebar.html' },
{ id: 'sidebar_mobile', file: 'sidebar.html' }
];
// Load topbar
fetch('topbar.html')
.then(r => r.text())
.then(data => { document.getElementById('topbar').innerHTML = data; })
.catch(e => console.error('Error loading topbar:', e));
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));
});
// 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;
})
.catch(e => console.error('Error loading sidebar:', e));
});