From caed60a2d9482a9a63137dc454943b9d4378a8ca Mon Sep 17 00:00:00 2001 From: Benjamin Hackl Date: Thu, 15 Jan 2026 23:02:09 +0100 Subject: [PATCH] Add demo-04: signature list generator with code cleanup task --- demo-04/README.md | 49 ++++++++++++++++++ demo-04/index.html | 120 +++++++++++++++++++++++++++++++++++++++++++++ demo-04/logo.png | Bin 0 -> 11516 bytes demo-04/main.css | 116 +++++++++++++++++++++++++++++++++++++++++++ demo-04/main.js | 120 +++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 405 insertions(+) create mode 100644 demo-04/README.md create mode 100644 demo-04/index.html create mode 100644 demo-04/logo.png create mode 100644 demo-04/main.css create mode 100644 demo-04/main.js diff --git a/demo-04/README.md b/demo-04/README.md new file mode 100644 index 0000000..3065350 --- /dev/null +++ b/demo-04/README.md @@ -0,0 +1,49 @@ +# Demo 04: Signature List Generator - Code Cleanup + +## Purpose + +This is a static web application that turns student lists exported from UNIGRAZonline / CAMPUSonline (as "CSV for Excel") into nicely formatted signature lists for checking attendance. Everything happens locally in the browser - no sensitive data is transmitted anywhere. + +**Features:** +- Upload CSV student lists exported from UNIGRAZonline +- Filter by group name (manually entered or extracted from file) +- Customizable course name and date +- Include/exclude Uni Graz logo +- Print-ready signature lists +- Privacy-first: all processing happens client-side + +## Technology Stack + +- **Frontend:** Pure HTML5, CSS3, and vanilla JavaScript +- **Styling:** Bootstrap 5.0.2 (via CDN) +- **CSV Parsing:** PapaParse 5.4.1 (via CDN) +- **Fonts:** Nunito Sans (Uni Graz corporate font) + +## Task: Code Cleanup + +This codebase needs cleanup and modernization. Your goal is to iteratively improve the codebase by: + +1. **Fixing bugs and issues** (syntax errors, missing semicolons, etc.) +2. **Modernizing JavaScript** (replace `var` with `const`/`let`, use modern patterns) +3. **Adding error handling** (invalid CSV, missing columns, edge cases) +4. **Improving accessibility** (ARIA labels, keyboard navigation) +5. **Code quality improvements** (consistent styling, remove duplication, better structure) + +## Process + +Work with the agent to identify issues and iteratively improve the code. For each change: +- Explain what you're fixing and why +- Get the agent's approval before making changes +- Test the changes to ensure nothing breaks +- Document your changes in a CHANGES.md file + +## Files + +- `index.html` - Main HTML structure +- `main.css` - Styling and print styles +- `main.js` - Application logic +- `logo.png` - Uni Graz logo + +## Deployment + +This is a static site - simply upload all files to a web server. No build process or backend required. diff --git a/demo-04/index.html b/demo-04/index.html new file mode 100644 index 0000000..7f2ff95 --- /dev/null +++ b/demo-04/index.html @@ -0,0 +1,120 @@ + + + + + + + + + + Signature List Generator + + + +
+

Signature List Generator

+

+ Important: + Everything happens in your browser and locally on your computer, + no sensitive data is transmitted anywhere. +

