From 5566a716925d7ae4b393ec2287ab0677c8c14e30 Mon Sep 17 00:00:00 2001
From: dm5wk <git@dm5wk.de>
Date: Thu, 30 May 2024 17:57:12 +0200
Subject: [PATCH] save to html file with css styles

---
 band-plan.html | 58 ++++++++++++++++++++++++++++++++++++++++++++------
 standard.css   | 27 ++++++++++++++++++++++-
 2 files changed, 77 insertions(+), 8 deletions(-)
diff --git a/band-plan.html b/band-plan.html
index 02e7c37..7040efc 100644
--- a/band-plan.html
+++ b/band-plan.html
@@ -26,8 +26,12 @@ div>label {
 	<link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">
 	<script src="https://unpkg.com/browser-cjs/require.min.js"></script>
 	<script src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>
+	<!--
+	for pdf saving
 	<script src="https://unpkg.com/jspdf/dist/jspdf.umd.min.js"></script>
-	<script src="https://unpkg.com/jspdf-autotable/dist/jspdf.plugin.autotable.min.js"></script>
+	<script src="https://unpkg.com/dompurify/dist/purify.min.js"></script>
+	<script src="https://unpkg.com/html2canvas-pro/dist/html2canvas-pro.min.js"></script>
+	-->
 	<script>
 		// require in browser-cjs
 		// eslint-disable-next-line no-undef
@@ -230,7 +234,45 @@ div>label {
 				],
 				selectableRows: true,
 				data: tdata,
-				autoColumns:"full",
+				autoColumns: "full",
+				downloadEncoder: function(fileContents, mimeType){
+					// add header and footer for a complete html file
+					let header = "<!doctype html><html><head><style>";
+					for (let i = 0; i < document.styleSheets.length; i++) {
+						let css = document.styleSheets[i];
+						if (css.ownerNode.id === "link_css") {
+							for (let j = 0; j < css.cssRules.length; j++) {
+								header += css.cssRules[j].cssText + "\n";
+							}
+						}
+					}
+					header += "</style></head><body>";
+					let footer = "</body></html>";
+
+					// add footer for horizontal line
+					let t = document.createElement("div");
+					t.insertAdjacentHTML("beforeend", fileContents);
+					t.firstChild.insertAdjacentHTML("beforeend", "<tfoot><tr><td colspan=\"100%\"></td></tr></tfoot>");
+					fileContents = t.innerHTML;
+
+					fileContents = fileContents.replaceAll(">undefined<", "><");
+
+					// also save as pdf
+					// currently scaling is wrong, no idea how to fix
+					//const doc = new jspdf.jsPDF("p", "mm", "a4");
+					//doc.html(header + fileContents + footer, {
+					//	callback: (doc) => {
+					//		doc.save();
+					//	},
+					//	filename: path.basename(document.getElementById("base_input").value, ".yml") + ".pdf",
+					//	autoPaging: "text",
+					//	html2canvas: {
+					//		scale: 0.5,
+					//	},
+					//});
+					return new Blob([header, fileContents, footer], {type:mimeType});
+				},
+
 				// add filter for all columns
 				autoColumnsDefinitions: function(definitions){
 					definitions.forEach((column) => {
@@ -294,11 +336,13 @@ div>label {
 				if (table.getSelectedRows().length > 0) {
 					download_range = "selected";
 				}
-				table.download(
-					"pdf",
-					path.basename(document.getElementById("base_input").value, ".yml") + ".pdf",
-					{ orientation:"portrait" },
-					download_range);
+
+				table.downloadToTab(
+					"html",
+					path.basename(document.getElementById("base_input").value, ".yml") + ".html",
+					{ },
+					download_range,
+				);
 			});
 
 			table.on("tableBuilt", () => {
diff --git a/standard.css b/standard.css
index a0904d8..398256c 100644
--- a/standard.css
+++ b/standard.css
@@ -16,7 +16,7 @@
 .cell-bandwidth-unrestricted {
 	background-color: color-mix(in srgb, Gray 50%, transparent);
 }
-.row-bandwidth-undefined>.tabulator-cell {
+.row-bandwidth-undefined > .tabulator-cell, tr:has(.cell-bandwidth-undefined) > td {
 	background-color: color-mix(in srgb, Red 50%, transparent);
 }
 .cell-frequency:not(.cell-frequency-is_range) {
@@ -25,3 +25,28 @@
 [class*='contest_preferred'] {
 	background-color: color-mix(in srgb, Gold 30%, transparent);
 }
+
+/* table settings for printing */
+:root {
+	--border: 0.5px solid;
+}
+table {
+	border-spacing: 0;
+}
+th, td {
+	border-left: var(--border);
+}
+th:last-child, td:last-child {
+	border-right: var(--border);
+}
+th {
+	border-top: var(--border);
+	border-bottom: var(--border);
+}
+tr:nth-child(even) {
+    background-color: color-mix(in srgb, Gray 10%, transparent);;
+}
+tfoot > tr > td {
+	padding-top: 0;
+	border-bottom: var(--border);
+}
