mutualisation des headers et footer
This commit is contained in:
Yacine31
@@ -1,72 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="fr">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>Rapport Oracle</title>
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
padding: 20px;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: collapse;
|
|
||||||
margin: 10px 0;
|
|
||||||
background-color: #fff;
|
|
||||||
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
th, td {
|
|
||||||
padding: 2px 2px;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
text-align: left;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
background-color: #0066CC;
|
|
||||||
color: white;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
th:hover {
|
|
||||||
background-color: #0066AA;
|
|
||||||
}
|
|
||||||
|
|
||||||
tr:hover {
|
|
||||||
background-color: #f1f1f1;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
tr.selected {
|
|
||||||
background-color: #d1eaff !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
th.asc::after {
|
|
||||||
content: " 🔼";
|
|
||||||
}
|
|
||||||
th.desc::after {
|
|
||||||
content: " 🔽";
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Style pour les couleurs conditionnelles */
|
|
||||||
.orange {
|
|
||||||
background-color: #ff9800;
|
|
||||||
}
|
|
||||||
|
|
||||||
.red {
|
|
||||||
background-color: #f44336;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Alignement des cellules numériques à droite */
|
|
||||||
.numeric {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
@@ -1,125 +0,0 @@
|
|||||||
<script>
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;
|
|
||||||
|
|
||||||
const comparer = (idx, asc) => (a, b) => {
|
|
||||||
const v1 = getCellValue(asc ? a : b, idx).replace(',', '.');
|
|
||||||
const v2 = getCellValue(asc ? b : a, idx).replace(',', '.');
|
|
||||||
return !isNaN(v1) && !isNaN(v2) ? parseFloat(v1) - parseFloat(v2) : v1.localeCompare(v2);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 🎯 Configuration des règles de colorisation
|
|
||||||
const rules = [
|
|
||||||
{
|
|
||||||
keywords: ["percent_used","percent", "used", "utilisation", "%"],
|
|
||||||
thresholds: [
|
|
||||||
{ min: 90, color: "#fecaca", text: "#991b1b" }, // rouge
|
|
||||||
{ min: 80, color: "#fef08a", text: "#92400e" }, // jaune
|
|
||||||
{ min: 0, color: "#bbf7d0", text: "#065f46" } // vert
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
keywords: ["status"], // 👈 règle pour la colonne STATUS
|
|
||||||
matchText: "FAILED", // mot-clé à détecter
|
|
||||||
style: { // style à appliquer si trouvé
|
|
||||||
color: "#fff",
|
|
||||||
backgroundColor: "#dc2626", // rouge foncé
|
|
||||||
fontWeight: "bold"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Tu peux ajouter d’autres règles ici si besoin
|
|
||||||
];
|
|
||||||
|
|
||||||
// 🎨 Appliquer les règles de coloration dynamiquement
|
|
||||||
const colorizeDynamicColumns = () => {
|
|
||||||
document.querySelectorAll("table").forEach(table => {
|
|
||||||
const rows = table.querySelectorAll("tr");
|
|
||||||
if (rows.length === 0) return;
|
|
||||||
|
|
||||||
const headerRow = rows[0];
|
|
||||||
const ths = headerRow.querySelectorAll("th");
|
|
||||||
|
|
||||||
rules.forEach(rule => {
|
|
||||||
let targetIndex = -1;
|
|
||||||
ths.forEach((th, index) => {
|
|
||||||
const text = th.textContent.trim().toLowerCase();
|
|
||||||
const match = rule.keywords.some(keyword => text.includes(keyword));
|
|
||||||
if (match && targetIndex === -1) {
|
|
||||||
targetIndex = index;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (targetIndex !== -1) {
|
|
||||||
rows.forEach((row, i) => {
|
|
||||||
if (i === 0) return; // skip header
|
|
||||||
|
|
||||||
const cell = row.children[targetIndex];
|
|
||||||
if (!cell) return;
|
|
||||||
|
|
||||||
const rawText = cell.textContent.trim();
|
|
||||||
const numeric = parseFloat(rawText.replace('%', '').replace(',', '.'));
|
|
||||||
|
|
||||||
if (rule.matchText) {
|
|
||||||
if (rawText.toUpperCase().includes(rule.matchText.toUpperCase())) {
|
|
||||||
Object.entries(rule.style).forEach(([prop, val]) => {
|
|
||||||
cell.style[prop] = val;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} else if (!isNaN(numeric)) {
|
|
||||||
for (const threshold of rule.thresholds) {
|
|
||||||
if (numeric >= threshold.min) {
|
|
||||||
cell.style.backgroundColor = threshold.color;
|
|
||||||
cell.style.color = threshold.text;
|
|
||||||
cell.style.fontWeight = 'bold';
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// alignement à droite si numérique
|
|
||||||
if (!isNaN(numeric)) {
|
|
||||||
cell.classList.add("numeric");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// ➕ Appliquer alignement numérique à toutes les cellules numériques
|
|
||||||
const alignNumericCells = () => {
|
|
||||||
document.querySelectorAll('table tr:nth-child(n+2)').forEach(row => {
|
|
||||||
Array.from(row.children).forEach(cell => {
|
|
||||||
const value = parseFloat(cell.textContent.replace(',', '.'));
|
|
||||||
if (!isNaN(value)) {
|
|
||||||
cell.classList.add('numeric');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 🔁 Tri au clic sur les entêtes
|
|
||||||
document.querySelectorAll('table th').forEach(th => {
|
|
||||||
th.addEventListener('click', () => {
|
|
||||||
const table = th.closest('table');
|
|
||||||
const tbody = table.querySelector('tbody') || table;
|
|
||||||
const rows = Array.from(tbody.querySelectorAll('tr:nth-child(n+2)'));
|
|
||||||
const index = Array.from(th.parentNode.children).indexOf(th);
|
|
||||||
const asc = !th.classList.contains('asc');
|
|
||||||
table.querySelectorAll('th').forEach(th => th.classList.remove('asc', 'desc'));
|
|
||||||
th.classList.toggle('asc', asc);
|
|
||||||
th.classList.toggle('desc', !asc);
|
|
||||||
rows.sort(comparer(index, asc)).forEach(row => tbody.appendChild(row));
|
|
||||||
|
|
||||||
// Recoloriser après le tri (au cas où les lignes changent de position)
|
|
||||||
colorizeDynamicColumns();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// 🚀 Initialisation
|
|
||||||
colorizeDynamicColumns();
|
|
||||||
alignNumericCells();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Reference in New Issue
Block a user