+
+
+
+ + +
+
+
+
+ + + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ +
+
+
+
+
+
+ +
+
+ + + + + + + + + + + +
NameUnterschrift
+ + +
+
+ + + + + + diff --git a/demo-04/logo.png b/demo-04/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..1c26c2bb71fbdac2d71e3f5ea46c024985b02e77 GIT binary patch literal 11516 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 AV*mgE literal 0 HcmV?d00001 diff --git a/demo-04/main.css b/demo-04/main.css new file mode 100644 index 0000000..499c282 --- /dev/null +++ b/demo-04/main.css @@ -0,0 +1,116 @@ +:root { + --unigraz-primary: #ffd400; +} + +@font-face { + font-family: nunito_sans; + font-display: swap; + font-style: normal; + font-display: block; + font-weight: 300; + src: url(https://static.uni-graz.at/dist/unigraz/fonts/Nunito_Sans/nunito-sans-v12-latin_latin-ext-300.eot); + src: url(https://static.uni-graz.at/dist/unigraz/fonts/Nunito_Sans/nunito-sans-v12-latin_latin-ext-300.eot?#iefix) format("embedded-opentype"),url(https://static.uni-graz.at/dist/unigraz/fonts/Nunito_Sans/nunito-sans-v12-latin_latin-ext-300.woff2) format("woff2"),url(https://static.uni-graz.at/dist/unigraz/fonts/Nunito_Sans/nunito-sans-v12-latin_latin-ext-300.woff) format("woff"),url(https://static.uni-graz.at/dist/unigraz/fonts/Nunito_Sans/nunito-sans-v12-latin_latin-ext-300.ttf) format("truetype"),url(https://static.uni-graz.at/dist/unigraz/fonts/Nunito_Sans/nunito-sans-v12-latin_latin-ext-300.svg#NunitoSans) format("svg") +} + +@font-face { + font-display: swap; + font-family: nunito_sans; + font-style: italic; + font-display: block; + font-weight: 300; + src: url(https://static.uni-graz.at/dist/unigraz/fonts/Nunito_Sans/nunito-sans-v12-latin_latin-ext-300italic.eot); + src: url(https://static.uni-graz.at/dist/unigraz/fonts/Nunito_Sans/nunito-sans-v12-latin_latin-ext-300italic.eot?#iefix) format("embedded-opentype"),url(https://static.uni-graz.at/dist/unigraz/fonts/Nunito_Sans/nunito-sans-v12-latin_latin-ext-300italic.woff2) format("woff2"),url(https://static.uni-graz.at/dist/unigraz/fonts/Nunito_Sans/nunito-sans-v12-latin_latin-ext-300italic.woff) format("woff"),url(https://static.uni-graz.at/dist/unigraz/fonts/Nunito_Sans/nunito-sans-v12-latin_latin-ext-300italic.ttf) format("truetype"),url(https://static.uni-graz.at/dist/unigraz/fonts/Nunito_Sans/nunito-sans-v12-latin_latin-ext-300italic.svg#NunitoSans) format("svg") +} + +body { + font-family: nunito_sans; +} + +.bg-unigraz { + background-color: var(--unigraz-primary); +} + +#printbtn { + flex: 1; +} + +.btn-unigraz { + color: #000; + background-color: var(--unigraz-primary); + border-color: var(--unigraz-primary); +} + +.btn-unigraz:active, .btn-unigraz:hover { + color: #000; + background-color: #ffe24f; + border-color: #ffe24f; +} + +.navbar-brand { + font-weight: 600; +} + +.navbar-light .navbar-nav .nav-link { + color: rgba(0, 0, 0, .85); +} + +#logo { + float: right; +} + +table { + width: 100%; +} + +th { + border-right: 1px solid black; + border-bottom: 2px solid black; + padding: 5px; +} + +td { + height: 0.8cm; + font-size: small; + border-right: 1px solid black; + border-bottom: 1px solid black; + padding: 5px; +} + +tr > th:last-child, td:last-child { + border-right: none; +} + +tr > td:first-child { + width: 20%; + white-space: nowrap; + padding-right: 15px; +} + +tfoot td { + font-size: smaller; + border-bottom: none; +} + +#list-footer { + display: flex; +} + +#foot-group-date { + float: right; +} + +@media print { + table { + margin-bottom: 10cm; + } + .navbar, .generator-input, #contactModal { + display: none !important; + } + .container { + max-width: 90%; + } + #list-footer { + position: fixed; + bottom: -0.25cm; + } +} diff --git a/demo-04/main.js b/demo-04/main.js new file mode 100644 index 0000000..78b6608 --- /dev/null +++ b/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(); +});