294 lines
9.1 KiB
JavaScript
294 lines
9.1 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äKaikki();
|
||
});
|
||
|
||
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äKaikki();
|
||
} 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;
|
||
});
|
||
|
||
document.getElementById('lisää-tunti').addEventListener('submit', (tapahtuma) => {
|
||
tapahtuma.preventDefault();
|
||
let nimiElementti = document.getElementById('tunti-nimi');
|
||
let luokkaElementti = document.getElementById('tunti-luokka');
|
||
let opettajaElementti = document.getElementById('tunti-opettaja');
|
||
let kertaaViikossaElementti = document.getElementById('tunti-kertaa-viikossa');
|
||
|
||
let nimi = nimiElementti.value;
|
||
let luokka = luokkaElementti.value;
|
||
let opettajaLyhenne = opettajaElementti.value;
|
||
let kertaaViikossa = parseInt(kertaaViikossaElementti.value);
|
||
suorita(tapahtumaTyypit.lisääTunti, nimi, luokka, opettajaLyhenne, kertaaViikossa);
|
||
|
||
nimiElementti.value = '';
|
||
luokkaElementti.value = '';
|
||
opettajaElementti.value = '';
|
||
kertaaViikossaElementti.value = 1;
|
||
|
||
piirräKaikki();
|
||
});
|
||
|
||
function piirräKaikki() {
|
||
piirräLuokat();
|
||
piirräOpettajat();
|
||
piirräTunnit();
|
||
}
|
||
|
||
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);
|
||
}
|
||
tuntiLuokkaValinta.value = '';
|
||
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äKaikki();
|
||
}));
|
||
luokkaAsteListassa.appendChild(luoPainike('-', () => {
|
||
if (luokkaAsteet.asteet[aste].luokat().length > 1) {
|
||
suorita(tapahtumaTyypit.poistaLuokka, aste);
|
||
} else {
|
||
suorita(tapahtumaTyypit.poistaAste, aste);
|
||
}
|
||
piirräKaikki();
|
||
}));
|
||
|
||
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äKaikki();
|
||
} 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);
|
||
}
|
||
tuntiOpettajaValinta.value = '';
|
||
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äKaikki();
|
||
}));
|
||
|
||
let opettajanNimi = document.createElement('span');
|
||
opettajanNimi.appendChild(document.createTextNode(`${lyhenne} ${nimi}`));
|
||
opettajaListassa.appendChild(opettajanNimi);
|
||
|
||
return opettajaListassa;
|
||
}
|
||
|
||
function piirräTunnit() {
|
||
let vanhaTuntiLista = document.getElementById('tunnit');
|
||
let tuntiLista = luoTuntiLista();
|
||
vanhaTuntiLista.parentNode.replaceChild(
|
||
tuntiLista,
|
||
vanhaTuntiLista
|
||
);
|
||
}
|
||
|
||
function luoTuntiLista() {
|
||
let tuntiLista = document.createElement('ul');
|
||
tuntiLista.id = 'tunnit';
|
||
|
||
for (let [_, tunti] of tunnit.järjestyksessä()) {
|
||
let tuntiListassa = document.createElement('li');
|
||
let nimi = tunti.nimi;
|
||
let luokat = tunti.luokat.join(', ');
|
||
let opettajat = tunti.opettajaLyhenteet.join(', ');
|
||
let kertaaViikossa = tunti.kertaaViikossa;
|
||
let teksti;
|
||
if (kertaaViikossa === 1) {
|
||
teksti = `${nimi} ${luokat} ${opettajat}`;
|
||
} else {
|
||
teksti = `${nimi} ${luokat} ${opettajat} ×${kertaaViikossa}`;
|
||
}
|
||
tuntiListassa.appendChild(document.createTextNode(teksti));
|
||
tuntiLista.appendChild(tuntiListassa);
|
||
}
|
||
|
||
return tuntiLista;
|
||
}
|
||
|
||
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
|