127 lines
3.8 KiB
JavaScript
127 lines
3.8 KiB
JavaScript
'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));
|
|
|
|
let muokkausVirhe = document.createElement('span');
|
|
muokkausVirhe.classList.add('virhe');
|
|
muokkausVirhe.classList.add('piilotettu');
|
|
muokkausVirhe.appendChild(document.createTextNode(''));
|
|
luokkaAsteListassa.appendChild(muokkausVirhe);
|
|
|
|
// Luo muokkauspainike ja -lomake, joista vain yksi on näkyvillä kerralla
|
|
let muokkausLomake = document.createElement('form');
|
|
muokkausLomake.classList.add('piilotettu');
|
|
muokkausLomake.classList.add('luokka-aste-lomake');
|
|
let asteValitsin = document.createElement('input');
|
|
asteValitsin.classList.add('luokka-aste-kenttä');
|
|
asteValitsin.type = 'number';
|
|
asteValitsin.min = 1;
|
|
asteValitsin.value = aste;
|
|
muokkausLomake.append(asteValitsin);
|
|
let muokkausLomakePainike = document.createElement('input');
|
|
muokkausLomakePainike.type = 'submit';
|
|
muokkausLomakePainike.value = '✓';
|
|
muokkausLomake.appendChild(muokkausLomakePainike);
|
|
muokkausLomake.addEventListener('submit', (tapahtuma) => {
|
|
tapahtuma.preventDefault();
|
|
let uusiAste = parseInt(asteValitsin.value);
|
|
if (luokkaAsteet.asteet[uusiAste] === undefined || aste === uusiAste) {
|
|
suorita(tapahtumaTyypit.muutaAste, aste, uusiAste);
|
|
piirräLuokat();
|
|
} else {
|
|
muokkausVirhe.firstChild.textContent =
|
|
`Luokka-aste ${uusiAste} on jo olemassa.`;
|
|
muokkausVirhe.classList.remove('piilotettu');
|
|
}
|
|
});
|
|
luokkaAsteListassa.appendChild(muokkausLomake);
|
|
|
|
let muokkausPainike = luoPainike('✎', () => {
|
|
muokkausLomake.classList.remove('piilotettu');
|
|
muokkausPainike.classList.add('piilotettu');
|
|
});
|
|
luokkaAsteListassa.appendChild(muokkausPainike);
|
|
|
|
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
|