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,14 +115,15 @@ 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>";
@@ -125,24 +139,34 @@ div#togglebuttons>button {
 						});
 						document.getElementById("error").innerText = "";
 					} catch (e) {
-					console.log(e);
-					document.getElementById("error").innerText = 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>
 	</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>