From 165e98fb8708fc09870b62f9baa2f0c8d0b82a8b Mon Sep 17 00:00:00 2001
From: RunasSudo <runassudo@yingtongli.me>
Date: Sun, 10 Jan 2021 18:31:59 +1100
Subject: [PATCH] Add printable reports

---
 README.md       |   2 +
 html/index.html |  20 ++++++-
 html/index.js   | 149 +++++++++++++++++++++++++++++++++++++++++++++---
 html/main.css   |  15 +++--
 4 files changed, 171 insertions(+), 15 deletions(-)
diff --git a/README.md b/README.md
index 6fa9837..47d5d26 100644
--- a/README.md
+++ b/README.md
@@ -31,6 +31,8 @@ After preparing the BLT file, head to <https://yingtongli.me/rcv/>. Select the B
 
 By clicking *Show advanced options*, you can customise the options used for the count. A detailed explanation of the various options can be found [here](https://yingtongli.me/git/pyRCV2/about/docs/options.md).
 
+Once the count is complete, you can click *Print result* to generate a printable result report.
+
 ## Command line usage
 
 pyRCV2 may also be invoked as a command line application. Run `python -m pyRCV2 --help` to view help.
diff --git a/html/index.html b/html/index.html
index b594102..f3aa047 100644
--- a/html/index.html
+++ b/html/index.html
@@ -23,7 +23,7 @@
 		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w==" crossorigin="anonymous" />
 		<link rel="stylesheet" type="text/css" href="main.css?v=GITVERSION">
 	</head>
-	<body>
+	<body class="interactive">
 		<div class="menudiv">
 			<input type="file" id="bltFile">
 			<button onclick="clickCount()">Count</button>
@@ -214,9 +214,25 @@
 			</div>
 		</div>
 		
+		<div id="resultLogs1"></div>
+		
 		<table id="result"></table>
 		
-		<div id="resultLogs"></div>
+		<div id="resultLogs2"></div>
+		
+		<div id="printPane" style="display: none;">
+			<button onclick="printResult()">Print result</button>
+			<label>
+				Paper size:
+				<select id="selPaperSize">
+					<option value="A4" selected>A4</option>
+					<option value="A3">A3</option>
+					<option value="letter">US Letter</option>
+				</select>
+			</label>
+		</div>
+		
+		<div id="printWarning" style="display: none;">Printing directly from this page is not supported. Use the ‘Print result’ button to generate a printer-friendly report.</div>
 		
 		<script>
 			var pyRCV2version = 'GITVERSION';
diff --git a/html/index.js b/html/index.js
index 4157de9..80a8cbf 100644
--- a/html/index.js
+++ b/html/index.js
@@ -183,8 +183,10 @@ async function clickCount() {
 	let tblResults = document.getElementById('result');
 	tblResults.innerHTML = '';
 	let candMap = {}; // candidate name -> rows
-	let divResultLogs = document.getElementById('resultLogs');
-	divResultLogs.innerHTML = '';
+	let divResultLogs1 = document.getElementById('resultLogs1');
+	let divResultLogs2 = document.getElementById('resultLogs2');
+	divResultLogs1.innerHTML = '';
+	divResultLogs2.innerHTML = '';
 	
 	// Step election
 	let worker = new Worker('worker.js');
@@ -306,13 +308,13 @@ async function clickCount() {
 			} else {
 				elP.innerHTML += ' Counting using options <span style="font-family:monospace;">' + evt.data.options + '</span>.';
 			}
-			divResultLogs.appendChild(elP);
+			divResultLogs1.appendChild(elP);
 			
 			elP = document.createElement('p');
 			elP.innerText = 'Stage comments:';
-			divResultLogs.appendChild(elP);
+			divResultLogs2.appendChild(elP);
 			olLogs = document.createElement('ol');
-			divResultLogs.appendChild(olLogs);
+			divResultLogs2.appendChild(olLogs);
 		}
 		
 		if (evt.data.type === 'result') {
@@ -448,7 +450,7 @@ async function clickCount() {
 			
 			let elP = document.createElement('p');
 			elP.innerText = 'Count complete. The winning candidates are, in order of election:'
-			divResultLogs.appendChild(elP);
+			divResultLogs2.appendChild(elP);
 			
 			winners.sort(function(x1, x2) { return x1[1].order_elected - x2[1].order_elected; });
 			let elOl = document.createElement('ol');
@@ -457,7 +459,9 @@ async function clickCount() {
 				elLi.innerText = candidate;
 				elOl.appendChild(elLi);
 			}
-			divResultLogs.appendChild(elOl);
+			divResultLogs2.appendChild(elOl);
+			
+			document.getElementById('printPane').style.display = 'block';
 		}
 	}
 	
@@ -526,3 +530,134 @@ if (document.getElementById('txtSeed').value === '') {
 	let d = new Date();
 	document.getElementById('txtSeed').value = d.getFullYear() + pad(d.getMonth() + 1) + pad(d.getDate());
 }
+
+// Split across pages when required for printing
+
+function printResult() {
+	let printableWidth; // Printable width in CSS pixels
+	let paperSize = document.getElementById('selPaperSize').value;
+	if (paperSize === 'A4') {
+		printableWidth = (29.7 - 2) * 96 / 2.54;
+	} else if (paperSize === 'A3') {
+		printableWidth = (42.0 - 2) * 96 / 2.54;
+	} else if (paperSize === 'letter') {
+		printableWidth = (27.9 - 2) * 96 / 2.54;
+	}
+	printableWidth = Math.round(printableWidth);
+	
+	let wprint = window.open('');
+	wprint.document.title = 'pyRCV2 Report';
+	
+	// Add stylesheets
+	for (let elCSSBase of document.querySelectorAll('head link')) {
+		let elCSS = wprint.document.createElement('link');
+		elCSS.rel = elCSSBase.rel;
+		elCSS.type = elCSSBase.type;
+		elCSS.href = elCSSBase.href;
+		wprint.document.head.appendChild(elCSS);
+	}
+	
+	// Configure printing
+	let elStyle = wprint.document.createElement('style');
+	elStyle.innerHTML = '@page { size: ' + paperSize + ' landscape; margin: 1cm; } @media print { body { padding: 0; } }';
+	wprint.document.head.appendChild(elStyle);
+	
+	let elContainer = wprint.document.createElement('div');
+	elContainer.id = 'printContainer';
+	elContainer.style.width = printableWidth + 'px';
+	wprint.document.body.appendChild(elContainer);
+	
+	// Copy result logs 1
+	let divResultLogs1 = document.getElementById('resultLogs1');
+	let divResultLogs2 = wprint.document.createElement('div');
+	divResultLogs2.innerHTML = divResultLogs1.innerHTML;
+	elContainer.appendChild(divResultLogs2);
+	
+	// Parse table, accounting for rowspan
+	let elTrs1 = document.querySelector('#result').rows;
+	let rows = [];
+	for (let elTr1 of elTrs1) {
+		rows.push([]);
+	}
+	for (let r = 0; r < elTrs1.length; r++) {
+		for (let c = 0; c < elTrs1[r].cells.length; c++) {
+			let elTd1 = elTrs1[r].cells[c];
+			rows[r].push(elTd1);
+			
+			let rowspan = elTd1.getAttribute('rowspan');
+			// NB: Only works for rowspan in first column
+			if (rowspan !== null && c == 0) {
+				rowspan = parseInt(rowspan);
+				// Add ghost cells
+				for (let i = 1; i < rowspan; i++) {
+					rows[r + i].push(null);
+				}
+			}
+		}
+	}
+	
+	function copyColumn(c, elTrs2) {
+		let tdsAdded = [];
+		for (let r = 0; r < rows.length; r++) {
+			if (c < rows[r].length) {
+				let elTd1 = rows[r][c];
+				if (elTd1 !== null) {
+					let elTd2 = wprint.document.createElement('td');
+					elTd2.innerHTML = elTd1.innerHTML;
+					elTd2.className = elTd1.className;
+					elTd2.setAttribute('rowspan', elTd1.getAttribute('rowspan'));
+					elTd2.setAttribute('style', elTd1.getAttribute('style'));
+					elTrs2[r].appendChild(elTd2);
+					tdsAdded.push(elTd2);
+				}
+			}
+		}
+		return tdsAdded;
+	}
+	
+	function copyTableColumns(startCol) {
+		// Add table
+		let elTable2 = wprint.document.createElement('table');
+		elTable2.className = 'result';
+		if (startCol > 1) {
+			elTable2.style.pageBreakBefore = 'always';
+		}
+		elContainer.appendChild(elTable2);
+		
+		// Add rows
+		let elTrs2 = [];
+		for (let elTr1 of elTrs1) {
+			let elTr2 = wprint.document.createElement('tr');
+			elTr2.className = elTr1.className;
+			elTrs2.push(elTr2);
+			elTable2.appendChild(elTr2);
+		}
+		
+		// Copy first column
+		copyColumn(0, elTrs2);
+		
+		// Copy column by column
+		for (let c = startCol; c < rows[0].length + 1; c++) { // +1 to account for final status column
+			let tdsAdded = copyColumn(c, elTrs2);
+			
+			// Check if overflowed
+			if (elTable2.clientWidth > printableWidth) {
+				for (let elTd2 of tdsAdded) {
+					elTd2.remove();
+				}
+				// Start new table
+				return copyTableColumns(c);
+			}
+		}
+	}
+	
+	copyTableColumns(1);
+	
+	// Copy result logs2
+	divResultLogs1 = document.getElementById('resultLogs2');
+	divResultLogs2 = wprint.document.createElement('div');
+	divResultLogs2.innerHTML = divResultLogs1.innerHTML;
+	elContainer.appendChild(divResultLogs2);
+	
+	wprint.print();
+}
diff --git a/html/main.css b/html/main.css
index 8ef5c86..30623ee 100644
--- a/html/main.css
+++ b/html/main.css
@@ -33,12 +33,6 @@ body {
 	padding-bottom: 0.5em;
 }
 
-@media print {
-	.menudiv {
-		display: none;
-	}
-}
-
 .menudiv .subheading {
 	font-size: 0.8em;
 	font-weight: bold;
@@ -88,6 +82,15 @@ tr.info td {
 	background-color: #edededff;
 }
 
+@media print {
+	body.interactive > * {
+		display: none;
+	}
+	#printWarning {
+		display: block !important;
+	}
+}
+
 /* Form styling */
 /* Adapted in part from https://github.com/nathansmith/formalize (GPL/MIT) */
 
