aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorSan Jacobs2025-12-12 17:25:11 +0100
committerSan Jacobs2025-12-12 17:25:11 +0100
commite2c930c8b48c3974ce20e5ce459b257178189dc7 (patch)
treeae3da3d59064ea8910d8334b41ae40dbb16acfb9
parente192100ea735fb4f3105468862a978cfbf51938a (diff)
downloadbetter-report-e2c930c8b48c3974ce20e5ce459b257178189dc7.tar.gz
better-report-e2c930c8b48c3974ce20e5ce459b257178189dc7.tar.bz2
better-report-e2c930c8b48c3974ce20e5ce459b257178189dc7.zip
HTML parts
-rw-r--r--src/parts/end.html96
-rw-r--r--src/parts/start.html9
-rw-r--r--src/parts/start2.html107
3 files changed, 212 insertions, 0 deletions
diff --git a/src/parts/end.html b/src/parts/end.html
new file mode 100644
index 0000000..204188c
--- /dev/null
+++ b/src/parts/end.html
@@ -0,0 +1,96 @@
+ </tbody>
+ </table>
+ </div>
+</body>
+
+<script type="text/javascript">
+ const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;
+ prevColumnSorted = document.getElementsByClassName("current-sort")[0];
+
+ const comparer = (idx, asc) => (a, b) => ((v1, v2) =>
+ v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2)
+ )(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));
+
+ function doSort(th) {
+ console.log("Doing sort to: ", th.textContent, th);
+
+ const table = th.closest('table');
+ const tbody = table.querySelector('tbody');
+ const columnIndex = Array.from(th.parentNode.children).indexOf(th);
+
+ // Toggle sort direction
+ if (prevColumnSorted == th) {
+ this.asc = !this.asc;
+ } else {
+ this.asc = true;
+ }
+
+ // Get all rows, sort them, then reappend to tbody
+ const rows = Array.from(tbody.querySelectorAll('tr'));
+ const sortedRows = rows.sort(comparer(columnIndex, this.asc));
+
+ sortedRows.forEach(row => tbody.appendChild(row));
+ prevColumnSorted = th;
+ }
+
+ // Event listeners and initial sort
+ document.querySelectorAll('th').forEach(th => th.addEventListener('click', () => {
+ document.querySelectorAll('.current-sort').forEach(el => el.classList.remove('current-sort'));
+ th.classList.add('current-sort');
+ doSort(th);
+ }));
+
+ // Column and row highlighting on hover
+ const table = document.querySelector('table');
+ const allCells = table.querySelectorAll('td, th');
+ let currentCol = -1;
+ let currentRow = null;
+
+ allCells.forEach(cell => {
+ cell.addEventListener('mouseenter', function() {
+ const colIndex = Array.from(this.parentNode.children).indexOf(this);
+ const row = this.parentNode;
+ const isHeader = this.tagName === 'TH';
+
+ // Only update if we're entering a different column or row
+ if (colIndex !== currentCol || row !== currentRow) {
+ // Remove previous highlights
+ table.querySelectorAll('.highlight-col').forEach(el => {
+ el.classList.remove('highlight-col');
+ });
+ table.querySelectorAll('.highlight-row').forEach(el => {
+ el.classList.remove('highlight-row');
+ });
+
+ // Add new column highlights (only tbody cells)
+ table.querySelector('tbody').querySelectorAll('tr').forEach(r => {
+ if (r.children[colIndex]) {
+ r.children[colIndex].classList.add('highlight-col');
+ }
+ });
+
+ // Add row highlight (only for tbody rows, not header)
+ if (!isHeader) {
+ row.classList.add('highlight-row');
+ }
+
+ currentCol = colIndex;
+ currentRow = row;
+ }
+ });
+ });
+
+ // Clear highlights when leaving the table entirely
+ table.addEventListener('mouseleave', function() {
+ table.querySelectorAll('.highlight-col').forEach(el => {
+ el.classList.remove('highlight-col');
+ });
+ table.querySelectorAll('.highlight-row').forEach(el => {
+ el.classList.remove('highlight-row');
+ });
+ currentCol = -1;
+ currentRow = null;
+ });
+</script>
+
+</html>
diff --git a/src/parts/start.html b/src/parts/start.html
new file mode 100644
index 0000000..d374a68
--- /dev/null
+++ b/src/parts/start.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">
+
+
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+
+ <title> \ No newline at end of file
diff --git a/src/parts/start2.html b/src/parts/start2.html
new file mode 100644
index 0000000..0923a78
--- /dev/null
+++ b/src/parts/start2.html
@@ -0,0 +1,107 @@
+</title>
+
+ <link rel="icon" href="/favicon.ico">
+ <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+
+
+ <style>
+ html {
+ color: white;
+ background: #141414;
+ font-family: sans-serif;
+ }
+ td {
+ padding: 3px 6px;
+ background: #181818;
+ border-radius: 3px;
+ border: #ffffff0d solid 1px;
+ }
+ th {
+ border-radius: 3px;
+ padding: 5px 3px;
+ cursor: pointer;
+ font-weight: bold;
+ }
+ td.highlight-col,
+ tr.highlight-row td {
+ background: #202020;
+ }
+ thead {
+ top: 0;
+ position: sticky;
+ background: #141414;
+ outline: #fff1 solid 1px 1px 1px 3px;
+ }
+ .main-container {
+ width: max-content;
+ display: block;
+ margin: auto;
+ }
+ .header-tr {
+ border-bottom: solid 1px #fff3;
+ }
+ .current-sort {
+ background: #424;
+ }
+ .prelude {
+ background: #ffffff0c;
+ padding: 20px;
+ margin-bottom: 5px;
+ border-radius: 4px;
+ display: flex;
+ }
+ .prelude p {
+ margin: 2px 0px;
+ }
+ .prelude b {
+
+ }
+ svg {
+ filter: invert();
+ display: block;
+ margin: auto;
+ }
+ h1 {
+ font-size: 16px;
+ margin-top: 3px;
+ margin-bottom: 10px;
+ }
+ h6 {
+ font-family: monospace;
+ font-size: 10px;
+ }
+ a {
+ color: #c0f;
+ text-underline: 0px;
+ }
+ .logo-section {
+ width: min-content;
+ margin-right: 15px;
+ }
+ </style>
+
+
+</head>
+
+
+
+<body>
+
+ <div class="main-container">
+ <div class="prelude">
+ <div class="logo-section">
+ <a href="https://knektlyd.no/">
+ <svg width="110px" viewBox="0 0 123 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+ <g id="_3a" serif:id="3a">
+ <path id="path29537-1" d="M32.013,29.14L26.457,35.565L20.22,30.123L20.22,19.276L11.868,19.276L11.868,30.236L4.271,35.641L4.271,7.332L0,7.332L4.346,1.436L11.868,1.436L11.868,18.369L20.22,12.775L20.22,4.838L27.704,0L27.704,13.307L22.017,17.116L27.704,17.116L27.704,29.14L32.013,29.14Z" style="fill-rule:nonzero;"/>
+ <path id="path29539-2" d="M57.827,29.14L53.783,35.565L47.282,29.972L47.282,15.118L40.554,15.118L40.554,29.14L44.561,29.14L40.554,35.565L34.016,29.972L34.016,11.906L40.517,8.655L40.517,14.287L46.224,8.655L53.783,14.287L53.783,29.14L57.827,29.14Z" style="fill-rule:nonzero;"/>
+ <path id="path29541-7" d="M77.783,20.334L65.953,25.058L65.953,29.14L75.591,29.14L71.093,35.565L59.339,31.408L59.339,15.118L68.032,8.655L77.783,14.06L77.783,20.334ZM71.811,18.622L71.811,15.118L65.953,15.118L65.953,20.976L71.811,18.622Z" style="fill-rule:nonzero;"/>
+ <path id="path29543-0" d="M104.503,29.178L100.459,35.641L93.883,30.009L93.883,21.543L87.609,21.543L93.883,15.118L87.231,15.118L87.231,29.14L91.275,29.14L87.231,35.565L80.768,29.972L80.768,3.25L87.231,0L87.231,14.287L91.464,10.091L100.459,10.091L94.827,15.836L100.459,20.712L100.459,29.178L104.503,29.178Z" style="fill-rule:nonzero;"/>
+ <path id="path29545-9" d="M121.889,10.091L118.261,15.118L113.536,15.118L113.536,29.178L117.58,29.178L113.536,35.565L107.073,29.972L107.073,15.118L102.5,15.118L113.536,4.044L113.536,10.091L121.889,10.091Z" style="fill-rule:nonzero;"/>
+ </g>
+ </svg>
+ </a>
+ <h1 style="width:max-content;margin:auto;">Lydrapport</h1>
+ <h6 style="width:max-content;margin:auto;">Version 1.4</h6>
+ </div>
+ <div class="info-section">