add css support

band-plan.html

@@ -63,28 +63,30 @@ div>label {
 			location.search.substr(1).split("&").forEach((param) => {
 				let p = param.split("=");
 				let key = p[0];
-				if (key === "base") {
+				["base", "extension", "css"].forEach((id) => {
-					document.getElementById("base_plan").value = decodeURIComponent(p[1]);
+					if (key === id) {
-				}
+						document.getElementById(id + "_input").value = decodeURIComponent(p[1]);
-				if (key === "ext") {
+					}
-					document.getElementById("extension_plan").value = decodeURIComponent(p[1]);
+				});
-				}
 			});
-			update_plan();
+			update_inputs();
 
-			["base", "extension"].forEach((id) => {
+			["base", "extension", "css"].forEach((id) => {
-				create_element_link(document.getElementById("download_" + id), document.getElementById(id + "_plan").value);
+				// download buttons
-				document.getElementById("download_" + id).addEventListener("keydown", (event) => {
+				create_element_link(document.getElementById("download_" + id), document.getElementById(id + "_input").value);
+				// enter on input fields
+				document.getElementById(id + "_input").addEventListener("keydown", (event) => {
 					if (event.key === "Enter") {
-						update_plan()
+						update_inputs()
 					}
 				});
 			});
 
 			create_element_link(document.getElementById("create_link"), function() {
 				return window.location.href.split("?")[0] + "?"
-					+ "base=" + document.getElementById("base_plan").value
+					+ "base=" + document.getElementById("base_input").value
-					+ "&ext=" + document.getElementById("extension_plan").value;
+					+ "&extension=" + document.getElementById("extension_input").value;
+					+ "&css=" + document.getElementById("css_input").value;
 			});
 		});
 
@@ -250,10 +252,35 @@ div>label {
 						if (typeof header["extension"].titles[column.field] !== "undefined") {
 							column.title = header["extension"].titles[column.field];
 						}
+
+						// add css styles for formatting based on cell values
+						// e. g. cell-bandwidth-2700
+						// list like cw, narrow will be split to two entries
+						column.formatter = function(cell) {
+							let f = String(cell.getField()).toLowerCase().replace(/[\W]+/g, " ").replaceAll(" ", "_");
+							let v = String(cell.getValue()).toLowerCase().replace(/[^\w,]+/g, " ").replaceAll(" ", "_");
+							v.split(",").forEach((s) => {
+								cell.getElement().classList.add("cell-" + f + "-" + s.replace(/^_+|_+$/g, ""));
+							});
+							cell.getElement().classList.add("cell-" + f);
+							return cell.getValue();
+						}
 					});
 
 					return definitions;
 				},
+				// add css styles for formatting based on cell data
+				// e. g. row-mode-cw, row-bandwidth-200
+				// list like cw, narrow will be split to two entries
+				rowFormatter: function(row){
+					for (const [key, value] of Object.entries(row.getData())) {
+						let k = String(key).toLowerCase().replace(/[\W]+/g, " ").replaceAll(" ", "_");
+						let v = String(value).toLowerCase().replace(/[^\w,]+/g, " ").replaceAll(" ", "_");
+						v.split(",").forEach((s) => {
+							row.getElement().classList.add("row-" + k + "-" + s.replace(/^_+|_+$/g, ""));
+						});
+					}
+				},
 			});
 
 			document.getElementById("download").addEventListener("click", () => {
@@ -263,7 +290,7 @@ div>label {
 				}
 				table.download(
 					"pdf",
-					path.basename(document.getElementById("base_plan").value, ".yml") + ".pdf",
+					path.basename(document.getElementById("base_input").value, ".yml") + ".pdf",
 					{ orientation:"portrait" },
 					download_range);
 			});
@@ -284,10 +311,10 @@ div>label {
 			document.getElementById("error").innerText = "";
 		}
 
-		function update_plan() {
+		function update_inputs() {
 			Promise.all([
-				fetch(document.getElementById("base_plan").value, {	mode: "cors" }),
+				fetch(document.getElementById("base_input").value, {	mode: "cors" }),
-				fetch(document.getElementById("extension_plan").value, {	mode: "cors" }),
+				fetch(document.getElementById("extension_input").value, {	mode: "cors" }),
 			]).then((res) => {
 				res.forEach((r) => {
 					if (!r.ok) {
@@ -306,35 +333,54 @@ div>label {
 			}).catch((e) => {
 				display_error(e);
 			});
+
+			// add stylesheet, clear before adding
+			let el = document.getElementById("link_css");
+			if (el !== null) {
+				el.remove();
+			}
+			let href = document.getElementById("css_input").value;
+			if (href !== "") {
+				let link = document.createElement("link");
+				link.type = "text/css";
+				link.rel = "stylesheet";
+				link.href = href;
+				link.id = "link_css";
+				document.head.appendChild(link);
+			}
 		}
 
 		// used in button
 		// eslint-disable-next-line no-unused-vars
 		function help() {
 			alert(
-				"Base plan and Extension plan: use your own yml file for a band plan, URLs are possible, CORS needs to be allowed for the files, download standard files for examples\n"
+				"Base plan, extension plan and css: use your own files for the band plan and css, URLs are possible, CORS needs to be allowed for the files, download standard files for examples\n"
 				+ "Filter rows with text in column headings, use filter starting with \"!\" as exclusion\n"
 				+ "Download list: saves .pdf of the current list (selection of rows apply)\n"
 				+ "Selection of rows with mouse possible\n"
-				+ "Download plans: get the yml plans\n"
+				+ "Download plans/css: get the yml and css files\n"
-				+ "Create link: get link for currently selected plans for bookmarking\n"
+				+ "Create link: get link for currently selected plans and css for bookmarking\n"
 			);
 		}
 	</script>
 	<div>
 	<label>Base Plan:
-		<input name="plan" id="base_plan" type="text" value="band-plan-iaru_r1_hf.yml">
+		<input id="base_input" 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">
+		<input id="extension_input" type="text" value="band-plan-de.yml">
 	</label>
-	<button onclick="update_plan()">Change plans</button>
+	<label>CSS:
+		<input id="css_input" type="text" value="standard.css">
+	</label>
+	<button onclick="update_inputs()">Update</button>
 	</div>
 	<div id="togglebuttons"></div>
 	<div> 
 		<button id="download">Download list</button>
 		<button id="download_base">Download base plan</button>
 		<button id="download_extension">Download extension plan</button>
+		<button id="download_css">Download css file</button>
 		<button id="create_link">Create link</button>
 		<button onclick="help()">Help</button>
 	</div>

standard.css

@@ -0,0 +1,25 @@
+div.cell-bandwidth-20 {
+	background-color: Salmon !important;
+}
+div.cell-bandwidth-200 {
+	background-color: LightPink !important;
+}
+div.cell-bandwidth-500 {
+	background-color: LightGreen !important;
+}
+div.cell-bandwidth-2700 {
+	background-color: LightYellow !important;
+}
+div.cell-bandwidth-6000 {
+	background-color: LightBlue !important;
+}
+div.cell-bandwidth-unrestricted {
+	background-color: LightGray !important;
+}
+div.cell-bandwidth-undefined {
+	background-color: Red !important;
+}
+div.tabulator-cell[class*='contest_preferred'] {
+	background-color: Gold !important;
+}
+