Move committees table to a separate template

src/index.ts

@@ -1,8 +1,9 @@
 import Chartist, {ChartistStatic} from 'chartist';
 import {committees, constituencies} from './data';
 import {calculateMandates} from './mandates';
-import template from './templates/constituency.pug';
-import './styles.css';
+import constituencyTemplate from './templates/constituency.pug';
+import tableTemplate from './templates/table.pug';
+import './styles/styles.css';
 
 const clearResults = (bar: ChartistStatic['Bar'], pie: ChartistStatic['Pie']) => {
 	document.querySelectorAll<HTMLTableDataCellElement>(`tr td:last-child`).forEach(td => {
@@ -25,8 +26,8 @@ const displayConstituencyResults = () => {
 				mandates,
 			}))
 			: [];
-		data.sort((a, b) => b.support - a.support)
-		container!.insertAdjacentHTML('beforeend', template({
+		data.sort((a, b) => b.support - a.support);
+		container!.insertAdjacentHTML('beforeend', constituencyTemplate({
 			number: index + 1,
 			name: constituency.name,
 			size: constituency.size,
@@ -95,6 +96,13 @@ const handleCalculateButtonClick = (event: Event) => {
 	}));
 }
 
+const generateTable = () => {
+	const form = document.getElementById('support-form');
+	form!.insertAdjacentHTML('afterbegin', tableTemplate({
+		committees,
+	}));
+}
+
 const bindActions = () => {
 	document
 		.querySelector('#calculate-button')!
@@ -102,5 +110,6 @@ const bindActions = () => {
 }
 
 document.addEventListener('DOMContentLoaded', () => {
+	generateTable();
 	bindActions();
 });

src/styles/styles.css

@@ -118,7 +118,7 @@ h2 {
 }
 
 #support-form input {
-	width: 3.5rem;
+	width: 4rem;
 	padding: 0.25rem;
 	margin: 0 0.25rem 0 0.5rem;
 	text-align: right;

src/templates/content.pug

@@ -17,51 +17,8 @@ p.
 	W przypadku PiS-u odpowiednikiem z poprzednich wyborów jest ten sam komitet. Dla pozostałych
 	komitetów zastosowano następujące odpowiedniki: KO ≈ PO + Nowoczesna; Lewica ≈ Zjednoczona
 	Lewica + Razem; PSL ≈ PSL + ¼ Kukiz’15; Konfederacja ≈ KORWiN + ¾ Kukiz’15.
+
 form#support-form
-	table
-		tr
-			th Komitet
-			th Poparcie
-			th Mandaty
-		tr(class='pis')
-			td
-				label(for='pis') Prawo i Sprawiedliwość
-			td
-				input(type='number' step='any' id='pis' name='pis')
-				| %
-			td
-		tr(class='ko')
-			td
-				label(for='ko') Koalicja Obywatelska
-			td
-				input(type='number' step='any' id='ko' name='ko')
-				| %
-			td
-		tr(class='lewica')
-			td
-				label(for='lewica') SLD – Lewica
-			td
-				input(type='number' step='any' id='lewica' name='lewica')
-				| %
-			td
-		tr(class='psl')
-			td
-				label(for='psl') PSL – Koalicja Polska
-			td
-				input(type='number' step='any' id='psl' name='psl')
-				| %
-			td
-		tr(class='konfederacja')
-			td
-				label(for='konfederacja') Konfederacja
-			td
-				input(type='number' step='any' id='konfederacja' name='konfederacja')
-				| %
-			td
-		tr(class='mn')
-			td Mniejszość Niemiecka
-			td
-			td
 	button#calculate-button Oblicz
 
 .charts-row

src/templates/table.pug

@@ -0,0 +1,21 @@
+table
+	tr
+		th Komitet
+		th Poparcie
+		th Mandaty
+	each committee in committees
+		tr(class=committee.id)
+			td
+				label(for=committee.id) #{committee.name}
+			td
+				if committee.id !== 'mn'
+					input(
+						type='number'
+						step='any'
+						min=0
+						max=100
+						id=committee.id
+						name=committee.id
+					)
+					| %
+			td