add more infos and a demo location

README.md

@@ -1,3 +1,13 @@
 # band-plan-web
 
-Create a customizable band plan for amateur radio
+Create a customizable band plan for amateur radio
+
+Demo of the latest git version on [dm5wk.de](https://dm5wk.de/band-plan/).
+
+It is possible to
+- use an own plan in yaml format
+- toggle columns
+- filter rows
+- negate filter rows with "!"
+- select rows with the mouse
+- download the plan in pdf format

band-plan.html

@@ -13,6 +13,9 @@
 body>div {
 	padding-bottom: 1em;
 }
+div#togglebuttons>button {
+	margin: 0 0.1em;
+}
 </style>
 </head>
 
@@ -33,6 +36,12 @@ body>div {
 
 		document.addEventListener('DOMContentLoaded', () => {
 			update_plan();
+
+			document.getElementById("sel_plan").addEventListener("keydown", (event) => {
+				if (event.key === 'Enter') {
+					update_plan()
+				}
+			});
 		});
 
 		// eslint-disable-next-line no-unused-vars
@@ -55,8 +64,21 @@ body>div {
 			}
 		}
 
+		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 {
@@ -99,45 +121,58 @@ body>div {
 							{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.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 = "";
-				} 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>
-	</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>
+		<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>