Refactor tables to makeTableSkeleton()

src/ts/frontend.ts

@@ -18,6 +18,20 @@ function hexColours(numColours: number): Array<string> {
 	return palette("cb-Set1", numColours).map( function (hex: string) {
 		return `#${String(hex)}`; })
 }
+/**
+ * Make a table with headings
+ *
+ * TODO: boolean for striped
+ */
+function makeTableSkeleton(tableId: string, headings: Array<string>) {
+	let output = `<table id="${tableId}" class="table table-striped">
+	<thead>`;
+	for (let head of headings) {
+		output += `<th>${head}</th>`;
+	}
+	output += "</thead><tbody></tbody></table>";
+	return output;
+}
 
 function buildData(): string {
 	let output = "";
@@ -45,16 +59,8 @@ function getResults():void {
 			     </div>`);
 
 	resultsCardBody.append(`<h3 class="card-subtitle my-1">Outcome Balances</h3>`);
-	resultsCardBody.append(`<table class="table table-striped" id="balanceTable">
-			     <thead><th>Balance</th> <th>Count</th> <th>Percentage</th></thead>
-			     <tbody></tbody>
-			     </table>`);
-
-	resultsCardBody.append(`<h3 class="card-subtitle my-1">Outcomes</h3>`);
-	resultsCardBody.append(`<table class="table table-striped" id="outcomeTable">
-			     <thead><th>Outcome</th> <th>Count</th> <th>Percentage</th></thead>
-			     <tbody></tbody>
-			     </table>`);
+	resultsCardBody.append(makeTableSkeleton("balanceTable", ["Balance", "Count", "Percentage"]));
+	resultsCardBody.append(makeTableSkeleton("outcomeTable", ["Outcome", "Count", "Percentage"]));
 
 	let bc = rollstats.balanceCounts;
 	let keys = Object.keys(bc);