diff --git a/band-plan.html b/band-plan.html index 3c1d3a2..e2b7821 100644 --- a/band-plan.html +++ b/band-plan.html @@ -58,8 +58,21 @@ div#togglebuttons>button { } } + function display_error(e) { + let t = document.getElementById("data-table"); + t.innerHTML = ""; + t.removeAttribute("class"); + console.log(e); + document.getElementById("error").innerText = e; + } + function update_plan() { - fetch(document.getElementById('sel_plan').value).then((response) => { + fetch(document.getElementById('sel_plan').value, { + mode: 'cors' + }).then((response) => { + if (!response.ok) { + throw new Error(response.status); + } return response.text(); }).then((data) => { try { @@ -102,47 +115,58 @@ div#togglebuttons>button { {title: "description", field: "description", headerFilter: "input", headerFilterFunc: filter_with_not}, ], }); - document.getElementById("print").addEventListener("click", () => { + + document.getElementById("download").addEventListener("click", () => { let download_range = "all"; if (table.getSelectedRows().length > 0) { download_range = "selected"; } table.download("pdf", path.basename(document.getElementById('sel_plan').value, '.yml') + '.pdf', {}, download_range); }); - //["band", "frequency", "bandwidth", "mode", "description"].forEach((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); + + 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); }); - div_togglebuttons.appendChild(b); }); - }); - document.getElementById("error").innerText = ""; - } catch (e) { - console.log(e); - document.getElementById("error").innerText = e; - } + document.getElementById("error").innerText = ""; + } 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> - <form name="selection"> - <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> + <label>Plan: + <input name="plan" id="sel_plan" type="text" value="plan-de.yml"> + </label> + <button onclick="update_plan()">Change plan</button> </div> <div id="togglebuttons"></div> <div> - Use filter with "!" as "not". + <button id="download">Download list</button> + <button onclick="help()">Help</button> </div> <div id="data-table"></div> <div id="error"></div>