diff --git a/käyttöliittymä.js b/käyttöliittymä.js new file mode 100644 index 0000000..8c1dfd8 --- /dev/null +++ b/käyttöliittymä.js @@ -0,0 +1,108 @@ +'use strict'; +document.getElementById('kumoa').addEventListener('click', () => { + kumoa(); + piirräKaikki(); +}); +document.getElementById('tee-uudelleen').addEventListener('click', () => { + teeUudelleen(); + piirräKaikki(); +}); + +document.getElementById('lisää-luokka-aste').addEventListener('click', () => { + suorita(tapahtumaTyypit.lisääAste); + piirräLuokat(); +}); + +function piirräKaikki() { + piirräLuokat(); +} + +function piirräLuokat() { + let vanhaLuokkaAsteLista = document.getElementById('luokka-asteet'); + let luokkaAsteLista = luoLuokkaAsteLista(); + vanhaLuokkaAsteLista.parentNode.replaceChild( + luokkaAsteLista, + vanhaLuokkaAsteLista + ); +} + +function luoLuokkaAsteLista() { + let luokkaAsteLista = document.createElement('ul'); + luokkaAsteLista.id = 'luokka-asteet'; + + for (let aste = 0; aste < luokkaAsteet.asteet.length; aste++) { + if (luokkaAsteet.asteet[aste] !== undefined) { + let luokkaAsteListassa = luoLuokkaAsteListassa(aste); + luokkaAsteLista.appendChild(luokkaAsteListassa); + } + } + + return luokkaAsteLista; +} + +function luoLuokkaAsteListassa(aste) { + let luokkaAsteListassa = document.createElement('li'); + luokkaAsteListassa.classList.add('luokka-aste'); + + luokkaAsteListassa.appendChild(luoPainike('+', () => { + suorita(tapahtumaTyypit.lisääLuokka, aste); + piirräLuokat(); + })); + luokkaAsteListassa.appendChild(luoPainike('-', () => { + if (luokkaAsteet.asteet[aste].luokat().length > 1) { + suorita(tapahtumaTyypit.poistaLuokka, aste); + } else { + suorita(tapahtumaTyypit.poistaAste, aste); + } + piirräLuokat(); + })); + + luokkaAsteListassa.appendChild(luoLuokkaLista(aste)); + + luokkaAsteListassa.appendChild(luoPainike('✎', () => { + // TODO: Älä käytä prompt():ia ja alert():ia + let vastaus = prompt('Uusi luokka-aste'); + if (vastaus === null) { + // Käytääjä painoi 'Peruuta' + return; + } + vastaus = parseInt(vastaus, 10); + if (vastaus === NaN) { + // Ei numero + alert('Luokka-asteen pitää olla numero'); + return; + } + if (vastaus < 1) { + // Luokka-aste alkaa 1:stä + alert('Luokka-asteeen pitää olla vähintään 1'); + return; + } + suorita(tapahtumaTyypit.muutaAste, aste, vastaus); + piirräLuokat(); + })); + + return luokkaAsteListassa; +} + +function luoLuokkaLista(aste) { + let luokkaLista = document.createElement('ul'); + luokkaLista.classList.add('luokat'); + + for (let luokka of luokkaAsteet.asteet[aste].luokat()) { + let luokkaListassa = document.createElement('li'); + luokkaListassa.appendChild(document.createTextNode(`${aste}${luokka}`)); + luokkaLista.appendChild(luokkaListassa); + } + + return luokkaLista; +} + +function luoPainike(teksti, funktio) { + let painike = document.createElement('input'); + painike.type = 'button'; + painike.value = teksti; + painike.addEventListener('click', funktio); + return painike; +} + +// TOOD: Käyttöliittymätestit diff --git a/lukujärjestäjä.html b/lukujärjestäjä.html index 2359524..598eb49 100644 --- a/lukujärjestäjä.html +++ b/lukujärjestäjä.html @@ -4,427 +4,35 @@