326 lines
9.4 KiB
HTML
326 lines
9.4 KiB
HTML
<!-- SPDX-License-Identifier: Beerware -->
|
|
<!-- Wolfgang Kroener wrote this file. As long as you retain this notice -->
|
|
<!-- you can do whatever you want with this stuff. If we meet some day, -->
|
|
<!-- and you think this stuff is worth it, you can buy me a beer in return -->
|
|
|
|
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>band plan</title>
|
|
<style>
|
|
body>div {
|
|
padding-bottom: 1em;
|
|
}
|
|
div#togglebuttons>button {
|
|
margin: 0 0.1em;
|
|
}
|
|
div>label {
|
|
padding-right: 1em;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">
|
|
<script src="https://unpkg.com/browser-cjs/require.min.js"></script>
|
|
<script src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>
|
|
<script src="https://unpkg.com/jspdf/dist/jspdf.umd.min.js"></script>
|
|
<script src="https://unpkg.com/jspdf-autotable/dist/jspdf.plugin.autotable.min.js"></script>
|
|
<script>
|
|
// require in browser-cjs
|
|
// eslint-disable-next-line no-undef
|
|
const yaml = require('https://unpkg.com/js-yaml/dist/js-yaml.min.js');
|
|
// eslint-disable-next-line no-undef
|
|
const Measures = require('https://unpkg.com/measures/dist/measures.cjs.js');
|
|
// eslint-disable-next-line no-undef
|
|
const path = require('https://unpkg.com/path-browserify/index.js');
|
|
|
|
function create_element_link(element, href) {
|
|
element.addEventListener("click", () => {
|
|
var lnk = document.createElement('a');
|
|
|
|
if (typeof href === "function") {
|
|
lnk.href = href();
|
|
} else {
|
|
lnk.href = href;
|
|
}
|
|
|
|
if (document.createEvent) {
|
|
let e = document.createEvent("MouseEvents");
|
|
e.initMouseEvent("click", true, true, window,
|
|
0, 0, 0, 0, 0, false, false, false,
|
|
false, 0, null);
|
|
lnk.dispatchEvent(e);
|
|
} else if (lnk.fireEvent) {
|
|
lnk.fireEvent("onclick");
|
|
}
|
|
});
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
location.search.substr(1).split("&").forEach((param) => {
|
|
let p = param.split("=");
|
|
let key = p[0];
|
|
if (key === "base") {
|
|
document.getElementById("base_plan").value = decodeURIComponent(p[1]);
|
|
}
|
|
if (key === "ext") {
|
|
document.getElementById("extension_plan").value = decodeURIComponent(p[1]);
|
|
}
|
|
});
|
|
update_plan();
|
|
|
|
document.getElementById("base_plan").addEventListener("keydown", (event) => {
|
|
if (event.key === 'Enter') {
|
|
update_plan()
|
|
}
|
|
});
|
|
|
|
create_element_link(document.getElementById("create_link"), function() {
|
|
return window.location.href.split('?')[0] + '?'
|
|
+ "base=" + document.getElementById("base_plan").value
|
|
+ "&ext=" + document.getElementById("extension_plan").value;
|
|
});
|
|
});
|
|
|
|
// eslint-disable-next-line no-unused-vars
|
|
function filter_with_not(headerValue, rowValue, rowData, filterParams){
|
|
if (headerValue.startsWith('!')) {
|
|
// filter not
|
|
const str = headerValue.slice(1);
|
|
if ((str.length > 0) && (typeof rowValue !== "undefined")) {
|
|
return !rowValue.toString().includes(str);
|
|
} else {
|
|
return true;
|
|
}
|
|
} else {
|
|
// filter normal
|
|
if (typeof rowValue !== "undefined") {
|
|
return rowValue.toString().includes(headerValue);
|
|
} else {
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
|
|
function display_error(e) {
|
|
let t = document.getElementById("data-table");
|
|
t.innerHTML = "";
|
|
t.removeAttribute("class");
|
|
console.log(e);
|
|
document.getElementById("error").innerText = e;
|
|
}
|
|
|
|
function isInRange(number, min, max) {
|
|
return number >= min && number <= max;
|
|
}
|
|
|
|
function add_power(ext, row) {
|
|
for (const [key, value] of Object.entries(ext.power)) {
|
|
row["power_" + key] = value;
|
|
}
|
|
}
|
|
|
|
function update_table(bases, extensions) {
|
|
var tdata = [];
|
|
var base_header = {};
|
|
var ext_header = {};
|
|
|
|
// first, fill base_header
|
|
bases.forEach((base) => {
|
|
if ((typeof base.header !== "undefined") && base.header) {
|
|
base_header = structuredClone(base);
|
|
}
|
|
});
|
|
|
|
// then fill tdata
|
|
bases.forEach((base) => {
|
|
if ((typeof base.header === "undefined") || (base.header == false)) {
|
|
let row = {};
|
|
|
|
// first, fill ext_header
|
|
extensions.forEach((ext) => {
|
|
if ((typeof ext.header !== "undefined") && ext.header) {
|
|
ext_header = structuredClone(ext);
|
|
}
|
|
});
|
|
|
|
// then fill tdata
|
|
let already_added = false;
|
|
extensions.forEach((ext) => {
|
|
if ((typeof ext.header === "undefined") || (ext.header == false)) {
|
|
base_header.columns.forEach((col) => {
|
|
if (base_header.columns.includes(col)) {
|
|
row[col] = base[col];
|
|
}
|
|
});
|
|
|
|
let [ext_start, ext_end] = ext.frequency.split('-');
|
|
if (typeof base.frequency === "number") {
|
|
// at single frequency
|
|
if (isInRange(base.frequency, ext_start, ext_end)) {
|
|
add_power(ext, row);
|
|
} else {
|
|
return;
|
|
}
|
|
} else {
|
|
// frequeny range
|
|
let [base_start, base_end] = base.frequency.split('-');
|
|
if (isInRange(base_start, ext_start, ext_end) && isInRange(base_end, ext_start, ext_end)) {
|
|
// base range is inside of ext range or the same
|
|
add_power(ext, row);
|
|
} else {
|
|
// base range is split by ext range
|
|
if (isInRange(ext_start, base_start, base_end)) {
|
|
// base range starts below ext range
|
|
let r = structuredClone(row);
|
|
let start = ext_start;
|
|
let end = base_end < ext_end ? base_end : ext_end;
|
|
r["frequency"] = start + '-' + end;
|
|
add_power(ext, r);
|
|
tdata.push(r);
|
|
already_added = true;
|
|
} else if (isInRange(ext_end, base_start, base_end)) {
|
|
// ext range starts below base range
|
|
let r = structuredClone(row);
|
|
let start = base_start;
|
|
let end = ext_end;
|
|
r["frequency"] = start + '-' + end;
|
|
add_power(ext, r);
|
|
tdata.push(r);
|
|
already_added = true;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
if (!already_added) {
|
|
tdata.push(row);
|
|
}
|
|
already_added = false;
|
|
}
|
|
});
|
|
|
|
// require in tabular-tables
|
|
// eslint-disable-next-line no-undef
|
|
var table = new Tabulator("#data-table", {
|
|
layout: "fitDataTable",
|
|
initialSort: [
|
|
{column: "frequency", dir: "asc"},
|
|
{column: "band", dir: "desc"},
|
|
],
|
|
selectableRows: true,
|
|
data: tdata,
|
|
autoColumns:"full",
|
|
// add filter for all columns
|
|
autoColumnsDefinitions: function(definitions){
|
|
definitions.forEach((column) => {
|
|
if (column.field == "band") {
|
|
column.sorter = function(a, b) {
|
|
return parseFloat(new Measures().from(a).to('m')) - parseFloat(new Measures().from(b).to('m'));
|
|
}
|
|
}
|
|
|
|
if (column.field == "frequency") {
|
|
column.sorter = "number";
|
|
}
|
|
|
|
column.headerFilter = "input";
|
|
column.headerFilterFunc = filter_with_not;
|
|
if (typeof base_header.titles[column.field] !== "undefined") {
|
|
column.title = base_header.titles[column.field];
|
|
}
|
|
if (typeof ext_header.titles[column.field] !== "undefined") {
|
|
column.title = ext_header.titles[column.field];
|
|
}
|
|
});
|
|
|
|
return definitions;
|
|
},
|
|
});
|
|
|
|
document.getElementById("download").addEventListener("click", () => {
|
|
let download_range = "all";
|
|
if (table.getSelectedRows().length > 0) {
|
|
download_range = "selected";
|
|
}
|
|
table.download(
|
|
"pdf",
|
|
path.basename(document.getElementById('base_plan').value, '.yml') + '.pdf',
|
|
{ orientation:"portrait" },
|
|
download_range);
|
|
});
|
|
|
|
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 = "";
|
|
}
|
|
|
|
function update_plan() {
|
|
Promise.all([
|
|
fetch(document.getElementById('base_plan').value, { mode: 'cors' }),
|
|
fetch(document.getElementById('extension_plan').value, { mode: 'cors' }),
|
|
]).then((res) => {
|
|
res.forEach((r) => {
|
|
if (!r.ok) {
|
|
throw new Error(r.status);
|
|
}
|
|
});
|
|
Promise.all([res[0].text(), res[1].text()]).then((d) => {
|
|
try {
|
|
update_table(yaml.load(d[0]),yaml.load(d[1]));
|
|
} catch (e) {
|
|
display_error(e);
|
|
}
|
|
}).catch((e) => {
|
|
display_error(e);
|
|
});
|
|
}).catch((e) => {
|
|
display_error(e);
|
|
});
|
|
}
|
|
|
|
// used in button
|
|
// eslint-disable-next-line no-unused-vars
|
|
function help() {
|
|
alert(
|
|
'Plan: use your own yml file for a band plan, URLs are possible, CORS needs to be allowed for the file\n'
|
|
+ 'Filter rows with text in column headings, use filter starting with "!" as exclusion\n'
|
|
+ 'Download list: saves .pdf of the current list\n'
|
|
+ 'Selection of rows with mouse possible'
|
|
);
|
|
}
|
|
</script>
|
|
<div>
|
|
<label>Base Plan:
|
|
<input name="plan" id="base_plan" type="text" value="band-plan-iaru_r1_hf.yml">
|
|
</label>
|
|
<label>Extension:
|
|
<input name="plan" id="extension_plan" type="text" value="band-plan-de.yml">
|
|
</label>
|
|
<button onclick="update_plan()">Change plans</button>
|
|
</div>
|
|
<div id="togglebuttons"></div>
|
|
<div>
|
|
<button id="download">Download list</button>
|
|
<button id="create_link">Create link</button>
|
|
<button onclick="help()">Help</button>
|
|
</div>
|
|
<div id="data-table"></div>
|
|
<div id="error"></div>
|
|
</body>
|
|
</html>
|