lukujarjestaja/käyttöliittymä.js

'use strict';

document.getElementById('kumoa').addEventListener('click', () => {
	suorita(_tietokanta.kumoa());
});

document.getElementById('luokat-uusi').addEventListener('submit', (e) => {
	e.preventDefault();
	suorita(_tietokanta.transaktio((t) => {
		const luokanNimi = document.getElementById('luokat-uusi-nimi').value;
		t.lisää(taulut.luokat, luokanNimi)
		document.getElementById('luokat-uusi-nimi').value = '';
	}));
});

document.getElementById('opettajat-uusi').addEventListener('submit', (e) => {
	e.preventDefault();
	suorita(_tietokanta.transaktio((t) => {
		const nimi = document.getElementById('opettajat-uusi-nimi').value;
		const lyhenne = document.getElementById('opettajat-uusi-lyhenne').value;
		t.lisää(taulut.opettajat, {nimi, lyhenne});
		document.getElementById('opettajat-uusi-nimi').value = '';
		document.getElementById('opettajat-uusi-lyhenne').value = '';
	}));
});

document.getElementById('opettajat-uusi-nimi').addEventListener('change', () => {
	const nimi = document.getElementById('opettajat-uusi-nimi').value;
	// TODO: Kunnollinen tuki grafeemiklustereille
	// TODO: Älä ehdota lyhennettä, joka on jo käytössä
	const lyhenne = nimi.split(' ')
		.map((x) => String.fromCodePoint(x.codePointAt(0))).join('');
	document.getElementById('opettajat-uusi-lyhenne').value = lyhenne;
});

document.getElementById('tilat-uusi').addEventListener('submit', (e) => {
	e.preventDefault();
	suorita(_tietokanta.transaktio((t) => {
		const tilanNimi = document.getElementById('tilat-uusi-nimi').value;
		t.lisää(taulut.tilat, tilanNimi)
		document.getElementById('tilat-uusi-nimi').value = '';
	}));
});

function suorita([tietokanta, muutokset]) {
	for (const muutos of muutokset) {
		suoritaMuutos(tietokanta, muutos);
	}
	tallennaTietokanta(tietokanta);
}

function suoritaMuutos(tietokanta, muutos) {
	const {taulu, id, vanha, uusi} = muutos;
	if (taulu === taulut.luokat && vanha === undefined) {
		// Uusi luokka
		const seuraavaId = idJälkeen(tietokanta, taulu, id, vertaa);
		const luokatLista = document.getElementById('luokat-lista');
		// getElementById palauttaa null:n, jos id:tä ei löydy. Jos tämä luokka
		// on viimeinen, seuraavaId on undefined, eikä DOM:ssa ole luokkaa
		// "luokka-undefined". seuraava on siis null silloin kuin tämä luokka
		// tulee lisätä listan loppuun, joka vastaa insertBefore:n toimintaa
		const seuraava = document.getElementById(`luokka-${seuraavaId}`);
		luokatLista.insertBefore(luoLuokka(id, uusi), seuraava);
	} else if (taulu === taulut.luokat && uusi === undefined) {
		// Luokka poistettu
		poistaElementti(document.getElementById(`luokka-${id}`));
	// TODO: luokka muutos
	} else if (taulu === taulut.opettajat && vanha === undefined) {
		// Uusi opettaja
		const seuraavaId = idJälkeen(tietokanta, taulu, id,
			(a, b) => vertaa(a.nimi, b.nimi)
		);
		const opettajatLista = document.getElementById('opettajat-lista');
		// ks. kommentti uuden luokan tapauksessa
		const seuraava = document.getElementById(`opettaja-${seuraavaId}`);
		opettajatLista.insertBefore(luoOpettaja(id, uusi), seuraava);
	} else if (taulu === taulut.opettajat && uusi === undefined) {
		// Opettaja poistettu
		poistaElementti(document.getElementById(`opettaja-${id}`));
	// TODO: opettaja muutos
	} else if (taulu === taulut.tilat && vanha === undefined) {
		// Uusi tila
		const seuraavaId = idJälkeen(tietokanta, taulu, id, vertaa);
		const tilatLista = document.getElementById('tilat-lista');
		const seuraava = document.getElementById(`tila-${seuraavaId}`);
		tilatLista.insertBefore(luoTila(id, uusi), seuraava);
	} else if (taulu === taulut.tilat && uusi === undefined) {
		// Tila poistettu
		poistaElementti(document.getElementById(`tila-${id}`));
	// TODO: tila muutos
	} else {
		throw new Error(`Ei toteutettu ${taulu} ${id} ${vanha} ${uusi}`);
	}
}

function idJälkeen(tietokanta, taulu, id, vertaa) {
	const järjestys = tietokanta.järjestyksessä(taulu, vertaa);
	return järjestys[järjestys.indexOf(id) + 1];
}

function vertaa(a, b) {
	// TODO: Parempi vertailufunktio?
	return a.localeCompare(b);
}

function poistaElementti(elementti) {
	elementti.parentElement.removeChild(elementti);
}

function luoLuokka(id, nimi) {
	const li = document.createElement('li');
	li.id = `luokka-${id}`;
	const poistoPainike = document.createElement('input');
	poistoPainike.type = 'button';
	poistoPainike.value = '-';
	poistoPainike.addEventListener('click', () => {
		suorita(_tietokanta.transaktio((t) => {
			t.poista(taulut.luokat, id);
		}));
	});
	li.appendChild(poistoPainike);
	li.appendChild(document.createTextNode(nimi));
	return li;
}

function luoOpettaja(id, {nimi, lyhenne}) {
	const li = document.createElement('li');
	li.id = `opettaja-${id}`;
	const poistoPainike = document.createElement('input');
	poistoPainike.type = 'button';
	poistoPainike.value = '-';
	poistoPainike.addEventListener('click', () => {
		suorita(_tietokanta.transaktio((t) => {
			t.poista(taulut.opettajat, id);
		}));
	});
	li.appendChild(poistoPainike);
	li.appendChild(document.createTextNode(`${nimi} (${lyhenne})`));
	return li;
}

function luoTila(id, nimi) {
	const li = document.createElement('li');
	li.id = `tila-${id}`;
	const poistoPainike = document.createElement('input');
	poistoPainike.type = 'button';
	poistoPainike.value = '-';
	poistoPainike.addEventListener('click', () => {
		suorita(_tietokanta.transaktio((t) => {
			t.poista(taulut.tilat, id);
		}));
	});
	li.appendChild(poistoPainike);
	li.appendChild(document.createTextNode(nimi));
	return li;
}