dm5wk/band-plan-web
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

create toggle buttons automatically for columns

Browse source
This commit is contained in:
Wolfgang 2024-05-15 12:31:36 +02:00
parent 50e58f1628
commit 77cfbf0173
1 changed files with 16 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
band-plan.html
View file

@ -13,6 +13,9 @@
body>div {
padding-bottom: 1em;
}
div#togglebuttons>button {
margin: 0 0.1em;
}
</style>
</head>
@ -107,9 +110,17 @@ body>div {
table.download("pdf", path.basename(document.getElementById('sel_plan').value, '.yml') + '.pdf', {}, download_range);
});
//["band", "frequency", "bandwidth", "mode", "description"].forEach((col) => {
table.getColumns().forEach((col) => {
document.getElementById("toggle-" + col).addEventListener("click", () => {
table.toggleColumn(col);
table.on("tableBuilt", () => {
var div_togglebuttons = document.getElementById("togglebuttons");
div_togglebuttons.innerHTML = "<span>Toggle column:</span>";
table.getColumns().forEach((col) => {
let col_name = col.getField();
let b = document.createElement("button");
b.innerText = col_name;
b.addEventListener("click", () => {
table.toggleColumn(col_name);
});
div_togglebuttons.appendChild(b);
});
});
document.getElementById("error").innerText = "";
@ -122,20 +133,14 @@ body>div {
</script>
<div>
<form name="selection">
<label>plan:
<label>Plan:
<input name="plan" id="sel_plan" type="text" value="/plan-de.yml">
</label>
<button onclick="update_plan()">Change plan</button>
<button id="print">Print plan</button>
</form>
</div>
<div>
<button id="toggle-band">Toggle band</button>
<button id="toggle-frequency">Toggle frequency</button>
<button id="toggle-bandwidth">Toggle bandwidth</button>
<button id="toggle-mode">Toggle mode</button>
<button id="toggle-description">Toggle description</button>
</div>
<div id="togglebuttons"></div>
<div>
Use filter with "!" as "not".
</div>