header eet footer html dans un rép séparé
This commit is contained in:
Yacine31
@@ -1,44 +0,0 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<!-- $Header: DB Report -->
|
||||
<!-- Author: yacine.oumghar@axiome.io -->
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
<title>Rapport de Base Oracle</title>
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
body { font:12pt; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f9f9f9; padding: 20px; color: #333; }
|
||||
h1 { font-size:16pt; font-weight:bold; color:#336699; border-bottom:1px solid #336699; margin-top:0pt; margin-bottom:0pt; padding:0px 0px 0px 0px; }
|
||||
h2 { font-size:14pt; font-weight:bold; color:#336699; margin-top:10pt; margin-bottom:0pt; }
|
||||
h3 { font-size:14pt; font-weight:normal; color:#336699; margin-top:4pt; margin-bottom:0pt; }
|
||||
p { line-height: 1.0; margin-bottom: 1.2em; }
|
||||
pre { display: inline-block; background-color: #f8f8f8; border: 1px solid #ccc; padding: 1em; overflow-x: auto; font-family: monospace; font-size: 0.9em; line-height: 1.2; color: #333; white-space: pre-wrap; word-break: break-all; }
|
||||
a {color:#663300; }
|
||||
table { font-size:10pt; border-collapse: collapse; margin: 10px 0; background-color: #fff; empty-cells:show; white-space:nowrap; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
|
||||
li { font-size:10pt; color:black; padding-left:4px; padding-right:4px; padding-bottom:2px; }
|
||||
tr { color:black; background:white; }
|
||||
tr:hover { color:white; background:#0066CC; }
|
||||
tr.main { color:black; background:white; }
|
||||
tr.main:hover { color:black; background:white; }
|
||||
tr.selected { background-color: #d1eaff !important; }
|
||||
td { padding: 1px 5px; border: 1px solid #ddd; }
|
||||
th { background-color: #0066CC; color: white; font-weight:normal; cursor: pointer; }
|
||||
th:hover { background-color: #0066AA; }
|
||||
th.asc::after { content: " 🔼"; }
|
||||
th.desc::after { content: " 🔽"; }
|
||||
td.c { text-align:center; }
|
||||
font.n { font-size:10pt; font-style:italic; color:#336699; }
|
||||
font.f { font-size:10pt; color:#999999; border-top:1px solid #336699; margin-top:30pt; }
|
||||
.highlight { background: red; }
|
||||
.pct_warning { background: yellowgreen; }
|
||||
.pct_error { background: red; }
|
||||
/* Style pour les couleurs conditionnelles */
|
||||
.orange { background-color: #ff9800; }
|
||||
.red { background-color: #f44336; }
|
||||
/* Alignement des cellules numériques à droite */
|
||||
.numeric { text-align: right; }
|
||||
</style>
|
||||
|
||||
@@ -1,144 +0,0 @@
|
||||
|
||||
<br />
|
||||
</body>
|
||||
|
||||
<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", "% 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"
|
||||
}
|
||||
},
|
||||
{
|
||||
keywords: ["status"], // 👈 règle pour la colonne STATUS
|
||||
matchText: "COMPLETED", // mot-clé à détecter
|
||||
style: { // style à appliquer si trouvé
|
||||
backgroundColor: "#bbf7d0", // vert
|
||||
fontWeight: "bold"
|
||||
}
|
||||
},
|
||||
{
|
||||
keywords: ["account_status"], // 👈 règle pour la colonne STATUS
|
||||
matchText: "OPEN", // mot-clé à détecter
|
||||
style: { // style à appliquer si trouvé
|
||||
backgroundColor: "#bbf7d0", // vert
|
||||
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>
|
||||
</html>
|
||||
Reference in New Issue
Block a user