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ä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('lisää-tila').addEventListener('submit', (tapahtuma) => {
	tapahtuma.preventDefault();
	let nimiElementti = document.getElementById('tila-nimi');
	suorita(tapahtumaTyypit.lisääTila, nimiElementti.value);
	nimiElementti.value = '';
	piirräKaikki();
});

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 tilaElementti = document.getElementById('tunti-tila');

	let nimi = nimiElementti.value;
	let luokka = luokkaElementti.value;
	let opettajaLyhenne = opettajaElementti.value;
	let tila = parseInt(tilaElementti.value);
	suorita(
		tapahtumaTyypit.lisääTunti,
		nimi,
		[luokka],
		[opettajaLyhenne],
		[tila],
	);

	nimiElementti.value = '';
	luokkaElementti.value = '';
	opettajaElementti.value = '';
	tilaElementti.value = '';

	piirräKaikki();
});

function piirräKaikki() {
	piirräLuokat();
	piirräOpettajat();
	piirräTilat();
	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';
	tuntiLuokkaValinta.required = true;
	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';
	tuntiOpettajaValinta.required = true;
	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äTilat() {
	let vanhaTilaLista = document.getElementById('tilat');
	let tilaLista = luoTilaLista();
	vanhaTilaLista.parentNode.replaceChild(
		tilaLista,
		vanhaTilaLista
	);

	let vanhaTuntiTilaValinta = document.getElementById('tunti-tila');
	let tuntiTilaValinta = document.createElement('select');
	tuntiTilaValinta.id = 'tunti-tila';
	tuntiTilaValinta.required = true;
	for (let [id, tila] of tilat.tilat()) {
		let valinta = document.createElement('option');
		valinta.appendChild(document.createTextNode(tila));
		valinta.value = id;
		tuntiTilaValinta.appendChild(valinta);
	}
	tuntiTilaValinta.value = '';
	vanhaTuntiTilaValinta.parentNode.replaceChild(
		tuntiTilaValinta,
		vanhaTuntiTilaValinta
	);
}

function luoTilaLista() {
	let tilaLista = document.createElement('ul');
	tilaLista.id = 'tilat';

	for (let [id, tila] of tilat.tilat()) {
		let tilaListassa = document.createElement('li');
		tilaListassa.appendChild(luoPainike('-', () => {
			suorita(tapahtumaTyypit.poistaTila, id);
			piirräKaikki();
		}));

		let tilanNimi = document.createElement('span');
		tilanNimi.appendChild(document.createTextNode(`${tila}`));
		tilaListassa.appendChild(tilanNimi);

		tilaLista.appendChild(tilaListassa);
	}

	return tilaLista;
}

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 [id, tunti] of tunnit.järjestyksessä()) {
		let tuntiListassa = document.createElement('li');

		tuntiListassa.appendChild(luoPainike('+', () => {
			suorita(
				tapahtumaTyypit.lisääTunti,
				tunti.nimi,
				tunti.luokat.alkiot(),
				tunti.opettajaLyhenteet.alkiot(),
				tunti.tilat.alkiot()
			);
			piirräKaikki();
		}));

		tuntiListassa.appendChild(luoPainike('-', () => {
			suorita(tapahtumaTyypit.poistaTunti, id);
			piirräKaikki();
		}));

		let tuntiTiiviste = document.createElement('span');
		let nimi = tunti.nimi;
		let luokat = tunti.luokat.alkiot().join(', ');
		let opettajat = tunti.opettajaLyhenteet.alkiot().join(', ');
		let tunninTilat = tilojenNimet(tilat, tunti.tilat.alkiot());
		let teksti = `${nimi} ${luokat} ${opettajat} ${tunninTilat}`;
		tuntiTiiviste.appendChild(document.createTextNode(teksti));
		tuntiListassa.appendChild(tuntiTiiviste);

		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