lukujarjestaja/käyttöliittymä.js

'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
	);
}

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
	);
}

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