diff options
| -rw-r--r-- | src/parts/end.html | 96 | ||||
| -rw-r--r-- | src/parts/start.html | 9 | ||||
| -rw-r--r-- | src/parts/start2.html | 107 |
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"> |