help, error handling, layout

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", () => {
+						table.on("tableBuilt", () => {
-						var div_togglebuttons = document.getElementById("togglebuttons");
+							var div_togglebuttons = document.getElementById("togglebuttons");
-						div_togglebuttons.innerHTML = "<span>Toggle column:</span>";
+							div_togglebuttons.innerHTML = "<span>Toggle column:</span>";
-						table.getColumns().forEach((col) => {
+							table.getColumns().forEach((col) => {
-							let col_name = col.getField();
+								let col_name = col.getField();
-							let b = document.createElement("button");
+								let b = document.createElement("button");
-							b.innerText = col_name;
+								b.innerText = col_name;
-							b.addEventListener("click", () => {
+								b.addEventListener("click", () => {
-								table.toggleColumn(col_name);
+									table.toggleColumn(col_name);
+								});
+								div_togglebuttons.appendChild(b);
 							});
-							div_togglebuttons.appendChild(b);
 						});
-					});
+						document.getElementById("error").innerText = "";
-					document.getElementById("error").innerText = "";
+					} catch (e) {
-				} catch (e) {
+						display_error(e);
-					console.log(e);
+					}
-					document.getElementById("error").innerText = 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:
-			<label>Plan:
+			<input name="plan" id="sel_plan" type="text" value="plan-de.yml">
-				<input name="plan" id="sel_plan" type="text" value="plan-de.yml">
+		</label>
-			</label>
+		<button onclick="update_plan()">Change plan</button>
-			<button onclick="update_plan()">Change plan</button>
-			<button id="print">Print plan</button>
-		</form>
 	</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>