Add demo-04: signature list generator with code cleanup task

demo-04/main.js

@@ -0,0 +1,120 @@
+var DATA_STORE = {};
+
+function populateTable() {
+    let file_list = document.getElementById('fileinput').files;
+    if (file_list.length > 0) {
+        let csv_file = file_list[0];
+        Papa.parse(csv_file, {
+            header: true,
+            complete: function(results) {
+		DATA_STORE['participants'] = results.data.filter(teilnehmer => teilnehmer["Familienname"] !== undefined);
+
+                
+		DATA_STORE['groupnames'] = new Set(DATA_STORE['participants'].map(teilnehmer => teilnehmer["Gruppe"]));
+		const group_select = document.getElementById('groupname-select');
+		group_select.innerHTML = '';
+		var default_option = document.createElement('option');
+		default_option.text = "Choose Group...";
+		default_option.selected = true;
+		group_select.appendChild(default_option);
+		DATA_STORE['groupnames'].forEach(group => {
+			var option = document.createElement('option');
+			option.value = group;
+			option.text = group;
+			group_select.appendChild(option);
+		});
+
+		updateCaptions();
+		updateTable();
+
+
+            }
+        });
+    }
+}
+
+function updateTable(filter_group) {
+	const table_body = document.getElementById('table-body');
+	table_body.innerHTML = '';
+	DATA_STORE["participants"].forEach(teilnehmer => {
+	    if (filter_group === undefined || (filter_group !== undefined && teilnehmer["Gruppe"] == filter_group)) {
+		var table_row = document.createElement('tr');
+		var name = document.createElement('td');
+		name.innerHTML = teilnehmer["Familienname"] + ", " + teilnehmer["Vorname"];
+		table_row.appendChild(name);
+		table_row.appendChild(document.createElement('td'));
+		table_body.appendChild(table_row);
+	    }
+	},
+	    false
+	);
+}
+
+function updateCaptions() {
+    let lvname = document.getElementById('lvname').value;
+    document.getElementById('list-caption').innerHTML = lvname;
+    document.getElementById('foot-title').innerHTML = lvname;
+
+    var groupname, subcaption;
+    if (document.getElementById('group_from_file').checked) {
+	groupname = document.getElementById('groupname-select').value;
+    } else {
+
+	groupname = document.getElementById('groupname').value;
+    }
+
+    let listdate = document.getElementById('date').value;
+    if (listdate != "") {
+	listdate = new Date(listdate);
+	subcaption = `${groupname}, ${listdate.toLocaleDateString('de-AT')}`;
+    } else {
+	subcaption = groupname;
+    }
+    document.getElementById('list-subcaption').innerHTML = subcaption;
+    document.getElementById('foot-group-date').innerHTML = subcaption;
+}
+
+document.getElementById('fileinput').addEventListener('change', populateTable);
+
+document.querySelectorAll('input, select').forEach(
+    elem => elem.addEventListener('input', updateCaptions),
+    false
+);
+
+document.querySelectorAll('select').forEach(
+    elem => elem.addEventListener('input', () => {
+	    updateCaptions();
+	    updateTable(elem.value);
+    }),
+    false
+);
+
+
+document.getElementById('group_from_file').addEventListener('change', (evt) => {
+    const groupname_input = document.getElementById('groupname');
+    const groupname_select = document.getElementById('groupname-select');
+    if (evt.target.checked) {
+	groupname_input.disabled = true;
+	groupname_input.hidden = true;
+	groupname_select.disabled = false;
+	groupname_select.hidden = false;
+    } else {
+	groupname_input.disabled = false;
+	groupname_input.hidden = false;
+	groupname_select.hidden = true;
+	groupname_select.disabled = true;
+	updateTable();
+    }
+});
+
+document.getElementById('include_logo').addEventListener('change', (evt) => {
+    if (evt.target.checked) {
+	document.getElementById('logo').style['display'] = 'block';
+    } else {
+	document.getElementById('logo').style['display'] = 'none';
+    }
+});
+
+document.addEventListener("DOMContentLoaded", function() {
+    updateCaptions();
+});