Opettajien lisääminen ja poisto

index.html

@@ -18,6 +18,11 @@
 
 		<details class="ruutu" open>
 			<summary>Opettajat</summary>
+			<ul id="opettajat-lista"></ul>
+			<form id="opettajat-uusi">
+				<input id="opettajat-uusi-nimi" type="text" placeholder="nimi">
+				<input id="opettajat-uusi-lyhenne" type="text" placeholder="lyhenne">
+				<input type="submit" value="+">
 		</details>
 
 		<details class="ruutu" open>

käyttöliittymä.js

@@ -15,6 +15,28 @@ document.getElementById('luokat-uusi').addEventListener('submit', (e) => {
 	}));
 });
 
+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;
+		if (nimi !== '' || lyhenne !== '') {
+			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;
+});
+
 function suorita([tietokanta, muutokset]) {
 	for (const muutos of muutokset) {
 		suoritaMuutos(tietokanta, muutos);
@@ -26,8 +48,7 @@ function suoritaMuutos(tietokanta, muutos) {
 	const {taulu, id, vanha, uusi} = muutos;
 	if (taulu === taulut.luokat && vanha === undefined) {
 		// Uusi luokka
-		const järjestys = tietokanta.järjestyksessä(taulu, vertaa);
-		const seuraavaId = järjestys[järjestys.indexOf(id) + 1];
+		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
@@ -39,11 +60,31 @@ function suoritaMuutos(tietokanta, muutos) {
 		// Luokka poistettu
 		const luokka = document.getElementById(`luokka-${id}`);
 		luokka.parentElement.removeChild(luokka);
+	// 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
+		const opettaja = document.getElementById(`opettaja-${id}`);
+		opettaja.parentElement.removeChild(opettaja);
+	// TODO: opettaja 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);
@@ -64,3 +105,19 @@ function luoLuokka(id, nimi) {
 	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;
+}

tietokanta.js

@@ -2,6 +2,7 @@
 
 const taulut = {
 	luokat: 'luokat',
+	opettajat: 'opettajat',
 };
 
 class Transaktio {
@@ -91,7 +92,9 @@ class Tietokanta {
 	}
 
 	constructor() {
-		this.taulut.set(taulut.luokat, new Map);
+		for (let taulu in taulut) {
+			this.taulut.set(taulu, new Map);
+		}
 	}
 
 	transaktio(funktio) {