mirror of
https://github.com/langhuihui/monibuca.git
synced 2025-12-24 13:48:04 +08:00
115 lines
3.1 KiB
HTML
115 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>{{.Title}}</title>
|
|
{{template "css" .}}
|
|
<style type="text/css">
|
|
</style>
|
|
</head>
|
|
<body>
|
|
{{template "header" .}}
|
|
<div id="top">
|
|
<table id="toptable">
|
|
<thead>
|
|
<tr>
|
|
<th id="flathdr1">Flat</th>
|
|
<th id="flathdr2">Flat%</th>
|
|
<th>Sum%</th>
|
|
<th id="cumhdr1">Cum</th>
|
|
<th id="cumhdr2">Cum%</th>
|
|
<th id="namehdr">Name</th>
|
|
<th>Inlined?</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="rows"></tbody>
|
|
</table>
|
|
</div>
|
|
{{template "script" .}}
|
|
<script>
|
|
function makeTopTable(total, entries) {
|
|
const rows = document.getElementById('rows');
|
|
if (rows == null) return;
|
|
|
|
// Store initial index in each entry so we have stable node ids for selection.
|
|
for (let i = 0; i < entries.length; i++) {
|
|
entries[i].Id = 'node' + i;
|
|
}
|
|
|
|
// Which column are we currently sorted by and in what order?
|
|
let currentColumn = '';
|
|
let descending = false;
|
|
sortBy('Flat');
|
|
|
|
function sortBy(column) {
|
|
// Update sort criteria
|
|
if (column == currentColumn) {
|
|
descending = !descending; // Reverse order
|
|
} else {
|
|
currentColumn = column;
|
|
descending = (column != 'Name');
|
|
}
|
|
|
|
// Sort according to current criteria.
|
|
function cmp(a, b) {
|
|
const av = a[currentColumn];
|
|
const bv = b[currentColumn];
|
|
if (av < bv) return -1;
|
|
if (av > bv) return +1;
|
|
return 0;
|
|
}
|
|
entries.sort(cmp);
|
|
if (descending) entries.reverse();
|
|
|
|
function addCell(tr, val) {
|
|
const td = document.createElement('td');
|
|
td.textContent = val;
|
|
tr.appendChild(td);
|
|
}
|
|
|
|
function percent(v) {
|
|
return (v * 100.0 / total).toFixed(2) + '%';
|
|
}
|
|
|
|
// Generate rows
|
|
const fragment = document.createDocumentFragment();
|
|
let sum = 0;
|
|
for (const row of entries) {
|
|
const tr = document.createElement('tr');
|
|
tr.id = row.Id;
|
|
sum += row.Flat;
|
|
addCell(tr, row.FlatFormat);
|
|
addCell(tr, percent(row.Flat));
|
|
addCell(tr, percent(sum));
|
|
addCell(tr, row.CumFormat);
|
|
addCell(tr, percent(row.Cum));
|
|
addCell(tr, row.Name);
|
|
addCell(tr, row.InlineLabel);
|
|
fragment.appendChild(tr);
|
|
}
|
|
|
|
rows.textContent = ''; // Remove old rows
|
|
rows.appendChild(fragment);
|
|
}
|
|
|
|
// Make different column headers trigger sorting.
|
|
function bindSort(id, column) {
|
|
const hdr = document.getElementById(id);
|
|
if (hdr == null) return;
|
|
const fn = function() { sortBy(column) };
|
|
hdr.addEventListener('click', fn);
|
|
hdr.addEventListener('touch', fn);
|
|
}
|
|
bindSort('flathdr1', 'Flat');
|
|
bindSort('flathdr2', 'Flat');
|
|
bindSort('cumhdr1', 'Cum');
|
|
bindSort('cumhdr2', 'Cum');
|
|
bindSort('namehdr', 'Name');
|
|
}
|
|
|
|
viewer(new URL(window.location.href), {{.Nodes}});
|
|
makeTopTable({{.Total}}, {{.Top}});
|
|
</script>
|
|
</body>
|
|
</html>
|