From 020bcbdfd1e0c5ed802e783ec2cd8f6b3895d597 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20G=C3=B3rny?= <zrchos@gmail.com>
Date: Thu, 3 Oct 2019 21:03:13 +0200
Subject: [PATCH] Move committees table to a separate template

---
 src/index.ts                | 17 ++++++++++----
 src/{ => styles}/styles.css |  2 +-
 src/templates/content.pug   | 45 +------------------------------------
 src/templates/table.pug     | 21 +++++++++++++++++
 4 files changed, 36 insertions(+), 49 deletions(-)
 rename src/{ => styles}/styles.css (99%)
 create mode 100644 src/templates/table.pug

diff --git a/src/index.ts b/src/index.ts
index 68e2364..e278095 100644
--- a/src/index.ts
+++ b/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();
 });
diff --git a/src/styles.css b/src/styles/styles.css
similarity index 99%
rename from src/styles.css
rename to src/styles/styles.css
index 423a348..20f833e 100644
--- a/src/styles.css
+++ b/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;
diff --git a/src/templates/content.pug b/src/templates/content.pug
index b36b576..c4760a3 100644
--- a/src/templates/content.pug
+++ b/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
diff --git a/src/templates/table.pug b/src/templates/table.pug
new file mode 100644
index 0000000..787fcf1
--- /dev/null
+++ b/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