237 lines
7.4 KiB
JavaScript
237 lines
7.4 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();
|
|
});
|
|
|
|
document.getElementById('lisää-opettaja').addEventListener('submit', (tapahtuma) => {
|
|
tapahtuma.preventDefault();
|
|
let virheElementti = document.getElementById('opettaja-virhe');
|
|
let nimiElementti = document.getElementById('opettaja-nimi');
|
|
let lyhenneElementti = document.getElementById('opettaja-lyhenne');
|
|
|
|
let nimi = nimiElementti.value;
|
|
let lyhenne = lyhenneElementti.value;
|
|
// Jos käyttäjä ei ole manuallisesti lisännyt lyhennettä, käytä
|
|
// automaattisesti luotua.
|
|
if (lyhenne === '') {
|
|
lyhenne = lyhenneElementti.placeholder;
|
|
}
|
|
|
|
let toinenNimi = opettajat.lyhenne(lyhenne);
|
|
if (toinenNimi === undefined) {
|
|
suorita(tapahtumaTyypit.lisääOpettaja, lyhenne, nimi);
|
|
nimiElementti.value = '';
|
|
lyhenneElementti.value = '';
|
|
lyhenneElementti.placeholder = '';
|
|
virheElementti.classList.add('piilotettu');
|
|
piirräOpettajat();
|
|
} else if (toinenNimi === nimi) {
|
|
virheElementti.firstChild.textContent =
|
|
`Opettaja ${nimi} on jo listassa`;
|
|
virheElementti.classList.remove('piilotettu');
|
|
} else {
|
|
virheElementti.firstChild.textContent =
|
|
`Jokaisella opettajalla tulee olla oma lyhenne. Lyhenne ${lyhenne} on jo käytössä opettajalla ${toinenNimi}`;
|
|
virheElementti.classList.remove('piilotettu');
|
|
}
|
|
});
|
|
|
|
document.getElementById('opettaja-nimi').addEventListener('input', () => {
|
|
let osat = document.getElementById('opettaja-nimi').value.split(' ');
|
|
let lyhenne = [];
|
|
for (let osa of osat) {
|
|
if (osa.length !== 0) {
|
|
// TODO: Toimii vain yhden koodipisteen pituisilla
|
|
// grafeemiklustereilla.
|
|
let koodi = osa.codePointAt(0);
|
|
lyhenne.push(String.fromCodePoint(koodi));
|
|
}
|
|
}
|
|
lyhenne = lyhenne.join('');
|
|
document.getElementById('opettaja-lyhenne').placeholder = lyhenne;
|
|
});
|
|
|
|
function piirräKaikki() {
|
|
piirräLuokat();
|
|
piirräOpettajat();
|
|
}
|
|
|
|
function piirräLuokat() {
|
|
let vanhaLuokkaAsteLista = document.getElementById('luokka-asteet');
|
|
let luokkaAsteLista = luoLuokkaAsteLista();
|
|
vanhaLuokkaAsteLista.parentNode.replaceChild(
|
|
luokkaAsteLista,
|
|
vanhaLuokkaAsteLista
|
|
);
|
|
|
|
let vanhaTuntiLuokkaValinta = document.getElementById('tunti-luokka');
|
|
let tuntiLuokkaValinta = document.createElement('select');
|
|
tuntiLuokkaValinta.id = 'tunti-luokka';
|
|
for (let luokka of luokkaAsteet.luokat()) {
|
|
let valinta = document.createElement('option');
|
|
valinta.appendChild(document.createTextNode(luokka));
|
|
tuntiLuokkaValinta.appendChild(valinta);
|
|
}
|
|
vanhaTuntiLuokkaValinta.parentNode.replaceChild(
|
|
tuntiLuokkaValinta,
|
|
vanhaTuntiLuokkaValinta
|
|
);
|
|
}
|
|
|
|
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 piirräOpettajat() {
|
|
let vanhaOpettajaLista = document.getElementById('opettajat');
|
|
let opettajaLista = luoOpettajaLista();
|
|
vanhaOpettajaLista.parentNode.replaceChild(
|
|
opettajaLista,
|
|
vanhaOpettajaLista
|
|
);
|
|
|
|
let vanhaTuntiOpettajaValinta = document.getElementById('tunti-opettaja');
|
|
let tuntiOpettajaValinta = document.createElement('select');
|
|
tuntiOpettajaValinta.id = 'tunti-opettaja';
|
|
for (let [lyhenne, nimi] of opettajat.opettajat()) {
|
|
let valinta = document.createElement('option');
|
|
valinta.appendChild(document.createTextNode(nimi));
|
|
valinta.value = lyhenne;
|
|
tuntiOpettajaValinta.appendChild(valinta);
|
|
}
|
|
vanhaTuntiOpettajaValinta.parentNode.replaceChild(
|
|
tuntiOpettajaValinta,
|
|
vanhaTuntiOpettajaValinta
|
|
);
|
|
}
|
|
|
|
function luoOpettajaLista() {
|
|
let opettajaLista = document.createElement('ul');
|
|
opettajaLista.id = 'opettajat';
|
|
|
|
for (let [lyhenne, nimi] of opettajat.opettajat()) {
|
|
opettajaLista.appendChild(luoOpettajaListassa(lyhenne, nimi));
|
|
}
|
|
|
|
return opettajaLista;
|
|
}
|
|
|
|
function luoOpettajaListassa(lyhenne, nimi) {
|
|
let opettajaListassa = document.createElement('li');
|
|
|
|
opettajaListassa.appendChild(luoPainike('-', () => {
|
|
suorita(tapahtumaTyypit.poistaOpettaja, lyhenne);
|
|
piirräOpettajat();
|
|
}));
|
|
|
|
let opettajanNimi = document.createElement('span');
|
|
opettajanNimi.appendChild(document.createTextNode(`${lyhenne} ${nimi}`));
|
|
opettajaListassa.appendChild(opettajanNimi);
|
|
|
|
return opettajaListassa;
|
|
}
|
|
|
|
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
|